关联资料按钮增加

src/views/project/debit/contract/components/unit/link-data.vue

@@ -0,0 +1,161 @@
+<!-- 关联资料 -->
+<template>
+    <hc-new-dialog v-model="linkModal" is-table title="关联资料" widths="1200px">
+        <span class="text-orange font-400">温馨提示：允许单对多、多对单、多对多的关联关系。关联后可在对应节点清单列表下查看“关联并继续”可继续进行关联。</span>
+        <div class="title-box">
+            <div class="title-box-left">WBS树</div>
+            <div class="title-box-right">零号清单</div>
+        </div>
+        <div class="link-data-box">
+            <div class="link-data-left">
+                <div class="relative h-full flex">
+                    <div v-loading="treeLoading" class="hc_tree_card_border relative w-full">
+                        <hc-body scrollbar padding="0px">
+                            <hc-lazy-tree tree-key="id" show-checkbox @load="treeLoadNode" @node-tap="nodeElTreeClick" @check="treeNodeCheck" />
+                        </hc-body>
+                    </div>
+                </div>
+            </div>
+            <div class="link-data-icon">
+                <HcIcon type="primary" name="arrow-right-double" style="font-size: 22px;" />
+            </div>
+            <div class="link-data-right">3</div>
+        </div>
+
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button hc-btn style="border: 1px solid var(--el-button-border-color);" @click="linkModal = false">
+                    <HcIcon name="close" />
+                    <span>取消</span>
+                </el-button>
+                <el-button hc-btn type="primary" :loading="sureLoading" @click="sureClick">
+                    <HcIcon name="check" />
+                    <span>关联并退出</span>
+                </el-button>
+                <el-button hc-btn type="primary" :loading="sureLoading" @click="sureClick">
+                    <HcIcon name="check" />
+                    <span>关联并继续</span>
+                </el-button>
+            </div>
+        </template>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getArrValue, getObjValue } from 'js-fast-way'
+import { useAppStore } from '~src/store'
+import { queryWbsTreeData } from '~api/other'
+const props = defineProps({
+    linkModal: {
+        type: Boolean,
+        default: false,
+    },
+  
+})
+const useAppState = useAppStore()
+const contractId = ref(useAppState.getContractId)
+const contractInfo = ref(useAppState.getContractInfo)
+const { contractType } = contractInfo.value
+const classifyType = ref(contractType === 2 ? '2' : '1')
+
+const linkModal = defineModel('modelValue', {
+    default: false,
+})
+
+
+//监听
+watch(() => [
+props.linkModal,
+], ([link]) => {
+    linkModal.value = link
+}, { immediate: true })
+
+
+const sureLoading = ref(false)
+const sureClick = ()=>{
+    
+}
+
+//wbs树数据
+const treeLoading = ref(false)
+const treeLoadNode = async ({ node, item, level }, resolve) => {
+    let contractIdRelation = '', parentId = '', primaryKeyId = ''
+    if (level !== 0) {
+        const nodeData = getObjValue(item)
+        contractIdRelation = nodeData?.contractIdRelation || ''
+        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
+        primaryKeyId = nodeData?.id || ''
+    }
+    treeLoading.value = true
+    //获取数据
+    const { data } = await queryWbsTreeData({
+        contractId: contractId.value || '',
+        contractIdRelation,
+        primaryKeyId,
+        parentId,
+        classifyType: classifyType.value,
+        tableOwner:classifyType.value,
+        
+    })
+    treeLoading.value = false
+    resolve(getArrValue(data))
+   
+}
+const nodeElTreeClick = ()=>{
+    
+}
+const treeNodeCheck = (_, { checkedKeys }) => {
+    console.log(checkedKeys, 'checkedKeys')
+}
+</script>
+
+<style lang='scss' scoped>
+.title-box{
+    position: relative;
+    display: flex;
+
+    // padding: 40px;
+    font-weight: 400;
+    font-size: 18px;
+    width: 100%;
+    margin-bottom: 10px;
+    margin-top: 10px;
+ 
+    .title-box-left{
+       width: 50%;
+       text-align: center;
+    }
+    .title-box-right{
+       width: 50%;
+       text-align: center;
+    }
+}
+.link-data-box{
+    position: relative;
+    display: flex;
+    height: calc(100% - 45px);
+    align-items: center;
+    // border: 1px solid rgb(187, 187, 187);
+    padding: 0px 40px 40px 40px;
+    .link-data-left{
+        width: 50%;
+        position: relative;
+        height: 100%;
+        background: #ffffff;
+        border: 1px solid #273044;
+    }
+    .link-data-icon{
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0 16px;
+    }
+    .link-data-right{
+        width: 50%;
+        position: relative;
+        height: 100%;
+        background: #ffffff;
+        border: 1px solid #273044;
+    }
+}
+</style>

src/views/project/debit/contract/unit.vue

@@ -3,7 +3,10 @@
         <div :id="`hc_tree_card_${uuid}`">
             <hc-new-card scrollbar>
                 <template #header>
-                    <el-button hc-btn type="primary" :loading="setLoading" @click="setTree">重新设置treeCode</el-button>
+                    <div class="w-full flex justify-between">
+                        <el-button hc-btn type="primary" :loading="setLoading" @click="setTree">重新设置treeCode</el-button>
+                        <el-button hc-btn type="primary" :loading="linkLoading" @click="linkDataClick">关联资料</el-button>
+                    </div>
                 </template>
                 <hc-lazy-tree
                     v-if="ishowTree"
@@ -119,6 +122,9 @@
                 <el-table-column prop="k7" label="备注" />
             </el-table>
         </hc-new-dialog>
+        <!-- 
+        关联资料 -->
+        <linkData v-model="linkModal" />
     </div>
 </template>
 
@@ -129,6 +135,7 @@ import infoTable from './components/unit/info-table.vue'
 import treeForm from './components/unit/tree-form.vue'
 import rowData from './components/unit/row-data.vue'
 import unitApi from '~api/project/debit/contract/unit.js'
+import linkData from './components/unit/link-data.vue'
 import { useAppStore } from '~src/store'
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
 import { delMessageV2 } from '~com/message/index.js'
@@ -136,6 +143,7 @@ import { getDictionary } from '~api/other'
 import BigNumber from 'bignumber.js'
 import { getHeader } from 'hc-vue3-ui'
 
+
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId || '')
 const contractId = ref(useAppState.getContractId || '')
@@ -539,4 +547,11 @@ const leadModalSave = async () => {
 const downLoadExel = ()=>{
    window.open('https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20240109/98addbf48d620030504b2cb03b1c24f5.xls', '_blank')
 }
+
+//关联资料
+const linkLoading = ref(false)
+const linkModal = ref(false)
+const linkDataClick = ()=>{
+    linkModal.value = true
+}
 </script>