工程结算

src/views/debit-pay/admin/apply.vue

@@ -12,11 +12,11 @@
                 <HcIcon name="add" />
                 <span>新增</span>
             </el-button>
-            <el-button hc-btn type="primary" @click="reportClick">
+            <el-button hc-btn type="warning" @click="reportClick">
                 <HcIcon name="send-plane-2" />
                 <span>上报</span>
             </el-button>
-            <el-button hc-btn @click="detailsModalClick">
+            <el-button hc-btn type="success" @click="detailsModalClick">
                 <HcIcon name="file-list" />
                 <span>清单明细</span>
             </el-button>
@@ -33,11 +33,11 @@
                         <div class="font-400 text-orange">收方总金额：0元</div>
                     </template>
                     <template #extra>
-                        <el-button hc-btn>
+                        <el-button hc-btn color="#626aef">
                             <HcIcon name="sort-desc" :line="false" />
                             <span>按部位排序</span>
                         </el-button>
-                        <el-button hc-btn>
+                        <el-button hc-btn color="#626aef">
                             <HcIcon name="sort-desc" :line="false" />
                             <span>按录入时间排序</span>
                         </el-button>

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

@@ -12,15 +12,15 @@
                 <HcIcon name="add" />
                 <span>新增</span>
             </el-button>
-            <el-button hc-btn type="primary" @click="reportClick">
+            <el-button hc-btn type="warning" @click="reportClick">
                 <HcIcon name="send-plane-2" />
                 <span>按期上报</span>
             </el-button>
-            <el-button hc-btn @click="detailsModalClick">
+            <el-button hc-btn type="success" @click="detailsModalClick">
                 <HcIcon name="file-list" />
                 <span>清单明细</span>
             </el-button>
-            <el-button hc-btn>
+            <el-button hc-btn type="success">
                 <HcIcon name="bar-chart-box" />
                 <span>查看报表</span>
             </el-button>
@@ -37,11 +37,11 @@
                         <div class="font-400 text-orange">收方总金额：0元</div>
                     </template>
                     <template #extra>
-                        <el-button hc-btn>
+                        <el-button hc-btn color="#626aef">
                             <HcIcon name="sort-desc" :line="false" />
                             <span>按部位排序</span>
                         </el-button>
-                        <el-button hc-btn>
+                        <el-button hc-btn color="#626aef">
                             <HcIcon name="sort-desc" :line="false" />
                             <span>按录入时间排序</span>
                         </el-button>

src/views/debit-pay/project/certificate.vue

@@ -1,13 +1,82 @@
 <template>
     <hc-card title="结算支付证书">
-        开发中...
+        <template #extra>
+            <el-button hc-btn type="primary" @click="addModalClick">
+                <HcIcon name="add" />
+                <span>新增</span>
+            </el-button>
+        </template>
+        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #action="{ row }">
+                <el-link type="primary">查看报表</el-link>
+                <el-link type="success" @click="rowEditClick(row)">修改</el-link>
+                <el-link type="danger">删除</el-link>
+                <el-link>重新计算</el-link>
+                <el-link type="warning">锁定</el-link>
+            </template>
+        </hc-table>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
+
+        <!-- 中间计量新增 -->
+        <HcAddModal v-model="addModalShow" />
+
+        <!-- 中间计量新增 -->
+        <HcEditModal v-model="editModalShow" />
     </hc-card>
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
+import HcAddModal from './components/certificate/addModal.vue'
+import HcEditModal from './components/certificate/editModal.vue'
+
 defineOptions({
     name: 'DebitPayProjectCertificate',
 })
+
+//渲染完成
+onMounted(() => {
+
+})
+
+//搜索表单
+const searchForm = ref({
+    current: 1, size: 10, total: 0,
+})
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    { key: 'key1', name: '证书编号' },
+    { key: 'key2', name: '核定结算金额' },
+    { key: 'key3', name: '实际结算金额' },
+    { key: 'key4', name: '打印日期' },
+    { key: 'key5', name: '重新计算时间' },
+    { key: 'action', name: '操作', width: 260 },
+])
+const tableData = ref([
+    { key1: '1111' },
+])
+
+//新增
+const addModalShow = ref(false)
+const addModalClick = () => {
+    addModalShow.value = true
+}
+
+//修改
+const editModalShow = ref(false)
+const rowEditClick = (row) => {
+    editModalShow.value = true
+}
 </script>
 
 <style scoped lang="scss">

