前端：系统管理-数据字典：重构部分功能实现

www/src/views/system/dictonary/AddItem.vue

@@ -1,56 +1,92 @@
 <template>
-  <el-form v-model="form" label-width="100px">
-    <el-form-item label="名称" prop="name">
-      <el-input v-model="form.label"/>
-    </el-form-item>
-    <el-form-item label="数据值" prop="data">
-      <el-input v-model="form.value"/>
-    </el-form-item>
-    <el-form-item label="描述" prop="desc">
-      <el-input v-model="form.desc"/>
-    </el-form-item>
-    <el-form-item label="排序值" prop="sort">
-      <el-input v-model="form.sort"/>
-    </el-form-item>
-    <el-form-item label="是否启用" prop="enable">
-      <el-switch v-model="form.enable"/>
-    </el-form-item>
-  </el-form>
-  <el-button @click="$emit('update:visible',false)">关闭</el-button>
-  <el-button type="primary" @click="handleAdd">确定</el-button>
+  <el-dialog v-model="visible" width="30%" destroy-on-close>
+    <el-form v-model="form" label-width="100px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.label"/>
+      </el-form-item>
+      <el-form-item label="数据值" prop="data">
+        <el-input v-model="form.value"/>
+      </el-form-item>
+      <el-form-item label="描述" prop="desc">
+        <el-input v-model="form.desc"/>
+      </el-form-item>
+      <el-form-item label="排序值" prop="sort">
+        <el-input v-model="form.sort"/>
+      </el-form-item>
+      <el-form-item label="是否启用" prop="enable">
+        <el-switch v-model="form.enable" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
+      </el-form-item>
+    </el-form>
+    <el-button @click="$emit('update:visible',false)">关闭</el-button>
+    <el-button type="primary" @click="handleAdd">确定</el-button>
+  </el-dialog>
 </template>
 
 <script setup>
 
-  import {reactive} from 'vue'
+  import {ref, reactive} from 'vue'
   import {PostNewDictItem, PutDictItem} from '@/api/dictonary'
   import {ElNotification} from 'element-plus'
 
-  const props = defineProps(['item', 'visible'])
-  const emit = defineEmits(['update:visible'])
-  const form = reactive(props.item)
+  const emit = defineEmits(['success'])
+  const visible = ref(false)
+  const form = reactive({})
 
-  function handleAdd() {
+  async function handleAdd() {
     if (form.id === null) {
-      PostNewDictItem(form).then(() => {
+      try {
+        await PostNewDictItem(form)
         ElNotification({
           title: 'success',
           message: '字典元素添加成功',
           type: 'success'
         })
-      })
+      } catch (e) {
+        ElNotification({
+          title: 'error',
+          message: '字典元素添加失败',
+          type: 'error'
+        })
+      }
     } else {
-      PutDictItem(form).then(() => {
+      try {
+        await PutDictItem(form)
         ElNotification({
           title: 'success',
           message: '字典元素更新成功',
           type: 'success'
         })
-      })
+      } catch (e) {
+        ElNotification({
+          title: 'error',
+          message: '字典元素更新失败',
+          type: 'error'
+        })
+      }
     }
+    visible.value = false
+    emit('success')
+  }
+
+  function add(dictId) {
+    Object.assign(form, {
+      id: null,
+      label: null,
+      value: null,
+      desc: null,
+      sort: 1,
+      enable: true,
+      dict_id: dictId
+    })
+    visible.value = true
+  }
 
-    emit('update:visible', false)
+  function edit(dictItem) {
+    Object.assign(form, dictItem)
+    visible.value = true
   }
+
+  defineExpose({add, edit})
 </script>
 
 <style scoped>

www/src/views/system/dictonary/DictItem.vue

@@ -36,23 +36,27 @@
       <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
     </el-row>
 
-
     <el-table :data="tableData" border style="margin-top: 10px">
       <el-table-column label="名称" prop="label"/>
       <el-table-column label="数据值" prop="value"/>
+      <el-table-column label="是否启用" prop="enable">
+        <template #default="scope">
+          <el-switch v-model="scope.row.enable"
+                     @change="handleUpdate(scope.row)"
+                     style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
+        </template>
+      </el-table-column>
       <el-table-column label="操作">
         <template #default="scope">
           <el-button text type="primary"
                      class="item_button"
-                     @click="handleEdit(scope.row)" :icon="Edit">编辑
-          </el-button>
+                     @click="handleEdit(scope.row)" :icon="Edit"/>
           <el-divider direction="vertical"/>
           <el-popconfirm title="确定要删除此元素吗？" @confirm="handleDel(scope.row.id)">
             <template #reference>
               <el-button text type="danger"
                          class="item_button"
-                         :icon="Delete">删除
-              </el-button>
+                         :icon="Delete"/>
             </template>
           </el-popconfirm>
 
@@ -65,9 +69,8 @@
                    style="margin-top: 10px;"
     />
 
-    <el-dialog v-model="addItemDialog" width="30%" destroy-on-close>
-      <add-item :item="selectItem" v-model:visible="addItemDialog"/>
-    </el-dialog>
+    <add-item ref="addItemDialogRef" @success="freshCurrentPage"/>
+
   </el-drawer>
 </template>
 
@@ -77,7 +80,7 @@
   import usePagination from '@/composables/usePagination'
   import {ref, watch} from 'vue'
   import AddItem from '@/views/system/dictonary/AddItem'
-  import {DelDictItem} from '@/api/dictonary'
+  import {DelDictItem, PutDictItem} from '@/api/dictonary'
   import {ElNotification} from 'element-plus'
 
   const dictId = ref(null)
@@ -86,6 +89,7 @@
   const addItemDialog = ref(false)
   const selectItem = ref(null)
   const searchRef = ref(null)
+  const addItemDialogRef = ref(null)
 
   let searchForm = {
     dict_id: null,
@@ -107,26 +111,15 @@
   } = usePagination('/api/dict/item/search', searchForm)
 
   function handleAdd() {
-    selectItem.value = {
-      id: null,
-      label: null,
-      value: null,
-      desc: null,
-      sort: null,
-      enable: true,
-      dict_id: dictId.value
-    }
-    addItemDialog.value = true
+    addItemDialogRef.value.add(dictId.value)
   }
 
   function handleReset() {
     searchRef.value.resetFields()
   }
 
   function handleEdit(dictItem) {
-    selectItem.value = dictItem
-    addItemDialog.value = true
-    console.log(search.value)
+    addItemDialogRef.value.edit(dictItem)
   }
 
   function handleDel(itemId) {
@@ -142,6 +135,25 @@
 
   }
 
+  async function handleUpdate(item) {
+    try {
+      await PutDictItem(item)
+      ElNotification({
+        title: 'success',
+        message: '字典元素更新成功',
+        type: 'success'
+      })
+      await freshCurrentPage()
+    } catch (error) {
+      ElNotification({
+        title: 'error',
+        message: '字典元素更新失败',
+        type: 'error'
+      })
+    }
+
+  }
+
   function edit(dict) {
     search.dict_id = dict.id
     dictId.value = dict.id