refactor: eslint代码检查优化

Former-commit-id: 4c11b5d0cdd10f28148cf3d9b593f85e082cdc51

src/views/system/menu/components/Menu.vue

@@ -3,43 +3,25 @@
     <!-- 搜索表单 -->
     <el-form ref="queryFormRef" :model="queryParams" :inline="true">
       <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
+        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
       </el-form-item>
 
       <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="菜单名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.name" placeholder="菜单名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
+        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
         <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <!-- 数据表格 -->
-    <el-table
-      v-loading="loading"
-      :data="menuList"
-      highlight-current-row
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      @row-click="handleRowClick"
-      row-key="id"
-      border
-    >
+    <el-table v-loading="loading" :data="menuList" highlight-current-row
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="handleRowClick" row-key="id"
+      border>
       <el-table-column label="菜单名称">
         <template #default="scope">
-          <svg-icon
-            color="#333"
-            :icon-class="scope.row.icon ? scope.row.icon : 'build'"
-          />
+          <svg-icon color="#333" :icon-class="scope.row.icon ? scope.row.icon : 'build'" />
           {{ scope.row.name }}
         </template>
       </el-table-column>
@@ -53,45 +35,18 @@
 
       <el-table-column label="操作" align="center" width="200">
         <template #default="scope">
-          <el-button
-            type="success"
-            :icon="Plus"
-            circle
-            plain
-            @click.stop="handleAdd(scope.row)"
-          />
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
+          <el-button type="success" :icon="Plus" circle plain @click.stop="handleAdd(scope.row)" />
+          <el-button type="primary" :icon="Edit" circle plain @click.stop="handleUpdate(scope.row)" />
+          <el-button type="danger" :icon="Delete" circle plain @click.stop="handleDelete(scope.row)" />
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 弹窗表单 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="750px">
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="父级菜单" prop="parentId">
-          <tree-select
-            v-model="formData.parentId"
-            :options="menuOptions"
-            placeholder="选择上级菜单"
-          />
+          <tree-select v-model="formData.parentId" :options="menuOptions" placeholder="选择上级菜单" />
         </el-form-item>
 
         <el-form-item label="菜单名称" prop="name">
@@ -110,51 +65,24 @@
         </el-form-item>
 
         <el-form-item v-if="!isExternalPath" label="页面路径" prop="component">
-          <el-input
-            v-model="formData.component"
-            placeholder="system/user/index"
-            style="width: 95%"
-          >
-            <template v-if="formData.parentId != 0" #prepend
-              >src/views/</template
-            >
+          <el-input v-model="formData.component" placeholder="system/user/index" style="width: 95%">
+            <template v-if="formData.parentId != 0" #prepend>src/views/</template>
             <template v-if="formData.parentId != 0" #append>.vue</template>
           </el-input>
 
-          <el-tooltip
-            effect="dark"
-            content="请输入组件路径，如果是父组件填写 Layout 即可"
-            placement="right"
-          >
-            <i
-              class="el-icon-info"
-              style="margin-left: 10px; color: darkseagreen"
-            ></i>
+          <el-tooltip effect="dark" content="请输入组件路径，如果是父组件填写 Layout 即可" placement="right">
+            <i class="el-icon-info" style="margin-left: 10px; color: darkseagreen"></i>
           </el-tooltip>
         </el-form-item>
 
         <el-form-item label="图标" prop="icon">
-          <el-popover
-            placement="bottom-start"
-            :width="570"
-            trigger="click"
-            v-model:visible="iconSelectVisible"
-          >
+          <el-popover placement="bottom-start" :width="570" trigger="click" visible="iconSelectVisible">
             <icon-select ref="iconSelectRef" @selected="selected" />
             <template #reference>
-              <el-input
-                v-model="formData.icon"
-                placeholder="点击选择图标"
-                readonly
-                @click="iconSelectVisible = true"
-              >
+              <el-input v-model="formData.icon" placeholder="点击选择图标" readonly @click="iconSelectVisible = true">
                 <template #prefix>
-                  <svg-icon
-                    :icon-class="formData.icon ? formData.icon : 'color'"
-                    class="el-input__icon"
-                    style="margin: auto"
-                    color="#999"
-                  />
+                  <svg-icon :icon-class="formData.icon ? formData.icon : 'color'" class="el-input__icon"
+                    style="margin: auto" color="#999" />
                 </template>
               </el-input>
             </template>
