字典

src/api/dict/index.ts

@@ -18,20 +18,56 @@ export function getDictTypePage(
   queryParams: DictTypeQuery
 ): AxiosPromise<DictTypePageResult> {
   return request({
-    url: "/api/v1/dict/types/page",
+    url: "/system/dict/type/list",
     method: "get",
     params: queryParams,
   });
 }
+/** 获取字典选择框列表*/
+export function selectDictType(dictType) {
+  return request({
+    url: "/system/dict/data/type/" + dictType,
+    method: "get",
+  });
+}
+/**  导出字典类型*/
+export function exportType(queryParams: DictTypeQuery) {
+  return request({
+    url: "/system/dict/type/export",
+    method: "get",
+    params: queryParams,
+    responseType: "arraybuffer",
+  });
+}
+
+/** 修改字典类型*/
+export function updateType(data) {
+  const businessId = data.businessId;
+  return request({
+    url: "/system/dict/type/update/" + businessId,
+    method: "put",
+    data: data,
+    headers: {},
+  });
+}
+/** 新增字典类型*/
+export function addType(data) {
+  return request({
+    url: "/system/dict/type/add",
+    method: "post",
+    data: data,
+    headers: {},
+  });
+}
 
 /**
  * 字典类型表单数据
  *
  * @param id
  */
