字典类型 CRUD

frontend/src/views/authority/role/index.vue

@@ -167,7 +167,7 @@ const changeStatus = async (row: Role.RoleBO) => {
 
 // 导出角色列表
 //const downloadFile = async () => {
-// ElMessageBox.confirm('确认导出角色数据?', '温馨提示', { type: 'warning' }).then(() =>
+// ElMessageBox.confirm('确认导出角色数据?', '温馨提示', { dictType: 'warning' }).then(() =>
 //   useDownload(exportRoleInfo, '角色列表', proTable.value?.searchParam),
 // )
 //}

frontend/src/views/home/components/table.vue

@@ -101,21 +101,21 @@
       <!-- 表格操作 -->
       <!-- <template #operation="scope">
         <el-button
-          type="primary"
+          dictType="primary"
           link
           :icon="View"
           @click="openDrawer('查看', scope.row)"
           >查看</el-button
         >
         <el-button
-          type="primary"
+          dictType="primary"
           link
           :icon="EditPen"
           @click="openDrawer('编辑', scope.row)"
           >导出</el-button
         >
         <el-button
-          type="primary"
+          dictType="primary"
           link
           :icon="Delete"
           @click="deleteAccount(scope.row)"

frontend/src/views/home/index.vue

@@ -17,7 +17,7 @@
           <div class="test_button">
             <el-button
               size="small"
-              type="primary"
+              dictType="primary"
               @click="handelOpen(item.isActive)"
               >进入检测</el-button
             >

frontend/src/views/plan/autoTest/components/table.vue

@@ -101,21 +101,21 @@
       <!-- 表格操作 -->
       <!-- <template #operation="scope">
         <el-button
-          type="primary"
+          dictType="primary"
           link
           :icon="View"
           @click="openDrawer('查看', scope.row)"
           >查看</el-button
         >
         <el-button
-          type="primary"
+          dictType="primary"
           link
           :icon="EditPen"
           @click="openDrawer('编辑', scope.row)"
           >导出</el-button
         >
         <el-button
-          type="primary"
+          dictType="primary"
           link
           :icon="Delete"
           @click="deleteAccount(scope.row)"

frontend/src/views/plan/autoTest/index.vue

@@ -133,8 +133,8 @@ const treeRef = ref<any>();
 // 表格配置项
 const columns = reactive<ColumnProps<User.ResUserList>[]>([
   { type: "selection", fixed: "left", width: 70 },
-  //   { type: "sort", label: "Sort", width: 80 },
-  //   { type: "expand", label: "Expand", width: 85 },
+  //   { dictType: "sort", label: "Sort", width: 80 },
+  //   { dictType: "expand", label: "Expand", width: 85 },
   {
     prop: "planName",
     label: "计划名称",

frontend/src/views/plan/singlePlanList/components/details.vue

@@ -181,7 +181,7 @@ const rules = reactive<FormRules<RuleForm>>({
     {
       type: 'array',
       required: true,
-      message: 'Please select at least one activity type',
+      message: 'Please select at least one activity dictType',
       trigger: 'change',
     },
   ],

frontend/src/views/plan/singlePlanList/index.vue

@@ -86,14 +86,14 @@
         </el-form>
         <!-- <el-button
           v-auth="'add'"
-          type="primary"
+          dictType="primary"
           :icon="CirclePlus"
           @click="openDrawer('新增')"
           >新增用户</el-button
         >
         <el-button
           v-auth="'batchAdd'"
-          type="primary"
+          dictType="primary"
           :icon="Upload"
           plain
           @click="batchAdd"
@@ -101,17 +101,17 @@
         >
         <el-button
           v-auth="'export'"
-          type="primary"
+          dictType="primary"
           :icon="Download"
           plain
           @click="downloadFile"
           >导出用户数据</el-button
         >
-        <el-button type="primary" plain @click="toDetail"
+        <el-button dictType="primary" plain @click="toDetail"
           >To 子集详情页面</el-button
         >
         <el-button
-          type="danger"
+          dictType="danger"
           :icon="Delete"
           plain
           :disabled="!scope.isSelected"

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

@@ -1,231 +0,0 @@
-<template>
-  <div class="table-box" ref='popupBaseView'>
-    <ProTable :columns="columns" :data="data">
-      <template #tableHeader="scope">
-        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</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="View" @click="toDictData(scope.row)">查看</el-button>
-        <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">
-    <div>
-      <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" prop="code">
-          <el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="显示排序" :label-width="100">
-          <el-input-number v-model="dialogForm.sort" />
-        </el-form-item>
-        <el-form-item label="备注" :label-width="100">
-          <el-input v-model="dialogForm.remark" placeholder="请输入备注" autocomplete="off" :rows="2" type="textarea" />
-        </el-form-item>
-      </el-form>
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="close()">取消</el-button>
-        <el-button type="primary" @click="save()">
-          保存
-        </el-button>
-      </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 { dictTypeList } from '@/api/system/dict/dictExample'
-import { FormItemRule } from 'element-plus'
-import {
-  getDictTypeList,
-  addDictType,
-  updateDictType,
-  exportDictType,
-  deleteDictType
-} from '@/api/system/dict'
-
-
-const dictStore = useDictStore()
-// const BUTTONS = useAuthButtons()
-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 },
-  { type: 'index', fixed: 'left', width: 70, label: '序号' },
-  {
-    prop: 'name',
-    label: '类型名称',
-    width: 180,
-    search: {
-      el: 'input'
-    }
-  },
-  {
-    prop: 'code',
-    label: '类型编码',
-    width: 180,
-    search: {
-      el: 'input'
-    }
-  },
-  {
-    prop: 'remark',
-    label: '描述',
-    width: 340,
-  },
-  {
-    prop: 'state',
-    label: '状态',
-    enum: dictStore.getDictData('status'),
-    search: {
-      el: 'tree-select',
-      props: { filterable: true }
-    },
-    fieldNames: { label: 'label', value: 'code' },
-    render: scope => {
-      return (
-        <>
-          {
-            <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
-          }
-        </>
-      )
-    },
-  },
-  {
-    prop: 'createTime',
-    label: '创建时间',
-    width: 180,
-    search: {
-      el: 'date-picker',
-      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' }
-    }
-  },
-  {
-    prop: 'operation',
-    label: '操作',
-    fixed: 'right',
-    width: 330
-  },
-])
-
-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)
-  const dialogType = ref('新增')
-
-  const dialogForm = ref({
-    id: "",
-    name: "",
-    code: "",
-    sort: 100,
-    remark: ""
-  })
-
-  return { dialogVisible, dialogType, dialogForm };
-}
-
-// 打开 drawer(新增、查看、编辑)
-const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
-  dialogVisible.value = true
-  dialogType.value = title
-  if (title === '编辑') {
-    row && (dialogForm.value = row as { id: string; name: string; code: string; sort: number; state: number; remark: string; });
-  }
-}
-
-// 导出字典类型
-const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出字典类型数据?', '温馨提示', { type: 'warning' }).then(() =>
-    useDownload(exportDictType, '字典类型列表', proTable.value?.searchParam),
-  )
-}
-
-// 批量删除字典类型
-const batchDelete = async (id: string[]) => {
-  await useHandleData(deleteDictType, { id }, '删除所选字典类型')
-  proTable.value?.clearSelection()
-  proTable.value?.getTableList()
-}
-
-// 删除字典类型
-const handleDelete = async (params: Dict.ResDictType) => {
-  await useHandleData(deleteDictType, { id: [params.id] }, `删除【${params.name}】字典类型`)
-  proTable.value?.getTableList()
-}
-
-//查看字典类型包含的字典数据
-const toDictData = (row: Dict.ResDictType) => {
-  openView.value.open('字典数据', row.id)
-}
-
-const close = () => {
-  dialogVisible.value = false
-  //清空dialogForm中的值
-  dialogForm.value = {
-    id: "",
-    name: "",
-    code: "",
-    sort: 100,
-    remark: ""
-  }
-  dialogFormRef.value?.resetFields()
-}
-
-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)
-  }
-}
-</script>

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

