计量支付台账

src/views/debit-pay/ledgers/components/debit/exportModal.vue

@@ -0,0 +1,85 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="800px" :show="isShow" title="合同工程清单选择" @save="modalSave" @close="modalClose">
+        <el-scrollbar>
+            <el-radio-group v-model="radioValue">
+                <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode">
+                    <template #default="{ data, level }">
+                        <el-radio :label="data.name" size="large">{{ data.name }}</el-radio>
+                    </template>
+                </hc-lazy-tree>
+            </el-radio-group>
+        </el-scrollbar>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听
+watch(() => [
+    props.ids,
+], ([ids]) => {
+    console.log('ids', ids)
+}, { immediate: true })
+
+//监听
+watch(isShow, (val) => {
+    if (val) {
+        console.log('处理数据')
+    }
+})
+
+const radioValue = ref('')
+
+//数据格式
+const treeProps = {
+    label: 'name',
+    children: 'children',
+    isLeaf: 'leaf',
+}
+
+//懒加载的数据
+const treeLoadNode = ({ level }, resolve) => {
+    if (level === 0) {
+        return resolve([{ name: 'region' }])
+    }
+    if (level > 3) {
+        return resolve([])
+    }
+    setTimeout(() => {
+        resolve([
+            { name: 'leaf', leaf: true },
+            { name: 'zone' },
+        ])
+    }, 500)
+}
+
+const modalSave = () => {
+    emit('finish')
+    modalClose()
+}
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/debit-pay/ledgers/components/debit/periodModal.vue

@@ -0,0 +1,66 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="800px" :show="isShow" title="计量期选择" @save="modalSave" @close="modalClose">
+        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听
+watch(() => [
+    props.ids,
+], ([ids]) => {
+    console.log('ids', ids)
+}, { immediate: true })
+
+//监听
+watch(isShow, (val) => {
+    if (val) {
+        console.log('处理数据')
+    }
+})
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'key1', name: '计量期' },
+    { key: 'key2', name: '开始日期' },
+    { key: 'key3', name: '结束日期' },
+]
+const tableData = ref([
+    { key1: '1111' },
+])
+
+//表格选择
+const tableCheckChange = (checks) => {
+    console.log(checks)
+}
+const modalSave = () => {
+    emit('finish')
+    modalClose()
+}
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,13 +1,159 @@
 <template>
-    <hc-card title="计量支付台账">
-        开发中...
+    <hc-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-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">