中间计量申请新增质检关联按钮

src/views/debit-pay/admin/components/middlepay/addModal.vue

@@ -59,11 +59,16 @@
                                         <el-input v-model="baseForm.debitFormId" disabled />
                                     </el-form-item>
                                 </el-col>
-                                <el-col :span="16">
+                                <el-col :span="8">
                                     <el-form-item label="草图文件：">
                                         <hc-form-upload :src="baseForm.pictureList" :h-props="uploadFormProps" :disabled="isView" @upload="formUpload" @change="formUploadChange" />
                                     </el-form-item>
                                 </el-col>
+                                <el-col :span="8">
+                                    <el-button type="warning" class="w-full" style="height: 70%;" @click="associateQual">
+                                        <span>点击关联质保资料</span>
+                                    </el-button>
+                                </el-col>
                                 <el-col :span="24">
                                     <el-form-item label="计算式：">
                                         <el-input v-model="baseForm.calculateFormula" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
@@ -134,6 +139,9 @@
         :options="uploadFileOptions"
         @success="uploadFileSuccess"
     />
+
+    <!-- 关联质检资料 -->
+    <qualityRleation :quality-moadal="qualityMoadal" :cid="cid" :period-id="period_id" @close="closeQual" />
 </template>
 
 <script setup>
@@ -141,6 +149,7 @@ import { nextTick, ref, watch } from 'vue'
 import { getStoreValue } from '~src/utils/storage'
 import { isNumberReg } from '~uti/tools'
 import HcBillBaseModal from './addBillBaseModal.vue'
+import qualityRleation from './qualityRleation.vue'
 import { arrToId, deepClone, getArrValue, getObjValue, getRandom, isNullES } from 'js-fast-way'
 import BigNumber from 'bignumber.js'
 import { getHeader } from 'hc-vue3-ui'
@@ -582,4 +591,13 @@ const addModalClose = () => {
     addTableData.value = []
     emit('close')
 }
+//关联质检资料
+const qualityMoadal = ref(false)
+
+const associateQual = ()=>{
+    qualityMoadal.value = true
+}
+const closeQual = ()=>{
+    qualityMoadal.value = false
+}
 </script>

src/views/debit-pay/admin/components/middlepay/qualityRleation.vue

@@ -0,0 +1,112 @@
+<!--  -->
+<template>
+    <hc-new-dialog v-model="qualityMoadal" is-table title="关联质检资料" widths="1200px" @close="qulModalClose">
+        <div class="relative h-full flex">
+            <div :id="`hc_tree_card_${uuid}`" class="hc_tree_card_border relative">
+                <hc-body scrollbar padding="0px">
+                    <hc-lazy-tree :h-props="treeProps" tree-key="id" :auto-expand-keys="treeAutoExpandKeys" @load="treeLoadNode" />
+                </hc-body>
+            </div>
+            <div :id="`hc_table_card_${uuid}`" class="relative flex-1">
+                <HcTable :column="tableColumn" :datas="tableData" />
+            </div>
+        </div>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { getArrValue, getObjValue, getRandom } from 'js-fast-way'
+
+import unitApi from '~api/project/debit/contract/unit'
+const props = defineProps({
+    qualityMoadal: {
+        type: Boolean,
+        default: false,
+    },
+    cid:{
+        type:String,
+        default:'',
+    },
+    periodId:{
+        type:String,
+        default:'',
+    },
+    
+})
+const emit = defineEmits([ 'close'])
+const qualityMoadal = ref(props.qualityMoadal)
+const cid = ref(props.cid)
+const periodId = ref(props.periodId)
+watch(() => [
+    props.qualityMoadal,
+    props.cid,
+    props.qualityMoadal,
+], ([qual, Cid, Pid]) => {
+    qualityMoadal.value = qual
+    cid.value = Cid
+    periodId.value = Pid
+})
+const uuid = getRandom(4)
+
+//监听
+watch(qualityMoadal, (val) => {
+    if (val) {
+        nextTick(() => {
+                setSplitRef()
+            })
+        }
+    
+})
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    try {
+        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    } catch (error) {
+        console.log(error)
+    }
+}
+//数据格式
+const treeProps = {
+    label: 'nodeName',
+    children: 'children',
+    isLeaf: 'notExsitChild',
+}
+const treeAutoExpandKeys = ref([])
+const treeLoadNode = async ({ item, level }, resolve) => {
+    let id = 0
+    if (level !== 0) {
+        const nodeData = getObjValue(item)
+        id = nodeData?.id || ''
+    }
+    //获取数据
+    const { data } = await unitApi.lazyTree({
+        id: id,
+        contractId: cid.value,
+        contractPeriodId: periodId.value,
+    })
+    resolve(getArrValue(data))
+}
+const tableColumn = [
+    { key: 'name', name: '分/子分项部位' },
+    { key: 'text', name: '资料名称' },
+    { key: 'color', name: '资料审核状态' },
+]
+const tableData = ref([
+    { name: '名称1', text: '文本1', color: 'red' },
+    { name: '名称2', text: '文本2', color: 'blue' },
+ 
+])
+const qulModalClose = ()=>{
+    qualityMoadal.value = false
+    emit('close')
+}
+</script>
+
+<style lang='scss' scoped>
+</style>