@@ -54,14 +54,14 @@
 <script setup lang="tsx" name="dictData">
 import { useRoute } from 'vue-router'
 import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
-import { Dict } from '@/api/system/dict/interface'
+import { Dict } from '@/api/system/dictionary/interface'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import ImportExcel from '@/components/ImportExcel/index.vue'
 import { dialogSmall } from '@/utils/elementBind'
 import { useDictStore } from '@/stores/modules/dict'
 import { useHandleData } from '@/hooks/useHandleData'
 import { useDownload } from '@/hooks/useDownload'
-import { dictDataList } from '@/api/system/dict/dictExample'
+import { dictDataList } from '@/api/system/dictionary/dictExample'
 import { FormItemRule } from 'element-plus'
 import {
   getDictDataList,
@@ -70,7 +70,7 @@ import {
   batchAddDictData,
   exportDictData,
   deleteDictData
-} from '@/api/system/dict'
+} from '@/api/system/dictionary'
 
 const route = useRoute()
 

frontend/src/views/system/dictionary/dictType/components/typePopup.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-dialog v-model='dialogVisible' :title='dialogTitle' v-bind='dialogSmall'>
+    <div>
+      <el-form :model='formContent' ref='dialogFormRef' :rules='rules'>
+        <el-form-item label='类型名称' :label-width='100' prop='name'>
+          <el-input v-model='formContent.name' placeholder='请输入' autocomplete='off' />
+        </el-form-item>
+        <el-form-item label='类型编码' :label-width='100' prop='code'>
+          <el-input v-model='formContent.code' placeholder='请输入' autocomplete='off' />
+        </el-form-item>
+        <el-form-item label='显示排序' :label-width='100'>
+          <el-input-number v-model='formContent.sort' />
+        </el-form-item>
+        <el-form-item label='备注' :label-width='100'>
+          <el-input v-model='formContent.remark' placeholder='请输入备注' autocomplete='off' :rows='2'
+                    type='textarea' />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class='dialog-footer'>
+        <el-button @click='close()'>取消</el-button>
+        <el-button type='primary' @click='save()'>
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang='ts'>
+import { dialogSmall } from '@/utils/elementBind'
+import { Dict } from '@/api/system/dictionary/interface'
+import { FormItemRule } from 'element-plus'
+import { addDictType, updateDictType } from '@/api/system/dictionary/dictType'
+
+// 定义弹出组件元信息
+const dialogFormRef = ref()
+
+
+function useMetaInfo() {
+  const dialogVisible = ref(false)
+  const titleType = ref('add')
+  const formContent = ref<Dict.ResDictType>({
+    id: '',
+    name: '',
+    code: '',
+    sort: 100,
+    openLevel: 0,
+    openDescribe: 0,
+    remark: '',
+    state: 1,
+  })
+  return { dialogVisible, titleType, formContent }
+}
+
+const { dialogVisible, titleType, formContent } = useMetaInfo()
+
+// 清空formContent
+const resetFormContent = () => {
+  formContent.value = {
+    id: '',
+    name: '',
+    code: '',
+    sort: 100,
+    openLevel: 0,
+    openDescribe: 0,
+    remark: '',
+    state: 1,
+  }
+}
+
+let dialogTitle = computed(() => {
+  return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
+})
+
+// 定义表单校验规则
+const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+  name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
+  code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }],
+})
+
+
+// 关闭弹窗
+const close = () => {
+  dialogVisible.value = false
+  // 清空dialogForm中的值
+  resetFormContent()
+  // 重置表单
+  dialogFormRef.value?.resetFields()
+}
+
+// 保存数据
+const save = () => {
+  try {
+    dialogFormRef.value?.validate(async (valid: boolean) => {
+      if (valid) {
+        if (formContent.value.id) {
+          await updateDictType(formContent.value)
+        } else {
+          await addDictType(formContent.value)
+        }
+        ElMessage.success({ message: `${dialogTitle.value}成功！` })
+        close()
+        // 刷新表格
+        await props.refreshTable!()
+      } else {
+        ElMessage.error('表单验证失败！')
+      }
+    })
+  } catch (err) {
+    console.error('验证过程中出现错误', err)
+  }
+}
+
+// 打开弹窗，可能是新增，也可能是编辑
+const open = (sign: string, data: Dict.ResDictType) => {
+  titleType.value = sign
+  dialogVisible.value = true
+  if (data.id) {
+    formContent.value = { ...data }
+  } else {
+    resetFormContent()
+  }
+}
+
+// 对外映射
+defineExpose({ open })
+const props = defineProps<{
+  refreshTable: (() => Promise<void>) | undefined;
+}>()
+
+</script>

