refactor(Perm.vue): 权限TypeScirpt类型约束补充

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

@@ -1,59 +1,69 @@
 <template>
   <div claas="component-container">
     <!-- 搜索表单 -->
-    <el-form
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        ref="queryFormRef"
-        :model="queryParams"
-        :inline="true"
-    >
       <el-form-item>
-        <el-button type="success" :icon="Plus" :disabled="!menuId" @click="handleAdd">新增</el-button>
+        <el-button
-        <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</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"
+          v-model="queryParams.name"
-            placeholder="权限名称"
+          placeholder="权限名称"
-            clearable
+          clearable
-            @keyup.enter.native="handleQuery"
+          @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="pageList"
+      :data="permList"
-        v-loading="loading"
+      v-loading="loading"
-        @selection-change="handleSelectionChange"
+      @selection-change="handleSelectionChange"
-        border
+      border
     >
-      <el-table-column type="selection" width="40" align="center"/>
+      <el-table-column type="selection" width="40" align="center" />
-      <el-table-column label="权限名称" prop="name" width="150"/>
+      <el-table-column label="权限名称" prop="name" width="150" />
       <el-table-column label="URL权限" align="center">
-        <el-table-column prop="serviceName" label="所属服务"/>
+        <el-table-column prop="serviceName" label="所属服务" />
-        <el-table-column prop="requestMethod" label="请求方式"/>
+        <el-table-column prop="requestMethod" label="请求方式" />
-        <el-table-column prop="requestPath" label="请求路径"/>
+        <el-table-column prop="requestPath" label="请求路径" />
       </el-table-column>
-      <el-table-column label="按钮权限" prop="btnPerm" width="200"/>
+      <el-table-column label="按钮权限" prop="btnPerm" width="200" />
       <el-table-column label="操作" align="center" width="150">
         <template #default="scope">
           <el-button
-              type="primary"
+            type="primary"
-              :icon="Edit"
+            :icon="Edit"
-              circle
+            circle
-              plain
+            plain
-              @click="handleUpdate(scope.row)"
+            @click="handleUpdate(scope.row)"
           />
           <el-button
-              type="danger"
+            type="danger"
-              :icon="Delete"
+            :icon="Delete"
-              circle
+            circle
-              plain
+            plain
-              @click="handleDelete(scope.row)"
+            @click="handleDelete(scope.row)"
           />
         </template>
       </el-table-column>
@@ -61,65 +71,66 @@
 
     <!-- 分页工具条 -->
     <pagination
-        v-show="total>0"
+      v-show="total > 0"
-        :total="total"
+      :total="total"
-        :page="queryParams.pageNum"
+      :page="queryParams.pageNum"
-        :limit="queryParams.pageSize"
+      :limit="queryParams.pageSize"
-        @pagination="handleQuery"
+      @pagination="handleQuery"
     />
 
     <!-- 表单弹窗 -->
-    <el-dialog
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
-        :title="dialog.title"
-        v-model="dialog.visible"
-        width="700px">
       <el-form
-          ref="dataFormRef"
+        ref="dataFormRef"
-          :model="formData"
+        :model="formData"
-          :rules="rules"
+        :rules="rules"
-          label-width="120px"
+        label-width="120px"
       >
-
         <el-form-item label="权限名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入权限名称"/>
+          <el-input v-model="formData.name" placeholder="请输入权限名称" />
         </el-form-item>
 
         <el-form-item label="URL权限标识" prop="urlPerm">
-          <el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath" class="input-with-select">
+          <el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
             <template #prepend>
               <el-select
-                  v-model="urlPerm.serviceName"
+                v-model="urlPerm.serviceName"
-                  style="width: 130px;"
+                style="width: 130px"
-                  placeholder="所属服务"
+                placeholder="所属服务"
-                  clearable
+                clearable
               >
-                <el-option v-for="item in microServiceOptions" :value="item.value" :label="item.name"/>
+                <el-option
+                  v-for="item in microServiceOptions"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                />
               </el-select>
 
               <el-select
-                  v-model="urlPerm.requestMethod"
+                v-model="urlPerm.requestMethod"
-                  style="width: 120px;margin-left: 20px"
+                style="width: 120px; margin-left: 20px"
-                  slot="prepend"
+                placeholder="请求方式"
-                  placeholder="请求方式"
+                clearable
-                  clearable
               >
                 <el-option
-                    v-for="item in requestMethodOptions"
+                  v-for="item in requestMethodOptions"
-                    :value="item.value"
+                  :key="item.value"
-                    :label="item.name"
+                  :value="item.value"
+                  :label="item.label"
                 />
               </el-select>
             </template>
           </el-input>
           <el-link v-show="urlPerm.requestMethod">
-            {{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName }}{{ urlPerm.requestPath }}
+            {{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName
+            }}{{ urlPerm.requestPath }}
           </el-link>
         </el-form-item>
 
         <el-form-item label="按钮权限标识" prop="btnPerm">
