优化页面

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

@@ -56,121 +56,8 @@
             </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.key6" disabled />
-                                </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="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 is-to-body is-footer-center widths="500px" :show="giveTaskModalShow" title="收方单任务下达" @save="giveTaskModalSave" @close="giveTaskModalClose">
             <el-form ref="giveTaskFormRef" class="p-2" label-position="top" :model="giveTaskForm" :rules="giveTaskFormRules">
@@ -179,40 +66,24 @@
                 </el-form-item>
             </el-form>
         </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>
+        <HcDetailsModal v-model="detailsModalShow" />
+
         <!-- 上报弹窗 -->
         <hc-report-dialog v-model="isReport" />
-        <!-- 文件上传组件 -->
-        <hc-upload-file ref="HcUploadFileRef" />
     </hc-card>
 </template>
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
+import HcAddModal from './components/apply/addModal.vue'
+import HcDetailsModal from './components/detailsModal.vue'
 
 defineOptions({
     name: 'DebitPayAdminApply',
 })
 
-const HcUploadFileRef = ref(null)
-
 //渲染完成
 onMounted(() => {
     setSplitRef()
@@ -293,77 +164,12 @@ 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 giveTaskModalShow = ref(false)
 const giveTaskModalClick = (row) => {
@@ -389,36 +195,6 @@ const giveTaskModalClose = () => {
 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
 }
 
 //是否上报

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

@@ -0,0 +1,201 @@
+<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.key6" disabled />
+                            </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="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" />
+
+    <!-- 文件上传组件 -->
+    <hc-upload-file ref="HcUploadFileRef" />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import HcBillBaseModal from '../addBillBaseModal.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 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/middlepay.vue

@@ -67,9 +67,6 @@
 
         <!-- 上报弹窗 -->
         <hc-report-dialog v-model="isReport" />
-
-        <!-- 文件上传组件 -->
-        <hc-upload-file ref="HcUploadFileRef" />
     </hc-card>
 </template>
 
@@ -82,8 +79,6 @@ defineOptions({
     name: 'DebitPayAdminMiddlepay',
 })
 
-const HcUploadFileRef = ref(null)
-
 //渲染完成
 onMounted(() => {
     setSplitRef()