frontend/src/views/system/dictionary/dictType/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class='table-box' ref='popupBaseView'>
+    <ProTable
+        ref='proTable'
+        :columns='columns'
+        :request-api='getDictTypeList'
+    >
+      <template #tableHeader='scope'>
+        <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
+        <el-button type='primary' :icon='Download' plain>导出</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='View' @click='toDictData(scope.row)'>查看</el-button>
+        <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
+        <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
+      </template>
+    </ProTable>
+  </div>
+  <Data :width='viewWidth' :height='viewHeight' ref='openView' />
+  <type-popup :refresh-table='proTable?.getTableList' ref='typePopup' />
+</template>
+
+<script setup lang='tsx' name='dict'>
+import { CirclePlus, Delete, EditPen, Download, View } from '@element-plus/icons-vue'
+import { Dict } from '@/api/system/dictionary/interface'
+import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import TypePopup from '@/views/system/dictionary/dictType/components/typePopup.vue'
+import Data from '@/views/system/dictionary/data.vue'
+import { useDictStore } from '@/stores/modules/dict'
+import { useHandleData } from '@/hooks/useHandleData'
+import { useViewSize } from '@/hooks/useViewSize'
+import {
+  getDictTypeList,
+  deleteDictType,
+} from '@/api/system/dictionary/dictType'
+
+const dictStore = useDictStore()
+const { popupBaseView, viewWidth, viewHeight } = useViewSize()
+
+const proTable = ref<ProTableInstance>()
+const typePopup = ref()
+const openView = ref()
+
+const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  { type: 'index', fixed: 'left', width: 70, label: '序号' },
+  {
+    prop: 'name',
+    label: '类型名称',
+    width: 180,
+    search: {
+      el: 'input',
+    },
+  },
+  {
+    prop: 'code',
+    label: '类型编码',
+    width: 180,
+    search: {
+      el: 'input',
+    },
+  },
+  {
+    prop: 'remark',
+    label: '描述',
+    width: 340,
+  },
+  {
+    prop: 'state',
+    label: '状态',
+    enum: dictStore.getDictData('status'),
+    search: {
+      el: 'tree-select',
+      props: { filterable: true },
+    },
+    fieldNames: { label: 'label', value: 'code' },
+    render: scope => {
+      return (
+          <>
+            {
+              <el-tag type={scope.row.state ? 'success' : 'danger'}> {scope.row.state ? '正常' : '禁用'} </el-tag>
+            }
+          </>
+      )
+    },
+  },
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    width: 180,
+    search: {
+      el: 'date-picker',
+      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
+    },
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    fixed: 'right',
+    width: 330,
+  },
+])
+
+
+// 打开 drawer(新增、编辑)
+const openDialog = (titleType: string, row: Partial<Dict.ResDictType> = {}) => {
+  typePopup.value?.open(titleType, row)
+}
+
+// 导出字典类型
+// const downloadFile = async () => {
+//   ElMessageBox.confirm('确认导出字典类型数据?', '温馨提示', { type: 'warning' }).then(() =>
+//     useDownload(exportDictType, '字典类型列表', proTable.value?.searchParam),
+//   )
+// }
+
+// 批量删除字典类型
+const batchDelete = async (id: string[]) => {
+  await useHandleData(deleteDictType, id, '删除所选字典类型')
+  proTable.value?.clearSelection()
+  proTable.value?.getTableList()
+}
+
+// 删除字典类型
+const handleDelete = async (params: Dict.ResDictType) => {
+  await useHandleData(deleteDictType, [params.id], `删除【${params.name}】字典类型`)
+  proTable.value?.getTableList()
+}
+
+//查看字典类型包含的字典数据
+const toDictData = (row: Dict.ResDictType) => {
+  openView.value.open('字典数据', row.id)
+}
+
+
+</script>