ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD:添加按钮权限

Browse Source
This commit is contained in:
贾同学
2025-08-20 08:51:01 +08:00
parent d761c0449b
commit a2db45cace
3 changed files with 263 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

450
frontend/src/views/home/components/tree.vue
View File

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

26
frontend/src/views/plan/planList/components/childrenPlan.vue
View File

@@ -26,13 +26,31 @@
<ProTable ref="proTable" :columns="columns" :request-api="getTableList" type="selection"> <ProTable ref="proTable" :columns="columns" :request-api="getTableList" type="selection">
<!-- 表格 header 按钮 --> <!-- 表格 header 按钮 -->
<template #tableHeader="scope"> <template #tableHeader="scope">
<el-button type="primary" icon="CirclePlus" @click="addTab('add')" v-if="!isTabPlanFather"> <el-button
v-auth.plan="'add_subplan'"
type="primary"
icon="CirclePlus"
@click="addTab('add')"
v-if="!isTabPlanFather"
>
新增子计划 新增子计划
</el-button> </el-button>
<el-button type="primary" icon="Edit" @click="addTab('edit')" v-if="isTabPlanFather"> <el-button
v-auth.plan="'add_subplan'"
type="primary"
icon="Edit"
@click="addTab('edit')"
v-if="isTabPlanFather"
>
编辑子计划 编辑子计划
</el-button> </el-button>
<el-button type="primary" icon="Download" @click="exportPlan" v-if="isTabPlanFather"> <el-button
type="primary"
v-auth.plan="'export_subplan'"
icon="Download"
@click="exportPlan"
v-if="isTabPlanFather"
>
导出子计划元信息 导出子计划元信息
</el-button> </el-button>
<el-button type="primary" icon="Upload">导入检测结果</el-button> <el-button type="primary" icon="Upload">导入检测结果</el-button>
@@ -48,6 +66,7 @@
批量移除 批量移除
</el-button> </el-button>
<el-dropdown <el-dropdown
v-auth.plan="'add_subplan'"
v-if="planFormContent && planFormContent?.children.length > 0" v-if="planFormContent && planFormContent?.children.length > 0"
trigger="hover" trigger="hover"
placement="right-start" placement="right-start"
@@ -75,6 +94,7 @@
</template> </template>
</el-dropdown> </el-dropdown>
<el-dropdown <el-dropdown
v-auth.plan="'add_subplan'"
v-if="planFormContent && planFormContent?.children.length > 0" v-if="planFormContent && planFormContent?.children.length > 0"
trigger="hover" trigger="hover"
placement="right-start" placement="right-start"

13
frontend/src/views/plan/planList/index.vue
View File

@@ -32,7 +32,7 @@
</el-button> --> </el-button> -->
<el-button <el-button
type="primary" type="primary"
v-auth.plan="'import'" v-auth.plan="'import_subplan'"
icon="Upload" icon="Upload"
@click="importSubClick" @click="importSubClick"
v-if="modeStore.currentMode === '比对式'" v-if="modeStore.currentMode === '比对式'"
@@ -82,9 +82,20 @@
:icon="List" :icon="List"
@click="openChildrenPlan(scope.row)" @click="openChildrenPlan(scope.row)"
v-if="modeStore.currentMode == '比对式' && scope.row.fatherPlanId == 0" v-if="modeStore.currentMode == '比对式' && scope.row.fatherPlanId == 0"
v-auth.plan="'add_subplan'"
> >
子计划 子计划
</el-button> </el-button>
<el-button
type="primary"
link
icon="View"
@click="openChildrenPlan(scope.row)"
v-if="modeStore.currentMode == '比对式' && scope.row.fatherPlanId == 0"
v-auth.plan="'import_subplan'"
>
查看
</el-button>
<!-- <el-button type='primary' link :icon='List' @click='showDeviceOpen(scope.row)'>设备绑定</el-button> --> <!-- <el-button type='primary' link :icon='List' @click='showDeviceOpen(scope.row)'>设备绑定</el-button> -->
<el-button <el-button
type="primary" type="primary"