refactor: ♻️ 优化button图标使用方式

src/views/system/config/index.vue

@@ -12,43 +12,31 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-            <template #icon>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-              <Search />
-            </template>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery">
-            <template #icon>
-              <Refresh />
-            </template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-wrapper">
+    <el-card shadow="never">
-      <template #header>
+      <div class="mb-10px">
         <el-button
           v-hasPerm="['sys:config:add']"
           type="success"
+          icon="plus"
           @click="handleOpenDialog()"
         >
-          <template #icon>
-            <Plus />
-          </template>
           新增
         </el-button>
         <el-button
           v-hasPerm="['sys:config:refresh']"
           color="#626aef"
+          icon="RefreshLeft"
           @click="handleRefreshCache"
         >
-          <el-icon><RefreshLeft /></el-icon>
           刷新缓存
         </el-button>
-      </template>
+      </div>
 
       <el-table
         ref="dataTableRef"
@@ -58,30 +46,10 @@
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="index" label="序号" width="60" />
-        <el-table-column
+        <el-table-column key="configName" label="配置名称" prop="configName" min-width="100" />
-          key="configName"
+        <el-table-column key="configKey" label="配置键" prop="configKey" min-width="100" />
-          label="配置名称"
+        <el-table-column key="configValue" label="配置值" prop="configValue" min-width="100" />
-          prop="configName"
+        <el-table-column key="remark" label="描述" prop="remark" min-width="100" />
-          min-width="100"
-        />
-        <el-table-column
-          key="configKey"
-          label="配置键"
-          prop="configKey"
-          min-width="100"
-        />
-        <el-table-column
-          key="configValue"
-          label="配置值"
-          prop="configValue"
-          min-width="100"
-        />
-        <el-table-column
-          key="remark"
-          label="描述"
-          prop="remark"
-          min-width="100"
-        />
         <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
             <el-button
@@ -89,11 +57,9 @@
               type="primary"
               size="small"
               link
+              icon="edit"
               @click="handleOpenDialog(scope.row.id)"
             >
-              <template #icon>
-                <Edit />
-              </template>
               编辑
             </el-button>
             <el-button
@@ -101,11 +67,9 @@
               type="danger"
               size="small"
               link
+              icon="delete"
               @click="handleDelete(scope.row.id)"
             >
-              <template #icon>
-                <Delete />
-              </template>
               删除
             </el-button>
           </template>
@@ -136,25 +100,13 @@
         label-width="100px"
       >
         <el-form-item label="配置名称" prop="configName">
-          <el-input
+          <el-input v-model="formData.configName" placeholder="请输入配置名称" :maxlength="50" />
-            v-model="formData.configName"
-            placeholder="请输入配置名称"
-            :maxlength="50"
-          />
         </el-form-item>
         <el-form-item label="配置键" prop="configKey">
-          <el-input
+          <el-input v-model="formData.configKey" placeholder="请输入配置键" :maxlength="50" />
-            v-model="formData.configKey"
-            placeholder="请输入配置键"
-            :maxlength="50"
-          />
         </el-form-item>
         <el-form-item label="配置值" prop="configValue">
-          <el-input
+          <el-input v-model="formData.configValue" placeholder="请输入配置值" :maxlength="100" />
-            v-model="formData.configValue"
-            placeholder="请输入配置值"
-            :maxlength="100"
-          />
         </el-form-item>
         <el-form-item label="描述" prop="remark">
           <el-input
@@ -183,17 +135,13 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import ConfigAPI, {
+import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";
-  ConfigPageVO,
-  ConfigForm,
-  ConfigPageQuery,
-} from "@/api/system/config";
 
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
 
 const loading = ref(false);
