|
|
@@ -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" is-new />
|
|
|
+ </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>
|
