资料关联台账页面增加

src/views/debit-pay/ledgers/datarelate.vue

@@ -1,11 +1,171 @@
-<!--  -->
 <template>
-    <div>资料关联台账</div>
+    <div class="relative h-full flex">
+        <div :id="`hc_tree_card_${uuid}`">
+            <hc-new-card scrollbar>
+                <template #header>
+                    <el-select v-model="searchForm.contractPeriodId" placeholder="选择计量期" filterable clearable block @change="searchKey1Click">
+                        <el-option v-for="item in key1Data" :key="item.id" :label="item.periodNumber" :value="item.id" clearable />
+                    </el-select>
+                </template>
+                <hc-lazy-tree :h-props="treeProps" tree-key="id" :auto-expand-keys="TreeAutoExpandKeys" @load="treeLoadNode" @node-tap="treeNodeTap" />
+            </hc-new-card>
+        </div>
+        <div :id="`hc_table_card_${uuid}`" class="flex-1">
+            <hc-new-card>
+                <hc-table
+                    :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new 
+                    :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+                >
+                    <template #key3="{ row }">
+                        <el-tag v-if="row.key3" type="success">是</el-tag>
+                        <el-tag v-else type="danger">否</el-tag>
+                    </template>
+                    <template #action="{ row }">
+                        <el-button type="primary" @click="relateData(row)">关联质保资料</el-button>
+                    </template>
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-new-card>
+        </div>
+    </div>
+    <!-- 关联质检资料 -->
+    <qualityRleation :quality-moadal="qualityMoadal" :cid="contractId" :period-id="searchForm.contractPeriodId" />
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { nextTick, onActivated, onMounted, ref } from 'vue'
+import { getStoreValue, setStoreValue } from '~src/utils/storage'
+import { getArrValue, getObjValue, getRandom } from 'js-fast-way'
+import unitApi from '~api/project/debit/contract/unit'
+import mainApi from '~api/debit-pay/admin/middlepay'
+import qualityRleation from '~src/views/debit-pay/admin/components/middlepay/qualityRleation.vue'
+import { useAppStore } from '~src/store'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId || '')
+const contractId = ref(useAppState.getContractId || '')
+const uuid = getRandom(4)
+
+//渲染完成
+onMounted(() => {
+    setSplitRef()
+})
+//激活
+onActivated(async () => {
+    await getKey1Data()
+ 
+})
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    })
+}
+
+
+//搜索表单
+const searchForm = ref({
+    contractPeriodId: null, contractUnitId: null, contractId: contractId.value, type: 1,
+    current: 1, size: 20, total: 0,
+})
+
+//计量期
+const key1Data = ref([])
+const getKey1Data = async ()=>{
+    const { error, code, data } = await mainApi.getAllPeriod({
+        contractId: contractId.value,
+        type: 1,
+    })
+    if (!error && code === 200) {
+        let newArr = getArrValue(data), info = getObjValue(newArr[newArr.length - 1])
+        searchForm.value.contractPeriodId = info.id
+        key1Data.value = newArr
+    } else {
+        key1Data.value = []
+    }
+}
+const searchKey1Click = () => {
+ 
+    searchForm.value.current = 1
+    getTableData()
+ 
+}
+
+
+//数据格式
+const treeProps = {
+    label: 'nodeName',
+    children: 'children',
+    isLeaf: 'notExsitChild',
+}
+const TreeAutoExpandKeys = ref(getStoreValue('middlepay-tree-auto-expand-keys') || [])
+//懒加载的数据
+const treeLoadNode = async ({ item, level }, resolve) => {
+    let id = 0
+    if (level !== 0) {
+        const nodeData = getObjValue(item)
+        id = nodeData?.id || ''
+    }
+    //获取数据
+    const { data } = await unitApi.lazyTree({
+        contractId: contractId.value,
+        id:id,
+        contractPeriodId:searchForm.value.contractPeriodId,
+    })
+    resolve(getArrValue(data))
+}
+const treeNodeTap = ({ data, keys }) => {
+    searchForm.value.current = 1
+    searchForm.value.contractUnitId = data.id
+    TreeAutoExpandKeys.value = keys || []
+    setStoreValue('middlepay-tree-auto-expand-keys', keys)
+    getTableData()
+}
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    { key: 'meterNumber', name: '计量单编号' },
+    { key: 'engineerDivide', name: '工程划分部位' },
+    { key: 'key3', name: '资料是否齐全' },
+    { key: 'meterMoney', name: '计量金额' },
+    { key: 'key5', name: '应扣回金额' },
+    { key: 'businessDate', name: '业务日期' },
+    { key: 'key7', name: '距离扣回金额日期' },
+    { key: 'action', name: '操作', width: 120, align: 'center' },
+])
+const tableData = ref([])
+const getTableData = async () => {
+    tableData.value = []
+    tableLoading.value = true
+    const { data } = await mainApi.getPage({
+        ...searchForm.value,
+        contractId: contractId.value,
+    })
+    tableData.value = getArrValue(data['records'])
+    searchForm.value.total = data.total || 0
+    tableLoading.value = false
+}
+
+//关联质检资料
+const qualityMoadal = ref(false)
+const relateData = ()=>{
+    qualityMoadal.value = true
+}
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style scoped lang="scss">
+
+</style>