update：前端-数据字典增加部分验证

www/src/api/dictonary.js

@@ -2,7 +2,8 @@ import {GET, POST, PUT, DELETE} from '@/utils/request'
 
 export const PostNewDict = (dict) => POST('/api/dict', dict)
 export const PutDict = (dict) => PUT('/api/dict', dict)
+export const DelDict = (id) => DELETE('/api/dict/' + id)
 export const PostNewDictItem = (item) => POST('/api/dict/item', item)
 export const PutDictItem = (item) => PUT('/api/dict/item', item)
 export const DelDictItem = (id) => DELETE('/api/dict/item/' + id)
-export const GetDictItems = (code) => GET('/api/dict/'+ code)
+export const GetDictItems = (code) => GET('/api/dict/' + code)

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

@@ -1,5 +1,5 @@
 <template>
-  <el-form :model="form" label-width="100px">
+  <el-form :model="form" :rules="rules" label-width="100px" ref="formRef">
     <el-form-item label="字典名字：" prop="name">
       <el-input v-model="form.name"/>
     </el-form-item>
@@ -10,44 +10,61 @@
       <el-input v-model="form.desc"/>
     </el-form-item>
   </el-form>
-  <el-button type="danger" @click="$emit('update:visible',false)">关闭</el-button>
+  <el-button type="danger" @click="$emit('update:visible', false)"
+  >关闭
+  </el-button
+  >
   <el-button type="primary" @click="handleAdd">确定</el-button>
 </template>
 
 <script setup>
-
-  import {reactive} from 'vue'
+  import {reactive, ref} from 'vue'
   import {PostNewDict, PutDict} from '@/api/dictonary'
   import {ElNotification} from 'element-plus'
 
   const props = defineProps(['dict', 'visible'])
   const emit = defineEmits(['update:visible'])
   const form = reactive(props.dict)
+  const formRef = ref(null)
+
+  const rules = {
+    name: [{required: true, message: '字典名称不能为空', trigger: 'blur'}],
+    code: [{required: true, message: '字典编码不能为空', trigger: 'blur'}],
+  }
 
   function handleAdd() {
-    if (form.id === null) {
-      PostNewDict(form).then(() => {
-        ElNotification({
-          title: 'success',
-          message: '数据字典添加成功',
-          type: 'success'
-        })
-      })
-    } else {
-      PutDict(form).then(() => {
+    formRef.value.validate((valid) => {
+      if (valid) {
+        // 验证通过
+        if (form.id === null) {
+          PostNewDict(form).then(() => {
+            ElNotification({
+              title: 'success',
+              message: '数据字典添加成功',
+              type: 'success',
+            })
+          })
+        } else {
+          PutDict(form).then(() => {
+            ElNotification({
+              title: 'success',
+              message: '数据字典更新成功',
+              type: 'success',
+            })
+          })
+        }
+
+        emit('update:visible', false)
+      } else {
+        // 验证不通过
         ElNotification({
-          title: 'success',
-          message: '数据字典更新成功',
-          type: 'success'
+          title: 'error',
+          message: '请填写必填项',
+          type: 'error',
         })
-      })
-    }
-
-    emit('update:visible', false)
+      }
+    })
   }
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -1,10 +1,10 @@
 <template>
-  <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-dialog v-model="visible" :title="title" width="30%" destroy-on-close>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="名称" prop="label">
         <el-input v-model="form.label"/>
       </el-form-item>
-      <el-form-item label="数据值" prop="data">
+      <el-form-item label="数据值" prop="value">
         <el-input v-model="form.value"/>
       </el-form-item>
       <el-form-item label="描述" prop="desc">
@@ -17,8 +17,11 @@
         <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-row justify="center">
+      <el-button @click="visible=false" type="danger">关闭</el-button>
+      <el-button type="primary" @click="handleAdd">确定</el-button>
+    </el-row>
+
   </el-dialog>
 </template>
 
@@ -31,44 +34,68 @@
   const emit = defineEmits(['success'])
   const visible = ref(false)
   const form = reactive({})
