From e426ee93a2553550766e25958dcb70a6f7339b9c Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期二, 27 八月 2024 17:13:05 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/flow_web
---
src/views/authority/resource/index.vue | 419 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 254 insertions(+), 165 deletions(-)
diff --git a/src/views/authority/resource/index.vue b/src/views/authority/resource/index.vue
index 87815bd..7c94293 100644
--- a/src/views/authority/resource/index.vue
+++ b/src/views/authority/resource/index.vue
@@ -6,13 +6,13 @@
<a-card
:title="$t('menu.resource.title')"
:bordered="false"
- :style="{ 'width': '100%', 'height': '700px', 'overflow-y': 'auto' }"
+ style=" 'width': '100%'; height: calc(100vh - 250px); overflow-y:auto "
>
- <a-button @click="() => onIconClick(null)">鏂板鐖剁骇鑿滃崟</a-button>
<a-tree
class="tree-demo"
draggable
blockNode
+ :default-expand-all=true
:data="treeData"
:show-line="showLine"
:fieldNames="{
@@ -23,7 +23,7 @@
@drop="onDrop"
@select="showDetail"
>
- <template #extra="nodeData">
+ <template #extra="nodeData" >
<IconPlus
style="
position: absolute;
@@ -34,16 +34,20 @@
"
@click="() => onIconClick(nodeData)"
/>
- <IconDelete
- style="
+ <a-popconfirm v-if="nodeData.menuName!='root'"
+ content="璇风‘璁ゆ槸鍚﹀垹闄わ紵"
+ type="success"
+ @ok="() => onIconClickDelete(nodeData)"
+ >
+ <IconDelete
+ style="
position: absolute;
right: 40px;
font-size: 12px;
top: 10px;
color: #3370ff;
- "
- @click="() => onIconClickDelete(nodeData)"
- />
+ " />
+ </a-popconfirm>
</template>
</a-tree>
</a-card>
@@ -54,7 +58,7 @@
:bordered="false"
:style="{ width: '100%' }"
>
- <a-form :model="resourceform" layout="horizontal">
+ <a-form :model="resourceform" layout="horizontal" ref="formRef">
<a-form-item field="parentName" label="涓婄骇璧勬簮" disabled>
<a-input v-model="resourceform.parentName" />
</a-form-item>
@@ -65,10 +69,19 @@
v-model="resourceform.status"
></a-switch>
</a-form-item>
- <a-form-item field="menuName" label="璧勬簮鍚嶇О">
+ <a-form-item field="menuName" label="璧勬簮鍚嶇О" :rules="[{required:true,message:'璧勬簮鍚嶇О蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="resourceform.menuName" />
</a-form-item>
- <a-form-item field="menuType" label="璧勬簮绫诲瀷">
+ <a-form-item field="menuName" label="璧勬簮鍥炬爣">
+ <Upload
+ :action="uploadAction"
+ :limit="1"
+ :url="resourceform.icon"
+ @update:fileList="updateFileList"
+ @success="handleSuccess"
+ ></Upload>
+ </a-form-item>
+ <a-form-item field="menuType" label="璧勬簮绫诲瀷" :rules="[{required:true,message:'璧勬簮绫诲瀷蹇呭～'}]">
<a-select
v-model="resourceform.menuType"
:options="options"
@@ -77,13 +90,20 @@
placeholder="璇烽�夋嫨"
/>
</a-form-item>
- <a-form-item field="perms" label="璧勬簮鎺у埗鏉冮檺瀛楃">
+ <a-form-item field="description" label="鎻愮ず璇�">
+ <a-input
+ v-model="resourceform.description"
+ placeholder="璇疯緭鍏ユ彁绀鸿瘝"
+ />
+ </a-form-item>
+ <a-form-item field="perms" label="璧勬簮鎺у埗鏉冮檺瀛楃" :rules="[{required:true,message:'璧勬簮鎺у埗鏉冮檺瀛楃蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="resourceform.perms" />
</a-form-item>
<a-form-item
field="component"
label="璧勬簮鍦板潃"
style="align: start"
+ :rules="[{required:true,message:'璧勬簮鍦板潃蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]"
>
<a-input v-model="resourceform.component" />
</a-form-item>
@@ -104,7 +124,7 @@
@cancel="handleCancel"
@ok="addresource"
>
- <a-form :model="resourceform" layout="horizontal">
+ <a-form :model="resourceform" layout="horizontal" ref="addFormRef">
<a-form-item field="parentName" label="涓婄骇璧勬簮" disabled>
<a-input v-model="resourceform.parentName" />
</a-form-item>
@@ -115,10 +135,19 @@
v-model="resourceform.status"
></a-switch>
</a-form-item>
- <a-form-item field="menuName" label="璧勬簮鍚嶇О">
+ <a-form-item field="menuName" label="璧勬簮鍚嶇О" :rules="[{required:true,message:'璧勬簮鍚嶇О蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="resourceform.menuName" />
</a-form-item>
- <a-form-item field="menuType" label="璧勬簮绫诲瀷">
+ <a-form-item field="icon" label="璧勬簮鍥炬爣">
+ <Upload
+ :action="uploadAction"
+ :limit="1"
+ :url="resourceform.icon"
+ @update:fileList="updateFileList"
+ @success="handleSuccess"
+ ></Upload>
+ </a-form-item>
+ <a-form-item field="menuType" label="璧勬簮绫诲瀷" :rules="[{required:true,message:'璧勬簮绫诲瀷蹇呭～'}]">
<a-select
v-model="resourceform.menuType"
:options="options"
@@ -127,10 +156,16 @@
placeholder="璇烽�夋嫨"
/>
</a-form-item>
- <a-form-item field="perms" label="璧勬簮鎺у埗鏉冮檺瀛楃">
+ <a-form-item field="description" label="鎻愮ず璇�">
+ <a-input
+ v-model="resourceform.description"
+ placeholder="璇疯緭鍏ユ彁绀鸿瘝"
+ />
+ </a-form-item>
+ <a-form-item field="perms" label="璧勬簮鎺у埗鏉冮檺瀛楃" :rules="[{required:true,message:'璧勬簮鎺у埗鏉冮檺瀛楃蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="resourceform.perms" />
</a-form-item>
- <a-form-item field="component" label="璧勬簮鍦板潃" style="align: start">
+ <a-form-item field="component" label="璧勬簮鍦板潃" style="align: start" :rules="[{required:true,message:'璧勬簮鍦板潃蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="resourceform.component" />
</a-form-item>
</a-form>
@@ -139,173 +174,227 @@
</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";
+ import { ref } from 'vue';
+ import { IconPlus } from '@arco-design/web-vue/es/icon';
+ import {
+ Organization,
+ OrganizationAdd, OrganizationUpdate,
+ Resource,
+ ResourceAdd,
+ ResourceById,
+ ResourceDelete,
+ ResourceList,
+ ResourceUpdate
+ } from "@/api/authority";
+ import Authheader from '@/views/authority/components/authheader.vue';
+ import { Modal } from '@arco-design/web-vue';
+ import { userModelState } from '@/store';
-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: "3",
- value: "鐩綍"
- },
- {
- key: "0",
- value: "鑿滃崟"
- },
- {
- key: "1",
- 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) => {
- if (nodeData) {
- resourceform.value.parentId = nodeData.menuId;
- resourceform.value.parentName = nodeData.menuName;
- }
- resourceform.value.component = "";
- resourceform.value.createTime = "";
- resourceform.value.description = "";
- resourceform.value.icon = "";
- resourceform.value.menuId = "";
- resourceform.value.menuName = "";
- resourceform.value.menuType = "";
- resourceform.value.orderNum = "0";
- resourceform.value.path = "";
- resourceform.value.perms = "";
- resourceform.value.status = "";
- resourceform.value.syesourcetype = "";
-
- visible.value = true;
-};
-
-const addresource = async () => {
- await ResourceAdd({
- ...resourceform.value
- } as unknown as Resource).then((res) => {
- ResourceData("");
+ const modelStore = userModelState();
+ let formRef = ref();
+ let addFormRef= ref();
+ 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: '3',
+ value: '鐩綍',
+ },
+ {
+ key: '0',
+ value: '鑿滃崟',
+ },
+ {
+ key: '1',
+ value: '鎸夐挳',
+ },
+ ]);
+ let resourceform = ref<Resource>({
+ component: '',
+ createTime: '',
+ description: '',
+ icon: '',
+ menuId: '',
+ menuName: '',
+ menuType: '',
+ orderNum: '0',
+ parentId: '',
+ parentName: '',
+ children: [],
+ path: '',
+ perms: '',
+ status: '',
+ syesourcetype: '',
+ target: '',
+ updateTime: '',
});
-};
-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 onIconClick = (nodeData) => {
+ if (nodeData) {
+ resourceform.value.parentId = nodeData.menuId;
+ resourceform.value.parentName = nodeData.menuName;
+ }
+ resourceform.value.component = '';
+ resourceform.value.createTime = '';
+ resourceform.value.description = '';
+ resourceform.value.icon = '';
+ resourceform.value.menuId = '';
+ resourceform.value.menuName = '';
+ resourceform.value.menuType = '';
+ resourceform.value.orderNum = '0';
+ resourceform.value.path = '';
+ resourceform.value.perms = '';
+ resourceform.value.status = '';
+ resourceform.value.syesourcetype = '';
+
+ visible.value = true;
+ };
+
+ //鍥剧墖涓婁紶
+ const uploadAction = '/api/v1/llm/upload'; // 鏇挎崲涓轰綘鐨勪笂浼燗PI
+ const fileList = ref([]);
+ const imageUrls = ref([]);
+ const uploadUrl = ref([]);
+ const httpUrl = modelStore.hrefUrl;
+ const updateFileList = (newFileList) => {
+ fileList.value = newFileList;
+ };
+
+ const handleSuccess = (urls) => {
+ uploadUrl.value = urls;
+
+ const urlsArr = urls.map((url) => {
+ return httpUrl + url;
});
- });
-};
-const reset = (id) => {
- ResourceById(id).then((res) => {
- resourceform.value = { ...res.data };
- });
-};
+ imageUrls.value = urlsArr; // 鎷垮埌涓婁紶鐨勫浘鐗囧湴鍧�
+ };
-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;
+ const addCb = async (err) => {
+ if (err) {
+ visible.value = true;
+ } else {
+ resourceform.value.icon = uploadUrl.value[0] || '';
+ await ResourceAdd({
+ ...resourceform.value,
+ } as unknown as Resource).then((res) => {
+ ResourceData('');
+ });
+ }
+ }
+
+ const addresource = async (done) => {
+ addFormRef.value.validate(addCb);
+ };
+
+ const onIconClickDelete = (nodeData) => {
+ ResourceDelete(nodeData.menuId).then(() => {
+ ResourceData('');
});
};
- loop(data, dragNode.menuId, (_, index, arr) => {
- arr.splice(index, 1);
- });
+ const showDetail = (id) => {
+ ResourceById(id).then((res) => {
+ resourceform.value = { ...res.data };
+ resourceform.value.icon = res.data.icon;
- if (dropPosition === 0) {
- loop(data, dropNode.menuId, (item) => {
- item.children = item.children || [];
- item.children.push(dragNode);
+ imageUrls.value.push(httpUrl + res.data.icon);
});
- } else {
- loop(data, dropNode.menuId, (_, index, arr) => {
- arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
+ };
+ const cb = async (err) => {
+ if (err) {
+
+ } else {
+ resourceform.value.icon = uploadUrl.value[0] || '';
+ ResourceUpdate({
+ ...resourceform.value,
+ } as unknown as Resource).then((res) => {
+ ResourceData('');
+ Modal.success({
+ title: '淇濆瓨鎴愬姛',
+ content: '淇濆瓨鎴愬姛',
+ });
+ });
+ }
+ }
+ const editresource = () => {
+ formRef.value.validate(cb);
+
+ };
+ const reset = (id) => {
+ ResourceById(id).then((res) => {
+ resourceform.value = { ...res.data };
});
- }
-};
+ };
-const handleCancel = (type) => {
- if (type == 1) {
- visible.value = false;
- }
-};
+ 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;
+ });
+ };
-const ResourceData = async (key) => {
- await ResourceList(key).then((res) => {
- treeData.value = [...res.rows];
- });
-};
+ loop(data, dragNode.menuId, (_, index, arr) => {
+ arr.splice(index, 1);
+ });
-ResourceData("");
+ 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;
+ .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;
}
- 100% {
- background-color: var(--color-primary-light-1);
+ @keyframes blinkBg {
+ 0% {
+ background-color: transparent;
+ }
+
+ 100% {
+ background-color: var(--color-primary-light-1);
+ }
}
-}
</style>
--
Gitblit v1.8.0