权限资源

src/api/authority.ts

@@ -25,6 +25,26 @@ export interface Organization {
   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 OrganizationUpdate(organization) {
 
 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 @@ export interface LoginRes {
   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 localeWorkplace from '@/views/dashboard/workplace/locale/en-US';
 
 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 @@ export default {
 
   ...localeUser,
   ...localeOrganization,
+  ...localeResource,
 
   ...localeMonitor,
   ...localeSearchTable,

src/locale/zh-CN.ts

@@ -5,6 +5,7 @@ import localeWorkplace from '@/views/dashboard/workplace/locale/zh-CN';
 
 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 @@ export default {
 
   ...localeUser,
   ...localeOrganization,
+  ...localeResource,
 
   ...localeMonitor,
   ...localeSearchTable,

src/router/routes/modules/authority.ts

@@ -32,6 +32,16 @@ const AUTHORITY: AppRouteRecordRaw = {
         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 onDrop = ({ dragNode, dropNode, dropPosition }) => {
   }
 };
 
+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

@@ -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

@@ -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

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