中间计量申请

src/styles/app/main.scss

@@ -48,3 +48,7 @@ embed {
     border-radius: 3px;
     margin-bottom: 10px;
 }
+
+.hc_tree_card_border {
+    border-right: 1px dotted #EEEEEE;
+}

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

@@ -1,127 +1,125 @@
 <template>
-    <hc-new-dialog is-table 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 />
+    <hc-new-dialog is-table widths="95%" :show="isShow" title="中间计量新增" @save="addModalSave" @close="addModalClose">
+        <div class="relative h-full flex">
+            <div :id="`hc_tree_card_${uuid}`" class="hc_tree_card_border relative">
+                <hc-body scrollbar padding="0px">
+                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
+                </hc-body>
+            </div>
+            <div :id="`hc_table_card_${uuid}`" class="relative flex-1">
+                <hc-body scrollbar padding="0px">
+                    <!-- 基础表单 -->
+                    <hc-card-item>
+                        <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.key6" disabled />
+                                    </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.key6" disabled />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="16">
+                                    <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 is-new :index-style="{ width: 60 }" :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" disabled />
+                            </template>
+                            <template #key9="{ row }">
+                                <hc-table-input v-model="row.key9" disabled />
+                            </template>
+                            <template #action="{ row }">
+                                <el-link type="danger">删除</el-link>
+                            </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-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 is-new :index-style="{ width: 60 }" :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-link type="danger">删除</el-link>
-                    </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>
+                        </el-form>
+                    </hc-card-item>
+                </hc-body>
+            </div>
+        </div>
     </hc-new-dialog>
 
     <!-- 添加分解清单 -->
@@ -141,11 +139,12 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import HcBillBaseModal from '../addBillBaseModal.vue'
 import HcLinkAlterModal from './linkAlterModal.vue'
 import HcLinkDebitModal from './linkDebitModal.vue'
 import HcLinkWarranty from './linkWarranty.vue'
+import { getRandom } from 'js-fast-way'
 
 const props = defineProps({
     ids: {
@@ -157,6 +156,8 @@ const props = defineProps({
 //事件
 const emit = defineEmits(['finish', 'close'])
 
+const uuid = getRandom(4)
+
 //双向绑定
 // eslint-disable-next-line no-undef
 const isShow = defineModel('modelValue', {
@@ -173,10 +174,22 @@ watch(() => [
 //监听
 watch(isShow, (val) => {
     if (val) {
-        console.log('处理数据')
+        setSplitRef()
     }
 })
 
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    })
+}
+
 //文件上传
 const HcUploadFileRef = ref(null)
 
@@ -185,6 +198,29 @@ const baseFormRef = ref(null)
 const baseForm = ref({})
 const baseFormRules = {}
 
+//数据格式
+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 addTableColumn = ref([
     { key: 'key1', name: '清单编号', width: '120' },
@@ -192,11 +228,10 @@ const addTableColumn = ref([
     { 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: 'key6', name: '本期计量数量', width: '140' },
+    { key: 'key7', name: '含变更数量', width: '100' },
+    { key: 'key8', name: '本期计量金额', width: '120' },
+    { key: 'key9', name: '累计计量量', width: '100' },
     { key: 'action', name: '操作', fixed: 'right', width: 80, align: 'center' },
 ])
 const addTableData = ref([