src/views/debit-pay/project/components/certificate/addModal.vue

@@ -0,0 +1,67 @@
+<template>
+    <hc-dialog is-to-body is-footer-center widths="30rem" :show="isShow" title="新增结算支付证书" @save="addModalSave" @close="addModalClose">
+        <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
+            <el-form-item label="证书编号：" prop="key2">
+                <el-input v-model="formModel.key2" />
+            </el-form-item>
+            <el-form-item label="打印日期：">
+                <div class="form-item-div" />
+            </el-form-item>
+        </el-form>
+    </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 formRef = ref(null)
+const formModel = ref({})
+const formRules = {}
+
+
+const addModalSave = () => {
+    emit('finish')
+    addModalClose()
+}
+
+//关闭弹窗
+const addModalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/debit-pay/project/components/certificate/editModal.vue

@@ -0,0 +1,102 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="isShow" title="修改结算支付证书" @save="addModalSave" @close="addModalClose">
+        <el-scrollbar>
+            <!-- 基础表单 -->
+            <hc-card-item>
+                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="证书编号：">
+                                <el-input v-model="formModel.key2" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="打印日期：">
+                                <el-date-picker v-model="formModel.key5" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </hc-card-item>
+
+            <!-- 表格数据 -->
+            <hc-card-item class="mt-3">
+                <hc-table :is-index="false" :column="tableColumn" :datas="tableData">
+                    <template #key8="{ row }">
+                        <hc-table-input v-model="row.key8" disabled />
+                    </template>
+                </hc-table>
+            </hc-card-item>
+        </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 formRef = ref(null)
+const formModel = ref({})
+const formRules = {}
+
+//表格数据
+const tableColumn = ref([
+    { key: 'key1', name: '支付章号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '合同金额(元)' },
+    { key: 'key4', name: '变更金额(元)' },
+    { key: 'key5', name: '变更后的金额(元)' },
+    { key: 'key6', name: '本期未累计完成(元)' },
+    { key: 'key7', name: '上期未累计完成(元)' },
+    { key: 'key8', name: '本期完成(元)' },
+])
+const tableData = ref([
+    { key1: '1111' },
+])
+
+
+const addModalSave = () => {
+    emit('finish')
+    addModalClose()
+}
+
+//关闭弹窗
+const addModalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/debit-pay/project/components/pay/detailsModal.vue

@@ -0,0 +1,113 @@
+<template>
+    <hc-dialog ui="is-no-footer" is-to-body is-table :footer="false" widths="1200px" :show="isShow" title="计量清单明细" @close="modalClose">
+        <div class="relative h-full">
+            <div id="hc_details_table">
+                <hc-card-item>
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" />
+                    <template #action>
+                        <hc-pages :pages="searchForm" @change="pageChange" />
+                    </template>
+                </hc-card-item>
+            </div>
+            <div id="hc_details_list">
+                <hc-card-item>
+                    <hc-table :column="tableColumn1" :datas="tableData1" />
+                </hc-card-item>
+            </div>
+        </div>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['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) {
+        detailsModalShow()
+    }
+})
+
+const detailsModalShow = () => {
+    nextTick(() => {
+        window.$split(['#hc_details_table', '#hc_details_list'], {
+            direction: 'vertical',
+            sizes: [70, 30],
+            snapOffset: 0,
+            minSize: [170, 500],
+        })
+    })
+}
+
+//搜索表单
+const searchForm = ref({
+    key1: null, current: 1, size: 10, total: 0,
+})
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'key1', name: '清单编号' },
+    { key: 'key2', name: '清单名称' },
+    { key: 'key3', name: '变更后数量' },
+    { key: 'key4', name: '计量数量' },
+    { key: 'key5', name: '单价' },
+    { key: 'key6', name: '完成金额' },
+]
+const tableData = ref([
+    { key1: '1111' },
+])
+
+
+//详细明细
+const tableColumn1 = [
+    { key: 'key1', name: '凭证编号' },
+    { key: 'key2', name: '计量期' },
+    { key: 'key3', name: '工程部位' },
+    { key: 'key4', name: '审核状态' },
+    { key: 'key5', name: '本期计量数量' },
+    { key: 'key6', name: '计量总金额' },
+]
+const tableData1 = ref([
+    { key1: '1111' },
+])
+
+
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,13 +1,150 @@
 <template>
