修改字典数据为弹窗、表单验证

frontend/src/routers/modules/staticRouter.ts

@@ -116,20 +116,6 @@ export const staticRouter: RouteRecordRaw[] = [
             component: () => import("@/components/ErrorMessage/404.vue"),
           },
         ],
-      },
-      {
-        path: "/system/dict-data/:code/:id(\\d+)",
-        name: "dictData",
-        component: () => import("@/views/system/dict/data.vue"),
-        meta: {
-          title: "字典数据",
-          icon: "List",
-          isLink: "",
-          isHide: false,
-          isFull: false,
-          isAffix: false,
-          isKeepAlive: false,
-        },
       }
     ],
   },

frontend/src/views/system/dict/data.vue

@@ -1,4 +1,6 @@
 <template>
+  <el-dialog class='table-box' v-model='dialogVisible1' top='114px'
+    :style="{ height: height, maxHeight: height, overflow: 'hidden' }" :title='title1' :width='width' :modal='false'>
     <div class="table-box">
       <ProTable :columns="columns" :data="data">
         <template #tableHeader="scope">
@@ -17,24 +19,24 @@
         </template>
       </ProTable>
     </div>
-
+  </el-dialog>
-  <el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
+  <el-dialog v-model="dialogVisible2" :title="dialogType2 === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
     <div>
-      <el-form :model="dialogForm">
+      <el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
         <el-form-item label="字典类型编码" :label-width="100">
           <el-input :value="route.params.code" disabled />
         </el-form-item>
-        <el-form-item label="编码" :label-width="100">
+        <el-form-item label="名称" :label-width="100" prop="name">
-          <el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="名称" :label-width="100">
           <el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
         </el-form-item>
-        <el-form-item label="值" :label-width="100">
+        <el-form-item label="编码" :label-width="100" prop="code">
+          <el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="值" :label-width="100" prop="value">
           <el-input v-model="dialogForm.value" placeholder="请输入" autocomplete="off" />
         </el-form-item>
         <el-form-item label="显示排序" :label-width="100">
-          <el-input-number v-model="dialogForm.sort"/>
+          <el-input-number v-model="dialogForm.sort" />
         </el-form-item>
       </el-form>
     </div>
@@ -60,7 +62,9 @@ import { useDictStore } from '@/stores/modules/dict'
 import { useHandleData } from '@/hooks/useHandleData'
 import { useDownload } from '@/hooks/useDownload'
 import { dictDataList } from '@/api/system/dict/dictExample'
+import { FormItemRule } from 'element-plus'
 import {
+  getDictDataList,
   updateDictData,
   addDictData,
   batchAddDictData,
@@ -74,6 +78,10 @@ const dictStore = useDictStore()
 const data = dictDataList
 
 const proTable = ref<ProTableInstance>()
+const dictTypeId = ref('')
+const dialogVisible1 = ref(false)
+const title1 = ref('')
+const dialogFormRef = ref()
 
 const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
@@ -102,7 +110,7 @@ const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
   {
     prop: 'level',
     label: '事件等级',
-    width: 150,
+    width: 120,
     render: scope => {
       return (
         <>
@@ -152,27 +160,54 @@ const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
     width: 330
   },
 ])
+const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+  name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
+  code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }],
+  value: [{ required: true, message: '类型值必填！', trigger: 'blur' }],
+})
 
-const { dialogVisible, dialogType, dialogForm } = useCount();
+const { dialogVisible2, dialogType2, dialogForm } = useCount();
 function useCount() {
-  const dialogVisible = ref(false)
+  const dialogVisible2 = ref(false)
-  const dialogType = ref('新增')
+  const dialogType2 = ref('新增')
 
   const dialogForm = ref({
     id: "",
     name: "",
     code: "",
     value: "",
-    sort:100,
+    sort: 100,
   })
 
-  return { dialogVisible, dialogType, dialogForm };
+  return { dialogVisible2, dialogType2, dialogForm };
 }
 
+const props = defineProps({
+  width: {
+    type: String,
+    default: '800px',
+  },
+  height: {
+    type: String,
+    default: '744px',
+  },
+})
+
+const open = (textTitle: string, id: string) => {
+  dialogVisible1.value = true
+  title1.value = textTitle
+  dictTypeId.value = id
+  // getDictDataList({ dictTypeId: id }).then(res => {
+  //   data.value = res.data
+  // }
+}
+
+defineExpose({ open })
+
 // 打开 drawer(新增、查看、编辑)
 const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
-  dialogVisible.value = true
+  dialogVisible2.value = true
-  dialogType.value = title
+  dialogType2.value = title
   if (title === '编辑') {
     row && (dialogForm.value = row as { id: string; name: string; code: string; value: string; sort: number; state: number; });
   }