-const ids = ref<number[]>([]);
+const selectIds = ref<number[]>([]);
 const total = ref(0);
 
 const queryParams = reactive<ConfigPageQuery>({
@@ -205,12 +153,11 @@ const queryParams = reactive<ConfigPageQuery>({
 // 系统配置表格数据
 const pageData = ref<ConfigPageVO[]>([]);
 
-// 弹窗
 const dialog = reactive({
   title: "",
   visible: false,
 });
-// 系统配置表单
+
 const formData = reactive<ConfigForm>({
   id: undefined,
   configName: "",
@@ -220,18 +167,12 @@ const formData = reactive<ConfigForm>({
 });
 
 const rules = reactive({
-  configName: [
+  configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
-    { required: true, message: "请输入系统配置名称", trigger: "blur" },
+  configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
-  ],
+  configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
-  configKey: [
-    { required: true, message: "请输入系统配置编码", trigger: "blur" },
-  ],
-  configValue: [
-    { required: true, message: "请输入系统配置值", trigger: "blur" },
-  ],
 });
 
-/** 查询系统配置 */
+// 查询系统配置
 function handleQuery() {
   loading.value = true;
   ConfigAPI.getPage(queryParams)
@@ -243,19 +184,20 @@ function handleQuery() {
       loading.value = false;
     });
 }
-/** 重置系统配置查询 */
+
+// 重置查询
 function handleResetQuery() {
   queryFormRef.value.resetFields();
   queryParams.pageNum = 1;
   handleQuery();
 }
 
-/** 行复选框选中记录选中ID集合 */
+// 行复选框选中项变化
 function handleSelectionChange(selection: any) {
-  ids.value = selection.map((item: any) => item.id);
+  selectIds.value = selection.map((item: any) => item.id);
 }
 
-/** 打开系统配置弹窗 */
+// 打开系统配置弹窗
 function handleOpenDialog(id?: number) {
   dialog.visible = true;
   if (id) {
@@ -269,14 +211,14 @@ function handleOpenDialog(id?: number) {
   }
 }
 
-/** 刷新缓存 **/
+// 刷新缓存
 function handleRefreshCache() {
   ConfigAPI.refreshCache().then(() => {
     ElMessage.success("刷新成功");
   });
 }
 
-/** 提交系统配置表单 */
+// 系统配置表单提交
 function handleSubmit() {
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
@@ -303,22 +245,26 @@ function handleSubmit() {
   });
 }
 
-/** 关闭系统配置弹窗 */
+// 重置表单
-function handleCloseDialog() {
+function resetForm() {
-  dialog.visible = false;
   dataFormRef.value.resetFields();
   dataFormRef.value.clearValidate();
-  formData.id != undefined;
+  formData.id = undefined;
 }
 
-/** 删除系统配置 */
+// 关闭系统配置弹窗
+function handleCloseDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+// 删除系统配置
 function handleDelete(id: number) {
   ElMessageBox.confirm("确认删除该项配置?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
-  }).then(
+  }).then(() => {
-    () => {
     loading.value = true;
     ConfigAPI.deleteById(id)
       .then(() => {
@@ -326,9 +272,7 @@ function handleDelete(id: number) {
         handleResetQuery();
       })
       .finally(() => (loading.value = false));
-    },
+  });
-    () => {}
-  );
 }
 
 onMounted(() => {

src/views/system/dept/index.vue

@@ -11,29 +11,16 @@
         </el-form-item>
 
         <el-form-item label="部门状态" prop="status">
-          <el-select
+          <el-select v-model="queryParams.status" placeholder="全部" clearable class="!w-[100px]">
-            v-model="queryParams.status"
-            placeholder="全部"
-            clearable
-            class="!w-[100px]"
-          >
             <el-option :value="1" label="正常" />
             <el-option :value="0" label="禁用" />
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button class="filter-item" type="primary" @click="handleQuery">
+          <el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
-            <template #icon>
-              <Search />
-            </template>
             搜索
           </el-button>
-          <el-button @click="handleResetQuery">
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-            <template #icon>
-              <Refresh />
-            </template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -43,22 +30,18 @@
         <el-button
           v-hasPerm="['sys:dept:add']"
           type="success"
+          icon="plus"
           @click="handleOpenDialog(0, undefined)"
         >
-          <template #icon>
-            <Plus />
-          </template>
           新增
         </el-button>
         <el-button
           v-hasPerm="['sys:dept:delete']"
           type="danger"
-          :disabled="ids.length === 0"
+          :disabled="selectIds.length === 0"
+          icon="delete"
           @click="handleDelete()"
         >
-          <template #icon>
-            <Delete />
-          </template>
           删除
         </el-button>
       </div>
@@ -90,11 +73,9 @@
               type="primary"
               link
               size="small"
+              icon="plus"
               @click.stop="handleOpenDialog(scope.row.id, undefined)"
             >
-              <template #icon>
-                <Plus />
-              </template>
               新增
             </el-button>
             <el-button
@@ -102,11 +83,9 @@
               type="primary"
               link
               size="small"
+              icon="edit"
               @click.stop="handleOpenDialog(scope.row.parentId, scope.row.id)"
             >
-              <template #icon>
-                <Edit />
-              </template>
               编辑
             </el-button>
             <el-button
@@ -114,11 +93,9 @@
               type="danger"
               link
               size="small"
+              icon="delete"
               @click.stop="handleDelete(scope.row.id)"
             >
-              <template #icon>
-                <Delete />
-              </template>
               删除
             </el-button>
           </template>
@@ -132,12 +109,7 @@
       width="600px"
       @closed="handleCloseDialog"
     >
-      <el-form
+      <el-form ref="deptFormRef" :model="formData" :rules="rules" label-width="80px">
-        ref="deptFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="80px"
-      >
         <el-form-item label="上级部门" prop="parentId">
           <el-tree-select
             v-model="formData.parentId"
@@ -192,17 +164,16 @@ const queryFormRef = ref(ElForm);
 const deptFormRef = ref(ElForm);
 
 const loading = ref(false);
-const ids = ref<number[]>([]);
+const selectIds = ref<number[]>([]);
+const queryParams = reactive<DeptQuery>({});
+
 const dialog = reactive({
   title: "",
   visible: false,
 });
 
-const queryParams = reactive<DeptQuery>({});
 const deptList = ref<DeptVO[]>();
-
 const deptOptions = ref<OptionType[]>();
-
 const formData = reactive<DeptForm>({
   status: 1,
   parentId: 0,
@@ -210,15 +181,13 @@ const formData = reactive<DeptForm>({
 });
 
 const rules = reactive({
-  parentId: [
+  parentId: [{ required: true, message: "上级部门不能为空", trigger: "change" }],
-    { required: true, message: "上级部门不能为空", trigger: "change" },
-  ],
   name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
   code: [{ required: true, message: "部门编号不能为空", trigger: "blur" }],
   sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
 });
 
-/** 查询部门 */
+// 查询部门
 function handleQuery() {
   loading.value = true;
   DeptAPI.getList(queryParams).then((data) => {
@@ -227,15 +196,15 @@ function handleQuery() {
   });
 }
 
-/** 重置查询 */
+// 重置查询
 function handleResetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
 }
 
-/** 行复选框选中记录选中ID集合 */
+// 处理选中项变化
 function handleSelectionChange(selection: any) {
-  ids.value = selection.map((item: any) => item.id);
+  selectIds.value = selection.map((item: any) => item.id);
 }
 
 /**
@@ -267,7 +236,7 @@ async function handleOpenDialog(parentId?: number, deptId?: number) {
   }
 }
 
-/** 提交部门表单 */
+// 部门表单提交
 function handleSubmit() {
   deptFormRef.value.validate((valid: any) => {
     if (valid) {
@@ -294,9 +263,9 @@ function handleSubmit() {
   });
 }
 
-/** 删除部门 */
+// 删除部门
 function handleDelete(deptId?: number) {
-  const deptIds = [deptId || ids.value].join(",");
+  const deptIds = [deptId || selectIds.value].join(",");
 
   if (!deptIds) {
     ElMessage.warning("请勾选删除项");
@@ -323,10 +292,8 @@ function handleDelete(deptId?: number) {
   );
 }
 
-/** 关闭弹窗 */
+// 重置表单
-function handleCloseDialog() {
+function resetForm() {
-  dialog.visible = false;
-
   deptFormRef.value.resetFields();
   deptFormRef.value.clearValidate();
 
@@ -336,6 +303,12 @@ function handleCloseDialog() {
   formData.sort = 1;
 }
 
+// 关闭弹窗
+function handleCloseDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
 onMounted(() => {
   handleQuery();
 });

src/views/system/dict/data.vue

@@ -12,38 +12,16 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery()">
+          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
-            <template #icon>
+          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
-              <Search />
-            </template>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery()">
-            <template #icon>
-              <Refresh />
-            </template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
 
     <el-card shadow="never">
       <div class="mb-[10px]">
-        <el-button type="success" @click="handleOpenDialog()">
+        <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
-          <template #icon>
+        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
-            <Plus />
-          </template>
-          新增
-        </el-button>
-        <el-button
-          type="danger"
-          :disabled="ids.length === 0"
-          @click="handleDelete()"
-        >
-          <template #icon>
-            <Delete />
-          </template>
           删除
         </el-button>
       </div>
@@ -73,22 +51,18 @@
               type="primary"
               link
               size="small"
+              icon="edit"
               @click.stop="handleOpenDialog(scope.row)"
             >
-              <template #icon>
-                <Edit />
-              </template>
               编辑
             </el-button>
             <el-button
               type="danger"
               link
               size="small"
+              icon="delete"
               @click.stop="handleDelete(scope.row.id)"
             >
-              <template #icon>
-                <Delete />
-              </template>
               删除
             </el-button>
           </template>
@@ -111,12 +85,7 @@
       width="820px"
       @close="handleCloseDialog"
     >
-      <el-form
+      <el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
-        ref="dataFormRef"
-        :model="formData"
-        :rules="computedRules"
-        label-width="100px"
-      >
         <el-card shadow="never">
           <el-form-item label="字典标签" prop="label">
             <el-input v-model="formData.label" placeholder="请输入字典标签" />
@@ -131,17 +100,10 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item label="排序">
-            <el-input-number
+            <el-input-number v-model="formData.sort" controls-position="right" />
-              v-model="formData.sort"
-              controls-position="right"
-            />
           </el-form-item>
           <el-form-item label="标签类型">
-            <el-tag
+            <el-tag v-if="formData.tagType" :type="formData.tagType" class="mr-2">
-              v-if="formData.tagType"
-              :type="formData.tagType"
-              class="mr-2"
-            >
               {{ formData.label }}
             </el-tag>
             <el-radio-group v-model="formData.tagType">

src/views/system/dict/index.vue

@@ -12,38 +12,16 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery()">
+          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
-            <template #icon>
+          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
-              <Search />
-            </template>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery()">
-            <template #icon>
-              <Refresh />
-            </template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
 
     <el-card shadow="never">
       <div class="mb-[10px]">
-        <el-button type="success" @click="handleAddClick()">
+        <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
-          <template #icon>
+        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
-            <Plus />
-          </template>
-          新增
-        </el-button>
-        <el-button
-          type="danger"
-          :disabled="ids.length === 0"
-          @click="handleDelete()"
-        >
-          <template #icon>
-            <Delete />
-          </template>
           删除
         </el-button>
       </div>
@@ -67,12 +45,7 @@
         </el-table-column>
         <el-table-column fixed="right" label="操作" align="center" width="220">
           <template #default="scope">
-            <el-button
+            <el-button type="primary" link size="small" @click.stop="handleOpenDictData(scope.row)">
-              type="primary"
-              link
-              size="small"
-              @click.stop="handleOpenDictData(scope.row)"
-            >
               <template #icon>
                 <Collection />
               </template>
@@ -83,22 +56,18 @@
               type="primary"
               link
               size="small"
+              icon="edit"
               @click.stop="handleEditClick(scope.row.id, scope.row.name)"
             >
-              <template #icon>
-                <Edit />
-              </template>
               编辑
             </el-button>
             <el-button
               type="danger"
               link
               size="small"
+              icon="delete"
               @click.stop="handleDelete(scope.row.id)"
             >
-              <template #icon>
-                <Delete />
-              </template>
               删除
             </el-button>
           </template>
@@ -121,22 +90,14 @@
       width="500px"
       @close="handleCloseDialog"
     >
-      <el-form
+      <el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
-        ref="dataFormRef"
-        :model="formData"
-        :rules="computedRules"
-        label-width="100px"
-      >
         <el-card shadow="never">
           <el-form-item label="字典名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入字典名称" />
           </el-form-item>
 
           <el-form-item label="字典编码" prop="dictCode">
-            <el-input
+            <el-input v-model="formData.dictCode" placeholder="请输入字典编码" />
-              v-model="formData.dictCode"
-              placeholder="请输入字典编码"
-            />
           </el-form-item>
 
           <el-form-item label="状态">
@@ -147,11 +108,7 @@
           </el-form-item>
 
           <el-form-item label="备注">
-            <el-input
+            <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
-              v-model="formData.remark"
-              type="textarea"
-              placeholder="请输入备注"
-            />
           </el-form-item>
         </el-card>
       </el-form>
@@ -172,11 +129,7 @@ defineOptions({
   inherititems: false,
 });
 
-import DictAPI, {
+import DictAPI, { DictPageQuery, DictPageVO, DictForm } from "@/api/system/dict";
-  DictPageQuery,
-  DictPageVO,
-  DictForm,
-} from "@/api/system/dict";
 
 import router from "@/router";
 

src/views/system/log/index.vue

@@ -24,29 +24,14 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" @click="handleQuery">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-            <template #icon>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-              <Search />
-            </template>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery">
-            <template #icon>
-              <Refresh />
-            </template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
 
     <el-card shadow="never">
-      <el-table
+      <el-table v-loading="loading" :data="pageData" highlight-current-row border>
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-        border
-      >
         <el-table-column label="操作时间" prop="createTime" width="180" />
         <el-table-column label="操作人" prop="operator" width="120" />
         <el-table-column label="日志模块" prop="module" width="100" />
@@ -54,17 +39,8 @@
         <el-table-column label="IP 地址" prop="ip" width="150" />
         <el-table-column label="地区" prop="region" width="150" />
         <el-table-column label="浏览器" prop="browser" width="150" />
-        <el-table-column
+        <el-table-column label="终端系统" prop="os" width="200" show-overflow-tooltip />
-          label="终端系统"
+        <el-table-column label="执行时间(ms)" prop="executionTime" width="150" />
-          prop="os"
-          width="200"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="执行时间(ms)"
-          prop="executionTime"
-          width="150"
-        />
       </el-table>
 
       <pagination

src/views/system/menu/index.vue

@@ -11,29 +11,23 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-            <template #icon><Search /></template>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery">
-            <template #icon><Refresh /></template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-wrapper">
+    <el-card shadow="never">
-      <template #header>
+      <div class="mb-10px">
         <el-button
           v-hasPerm="['sys:menu:add']"
           type="success"
+          icon="plus"
           @click="handleOpenDialog(0)"
         >
-          <template #icon><Plus /></template>
           新增
         </el-button>
-      </template>
+      </div>
 
       <el-table
         v-loading="loading"
@@ -49,9 +43,7 @@
       >
         <el-table-column label="菜单名称" min-width="200">
           <template #default="scope">
-            <template
+            <template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
-              v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')"
-            >
               <el-icon style="vertical-align: -0.15em">
                 <component :is="scope.row.icon.replace('el-icon-', '')" />
               </el-icon>
@@ -59,70 +51,29 @@
             <template v-else-if="scope.row.icon">
               <svg-icon :icon-class="scope.row.icon" />
             </template>
-            <template v-else>
-              <svg-icon icon-class="menu" />
-            </template>
             {{ scope.row.name }}
           </template>
         </el-table-column>
 
         <el-table-column label="类型" align="center" width="80">
           <template #default="scope">
-            <el-tag
+            <el-tag v-if="scope.row.type === MenuTypeEnum.CATALOG" type="warning">目录</el-tag>
-              v-if="scope.row.type === MenuTypeEnum.CATALOG"
+            <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success">菜单</el-tag>
-              type="warning"
+            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
-            >
+            <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
-              目录
-            </el-tag>
-            <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success">
-              菜单
-            </el-tag>
-            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">
-              按钮
-            </el-tag>
-            <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">
-              外链
-            </el-tag>
           </template>
         </el-table-column>
-
+        <el-table-column label="路由名称" align="left" width="150" prop="routeName" />
-        <el-table-column
+        <el-table-column label="路由路径" align="left" width="150" prop="routePath" />
-          label="路由名称"
+        <el-table-column label="组件路径" align="left" width="250" prop="component" />
-          align="left"
+        <el-table-column label="权限标识" align="center" width="200" prop="perm" />
-          width="150"
-          prop="routeName"
-        />
-
-        <el-table-column
-          label="路由路径"
-          align="left"
-          width="150"
-          prop="routePath"
-        />
-
-        <el-table-column
-          label="组件路径"
-          align="left"
-          width="250"
-          prop="component"
-        />
-
-        <el-table-column
-          label="权限标识"
-          align="center"
-          width="200"
-          prop="perm"
-        />
-
         <el-table-column label="状态" align="center" width="80">
           <template #default="scope">
             <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
             <el-tag v-else type="info">隐藏</el-tag>
           </template>
         </el-table-column>
-
         <el-table-column label="排序" align="center" width="80" prop="sort" />
-
         <el-table-column fixed="right" align="center" label="操作" width="220">
           <template #default="scope">
             <el-button
@@ -131,9 +82,9 @@
               type="primary"
               link
               size="small"
+              icon="plus"
               @click.stop="handleOpenDialog(scope.row.id)"
             >
-              <template #icon><Plus /></template>
               新增
             </el-button>
 
@@ -142,9 +93,9 @@
               type="primary"
               link
               size="small"
+              icon="edit"
               @click.stop="handleOpenDialog(undefined, scope.row.id)"
             >
-              <template #icon><Edit /></template>
               编辑
             </el-button>
             <el-button
@@ -152,9 +103,9 @@
               type="danger"
               link
               size="small"
+              icon="delete"
               @click.stop="handleDelete(scope.row.id)"
             >
-              <template #icon><Delete /></template>
               删除
             </el-button>
           </template>
@@ -162,18 +113,8 @@
       </el-table>
     </el-card>
 
-    <el-drawer
+    <el-drawer v-model="dialog.visible" :title="dialog.title" size="50%" @close="handleCloseDialog">
-      v-model="dialog.visible"
+      <el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="100px">
-      :title="dialog.title"
-      size="50%"
-      @close="handleCloseDialog"
-    >
-      <el-form
-        ref="menuFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
         <el-form-item label="父级菜单" prop="parentId">
           <el-tree-select
             v-model="formData.parentId"
@@ -190,10 +131,7 @@
         </el-form-item>
 
         <el-form-item label="菜单类型" prop="type">
-          <el-radio-group
+          <el-radio-group v-model="formData.type" @change="handleMenuTypeChange">
-            v-model="formData.type"
-            @change="handleMenuTypeChange"
-          >
             <el-radio value="CATALOG">目录</el-radio>
             <el-radio value="MENU">菜单</el-radio>
             <el-radio value="BUTTON">按钮</el-radio>
@@ -201,30 +139,18 @@
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item
+        <el-form-item v-if="formData.type == 'EXTLINK'" label="外链地址" prop="path">
-          v-if="formData.type == 'EXTLINK'"
+          <el-input v-model="formData.routePath" placeholder="请输入外链完整路径" />
-          label="外链地址"
-          prop="path"
-        >
-          <el-input
-            v-model="formData.routePath"
-            placeholder="请输入外链完整路径"
-          />
         </el-form-item>
 
-        <el-form-item
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routeName">
-          v-if="formData.type == MenuTypeEnum.MENU"
-          prop="routeName"
-        >
           <template #label>
             <div class="flex-y-center">
               路由名称
               <el-tooltip placement="bottom" effect="light">
                 <template #content>
-                  如果需要开启缓存，需保证页面 defineOptions 中的 name
+                  如果需要开启缓存，需保证页面 defineOptions 中的 name 与此处一致，建议使用驼峰。
-                  与此处一致，建议使用驼峰。
                 </template>
-
                 <el-icon class="ml-1 cursor-pointer">
                   <QuestionFilled />
                 </el-icon>
@@ -235,10 +161,7 @@
         </el-form-item>
 
         <el-form-item
-          v-if="
+          v-if="formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU"
-            formData.type == MenuTypeEnum.CATALOG ||
-            formData.type == MenuTypeEnum.MENU
-          "
           prop="routePath"
         >
           <template #label>
@@ -246,8 +169,7 @@
               路由路径
               <el-tooltip placement="bottom" effect="light">
                 <template #content>
-                  定义应用中不同页面对应的 URL 路径，目录需以 /
+                  定义应用中不同页面对应的 URL 路径，目录需以 / 开头，菜单项不用。例如：系统管理目录
-                  开头，菜单项不用。例如：系统管理目录
                   /system，系统管理下的用户管理菜单 user。
                 </template>
                 <el-icon class="ml-1 cursor-pointer">
@@ -264,17 +186,13 @@
           <el-input v-else v-model="formData.routePath" placeholder="user" />
         </el-form-item>
 
-        <el-form-item
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="component">
-          v-if="formData.type == MenuTypeEnum.MENU"
-          prop="component"
-        >
           <template #label>
             <div class="flex-y-center">
               组件路径
               <el-tooltip placement="bottom" effect="light">
                 <template #content>
-                  组件页面完整路径，相对于 src/views/，如
+                  组件页面完整路径，相对于 src/views/，如 system/user/index，缺省后缀 .vue
-                  system/user/index，缺省后缀 .vue
                 </template>
                 <el-icon class="ml-1 cursor-pointer">
                   <QuestionFilled />
@@ -283,17 +201,9 @@
             </div>
           </template>
 
-          <el-input
+          <el-input v-model="formData.component" placeholder="system/user/index" style="width: 95%">
-            v-model="formData.component"
+            <template v-if="formData.type == MenuTypeEnum.MENU" #prepend>src/views/</template>
-            placeholder="system/user/index"
+            <template v-if="formData.type == MenuTypeEnum.MENU" #append>.vue</template>
-            style="width: 95%"
-          >
-            <template v-if="formData.type == MenuTypeEnum.MENU" #prepend>
-              src/views/
-            </template>
-            <template v-if="formData.type == MenuTypeEnum.MENU" #append>
-              .vue
-            </template>
           </el-input>
         </el-form-item>
 
@@ -313,35 +223,21 @@
           </template>
 
           <div v-if="!formData.params || formData.params.length === 0">
-            <el-button
+            <el-button type="success" plain @click="formData.params = [{ key: '', value: '' }]">
-              type="success"
-              plain
-              @click="formData.params = [{ key: '', value: '' }]"
-            >
               添加路由参数
             </el-button>
           </div>
 
           <div v-else>
             <div v-for="(item, index) in formData.params" :key="index">
-              <el-input
+              <el-input v-model="item.key" placeholder="参数名" style="width: 100px" />
-                v-model="item.key"
-                placeholder="参数名"
-                style="width: 100px"
-              />
 
               <span class="mx-1">=</span>
 
-              <el-input
+              <el-input v-model="item.value" placeholder="参数值" style="width: 100px" />
-                v-model="item.value"
-                placeholder="参数值"
-                style="width: 100px"
-              />
 
               <el-icon
-                v-if="
+                v-if="formData.params.indexOf(item) === formData.params.length - 1"
-                  formData.params.indexOf(item) === formData.params.length - 1
-                "
                 class="ml-2 cursor-pointer color-[var(--el-color-success)]"
                 style="vertical-align: -0.15em"
                 @click="formData.params.push({ key: '', value: '' })"
@@ -351,9 +247,7 @@
               <el-icon
                 class="ml-2 cursor-pointer color-[var(--el-color-danger)]"
                 style="vertical-align: -0.15em"
-                @click="
+                @click="formData.params.splice(formData.params.indexOf(item), 1)"
-                  formData.params.splice(formData.params.indexOf(item), 1)
-                "
               >
                 <DeleteFilled />
               </el-icon>
@@ -361,11 +255,7 @@
           </div>
         </el-form-item>
 
-        <el-form-item
+        <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" prop="visible" label="显示状态">
-          v-if="formData.type !== MenuTypeEnum.BUTTON"
-          prop="visible"
-          label="显示状态"
-        >
           <el-radio-group v-model="formData.visible">
             <el-radio :value="1">显示</el-radio>
             <el-radio :value="0">隐藏</el-radio>
@@ -373,10 +263,7 @@
         </el-form-item>
 
         <el-form-item
-          v-if="
+          v-if="formData.type === MenuTypeEnum.CATALOG || formData.type === MenuTypeEnum.MENU"
-            formData.type === MenuTypeEnum.CATALOG ||
-            formData.type === MenuTypeEnum.MENU
-          "
         >
           <template #label>
             <div class="flex-y-center">
@@ -402,10 +289,7 @@
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item
+        <el-form-item v-if="formData.type === MenuTypeEnum.MENU" label="缓存页面">
-          v-if="formData.type === MenuTypeEnum.MENU"
-          label="缓存页面"
-        >
           <el-radio-group v-model="formData.keepAlive">
             <el-radio :value="1">开启</el-radio>
             <el-radio :value="0">关闭</el-radio>
@@ -422,34 +306,23 @@
         </el-form-item>
 
         <!-- 权限标识 -->
-        <el-form-item
+        <el-form-item v-if="formData.type == MenuTypeEnum.BUTTON" label="权限标识" prop="perm">
-          v-if="formData.type == MenuTypeEnum.BUTTON"
-          label="权限标识"
-          prop="perm"
-        >
           <el-input v-model="formData.perm" placeholder="sys:user:add" />
         </el-form-item>
 
-        <el-form-item
+        <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" label="图标" prop="icon">
-          v-if="formData.type !== MenuTypeEnum.BUTTON"
-          label="图标"
-          prop="icon"
-        >
           <!-- 图标选择器 -->
           <icon-select v-model="formData.icon" />
         </el-form-item>
 
-        <el-form-item
+        <el-form-item v-if="formData.type == MenuTypeEnum.CATALOG" label="跳转路由">
-          v-if="formData.type == MenuTypeEnum.CATALOG"
-          label="跳转路由"
-        >
           <el-input v-model="formData.redirect" placeholder="跳转路由" />
         </el-form-item>
       </el-form>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
           <el-button @click="handleCloseDialog">取 消</el-button>
         </div>
       </template>
@@ -481,7 +354,6 @@ const queryParams = reactive<MenuQuery>({});
 const menuTableData = ref<MenuVO[]>([]);
 // 顶级菜单下拉选项
 const menuOptions = ref<OptionType[]>([]);
-
 // 初始菜单表单数据
 const initialMenuFormData = ref<MenuForm>({
   id: undefined,
@@ -493,10 +365,8 @@ const initialMenuFormData = ref<MenuForm>({
   keepAlive: 1,
   params: [],
 });
-
 // 菜单表单数据
 const formData = ref({ ...initialMenuFormData.value });
-
 // 表单验证规则
 const rules = reactive({
   parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
@@ -578,8 +448,10 @@ function handleMenuTypeChange() {
   }
 }
 
-/** 菜单保存提交 */
+/**
-function submitForm() {
+ * 提交表单
+ */
+function handleSubmit() {
   menuFormRef.value.validate((isValid: boolean) => {
     if (isValid) {
       const menuId = formData.value.id;

src/views/system/notice/components/MyNotice.vue

@@ -27,13 +27,8 @@
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-wrapper">
+    <el-card shadow="never">
-      <el-table
+      <el-table ref="dataTableRef" v-loading="loading" :data="pageData" highlight-current-row>
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-      >
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column label="通知标题" prop="title" min-width="200" />
         <el-table-column align="center" label="通知类型" width="150">
@@ -41,12 +36,7 @@
             <DictLabel v-model="scope.row.type" code="notice_type" />
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column align="center" label="发布人" prop="publisherName" width="100" />
-          align="center"
-          label="发布人"
-          prop="publisherName"
-          width="100"
-        />
         <el-table-column align="center" label="通知等级" width="100">
           <template #default="scope">
             <DictLabel v-model="scope.row.level" code="notice_level" />
@@ -60,12 +50,7 @@
           width="150"
         />
 
-        <el-table-column
+        <el-table-column align="center" label="发布人" prop="publisherName" width="150" />
-          align="center"
-          label="发布人"
-          prop="publisherName"
-          width="150"
-        />
         <el-table-column align="center" label="状态" width="100">
           <template #default="scope">
             <el-tag v-if="scope.row.isRead == 1" type="success">已读</el-tag>
@@ -74,12 +59,7 @@
         </el-table-column>
         <el-table-column align="center" fixed="right" label="操作" width="80">
           <template #default="scope">
-            <el-button
+            <el-button type="primary" size="small" link @click="viewNoticeDetail(scope.row.id)">
-              type="primary"
-              size="small"
-              link
-              @click="viewNoticeDetail(scope.row.id)"
-            >
               查看
             </el-button>
           </template>

src/views/system/notice/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="app-container">
     <div class="search-bar">
-      <el-form
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
-        ref="queryFormRef"
-        :model="queryParams"
-        :inline="true"
-        label-suffix=":"
-      >
         <el-form-item label="标题" prop="title">
           <el-input
             v-model="queryParams.title"
@@ -28,14 +23,8 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery()">
+          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
-            <template #icon><Search /></template>
+          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery()">
-            <template #icon><Refresh /></template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -45,18 +34,18 @@
         <el-button
           v-hasPerm="['sys:notice:add']"
           type="success"
+          icon="plus"
           @click="handleOpenDialog()"
         >
-          <template #icon><Plus /></template>
           新增通知
         </el-button>
         <el-button
           v-hasPerm="['sys:notice:delete']"
           type="danger"
-          :disabled="ids.length === 0"
+          :disabled="selectIds.length === 0"
+          icon="delete"
           @click="handleDelete()"
         >
-          <template #icon><Delete /></template>
           删除
         </el-button>
       </template>
@@ -76,43 +65,23 @@
             <DictLabel v-model="scope.row.type" :code="'notice_type'" />
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column align="center" label="发布人" prop="publisherName" width="150" />
-          align="center"
-          label="发布人"
-          prop="publisherName"
-          width="150"
-        />
         <el-table-column align="center" label="通知等级" width="100">
           <template #default="scope">
             <DictLabel v-model="scope.row.level" code="notice_level" />
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column align="center" label="通告目标类型" prop="targetType" min-width="100">
-          align="center"
-          label="通告目标类型"
-          prop="targetType"
-          min-width="100"
-        >
           <template #default="scope">
-            <el-tag v-if="scope.row.targetType == 1" type="warning">
+            <el-tag v-if="scope.row.targetType == 1" type="warning">全体</el-tag>
-              全体
+            <el-tag v-if="scope.row.targetType == 2" type="success">指定</el-tag>
-            </el-tag>
-            <el-tag v-if="scope.row.targetType == 2" type="success">
-              指定
-            </el-tag>
           </template>
         </el-table-column>
         <el-table-column align="center" label="发布状态" min-width="100">
           <template #default="scope">
-            <el-tag v-if="scope.row.publishStatus == 0" type="info">
+            <el-tag v-if="scope.row.publishStatus == 0" type="info">未发布</el-tag>
-              未发布
+            <el-tag v-if="scope.row.publishStatus == 1" type="success">已发布</el-tag>
-            </el-tag>
+            <el-tag v-if="scope.row.publishStatus == -1" type="warning">已撤回</el-tag>
-            <el-tag v-if="scope.row.publishStatus == 1" type="success">
-              已发布
-            </el-tag>
-            <el-tag v-if="scope.row.publishStatus == -1" type="warning">
-              已撤回
-            </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="操作时间" width="250">
@@ -126,10 +95,7 @@
               <span>发布时间：</span>
               <span>{{ scope.row.publishTime || "-" }}</span>
             </div>
-            <div
+            <div v-else-if="scope.row.publishStatus === -1" class="flex-x-start">
-              v-else-if="scope.row.publishStatus === -1"
-              class="flex-x-start"
-            >
               <span>撤回时间：</span>
               <span>{{ scope.row.revokeTime || "-" }}</span>
             </div>
@@ -141,7 +107,7 @@
               type="primary"
               size="small"
               link
-              @click="openNoticeDetailDialog(scope.row.id)"
+              @click="handleOpenNoticeDetailDialog(scope.row.id)"
             >
               查看
             </el-button>
@@ -151,7 +117,7 @@
               type="primary"
               size="small"
               link
-              @click="handlePublishNotice(scope.row.id)"
+              @click="handlePublish(scope.row.id)"
             >
               发布
             </el-button>
@@ -161,7 +127,7 @@
               type="primary"
               size="small"
               link
-              @click="revokeNotice(scope.row.id)"
+              @click="handleRevoke(scope.row.id)"
             >
               撤回
             </el-button>
@@ -206,20 +172,12 @@
       width="1250"
       @close="handleCloseDialog"
     >
-      <el-form
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
         <el-form-item label="通知标题" prop="title">
           <el-input v-model="formData.title" placeholder="通知标题" clearable />
         </el-form-item>
         <el-form-item label="通知内容" prop="content">
-          <WangEditor
+          <WangEditor v-model="formData.content" style="min-height: 480px; max-height: 500px" />
-            v-model="formData.content"
-            style="min-height: 480px; max-height: 500px"
-          />
         </el-form-item>
         <el-form-item label="通知类型" prop="type">
           <Dict v-model="formData.type" type="button" code="notice_type" />
@@ -233,17 +191,8 @@
             <el-radio :value="2">指定</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item
+        <el-form-item v-if="formData.targetType == 2" label="指定用户" prop="targetUserIds">
-          v-if="formData.targetType == 2"
+          <el-select v-model="formData.targetUserIds" multiple search placeholder="请选择指定用户">
-          label="指定用户"
-          prop="targetUserIds"
-        >
-          <el-select
-            v-model="formData.targetUserIds"
-            multiple
-            search
-            placeholder="请选择指定用户"
-          >
             <el-option
               v-for="item in userOptions"
               :key="item.value"
@@ -271,11 +220,7 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import NoticeAPI, {
+import NoticeAPI, { NoticePageVO, NoticeForm, NoticePageQuery } from "@/api/system/notice";
-  NoticePageVO,
-  NoticeForm,
-  NoticePageQuery,
-} from "@/api/system/notice";
 import UserAPI from "@/api/system/user";
 
 const queryFormRef = ref(ElForm);
@@ -283,7 +228,7 @@ const dataFormRef = ref(ElForm);
 const noticeDetailRef = ref();
 
 const loading = ref(false);
-const ids = ref<number[]>([]);
+const selectIds = ref<number[]>([]);
 const total = ref(0);
 
 const queryParams = reactive<NoticePageQuery>({
@@ -327,7 +272,7 @@ const rules = reactive({
   type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
 });
 
-/** 查询通知公告 */
+// 查询通知公告
 function handleQuery() {
   loading.value = true;
   NoticeAPI.getPage(queryParams)
@@ -340,19 +285,19 @@ function handleQuery() {
     });
 }
 
-/** 重置通知公告查询 */
+// 重置查询
 function handleResetQuery() {
   queryFormRef.value!.resetFields();
   queryParams.pageNum = 1;
   handleQuery();
 }
 
-/** 行复选框选中记录选中ID集合 */
+// 行复选框选中项变化
 function handleSelectionChange(selection: any) {
-  ids.value = selection.map((item: any) => item.id);
+  selectIds.value = selection.map((item: any) => item.id);
 }
 
-/** 打开通知公告弹窗 */
+// 打开通知公告弹窗
 function handleOpenDialog(id?: number) {
   UserAPI.getOptions().then((data) => {
     userOptions.value = data;
@@ -370,21 +315,23 @@ function handleOpenDialog(id?: number) {
   }
 }
 
-function handlePublishNotice(id: number) {
+// 发布通知公告
+function handlePublish(id: number) {
   NoticeAPI.publish(id).then(() => {
     ElMessage.success("发布成功");
     handleQuery();
   });
 }
 
-function revokeNotice(id: number) {
+// 撤回通知公告
+function handleRevoke(id: number) {
   NoticeAPI.revoke(id).then(() => {
     ElMessage.success("撤回成功");
     handleQuery();
   });
 }
 
-/** 提交通知公告表单 */
+// 通知公告表单提交
 function handleSubmit() {
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
@@ -411,7 +358,7 @@ function handleSubmit() {
   });
 }
 
-/** 关闭通知公告弹窗 */
+// 关闭通知公告弹窗
 function handleCloseDialog() {
   dialog.visible = false;
   dataFormRef.value.resetFields();
@@ -419,9 +366,9 @@ function handleCloseDialog() {
   formData.id = undefined;
 }
 
-/** 删除通知公告 */
+// 删除通知公告
 function handleDelete(id?: number) {
-  const deleteIds = [id || ids.value].join(",");
+  const deleteIds = [id || selectIds.value].join(",");
   if (!deleteIds) {
     ElMessage.warning("请勾选删除项");
     return;
@@ -447,8 +394,8 @@ function handleDelete(id?: number) {
   );
 }
 
-/** 打开通知公告详情弹窗 */
+// 打开通知公告详情弹窗
-function openNoticeDetailDialog(id: number) {
+function handleOpenNoticeDetailDialog(id: number) {
   noticeDetailRef.value.openNotice(id);
 }
 

src/views/system/role/index.vue

@@ -12,30 +12,16 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" @click="handleQuery">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-            <template #icon><Search /></template>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery">
-            <template #icon><Refresh /></template>
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </div>
 
     <el-card shadow="never">
       <div class="mb-10px">
-        <el-button type="success" @click="handleOpenDialog()">
+        <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
-          <template #icon><Plus /></template>
+        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
-          新增
-        </el-button>
-        <el-button
-          type="danger"
-          :disabled="ids.length === 0"
-          @click="handleDelete()"
-        >
-          <template #icon><Delete /></template>
           删除
         </el-button>
       </div>
@@ -110,12 +96,7 @@
       width="500px"
       @close="handleCloseDialog"
     >
-      <el-form
+      <el-form ref="roleFormRef" :model="formData" :rules="rules" label-width="100px">
-        ref="roleFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入角色名称" />
         </el-form-item>
@@ -165,12 +146,7 @@
       size="500"
     >
       <div class="flex-x-between">
-        <el-input
+        <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
-          v-model="permKeywords"
-          clearable
-          class="w-[150px]"
-          placeholder="菜单权限名称"
-        >
           <template #prefix>
             <Search />
           </template>
@@ -195,9 +171,7 @@
             <template #content>
               如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
             </template>
-            <el-icon
+            <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
-              class="ml-1 color-[--el-color-primary] inline-block cursor-pointer"
-            >
               <QuestionFilled />
             </el-icon>
           </el-tooltip>
@@ -220,9 +194,7 @@
       </el-tree>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleAssignPermSubmit">
+          <el-button type="primary" @click="handleAssignPermSubmit">确 定</el-button>
-            确 定
-          </el-button>
           <el-button @click="assignPermDialogVisible = false">取 消</el-button>
         </div>
       </template>
@@ -236,11 +208,7 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import RoleAPI, {
+import RoleAPI, { RolePageVO, RoleForm, RolePageQuery } from "@/api/system/role";
-  RolePageVO,
-  RoleForm,
-  RolePageQuery,
-} from "@/api/system/role";
 import MenuAPI from "@/api/system/menu";
 
 const queryFormRef = ref(ElForm);
@@ -414,9 +382,7 @@ async function handleOpenAssignPermDialog(row: RolePageVO) {
     RoleAPI.getRoleMenuIds(roleId)
       .then((data) => {
         const checkedMenuIds = data;
-        checkedMenuIds.forEach((menuId) =>
+        checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
-          permTreeRef.value!.setChecked(menuId, true, false)
-        );
       })
       .finally(() => {
         loading.value = false;