-    <hc-card title="结算支付">
-        开发中...
+    <hc-card>
+        <div class="relative h-full flex">
+            <div id="hc_tree_card">
+                <hc-card-item scrollbar>
+                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
+                </hc-card-item>
+            </div>
+            <div id="hc_table_card" class="flex-1">
+                <hc-card-item>
+                    <template #header>
+                        <div class="font-400 text-orange">本期计量总金额：0元</div>
+                    </template>
+                    <template #extra>
+                        <el-button hc-btn type="primary">
+                            <HcIcon name="24-hours" />
+                            <span>自动生成结算单</span>
+                        </el-button>
+                        <el-button hc-btn type="warning" @click="reportClick">
+                            <HcIcon name="send-plane-2" />
+                            <span>按期上报</span>
+                        </el-button>
+                        <el-button hc-btn type="danger">
+                            <HcIcon name="delete-bin" />
+                            <span>按部位删除</span>
+                        </el-button>
+                        <el-button hc-btn color="#626aef">
+                            <HcIcon name="sort-desc" :line="false" />
+                            <span>按部位排序</span>
+                        </el-button>
+                        <el-button hc-btn color="#626aef">
+                            <HcIcon name="sort-desc" :line="false" />
+                            <span>按录入时间排序</span>
+                        </el-button>
+                        <el-button hc-btn type="success" @click="detailsModalClick">
+                            <HcIcon name="file-list" />
+                            <span>清单明细</span>
+                        </el-button>
+                        <el-button hc-btn type="success">
+                            <HcIcon name="file-chart" />
+                            <span>查看报表</span>
+                        </el-button>
+                    </template>
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading">
+                        <template #action="{ row }">
+                            <el-link type="success">修改</el-link>
+                            <el-link type="danger">删除</el-link>
+                        </template>
+                    </hc-table>
+                    <template #action>
+                        <hc-pages :pages="searchForm" @change="pageChange" />
+                    </template>
+                </hc-card-item>
+            </div>
+        </div>
+        <!-- 上报弹窗 -->
+        <hc-report-dialog v-model="isReport" />
+        <!-- 清单明细 -->
+        <HcDetailsModal v-model="detailsModalShow" />
     </hc-card>
 </template>
 
 <script setup>
+import { nextTick, onMounted, ref } from 'vue'
+import HcDetailsModal from './components/pay/detailsModal.vue'
+
 defineOptions({
     name: 'DebitPayProjectPay',
 })
+
+//渲染完成
+onMounted(() => {
+    setSplitRef()
+})
+
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_card', '#hc_table_card'], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    })
+}
+
+//搜索表单
+const searchForm = ref({
+    key1: null, current: 1, size: 10, total: 0,
+})
+
+//数据格式
+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 pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    { key: 'key1', name: '标签' },
+    { key: 'key2', name: '凭证编号' },
+    { key: 'key3', name: '工程划分部位' },
+    { key: 'key4', name: '结算金额' },
+    { key: 'key5', name: '结算总额' },
+    { key: 'key6', name: '审核状态' },
+    { key: 'action', name: '操作', width: 100 },
+])
+const tableData = ref([
+    { key1: '1111' },
+])
+
+//是否上报
+const isReport = ref(false)
+const reportClick = () => {
+    isReport.value = true
+}
+
+//收方清单明细
+const detailsModalShow = ref(false)
+const detailsModalClick = () => {
+    detailsModalShow.value = true
+}
 </script>
 
 <style scoped lang="scss">