权限资源

yinbangzhong

2024-07-29 1e4a145667f460778560defccab1137b84139985

权限资源

 src/api/authority.ts

@@ -25,6 +25,26 @@
  parentName: string;
}

export interface Resource {
  "menuId": string;
  "createTime": string;
  "updateTime": string;
  "menuName": string;
  "component": string;
  "description": string;
  "icon": string;
  "orderNum": string;
  "target": string;
  "parentId": string;
  "parentName":string;
  "children": any;
  "syesourcetype": string;
  "status": string;
  "path": string;
  "perms": string;
  "menuType": string;
}

export interface Result<T> {
  code: number;
  msg: string;
@@ -77,4 +97,27 @@

export function OrganizationById(id) {
  return axios.get<Result<Organization>>("/base/system/dept/" + id);
}


export function ResourceList(key: string) {
  return axios.get<Result<Resource[]>>("/base/system/menu/treeselect");
}


export function ResourceAdd(resource) {
  return axios.post("/base/system/menu", { resource });
}

export function ResourceDelete(id) {
  return axios.delete("/base/system/menu/" + id);
}

export function ResourceUpdate(resource) {
  return axios.put("/base/system/menu", { resource });
}


export function ResourceById(id) {
  return axios.get<Result<Resource>>("/base/system/menu/" + id);
}

 src/api/user.ts

@@ -11,7 +11,8 @@
  token: string;
}
export function login(data: LoginData) {
  return axios.post<LoginRes>('/v1/user/login', data);
  // return axios.post<LoginRes>('/v1/user/login', data);
  return axios.post<LoginRes>('/base/login', data);
}

export function logout() {

 src/locale/en-US.ts

@@ -5,6 +5,7 @@

import localeUser from '@/views/authority/users/locale/en-US';
import localeOrganization from '@/views/authority/organization/locale/en-US';
import localeResource from '@/views/authority/resource/locale/en-US';

import localeMonitor from '@/views/dashboard/monitor/locale/en-US';

@@ -57,6 +58,7 @@

  ...localeUser,
  ...localeOrganization,
  ...localeResource,

  ...localeMonitor,
  ...localeSearchTable,

 src/locale/zh-CN.ts

@@ -5,6 +5,7 @@

import localeUser from '@/views/authority/users/locale/zh-CN';
import localeOrganization from '@/views/authority/organization/locale/zh-CN';
import localeResource from '@/views/authority/resource/locale/zh-CN';

import localeMonitor from '@/views/dashboard/monitor/locale/zh-CN';

@@ -60,6 +61,7 @@

  ...localeUser,
  ...localeOrganization,
  ...localeResource,

  ...localeMonitor,
  ...localeSearchTable,

 src/router/routes/modules/authority.ts

@@ -32,6 +32,16 @@
        roles: ['*'],
      },
    },
    {
      path: 'resource',
      name: 'resource',
      component: () => import('@/views/authority/resource/index.vue'),
      meta: {
        locale: 'menu.resource.title',
        requiresAuth: true,
        roles: ['*'],
      },
    },
  ],
};


 src/views/authority/organization/index.vue

@@ -194,6 +194,12 @@
  }
};

const handleCancel = (type) => {
  if (type == 1) {
    visible.value = false;
  }
};

