|
|
@@ -1,8 +1,488 @@
|
|
|
<template>
|
|
|
+ <hc-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="w-40">
|
|
|
+ <el-select v-model="searchForm.key1" filterable block placeholder="选择计量期" @change="searchKey1Click">
|
|
|
+ <el-option v-for="item in key1Data" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button hc-btn type="primary" @click="addModalClick">
|
|
|
+ <HcIcon name="add" />
|
|
|
+ <span>新增</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button hc-btn type="primary" @click="reportClick">
|
|
|
+ <HcIcon name="send-plane-2" />
|
|
|
+ <span>按期上报</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button hc-btn @click="detailsModalClick">
|
|
|
+ <HcIcon name="file-list" />
|
|
|
+ <span>清单明细</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button hc-btn>
|
|
|
+ <HcIcon name="bar-chart-box" />
|
|
|
+ <span>查看报表</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <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>
|
|
|
+ <HcIcon name="sort-desc" :line="false" />
|
|
|
+ <span>按部位排序</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button hc-btn>
|
|
|
+ <HcIcon name="sort-desc" :line="false" />
|
|
|
+ <span>按录入时间排序</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange">
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-button plain size="small" type="success">修改</el-button>
|
|
|
+ <el-button plain size="small" type="danger">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ <template #action>
|
|
|
+ <hc-pages :pages="searchForm" @change="pageChange" />
|
|
|
+ </template>
|
|
|
+ </hc-card-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 中间计量新增 -->
|
|
|
+ <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="addModalShow" title="中间计量新增" @save="addModalSave" @close="addModalClose">
|
|
|
+ <el-scrollbar>
|
|
|
+ <!-- 基础表单 -->
|
|
|
+ <hc-card-item title="基础表单">
|
|
|
+ <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="left" label-width="auto">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="计量期：">
|
|
|
+ <el-input v-model="baseForm.key1" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="计量单编号：">
|
|
|
+ <el-input v-model="baseForm.key2" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="业务日期：">
|
|
|
+ <el-date-picker v-model="baseForm.key3" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item label="工程划分：">
|
|
|
+ <el-input v-model="baseForm.key4" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="部位名称：">
|
|
|
+ <el-input v-model="baseForm.key5" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="交工证书编号：">
|
|
|
+ <el-input v-model="baseForm.key7" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="排序号：">
|
|
|
+ <el-input v-model="baseForm.key8" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="计量金额：">
|
|
|
+ <el-input v-model="baseForm.key6" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item class="nowrap" label="变更令：">
|
|
|
+ <el-input v-model="baseForm.key6" disabled />
|
|
|
+ <el-button type="primary" @click="linkAlterClick">关联变更令</el-button>
|
|
|
+ <el-button type="primary" @click="linkWarrantyClick">关联质保资料</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item class="nowrap" label="收方单：">
|
|
|
+ <el-input v-model="baseForm.key6" disabled />
|
|
|
+ <el-button type="primary" @click="linkDebitClick">关联收方单</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="草图文件：">
|
|
|
+ <hc-form-upload :src="baseForm.key9" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="计算式：">
|
|
|
+ <el-input v-model="baseForm.key10" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </hc-card-item>
|
|
|
+ <!-- 收方清单列表 -->
|
|
|
+ <hc-card-item class="mt-3">
|
|
|
+ <template #header>
|
|
|
+ <span class="mr-3">收方清单列表</span>
|
|
|
+ <span class="font-400 text-orange">温馨提示：超计,累计计量量> 变更后数量，分解清单超计整行红色</span>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button type="primary" text @click="addBillBaseModalClick">
|
|
|
+ <HcIcon name="add" />
|
|
|
+ <span>添加</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <hc-table :column="addTableColumn" :datas="addTableData">
|
|
|
+ <template #key3="{ row }">
|
|
|
+ <hc-table-input v-model="row.key3" disabled />
|
|
|
+ </template>
|
|
|
+ <template #key5="{ row }">
|
|
|
+ <hc-table-input v-model="row.key5" disabled />
|
|
|
+ </template>
|
|
|
+ <template #key6="{ row }">
|
|
|
+ <hc-table-input v-model="row.key6" />
|
|
|
+ </template>
|
|
|
+ <template #key7="{ row }">
|
|
|
+ <hc-table-input v-model="row.key7" />
|
|
|
+ </template>
|
|
|
+ <template #key8="{ row }">
|
|
|
+ <hc-table-input v-model="row.key8" />
|
|
|
+ </template>
|
|
|
+ <template #key9="{ row }">
|
|
|
+ <hc-table-input v-model="row.key9" disabled />
|
|
|
+ </template>
|
|
|
+ <template #key10="{ row }">
|
|
|
+ <hc-table-input v-model="row.key10" disabled />
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-button plain size="small" type="danger">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ </hc-card-item>
|
|
|
+ <!-- 附件列表 -->
|
|
|
+ <hc-card-item class="mt-3" title="附件列表">
|
|
|
+ <template #extra>
|
|
|
+ <span class="font-400 text-orange">可上传 图片(png、jpg、jpeg)、Excel(xls、xlsx)、PDF、Word(doc、docx)文件</span>
|
|
|
+ </template>
|
|
|
+ <el-form :model="baseForm" label-position="left" label-width="auto">
|
|
|
+ <el-form-item label="上传附件">
|
|
|
+ <hc-form-upload type="list" :src="baseForm.key11" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </hc-card-item>
|
|
|
+ </el-scrollbar>
|
|
|
+ </hc-dialog>
|
|
|
+ <!-- 添加分解清单 -->
|
|
|
+ <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="addBillBaseModalShow" title="添加分解清单" @save="addBillBaseModalSave" @close="addBillBaseModalClose">
|
|
|
+ <hc-table :column="tableBillBaseColumn" :datas="tableBillBaseData" :loading="tableBillBaseLoading" is-check @selection-change="tableBillBaseCheckChange" />
|
|
|
+ </hc-dialog>
|
|
|
+ <!-- 清单明细 -->
|
|
|
+ <hc-dialog ui="is-no-footer" is-to-body is-table :footer="false" widths="1200px" :show="detailsModalShow" title="收方清单明细" @close="detailsModalClose">
|
|
|
+ <div class="relative h-full">
|
|
|
+ <div id="hc_details_table">
|
|
|
+ <hc-card-item>
|
|
|
+ <hc-table :column="tableListColumn" :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="tableDetailsColumn" :datas="tableData" />
|
|
|
+ </hc-card-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </hc-dialog>
|
|
|
+ <!-- 关联变更令 -->
|
|
|
+ <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="linkAlterModal" title="关联变更令" @save="linkAlterModalSave" @close="linkAlterModalClose">
|
|
|
+ <hc-table :column="tableAlterColumn" :datas="tableAlterData" :loading="tableAlterLoading" is-check @selection-change="tableAlterCheckChange" />
|
|
|
+ </hc-dialog>
|
|
|
+
|
|
|
+ <!-- 关联收方单 -->
|
|
|
+ <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="linkDebitModal" title="关联收方单" @save="linkDebitModalSave" @close="linkDebitModalClose">
|
|
|
+ <hc-table :column="tableDebitColumn" :datas="tableDebitData" :loading="tableDebitLoading" is-check @selection-change="tableDebitCheckChange" />
|
|
|
+ </hc-dialog>
|
|
|
+ <!-- 上报弹窗 -->
|
|
|
+ <hc-report-dialog v-model="isReport" />
|
|
|
+ <!-- 文件上传组件 -->
|
|
|
+ <hc-upload-file ref="HcUploadFileRef" />
|
|
|
+ </hc-card>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { nextTick, onMounted, ref } from 'vue'
|
|
|
+defineOptions({
|
|
|
+ name: 'DebitPayAdminMiddlepay',
|
|
|
+})
|
|
|
+
|
|
|
+const HcUploadFileRef = ref(null)
|
|
|
+
|
|
|
+//渲染完成
|
|
|
+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 key1Data = ref([
|
|
|
+ { id: 1, name: '计量期1' },
|
|
|
+ { id: 2, name: '计量期2' },
|
|
|
+])
|
|
|
+const searchKey1Click = () => {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//数据格式
|
|
|
+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: 130, align: 'center' },
|
|
|
+])
|
|
|
+const tableData = ref([
|
|
|
+ { key1: '1111' },
|
|
|
+])
|
|
|
+
|
|
|
+//表格选择
|
|
|
+const tableCheckChange = () => {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//中间收方新增
|
|
|
+const addModalShow = ref(false)
|
|
|
+const addModalClick = () => {
|
|
|
+ addModalShow.value = true
|
|
|
+}
|
|
|
+
|
|
|
+//基础表单
|
|
|
+const baseFormRef = ref(null)
|
|
|
+const baseForm = ref({})
|
|
|
+const baseFormRules = {}
|
|
|
+
|
|
|
+//收方清单列表
|
|
|
+const addTableColumn = ref([
|
|
|
+ { key: 'key1', name: '清单编号', width: '120' },
|
|
|
+ { key: 'key2', name: '清单名称', minWidth: '280' },
|
|
|
+ { key: 'key3', name: '单价(元)', width: '100' },
|
|
|
+ { key: 'key4', name: '分解数量', width: '100' },
|
|
|
+ { key: 'key5', name: '变更后数量', width: '100' },
|
|
|
+ { key: 'key6', name: '本期计划收方数量', width: '140' },
|
|
|
+ { key: 'key7', name: '本期实际收方数量', width: '140' },
|
|
|
+ { key: 'key8', name: '含变更数量', width: '100' },
|
|
|
+ { key: 'key9', name: '本期收方金额', width: '120' },
|
|
|
+ { key: 'key10', name: '累计收方量', width: '100' },
|
|
|
+ { key: 'action', name: '操作', fixed: 'right', width: 80, align: 'center' },
|
|
|
+])
|
|
|
+const addTableData = ref([
|
|
|
+ { key1: '101-1-a', key2: '按合同条款规定，提供建筑工程一切险' },
|
|
|
+])
|
|
|
+
|
|
|
+const addModalSave = () => {
|
|
|
+ addModalClose()
|
|
|
+}
|
|
|
+
|
|
|
+//关闭弹窗
|
|
|
+const addModalClose = () => {
|
|
|
+ addModalShow.value = false
|
|
|
+}
|
|
|
+
|
|
|
+//添加分解清单
|
|
|
+const addBillBaseModalShow = ref(false)
|
|
|
+const addBillBaseModalClick = () => {
|
|
|
+ addBillBaseModalShow.value = true
|
|
|
+}
|
|
|
+
|
|
|
+//表格数据
|
|
|
+const tableBillBaseLoading = ref(false)
|
|
|
+const tableBillBaseColumn = [
|
|
|
+ { key: 'key1', name: '清单编号' },
|
|
|
+ { key: 'key2', name: '清单名称' },
|
|
|
+ { key: 'key3', name: '单价(元)' },
|
|
|
+ { key: 'key4', name: '合同数量' },
|
|
|
+ { key: 'key5', name: '合同变更后数量' },
|
|
|
+ { key: 'key6', name: '施工图变更后数量' },
|
|
|
+ { key: 'key7', name: '分解剩余量' },
|
|
|
+]
|
|
|
+const tableBillBaseData = ref([
|
|
|
+ { key1: '1111' },
|
|
|
+])
|
|
|
+
|
|
|
+//表格选择
|
|
|
+const tableBillBaseCheckChange = (checks) => {
|
|
|
+ console.log(checks)
|
|
|
+}
|
|
|
+const addBillBaseModalSave = () => {
|
|
|
+ addBillBaseModalClose()
|
|
|
+}
|
|
|
+const addBillBaseModalClose = () => {
|
|
|
+ addBillBaseModalShow.value = false
|
|
|
+}
|
|
|
+
|
|
|
+//关联变更令
|
|
|
+const linkAlterModal = ref(false)
|
|
|
+const linkAlterClick = () => {
|
|
|
+ linkAlterModal.value = true
|
|
|
+}
|
|
|
+const tableAlterLoading = ref(false)
|
|
|
+const tableAlterColumn = [
|
|
|
+ { key: 'key1', name: '变更令编号' },
|
|
|
+ { key: 'key2', name: '变更令名称' },
|
|
|
+ { key: 'key3', name: '变更令金额(元)' },
|
|
|
+ { key: 'key4', name: '变更令批复日期' },
|
|
|
+]
|
|
|
+const tableAlterData = ref([
|
|
|
+ { key1: '1111' },
|
|
|
+])
|
|
|
+const tableAlterCheckChange = () => {
|
|
|
+
|
|
|
+}
|
|
|
+const linkAlterModalSave = () => {
|
|
|
+ linkAlterModalClose()
|
|
|
+}
|
|
|
+const linkAlterModalClose = () => {
|
|
|
+ linkAlterModal.value = false
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//关联质保资料
|
|
|
+const linkWarrantyModal = ref(false)
|
|
|
+const linkWarrantyClick = () => {
|
|
|
+ linkWarrantyModal.value = true
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//关联收方单
|
|
|
+const linkDebitModal = ref(false)
|
|
|
+const linkDebitClick = () => {
|
|
|
+ linkDebitModal.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const tableDebitLoading = ref(false)
|
|
|
+const tableDebitColumn = [
|
|
|
+ { key: 'key1', name: '收方单编号' },
|
|
|
+ { key: 'key2', name: '收方单部位' },
|
|
|
+ { key: 'key3', name: '收方单金额(元)' },
|
|
|
+ { key: 'key4', name: '收方日期' },
|
|
|
+]
|
|
|
+const tableDebitData = ref([
|
|
|
+ { key1: '1111' },
|
|
|
+])
|
|
|
+const tableDebitCheckChange = () => {
|
|
|
+
|
|
|
+}
|
|
|
+const linkDebitModalSave = () => {
|
|
|
+ linkDebitModalClose()
|
|
|
+}
|
|
|
+const linkDebitModalClose = () => {
|
|
|
+ linkDebitModal.value = false
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//收方清单明细
|
|
|
+const detailsModalShow = ref(false)
|
|
|
+const detailsModalClick = () => {
|
|
|
+ detailsModalShow.value = true
|
|
|
+ nextTick(() => {
|
|
|
+ window.$split(['#hc_details_table', '#hc_details_list'], {
|
|
|
+ direction: 'vertical',
|
|
|
+ sizes: [70, 30],
|
|
|
+ snapOffset: 0,
|
|
|
+ minSize: [170, 500],
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const tableListColumn = [
|
|
|
+ { key: 'key1', name: '清单编号' },
|
|
|
+ { key: 'key2', name: '清单名称' },
|
|
|
+ { key: 'key3', name: '变更后数量' },
|
|
|
+ { key: 'key4', name: '收方数量' },
|
|
|
+ { key: 'key5', name: '单价' },
|
|
|
+ { key: 'key6', name: '完成金额' },
|
|
|
+]
|
|
|
+const tableDetailsColumn = [
|
|
|
+ { key: 'key1', name: '凭证编号' },
|
|
|
+ { key: 'key2', name: '收方期' },
|
|
|
+ { key: 'key3', name: '工程部位' },
|
|
|
+ { key: 'key4', name: '审核状态' },
|
|
|
+ { key: 'key5', name: '本期收方数量' },
|
|
|
+ { key: 'key6', name: '收方总金额' },
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+const detailsModalClose = () => {
|
|
|
+ detailsModalShow.value = false
|
|
|
+}
|
|
|
|
|
|
+//是否上报
|
|
|
+const isReport = ref(false)
|
|
|
+const reportClick = () => {
|
|
|
+ isReport.value = true
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
