技术文档

前端普通增删改查

index.vue


<script setup lang="ts"> 
import Soure from './components/Soure.vue';
import Table from './components/Table.vue';
import { UserText } from './composables/UserText';
const {tableData, GetList} = UserText();



</script>

<template>  
    <Soure @submit="GetList"></Soure>
    <Table :data="tableData"></Table>
</template>

Dialog.vue

<template> 
    <el-dialog
        v-model="localVisible"
        :title="title"
        width="500" 
        :close-on-click-modal="false" 
        :before-close="Cancel"
    >
        <el-form :model="localFormData" label-width="80px">
        <el-form-item label="名字">
            <el-input v-model="localFormData.name" />
        </el-form-item> 
        <el-form-item label="密码">
            <el-input v-model="localFormData.passworded" />
        </el-form-item> 
        <el-form-item label="状态">
            <el-switch 
        :model-value=" localFormData.iStatus === 1"
        @update:model-value="(val: boolean)  => localFormData.iStatus = val ? 1 : 0" /> 
            {{ localFormData.iStatus }}
        </el-form-item> 
        <el-form-item label="备注">
            <el-input v-model="localFormData.memo" />
        </el-form-item> 
        <el-form-item label="创建时间">
            <el-date-picker
            v-model="localFormData.create_time"
            type="datetime"
            placeholder="Select date and time"
            
        /> 
        </el-form-item> 
        </el-form>
        <template #footer>
            <div class="dialog-footer">
            <el-button @click="Cancel">取消</el-button>
            <el-button  @click="reset">重置</el-button>
            <el-button type="primary" @click="submitForm"> 
                    提交 
            </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup> 

import {computed,watch,ref,onMounted} from 'vue'
import { UserText } from '../composables/UserText';
const { ToDialogForm,baseForm } = UserText();

import cloneDeep from 'lodash/cloneDeep';

const prop = defineProps<{
    "visible":any,
    "formdata":any,
}>()

const emit = defineEmits(["close","submit"])

const localVisible = ref(false);
const title = ref("新增");
const localFormData = ref(cloneDeep(baseForm));
const Cancel = () =>{
    //发送到父页面，visible 变成false
    emit("close",false);
}
console.log("localVisible",localVisible);
watch(()=>prop.visible,(val)=>{
    localVisible.value = val;  
},{ immediate: true })

watch(()=>prop.formdata,(val)=>{
    localFormData.value = val;  
},{ immediate: true })

const reset =()=>{
    localFormData.value = cloneDeep(baseForm);
}
const submitForm =()=>{
    //发送到父页面接受
    emit("submit",localFormData.value);
}
// 组件挂载完成后执行
onMounted(() => {
    localVisible.value=prop.visible;
})
</script>

Soure.vue

<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formData.name" placeholder="搜索名字" clearable />
    </el-form-item> 
    <el-form-item label="状态">
        <el-select v-model="formData.iStatus"  placeholder="请选择"  style="width: 100px;">
            <el-option label="请选择" :value="3" >请选择</el-option>
            <el-option label="停用" :value="0" >停用</el-option>
            <el-option label="启动" :value="1"  >启动</el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="备注">
        <el-input v-model="formData.memo" placeholder="备注" clearable /> 
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="reset"  plain>重置</el-button>
    </el-form-item>
    <el-form-item  >
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { UserText } from '../composables/UserText';
import cloneDeep from 'lodash/cloneDeep';
const {baseForm} = UserText();

baseForm.iStatus = 3;
const formData = ref(cloneDeep(baseForm));
const emit = defineEmits(["submit"])

const onSubmit = () => {
    console.log(formData.value)
    emit('submit',formData.value);
}

const reset =()=>{ 
    formData.value = cloneDeep(baseForm);
}

</script>

Table.vue


<template> 
    <el-row> 
        <el-col :span="2">
            <el-button type="primary" @click="add" >新增</el-button>
        </el-col>
    </el-row>
    
    <el-row> 
        <el-col :span="24">
    <el-table :data="tableData" border style="width: 100%"  max-height="400" >
    <el-table-column prop="name" label="名称"   header-align="center"  align="center" />
    <el-table-column prop="iStatus" label="状态"  header-align="center" align="center" >
      <template #default="scope" >
        <el-switch
          :model-value="scope.row.iStatus === 1"
          @update:model-value="(val: boolean) => EditIStatus(scope.row, val)"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; "
        />
      </template>
    </el-table-column>
    <el-table-column prop="memo" label="备注"   header-align="center" />
    <el-table-column prop="create_time" label="创建时间"   header-align="center" align="center" />
    <el-table-column label="操作"  header-align="center" >
      <template #default="scope" >
        <div style="display: flex;justify-content: center;width: 100%;"> 
          <el-button @click=" Edit(scope.row) " type="success" size="small">编辑</el-button>
          <el-button @click="del(scope.row ) " type="danger" size="small">删除</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table> 
        </el-col>
    </el-row>
    <el-row  justify="end">
        <el-col :span="12"><el-pagination background layout="prev, pager, next" :total="1000" /></el-col>
    </el-row>
  <Dialog  @close="DialogCancel" @submit="Submit"   :formdata="ToDialogForm"  :visible="dialogVisible"></Dialog>
