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

2024-10-29 09:23:43 +08:00
parent eeeb2fc62f
commit ff892d9e24
3 changed files with 130 additions and 77 deletions
--- a/frontend/src/routers/modules/staticRouter.ts
+++ b/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,
-        },
      }
    ],
  },
--- a/frontend/src/views/system/dict/data.vue
+++ b/frontend/src/views/system/dict/data.vue
@@ -1,40 +1,42 @@
 <template>
-  <div class="table-box">
-    <ProTable :columns="columns" :data="data">
-      <template #tableHeader="scope">
-        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
-        <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加</el-button>
-        <el-button type="primary" :icon="Download" plain @click="downloadFile">导出</el-button>
-        <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
-          @click="batchDelete(scope.selectedListIds)">
-          批量删除
-        </el-button>
-      </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">
+          <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
+          <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加</el-button>
+          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出</el-button>
+          <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
+            @click="batchDelete(scope.selectedListIds)">
+            批量删除
+          </el-button>
+        </template>

-      <template #operation="scope">
-        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
-        <el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-      </template>
-    </ProTable>
-  </div>
-
-  <el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
+        <template #operation="scope">
+          <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
+          <el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </ProTable>
+    </div>
+  </el-dialog>
+  <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-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
-        </el-form-item>
-        <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" 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 dialogType = ref('新增')
+  const dialogVisible2 = ref(false)
+  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
-  dialogType.value = title
+  dialogVisible2.value = true
+  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 () => {
-  if (dialogType.value === '新增') {
-    await useHandleData(addDictData, dialogForm.value, '新增字典数据')
-  } else {
-    await useHandleData(updateDictData, dialogForm.value, '编辑字典数据')
+const save = () => {
+  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)
  }
-  close()
-  proTable.value?.getTableList()
 }
 </script>
-
-<style lang="scss" scoped></style>
--- a/frontend/src/views/system/dict/index.vue
+++ b/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-item label="类型名称" :label-width="100">
+      <el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
+        <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,20 +201,31 @@ const close = () => {
    id: "",
    name: "",
    code: "",
-    sort:100,
+    sort: 100,
    remark: ""
  }
+  dialogFormRef.value?.resetFields()
 }

-const save =async () => {
-  if (dialogType.value === '新增') {
-    await useHandleData(addDictType, dialogForm.value, '新增字典类型')
-  } else {
-    await useHandleData(updateDictType, dialogForm.value, '编辑字典类型')
+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 {
+          await useHandleData(updateDictType, dialogForm.value, '编辑字典类型')
+        }
+        close()
+        proTable.value?.getTableList()
+      } else {
+        ElMessage.error('表单验证失败！')
+      }
+    })
+  } catch (err) {
+    console.error('验证过程中出现错误', err)
  }
-  close()
-  proTable.value?.getTableList()
 }
 </script>
-
-<style lang="scss" scoped></style>