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

<template>
    <hc-new-card>
        <template #header>
            <hc-new-switch :datas="tabTab" :keys="tabKey" :round="false" @change="tabChange" />
            <div class="hc-flex ml-6">
                <span class="text-gray-5">超计台账：</span>
                <el-switch v-model="searchForm.key1" inline-prompt active-text="是" inactive-text="否" size="large" />
            </div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary" @click="periodModalClick">
                <HcIcon name="edit" />
                <span>选择计量周期</span>
            </el-button>
            <el-button hc-btn type="primary" @click="exportModalClick">
                <HcIcon name="download" />
                <span>导出</span>
            </el-button>
        </template>
        <div class="hc-table-ref-box no-border">
            <el-table
                class="w-full"
                :data="tableData"
                row-key="id"
                height="100%"
                lazy highlight-current-row border
                :load="tableLoad"
                :tree-props="treeProps"
            >
                <el-table-column prop="key1" label="清单编号" fixed="left" width="140" />
                <el-table-column prop="key2" label="清单名称" fixed="left" width="200" />
                <el-table-column prop="key3" label="清单单位" fixed="left" width="100" />
                <el-table-column prop="key4" label="中标单价(元)" width="120" />
                <el-table-column prop="key4" label="清单单价(元)" width="120" />
                <el-table-column prop="key4" label="变更后单价(元)" width="130" />
                <el-table-column prop="key4" label="合同数量" width="120" />
                <el-table-column prop="key4" label="分解核实量" width="120" />
                <el-table-column prop="key4" label="变更增减数量" width="120" />
                <el-table-column prop="key4" label="变更后数量" width="120" />
                <el-table-column prop="key4" label="合同金额(元)" width="120" />
                <el-table-column prop="key4" label="核实增减(元)" width="120" />
                <el-table-column prop="key4" label="变更增减金额(元)" width="140" />
                <el-table-column prop="key4" label="变更后金额(元)" width="130" />
                <el-table-column label="累计计量" align="center">
                    <el-table-column prop="state" label="数量" width="120" />
                    <el-table-column prop="city" label="金额(元)" width="120" />
                    <el-table-column prop="address" label="支付比例" width="120" />
                </el-table-column>
                <el-table-column label="剩余工程" align="center">
                    <el-table-column prop="state" label="数量" width="120" />
                    <el-table-column prop="city" label="金额(元)" width="120" />
                </el-table-column>
                <el-table-column label="第1期" align="center">
                    <el-table-column prop="state" label="数量" width="120" />
                    <el-table-column prop="city" label="金额(元)" width="120" />
                </el-table-column>
                <el-table-column label="第2期" align="center">
                    <el-table-column prop="state" label="数量" width="120" />
                    <el-table-column prop="city" label="金额(元)" width="120" />
                </el-table-column>
                <el-table-column label="第3期" align="center">
                    <el-table-column prop="state" label="数量" width="120" />
                    <el-table-column prop="city" label="金额(元)" width="120" />
                </el-table-column>
            </el-table>
        </div>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>

        <!-- 选择计量周期 -->
        <HcPeriodModal v-model="periodModalShow" />
        <!-- 选择计量周期 -->
        <HcExportModal v-model="exportModalShow" />
    </hc-new-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import HcPeriodModal from './components/debit/periodModal.vue'
import HcExportModal from './components/debit/exportModal.vue'

defineOptions({
    name: 'DebitPayLedgersDebit',
})

//渲染完成
onMounted(() => {

})

//类型tab数据和相关处理
const tabKey = ref('key1')
const tabTab = ref([
    { key: 'key1', name: '按清单显示' },
    { key: 'key2', name: '按分项工程' },
])

const tabChange = ({ key }) => {
    tabKey.value = key
}

//搜索表单
const searchForm = ref({
    current: 1, size: 10, total: 0,
})

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
}

//表格数据
const treeProps = ref({
    children: 'children',
    hasChildren: 'hasChildren',
})

const tableData = ref([
    {
        id: 1,
        key1: '2016',
        key2: '名称名称名称',
        key3: '总额',
        hasChildren: true,
    },
])
const tableLoad = (row, treeNode, resolve) => {
    resolve([
        {
            id: 11,
            key1: '2017',
            key2: '名称名称名称',
            key3: '总额',
        },
        {
            id: 12,
            key1: '2018',
            key2: '名称名称名称',
            key3: '总额',
        },
    ])
}

//选择计量周期
const periodModalShow = ref(false)
const periodModalClick = () => {
    periodModalShow.value = true
}

//导出
const exportModalShow = ref(false)
const exportModalClick = () => {
    exportModalShow.value = true
}
</script>

<style scoped lang="scss">

</style>