</template>

<script lang="ts" setup>
import Dialog from './Dialog.vue';
import { UserText } from '../composables/UserText';
import { watch ,onMounted} from 'vue';
const {add,cloneDeep,tableData,DialogCancel,ToDialogForm,GetList,baseForm,dialogVisible,Submit,EditIStatus, Edit,del} = UserText();
const prop = defineProps<{
    "data":any
}>()
watch(()=>prop.data,(newVal)=>{
    tableData.value = prop.data
},{immediate:true})
onMounted(()=>{
    const baseFormCloneDeep = cloneDeep(baseForm);
    baseFormCloneDeep.iStatus = 3;
    GetList(baseFormCloneDeep);
})
</script>

UserText.ts

import { userApi } from "@/api/user/user";
import { ref } from "vue"; 
import { ElMessage, ElMessageBox } from 'element-plus'
import cloneDeep from 'lodash/cloneDeep';

export function UserText(){

    const baseForm = {
        id: 0,
        name: "",
        passworded: "",
        iStatus: 1,
        memo: "",
        create_time: ""
    } 

    const tableData = ref([{
        id: 5,
        name: "12111",
        passworded: "啊手动阀手动阀",
        iStatus: 1,
        memo: "sdfsdfasdfasgfdgsdf",
        create_time: "2026-07-18T03:59:18"
        } 
    ]) 
    
    const ToDialogForm = ref({});

    const dialogVisible = ref(false);

 
    const EditIStatus = async (row:any,val:any) => {   
        const soureIstates = row.iStatus;
        try{ 
            await userApi.EditIStatus({id:row.id,status:(val?1:0)});  
            ElMessage.success("操作成功");
            row.iStatus = val?1:0; 
        }catch(error){ 
            row.iStatus = soureIstates;
        }
    } 
    
    const Edit = (row:any) => {   
        dialogVisible.value = true; 
        ToDialogForm.value = cloneDeep(row);
    }
    const add = () => {   
        dialogVisible.value = true; 
        ToDialogForm.value = cloneDeep(baseForm);
    }

    const del =async (row:any) => {   
        try{
            await userApi.del(row);  
            ElMessage.success("操作成功");
        }catch{} 
    }

    const DialogCancel = (params:boolean) =>{
        dialogVisible.value = params;  
    }
    
    const Submit= async(obj:any)=>{
        try{ 
            if(obj.id === 0){
                await userApi.add(obj);
            }else{
                await userApi.Edit(obj); 
            }
            ElMessage.success("操作成功")
            dialogVisible.value = false;
            const baseFormItm = cloneDeep(baseForm);
            baseFormItm.iStatus = 3
            GetList(baseFormItm);
        }catch(error){}
    }

    const GetList =async(pareams:any)=>{ 
        try{  
            console.log("搜索列表：",pareams);
            tableData.value =  await userApi.getList(pareams)as any;   
            // ElMessage.success("操作成功")
        }catch(error){}
    }


    return{
        tableData,
        ToDialogForm,
        dialogVisible,
        baseForm,
        GetList,

        EditIStatus,
        Edit,
        del,
        add,
        Submit,
        cloneDeep,
        DialogCancel,
    }
}

userApi.ts



import request from "@/util/request"

export const userApi = {
    getList: (params: any) => request.post("/user/list", params),
    add: (params: any) => request.post("/user/add", params),
    del: (params: any) => request.post("/user/del", params),
    Edit: (params: any) => request.post("/user/Edit", params),
    EditIStatus: (params: any) => request.post("/user/EditIStatus", params),
}

前端普通增删改查 ​

index.vue ​

Dialog.vue ​

Soure.vue ​

Table.vue ​

UserText.ts ​

userApi.ts ​

前端普通增删改查

index.vue

Dialog.vue

Soure.vue

Table.vue

UserText.ts

userApi.ts