refactor: ♻️ 管理页面样式优化

Former-commit-id: 7a8bf7022056e3263f58ef6ee1d74c6cc9efa719

src/styles/index.scss

@@ -15,6 +15,10 @@
   box-shadow: var(--el-box-shadow-light);
 }
 
+.table-container > .el-card__header {
+  padding: calc(var(--el-card-padding) - 8px) var(--el-card-padding);
+}
+
 .link-type,
 .link-type:focus {
   color: #337ab7;

src/styles/sidebar.scss

@@ -62,6 +62,7 @@
     }
 
     // menu hover
+    .submenu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
         background-color: $menuHover !important;
@@ -103,6 +104,23 @@
       margin-left: 54px;
     }
 
+    .submenu-title-noDropdown {
+      position: relative;
+      padding: 0 !important;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+      }
+    }
+
     .el-sub-menu {
       overflow: hidden;
 

src/views/system/dept/index.vue

@@ -195,7 +195,7 @@ onMounted(() => {
       </el-form>
     </div>
 
-    <el-card>
+    <el-card shadow="never" class="table-container">
       <template #header>
         <el-button
           v-hasPerm="['sys:dept:add']"

src/views/system/dict/components/dict-item.vue

@@ -0,0 +1,325 @@
+<!-- 字典数据 -->
+<script setup lang="ts">
+import {
+  getDictPage,
+  getDictFormData,
+  addDict,
+  updateDict,
+  deleteDict,
+} from "@/api/dict";
+import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
+
+defineOptions({
+  name: "DictData",
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  typeCode: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  typeName: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+});
+
+watch(
+  () => props.typeCode,
+  (newVal: string) => {
+    queryParams.typeCode = newVal;
+    formData.typeCode = newVal;
+    resetQuery();
+  }
+);
+
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<DictQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  typeCode: props.typeCode,
+});
+
+const dictList = ref<DictPageVO[]>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+});
+
+const formData = reactive<DictForm>({
+  status: 1,
+  typeCode: props.typeCode,
+  sort: 1,
+});
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
+});
+
+/**
+ * 查询
+ */
+function handleQuery() {
+  if (queryParams.typeCode) {
+    loading.value = true;
+    getDictPage(queryParams)
+      .then(({ data }) => {
+        dictList.value = data.list;
+        total.value = data.total;
+      })
+      .finally(() => (loading.value = false));
+  }
+}
+
+/**
+ * 重置查询
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+/**
+ * 行checkbox change事件
+ *
+ * @param selection
+ */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+/**
+ * 打开字典表单弹窗
+ *
+ * @param dictId 字典ID
+ */
+function openDialog(dictId?: number) {
+  dialog.visible = true;
+  if (dictId) {
+    dialog.title = "修改字典";
+    getDictFormData(dictId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    dialog.title = "新增字典";
+  }
+}
+
+/**
+ * 字典表单提交
+ */
+function handleSubmit() {
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      loading.value = false;
+      const dictId = formData.id;
+      if (dictId) {
+        updateDict(dictId, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        addDict(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.status = 1;
+  formData.sort = 1;
+  formData.typeCode = props.typeCode;
+}
+
+/**
+ * 删除字典
+ */
+function handleDelete(dictId?: number) {
+  const dictIds = [dictId || ids.value].join(",");
+  if (!dictIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    deleteDict(dictIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
+  });
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <!-- 搜索表单 -->
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="字典名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"
+            ><i-ep-search />搜索</el-button
+          >
+          <el-button @click="resetQuery"> <i-ep-refresh />重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-card shadow="never">
+      <template #header>
+        <el-button
+          v-hasPerm="['sys:dict:add']"
+          type="success"
+          @click="openDialog()"
+          ><i-ep-plus />新增</el-button
+        >
+        <el-button
+          v-hasPerm="['sys:dict:delete']"
+          type="danger"
+          :disabled="ids.length === 0"
+          @click="handleDelete()"
+          ><i-ep-delete />删除</el-button
+        >
+      </template>
+
+      <!-- 数据表格 -->
+      <el-table
+        v-loading="loading"
+        :data="dictList"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column label="字典名称" prop="name" />
+        <el-table-column label="字典值" prop="value" />
+        <el-table-column label="状态" align="center">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              v-hasPerm="['sys:dict:edit']"
+              type="primary"
+              link
+              @click="openDialog(scope.row.id)"
+              ><i-ep-edit />编辑</el-button
+            >
+            <el-button
+              v-hasPerm="['sys:dict:delete']"
+              type="primary"
+              link
+              @click.stop="handleDelete(scope.row.id)"
+              ><i-ep-delete />删除</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="100px"
+      >
+        <el-form-item label="字典名称">{{ typeName }}</el-form-item>
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典值" prop="value">
+          <el-input v-model="formData.value" placeholder="字典值" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            :min="0"
+          />
+        </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>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" />
+        </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>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/system/dict/index.vue

@@ -8,8 +8,6 @@ import {
   deleteDictTypes,
 } from "@/api/dict";
 
-import DictData from "@/views/system/dict/DictData.vue";
-
 import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/types";
 
 defineOptions({
@@ -196,7 +194,7 @@ onMounted(() => {
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="never" class="table-container">
       <template #header>
         <el-button
           v-hasPerm="['sys:dict_type:add']"
@@ -314,7 +312,7 @@ onMounted(() => {
       width="1000px"
       @close="closeDictDialog"
     >
-      <dict-data
+      <dict-item
         v-model:typeCode="selectedDictType.typeCode"
         v-model:typeName="selectedDictType.typeName"
       />

src/views/system/role/index.vue

@@ -203,7 +203,7 @@ function handleRoleMenuSubmit() {
 
     loading.value = true;
     updateRoleMenus(roleId, checkedMenuIds)
-      .then((res) => {
+      .then(() => {
         ElMessage.success("分配权限成功");
         menuDialogVisible.value = false;
         resetQuery();
@@ -241,7 +241,7 @@ onMounted(() => {
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="never" class="table-container">
       <template #header>
         <el-button type="success" @click="openDialog()"
           ><i-ep-plus />新增</el-button