-          <el-input v-model="formData.btnPerm" placeholder="sys:user:add"/>
+          <el-input v-model="formData.btnPerm" placeholder="sys:user:add" />
         </el-form-item>
-
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -132,27 +143,50 @@
 </template>
 
 <script setup lang="ts">
-import {listPermsWithPage, getPermDetail, addPerm, updatePerm, deletePerms} from "@/api/system/perm"
+import {
-import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue'
+  listPermPages,
-import {onMounted, watch, reactive, ref, unref, getCurrentInstance, toRefs} from 'vue'
+  getPermFormDetail,
-import {ElForm, ElMessage, ElMessageBox} from "element-plus"
+  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,
+} from "vue";
+import { ElForm, ElMessage, ElMessageBox } from "element-plus";
+import {
+  Dialog,
+  PermFormData,
+  PermItem,
+  PermQueryParam,
+  Option,
+} from "@/types";
 
-const {proxy}: any = getCurrentInstance();
+const { proxy }: any = getCurrentInstance();
 
-const queryFormRef = ref(ElForm)
+const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm)
+const dataFormRef = ref(ElForm);
 
 const props = defineProps({
   menuId: {
     type: String,
-    default: ''
+    default: "",
-  }
+  },
-})
+});
 
-watch(() => props.menuId as any, (newVal, oldVal) => {
+watch(
-  state.queryParams.menuId = newVal
+  () => props.menuId,
-  handleQuery()
+  (value) => {
-})
+    state.queryParams.menuId = value;
+    handleQuery();
+  }
+);
 
 const state = reactive({
   loading: true,
@@ -165,48 +199,33 @@ const state = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    menuId: undefined,
+  } as PermQueryParam,
-    name: undefined
+  permList: [] as PermItem[],
-  },
-  pageList: [],
   total: 0,
   dialog: {
-    title: '',
+    visible: false,
-    visible: false
+  } as Dialog,
-  },
+  formData: {} as PermFormData,
-  formData: {
-    id: undefined,
-    name: undefined,
-    urlPerm: '',
-    btnPerm: '',
-    menuId: ''
-  },
   rules: {
-    name: [
+    name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
-      {required: true, message: '请输入权限名称', trigger: 'blur'}
+    perm: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
-    ],
+    method: [{ required: true, message: "请选择请求方式", trigger: "blur" }],
-    perm: [
-      {required: true, message: '请输入权限标识', trigger: 'blur'}
-    ],
-    method: [
-      {required: true, message: '请选择请求方式', trigger: 'blur'}
-    ]
   },
-  microServiceOptions: [] as Array<any>,
+  microServiceOptions: [] as Option[],
-  requestMethodOptions: [] as Array<any>,
+  requestMethodOptions: [] as Option[],
   urlPerm: {
-    requestMethod: undefined,
+    requestMethod: "",
-    serviceName: undefined,
+    serviceName: "",
-    requestPath: undefined
+    requestPath: "",
   },
