refactor: 接口路径变更和删除依赖包

Former-commit-id: 528a17fec4091a54ae63c7cc612c7671d0ed56ae
2022-07-05 08:03:39 +08:00
parent 410c5ed56d
commit c14a00a14f
26 changed files with 510 additions and 359 deletions
--- a/src/views/system/menu/components/Menu.vue
+++ b/src/views/system/menu/components/Menu.vue
@@ -225,7 +225,7 @@ import { Dialog, Option } from '@/types/common';
 import {
  MenuFormData,
  MenuItem,
-  MenuQueryParam
+  MenuQueryParam,
 } from '@/types/api/system/menu';
 // API 依赖
 import {
@@ -234,7 +234,7 @@ import {
  listMenuOptions,
  addMenu,
  deleteMenus,
-  updateMenu
+  updateMenu,
 } from '@/api/system/menu';

 import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -262,7 +262,7 @@ const state = reactive({
    visible: 1,
    sort: 1,
    component: 'Layout',
-    type: 'MENU'
+    type: 'MENU',
  } as MenuFormData,
  rules: {
    parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
@@ -270,8 +270,8 @@ const state = reactive({
    type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
    path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
    component: [
-      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
-    ]
+      { required: true, message: '请输入组件完整路径', trigger: 'blur' },
+    ],
  },
  menuOptions: [] as Option[],
  currentRow: undefined,
@@ -279,8 +279,8 @@ const state = reactive({
  iconSelectVisible: false,
  cacheData: {
    menuType: '',
-    menuPath: ''
-  }
+    menuPath: '',
+  },
 });

 const {
@@ -292,7 +292,7 @@ const {
  rules,
  menuOptions,
  iconSelectVisible,
-  cacheData
+  cacheData,
 } = toRefs(state);

 /**
@@ -338,7 +338,7 @@ async function handleAdd(row: any) {
  await loadMenuData();
  state.dialog = {
    title: '添加菜单',
-    visible: true
+    visible: true,
  };
  if (row.id) {
    // 行点击新增
@@ -368,7 +368,7 @@ async function handleUpdate(row: any) {
  await loadMenuData();
  state.dialog = {
    title: '修改菜单',
-    visible: true
+    visible: true,
  };
  const id = row.id || state.ids;
  getMenuDetail(id).then(({ data }) => {
@@ -417,7 +417,7 @@ function handleDelete(row: any) {
  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
  })
    .then(() => {
      deleteMenus(ids).then(() => {
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
 export default {
-  name: 'role'
+  name: 'role',
 };
 </script>

 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
+import { onMounted, reactive, ref, toRefs, nextTick } from 'vue';
 import {
  listRolePages,
  updateRole,
@@ -13,7 +13,7 @@ import {
  addRole,
  deleteRoles,
  getRoleResourceIds,
-  updateRoleResource
+  updateRoleResource,
 } from '@/api/system/role';
 import { getResource } from '@/api/system/menu';

@@ -22,7 +22,7 @@ import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import {
  RoleFormData,
  RoleItem,
-  RoleQueryParam
+  RoleQueryParam,
 } from '@/types/api/system/role';
 import SvgIcon from '@/components/SvgIcon/index.vue';

@@ -41,28 +41,26 @@ const state = reactive({
  multiple: true,
  queryParams: {
    pageNum: 1,
-    pageSize: 10
+    pageSize: 10,
  } as RoleQueryParam,
  roleList: [] as RoleItem[],
  total: 0,
  dialog: {
    title: '',
-    visible: false
+    visible: false,
  },
  formData: {} as RoleFormData,
  rules: {
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
-    code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
+    code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
  },
  resourceDialogVisible: false,
  menuOptions: [] as any[],
  permOptions: [] as any[],
-  checkStrictly: false,
-  permGroupList: [],
  checkedRole: {
    id: '',
-    name: ''
-  } // 选中的角色
+    name: '',
+  }, // 选中的角色
 });

 const {
@@ -78,7 +76,6 @@ const {
  menuOptions,
  permOptions,
  checkedRole,
-  checkStrictly
 } = toRefs(state);

 function handleQuery() {
@@ -109,14 +106,14 @@ function handleRowClick(row: any) {
 function handleAdd() {
  state.dialog = {
    title: '添加角色',
-    visible: true
+    visible: true,
  };
 }

 function handleUpdate(row: any) {
  state.dialog = {
    title: '修改角色',
-    visible: true
+    visible: true,
  };
  const roleId = row.id || state.ids;
  getRoleFormDetail(roleId).then(({ data }) => {
@@ -125,19 +122,22 @@ function handleUpdate(row: any) {
 }

 function submitFormData() {
+  loading.value = true;
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      if (state.formData.id) {
        updateRole(state.formData.id as any, state.formData).then(() => {
-          ElMessage.success('修改成功');
+          ElMessage.success('修改角色成功');
          cancel();
          handleQuery();
+          loading.value = false;
        });
      } else {
        addRole(state.formData).then(() => {
          cancel();
-          ElMessage.success('新增成功');
+          ElMessage.success('新增角色成功');
          handleQuery();
+          loading.value = false;
        });
      }
    }
@@ -145,7 +145,7 @@ function submitFormData() {
 }

 /**
- * 弹窗关闭
+ * 取消
 */
 function cancel() {
  state.dialog.visible = false;
@@ -160,7 +160,7 @@ function handleDelete(row: any) {
  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
  })
    .then(() => {
      deleteRoles(ids).then(() => {
@@ -176,41 +176,40 @@ function handleDelete(row: any) {
 */
 function handleResourceAssign(row: RoleItem) {
  resourceDialogVisible.value = true;
-  permOptions.value.map(item => (item.checked = false));
+  loading.value = true;
+  permOptions.value.map((item) => (item.checked = false));

  const roleId: any = row.id;
  checkedRole.value = {
    id: roleId,
-    name: row.name
+    name: row.name,
  };
+
  //资源下拉数据
-  getResource().then(response => {
-    checkStrictly.value = true; // 父子节点不互相关联
+  getResource().then((response) => {
    state.menuOptions = response.data.menus;
    state.permOptions = response.data.perms;

    // 获取角色拥有的资源数据进行勾选
-    getRoleResourceIds(roleId).then(res => {
+    getRoleResourceIds(roleId).then((res) => {
      const checkedMenuIds = res.data.menuIds;
      const checkedPermIds = res.data.permIds;
+      resourceRef.value.setCheckedKeys(checkedMenuIds);

-      nextTick(() => {
-        resourceRef.value.setCheckedKeys(checkedMenuIds);
-        permOptions.value.forEach(perm => {
-          if (checkedPermIds.includes(perm.value)) {
-            perm.checked = true;
-          } else {
-            perm.checked = false;
-          }
-        });
+      permOptions.value.forEach((perm) => {
+        if (checkedPermIds.includes(perm.value)) {
+          perm.checked = true;
+        } else {
+          perm.checked = false;
+        }
      });
-      checkStrictly.value = false; // 父子节点互相关联
+      loading.value = false;
    });
  });
 }

 /**
- * 提交资源权限
+ * 分配资源权限提交
 */
 function handleRoleResourceSubmit() {
  const checkedMenuIds: any[] = resourceRef.value
@@ -218,16 +217,16 @@ function handleRoleResourceSubmit() {
    .map((node: any) => node.value);

  const checkedPermIds = state.permOptions
-    .filter(item => item.checked)
-    .map(item => item.value);
+    .filter((item) => item.checked)
+    .map((item) => item.value);

  const roleResourceData = {
    menuIds: checkedMenuIds,
-    permIds: checkedPermIds
+    permIds: checkedPermIds,
  };

-  updateRoleResource(checkedRole.value.id, roleResourceData).then(res => {
-    ElMessage.success('修改成功');
+  updateRoleResource(checkedRole.value.id, roleResourceData).then((res) => {
+    ElMessage.success('分配权限成功');
    state.resourceDialogVisible = false;
    handleQuery();
  });
@@ -374,12 +373,13 @@ onMounted(() => {
      </template>
    </el-dialog>

+    <!--分配权限弹窗-->
    <el-dialog
-      :title="'【' + checkedRole.name + '】资源权限'"
+      :title="'【' + checkedRole.name + '】分配权限'"
      v-model="resourceDialogVisible"
      width="1000px"
    >
-      <el-scrollbar max-height="600px">
+      <el-scrollbar max-height="600px" v-loading="loading">
        <el-tree
          ref="resourceRef"
          node-key="value"
@@ -392,7 +392,7 @@ onMounted(() => {
              <div class="resource-tree-node__content">
                <el-checkbox
                  v-for="perm in permOptions.filter(
-                    perm => perm.parentId == data.permPid
+                    (perm) => perm.parentId == data.permPid
                  )"
                  :key="perm.value"
                  :label="perm.value"
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: 'user'
+  name: 'user',
 };
 </script>

@@ -12,7 +12,7 @@ import {
  watchEffect,
  onMounted,
  getCurrentInstance,
-  toRefs
+  toRefs,
 } from 'vue';

 // 导入API
@@ -25,7 +25,7 @@ import {
  updateUserPart,
  downloadTemplate,
  exportUser,
-  importUser
+  importUser,
 } from '@/api/system/user';
 import { listSelectDepartments } from '@/api/system/dept';
 import { listRoleOptions } from '@/api/system/role';
@@ -36,7 +36,7 @@ import {
  ElMessageBox,
  ElTree,
  ElForm,
-  UploadFile
+  UploadFile,
 } from 'element-plus';
 import {
  Search,
@@ -47,13 +47,13 @@ import {
  Lock,
  Download,
  Top,
-  UploadFilled
+  UploadFilled,
 } from '@element-plus/icons-vue';
 import {
  UserItem,
  UserQueryParam,
  UserFormData,
-  UserImportFormData
+  UserImportFormData,
 } from '@/types/api/system/user';

 import { Option, Dialog } from '@/types/common';
@@ -81,7 +81,7 @@ const state = reactive({
  userList: [] as UserItem[],
  // 弹窗属性
  dialog: {
-    visible: false
+    visible: false,
  } as Dialog,
  deptName: undefined,
  // 部门树选项
@@ -93,18 +93,18 @@ const state = reactive({
  roleOptions: [] as Option[],
  // 表单参数
  formData: {
-    status: 1
+    status: 1,
  } as UserFormData,
  // 查询参数
  queryParams: {
    pageNum: 1,
-    pageSize: 10
+    pageSize: 10,
  } as UserQueryParam,
  // 表单校验
  rules: {
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    nickname: [
-      { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+      { required: true, message: '用户昵称不能为空', trigger: 'blur' },
    ],
    deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
    roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
@@ -112,25 +112,25 @@ const state = reactive({
      {
        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
        message: '请输入正确的邮箱地址',
-        trigger: 'blur'
-      }
+        trigger: 'blur',
+      },
    ],
    mobile: [
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
-        trigger: 'blur'
-      }
-    ]
+        trigger: 'blur',
+      },
+    ],
  },

  importDialog: {
    title: '用户导出',
-    visible: false
+    visible: false,
  } as Dialog,
  importFormData: {} as UserImportFormData,
  excelFile: undefined as any,
-  excelFilelist: [] as File[]
+  excelFilelist: [] as File[],
 });

 const {
@@ -147,7 +147,7 @@ const {
  roleOptions,
  importDialog,
  importFormData,
-  excelFilelist
+  excelFilelist,
 } = toRefs(state);

 /**
@@ -158,7 +158,7 @@ watchEffect(
    deptTreeRef.value.filter(state.deptName);
  },
  {
-    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+    flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
 );

@@ -184,7 +184,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
 * 加载角色数据
 */
 async function loadRoleOptions() {
-  listRoleOptions().then(response => {
+  listRoleOptions().then((response) => {
    state.roleOptions = response.data;
  });
 }
@@ -200,7 +200,7 @@ function handleStatusChange(row: { [key: string]: any }) {
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
-      type: 'warning'
+      type: 'warning',
    }
  )
    .then(() => {
@@ -252,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
    '重置密码',
    {
      confirmButtonText: '确定',
-      cancelButtonText: '取消'
+      cancelButtonText: '取消',
    }
  )
    .then(({ value }) => {
@@ -261,7 +261,7 @@ function resetPassword(row: { [key: string]: any }) {
        return false;
      }
      updateUserPart(row.id, {
-        password: value
+        password: value,
      }).then(() => {
        ElMessage.success('修改成功，新密码是：' + value);
      });
@@ -277,7 +277,7 @@ async function handleAdd() {
  await loadRoleOptions();
  state.dialog = {
    title: '添加用户',
-    visible: true
+    visible: true,
  };
 }

@@ -290,7 +290,7 @@ async function handleUpdate(row: { [key: string]: any }) {
  await loadRoleOptions();
  state.dialog = {
    title: '修改用户',
-    visible: true
+    visible: true,
  };
  getUserFormData(userId).then(({ data }) => {
    state.formData = data;
@@ -332,7 +332,7 @@ function handleDelete(row: { [key: string]: any }) {
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
-      type: 'warning'
+      type: 'warning',
    }
  )
    .then(function () {
@@ -357,7 +357,7 @@ function cancel() {
 * 加载部门
 */
 async function loadDeptOptions() {
-  listSelectDepartments().then(response => {
+  listSelectDepartments().then((response) => {
    state.deptOptions = response.data;
  });
 }
@@ -377,7 +377,7 @@ function loadGenderOptions() {
 function handleDownloadTemplate() {
  downloadTemplate().then((response: any) => {
    const blob = new Blob([response.data], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    });
    const a = document.createElement('a');
    const href = window.URL.createObjectURL(blob); // 下载链接
@@ -429,7 +429,7 @@ function submitImportForm() {

      const deptId = state.importFormData.deptId;
      const roleIds = state.importFormData.roleIds.join(',');
-      importUser(deptId, roleIds, state.excelFile).then(response => {
+      importUser(deptId, roleIds, state.excelFile).then((response) => {
        ElMessage.success(response.data);
        closeImportDialog();
        handleQuery();
@@ -454,7 +454,7 @@ function closeImportDialog() {
 function handleExport() {
  exportUser(queryParams.value).then((response: any) => {
    const blob = new Blob([response.data], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    });
    const a = document.createElement('a');
    const href = window.URL.createObjectURL(blob); // 下载的链接
@@ -638,7 +638,7 @@ onMounted(() => {
            <el-table-column
              label="创建时间"
              align="center"
-              prop="gmtCreate"
+              prop="createTime"
              width="180"
            ></el-table-column>
            <el-table-column label="操作" align="center" width="150">