fix:溶液管理公共组件替换

src/components/solution/Edit/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { editSols, saveSols } from 'apis/solution'
+import { FtMessage } from 'libs/message'
+import { inject, ref } from 'vue'
+
+const emits = defineEmits(['ok', 'cancel'])
+
+const data = inject('currentData')
+
+const form = ref<Solution.SolutionItem>({ ...data.value })
+const formRef = ref()
+
+const rules = {
+  name: [
+    { required: true, message: '请输入溶液名称', trigger: 'blur' },
+  ],
+}
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+    if (data.value.id) {
+      await editSols(form.value)
+    }
+    else {
+      await saveSols(form.value)
+    }
+    FtMessage.success('保存成功')
+    emits('ok')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+const cancel = () => {
+  emits('cancel')
+}
+</script>
+
+<template>
+  <FtDialog visible :title="data.id ? '编辑' : '新增'" width="30%" :ok-handle="okHandle" @cancel="cancel">
+    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
+      <el-form-item label="溶液名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入溶液名称" />
+      </el-form-item>
+    </el-form>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  margin-right: 5px;
+}
+</style>

src/views/solution/index.vue

@@ -1,136 +1,96 @@
 <script lang="ts" setup>
-import { delSols, editSols, getSolsList, saveSols } from '@/apis/solution'
-import { useSolutionStore } from '@/stores/useSolutionStore'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { onMounted, ref } from 'vue'
+import { delSols, getSolsList } from '@/apis/solution'
+import Edit from 'components/solution/Edit/index.vue'
+import { ElMessageBox } from 'element-plus'
+import { FtMessage } from 'libs/message'
+import { provide, ref, useTemplateRef } from 'vue'
 
-onMounted(() => {
-  querySolutionList()
-})
-const tableData = ref<Solution.SolutionItem[]>([])
 const visible = ref(false)
-const name = ref('')
-const loading = ref(false)
-const selectedList = ref<Solution.SolutionItem[]>([])
-const solutionStore = useSolutionStore()
-const querySolutionList = () => {
-  getSolsList().then((res) => {
-    if (res && res.list) {
-      tableData.value = res.list
-      // 保存至store
-      solutionStore.updateSolution(res.list)
-    }
-  })
-}
 
+const currentData = ref<Solution.SolutionItem>()
+provide('currentData', currentData)
 const addSolution = () => {
+  currentData.value = {}
   visible.value = true
 }
 
-const editInfo = ref()
-const editSolution = () => {
-  if (selectedList.value.length === 1) {
-    const editData = selectedList.value[0]
-    editInfo.value = editData
-    visible.value = true
-    name.value = editData.name
-  }
-  else {
-    ElMessage.warning('请选择一条要编辑的数据')
-  }
+const editSolution = (data: Solution.SolutionItem[]) => {
+  currentData.value = data[0]
+  visible.value = true
 }
 
-const delSolution = () => {
-  if (!selectedList.value.length) {
-    ElMessage.warning('请选择要删除的数据')
-    return
-  }
+const tableRef = useTemplateRef('tableRef')
+
+const delSolution = (data: Solution.SolutionItem[]) => {
   ElMessageBox.confirm(
     '确认删除选中的数据吗？',
-    '确认提示',
+    '提示',
     {
       confirmButtonText: '确认',
       cancelButtonText: '取消',
       type: 'warning',
     },
   ).then(() => {
-    const ids = selectedList.value.map(item => item.id)
+    const ids = data.map(item => item.id)
     delSols(ids.join(',')).then(() => {
-      ElMessage.success('删除成功')
-      querySolutionList()
+      FtMessage.success('删除成功')
+      tableRef.value?.initData()
     })
   })
 }
 
-const onSelectionChange = (rows: Solution.SolutionItem[]) => {
-  selectedList.value = rows
+const okHandle = () => {
+  tableRef.value?.initData()
+  visible.value = false
 }
 
-const onConfirm = () => {
-  if (!name.value) {
-    ElMessage.warning('请输入溶液名称')
-    return
-  }
-  loading.value = true
-  if (editInfo.value.id) {
-    const params = {
-      id: editInfo.value.id,
-      name: name.value,
-    }
-    editSols(params).then(() => {
-      ElMessage.success('编辑成功')
-      visible.value = false
-      name.value = ''
-      querySolutionList()
-    })
-  }
-  else {
-    const params = {
-      name: name.value,
-    }
-    saveSols(params).then(() => {
-      ElMessage.success('保存成功')
-      visible.value = false
-      name.value = ''
-      querySolutionList()
-    })
-  }
-}
+const columns = [
+  {
+    type: 'selection',
+  },
+  {
+    type: 'index',
+  },
+  {
+    title: '溶液名称',
+    key: 'name',
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+  },
+  {
+    title: '更新时间',
+    key: 'updateTime',
+  },
+]
 
-const closeDialog = () => {
-  editInfo.value = {}
-  visible.value = false
-}
+const btnList = [
+  {
+    name: '新增',
+    type: 'primary',
+    serverUrl: 'add',
+    serverCondition: 0,
+  },
+  {
+    name: '编辑',
+    type: 'primary',
+    serverUrl: 'edit',
+    serverCondition: 1,
+  },
+  {
+    name: '删除',
+    type: 'danger',
+    serverUrl: 'del',
+    serverCondition: 2,
+  },
+]
 </script>
 
 <template>
   <div>
-    <div>
-      <FtButton type="primary" @click="addSolution">
-        添加溶液
-      </FtButton>
-      <FtButton type="primary" @click="editSolution">
-        编辑溶液
-      </FtButton>
-      <FtButton @click="delSolution">
-        删除溶液
-      </FtButton>
-    </div>
-    <div>
-      <el-table :data="tableData" stripe style="width: 100%" @selection-change="onSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column type="index" width="50" />
-        <el-table-column prop="name" label="溶液名称" />
-        <el-table-column prop="createTime" label="创建时间" />
-        <el-table-column prop="updateTime" label="更新时间" />
-      </el-table>
-    </div>
-    <FtDialog v-model="visible" title="添加溶液" width="30%" :ok-handle="onConfirm" @cancel="closeDialog">
-      <div class="add-content">
-        <label>溶液名称：</label>
-        <span><el-input v-model="name" placeholder="溶液名称" style="width:200px" /></span>
-      </div>
-    </FtDialog>
+    <ft-table ref="tableRef" has-page has-header :columns="columns" :btn-list="btnList" :get-data-fn="getSolsList" @add="addSolution" @edit="editSolution" @del="delSolution" />
+    <Edit v-if="visible" @ok="okHandle" @cancel="visible = false" />
   </div>
 </template>