-})
+});
 
 const {
   loading,
   ids,
   single,
   multiple,
-  pageList,
+  permList,
   total,
   dialog,
   formData,
@@ -214,154 +233,163 @@ const {
   microServiceOptions,
   requestMethodOptions,
   urlPerm,
-  queryParams
+  queryParams,
-} = toRefs(state)
+} = toRefs(state);
 
 function handleQuery() {
   if (state.queryParams.menuId) {
-    state.loading = true
+    state.loading = true;
-    listPermsWithPage(state.queryParams).then(response => {
+    listPermPages(state.queryParams).then(({ data }) => {
-      const {data, total} = response as any
+      state.permList = data.list;
-      state.pageList = data
+      state.total = data.total;
-      state.total = total
+      state.loading = false;
-      state.loading = false
+    });
-    })
   } else {
-    state.loading = false
+    state.loading = false;
-    state.pageList = []
+    state.permList = [];
-    state.total = 0
+    state.total = 0;
-    state.queryParams.pageNum = 1
+    state.queryParams.pageNum = 1;
   }
 }
 
 function resetQuery() {
-  const queryForm = unref(queryFormRef)
+  queryFormRef.value.resetFields();
-  queryForm.resetFields()
+  handleQuery();
-  handleQuery()
 }
 
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id)
+  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1
+  state.single = selection.length !== 1;
-  state.multiple = !selection.length
+  state.multiple = !selection.length;
 }
 
 /**
  * 加载字典数据
  */
 function loadDictOptions() {
-  proxy.$listDictsByCode('micro_service').then((response: any) => {
+  proxy.$listDictsByCode("micro_service").then((response: any) => {
-    state.microServiceOptions = response.data
+    state.microServiceOptions = response.data;
-  })
+  });
 
-  proxy.$listDictsByCode('request_method').then((response: any) => {
+  proxy.$listDictsByCode("request_method").then((response: any) => {
-    state.requestMethodOptions = response.data
+    state.requestMethodOptions = response.data;
-  })
+  });
 }
 
 function handleAdd() {
-  loadDictOptions()
+  loadDictOptions();
   state.dialog = {
-    title: '添加权限',
+    title: "添加权限",
-    visible: true
+    visible: true,
-  }
+  };
 }
 
 function handleUpdate(row: any) {
-  loadDictOptions()
+  loadDictOptions();
   state.dialog = {
-    title: '修改权限',
+    title: "修改权限",
-    visible: true
+    visible: true,
-  }
+  };
-  const id = row.id || state.ids
+  const id = row.id || state.ids;
-  getPermDetail(id).then(response => {
+  getPermFormDetail(id).then((response) => {
-    const {data} = response
+    const { data } = response;
-    state.formData = data
+    state.formData = data;
     if (data && data.urlPerm) {
       // GET:/youlai-admin/api/v1/users
-      const urlPermArr = data.urlPerm.split(':')
+      const urlPermArr = data.urlPerm.split(":");
-      state.urlPerm.requestMethod = urlPermArr[0]
+      state.urlPerm.requestMethod = urlPermArr[0];
-      state.urlPerm.serviceName = urlPermArr[1].substring(1, urlPermArr[1].substring(1).indexOf('/') + 1)
+      state.urlPerm.serviceName = urlPermArr[1].substring(
-      state.urlPerm.requestPath = urlPermArr[1].substring(urlPermArr[1].substring(1).indexOf('/') + 1)
+        1,
+        urlPermArr[1].substring(1).indexOf("/") + 1
+      );
+      state.urlPerm.requestPath = urlPermArr[1].substring(
+        urlPermArr[1].substring(1).indexOf("/") + 1
+      );
     }
-  })
+  });
 }
 
 function submitForm() {
-  const dataForm = unref(dataFormRef)
+  dataFormRef.value.validate((isValid: any) => {
-  dataForm.validate((valid: any) => {
+    if (isValid) {
-    if (valid) {
       // 接口权限和按钮权限必填其一
-      console.log(state.urlPerm.requestPath, state.formData.btnPerm)
+      console.log(state.urlPerm.requestPath, state.formData.btnPerm);
       if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
-        ElMessage.warning('请至少填写一种权限')
+        ElMessage.warning("请至少填写一种权限");
-        return false
+        return false;
       }
       // 如果填写了URL权限，完整性校验
       if (!state.urlPerm.requestPath) {
         if (!state.urlPerm.requestMethod) {
-          ElMessage.warning('URL权限的请求方式不能为空')
+          ElMessage.warning("URL权限的请求方式不能为空");
-          return false
+          return false;
         }
         if (!state.urlPerm.serviceName) {
-          ElMessage.warning('URL权限的所属服务不能为空')
+          ElMessage.warning("URL权限的所属服务不能为空");
-          return false
+          return false;
         }
-        state.formData.urlPerm = state.urlPerm.requestMethod + ':/' + state.urlPerm.serviceName + state.urlPerm.requestPath;
+        state.formData.urlPerm =
+          state.urlPerm.requestMethod +
+          ":/" +
+          state.urlPerm.serviceName +
+          state.urlPerm.requestPath;
       }
 
-      state.formData.menuId = props.menuId
+      state.formData.menuId = props.menuId;
       if (state.formData.id) {
-        updatePerm(state.formData.id, state.formData).then(response => {
+        updatePerm(state.formData.id, state.formData).then((response) => {
-          ElMessage.success('修改成功')
+          ElMessage.success("修改成功");
-          state.dialog.visible = false
+          cancel();
-          resetForm()
+          handleQuery();
-          handleQuery()
+        });
-        })
       } else {
-        addPerm(state.formData).then(response => {
+        addPerm(state.formData).then((response) => {
-          ElMessage.success('新增成功')
+          ElMessage.success("新增成功");
-          state.dialog.visible = false
+          cancel();
-          resetForm()
+          handleQuery();
-          handleQuery()
+        });
-        })
       }
     }
-  })
+  });
 }
 
 /**
  * 重置表单
  */
 function resetForm() {
-  const dataForm = unref(dataFormRef)
+  dataFormRef.value.resetFields();
-  dataForm.resetFields()
 
+  state.urlPerm = {
+    requestMethod: "",
+    serviceName: "",
+    requestPath: "",
+  };
 }
 
 function cancel() {
-  state.dialog.visible = false
+  resetForm();
+  state.dialog.visible = false;
 }
 
 function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',')
+  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: '确定',
+    confirmButtonText: "确定",
-    cancelButtonText: '取消',
+    cancelButtonText: "取消",
-    type: 'warning'
+    type: "warning",
-  }).then(() => {
+  })
-    deletePerms(ids).then(() => {
+    .then(() => {
-      ElMessage.success('删除成功')
+      deletePerms(ids).then(() => {
-      handleQuery()
+        ElMessage.success("删除成功");
+        handleQuery();
+      });
     })
-  }).catch(() =>
+    .catch(() => ElMessage.info("已取消删除"));
-      ElMessage.info('已取消删除')
-  )
 }
 
 onMounted(() => {
-  handleQuery()
+  handleQuery();
-})
+});
 </script>
 
 <style scoped>