项目

src/views/project/detail/detail.vue

@@ -3,6 +3,7 @@
         <div class="hc-contract-info-drawer h-full">
             <hc-tab-card :scrollbar="tabsKey === '1'" :tabs="tabsData" :tab-key="tabsKey" is-action-btn @change="tabsChange">
                 <HcInfo v-if="tabsKey === '1'" :data="dataInfo" @close="drawerClose" @next="dataInfoNext" />
+                <HcWbs v-if="tabsKey === '2'" :data="dataInfo" @close="drawerClose" @next="dataWbsNext" />
             </hc-tab-card>
         </div>
     </hc-drawer>
@@ -12,6 +13,7 @@
 import { ref, watch } from 'vue'
 import { getObjValue, isNullES } from 'js-fast-way'
 import HcInfo from './info.vue'
+import HcWbs from './wbs.vue'
 
 const props = defineProps({
     data: {
@@ -72,6 +74,11 @@ const dataInfoNext = async (data) => {
     }
 }
 
+//下一步
+const dataWbsNext = async (data) => {
+    console.log(data)
+}
+
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false

src/views/project/detail/style/wbs.scss

@@ -0,0 +1,52 @@
+.hc-contract-info-wbs {
+    padding: 0 12px;
+    .wbs-template-body {
+        position: relative;
+        height: calc(100% - 55px);
+        display: flex;
+        .hc-card-item-box {
+            background: white !important;
+            border: 1px solid #eee;
+            border-radius: 5px;
+            padding: 0;
+            .hc-card-item-header {
+                height: 40px;
+                padding: 0 12px;
+                margin-bottom: 0;
+                background: #f9f9f9;
+                border-radius: 4px 4px 0 0;
+                border-bottom: 1px solid #eee;
+            }
+            .hc-card-item-body {
+                padding: 12px;
+                height: calc(100% - 40px) !important;
+            }
+        }
+        .left {
+            position: relative;
+            flex: 1;
+        }
+        .btn-action {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 14px;
+            .el-button[hc-btn] {
+                border-radius: 3px
+            }
+        }
+        .right {
+            position: relative;
+            flex: 1;
+        }
+    }
+    .action {
+        position: fixed;
+        bottom: 14px;
+        width: calc(100% - 260px);
+        text-align: center;
+        background: #fff;
+        padding: 14px 0;
+    }
+}

src/views/project/detail/wbs.vue

@@ -0,0 +1,243 @@
+<template>
+    <div class="hc-contract-info-wbs relative h-full">
+        <div class="wbs-template-body">
+            <div v-loading="leftLoading" class="left">
+                <hc-card-item scrollbar :title="`${leftNum}项`">
+                    <el-tree
+                        ref="leftTreeRef" :data="leftTreeData" show-checkbox node-key="id" :props="treeProps"
+                        highlight-current :expand-on-click-node="false" @node-expand="nodeLeftTreeExpand"
+                        @check-change="checkLeftTreeChange"
+                    />
+                </hc-card-item>
+            </div>
+            <div class="btn-action">
+                <div class="relative">
+                    <div class="relative">
+                        <el-button hc-btn :type="leftNum <= 0 ? '' : 'primary'" :disabled="leftNum <= 0" @click="addTreeClick">
+                            <i class="i-ri-arrow-right-line" />
+                        </el-button>
+                    </div>
+                    <div class="relative mt-14px">
+                        <el-button hc-btn :type="rightNum <= 0 ? '' : 'primary'" :disabled="rightNum <= 0" @click="delTreeClick">
+                            <i class="i-ri-arrow-left-line" />
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+            <div v-loading="rightLoading" class="right">
+                <hc-card-item scrollbar :title="`${rightNum}项`">
+                    <el-tree
+                        ref="rightTreeRef" :data="rightTreeData" show-checkbox node-key="id" :props="treeProps"
+                        highlight-current :expand-on-click-node="false" :default-expanded-keys="rightExpands"
+                        @check-change="checkRightTreeChange"
+                    />
+                </hc-card-item>
+            </div>
+        </div>
+        <div class="action">
+            <el-button hc-btn class="mr-4" :loading="submitLoading" @click="saveAndExit">保存并退出</el-button>
+            <el-button hc-btn type="primary" :loading="submitLoading" @click="saveAndNextStep">保存并进入下一步</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import mainApi from '~api/project/project'
+import treeApi from '~api/wbs/tree'
+
+//缓存
+const store = useAppStore()
+
+//双向绑定
+const modelData = defineModel('modelValue', {
+    default: {},
+})
+
+//监听数据
+const formModel = ref({})
+watch(() => modelData.value, (data) => {
+    formModel.value = data
+}, { immediate: true, deep: true })
+
+//监听
+const userInfo = ref(store.getUserInfo)
+watch(() => store.getUserInfo, (info) => {
+    userInfo.value = info
+}, { immediate: true, deep: true })
+
+//渲染完成
+onMounted(() => {
+    getWbsTreeList()
+})
+
+//树配置
+const leftTreeRef = ref(null)
+const rightTreeRef = ref(null)
+const treeProps = {
+    children: 'children',
+    label: 'title',
+}
+
+//获取WBS树列表
+const wbsId = ref('')
+const wbsTreeList = ref([])
+const isLoading = ref(false)
+const getWbsTreeList = async () => {
+
+}
+
+//左边树
+const leftLoading = ref(false)
+const leftTreeData = ref([])
+
+
+//获取右边数据
+const rightLoading = ref(false)
+const rightTreeData = ref([])
+const getRightTreeApi = async () => {
+
+}
+
+//左边树被展开
+const rightExpands = ref([])
+const nodeLeftTreeExpand = (data) => {
+    rightExpands.value = rightExpands.value.concat([data.id])
+}
+
+//左边树复选框被点击
+const leftNum = ref(0)
+const checkLeftTreeChange = () => {
+    const e = leftTreeRef.value
+    let checkNum = e.getCheckedKeys().length
+    let halfNum = e.getHalfCheckedKeys().length
+    leftNum.value = checkNum + halfNum
+}
+
+//右边树复选框被点击
+const rightNum = ref(0)
+const checkRightTreeChange = () => {
+    const e = rightTreeRef.value
+    let checkNum = e.getCheckedKeys().length
+    let halfNum = e.getHalfCheckedKeys().length
+    rightNum.value = checkNum + halfNum
+}
+
+//左边树新增到右边
+const addTreeClick = () => {
+    const left = leftTreeRef.value, right = rightTreeRef.value
+    if (rightTreeData.value.length < 1) {
+        //直接把左边勾选的树复制到右侧
+        let allTree = deepClone(leftTreeData.value)
+        const halfKeys = right.getHalfCheckedKeys()
+        const keys = right.getCheckedKeys().concat(halfKeys)
+        getRightTree(allTree, keys)
+        rightTreeData.value = allTree
+    } else {
+        //只增加右侧树没有的节点，不会覆盖右侧树多余的节点
+        let checkNodes = left.getCheckedNodes(false, true)
+
+        let rIdMap = new Map()
+        checkNodes.forEach((data) => {
+            rIdMap.set(data.id, data)
+        })
+
+        let lIdSet = new Set()
+        getRightTreeData(lIdSet, rightTreeData.value)
+
+        //在右侧id减去左侧有的id，剩下的就是新增的id
+        lIdSet.forEach((id) => {
+            rIdMap.delete(id)
+        })
+
+        let addMap = new Map()
+        rIdMap.forEach((data) => {
+            if (data.parentId !== '0' && data.parentId !== 0) {
+                //在左侧树能找到父节点的，新增
+                let lNode = right.getNode(data.parentId)
+                if (lNode) addMap.set(data, lNode.data.id)
+            }
+        })
+
+        //把半选和选中的数组key合并
+        const halfKeys = left.getHalfCheckedKeys()
+        const keys = left.getCheckedKeys().concat(halfKeys)
+        const myArray = Array.from(addMap.keys())
+        let myright = deepClone(myArray)
+        getRightTree(myright, keys)
+        myright.forEach((data) => {
+            right.append(data, data.parentId)
+        })
+    }
+}
+
+//获取右边树
+const getRightTree = (arr, keys) => {
+    //对比所有的node和选中的key
+    for (let i = arr.length - 1; i >= 0; i--) {
+        let isIn = false
+        for (let j = keys.length - 1; j >= 0; j--) {
+            if (keys[j] === arr[i].id) {
+                isIn = true
+                //已经匹配到的key移除，节省性能
+                keys.splice(j, 1)
+                break
+            }
+        }
+        if (isIn) {
+            //包含在选中的节点，如果有childer继续递归判断
+            if (arr[i].children && arr[i].children.length) {
+                getRightTree(arr[i].children, keys)
+            }
+        } else {
+            //不包含在选中key的node删除
+            arr.splice(i, 1)
+        }
+    }
+}
+
+const getRightTreeData = (set, arr) => {
+    arr.forEach((data) => {
+        set.add(data.id)
+        if (data.children && data.children.length) {
+            getRightTreeData(set, data.children)
+        }
+    })
+}
+
+//右边树移除
+const delTreeClick = () => {
+    const left = leftTreeRef.value, right = rightTreeRef.value
+    let delNodes = right.getCheckedNodes()
+    //只把选中的节点移除
+    delNodes.forEach((node) => {
+        right.remove(node)
+        left.setChecked(node.id, false)
+    })
+    checkLeftTreeChange()
+    checkRightTreeChange()
+}
+
+
+//保存并退出
+const saveAndExit = async () => {
+    /*const isRes = await saveDataApi()
+    if (!isRes) return
+    emit('close', dataInfo.value)*/
+}
+
+//保存并进入下一步
+const saveAndNextStep = async () => {
+    /*const isRes = await saveDataApi()
+    if (!isRes) return
+    emit('next', dataInfo.value)*/
+}
+
+const submitLoading = ref(false)
+</script>
+
+<style lang="scss">
+@import './style/wbs';
+</style>