const OrganizationData = async (key) => {
  await OrganizationList(key).then((res) => {
    treeData.value = [...res.rows];

 src/views/authority/resource/index.vue

New file
@@ -0,0 +1,248 @@
<template>
  <div class="container">
    <authheader :items="menuTips"></authheader>
    <a-row :gutter="20">
      <a-col :span="8">
        <a-card :title="$t('menu.resource.title')" :bordered="false"
                :style="{ width: '100%',height: '900px', 'overflow-y': 'auto' }">
          <a-tree
            class="tree-demo"
            draggable
            blockNode
            :data="treeData"
            :show-line="showLine"
            :fieldNames="{
              key:'menuId',
              title:'menuName',
              children:'children',
            }"
            @drop="onDrop"
            @select="showDetail"
          >
            <template #extra="nodeData">
              <IconPlus
                style="position: absolute; right: 60px; font-size: 12px; top: 10px; color: #3370ff;"
                @click="() => onIconClick(nodeData)"
              />
              <IconDelete style="position: absolute; right: 40px; font-size: 12px; top: 10px; color: #3370ff;"
                          @click="() => onIconClickDelete(nodeData)" />
            </template>
          </a-tree>

        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card :title="$t('menu.resource.detail')" :bordered="false" :style="{ width: '100%' }">
          <a-form :model="resourceform" layout="horizontal">
            <a-form-item field="parentName" label="上级资源" disabled>
              <a-input v-model="resourceform.parentName" />
            </a-form-item>
            <a-form-item field="status" label="资源状态">
              <a-switch checked-value="0" unchecked-value="1" v-model="resourceform.status"></a-switch>
            </a-form-item>
            <a-form-item field="menuName" label="资源名称">
              <a-input v-model="resourceform.menuName" />
            </a-form-item>
            <a-form-item field="menuType" label="资源类型">
              <a-select v-model="resourceform.menuType" :options="options" :field-names="fieldNames"
                        :style="{width:'320px'}"
                        placeholder="请选择" />

            </a-form-item>
            <a-form-item field="perms" label="资源控制权限字符">
              <a-input v-model="resourceform.perms" />
            </a-form-item>
            <a-form-item field="component" label="资源地址" style="align: start">
              <a-input v-model="resourceform.component" />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button @click="editresource">保存</a-button>
                <a-button @click="reset(resourceform.menuId)">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
    <a-modal width="50%" v-model:visible="visible" title="新增" @cancel="handleCancel" @ok="addresource">
      <a-form :model="resourceform" layout="horizontal">
        <a-form-item field="parentName" label="上级资源" disabled>
          <a-input v-model="resourceform.parentName" />
        </a-form-item>
        <a-form-item field="status" label="资源状态">
          <a-switch checked-value="0" unchecked-value="1" v-model="resourceform.status"></a-switch>
        </a-form-item>
        <a-form-item field="menuName" label="资源名称">
          <a-input v-model="resourceform.menuName" />
        </a-form-item>
        <a-form-item field="menuType" label="资源类型">
          <a-select v-model="resourceform.menuType" :options="options" :field-names="fieldNames"
                    :style="{width:'320px'}"
                    placeholder="请选择"  />
        </a-form-item>
        <a-form-item field="perms" label="资源控制权限字符">
          <a-input v-model="resourceform.perms" />
        </a-form-item>
        <a-form-item field="component" label="资源地址" style="align: start">
          <a-input v-model="resourceform.component" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { IconPlus } from "@arco-design/web-vue/es/icon";
import { Resource, ResourceAdd, ResourceById, ResourceDelete, ResourceList, ResourceUpdate } from "@/api/authority";
import Authheader from "@/views/authority/components/authheader.vue";
import { Modal } from "@arco-design/web-vue";

let visible = ref(false);
let treeData = ref([]);
let showLine = ref(true);
let menuTips = ref(["权限管理", "资源"]);
const fieldNames = { value: "key", label: "value" };
// 0目录 1菜单 2按钮
let options = ref([
  {
    key: "0",
    value: "目录"
  },
  {
    key: "1",
    value: "菜单"
  },
  {
    key: "2",
    value: "按钮"
  }
]);
let resourceform = ref<Resource>({
  component: "",
  createTime: "",
  description: "",
  icon: "",
  menuId: "",
  menuName: "",
  menuType: "",
  orderNum: "",
  parentId: "",
  parentName: "",
  children: [],
  path: "",
  perms: "",
  status: "",
  syesourcetype: "",
  target: "",
  updateTime: ""
});

const onIconClick = (nodeData) => {
  resourceform.value.parentId = nodeData.menuId;
  visible.value = true;
};

const addresource = async () => {
  await ResourceAdd({
    ...resourceform.value
  } as unknown as Resource).then((res) => {
    ResourceData("");
  });
};

const onIconClickDelete = (nodeData) => {
  ResourceDelete(nodeData.menuId).then(() => {
    ResourceData("");
  });
};

const showDetail = (id) => {
  ResourceById(id).then((res) => {
    resourceform.value = { ...res.data };
  });
};
const editresource = () => {
  ResourceUpdate({
    ...resourceform.value
  } as unknown as Resource).then((res) => {
    ResourceData("");
    Modal.success({
      title: "保存成功",
      content: "保存成功"
    });
  });
};
const reset = (id) => {
  ResourceById(id).then((res) => {
    resourceform.value = { ...res.data };
  });
};

const onDrop = ({ dragNode, dropNode, dropPosition }) => {
  const data = treeData.value;
  ResourceUpdate({
    orderNum: "0", parentId: dropNode.menuId, menuId: dragNode.menuId
  });
  const loop = (data, key, callback) => {
    data.some((item, index, arr) => {
      if (item.menuId === key) {
        callback(item, index, arr);
        return true;
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
      return false;
    });
  };

  loop(data, dragNode.menuId, (_, index, arr) => {
    arr.splice(index, 1);
  });

  if (dropPosition === 0) {
    loop(data, dropNode.menuId, (item) => {
      item.children = item.children || [];
      item.children.push(dragNode);
    });
  } else {
    loop(data, dropNode.menuId, (_, index, arr) => {
      arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
    });
  }
};

const handleCancel = (type) => {
  if (type == 1) {
    visible.value = false;
  }
};

const ResourceData = async (key) => {
  await ResourceList(key).then((res) => {
    treeData.value = [...res.rows];
  });
};

ResourceData("");
</script>


<style scoped>
.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),
.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title):hover {
  animation: blinkBg 0.4s 2;
}

@keyframes blinkBg {
  0% {
    background-color: transparent;
  }

  100% {
    background-color: var(--color-primary-light-1);
  }
}
</style>

 src/views/authority/resource/locale/en-US.ts

New file
@@ -0,0 +1,5 @@
export default {
  "menu.resource.title": "resource",
  'menu.resource.detail': 'Detail',
};
// export default { "menu.user.title": "Account" };

 src/views/authority/resource/locale/zh-CN.ts

New file
@@ -0,0 +1,4 @@
export default {
  'menu.resource.title': '资源',
  'menu.resource.detail': '详情',
};