[update 拆分] 拖拽

2024-09-05 08:58:30 +08:00
parent fd30188fc8
commit 9cc3624243
6 changed files with 422 additions and 20 deletions
@@ -599,7 +599,16 @@
    }
  }
 }
-
+.tree-search-box {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.tree-search-order {
+  font-size: 18px;
+  margin-left: 8px;
+  cursor: pointer;
+}
 .tree-search {
  margin-bottom: 8px;
 }
@@ -504,6 +504,13 @@ module.exports = {
  docTool: {
    // 文档拆分
    split: {
+      order: 'Reorder',
+      node: 'Node',
+      parentNode: 'Parent Node',
+      checkableNode: 'You need to check the nodes before dragging and sorting',
+      dragCheckable: 'Only drag and drop selected nodes',
+      noDragNode: 'Cannot drag up, down, or inside the selected nodes',
+      noDragTopLevelNode: 'Cannot move to the top level',
      textSearch: 'Text Search',
      translation: 'Translation',
      splitText: 'Split Library File',
@@ -504,6 +504,13 @@ module.exports = {
  docTool: {
    // 文档拆分
    split: {
+      order: '排序',
+      node: '节点',
+      parentNode: '父节点',
+      checkableNode: '需要勾选节点后再拖拽排序',
+      dragCheckable: '只能拖拽勾选的节点',
+      noDragNode: '不能拖拽到已勾选的节点上下或内部',
+      noDragTopLevelNode: '不能移动到最顶级',
      textSearch: '文本搜索',
      translation: '译文',
      splitText: '拆分已入库文本',
@@ -127,10 +127,6 @@ export default {
  }

  .content-div > span {
-    .icon-img {
-      width: @itemSize;
-      height: @itemSize;
-    }
    p {
      width: @itemSize;
    }
@@ -3,7 +3,10 @@
    <div class="page-left-right-layout">
      <!--树部分-->
      <div class="page-left-box">
-        <a-input-search class="tree-search" v-model="searchValue" :placeholder="$t('nodeQuickLookup')" @search="onSearch" />
+        <div class="tree-search-box">
+          <a-input-search v-model="searchValue" :placeholder="$t('nodeQuickLookup')" @search="onSearch" />
+          <a-icon @click="handleBatchOrder" class="tree-search-order" type="ordered-list" />
+        </div>
        <div class="page-tree-box page-tree-box-has-search">
          <a-spin :spinning="treeLoading">
            <a-tree :show-line="true"
@@ -204,6 +207,8 @@
    <split-add-form ref="modalForm" :flag="StandardSource.ENTERPRISE.value" :infoId="infoId" :menuId="menuId" :itemId="itemId" @ok="modalFormOk" />
    <!--查看上传文件-->
    <upload-file ref="uploadFile" :return-url="false" disabled />
+    <!--树节点批量排序-->
+    <split-tree-order-modal ref="splitTreeOrderModal" @ok="nodeAddOk" @close="nodeAddOk"/>
  </internal-detail-page>
 </template>

@@ -234,10 +239,12 @@ import SplitDetailBatchEditDrawer from './modules/SplitDetailBatchEditDrawer.vue
 import { downFile, downloadFile, postAction } from '../../../api/manage'
 import UploadFile from '@comp/UploadFile'
 import { StandardSource } from '@/enums/commonEnums'
+import SplitTreeOrderModal from '@views/documentTool/documentSplit/modules/SplitTreeOrderModal'

 export default {
  name: 'DocumentSplitDetail',
  components: {
+    SplitTreeOrderModal,
    UploadFile,
    InternalDetailPage,
    JTable,
@@ -354,6 +361,10 @@ export default {
    this.loadMenuData()
  },
  methods: {
+    // 批量排序
+    handleBatchOrder () {
+      this.$refs.splitTreeOrderModal.open(this.infoId)
+    },
    // 修改拖拽状态
    changeDraggingStatus (status) {
      this.dragging = status
@@ -363,17 +374,48 @@ export default {
     * @param info
     */
    onDrop (info) {
-      // 拖到节点间隙就不做处理，只能拖到节点上
+      if (info.node.pos.split('-').length === 2 && info.dropToGap) {
+        this.$message.warning(this.$t('docTool.split.noDragTopLevelNode'))
+        return false
+      }
+      // 拖到节点间隙
      if (info.dropToGap) {
+        const dropPos = info.dropPosition
+        const nodePos = Number(info.node.pos.split('-').pop())
+        const params = {}
+        // 拖拽到某个节点下方,就取该节点的序号
+        if (dropPos > nodePos) {
+          params.displaySeq = info.node.dataRef.displaySeq
+        } else {
+          // 拖拽到某个节点之上,就要找到上一个节点的序号，如果没有就传0
+          const preNodeData = this.getPrevNode(this.treeData, info.node.eventKey)
+          params.displaySeq = preNodeData ? preNodeData.displaySeq : 0
+        }
+        params.sourceId = info.dragNode.eventKey
+        // 拖拽到节点的父节点id
+        params.targetId = info.node.dataRef.parentId || (this.getParentNode(this.treeData, info.node.eventKey) || {}).id
+        // console.log('排序参数', params)
+        this.treeNodeSort(params)
        return
      }
+      // 拖拽到节点内部
      // console.log('拖拽全部参数', info)
      console.log('拖拽的节点', info.dragNode.eventKey, info.dragNode.dataRef.name, info.dragNode.dataRef.itemName)
      console.log('拖拽到节点', info.node.eventKey, info.node.dataRef.name, info.node.dataRef.itemName)
      const sourceId = info.dragNode.eventKey
      const targetId = info.node.eventKey
+      // 序号，拖拽到节点里面，就把序号设置成最后一个节点的序号
+      let displaySeq = 0
+      const parentNodeData = this.getParentNode(this.treeData, info.node.eventKey)
+      if (parentNodeData && parentNodeData.children && parentNodeData.children.length) {
+        displaySeq = parentNodeData.children[parentNodeData.children.length - 1].displaySeq
+      }
+      this.treeNodeSort({ sourceId, targetId, displaySeq })
+    },
+    // 发请求
+    treeNodeSort (params) {
      this.loading = true
-      dragClauseTreeNode({ targetId, sourceId }).then(res => {
+      dragClauseTreeNode(params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.onClearSelected()
@@ -386,6 +428,74 @@ export default {
        this.loading = false
      })
    },
+    // 获取某个节点的父级节点
+    getParentNode (treeData, key) {
+      let foundParent = null
+      function traverse (node) {
+        if (node.children && node.children.length) {
+          for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i]
+            if (child.id === key) {
+              // 找到了目标节点的父节点
+              foundParent = node
+              return true // 停止递归
+            } else if (traverse(child)) {
+              // 如果子节点中找到了，也停止递归
+              return true
+            }
+          }
+        }
+        return false
+      }
+      // 从树的根节点开始遍历
+      treeData.forEach(root => traverse(root))
+      return foundParent
+    },
+    // 获取某个节点的上一个同级节点
+    getPrevNode (treeData, key) {
+      // 用于保存当前遍历路径上的节点
+      const path = []
+      // 用于保存目标节点的父节点
+      let parent = null
+      // 用于保存目标节点在父节点children数组中的索引
+      let targetIndex = -1
+      function traverse (node, path) {
+        // 将当前节点添加到路径中
+        path.push(node)
+        // 如果找到了目标节点，记录其父节点及索引
+        if (node.id === key) {
+          parent = path[path.length - 2]
+          if (parent) {
+            targetIndex = parent.children.findIndex(child => child.id === key)
+          }
+          return true // 结束递归
+        }
+        // 遍历子节点
+        if (node.children && node.children.length > 0) {
+          for (const child of node.children) {
+            if (traverse(child, path)) {
+              return true
+            }
+          }
+        }
+        // 移除路径中的当前节点
+        path.pop()
+      }
+      // 开始遍历
+      for (const root of treeData) {
+        if (traverse(root, path)) {
+          break
+        }
+      }
+      // 检查是否找到了目标节点及其父节点
+      if (parent !== null && targetIndex > 0) {
+        // 返回目标节点前一个同级节点
+        return parent.children[targetIndex - 1]
+      } else {
+        // 如果没找到或目标节点是第一个孩子，则返回null
+        return null
+      }
+    },
    // 查看文件
    handleViewFile (_, record) {
      this.$refs.uploadFile.open(record.technical_specification_design_guide)
@@ -746,16 +856,4 @@ export default {
  font-size: 16px;
  margin-right: 10px;
 }
-
-// 不显示拖拽到节点间隙的样式，只能拖拽到节点上
-.draggable-tree {
-  /deep/ li {
-    &.drag-over-gap-top,
-    &.drag-over-gap-bottom {
-      & > span[draggable] {
-        border-color: transparent !important;
-      }
-    }
-  }
-}
 </style>
@@ -0,0 +1,285 @@
+<template>
+  <j-modal
+    :title="$t('docTool.split.order')"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    :maskClosable="false"
+    :footer="null"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel">
+    <a-spin :spinning="confirmLoading">
+      <a-tree :show-line="true"
+              :show-icon="true"
+              style="height: 50vh; overflow-y: auto"
+              checkable
+              :tree-data="treeData"
+              :selected-keys="selectedKeys"
+              :expanded-keys.sync="expandedKeys"
+              checkStrictly
+              v-model="checkTreeKeys"
+              :replaceFields="{key: 'id'}"
+              class="draggable-tree"
+              draggable
+              @dragstart="changeDraggingStatus(true)"
+              @dragend="changeDraggingStatus(false)"
+              @drop="onDrop">
+        <template #title="record">
+          <div class="tree-operate-node">
+            <a-icon class="parent-node-icon"
+                    type="folder"
+                    v-if="record.dataRef.children && record.dataRef.children.length > 0" />
+            <!-- 拖拽中不显示 -->
+            <a-tooltip placement="topLeft" v-if="!dragging">
+              <template #title>
+                {{ record.name }}{{ record.itemName }}
+              </template>
+              <span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
+            </a-tooltip>
+            <span class="tree-node-custom-title" v-else>{{ record.name }} {{ record.itemName }}</span>
+          </div>
+        </template>
+      </a-tree>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+
+import { batchEditClauseTreeNodeSort, dragClauseTreeNode, getClauseTreeData } from '@api/documentToolApi'
+import STreeSelect from '@comp/STreeSelect'
+
+export default {
+  name: 'SplitTreeOrderModal',
+  data () {
+    return {
+      width: 600,
+      visible: false,
+      confirmLoading: false,
+      selectedKeys: [],
+      expandedKeys: [],
+      treeData: [],
+      checkTreeKeys: {}, // 选择的树节点key
+      dragging: false,
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      }
+    }
+  },
+  methods: {
+    // 修改拖拽状态
+    changeDraggingStatus (status) {
+      this.dragging = status
+    },
+    /**
+     * 拖拽到某个节点触发
+     * @param info
+     */
+    onDrop (info) {
+      // 拖到节点间隙
+      if (!this.checkTreeKeys.checked || this.checkTreeKeys.checked.length === 0) {
+        this.$message.warn(this.$t('docTool.split.checkableNode'))
+        return
+      }
+      // 只能拖拽勾选的节点
+      if (!this.checkTreeKeys.checked.includes(info.dragNode.eventKey)) {
+        this.$message.warn(this.$t('docTool.split.dragCheckable'))
+        return
+      }
+      // 不能拖拽到勾选的节点上下或内部
+      if (this.checkTreeKeys.checked.includes(info.node.eventKey)) {
+        this.$message.warn(this.$t('docTool.split.noDragNode'))
+        return
+      }
+      if (info.node.pos.split('-').length === 2 && info.dropToGap) {
+        this.$message.warning(this.$t('docTool.split.noDragTopLevelNode'))
+        return false
+      }
+      // console.log('拖拽的节点', info.dragNode.eventKey, info.dragNode.dataRef.name, info.dragNode.dataRef.itemName)
+      // console.log('拖拽到节点', info.node.eventKey, info.node, info.node.dataRef.name, info.node.dataRef.itemName, info.node.pos)
+      // 拖到节点间隙需要传序号，拖拽到节点里面不需要
+      if (info.dropToGap) {
+        const dropPos = info.dropPosition
+        const nodePos = Number(info.node.pos.split('-').pop())
+        const params = {}
+        // 拖拽到某个节点之下,就取该节点的序号
+        if (dropPos > nodePos) {
+          params.displaySeq = info.node.dataRef.displaySeq
+        } else {
+          // 拖拽到某个节点之上,就要找到上一个节点的序号，如果没有就传0
+          const preNodeData = this.getPrevNode(this.treeData, info.node.eventKey)
+          params.displaySeq = preNodeData ? preNodeData.displaySeq : 0
+        }
+        // 复选框勾选的节点
+        params.sourceId = this.checkTreeKeys.checked.join(',')
+        // 拖拽到节点的父节点id
+        params.targetId = info.node.dataRef.parentId || (this.getParentNode(this.treeData, info.node.eventKey) || {}).id
+        this.treeNodeSort(params)
+        return
+      }
+      // 拖拽到节点内部
+      // console.log('拖拽全部参数', info)
+      const sourceId = this.checkTreeKeys.checked.join(',')
+      const targetId = info.node.eventKey
+      // 序号，拖拽到节点里面，就把序号设置成最后一个节点的序号
+      let displaySeq = 0
+      const parentNodeData = this.getParentNode(this.treeData, info.node.eventKey)
+      if (parentNodeData && parentNodeData.children && parentNodeData.children.length) {
+        displaySeq = parentNodeData.children[parentNodeData.children.length - 1].displaySeq
+      }
+      this.treeNodeSort({ sourceId, targetId, displaySeq })
+    },
+    // 发请求
+    treeNodeSort (params) {
+      this.confirmLoading = true
+      dragClauseTreeNode(params).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.loadData()
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    // 获取某个节点的父级节点
+    getParentNode (treeData, key) {
+      let foundParent = null
+      function traverse (node) {
+        if (node.children && node.children.length) {
+          for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i]
+            if (child.id === key) {
+              // 找到了目标节点的父节点
+              foundParent = node
+              return true // 停止递归
+            } else if (traverse(child)) {
+              // 如果子节点中找到了，也停止递归
+              return true
+            }
+          }
+        }
+        return false
+      }
+      // 从树的根节点开始遍历
+      treeData.forEach(root => traverse(root))
+      return foundParent
+    },
+    // 获取某个节点的上一个同级节点
+    getPrevNode (treeData, key) {
+      // 用于保存当前遍历路径上的节点
+      const path = []
+      // 用于保存目标节点的父节点
+      let parent = null
+      // 用于保存目标节点在父节点children数组中的索引
+      let targetIndex = -1
+      function traverse (node, path) {
+        // 将当前节点添加到路径中
+        path.push(node)
+        // 如果找到了目标节点，记录其父节点及索引
+        if (node.id === key) {
+          parent = path[path.length - 2]
+          if (parent) {
+            targetIndex = parent.children.findIndex(child => child.id === key)
+          }
+          return true // 结束递归
+        }
+        // 遍历子节点
+        if (node.children && node.children.length > 0) {
+          for (const child of node.children) {
+            if (traverse(child, path)) {
+              return true
+            }
+          }
+        }
+        // 移除路径中的当前节点
+        path.pop()
+      }
+      // 开始遍历
+      for (const root of treeData) {
+        if (traverse(root, path)) {
+          break
+        }
+      }
+      // 检查是否找到了目标节点及其父节点
+      if (parent !== null && targetIndex > 0) {
+        // 返回目标节点前一个同级节点
+        return parent.children[targetIndex - 1]
+      } else {
+        // 如果没找到或目标节点是第一个孩子，则返回null
+        return null
+      }
+    },
+    open (infoId) {
+      this.model.infoId = infoId
+      this.visible = true
+      this.loadData()
+    },
+    loadData () {
+      this.confirmLoading = true
+      this.checkTreeKeys = {}
+      getClauseTreeData({ infoId: this.model.infoId }).then(res => {
+        if (res.success) {
+          const treeData = res.result || []
+          treeData.forEach(node => this.addTitleToNodes(node))
+          this.treeData = treeData
+          this.expandedKeys = this.treeData.length > 0 ? [this.treeData[0].id] : []
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    addTitleToNodes (node) {
+      // 给当前节点添加title属性
+      node.title = (node.name || '') + ' ' + (node.itemName || '')
+      // 如果当前节点有子节点，则递归处理子节点
+      if (node.children && Array.isArray(node.children)) {
+        node.children.forEach(child => this.addTitleToNodes(child))
+      }
+    },
+    close () {
+      this.$emit('close')
+      this.model = {}
+      this.treeData = []
+      this.visible = false
+    },
+    handleCancel () {
+      this.close()
+    },
+    handleOk () {
+      this.form.validateFields(async (errors, values) => {
+        if (!errors) {
+          const params = Object.assign({}, this.model, values)
+          if (Array.isArray(params.ids)) {
+            params.ids = params.ids.join(',')
+          }
+          this.confirmLoading = true
+          batchEditClauseTreeNodeSort(params).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>