ADD:添加按钮权限
This commit is contained in:
贾同学
@@ -1,70 +1,88 @@
|
||||
<template>
|
||||
<div class='plan_tree'>
|
||||
<div class='search_view'>
|
||||
<el-input
|
||||
placeholder='请输入计划名称'
|
||||
clearable
|
||||
v-model='searchForm.planName'
|
||||
show-word-limit
|
||||
maxlength="32"
|
||||
></el-input>
|
||||
<el-tooltip content="检测计划列表" placement="top">
|
||||
<Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
|
||||
@click.stop='detail()' />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class='tree_container'>
|
||||
<el-tree
|
||||
:data='data'
|
||||
ref='treeRef'
|
||||
:filter-node-method='filterNode'
|
||||
:props='defaultProps'
|
||||
node-key='id'
|
||||
class="filter-tree"
|
||||
:highlight-current="true"
|
||||
default-expand-all
|
||||
:default-checked-keys='defaultChecked'
|
||||
@node-click='handleNodeClick'
|
||||
>
|
||||
<template #default='{ node, data }'>
|
||||
<span class='custom-tree-node' style='display: flex;align-items: center;'>
|
||||
<!-- 父节点图标 -->
|
||||
<Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
|
||||
:style="{color:node.label=='未检'?'#fac858':node.label=='检测中'?'#ee6666':'#91cc75'}" />
|
||||
<!-- 节点名称 -->
|
||||
<span>{{ node.label }}</span>
|
||||
<!-- 子节点右侧图标 + tooltip -->
|
||||
<el-tooltip
|
||||
v-if="node.label!='未检' && node.label!='检测中' && node.label!='检测完成' && hasChildrenInPlanTable(node.data)"
|
||||
placement="top"
|
||||
:manual="true"
|
||||
content="子计划信息">
|
||||
<List
|
||||
@click.stop="childDetail(node.data)"
|
||||
style="width: 16px; height: 16px; margin-left: 8px; cursor: pointer; color: var(--el-color-primary)"
|
||||
/>
|
||||
<div class="plan_tree">
|
||||
<div class="search_view">
|
||||
<el-input
|
||||
placeholder="请输入计划名称"
|
||||
clearable
|
||||
v-model="searchForm.planName"
|
||||
show-word-limit
|
||||
maxlength="32"
|
||||
></el-input>
|
||||
<el-tooltip content="检测计划列表" placement="top">
|
||||
<Menu
|
||||
style="width: 26px; height: 26px; margin-left: 8px; cursor: pointer; color: var(--el-color-primary)"
|
||||
@click.stop="detail()"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="tree_container">
|
||||
<el-tree
|
||||
:data="data"
|
||||
ref="treeRef"
|
||||
:filter-node-method="filterNode"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
class="filter-tree"
|
||||
:highlight-current="true"
|
||||
default-expand-all
|
||||
:default-checked-keys="defaultChecked"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node" style="display: flex; align-items: center">
|
||||
<!-- 父节点图标 -->
|
||||
<Platform
|
||||
v-if="!data.pid"
|
||||
style="width: 18px; height: 18px; margin-right: 8px"
|
||||
:style="{
|
||||
color: node.label == '未检' ? '#fac858' : node.label == '检测中' ? '#ee6666' : '#91cc75'
|
||||
}"
|
||||
/>
|
||||
<!-- 节点名称 -->
|
||||
<span>{{ node.label }}</span>
|
||||
<!-- 子节点右侧图标 + tooltip -->
|
||||
<el-tooltip
|
||||
v-if="
|
||||
node.label != '未检' &&
|
||||
node.label != '检测中' &&
|
||||
node.label != '检测完成' &&
|
||||
hasChildrenInPlanTable(node.data)
|
||||
"
|
||||
placement="top"
|
||||
:manual="true"
|
||||
content="子计划信息"
|
||||
>
|
||||
<List
|
||||
v-auth.plan="'add_subplan'"
|
||||
@click.stop="childDetail(node.data)"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SourceOpen ref='openSourceView' :width="width" :height="height + 175"></SourceOpen>
|
||||
|
||||
<SourceOpen ref="openSourceView" :width="width" :height="height + 175"></SourceOpen>
|
||||
</template>
|
||||
<script lang='ts' setup>
|
||||
import { type Plan } from '@/api/plan/interface';
|
||||
import { Menu, Platform ,List} from '@element-plus/icons-vue'
|
||||
import { nextTick, onMounted, PropType, ref, watch } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { type Plan } from '@/api/plan/interface'
|
||||
import { List, Menu, Platform } from '@element-plus/icons-vue'
|
||||
import { nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {useCheckStore} from "@/stores/modules/check";
|
||||
import { ElTooltip } from 'element-plus';
|
||||
import { useCheckStore } from '@/stores/modules/check'
|
||||
import { ElTooltip } from 'element-plus'
|
||||
import SourceOpen from '@/views/plan/planList/components/childrenPlan.vue'
|
||||
import {getPlanList } from '@/api/plan/plan.ts'
|
||||
import { getPlanList } from '@/api/plan/plan.ts'
|
||||
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
|
||||
|
||||
const openSourceView = ref()
|
||||
const router = useRouter()
|
||||
const checkStore = useCheckStore()
|
||||
@@ -75,240 +93,228 @@ const modeStore = useModeStore()
|
||||
const dictStore = useDictStore()
|
||||
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
pid: 'pid',
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
pid: 'pid'
|
||||
}
|
||||
const searchForm = ref({
|
||||
planName: '',
|
||||
planName: ''
|
||||
})
|
||||
const defaultChecked = ref<string[]>([]) // 明确类型为 number[]
|
||||
const tree = ref(false)//确保左侧树高凉只执行一次
|
||||
const defaultChecked = ref<string[]>([]) // 明确类型为 number[]
|
||||
const tree = ref(false) //确保左侧树高凉只执行一次
|
||||
const getTreeData = (val: any) => {
|
||||
defaultChecked.value = [];
|
||||
// 遍历 val 的每个 children，过滤掉 pid !== '0'
|
||||
data.value = val
|
||||
for (let item of data.value) {
|
||||
if (item.children.length > 0) {
|
||||
let node = item.children[0];
|
||||
defaultChecked.value.push(node.id);
|
||||
checkStore.setPlan(node);
|
||||
// 高亮显示第一个节点
|
||||
// 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
|
||||
nextTick(() => {
|
||||
treeRef.value?.setCurrentKey(node.id);
|
||||
idd.value = node.id;
|
||||
});
|
||||
// 找到第一个符合条件的 children 后跳出循环
|
||||
break;
|
||||
defaultChecked.value = []
|
||||
// 遍历 val 的每个 children，过滤掉 pid !== '0'
|
||||
data.value = val
|
||||
for (let item of data.value) {
|
||||
if (item.children.length > 0) {
|
||||
let node = item.children[0]
|
||||
defaultChecked.value.push(node.id)
|
||||
checkStore.setPlan(node)
|
||||
// 高亮显示第一个节点
|
||||
// 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
|
||||
nextTick(() => {
|
||||
treeRef.value?.setCurrentKey(node.id)
|
||||
idd.value = node.id
|
||||
})
|
||||
// 找到第一个符合条件的 children 后跳出循环
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//点击表格后左侧树刷新，高亮显示对应节点
|
||||
const clickTableToTree = (val: any,id:any) => {
|
||||
defaultChecked.value = []
|
||||
data.value = val
|
||||
let node = ref('')
|
||||
if (data.value.length > 0) {
|
||||
for (let i = 0; i < data.value.length; i++){
|
||||
for (let j = 0; j < data.value[i].children.length; j++) {
|
||||
if (data.value[i].children[j].id == id) {
|
||||
node.value = data.value[i].children[j].id
|
||||
break;
|
||||
const clickTableToTree = (val: any, id: any) => {
|
||||
defaultChecked.value = []
|
||||
data.value = val
|
||||
let node = ref('')
|
||||
if (data.value.length > 0) {
|
||||
for (let i = 0; i < data.value.length; i++) {
|
||||
for (let j = 0; j < data.value[i].children.length; j++) {
|
||||
if (data.value[i].children[j].id == id) {
|
||||
node.value = data.value[i].children[j].id
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
|
||||
nextTick(() => {
|
||||
treeRef.value?.setCurrentKey(node.value)
|
||||
idd.value = node.value
|
||||
})
|
||||
}
|
||||
|
||||
// 使用 nextTick 确保在 DOM 更新后调用 setCurrentKey
|
||||
nextTick(() => {
|
||||
treeRef.value?.setCurrentKey(node.value);
|
||||
idd.value = node.value
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const {updateSelectedTreeNode,width,height,planTable} = defineProps<{
|
||||
updateSelectedTreeNode:Function;
|
||||
width: number;
|
||||
height: number;
|
||||
planTable?: Array<[]>;
|
||||
}>();
|
||||
const { updateSelectedTreeNode, width, height, planTable } = defineProps<{
|
||||
updateSelectedTreeNode: Function
|
||||
width: number
|
||||
height: number
|
||||
planTable?: Array<[]>
|
||||
}>()
|
||||
|
||||
watch(
|
||||
() => searchForm.value.planName,
|
||||
(val) => {
|
||||
treeRef.value!.filter(val)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
() => searchForm.value.planName,
|
||||
val => {
|
||||
treeRef.value!.filter(val)
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
const hasChildrenInPlanTable = (nodeData: Plan.ResPlan) => {
|
||||
try {
|
||||
// 在 planTable 中查找对应的节点数据
|
||||
const foundItem = tableData.value.find((item: any) => item.id === nodeData.id);
|
||||
|
||||
// 检查是否有 children 且 children 数组不为空
|
||||
return foundItem && Array.isArray(foundItem.children) && foundItem.children.length > 0;
|
||||
} catch (error) {
|
||||
console.error('检查子节点时出错:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
try {
|
||||
// 在 planTable 中查找对应的节点数据
|
||||
const foundItem = tableData.value.find((item: any) => item.id === nodeData.id)
|
||||
|
||||
// 检查是否有 children 且 children 数组不为空
|
||||
return foundItem && Array.isArray(foundItem.children) && foundItem.children.length > 0
|
||||
} catch (error) {
|
||||
console.error('检查子节点时出错:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const idd = ref('')
|
||||
const handleNodeClick = (data: Plan.ResPlan) => {
|
||||
|
||||
if (data.name === '未检' || data.name === '检测中' || data.name === '检测完成') {
|
||||
// 如果是父节点，不执行任何操作
|
||||
//console.log('父节点不执行任何操作');
|
||||
// 设置当前高亮节点
|
||||
nextTick(() => {
|
||||
treeRef.value?.setCurrentKey(idd.value);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
idd.value = data.id
|
||||
// 如果是父节点，不执行任何操作
|
||||
//console.log('父节点不执行任何操作');
|
||||
// 设置当前高亮节点
|
||||
nextTick(() => {
|
||||
treeRef.value?.setCurrentKey(idd.value)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
checkStore.setPlan(data);
|
||||
updateSelectedTreeNode(data.id)
|
||||
idd.value = data.id
|
||||
|
||||
checkStore.setPlan(data)
|
||||
updateSelectedTreeNode(data.id)
|
||||
}
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
|
||||
// 点击详情
|
||||
const detail = () => {
|
||||
router.push('/plan/planList')
|
||||
router.push('/plan/planList')
|
||||
}
|
||||
|
||||
|
||||
const childDetail = (data: Plan.ResPlan) => {
|
||||
const filteredPlans = tableData.value.filter(item => item.id === data.id);
|
||||
const filteredPlans = tableData.value.filter(item => item.id === data.id)
|
||||
|
||||
// 确保有匹配项再访问 [0]
|
||||
if (filteredPlans.length > 0 && openSourceView.value) {
|
||||
openSourceView.value.open("检测计划详情", filteredPlans[0]);
|
||||
}
|
||||
// 确保有匹配项再访问 [0]
|
||||
if (filteredPlans.length > 0 && openSourceView.value) {
|
||||
openSourceView.value.open('检测计划详情', filteredPlans[0])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function buildTree(flatList: any[]): any[] {
|
||||
const map = new Map();
|
||||
const tree: any[] = [];
|
||||
const map = new Map()
|
||||
const tree: any[] = []
|
||||
|
||||
// First, create a map of all items by id for fast lookup
|
||||
flatList.forEach(item => {
|
||||
map.set(item.id, { ...item, children: [] });
|
||||
});
|
||||
// First, create a map of all items by id for fast lookup
|
||||
flatList.forEach(item => {
|
||||
map.set(item.id, { ...item, children: [] })
|
||||
})
|
||||
|
||||
// Then, assign each item to its parent's children array
|
||||
flatList.forEach(item => {
|
||||
if (item.fatherPlanId && map.has(item.fatherPlanId)) {
|
||||
map.get(item.fatherPlanId).children.push(map.get(item.id));
|
||||
} else if (item.fatherPlanId === '0') {
|
||||
// Items with fatherPlanId '0' are root nodes
|
||||
tree.push(map.get(item.id));
|
||||
}
|
||||
});
|
||||
// Then, assign each item to its parent's children array
|
||||
flatList.forEach(item => {
|
||||
if (item.fatherPlanId && map.has(item.fatherPlanId)) {
|
||||
map.get(item.fatherPlanId).children.push(map.get(item.id))
|
||||
} else if (item.fatherPlanId === '0') {
|
||||
// Items with fatherPlanId '0' are root nodes
|
||||
tree.push(map.get(item.id))
|
||||
}
|
||||
})
|
||||
|
||||
return tree;
|
||||
return tree
|
||||
}
|
||||
|
||||
|
||||
|
||||
const tableData = ref<any[]>([])
|
||||
onMounted(async () => {
|
||||
if(modeStore.currentMode != '比对式')
|
||||
return;
|
||||
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id;
|
||||
const result = await getPlanList({'patternId' : patternId});
|
||||
tableData.value = buildTree(result.data as any[]);
|
||||
if (modeStore.currentMode != '比对式') return
|
||||
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id
|
||||
const result = await getPlanList({ patternId: patternId })
|
||||
tableData.value = buildTree(result.data as any[])
|
||||
})
|
||||
|
||||
defineExpose({ getTreeData ,clickTableToTree})
|
||||
|
||||
|
||||
defineExpose({ getTreeData, clickTableToTree })
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.plan_tree {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
|
||||
.search_view {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
|
||||
.search_view {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
.el-input {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
margin-top: 6px;
|
||||
width: 100%;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100%;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
.tree_container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
|
||||
.tree_container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
|
||||
.el-tree {
|
||||
// height: 100%;
|
||||
width: auto;
|
||||
.el-tree {
|
||||
// height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.filter-tree {
|
||||
// border: 1px solid #dcdfe6;
|
||||
min-width: 100%;
|
||||
height: 97%;
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
margin-top: 12px;
|
||||
|
||||
// border: 1px solid #dcdfe6;
|
||||
min-width: 100%;
|
||||
height: 97%;
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
//.filter-tree span {
|
||||
// font-size: 16px;
|
||||
// display:block;
|
||||
// overflow:hidden;
|
||||
// word-break:keep-all;
|
||||
// white-space:nowrap;
|
||||
// text-overflow:ellipsis;
|
||||
// word-break:keep-all;
|
||||
// white-space:nowrap;
|
||||
// text-overflow:ellipsis;
|
||||
// padding-right: 12px;
|
||||
//}
|
||||
.leftBox {
|
||||
// float: left;
|
||||
// width: 20%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// float: left;
|
||||
// width: 20%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.left {
|
||||
height: calc(100% - 45px);
|
||||
overflow: auto;
|
||||
height: calc(100% - 45px);
|
||||
overflow: auto;
|
||||
}
|
||||
/* 设置滚动条宽度 */
|
||||
:deep(.bodyTwo ::-webkit-scrollbar) {
|
||||
width: 3px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
width: 3px !important;
|
||||
height: 6px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user