|
@@ -1,10 +1,8 @@
|
|
|
<script setup>
|
|
|
-import { computed, reactive, ref, watch } from 'vue'
|
|
|
+import { computed, reactive, ref, useTemplateRef, watch } from 'vue'
|
|
|
import { SearchIcon, Icon } from 'tdesign-icons-vue-next';
|
|
|
import { apiETAChart } from '@/api/etaChart'
|
|
|
import { apiSystemCommon } from '@/api/system'
|
|
|
-import { ElTree } from 'element-plus'
|
|
|
-import 'element-plus/es/components/tree/style/css'
|
|
|
import { useClassify } from '../hooks/useClassify'
|
|
|
import MoveClassify from './MoveClassify.vue'
|
|
|
|
|
@@ -83,8 +81,8 @@ function handleSelectChart(value, context) {
|
|
|
//分类列表
|
|
|
const classifyTreeKeys = {
|
|
|
label: 'ChartClassifyName',
|
|
|
+ value: 'ChartClassifyId',
|
|
|
children: 'Children',
|
|
|
- isLeaf: 'isLeaf'
|
|
|
}
|
|
|
const { classifyActived } = useClassify()//当前选中的分类
|
|
|
const classifyList = ref([])
|
|
@@ -98,45 +96,44 @@ async function getClassify() {
|
|
|
classifyList.value = arr.map(item => {
|
|
|
return {
|
|
|
...item,
|
|
|
- Children: null
|
|
|
+ draggable:item.ChartClassifyId===0?false:true,//未分类不允许拖动
|
|
|
+ Children: true
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
getClassify()
|
|
|
// 懒加载分类
|
|
|
-async function classifyLoad(node, resolve) {
|
|
|
- if (node.level === 0) {
|
|
|
- resolve(classifyList.value)
|
|
|
- } else {
|
|
|
- let nodes = []
|
|
|
- const res = await apiETAChart.classifyList({
|
|
|
- ParentId: node.data.ChartClassifyId,
|
|
|
- SysUserIds: userVal.value?.join(',')
|
|
|
+async function classifyLoad(node) {
|
|
|
+ let nodes = []
|
|
|
+ const res = await apiETAChart.classifyList({
|
|
|
+ ParentId: node.data.ChartClassifyId,
|
|
|
+ SysUserIds: userVal.value?.join(',')
|
|
|
+ })
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ const arr = res.Data.AllNodes || []
|
|
|
+ nodes = arr.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ Children: item.ChartInfoId !== 0 ?false:true,
|
|
|
+ ChartClassifyId: item.ChartInfoId ? item.UniqueCode : item.ChartClassifyId,//如果是指标则将分类id设置为图表id
|
|
|
+ }
|
|
|
})
|
|
|
- if (res.Ret === 200) {
|
|
|
- const arr = res.Data.AllNodes || []
|
|
|
- nodes = arr.map(item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- isLeaf: item.ChartInfoId !== 0 ? true : false,
|
|
|
- ChartClassifyId: item.ChartInfoId ? item.UniqueCode : item.ChartClassifyId,//如果是指标则将分类id设置为图表id
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- resolve(nodes);
|
|
|
}
|
|
|
+ return nodes
|
|
|
}
|
|
|
-function handleClassifyActiveChange(data, node) {
|
|
|
- classifyActived.value = data.ChartClassifyId
|
|
|
- if (data.ChartInfoId) {//选择的是图表
|
|
|
- emits('change', data)
|
|
|
+// 点击分类或者指标
|
|
|
+function handleClassifyActiveChange({node}) {
|
|
|
+ if(classifyActived.value === node.data.ChartClassifyId) return
|
|
|
+ classifyActived.value = node.data.ChartClassifyId
|
|
|
+ if (node.data.ChartInfoId) {//选择的是图表
|
|
|
+ emits('change', node.data)
|
|
|
} else {
|
|
|
emits('filter')
|
|
|
}
|
|
|
}
|
|
|
// 控制分类操作按钮显示
|
|
|
-function showClassifyOpt(node, data) {
|
|
|
+function showClassifyOpt(data) {
|
|
|
return (classifyActived.value === data.ChartClassifyId) && data.ChartClassifyId !== 0 && data.ChartInfoId === 0
|
|
|
}
|
|
|
|
|
@@ -179,26 +176,23 @@ async function handleConfirmClassify() {
|
|
|
|
|
|
|
|
|
}
|
|
|
-// 递归获取父节点
|
|
|
-function getAllParent(data, arr) {
|
|
|
- if (data.level === 0) return
|
|
|
- arr.push({ ChartClassifyName: data.data.ChartClassifyName, ChartClassifyId: data.data.ChartClassifyId })
|
|
|
- getAllParent(data.parent, arr)
|
|
|
- return arr
|
|
|
-}
|
|
|
-function handleClassifyOpt(node, data, type) {
|
|
|
+function handleClassifyOpt(node, type) {
|
|
|
+ const data=node.data
|
|
|
if (type === 'edit') {
|
|
|
classifyEditState.id = data.ChartClassifyId
|
|
|
classifyEditState.name = data.ChartClassifyName
|
|
|
- let parr = getAllParent(node, [])
|
|
|
- parr.shift()
|
|
|
- classifyEditState.parent = parr.reverse()
|
|
|
- classifyEditState.parentId = node.parent.id || 0
|
|
|
+ let parr = node.getParents()
|
|
|
+ classifyEditState.parent =parr.map(item=>{
|
|
|
+ return item.data
|
|
|
+ }).reverse()
|
|
|
+ classifyEditState.parentId = node.getParent()?.value || 0
|
|
|
showEditClassify.value = true
|
|
|
}
|
|
|
if (type === 'add') {
|
|
|
- let parr = getAllParent(node, [])
|
|
|
- classifyEditState.parent = parr.reverse()
|
|
|
+ let parr = node.getPath()
|
|
|
+ classifyEditState.parent =parr.map(item=>{
|
|
|
+ return item.data
|
|
|
+ })
|
|
|
classifyEditState.parentId = data.ChartClassifyId
|
|
|
showEditClassify.value = true
|
|
|
}
|
|
@@ -217,21 +211,7 @@ function handleClassifyOpt(node, data, type) {
|
|
|
|
|
|
|
|
|
const defaultShowNodes = ref([])//当前展开的数据
|
|
|
-function handleNodeExpand(data) {
|
|
|
- // 保存当前展开的节点
|
|
|
- let flag = defaultShowNodes.value.some((item) => item === data.ChartClassifyId);
|
|
|
- if (!flag) { // 不存在则存到数组里
|
|
|
- defaultShowNodes.value.push(data.ChartClassifyId)
|
|
|
- }
|
|
|
-}
|
|
|
-function handleNodeCollapse(data) {
|
|
|
- defaultShowNodes.value.some((item, index) => {
|
|
|
- if (item === data.ChartClassifyId) {
|
|
|
- // 删除关闭节点
|
|
|
- defaultShowNodes.value.length = index
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
+
|
|
|
// 有筛选条件时不允许拖动排序
|
|
|
const canDragSort = computed(() => {
|
|
|
if (userVal.value.length>0) return false
|
|
@@ -241,52 +221,39 @@ function allowDrag({ data }) {
|
|
|
if (data.ChartClassifyId === 0) return false //未分类不允许拖动
|
|
|
return true
|
|
|
}
|
|
|
-function allowDrop(draggingNode, dropNode, type) {
|
|
|
+// 判断节点是否可以执行 drop 操作 dropPosition -1放在dropNode前面 0里面 1后面
|
|
|
+function allowDrop({dragNode, dropNode, dropPosition}) {
|
|
|
let canDrop = false
|
|
|
// 如果拖动的是指标
|
|
|
- if (draggingNode.data.ChartInfoId) {
|
|
|
- if (!(dropNode.level === 1 && type !== 'inner')) {
|
|
|
+ if (dragNode.data.ChartInfoId) {
|
|
|
+ if (!(dropNode.getLevel() === 0 && dropPosition !== 0)) {
|
|
|
canDrop = true
|
|
|
}
|
|
|
} else {//拖动的是目录
|
|
|
- // console.log(dropNode.level,draggingNode.level);
|
|
|
+ // console.log(dropNode.level,dragNode.level);
|
|
|
//目录层级不能改变
|
|
|
- if ((dropNode.level + 1 == draggingNode.level && type === 'inner' && !dropNode.data.ChartInfoId) || (dropNode.level === draggingNode.level && type !== 'inner')) {
|
|
|
+ if ((dropNode.getLevel() + 1 == dragNode.getLevel() && dropPosition === 0 && !dropNode.data.ChartInfoId) || (dropNode.getLevel() === dragNode.getLevel() && dropPosition !== 0)) {
|
|
|
canDrop = true
|
|
|
}
|
|
|
}
|
|
|
return canDrop
|
|
|
}
|
|
|
-function handleDropOver(b, a, i, e) {
|
|
|
+function handleDropOver({dragNode,dropNode,dropPosition}) {
|
|
|
// 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
|
|
|
- console.log(b, a, i);
|
|
|
- const isEDB = b.data.ChartInfoId ? true : false
|
|
|
- let list = a.parent.childNodes;
|
|
|
+ // console.log(dragNode,dropNode,dropPosition);
|
|
|
+
|
|
|
+ const isEDB = dragNode.data.ChartInfoId ? true : false
|
|
|
+ let list = dragNode.getSiblings();
|
|
|
let targetIndex = 0, PrevClassifyId = 0, NextClassifyId = 0, ParentClassifyId = 0;
|
|
|
let ClassifyId = 0, ChartInfoId = 0, PrevChartInfoId = 0, NextChartInfoId = 0;
|
|
|
|
|
|
- ClassifyId = isEDB ? 0 : b.data.ChartClassifyId
|
|
|
- ChartInfoId = isEDB ? b.data.ChartInfoId : 0
|
|
|
-
|
|
|
-
|
|
|
- if (i !== 'inner') {
|
|
|
- ParentClassifyId = a.parent.data.ChartClassifyId || 0
|
|
|
- list.forEach((item, index) => {
|
|
|
- if (isEDB) {
|
|
|
- if (item.data.ChartInfoId === b.data.ChartInfoId) {
|
|
|
- targetIndex = index
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.data.ChartClassifyId === b.data.ChartClassifyId) {
|
|
|
- targetIndex = index
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- console.log(targetIndex);
|
|
|
+ ClassifyId = isEDB ? 0 : dragNode.data.ChartClassifyId
|
|
|
+ ChartInfoId = isEDB ? dragNode.data.ChartInfoId : 0
|
|
|
|
|
|
|
|
|
+ if (dropPosition !== 0) {
|
|
|
+ ParentClassifyId = dragNode.getParent()?.value || 0
|
|
|
+ targetIndex=dragNode.getIndex()
|
|
|
if (targetIndex === 0) {
|
|
|
const data = list[targetIndex + 1].data
|
|
|
NextClassifyId = data.ChartInfoId ? 0 : data.ChartClassifyId
|
|
@@ -306,7 +273,7 @@ function handleDropOver(b, a, i, e) {
|
|
|
NextChartInfoId = nData.ChartInfoId ? nData.ChartInfoId : 0
|
|
|
}
|
|
|
} else {
|
|
|
- ParentClassifyId = a.data.ChartClassifyId || 0
|
|
|
+ ParentClassifyId = dropNode.data.ChartClassifyId || 0
|
|
|
}
|
|
|
|
|
|
const params = {
|
|
@@ -318,7 +285,7 @@ function handleDropOver(b, a, i, e) {
|
|
|
PrevChartInfoId,
|
|
|
NextChartInfoId
|
|
|
}
|
|
|
- console.log(params);
|
|
|
+ // console.log(params);
|
|
|
apiETAChart.classifySort(params).then(res => {
|
|
|
if (res.Ret === 200) {
|
|
|
MessagePlugin.success('移动成功!')
|
|
@@ -363,92 +330,48 @@ const showBatchMove = ref(false)
|
|
|
</template>
|
|
|
</t-select>
|
|
|
<div class="classify-list-box">
|
|
|
- <el-tree
|
|
|
- :data="classifyList"
|
|
|
- :props="classifyTreeKeys"
|
|
|
- :current-node-key="classifyActived"
|
|
|
- :default-expanded-keys="defaultShowNodes"
|
|
|
- @node-expand="handleNodeExpand"
|
|
|
- @node-collapse="handleNodeCollapse"
|
|
|
- :draggable="canDragSort"
|
|
|
- check-on-click-node
|
|
|
- :expand-on-click-node="false"
|
|
|
- node-key="ChartClassifyId"
|
|
|
- check-strictly
|
|
|
- highlight-current
|
|
|
- empty-text="暂无目录"
|
|
|
- lazy
|
|
|
- icon="span"
|
|
|
- @current-change="handleClassifyActiveChange"
|
|
|
- :load="classifyLoad"
|
|
|
- :allow-drop="allowDrop"
|
|
|
- :allow-drag="allowDrag"
|
|
|
- @node-drop="handleDropOver"
|
|
|
- >
|
|
|
- <template #default="{ node, data }">
|
|
|
- <div class="classify-item-box">
|
|
|
- <div class="label">{{ node.label }}</div>
|
|
|
- <div class="opt-box" v-show="showClassifyOpt(node, data)">
|
|
|
- <span v-if="canDragSort">
|
|
|
- <t-icon name="drag-move" />
|
|
|
- </span>
|
|
|
- <span v-if="node.level<6" @click.stop="handleClassifyOpt(node, data, 'add')">
|
|
|
- <t-icon name="add" />
|
|
|
- </span>
|
|
|
- <span @click.stop="handleClassifyOpt(node, data, 'edit')">
|
|
|
- <t-icon name="edit-2" />
|
|
|
- </span>
|
|
|
- <span @click.stop="handleClassifyOpt(node, data, 'del')">
|
|
|
- <t-icon name="close" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-tree>
|
|
|
-
|
|
|
- <!-- <t-tree
|
|
|
- v-model:actived="classifyActived"
|
|
|
+ <t-tree
|
|
|
+ v-model:expanded="defaultShowNodes"
|
|
|
+ :defaultExpanded="defaultShowNodes"
|
|
|
+ :actived="[classifyActived]"
|
|
|
:data="classifyList"
|
|
|
activable
|
|
|
transition
|
|
|
- draggable
|
|
|
- :load="classifyLoad"
|
|
|
- value-mode="all"
|
|
|
+ expandParent
|
|
|
+ :draggable="canDragSort"
|
|
|
+ value-mode="onlyLeaf"
|
|
|
:keys="classifyTreeKeys"
|
|
|
check-strictly
|
|
|
- :onDragOver="canDrag"
|
|
|
- @drop="handleClassifyDrop"
|
|
|
+ :allow-drop="allowDrop"
|
|
|
+ :load="classifyLoad"
|
|
|
+ empty="暂无目录"
|
|
|
+ @click="handleClassifyActiveChange"
|
|
|
+ @drop="handleDropOver"
|
|
|
>
|
|
|
<template #icon="{ node }">
|
|
|
+ <!-- 指标无展开收起按钮 -->
|
|
|
<t-icon
|
|
|
- name="add-rectangle"
|
|
|
- v-if="node.getChildren() && !node.expanded"
|
|
|
- />
|
|
|
- <t-icon
|
|
|
- name="minus-rectangle"
|
|
|
- v-if="node.getChildren() && node.expanded"
|
|
|
+ :name="node.expanded?'minus-rectangle':'add-rectangle'"
|
|
|
+ v-if="node.data.ChartInfoId === 0"
|
|
|
/>
|
|
|
</template>
|
|
|
- <template #label="{ node }">
|
|
|
- <div class="classify-item-box">
|
|
|
- <div class="label">{{ node.label }}</div>
|
|
|
- <div class="opt-box" v-show="showClassifyOpt(node)">
|
|
|
- <span>
|
|
|
- <t-icon name="drag-move" />
|
|
|
- </span>
|
|
|
- <span @click.stop="handleClassifyOpt(node,'add')" v-if="node.data.Level<6">
|
|
|
- <t-icon name="add" />
|
|
|
- </span>
|
|
|
- <span @click.stop="handleClassifyOpt(node,'edit')">
|
|
|
- <t-icon name="edit-2" />
|
|
|
- </span>
|
|
|
- <span @click.stop="handleClassifyOpt(node,'del')">
|
|
|
- <t-icon name="close" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <template #operations="{ node }">
|
|
|
+ <div class="opt-box" v-show="showClassifyOpt(node.data)">
|
|
|
+ <span>
|
|
|
+ <t-icon name="drag-move" />
|
|
|
+ </span>
|
|
|
+ <span @click.stop="handleClassifyOpt(node,'add')" v-if="node.getLevel()<5">
|
|
|
+ <t-icon name="add" />
|
|
|
+ </span>
|
|
|
+ <span @click.stop="handleClassifyOpt(node,'edit')">
|
|
|
+ <t-icon name="edit-2" />
|
|
|
+ </span>
|
|
|
+ <span @click.stop="handleClassifyOpt(node,'del')">
|
|
|
+ <t-icon name="close" />
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- </t-tree> -->
|
|
|
+ </t-tree>
|
|
|
</div>
|
|
|
<div class="classify-add-box" @click="showEditClassify = true">
|
|
|
<t-icon name="add-rectangle" />
|
|
@@ -546,6 +469,16 @@ const showBatchMove = ref(false)
|
|
|
padding-top: 10px;
|
|
|
height: calc(100vh - 340px);
|
|
|
overflow-y: auto;
|
|
|
+ :deep(.t-is-active){
|
|
|
+ background-color: var(--td-brand-color-light);
|
|
|
+ }
|
|
|
+ .opt-box {
|
|
|
+ display: flex;
|
|
|
+ gap: 0 5px;
|
|
|
+ .t-icon {
|
|
|
+ color: var(--td-brand-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
.classify-item-box {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
@@ -554,13 +487,7 @@ const showBatchMove = ref(false)
|
|
|
.label {
|
|
|
flex: 1;
|
|
|
}
|
|
|
- .opt-box {
|
|
|
- display: flex;
|
|
|
- gap: 0 5px;
|
|
|
- .t-icon {
|
|
|
- color: var(--td-brand-color);
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.classify-add-box {
|