|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="add-renewal-wrap">
|
|
|
- <t-input
|
|
|
+ <!-- <t-input
|
|
|
:class="!props.isShowFoot ? 'input-wrap' : ''"
|
|
|
placeholder="分类名称"
|
|
|
v-model="searchTxt"
|
|
|
@@ -8,7 +8,17 @@
|
|
|
@Blur="changeSearchTxt"
|
|
|
>
|
|
|
<template #prefixIcon><SearchIcon /></template>
|
|
|
- </t-input>
|
|
|
+ </t-input> -->
|
|
|
+
|
|
|
+ <div class="tab-nav">
|
|
|
+ <span
|
|
|
+ v-for="tab in tabs"
|
|
|
+ :key="tab.name"
|
|
|
+ :class="{'act':tab.name===activeTab}"
|
|
|
+ @click="handleChangeTab(tab)"
|
|
|
+ >{{tab.name}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="tree">
|
|
|
<t-tree
|
|
|
:expandAll="searchTxt !== ''"
|
|
|
@@ -31,9 +41,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch, nextTick } from 'vue';
|
|
|
+import { ref, watch, nextTick, computed } from 'vue';
|
|
|
import { SearchIcon } from 'tdesign-icons-vue-next';
|
|
|
import { useRoute } from 'vue-router'
|
|
|
+ import { businessCustomInterence } from '@/api/api.js';
|
|
|
|
|
|
const route = useRoute()
|
|
|
const props = defineProps({
|
|
|
@@ -61,32 +72,82 @@ const props = defineProps({
|
|
|
type: Number,
|
|
|
default: 1,
|
|
|
},
|
|
|
+ businessId: {
|
|
|
+ type: Number
|
|
|
+ }
|
|
|
|
|
|
});
|
|
|
// emit事件
|
|
|
const emit = defineEmits(['close', 'setPermission', 'getSearch']);
|
|
|
const searchTxt = ref('');
|
|
|
+
|
|
|
+
|
|
|
+const tabs = [
|
|
|
+ { name:'图库',key:'图库' },
|
|
|
+ { name:'研报',key:'研报' },
|
|
|
+]
|
|
|
+const activeTab=ref('图库')
|
|
|
+function handleChangeTab(item) {
|
|
|
+ if(activeTab.value === item.key) return
|
|
|
+ activeTab.value = item.key;
|
|
|
+
|
|
|
+ activeTab.value === '研报' ? getReportPermissionList() : initPermission(props.PermissionList);
|
|
|
+}
|
|
|
+
|
|
|
+async function getReportPermissionList() {
|
|
|
+ const res = await businessCustomInterence.getReportPermission({
|
|
|
+ EtaBusinessId: props.businessId
|
|
|
+ })
|
|
|
+
|
|
|
+ if(res.Ret !== 200) return
|
|
|
+ if(res.Data) {
|
|
|
+ treeList.value = filterNodes(res.Data.List);
|
|
|
+ allChecked.value = res.Data.CheckList;
|
|
|
+ actuallyAllChecked.value = res.Data.CheckList;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function initPermission(newValue) {
|
|
|
+ treeList.value = newValue.length !== 0 ? filterNodes(newValue) : [];
|
|
|
+
|
|
|
+ if (!props.isSearch && newValue.length > 0) { // 如果不是搜索，则直接把后端返回的赋值为选中项
|
|
|
+ allChecked.value = props.allCheckedList;
|
|
|
+ actuallyAllChecked.value = props.allCheckedList;
|
|
|
+ } else { // 如果是搜索，则把本地选中项赋值为实际上选中的值
|
|
|
+ allChecked.value = actuallyAllChecked.value
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
// tree相关
|
|
|
const treeList = ref([]);
|
|
|
const tree = ref();
|
|
|
const valueMode = ref('all');
|
|
|
const checkable = ref(true);
|
|
|
-const checkStrictly = ref(true);
|
|
|
+const checkStrictly = computed(() => activeTab.value === '图库' ? true : false);
|
|
|
const allChecked = ref([]);
|
|
|
const actuallyAllChecked = ref([]);
|
|
|
-const treeKeys = reactive({
|
|
|
- value: 'ChartClassifyId',
|
|
|
- children: 'Children',
|
|
|
- label: 'ChartClassifyName',
|
|
|
+const treeKeys = computed( () => {
|
|
|
+ return activeTab.value === '图库'
|
|
|
+ ? {
|
|
|
+ value: 'ChartClassifyId',
|
|
|
+ children: 'Children',
|
|
|
+ label: 'ChartClassifyName',
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ value: 'PermissionId',
|
|
|
+ children: 'Child',
|
|
|
+ label: 'PermissionName',
|
|
|
+ }
|
|
|
});
|
|
|
+const singleKey = computed(() => activeTab.value === '图库' ? 'ChartClassifyId' : 'PermissionId')
|
|
|
|
|
|
// 用于存储ChartClassifyId到节点引用的映射
|
|
|
const nodeMap = new Map();
|
|
|
// 构建nodeIdMap的函数
|
|
|
const buildNodeMap = (arr) => {
|
|
|
arr.forEach(node => {
|
|
|
- nodeMap.set(node.ChartClassifyId, node);
|
|
|
+ nodeMap.set(node[singleKey.value], node);
|
|
|
if (node.Children && node.Children.length) {
|
|
|
buildNodeMap(node.Children);
|
|
|
}
|
|
|
@@ -99,7 +160,7 @@ const filterNodes = (arr) => {
|
|
|
const processNodes = (nodes) => {
|
|
|
nodes.forEach(node => {
|
|
|
// 检查当前节点的ChartClassifyId是否在allCheckedList中
|
|
|
- if (props.allCheckedList.includes(node.ChartClassifyId)) {
|
|
|
+ if (props.allCheckedList.includes(node[singleKey.value])) {
|
|
|
// 标记当前节点为expanded
|
|
|
node.expanded = true;
|
|
|
|
|
|
@@ -130,14 +191,7 @@ watch(
|
|
|
() => props.PermissionList,
|
|
|
(newValue) => {
|
|
|
console.log('newValue', newValue);
|
|
|
- treeList.value = newValue.length !== 0 ? filterNodes(newValue) : [];
|
|
|
-
|
|
|
- if (!props.isSearch && newValue.length > 0) { // 如果不是搜索，则直接把后端返回的赋值为选中项
|
|
|
- allChecked.value = props.allCheckedList;
|
|
|
- actuallyAllChecked.value = props.allCheckedList;
|
|
|
- } else { // 如果是搜索，则把本地选中项赋值为实际上选中的值
|
|
|
- allChecked.value = actuallyAllChecked.value
|
|
|
- }
|
|
|
+ initPermission(newValue)
|
|
|
},
|
|
|
{ immediate: true }
|
|
|
);
|
|
|
@@ -160,6 +214,7 @@ watch(
|
|
|
(newValue) => {
|
|
|
if (newValue) {
|
|
|
searchTxt.value = '';
|
|
|
+ activeTab.value = '图库';
|
|
|
}
|
|
|
},
|
|
|
{ immediate: true }
|
|
|
@@ -172,16 +227,18 @@ const onChange = (checked, context) => {
|
|
|
// expanded: true,
|
|
|
// })
|
|
|
const { node } = context;
|
|
|
+ const childList = activeTab.value==='研报' ? node.data.Child : node.data.Children;
|
|
|
+
|
|
|
if (node.checked) {
|
|
|
- if (node.data.Children.length) { // 如果当前节点有子节点，则把所有子节点的id都加上去
|
|
|
- allChecked.value = [...new Set([...allChecked.value, node.value, ...getAllChildIds(node.data.Children)])];
|
|
|
- actuallyAllChecked.value = [...new Set([...actuallyAllChecked.value, node.value, ...getAllChildIds(node.data.Children)])];
|
|
|
+ if (childList.length) { // 如果当前节点有子节点，则把所有子节点的id都加上去
|
|
|
+ allChecked.value = [...new Set([...allChecked.value, node.value, ...getAllChildIds(childList)])];
|
|
|
+ actuallyAllChecked.value = [...new Set([...actuallyAllChecked.value, node.value, ...getAllChildIds(childList)])];
|
|
|
} else { // 如果当前节点有子节点，则直接加上该节点的id
|
|
|
actuallyAllChecked.value = [...new Set([...actuallyAllChecked.value, node.value])];
|
|
|
}
|
|
|
} else {
|
|
|
- if (node.data.Children.length) { // 如果当前节点有子节点，则直接去掉该节点和子节点的所有id
|
|
|
- const temp = [...getAllChildIds(node.data.Children), node.value];
|
|
|
+ if (childList.length) { // 如果当前节点有子节点，则直接去掉该节点和子节点的所有id
|
|
|
+ const temp = [...getAllChildIds(childList), node.value];
|
|
|
allChecked.value = removeChildren(allChecked.value, temp);
|
|
|
actuallyAllChecked.value = removeChildren(actuallyAllChecked.value, temp);
|
|
|
} else { // 如果当前节点没有子节点，则直接去掉该节点的id
|
|
|
@@ -195,13 +252,13 @@ const getAllChildIds = (arr) => {
|
|
|
function traverse(current) {
|
|
|
if (!Array.isArray(current) || !current.length) return;
|
|
|
current.forEach(item => {
|
|
|
- if (item.ChartClassifyId) {
|
|
|
- ids.push(item.ChartClassifyId);
|
|
|
+ if (item[singleKey.value]) {
|
|
|
+ ids.push(item[singleKey.value]);
|
|
|
}
|
|
|
if (item.Children && Array.isArray(item.Children)) {
|
|
|
item.Children.forEach(child => {
|
|
|
- if (child.ChartClassifyId) {
|
|
|
- ids.push(child.ChartClassifyId);
|
|
|
+ if (child[singleKey.value]) {
|
|
|
+ ids.push(child[singleKey.value]);
|
|
|
}
|
|
|
traverse(child.Children); // 递归遍历子元素
|
|
|
});
|
|
|
@@ -218,7 +275,10 @@ const removeChildren = (arrayA, arrayB) => {
|
|
|
|
|
|
// 保存按钮
|
|
|
const handleSave = async () => {
|
|
|
- emit('setPermission', actuallyAllChecked.value);
|
|
|
+ emit('setPermission', {
|
|
|
+ type: activeTab.value,
|
|
|
+ checkedList:actuallyAllChecked.value
|
|
|
+ });
|
|
|
};
|
|
|
// 搜索
|
|
|
const changeSearchTxt = () => {
|
|
|
@@ -230,7 +290,8 @@ const handleClose = () => {
|
|
|
};
|
|
|
|
|
|
defineExpose({
|
|
|
- actuallyAllChecked
|
|
|
+ actuallyAllChecked,
|
|
|
+ activeTab
|
|
|
})
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@@ -247,5 +308,16 @@ defineExpose({
|
|
|
gap: 10px;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
+
|
|
|
+ .tab-nav {
|
|
|
+ display: flex;
|
|
|
+ gap: 0 30px;
|
|
|
+ >span {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ span.act {
|
|
|
+ color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