+  const formRef = ref(null)
+  const title = ref('')
+  const rules = reactive({
+    label: [
+      {required: true, message: '请输入名称', trigger: 'blur'}
+    ],
+    value: [
+      {required: true, message: '请输入数据值', trigger: 'blur'}
+    ]
+  })
 
+  /*
+  * 添加或更新字典元素
+   */
   async function handleAdd() {
-    if (form.id === null) {
-      try {
-        await PostNewDictItem(form)
-        ElNotification({
-          title: 'success',
-          message: '字典元素添加成功',
-          type: 'success'
-        })
-      } catch (e) {
-        ElNotification({
-          title: 'error',
-          message: '字典元素添加失败',
-          type: 'error'
-        })
-      }
-    } else {
-      try {
-        await PutDictItem(form)
-        ElNotification({
-          title: 'success',
-          message: '字典元素更新成功',
-          type: 'success'
-        })
-      } catch (e) {
-        ElNotification({
-          title: 'error',
-          message: '字典元素更新失败',
-          type: 'error'
-        })
+    try {
+      await formRef.value.validate()
+      if (form.id === null) {
+        try {
+          await PostNewDictItem(form)
+          ElNotification({
+            title: 'success',
+            message: '字典元素添加成功',
+            type: 'success'
+          })
+        } catch (e) {
+          ElNotification({
+            title: 'error',
+            message: '字典元素添加失败',
+            type: 'error'
+          })
+        }
+      } else {
+        try {
+          await PutDictItem(form)
+          ElNotification({
+            title: 'success',
+            message: '字典元素更新成功',
+            type: 'success'
+          })
+        } catch (e) {
+          ElNotification({
+            title: 'error',
+            message: '字典元素更新失败',
+            type: 'error'
+          })
+        }
       }
+      visible.value = false
+      emit('success')
+    } catch (e) {
+      ElNotification({
+        title: 'error',
+        message: '请填写必填项',
+        type: 'error'
+      })
     }
-    visible.value = false
-    emit('success')
   }
 
+  /*对外开放的添加字典接口*/
   function add(dictId) {
+    title.value = '新增字典元素'
     Object.assign(form, {
       id: null,
       label: null,
@@ -81,7 +108,9 @@
     visible.value = true
   }
 
+  /*对外开放的编辑字典接口*/
   function edit(dictItem) {
+    title.value = '编辑字典元素'
     Object.assign(form, dictItem)
     visible.value = true
   }

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

@@ -40,7 +40,7 @@
         <el-button text type="primary" style="padding: 0" :icon="Setting" @click="handleItem(scope.row)">字典配置
         </el-button>
         <el-divider direction="vertical"/>
-        <el-button text type="danger" style="padding: 0" :icon="Delete">删除</el-button>
+        <el-button text type="danger" style="padding: 0" :icon="Delete" @click="handleDel(scope.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -79,6 +79,8 @@
   import usePagination from '@/composables/usePagination'
   import AddDict from '@/views/system/dictonary/AddDict'
   import DictItem from '@/views/system/dictonary/DictItem'
+  import {DelDict} from '@/api/dictonary'
+  import {ConfirmDel} from '@/utils/request'
 
 
   const addDialog = ref(false)
@@ -119,17 +121,31 @@
     handleSearch()
   }
 
+  /*
+   * 编辑数据字典
+   */
   function handleEdit(dict) {
     dialogTitle.value = '编辑数据字典'
     selectDict.value = dict
     console.log(dict)
     addDialog.value = true
   }
 
+  /*
+  * 字典元素配置
+   */
   function handleItem(dict) {
     dictItemRef.value.edit(dict)
   }
 
+  /*
+  *删除字典
+   */
+  async function handleDel(dict) {
+    await ConfirmDel('删除字典会一起删除对应的元素', DelDict, dict.id)
+    await freshCurrentPage()
+  }
+
   watch(addDialog, (newValue) => {
     if (newValue === false) {
       freshCurrentPage()