中间计量申请

src/views/debit-pay/admin/components/addBillBaseModal.vue

@@ -0,0 +1,70 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :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: '单价(元)' },
+    { key: 'key4', name: '合同数量' },
+    { key: 'key5', name: '合同变更后数量' },
+    { key: 'key6', name: '施工图变更后数量' },
+    { key: 'key7', 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/admin/components/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/admin/components/middlepay/addModal.vue

@@ -0,0 +1,244 @@
+<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 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>
+
+    <!-- 添加分解清单 -->
+    <HcBillBaseModal v-model="addBillBaseModalShow" />
+
+    <!-- 关联变更令 -->
+    <HcLinkAlterModal v-model="linkAlterModal" />
+
+    <!-- 关联收方单 -->
+    <HcLinkDebitModal v-model="linkDebitModal" />
+
+    <!-- 关联质保资料 -->
+    <HcLinkWarranty v-model="linkWarrantyModal" />
+
+    <!-- 文件上传组件 -->
+    <hc-upload-file ref="HcUploadFileRef" />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import HcBillBaseModal from '../addBillBaseModal.vue'
+import HcLinkAlterModal from './linkAlterModal.vue'
+import HcLinkDebitModal from './linkDebitModal.vue'
+import HcLinkWarranty from './linkWarranty.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 HcUploadFileRef = ref(null)
+
+//基础表单
+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 linkAlterModal = ref(false)
+const linkAlterClick = () => {
+    linkAlterModal.value = true
+}
+
+//关联质保资料
+const linkWarrantyModal = ref(false)
+const linkWarrantyClick = () => {
+    linkWarrantyModal.value = true
+}
+
+//关联收方单
+const linkDebitModal = ref(false)
+const linkDebitClick = () => {
+    linkDebitModal.value = true
+}
+
+//添加分解单
+const addBillBaseModalShow = ref(false)
+const addBillBaseModalClick = () => {
+    addBillBaseModalShow.value = true
+}
+
+const addModalSave = () => {
+    emit('finish')
+    addModalClose()
+}
+
+//关闭弹窗
+const addModalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :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: '变更令金额(元)' },
+    { key: 'key4', 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/admin/components/middlepay/linkDebitModal.vue

@@ -0,0 +1,67 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :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: '收方单金额(元)' },
+    { key: 'key4', 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/admin/components/middlepay/linkWarranty.vue

@@ -0,0 +1,188 @@
+<template>
+    <hc-dialog is-to-body is-table is-footer-center widths="1200px" :show="isShow" title="选择需要关联的检查的部位" @save="modalSave" @close="modalClose">
+        <hc-card>
+            <template #header>
+                <div class="w-60">
+                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入部位名称检索" @keyup="keyUpEvent" />
+                </div>
+                <div class="ml-2">
+                    <el-button type="primary" @click="searchClick">
+                        <HcIcon name="search-2" />
+                        <span>搜索</span>
+                    </el-button>
+                </div>
+            </template>
+            <template #extra>
+                <el-button type="danger" hc-btn class="mr-3">
+                    <HcIcon name="delete-bin" />
+                    <span>批量删除</span>
+                </el-button>
+                <hc-new-switch :datas="typeData" :keys="typeKey" :round="false" @change="typeChange" />
+            </template>
+            <div v-if="typeKey === '1'" class="relative h-full flex">
+                <div id="hc_tree_warranty">
+                    <hc-card-item scrollbar>
+                        <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
+                    </hc-card-item>
+                </div>
+                <div id="hc_table_warranty" class="flex-1">
+                    <hc-card-item>
+                        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
+                        <template #action>
+                            <hc-pages :pages="searchForm" @change="pageChange" />
+                        </template>
+                    </hc-card-item>
+                </div>
+            </div>
+            <div v-if="typeKey === '2'" class="relative h-full">
+                <hc-card-item>
+                    <hc-table :column="tableColumn1" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
+                    <template #action>
+                        <hc-pages :pages="searchForm" @change="pageChange" />
+                    </template>
+                </hc-card-item>
+            </div>
+        </hc-card>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { nextTick, 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,
+})
+
+//数据类型
+const typeKey = ref('1')
+const typeData = ref([
+    { key: '1', name: '关联部位' },
+    { key: '2', name: '已关联部位' },
+])
+const typeChange = ({ key }) => {
+    typeKey.value = key
+    if (key === '1') {
+        setSplitRef()
+    }
+}
+
+
+//监听
+watch(() => [
+    props.ids,
+], ([ids]) => {
+    console.log('ids', ids)
+}, { immediate: true })
+
+//监听
+watch(isShow, (val) => {
+    if (val) {
+        setSplitRef()
+    }
+})
+
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_warranty', '#hc_table_warranty'], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    })
+}
+
+//数据格式
+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 searchForm = ref({
+    queryValue: null, current: 1, size: 20, total: 0,
+})
+
+//回车搜索
+const keyUpEvent = (e) => {
+    if (e.key === 'Enter') {
+        searchForm.value.current = 1
+    }
+}
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1
+}
+
+//分页被点击
+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: '资料完成状态' },
+]
+const tableData = ref([
+    { key1: '1111' },
+])
+const tableColumn1 = [
+    { key: 'key1', name: '文件名称' },
+    { key: 'key2', name: '桩号名称' },
+    { key: 'key3', name: '资料完成状态' },
+]
+
+
+//表格选择
+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/admin/middlepay.vue

@@ -58,164 +58,16 @@
                 </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>
+        <HcAddModal v-model="addModalShow" />
+
         <!-- 清单明细 -->
-        <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>
+        <HcDetailsModal v-model="detailsModalShow" />
 
-        <!-- 关联收方单 -->
-        <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>
@@ -223,6 +75,9 @@
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
+import HcAddModal from './components/middlepay/addModal.vue'
+import HcDetailsModal from './components/detailsModal.vue'
+
 defineOptions({
     name: 'DebitPayAdminMiddlepay',
 })
@@ -315,167 +170,10 @@ 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
 }
 
 //是否上报