-export function getDictTypeForm(id: number): AxiosPromise<DictTypeForm> {
+export function getDictTypeForm(dictId: number): AxiosPromise<DictTypeForm> {
   return request({
-    url: "/api/v1/dict/types/" + id + "/form",
+    url: "/system/dict/type/detail/" + dictId,
     method: "get",
   });
 }
@@ -66,9 +102,9 @@ export function updateDictType(id: number, data: DictTypeForm) {
 /**
  * 删除字典类型
  */
-export function deleteDictTypes(ids: string) {
+export function deleteDictTypes(dictId: string) {
   return request({
-    url: "/api/v1/dict/types/" + ids,
+    url: "/system/dict/type/deleteLogical/" + dictId,
     method: "delete",
   });
 }

src/api/dict/types.ts

@@ -3,9 +3,25 @@
  */
 export interface DictTypeQuery extends PageQuery {
   /**
-   * 关键字(字典类型名称/编码)
+   * 字典名称
+   */
+  dictName?: string;
+  /**
+   * 字典类型
+   */
+  dictType?: string;
+  /**
+   * 状态
+   */
+  flag?: string;
+  /**
+   * 开始时间
    */
-  keywords?: string;
+  beginTime?: string | null;
+  /**
+   * 结束时间
+   */
+  endTime?: string | null;
 }
 
 /**
@@ -15,23 +31,27 @@ export interface DictTypePageVO {
   /**
    * 字典类型ID
    */
-  id: number;
+  businessId: number;
   /**
-   * 类型编码
+   * 字典名称
    */
-  code: string;
+  dictName: string;
   /**
-   * 类型名称
+   * 字典类型
    */
-  name: string;
+  dictType: string;
   /**
-   * 状态(1:启用;0:禁用)
+   * 状态
    */
-  status?: number;
+  flag: string;
   /**
    * 备注
    */
-  remark?: string;
+  remarks: string;
+  /**
+   * 创建时间
+   */
+  createDate: Date;
 }
 
 /**
@@ -46,23 +66,31 @@ export interface DictTypeForm {
   /**
    * 字典类型ID
    */
-  id?: number;
+  businessId?: number | undefined;
   /**
-   * 类型名称
+   * 字典名称
    */
-  name?: string;
+  dictName?: string;
   /**
-   * 类型编码
+   * 字典类型
+   */
+  dictType?: string;
+  /**
+   * 父字典名称
    */
-  code?: string;
+  parentId?: number | undefined;
   /**
-   * 类型状态：1:启用;0:禁用
+   * 父字典数据
    */
-  status: number;
+  dataId?: number | undefined;
   /**
    * 备注
    */
-  remark?: string;
+  remarks?: string;
+
+  status?: string | number;
+
+  flag?: string | number;
 }
 
 /**

src/api/user/index.ts

 import request from "@/utils/request";
 import { AxiosPromise } from "axios";
 import { User, UserForm, UserInfo, UserPageVO, UserQuery } from "./types";
-import {praseStrEmpty} from '@/utils/common'
+import { praseStrEmpty } from "@/utils/common";
 /**
  * 登录成功后获取用户信息（昵称、头像、权限集合和角色集合）
  */
@@ -17,9 +17,11 @@ export function getUserInfoApi() {
  *
  * @param queryParams
  */
-export function getUserPage(queryParams: UserQuery): AxiosPromise<PageResult<UserPageVO[]>> {
+export function getUserPage(
+  queryParams: UserQuery
+): AxiosPromise<PageResult<UserPageVO[]>> {
   return request({
-    url: '/system/user/list',
+    url: "/system/user/list",
     method: "get",
     params: queryParams,
   });
@@ -32,7 +34,7 @@ export function getUserPage(queryParams: UserQuery): AxiosPromise<PageResult<Use
  */
 export function getUserForm(userId: number): AxiosPromise<UserForm> {
   return request({
-    url: '/system/user/' + praseStrEmpty(userId),
+    url: "/system/user/" + praseStrEmpty(userId),
     method: "get",
   });
 }
@@ -44,7 +46,7 @@ export function getUserForm(userId: number): AxiosPromise<UserForm> {
  */
 export function addUser(data: any) {
   return request({
-    url: '/system/user/add',
+    url: "/system/user/add",
     method: "post",
     data: data,
   });
@@ -56,9 +58,9 @@ export function addUser(data: any) {
  * @param id
  * @param data
  */
-export function updateUser( data: UserForm) {
+export function updateUser(data: UserForm) {
   return request({
-    url: '/system/user/update',
+    url: "/system/user/update",
     method: "put",
     data: data,
   });
@@ -73,27 +75,27 @@ export function updateUser( data: UserForm) {
 export function updateUserPassword(businessId: number, password: string) {
   const data = {
     businessId,
-    password
-  }
+    password,
+  };
   return request({
-    url: '/system/user/resetPassword',
-    method: 'put',
-    params: data
+    url: "/system/user/resetPassword",
+    method: "put",
+    params: data,
   });
 }
 /**
  * 用户状态修改
  *
  */
-export function changeUserStatus(businessId: number,flag:string) {
+export function changeUserStatus(businessId: number, flag: string) {
   const data = {
     businessId,
-    flag
-  }
+    flag,
+  };
   return request({
-    url: '/system/user/changeStatus',
-    method: 'put',
-    params: data
+    url: "/system/user/changeStatus",
+    method: "put",
+    params: data,
   });
 }
 /**
@@ -103,7 +105,7 @@ export function changeUserStatus(businessId: number,flag:string) {
  */
 export function deleteUsers(id: number) {
   return request({
-    url: '/system/user/deleteLogical/' + id,
+    url: "/system/user/deleteLogical/" + id,
     method: "delete",
   });
 }
@@ -115,7 +117,7 @@ export function deleteUsers(id: number) {
  */
 export function downloadTemplateApi() {
   return request({
-    url: '/system/user/importTemplate',
+    url: "/system/user/importTemplate",
     method: "get",
     responseType: "arraybuffer",
   });
@@ -129,7 +131,7 @@ export function downloadTemplateApi() {
  */
 export function exportUser(queryParams: UserQuery) {
   return request({
-    url: '/system/user/export',
+    url: "/system/user/export",
     method: "get",
     params: queryParams,
     responseType: "arraybuffer",
@@ -141,16 +143,18 @@ export function exportUser(queryParams: UserQuery) {
  *
  * @param file
  */
-export function importUser( data: any) {
+export function importUser(data: any) {
   return request({
-    url: '/system/user/importExcel',
+    url: "/system/user/importExcel",
     method: "post",
     headers: {
-      'Content-Type': 'multipart/form-data'
+      "Content-Type": "multipart/form-data",
+    },
+    transformRequest: [
+      (data) => {
+        return data;
       },
-    transformRequest: [(data) => {
-      return data
-    }],
+    ],
     data,
   });
 }

src/api/user/types.ts

@@ -72,7 +72,6 @@ export interface UserQuery extends PageQuery {
    * 状态
    */
   flag?: string;
-
 }
 
 /**

src/router/index.ts

@@ -41,6 +41,19 @@ export const constantRoutes: RouteRecordRaw[] = [
           alwaysShow: false,
         },
       },
+      {
+        path: "dict/type/data/:dictId(\\d+)",
+        component: () => import("@/views/system/dict/data.vue"),
+        name: "Data",
+        meta: {
+          title: "字典数据",
+          icon: "",
+          affix: true,
+          keepAlive: true,
+          alwaysShow: false,
+          hidden: true,
+        },
+      },
       {
         path: "/401",
         component: () => import("@/views/error-page/401.vue"),

src/utils/commonField.ts

@@ -4,6 +4,7 @@ import {
   Edit,
   Search,
   Share,
+  Refresh,
   Upload,
   Download,
 } from "@element-plus/icons-vue";
@@ -34,9 +35,9 @@ export const commonField = {
   cleanName: "清空",
   viewName: "查看",
   size: "default",
-  smallSize: "small",
-  queryIcon: "el-icon-search",
-  resetIcon: "el-icon-refresh",
+  smallSize: "default",
+  queryIcon: Search,
+  resetIcon: Refresh,
   addIcon: Plus,
   delIcon: "el-icon-delete",
   importIcon: Upload,

src/views/system/dict/index.vue

@@ -6,10 +6,14 @@ import {
   addDictType,
   updateDictType,
   deleteDictTypes,
+  exportType,
+  selectDictType,
+  updateType,
+  addType,
 } from "@/api/dict";
 
 import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/types";
-
+import { commonField } from "@/utils/commonField";
 defineOptions({
   name: "DictType",
   inheritAttrs: false,
@@ -17,11 +21,30 @@ defineOptions({
 
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
-
+const hasDictDelPerm = ref(["sys:dict:delete"]);
+const hasDictRemovePerm = ref(["sys:dict:remove"]);
+const hasDictResetPerm = ref(["sys:user:resetPwd"]);
+const hasDictUpdatePerm = ref(["sys:dict:update"]);
+const hasDictEditPerm = ref(["sys:dict:edit"]);
+const hasDictAddPerm = ref(["sys:dict:add"]);
+const exportHaspermi = ref(["sys:dict:export"]);
 const loading = ref(false);
+const manageLoading = ref(false);
 const ids = ref<number[]>([]);
 const total = ref(0);
-
+const statusOptions = reactive([
+  {
+    dictLabel: "正常",
+    dictValue: "1",
+  },
+  {
+    dictLabel: "停用",
+    dictValue: "0",
+  },
+]);
+const dateRange = ref([]); // 日期范围
+const optionsDict = ref([]);
+const options = ref([]);
 const queryParams = reactive<DictTypeQuery>({
   pageNum: 1,
   pageSize: 10,
@@ -35,21 +58,45 @@ const dialog = reactive({
 });
 
 const formData = reactive<DictTypeForm>({
-  status: 1,
+  flag: "1",
+  parentId: "",
 });
 
 const rules = reactive({
-  name: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
+  dictName: [
+    { required: true, message: "请输入字典名称", trigger: ["blur", "change"] },
+  ],
+  dictType: [
+    { required: true, message: "请输入字典类型", trigger: ["blur", "change"] },
+  ],
+  dataId: [
+    {
+      required: true,
+      message: "请输入父字典数据",
+      trigger: ["blur", "change"],
+    },
+  ],
 });
-
+/** 搜索按钮操作 */
+function queryBtn() {
+  queryParams.pageNum = 1;
+  handleQuery();
+}
 /** 查询 */
 function handleQuery() {
   loading.value = true;
+  if (dateRange.value && dateRange.value.length > 0) {
+    queryParams.beginTime = dateRange.value[0];
+    queryParams.endTime = dateRange.value[1];
+  } else {
+    queryParams.beginTime = null;
+    queryParams.endTime = null;
+  }
   getDictTypePage(queryParams)
-    .then(({ data }) => {
-      dictTypeList.value = data.list;
-      total.value = data.total;
+    .then((response) => {
+      options.value = response.rows;
+      dictTypeList.value = response.rows;
+      total.value = response.total;
     })
     .finally(() => {
       loading.value = false;
@@ -61,15 +108,105 @@ function handleQuery() {
  */
 function resetQuery() {
   queryFormRef.value.resetFields();
+  dateRange.value = [];
   queryParams.pageNum = 1;
-  handleQuery();
+  queryParams.pageSize = 10;
+  queryParams.dictName = "";
+  queryParams.dictType = "";
+  queryParams.flag = "";
+  queryBtn();
 }
 
+/** 改变状态*/
+function handleStatusChange(row) {
+  const text = row.flag === "1" ? "启用" : "停用";
+  ElMessageBox.confirm("是否确认操作?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      return updateType(row);
+    })
+    .then(() => {
+      ElMessage.success(text + "成功");
+    })
+    .catch(function () {
+      row.flag = row.flag === "0" ? "1" : "0";
+    });
+}
+/** 动态表单验证*/
+function setRules() {
+  // if (formData.parentId !== null && formData.parentId !== "") {
+  //   this.$set(rules, "dataId", [
+  //     { required: true, message: "请输入父字典数据", trigger: "blur" },
+  //   ]);
+  // } else {
+  //   this.$delete(rules, "dataId");
+  // }
+}
+/** 清除已选择的*/
+function clearSelected(flag) {
+  // flag = true 为下拉框选项展开时的标识
+  if (flag) {
+    if (formData.dataId) {
+      // 如果找不到 下拉框选项中对应选中的选项 或者 下拉框选项中对应选中的选项 状态为1（停用）则将双向绑定的数据清空
+      if (
+        !optionsDict.find((item) => {
+          return item.dictCode === formData.dataId;
+        }) ||
+        optionsDict.find((item) => {
+          return item.dictCode === formData.dataId;
+        }).status === 1
+      ) {
+        formData.dataId = "";
+      }
+    }
+  }
+}
+/** 获取当前父字典数据*/
+function getOptions(val) {
+  console.log("aaaaaaaaaa", val);
+  formData.dataId = "";
+  selectDictType(
+    options.value.find((item) => {
+      return item.businessId === val;
+    }).dictType
+  ).then((response) => {
+    optionsDict.value = response.data;
+    setRules();
+  });
+}
 /** 行复选框选中  */
 function handleSelectionChange(selection: any) {
   ids.value = selection.map((item: any) => item.id);
 }
+function handleExport() {
+  ElMessageBox.confirm("是否确认操作?", "警告", {
+    cancelButtonText: "取消",
+    confirmButtonText: "确定",
+    type: "warning",
+  }).then(() => {
+    exportType(queryParams).then((response: any) => {
+      const fileData = response.data;
+      const fileType =
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+      const blob = new Blob([fileData], { type: fileType });
+      const downloadUrl = window.URL.createObjectURL(blob);
+
+      const downloadLink = document.createElement("a");
+      downloadLink.href = downloadUrl;
+      downloadLink.download = "字典类型信息" + ".xls"; // 下载后文件名
 
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+
+      document.body.removeChild(downloadLink);
+      window.URL.revokeObjectURL(downloadUrl);
+    });
+  });
+}
 /**
  * 打开字典类型表单弹窗
  *
@@ -79,8 +216,15 @@ function openDialog(dicTypeId?: number) {
   dialog.visible = true;
   if (dicTypeId) {
     dialog.title = "修改字典类型";
-    getDictTypeForm(dicTypeId).then(({ data }) => {
-      Object.assign(formData, data);
+    getDictTypeForm(dicTypeId).then((response) => {
+      Object.assign(formData, response.data);
+      getOptions(formData.parentId);
+      formData.dataId = response.data.dataId;
+      // nextTick(() => {
+      //   if (response.data.dataId !== null) {
+      //     formData.dataId = response.data.dataId.toString();
+      //   }
+      // });
     });
   } else {
     dialog.title = "新增字典类型";
@@ -90,25 +234,39 @@ function openDialog(dicTypeId?: number) {
 /** 字典类型表单提交 */
 function handleSubmit() {
   dataFormRef.value.validate((isValid: boolean) => {
+    console.log("isValid", isValid);
     if (isValid) {
-      loading.value = false;
-      const dictTypeId = formData.id;
-      if (dictTypeId) {
-        updateDictType(dictTypeId, formData)
-          .then(() => {
+      manageLoading.value = true;
+      const temp = Object.assign({}, formData);
+      if (!temp.parentId) {
+        temp.dataId = "";
+      }
+      if (dialog.title === "修改字典类型") {
+        updateType(temp)
+          .then((response) => {
+            if (response.code === 200) {
               ElMessage.success("修改成功");
               closeDialog();
               handleQuery();
+            }
+            manageLoading.value = false;
           })
-          .finally(() => (loading.value = false));
+          .catch(() => {
+            manageLoading.value = false;
+          });
       } else {
-        addDictType(formData)
-          .then(() => {
+        addType(temp)
+          .then((response) => {
+            if (response.code === 200) {
               ElMessage.success("新增成功");
               closeDialog();
               handleQuery();
+            }
+            manageLoading.value = false;
           })
-          .finally(() => (loading.value = false));
+          .catch(() => {
+            manageLoading.value = false;
+          });
       }
     }
   });
@@ -123,21 +281,22 @@ function closeDialog() {
 /**  重置字典类型表单 */
 function resetForm() {
   dataFormRef.value.resetFields();
-  dataFormRef.value.clearValidate();
-
-  formData.id = undefined;
-  formData.status = 1;
+  dataFormRef.value.resetFields();
+  formData.dataId = "";
+  formData.parentId = undefined;
+  formData.businessId = undefined;
+  formData.dictName = "";
+  formData.dictType = "";
+  formData.status = "0";
+  formData.remarks = "";
+  formData.flag = "1";
 }
 
 /** 删除字典类型 */
-function handleDelete(dictTypeId?: number) {
-  const dictTypeIds = [dictTypeId || ids.value].join(",");
-  if (!dictTypeIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
+function handleDelete(row) {
+  const dictTypeIds = row.businessId;
 
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+  ElMessageBox.confirm("是否确认操作?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
@@ -179,36 +338,95 @@ onMounted(() => {
   <div class="app-container">
     <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-form-item label="关键字" prop="name">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input
+            v-model="queryParams.dictName"
+            placeholder="请输入字典名称"
+            clearable
+            :maxlength="30"
+            style="width: 200px"
+            @keyup.enter="queryBtn"
+          />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
           <el-input
-            v-model="queryParams.keywords"
-            placeholder="字典类型名称/编码"
+            v-model.trim="queryParams.dictType"
+            placeholder="请输入字典类型"
+            clearable
+            :maxlength="30"
+            style="width: 200px"
+            @keyup.enter="queryBtn"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="flag">
+          <el-select
+            v-model="queryParams.flag"
+            placeholder="字典状态"
             clearable
-            @keyup.enter="handleQuery"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="dict in statusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="dateRange"
+            style="width: 300px"
+            value-format="YYYY-MM-DD"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery()"
-            ><i-ep-search />搜索</el-button
+          <!--          //查询按钮-->
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="queryBtn"
+            >{{ commonField.queryName }}</el-button
+          >
+          <!--          //重置按钮-->
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+            >{{ commonField.resetName }}</el-button
           >
-          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
         </el-form-item>
       </el-form>
     </div>
 
     <el-card shadow="never" class="table-container">
       <template #header>
+        <!--          //新增按钮-->
         <el-button
-          v-hasPerm="['sys:dict_type:add']"
-          type="success"
+          v-hasPermi="hasDictAddPerm"
+          :class="commonField.addClass"
+          :type="commonField.typePrimary"
+          :icon="commonField.addIcon"
+          :size="commonField.smallSize"
           @click="openDialog()"
-          ><i-ep-plus />新增</el-button
+          >{{ commonField.addName }}</el-button
         >
+        <!--          //导出-->
         <el-button
-          type="danger"
-          :disabled="ids.length === 0"
-          @click="handleDelete()"
-          ><i-ep-delete />删除</el-button
+          v-hasPermi="exportHaspermi"
+          :class="commonField.exportClass"
+          :type="commonField.typeSuccess"
+          :icon="commonField.exportIcon"
+          :size="commonField.smallSize"
+          @click="handleExport"
+          >{{ commonField.exportName }}</el-button
         >
       </template>
       <el-table
@@ -216,42 +434,79 @@ onMounted(() => {
         highlight-current-row
         :data="dictTypeList"
         border
-        @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="字典类型名称" prop="name" width="200" />
-        <el-table-column label="字典类型编码" prop="code" width="200" />
-        <el-table-column label="状态" align="center" width="100">
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column
+          label="字典名称"
+          prop="dictName"
+          :show-overflow-tooltip="true"
+        >
           <template #default="scope">
-            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
-            <el-tag v-else type="info">禁用</el-tag>
+            {{ scope.row.dictName || "-" }}
           </template>
         </el-table-column>
-        <el-table-column label="备注" prop="remark" align="center" />
-        <el-table-column fixed="right" label="操作" align="center" width="220">
+        <el-table-column label="字典类型" :show-overflow-tooltip="true">
           <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              size="small"
-              @click.stop="openDictDialog(scope.row)"
-              ><i-ep-Collection />字典数据</el-button
+            <router-link
+              v-if="scope.row.businessId"
+              :to="'/dict/type/data/' + scope.row.businessId"
+              class="link-type"
+            >
+              <span style="color: #03a487">{{ scope.row.dictType }}</span>
+            </router-link>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="flag">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.flag"
+              class="switchDisabledStyle"
+              inactive-value="0"
+              active-value="1"
+              @click.native="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="备注"
+          prop="remarks"
+          :show-overflow-tooltip="true"
+        >
+          <template #default="scope">
+            {{ scope.row.remarks || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          :show-overflow-tooltip="true"
+          prop="createTime"
         >
+          <template #default="scope">
+            <span>{{ scope.row.createDate || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <!--              //修改-->
             <el-button
-              v-hasPerm="['sys:dict_type:edit']"
-              type="primary"
+              v-hasPermi="hasDictUpdatePerm"
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
               link
-              size="small"
-              @click.stop="openDialog(scope.row.id)"
-              ><i-ep-edit />编辑</el-button
+              :size="commonField.size"
+              @click="openDialog(scope.row.businessId)"
+              >{{ commonField.updateName }}</el-button
             >
+            <!--              //删除-->
             <el-button
-              v-hasPerm="['sys:dict_type:delete']"
-              type="primary"
+              v-hasPermi="hasDictDelPerm"
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
               link
-              size="small"
-              @click.stop="handleDelete(scope.row.id)"
-              ><i-ep-delete />删除</el-button
+              :size="commonField.size"
+              @click="handleDelete(scope.row)"
+              >{{ commonField.deleteName }}</el-button
             >
           </template>
         </el-table-column>
@@ -276,33 +531,79 @@ onMounted(() => {
         ref="dataFormRef"
         :model="formData"
         :rules="rules"
-        label-width="80px"
+        label-width="auto"
       >
-        <el-form-item label="字典名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入字典名称" />
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="formData.dictName" placeholder="请输入字典名称" />
         </el-form-item>
-        <el-form-item label="字典编码" prop="code">
-          <el-input v-model="formData.code" placeholder="请输入字典编码" />
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input v-model="formData.dictType" placeholder="请输入字典类型" />
         </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
+        <el-form-item label="父字典名称">
+          <el-select
+            v-model="formData.parentId"
+            style="width: 100%"
+            clearable
+            placeholder="请选择父字典名称"
+            @change="getOptions"
+          >
+            <!--            @clear="setRules"-->
+            <el-option
+              v-for="item in options"
+              :key="item.businessId"
+              :label="item.dictName"
+              :value="item.businessId"
+            />
+          </el-select>
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
+        <el-form-item label="父字典数据" v-if="formData.parentId" prop="dataId">
+          <el-select
+            v-model="formData.dataId"
+            style="width: 100%"
+            clearable
+            placeholder="请选择父字典数据"
+          >
+            <!--            @visible-change="clearSelected"-->
+            <el-option
+              v-for="item in optionsDict"
+              :key="item.businessId"
+              :label="item.dictLabel"
+              :disabled="item.status == 1"
+              :value="item.businessId"
+            >
+              <span style="float: left">{{ item.dictLabel }}</span>
+              <span
+                v-if="item.status === '1'"
+                style="
+                  float: right;
+                  color: #8492a6;
+                  font-size: 12px;
+                  padding-left: 10px;
+                "
+                >{{ "已停用" }}</span
+              >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remarks">
           <el-input
-            v-model="formData.remark"
+            v-model.trim="formData.remarks"
+            maxlength="200"
             type="textarea"
-            placeholder="字典类型备注"
-            :autosize="{ minRows: 2, maxRows: 4 }"
+            placeholder="请输入内容"
           />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
           <el-button @click="closeDialog">取 消</el-button>
+          <el-button
+            type="primary"
+            :loading="manageLoading"
+            :disabled="manageLoading"
+            @click="handleSubmit"
+            >确 定</el-button
+          >
         </div>
       </template>
     </el-dialog>

src/views/system/role/index.vue

@@ -445,7 +445,6 @@ onMounted(() => {
             placeholder="角色名称"
             clearable
             :maxlength="30"
-            size="small"
             style="width: 150px"
             @keyup.enter="handleQuery"
           />
@@ -455,7 +454,6 @@ onMounted(() => {
             v-model="queryParams.roleKey"
             placeholder="请输入权限字符"
             clearable
-            size="small"
             style="width: 150px"
             @keyup.enter="handleQuery"
           />
@@ -465,7 +463,6 @@ onMounted(() => {
             v-model="queryParams.flag"
             placeholder="请选择角色状态"
             clearable
-            size="small"
             style="width: 150px"
           >
             <el-option
@@ -504,7 +501,6 @@ onMounted(() => {
         v-loading="loading"
         :data="roleList"
         highlight-current-row
-        border
       >
         <el-table-column type="index" label="序号" width="90" />
         <el-table-column