修改

src/api/dict/index.ts

@@ -23,6 +23,22 @@ export function getDictTypePage(
     params: queryParams,
   });
 }
+/** 查询字典数据列表*/
+export function listData(query) {
+  return request({
+    url: "/system/dict/data/list",
+    method: "get",
+    params: query,
+  });
+}
+
+export function listType(query) {
+  return request({
+    url: "/system/dict/type/list",
+    method: "get",
+    params: query,
+  });
+}
 /** 获取字典选择框列表*/
 export function selectDictType(dictType) {
   return request({

src/api/dict/types.ts

@@ -24,6 +24,24 @@ export interface DictTypeQuery extends PageQuery {
   endTime?: string | null;
 }
 
+/**
+ * 字典数据查询参数
+ */
+export interface DictTypeDataQuery extends PageQuery {
+  /**
+   * 字典名称
+   */
+  dictType?: string;
+  /**
+   * 字典标签
+   */
+  dictLabel?: string;
+  /**
+   * 状态
+   */
+  flag?: string;
+}
+
 /**
  * 字典类型分页对象
  */

src/views/system/dept/index.vue

@@ -241,7 +241,7 @@ onMounted(() => {
   getList();
 });
 
-onBeforeRouteLeave((to, from, next) => {
+onBeforeRouteLeave?.((to, from, next) => {
   setDataCache(route.path, queryParams);
   next();
 });

src/views/system/dict/data.vue

+<!--字典类型-->
+<script setup lang="ts">
+import {
+  listData,
+  getDictTypeForm,
+  addDictType,
+  updateDictType,
+  deleteDictTypes,
+  exportType,
+  selectDictType,
+  updateType,
+  addType,
+  listType,
+} from "@/api/dict";
+import { getDataCache, setDataCache } from "@/assets/js/filterData";
+import {
+  DictTypePageVO,
+  DictTypeDataQuery,
+  DictTypeForm,
+} from "@/api/dict/types";
+import { commonField } from "@/utils/commonField";
+defineOptions({
+  name: "Data",
+  inheritAttrs: false,
+});
+
+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: "0",
+  },
+  {
+    dictLabel: "停用",
+    dictValue: "1",
+  },
+]);
+const dateRange = ref([]); // 日期范围
+const optionsDict = ref([]);
+const typeOptions = ref([]);
+const options = ref([]);
+const queryParams = reactive<DictTypeDataQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+
+const dictTypeList = ref<DictTypePageVO[]>();
+
+const dialog = reactive({
+  title: "",
+  visible: false,
+});
+
+const formData = reactive<DictTypeForm>({
+  flag: "1",
+  parentId: "",
+});
+
+const rules = reactive({
+  dictName: [
+    { required: true, message: "请输入字典名称", trigger: ["blur", "change"] },
+  ],
+  dictType: [
+    { required: true, message: "请输入字典类型", trigger: ["blur", "change"] },
+  ],
+  dataId: [
+    {
+      required: true,
+      message: "请输入父字典数据",
+      trigger: ["blur", "change"],
+    },
+  ],
+});
+/** 查询字典类型列表 */
+function getTypeList() {
+  const params = {};
+  listType(params).then((response) => {
+    typeOptions.value = response.rows;
+  });
+}
+/** 搜索按钮操作 */
+function queryBtn() {
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+/** 查询 */
+function handleQuery() {
+  loading.value = true;
+  listData(queryParams)
+    .then((response) => {
+      dictTypeList.value = response.rows;
+      total.value = response.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/**
+ * 重置查询
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  dateRange.value = [];
+  queryParams.pageNum = 1;
+  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 getOptions(val) {
+  console.log("aaaaaaaaaa", val);
+  formData.dataId = "";
+  selectDictType(
+    options.value.find((item) => {
+      return item.businessId === val;
+    }).dictType
+  ).then((response) => {
+    optionsDict.value = response.data;
+  });
+}
+/** 行复选框选中  */
+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);
+    });
+  });
+}
+/**
+ * 打开字典类型表单弹窗
+ *
+ * @param dicTypeId 字典类型ID
+ */
+function openDialog(dicTypeId?: number) {
+  dialog.visible = true;
+  if (dicTypeId) {
+    dialog.title = "修改字典类型";
+    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 = "新增字典类型";
+  }
+}
+
+/** 字典类型表单提交 */
+function handleSubmit() {
+  dataFormRef.value.validate((isValid: boolean) => {
+    console.log("isValid", isValid);
+    if (isValid) {
+      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;
+          })
+          .catch(() => {
+            manageLoading.value = false;
+          });
+      } else {
+        addType(temp)
+          .then((response) => {
+            if (response.code === 200) {
+              ElMessage.success("新增成功");
+              closeDialog();
+              handleQuery();
+            }
+            manageLoading.value = false;
+          })
+          .catch(() => {
+            manageLoading.value = false;
+          });
+      }
+    }
+  });
+}
+
+/** 关闭字典类型弹窗 */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/**  重置字典类型表单 */
+function resetForm() {
+  dataFormRef.value.resetFields();
+  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(row) {
+  const dictTypeIds = row.businessId;
+
+  ElMessageBox.confirm("是否确认操作?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    deleteDictTypes(dictTypeIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
+  });
+}
+
+const dictDataDialog = reactive({
+  title: "",
+  visible: false,
+});
+
+const selectedDictType = reactive({ typeCode: "", typeName: "" }); // 当前选中的字典类型
+
+/** 打开字典数据弹窗 */
+function openDictDialog(row: DictTypePageVO) {
+  dictDataDialog.visible = true;
+  dictDataDialog.title = "【" + row.name + "】字典数据";
+
+  selectedDictType.typeCode = row.code;
+  selectedDictType.typeName = row.name;
+}
+
+/**  关闭字典数据弹窗 */
+function closeDictDialog() {
+  dictDataDialog.visible = false;
+}
+
+onMounted(() => {
+  queryParams.value = JSON.parse(getDataCache(route.path));
+  handleQuery();
+  getTypeList(); // 查询字典类型列表
+});
+onBeforeRouteLeave?.((to, from, next) => {
+  setDataCache(route.path, queryParams);
+  next();
+});
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="字典名称" prop="dictType">
+          <el-select
+            disabled
+            v-model="queryParams.dictType"
+            placeholder="字典状态"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.businessId"
+              :label="item.dictName"
+              :value="item.dictType"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="字典标签" prop="dictLabel">
+          <el-input
+            v-model="queryParams.dictLabel"
+            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
+            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>
+          <!--          //查询按钮-->
+          <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-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never" class="table-container">
+      <template #header>
+        <!--          //新增按钮-->
+        <el-button
+          v-hasPermi="hasDictAddPerm"
+          :class="commonField.addClass"
+          :type="commonField.typePrimary"
+          :icon="commonField.addIcon"
+          :size="commonField.smallSize"
+          @click="openDialog()"
+          >{{ commonField.addName }}</el-button
+        >
+        <!--          //导出-->
+        <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
+        v-loading="loading"
+        highlight-current-row
+        :data="dictTypeList"
+        border
+      >
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column
+          label="字典名称"
+          prop="dictName"
+          :show-overflow-tooltip="true"
+        >
+          <template #default="scope">
+            {{ scope.row.dictName || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="字典类型" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <router-link
+              v-if="scope.row.businessId"
+              :to="'/dict/type/data'"
+              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-hasPermi="hasDictUpdatePerm"
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              link
+              :size="commonField.size"
+              @click="openDialog(scope.row.businessId)"
+              >{{ commonField.updateName }}</el-button
+            >
+            <!--              //删除-->
+            <el-button
+              v-hasPermi="hasDictDelPerm"
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              link
+              :size="commonField.size"
+              @click="handleDelete(scope.row)"
+              >{{ commonField.deleteName }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="500px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="auto"
+      >
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="formData.dictName" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input v-model="formData.dictType" placeholder="请输入字典类型" />
+        </el-form-item>
+        <el-form-item label="父字典名称">
+          <el-select
+            v-model="formData.parentId"
+            style="width: 100%"
+            clearable
+            placeholder="请选择父字典名称"
+            @change="getOptions"
+          >
+            <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="父字典数据" 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.trim="formData.remarks"
+            maxlength="200"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeDialog">取 消</el-button>
+          <el-button
+            type="primary"
+            :loading="manageLoading"
+            :disabled="manageLoading"
+            @click="handleSubmit"
+            >确 定</el-button
+          >
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--字典数据弹窗-->
+    <el-dialog
+      v-model="dictDataDialog.visible"
+      :title="dictDataDialog.title"
+      width="1000px"
+      @close="closeDictDialog"
+    >
+      <dict-item
+        v-model:typeCode="selectedDictType.typeCode"
+        v-model:typeName="selectedDictType.typeName"
+      />
+    </el-dialog>
+  </div>
+</template>