字典类型 CRUD

frontend/.env.development

@@ -18,5 +18,5 @@ VITE_PWA=false
 VITE_API_URL=/api
 
 # 开发环境跨域代理，支持配置多个
-# VITE_PROXY=[["/api","http://192.168.1.125:18092/"]]
+ VITE_PROXY=[["/api","http://192.168.1.125:18092/"]]
-VITE_PROXY=[["/api","http://192.168.1.138:8080/"]]
+#VITE_PROXY=[["/api","http://192.168.1.138:8080/"]]

frontend/src/api/interface/index.ts

@@ -30,9 +30,9 @@ export interface ReqPage {
  * 分页响应参数
  */
 export interface ResPage<T> {
-  list: T[];
+  records: T[];
-  pageNum: number;
+  current: number;
-  pageSize: number;
+  size: number;
   total: number;
 }
 

frontend/src/api/system/dictionary/dictExample.ts

@@ -1,4 +1,4 @@
-import { type Dict } from "@/api/system/dict/interface";
+import { type Dict } from "@/api/system/dictionary/interface";
 
 export const dictTypeList: Dict.ResDictType[] = [
   {

frontend/src/api/system/dictionary/dictType/index.ts

@@ -0,0 +1,24 @@
+import http from '@/api'
+import { type Dict } from '@/api/system/dictionary/interface'
+
+//获取字典类型
+export const getDictTypeList = (params: Dict.ReqDictTypeParams) => {
+    return http.post(`/dictType/list`, params)
+}
+
+//添加字典类型
+export const addDictType = (params: Dict.ResDictType) => {
+    return http.post(`/dictType/add`, params)
+}
+
+//编辑字典类型
+export const updateDictType = (params: Dict.ResDictType) => {
+    return http.post(`/dictType/update`, params)
+}
+
+//删除字典类型
+export const deleteDictType = (params: string[]) => {
+    return http.post(`/dictType/delete`, params)
+}
+
+

frontend/src/api/system/dictionary/index.ts

@@ -1,6 +1,6 @@
 import http from "@/api";
 import { ADMIN as rePrefix } from "@/api/config/serviceName";
-import { type Dict } from "@/api/system/dict/interface";
+import { type Dict } from "@/api/system/dictionary/interface";
 
 //获取字典类型
 export const getDictTypeList = (params: Dict.ReqDictTypeParams) => {

frontend/src/api/system/dictionary/interface/index.ts

@@ -1,7 +1,25 @@
-import type { ReqPage } from "@/api/interface";
+import type { ReqPage, ResPage } from '@/api/interface'
 
 export namespace Dict {
 
+  /**
+   * 一个单表的CRUD需要申明一下几个对象
+   * 1、表格分页查询对象，字段：查询字段?、页码、每页条数；
+   * 2、新增、修改、根据id查询返回的对象；
+   * 3、表格查询分页返回的对象；
+   */
+
+  /**
+   * 字典类型表格分页查询参数
+   */
+  export interface ReqDictTypeParams extends ReqPage{
+    name?: string; // 名称
+    code?: string; // 编码
+  }
+
+  /**
+   * 字典类型新增、修改、根据id查询返回的对象
+   */
   export interface ResDictType {
     id: string; // 字典类型表Id
     name: string; // 名称
@@ -17,10 +35,27 @@ export namespace Dict {
     updateTime?: string | null; // 更新时间
   }
 
-  export interface ReqDictTypeParams extends ReqPage{
+  /**
+   * 字典类型表格查询分页返回的对象；
+   */
+  export interface ResDictTypePage extends ResPage<ResDictType> {
 
   }
 
+
+
+  /**
+   * 字典数据表格分页查询参数
+   */
+  export interface ReqDictDataParams extends ReqPage{
+    typeId: string; // 类型id 必填
+    name?: string; // 名称
+    code?: string; // 编码
+  }
+
+  /**
+   * 字典数据新增、修改、根据id查询返回的对象
+   */
   export interface ResDictData {
     id: string; // 字典数据表Id
     typeId: string; // 字典类型表Id
@@ -37,7 +72,11 @@ export namespace Dict {
     updateTime?: string | null; // 更新时间
   }
 
-  export interface ReqDictDataParams extends ReqPage{
+  /**
+   * 字典数据表格查询分页返回的对象；
+   */
+  export interface ResDictDataPage extends ResPage<ResDictData> {
 
   }
+
 }

frontend/src/api/user/login.ts

@@ -7,20 +7,20 @@ import http from '@/api'
  */
 // 用户登录
 export const loginApi = (params: Login.ReqLoginForm) => {
-  // return http.post<Login.ResLogin>(`${rePrefix}/login`, params, { loading: false })
+  return http.post<Login.ResLogin>(`${rePrefix}/login`, params, { loading: false })
-  return http.post<Login.ResLogin>(`/Register1`, params, { loading: false })
+  // return http.post<Login.ResLogin>(`/Register1`, params, { loading: false })
 }
 
 // 获取菜单列表
 export const getAuthMenuListApi = () => {
-  // return http.get<Menu.MenuOptions[]>(`${rePrefix}/menu/list`, {}, { loading: false })
+  return http.get<Menu.MenuOptions[]>(`${rePrefix}/menu/list`, {}, { loading: false })
-  return http.post<Menu.MenuOptions[]>(`/Register2`, {}, { loading: false })
+  // return http.post<Menu.MenuOptions[]>(`/Register2`, {}, { loading: false })
 }
 
 // 获取按钮权限
 export const getAuthButtonListApi = () => {
-  // return http.get<Login.ResAuthButtons>(`${rePrefix}/auth/buttons`, {}, { loading: false })
+  return http.get<Login.ResAuthButtons>(`${rePrefix}/auth/buttons`, {}, { loading: false })
-  return http.post<Login.ResAuthButtons>(`/Register3`, {}, { loading: false })
+  // return http.post<Login.ResAuthButtons>(`/Register3`, {}, { loading: false })
 }
 
 // 用户退出登录

frontend/src/components/ProTable/components/Pagination.vue

@@ -2,8 +2,8 @@
   <!-- 分页组件 -->
   <el-pagination
     :background="true"
-    :current-page="pageable.pageNum"
+    :current-page="pageable.current"
-    :page-size="pageable.pageSize"
+    :page-size="pageable.size"
     :page-sizes="[10, 25, 50, 100]"
     :total="pageable.total"
     :size="globalStore?.assemblySize ?? 'default'"
@@ -18,8 +18,8 @@ import { useGlobalStore } from "@/stores/modules/global";
 const globalStore = useGlobalStore();
 
 interface Pageable {
-  pageNum: number;
+  current: number;
-  pageSize: number;
+  size: number;
   total: number;
 }
 

frontend/src/enums/httpEnum.ts

@@ -2,7 +2,7 @@
  * @description：请求配置
  */
 export enum ResultEnum {
-  SUCCESS = "200",
+  SUCCESS = "A0000",
   ERROR = 500,
   OVERDUE = "401",
   TIMEOUT = 30000,

frontend/src/hooks/useTable.ts

@@ -21,9 +21,9 @@ export const useTable = (
     // 分页数据
     pageable: {
       // 当前页数
-      pageNum: 1,
+      current: 1,
       // 每页显示条数
-      pageSize: 10,
+      size: 10,
       // 总条数
       total: 0,
     },
@@ -68,10 +68,12 @@ export const useTable = (
         ...state.totalParam,
       });
       dataCallBack && (data = dataCallBack(data));
-      state.tableData = isPageable ? data.list : data;
+      state.tableData = isPageable ? data.records : data;
       // 解构后台返回的分页数据 (如果有分页更新分页信息)
       if (isPageable) {
         state.pageable.total = data.total;
+        state.pageable.current = data.current;
+        state.pageable.size = data.size;
       }
     } catch (error) {
       requestError && requestError(error);

frontend/src/layouts/components/Footer/index.vue

@@ -7,7 +7,7 @@
         <arrow-down />
       </el-icon>
     </span> -->
-      <!-- <el-button type="primary"> -->
+      <!-- <el-button dictType="primary"> -->
       <div class="change_mode">
         {{ title }}
         <el-icon class="el-icon--right change_mode_down"

frontend/src/types/auto-imports.d.ts

@@ -302,7 +302,7 @@ declare global {
   const watchWithFilter: (typeof import("@vueuse/core"))["watchWithFilter"];
   const whenever: (typeof import("@vueuse/core"))["whenever"];
 }
-// for type re-export
+// for dictType re-export
 declare global {
   // @ts-ignore
   export type {

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 },
+  //   { dictType: "sort", label: "Sort", width: 80 },
-  //   { type: "expand", label: "Expand", width: 85 },
+  //   { 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>

frontend/tailwind.config.js

@@ -1,4 +1,4 @@
-/** @type {import('tailwindcss').Config} */
+/** @dictType {import('tailwindcss').Config} */
 export default {
   content: ['index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
   theme: {