@@ -211,26 +246,37 @@ const handleDelete = async (params: Dict.ResDictType) => {
 }
 
 const close = () => {
-  dialogVisible.value = false
+  dialogVisible2.value = false
   //清空dialogForm中的值
   dialogForm.value = {
     id: "",
     name: "",
     code: "",
     value: "",
-    sort:100
+    sort: 100
   }
+  dialogFormRef.value?.resetFields()
 }
 
-const save = async () => {
+const save = () => {
-  if (dialogType.value === '新增') {
+  try {
+    dialogFormRef.value?.validate(async (valid: boolean) => {
+      if (valid) {
+        let params = JSON.stringify(dialogForm.value)
+        console.log(params)
+        if (dialogType2.value === '新增') {
           await useHandleData(addDictData, dialogForm.value, '新增字典数据')
         } else {
           await useHandleData(updateDictData, dialogForm.value, '编辑字典数据')
         }
         close()
         proTable.value?.getTableList()
+      } else {
+        ElMessage.error('表单验证失败！')
+      }
+    })
+  } catch (err) {
+    console.error('验证过程中出现错误', err)
+  }
 }
 </script>
-
-<style lang="scss" scoped></style>

frontend/src/views/system/dict/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="table-box">
+  <div class="table-box" ref='popupBaseView'>
     <ProTable :columns="columns" :data="data">
       <template #tableHeader="scope">
         <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
@@ -20,11 +20,11 @@
 
   <el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典类型' : '编辑字典类型'" v-bind="dialogSmall">
     <div>
-      <el-form :model="dialogForm">
+      <el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
-        <el-form-item label="类型名称" :label-width="100">
+        <el-form-item label="类型名称" :label-width="100" prop="name">
           <el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
         </el-form-item>
-        <el-form-item label="类型编码" :label-width="100">
+        <el-form-item label="类型编码" :label-width="100" prop="code">
           <el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
         </el-form-item>
         <el-form-item label="显示排序" :label-width="100">
@@ -44,20 +44,23 @@
       </div>
     </template>
   </el-dialog>
+  <Data :width='viewWidth' :height='viewHeight' ref='openView' />
 </template>
 
 <script setup lang="tsx" name="dict">
 import { CirclePlus, Delete, EditPen, Download, View } from '@element-plus/icons-vue'
 import { Dict } from '@/api/system/dict/interface'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import Data from '@/views/system/dict/data.vue'
 // import ImportExcel from '@/components/ImportExcel/index.vue'
 import { dialogSmall } from '@/utils/elementBind'
 import { useDictStore } from '@/stores/modules/dict'
 import { useHandleData } from '@/hooks/useHandleData'
+import { useViewSize } from '@/hooks/useViewSize'
 // import { useAuthButtons } from '@/hooks/useAuthButtons'
 import { useDownload } from '@/hooks/useDownload'
-import { useRouter } from 'vue-router'
 import { dictTypeList } from '@/api/system/dict/dictExample'
+import { FormItemRule } from 'element-plus'
 import {
   getDictTypeList,
   addDictType,
@@ -69,10 +72,12 @@ import {
 
 const dictStore = useDictStore()
 // const BUTTONS = useAuthButtons()
-const router = useRouter()
 const data = dictTypeList
+const { popupBaseView, viewWidth, viewHeight } = useViewSize()
 
 const proTable = ref<ProTableInstance>()
+const openView = ref()
+const dialogFormRef = ref()
 
 const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
@@ -134,6 +139,11 @@ const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
   },
 ])
 
+const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+  name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
+  code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }]
+})
+
 const { dialogVisible, dialogType, dialogForm } = useCount();
 function useCount() {
   const dialogVisible = ref(false)
@@ -143,7 +153,7 @@ function useCount() {
     id: "",
     name: "",
     code: "",
-    sort:100,
+    sort: 100,
     remark: ""
   })
 
@@ -181,7 +191,7 @@ const handleDelete = async (params: Dict.ResDictType) => {
 
 //查看字典类型包含的字典数据
 const toDictData = (row: Dict.ResDictType) => {
-  router.push({ name: 'dictData', params: { id: row.id, code: row.code } })
+  openView.value.open('字典数据', row.id)
 }
 
 const close = () => {
@@ -191,12 +201,18 @@ const close = () => {
     id: "",
     name: "",
     code: "",
-    sort:100,
+    sort: 100,
     remark: ""
   }
+  dialogFormRef.value?.resetFields()
 }
 
-const save =async () => {
+const save = () => {
+  try {
+    dialogFormRef.value?.validate(async (valid: boolean) => {
+      if (valid) {
+        let params = JSON.stringify(dialogForm.value)
+        console.log(params)
         if (dialogType.value === '新增') {
           await useHandleData(addDictType, dialogForm.value, '新增字典类型')
         } else {
@@ -204,7 +220,12 @@ const save =async () => {
         }
         close()
         proTable.value?.getTableList()
+      } else {
+        ElMessage.error('表单验证失败！')
+      }
+    })
+  } catch (err) {
+    console.error('验证过程中出现错误', err)
+  }
 }
 </script>
-
-<style lang="scss" scoped></style>