refactor: API接口调用TypeScript类型约束完善

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

@@ -1,111 +1,124 @@
 <template>
   <div class="menu-container">
-    <el-form >
+    <el-form>
       <el-form-item>
         <el-row>
           <el-col :span="16">
-            <el-button type="success" plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
+            <el-button
+              type="success"
+              plain
+              :icon="Switch"
+              @click="toggleExpandAll"
+              >展开/折叠</el-button
+            >
           </el-col>
           <el-col :span="8" style="text-align: right">
-            <el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
+            <el-button type="primary" :icon="Check" @click="handleSubmit"
+              >提交</el-button
+            >
           </el-col>
         </el-row>
       </el-form-item>
     </el-form>
 
     <el-tree
-        ref="menuRef"
-        v-if="refreshTree"
-        :default-expanded-keys="expandedKeys"
-        :default-expand-all="isExpandAll"
-        :data="menuOptions"
-        show-checkbox
-        node-key="id"
-        empty-text="加载菜单中..."
-        :check-strictly="checkStrictly"
-        highlight-current
-        @node-click="handleNodeClick"
+      ref="menuRef"
+      v-if="refreshTree"
+      :default-expanded-keys="expandedKeys"
+      :default-expand-all="isExpandAll"
+      :data="menuOptions"
+      show-checkbox
+      node-key="id"
+      empty-text="加载菜单中..."
+      :check-strictly="checkStrictly"
+      highlight-current
+      @node-click="handleNodeClick"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import {listTreeSelectMenus} from "@/api/system/menu";
-import {listRoleMenuIds, updateRoleMenu} from "@/api/system/role"
-import { nextTick, onMounted, reactive, ref, toRefs, watch} from "vue"
-import {ElTree, ElMessage, ElMessageBox} from "element-plus"
-import {Switch, Check} from '@element-plus/icons-vue'
+import { listSelectMenus } from "@/api/system/menu";
+import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
+import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
+import { ElTree, ElMessage, ElMessageBox } from "element-plus";
+import { Switch, Check } from "@element-plus/icons-vue";
+import { Option } from "@/types";
 
-const emit = defineEmits(['menuClick'])
+const emit = defineEmits(["menuClick"]);
 const props = defineProps({
   role: {
     type: Object,
-    default: {}
-  }
-})
+    default: {},
+  },
+});
 
-const menuRef = ref(ElTree) // 属性名必须和元素的ref属性值一致
+const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
 
-watch(() => props.role.id as any, (newVal, oldVal) => {
-  const roleId = props.role.id
-  if (roleId) {
-    state.checkStrictly = true
-    listRoleMenuIds(roleId).then(response => {
-      const checkedMenuIds = response.data
-      menuRef.value.setCheckedKeys(checkedMenuIds)
-      state.checkStrictly = false
-    })
+watch(
+  () => props.role.id as any,
+  (newVal, oldVal) => {
+    const roleId = props.role.id;
+    if (roleId) {
+      state.checkStrictly = true;
+      listRoleMenuIds(roleId).then(({ data }) => {
+        menuRef.value.setCheckedKeys(data);
+        state.checkStrictly = false;
+      });
+    }
   }
-})
+);
 
 const state = reactive({
-  expandedKeys: [],  // 展开的节点
-  menuOptions: [],
+  expandedKeys: [], // 展开的节点
+  menuOptions: [] as Option[],
   checkStrictly: false,
   isExpandAll: true,
-  refreshTree: true
-})
+  refreshTree: true,
+});
 
-const {expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree} = toRefs(state)
+const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
+  toRefs(state);
 
 /**
  * 加载菜单树
  */
 async function loadTreeSelectMenuOptions() {
-  await listTreeSelectMenus().then(response => {
-    state.menuOptions = response.data
-  })
+  await listSelectMenus().then(({ data }) => {
+    state.menuOptions = data;
+  });
 }
 
 function handleNodeClick(node: any) {
-  emit('menuClick', node)
+  emit("menuClick", node);
 }
 
 /**
  * 展开/收缩
  */
 function toggleExpandAll() {
-  state.refreshTree = false
-  state.isExpandAll = !state.isExpandAll
+  state.refreshTree = false;
+  state.isExpandAll = !state.isExpandAll;
   nextTick(() => {
-    state.refreshTree = true
-  })
+    state.refreshTree = true;
+  });
 }
 
 /**
  * 保存角色的菜单
  */
 function handleSubmit() {
-  const checkedMenuIds = menuRef.value.getCheckedNodes(false, true).map((node: any) => node.id)
+  const checkedMenuIds = menuRef.value
+    .getCheckedNodes(false, true)
+    .map((node: any) => node.id);
   updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
-    ElMessage.success('提交成功')
-  })
+    ElMessage.success("提交成功");
+  });
 }
 
 onMounted(() => {
-  loadTreeSelectMenuOptions()
-})
-
+  loadTreeSelectMenuOptions();
+});
 </script>
 
 <style lang="scss" scoped>