@@ -169,20 +97,11 @@
         </el-form-item>
 
         <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            style="width: 100px"
-            controls-position="right"
-            :min="0"
-          />
+          <el-input-number v-model="formData.sort" style="width: 100px" controls-position="right" :min="0" />
         </el-form-item>
 
         <el-form-item label="跳转路径">
-          <el-input
-            v-model="formData.redirect"
-            placeholder="请输入跳转路径"
-            maxlength="50"
-          />
+          <el-input v-model="formData.redirect" placeholder="请输入跳转路径" maxlength="50" />
         </el-form-item>
       </el-form>
 
@@ -197,7 +116,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, unref, onMounted, toRefs } from "vue";
+import { reactive, ref, onMounted, toRefs, defineEmits } from "vue";
 
 import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
 import { ElForm, ElMessage, ElMessageBox } from "element-plus";
@@ -240,8 +159,7 @@ const state = reactive({
   multiple: true,
   queryParams: {} as MenuQueryParam,
   menuList: [] as MenuItem[],
-  total: 0,
-  dialog: {visible:false} as Dialog,
+  dialog: { visible: false } as Dialog,
   formData: {
     parentId: 0,
     visible: 1,
@@ -256,16 +174,13 @@ const state = reactive({
   menuOptions: [] as Option[],
   currentRow: undefined,
   isExternalPath: false,
-  iconSelectVisible: false,
+  iconSelectVisible: false
 });
 
 const {
   loading,
-  single,
-  multiple,
   queryParams,
   menuList,
-  total,
   dialog,
   formData,
   rules,
@@ -307,15 +222,7 @@ function resetQuery() {
   handleQuery();
 }
 
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
 function handleRowClick(row: any) {
-
-  console.log('handleRowClick',row)
   state.currentRow = JSON.parse(JSON.stringify(row));
   emit("menuClick", row);
 }
@@ -367,15 +274,15 @@ function submitForm() {
   dataFormRef.value.validate((isValid: boolean) => {
     if (isValid) {
       if (state.formData.id) {
-        updateMenu(state.formData.id, state.formData).then((response) => {
+        updateMenu(state.formData.id, state.formData).then(() => {
           ElMessage.success("修改成功");
-          state.dialog.visible = false;
+          cancel();
           handleQuery();
         });
       } else {
-        addMenu(state.formData).then((response) => {
+        addMenu(state.formData).then(() => {
           ElMessage.success("新增成功");
-          state.dialog.visible = false;
+          cancel();
           handleQuery();
         });
       }
@@ -399,29 +306,18 @@ function handleDelete(row: any) {
     .catch(() => ElMessage.info("已取消删除"));
 }
 
-/**
- * 重置表单
- */
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
 /**
  * 取消关闭弹窗
  */
 function cancel() {
+  state.formData.id = undefined;
+  dataFormRef.value.resetFields();
   state.dialog.visible = false;
-  resetForm();
 }
 
 /**
- * 显示图标选择下拉
+ * 选择图标后事件
  */
-function showIconSelect() {
-  state.iconSelectVisible = true;
-}
-
 function selected(name: string) {
   state.formData.icon = name;
   state.iconSelectVisible = false;

src/views/system/menu/components/Perm.vue

@@ -3,44 +3,20 @@
     <!-- 搜索表单 -->
     <el-form ref="queryFormRef" :model="queryParams" :inline="true">
       <el-form-item>
-        <el-button
-          type="success"
-          :icon="Plus"
-          :disabled="!menuId"
-          @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          >删除</el-button
-        >
+        <el-button type="success" :icon="Plus" :disabled="!menuId" @click="handleAdd">新增</el-button>
+        <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
       </el-form-item>
       <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="权限名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.name" placeholder="权限名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
+        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
         <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <!-- 数据表格 -->
-    <el-table
-      :data="permList"
-      v-loading="loading"
-      @selection-change="handleSelectionChange"
-      border
-    >
+    <el-table :data="permList" v-loading="loading" @selection-change="handleSelectionChange" border>
       <el-table-column type="selection" width="40" align="center" />
       <el-table-column label="权限名称" prop="name" width="150" />
       <el-table-column label="URL权限" align="center">
@@ -51,41 +27,19 @@
       <el-table-column label="按钮权限" prop="btnPerm" width="200" />
       <el-table-column label="操作" align="center" width="150">
         <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click="handleDelete(scope.row)"
-          />
+          <el-button type="primary" :icon="Edit" circle plain @click="handleUpdate(scope.row)" />
+          <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)" />
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page="queryParams.pageNum"
-      :limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
+    <pagination v-show="total > 0" :total="total" :v-model:page="queryParams.pageNum" :v-model:limit="queryParams.pageSize"
+      @pagination="handleQuery" />
 
     <!-- 表单弹窗 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="120px"
-      >
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
         <el-form-item label="权限名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入权限名称" />
         </el-form-item>
@@ -93,37 +47,21 @@
         <el-form-item label="URL权限标识" prop="urlPerm">
           <el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
             <template #prepend>
-              <el-select
-                v-model="urlPerm.serviceName"
-                style="width: 130px"
-                placeholder="所属服务"
-                clearable
-              >
-                <el-option
-                  v-for="item in microServiceOptions"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                />
+              <el-select v-model="urlPerm.serviceName" style="width: 130px" placeholder="所属服务" clearable>
+                <el-option v-for="item in microServiceOptions" :key="item.value" :value="item.value"
+                  :label="item.label" />
               </el-select>
 
-              <el-select
-                v-model="urlPerm.requestMethod"
-                style="width: 120px; margin-left: 20px"
-                placeholder="请求方式"
-                clearable
-              >
-                <el-option
-                  v-for="item in requestMethodOptions"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                />
+              <el-select v-model="urlPerm.requestMethod" style="width: 120px; margin-left: 20px" placeholder="请求方式"
+                clearable>
+                <el-option v-for="item in requestMethodOptions" :key="item.value" :value="item.value"
+                  :label="item.label" />
               </el-select>
             </template>
           </el-input>
           <el-link v-show="urlPerm.requestMethod">
-            {{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName
+            {{ urlPerm.requestMethod }}:/{{
+              urlPerm.serviceName
             }}{{ urlPerm.requestPath }}
           </el-link>
         </el-form-item>
@@ -143,22 +81,25 @@
 </template>
 
 <script setup lang="ts">
-import {
-  listPermPages,
-  getPermFormDetail,
-  addPerm,
-  updatePerm,
-  deletePerms,
-} from "@/api/system/perm";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
+
 import {
   onMounted,
   watch,
   reactive,
   ref,
   getCurrentInstance,
-  toRefs,
+  toRefs
 } from "vue";
+
+import {
+  listPermPages,
+  getPermFormDetail,
+  addPerm,
+  updatePerm,
+  deletePerms
+} from "@/api/system/perm";
+import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
+
 import { ElForm, ElMessage, ElMessageBox } from "element-plus";
 import {
   Dialog,
@@ -176,7 +117,9 @@ const dataFormRef = ref(ElForm);
 const props = defineProps({
   menuId: {
     type: String,
-    default: "",
+    default: () => {
+      return ''
+    }
   },
 });
 
@@ -216,14 +159,12 @@ const state = reactive({
   urlPerm: {
     requestMethod: "",
     serviceName: "",
-    requestPath: "",
+    requestPath: ""
   },
 });
 
 const {
   loading,
-  ids,
-  single,
   multiple,
   permList,
   total,
@@ -280,7 +221,7 @@ function handleAdd() {
   loadDictOptions();
   state.dialog = {
     title: "添加权限",
-    visible: true,
+    visible: true
   };
 }
 
@@ -337,13 +278,13 @@ function submitForm() {
 
       state.formData.menuId = props.menuId;
       if (state.formData.id) {
-        updatePerm(state.formData.id, state.formData).then((response) => {
+        updatePerm(state.formData.id, state.formData).then(() => {
           ElMessage.success("修改成功");
           cancel();
           handleQuery();
         });
       } else {
-        addPerm(state.formData).then((response) => {
+        addPerm(state.formData).then(() => {
           ElMessage.success("新增成功");
           cancel();
           handleQuery();