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

src/views/system/dept/index.vue

@@ -11,29 +11,16 @@
         </el-form-item>
 
         <el-form-item label="部门状态" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="全部"
-            clearable
-            class="!w-[100px]"
-          >
+          <el-select 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">
-            <template #icon>
-              <Search />
-            </template>
+          <el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
             搜索
           </el-button>
-          <el-button @click="handleResetQuery">
-            <template #icon>
-              <Refresh />
-            </template>
-            重置
-          </el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</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
-        ref="deptFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="80px"
-      >
+      <el-form 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: [
-    { required: true, message: "上级部门不能为空", trigger: "change" },
-  ],
+  parentId: [{ 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() {
-  dialog.visible = false;
-
+// 重置表单
+function resetForm() {
   deptFormRef.value.resetFields();
   deptFormRef.value.clearValidate();
 
@@ -336,6 +303,12 @@ function handleCloseDialog() {
   formData.sort = 1;
 }
 
+// 关闭弹窗
+function handleCloseDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
 onMounted(() => {
   handleQuery();
 });