完善添加基质列表

src/services/matrix/manage.ts

@@ -25,3 +25,11 @@ export function updateMatrix(params:{name: string, id: number}){
       method: "PUT",
     });
 }
+
+export function del(params:{ids: number}){
+  return httpRequest<BaseResponse>({
+      url: `/api/matrix/${params.ids}`,
+      params: { ...params },
+      method: "DELETE",
+    });
+}

src/views/matrixManage/add.vue

@@ -0,0 +1,57 @@
+<template>
+<el-dialog v-if="addVisible" v-model="addVisible" width="25rem" align-center :close-on-click-modal="false" destroy-on-close>
+      <template #header><h2>新增基质</h2></template>
+      <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 600px;" :rules="rules">
+        <el-form-item label="基质名称" prop="name">
+          <el-input v-model.async="addForm.name" />
+        </el-form-item>
+      </el-form>
+      <div class="flex justify-center h-[5rem] pt-[2rem]">
+        <el-button type="primary" @click="onSave">保存</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose } from 'vue'
+  const emits = defineEmits(['save'])
+  const rules = ref({
+    name: [{
+      required: true,
+      message: '请输入名称',
+      trigger: 'change',
+    }]
+  })
+  const addVisible = ref(false)
+  let addForm = ref({name:''})
+  const addFormRef:any =  ref<any>()
+  let operateType = 'add'
+
+  const showDialog = (type:string, craftItem:{name:string}) => {
+    operateType = type
+    addVisible.value = true;
+    if(craftItem){
+      addForm.value = {
+        name:craftItem.name
+      };
+    }
+  }
+
+  const onSave = () => {
+    addFormRef.value.validate((vali:boolean) => {
+      if(vali){
+        emits('save', {...addForm.value}, operateType)
+      }
+    })
+  }
+
+  const onCancel = () => {
+    addForm.value = {name:''}
+    addVisible.value = false;
+  }
+
+  defineExpose({
+    showDialog,
+    onCancel
+  })
+</script>

src/views/matrixManage/matrixList.vue

@@ -3,44 +3,24 @@
     <div class="opt_btn p-[3rem]">
       <el-button type="primary" @click="onAdd">新增基质</el-button>
       <el-button @click="onEdit">编辑</el-button>
-      <el-button>删除</el-button>
+      <el-button @click="onDel">删除</el-button>
     </div>
     <div class="matrix_list pl-[3rem]">
       <div v-for="(item, index) in matrixList" class="w-[8rem] h-[3rem] matrix_module" @click="toggleSelection(index)" :style="{ backgroundColor: item.isSelected ? '#65a8ff' : '#ffffff' }">
         {{ item.name }}
       </div>
     </div>
-    <el-dialog v-if="addVisible" v-model="addVisible" width="25rem" align-center :close-on-click-modal="false" destroy-on-close>
-      <template #header><h2>新增基质</h2></template>
-      <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 600px;" :rules="rules">
-        <el-form-item label="基质名称" prop="name">
-          <el-input v-model="addForm.name" />
-        </el-form-item>
-      </el-form>
-      <div class="flex justify-center h-[5rem] pt-[2rem]">
-        <el-button type="primary" @click="onSave">保存</el-button>
-        <el-button @click="onCancel">取消</el-button>
-      </div>
-    </el-dialog>
+    <Add ref="addRef" @save="onSave"/>
   </main>
 </template>
 <script lang="ts" setup>
   import { ref, reactive, onMounted } from 'vue'
   import type { MatrixItem } from './type'
-  import { ElMessage } from "element-plus";
-  import {getList, add, updateMatrix} from '@/services/matrix/manage'
-  const addVisible = ref(false)
-  let addForm = reactive<Record<string,string>>({})
-  const addFormRef:any =  ref<any>()
-  const rules = ref({
-    name: [{
-      required: true,
-      message: '请输入名称',
-      trigger: 'blur',
-    }]
-  })
+  import { ElMessage, ElMessageBox } from "element-plus";
+  import {getList, add, updateMatrix, del} from '@/services/matrix/manage'
+  import Add from './add.vue'
+  const addRef:any = ref()
   const matrixList = ref<Array<MatrixItem>>([])
-
   onMounted(()=>{
     getMatrixList()
   })
@@ -60,54 +40,68 @@
   const toggleSelection = (index:number) => {
     matrixList.value[index].isSelected = !matrixList.value[index].isSelected;
   }
-  let saveType = 'add'
   const onAdd = () => {
-    addVisible.value = true;
-    saveType = 'add'
+    addRef.value.showDialog('add')
   }
 
-  let editItem = <MatrixItem>{}
+  let editItem = ref<MatrixItem>({
+    name:'',
+    id:0
+  })
   const onEdit = () => {
     let list = matrixList.value.filter((item:MatrixItem) => !!item.isSelected)
     if(list.length !== 1){
-      ElMessage.error("只能编辑一条数据")
+      ElMessage.error("请选择一条数据")
       return;
     }
-    saveType = 'edit'
-    editItem = list[0]
-    addForm.name = editItem.name
-    addVisible.value = true;
+    editItem.value = list[0]
+    addRef.value.showDialog('edit', editItem.value)
   }
-  const onSave = () => {
-    addFormRef.value.validate((vali:boolean) => {
-      if(vali){
-        if(saveType === 'add'){
-          doSave()
-        }else if(saveType === 'edit'){
-          doEdit()
-        }
-        
-      }
-    })
+  const onSave = (dataFrom:{name:string,id:number}, type:string) => {
+    if(type == 'add'){
+      doSave(dataFrom)
+    }else if(type === 'edit'){
+      doEdit(dataFrom)
+    }
   }
 
-  const doEdit = () => {
+  const doEdit = (dataFrom:{name:string,id:number}) => {
     const params = {
-      name:addForm.name,
-      id:editItem.id
+      name:dataFrom.name,
+      id:editItem.value.id
     }
     updateMatrix(params).then(res => {
       console.log('编辑基质-------', res)
       if(res.success){
         ElMessage.success('编辑成功')
         getMatrixList()
-        onCancel()
+        addRef.value.onCancel()
       }
     })
   }
 
+  const onDel = ()=>{
+    let list = matrixList.value.filter((item:MatrixItem) => !!item.isSelected)
+    if(list.length !== 1){
+      ElMessage.error("请选择一条数据")
+      return;
+    }
+    let item = list[0]
+    const ids = item.id;
+    ElMessageBox.confirm('确认删除此条数据吗?','提示',{
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(()=>{
+      del({ids}).then(res => {
+        ElMessage.success("删除成功")
+        getMatrixList()
+      })
+    })
     
-  const doSave = ()=>{
+  }
+
+  const doSave = (addForm:{name:string})=>{
     const params = {
       name:addForm.name
     }
@@ -116,17 +110,11 @@
       if(res.success){
         ElMessage.success('新增成功')
         getMatrixList()
-        onCancel()
+        addRef.value.onCancel()
       }
     })
   }
 
-  const onCancel = () => {
-    addForm = {}
-    addVisible.value = false;
-  }
-
-
 </script>
 <style lang="scss" scoped>
   .el-button--primary{