合同计量期

package.json

@@ -18,7 +18,7 @@
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
         "element-plus": "2.4.2",
-        "hc-vue3-ui": "^2.4.9",
+        "hc-vue3-ui": "^2.5.0",
         "js-base64": "^3.7.5",
         "js-fast-way": "^0.3.6",
         "js-md5": "^0.8.3",

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

@@ -77,7 +77,7 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import HcAddModal from './components/apply/addModal.vue'
-import HcDetailsModal from './components/detailsModal.vue'
+import HcDetailsModal from './components/apply/detailsModal.vue'
 import { getRandom } from 'js-fast-way'
 
 defineOptions({

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

@@ -1,114 +1,123 @@
 <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 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 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-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 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>
 
     <!-- 添加分解清单 -->
@@ -119,8 +128,9 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import HcBillBaseModal from '../addBillBaseModal.vue'
+import { getRandom } from 'js-fast-way'
 
 const props = defineProps({
     ids: {
@@ -131,6 +141,7 @@ const props = defineProps({
 
 //事件
 const emit = defineEmits(['finish', 'close'])
+const uuid = getRandom(4)
 
 //双向绑定
 // eslint-disable-next-line no-undef
@@ -148,10 +159,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)
 
@@ -160,6 +183,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' },

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

@@ -0,0 +1,102 @@
+<template>
+    <hc-new-dialog is-table :footer="false" widths="1200px" :show="isShow" title="清单明细" @close="modalClose">
+        <hc-table ref="tableRef" is-new is-expand :index-style="{ width: 60 }" :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #table-expand="{ row, index: index1 }">
+                <div class="relative p-2">
+                    <hc-table is-new :is-index="false" :column="tableColumn1" :datas="tableData1">
+                        <template #index-key="{ index: index2 }">
+                            {{ index1 + 1 }}-{{ index2 + 1 }}
+                        </template>
+                    </hc-table>
+                </div>
+            </template>
+            <template #action="{ row }">
+                <el-link v-if="!row.isExpands" hc @click="unfoldClick(row)">展开明细</el-link>
+                <el-link v-else type="warning" @click="awayClick(row)">收起明细</el-link>
+            </template>
+        </hc-table>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['close'])
+const tableRef = ref(null)
+
+//双向绑定
+// 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) {}
+})
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'action', name: '操作', width: 130, align: 'center' },
+    { key: 'key1', name: '清单编号', width: 120, align: 'center' },
+    { key: 'key2', name: '清单名称' },
+    { key: 'key3', name: '变更后数量', width: 120, align: 'center' },
+    { key: 'key4', name: '收方数量', width: 120, align: 'center' },
+    { key: 'key5', name: '单价', width: 120, align: 'center' },
+    { key: 'key6', name: '完成金额', width: 120, align: 'center' },
+]
+const tableData = ref([
+    { id: '1', key1: '1111' }, { id: '2', key1: '2222' }, { id: '3', key1: '3333' },
+])
+
+
+//展开
+const unfoldClick = (row) => {
+    row.isExpands = true
+    tableRef.value?.toggleRowExpansion(row)
+}
+
+//收起
+const awayClick = (row) => {
+    row.isExpands = false
+    tableRef.value?.toggleRowExpansion(row, false)
+}
+
+const tableColumn1 = [
+    { key: 'index-key', name: '序号', width: 90, align: 'center' },
+    { key: 'key1', name: '凭证编号', width: 100, align: 'center' },
+    { key: 'key2', name: '收方期', width: 100, align: 'center' },
+    { key: 'key3', name: '工程部位' },
+    { key: 'key4', name: '审核状态', width: 120, align: 'center' },
+    { key: 'key5', name: '本期收方数量', width: 120, align: 'center' },
+    { key: 'key6', name: '收方总金额', width: 120, align: 'center' },
+]
+const tableData1 = ref([
+    { key1: '1111' }, { key1: '2222' }, { key1: '3333' },
+])
+
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+    <hc-new-dialog is-table :footer="false" widths="1200px" :show="isShow" title="清单明细" @close="modalClose">
+        <hc-table ref="tableRef" is-new is-expand :index-style="{ width: 60 }" :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #table-expand="{ row, index: index1 }">
+                <div class="relative p-2">
+                    <hc-table is-new :is-index="false" :column="tableColumn1" :datas="tableData1">
+                        <template #index-key="{ index: index2 }">
+                            {{ index1 + 1 }}-{{ index2 + 1 }}
+                        </template>
+                    </hc-table>
+                </div>
+            </template>
+            <template #action="{ row }">
+                <el-link v-if="!row.isExpands" hc @click="unfoldClick(row)">展开明细</el-link>
+                <el-link v-else type="warning" @click="awayClick(row)">收起明细</el-link>
+            </template>
+        </hc-table>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['close'])
+const tableRef = ref(null)
+
+//双向绑定
+// 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) {}
+})
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'action', name: '操作', width: 130, align: 'center' },
+    { key: 'key1', name: '清单编号', width: 120, align: 'center' },
+    { key: 'key2', name: '清单名称' },
+    { key: 'key3', name: '变更后数量', width: 120, align: 'center' },
+    { key: 'key4', name: '计量数量', width: 120, align: 'center' },
+    { key: 'key5', name: '单价', width: 120, align: 'center' },
+    { key: 'key6', name: '完成金额', width: 120, align: 'center' },
+]
+const tableData = ref([
+    { id: '1', key1: '1111' }, { id: '2', key1: '2222' }, { id: '3', key1: '3333' },
+])
+
+
+//展开
+const unfoldClick = (row) => {
+    row.isExpands = true
+    tableRef.value?.toggleRowExpansion(row)
+}
+
+//收起
+const awayClick = (row) => {
+    row.isExpands = false
+    tableRef.value?.toggleRowExpansion(row, false)
+}
+
+const tableColumn1 = [
+    { key: 'index-key', name: '序号', width: 90, align: 'center' },
+    { key: 'key1', name: '凭证编号', width: 100, align: 'center' },
+    { key: 'key2', name: '计量期', width: 100, align: 'center' },
+    { key: 'key3', name: '工程部位' },
+    { key: 'key4', name: '审核状态', width: 120, align: 'center' },
+    { key: 'key5', name: '本期计量数量', width: 120, align: 'center' },
+    { key: 'key6', name: '计量总金额', width: 120, align: 'center' },
+]
+const tableData1 = ref([
+    { key1: '1111' }, { key1: '2222' }, { key1: '3333' },
+])
+
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -70,7 +70,7 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import HcAddModal from './components/middlepay/addModal.vue'
-import HcDetailsModal from './components/detailsModal.vue'
+import HcDetailsModal from './components/middlepay/detailsModal.vue'
 import { getRandom } from 'js-fast-way'
 
 defineOptions({

yarn.lock

@@ -1568,10 +1568,10 @@ has-flag@^4.0.0:
   resolved "http://47.110.251.215:9000/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-hc-vue3-ui@^2.4.9:
-  version "2.4.9"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.4.9.tgz#352186862cf94b63b3296dbe8db722a0d0c378ae"
-  integrity sha512-z+QdqZ2aMqfmjMql2mUZaTCfRW88llKu/JKfrGZTDaJ5/Rxw+wIMUYmEGuSdhIx4pJBuOsRBFWpZljF4JcdFtA==
+hc-vue3-ui@^2.5.0:
+  version "2.5.0"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.5.0.tgz#a312e5359f4a9b953f00746d3e94780936ea2cf1"
+  integrity sha512-9tVS9/qo6dbFOf3djPZ/LZaYxCjYMdVEkYlPbDeiK1HQgTyW/Gplvyi2hV6lKjk5jkKfQdOdODPKppBwUz/U7Q==
   dependencies:
     axios "^1.6.1"
     dayjs "^1.11.10"
@@ -1715,9 +1715,9 @@ js-base64@^3.7.5:
   integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
 
 js-fast-way@^0.3.0:
-  version "0.3.0"
-  resolved "http://47.110.251.215:9000/js-fast-way/-/js-fast-way-0.3.0.tgz#787fe8a5a8949620fc77f646e636e2440bf7086b"
-  integrity sha512-Ed0+crf2RQJ9S7EdcIerYQ1nasWYHIal/D5LsqQne0Gx+DN69kQKpk0q754f/qIiF9yVRrnav6rT0CzTmFnjvA==
+  version "0.3.7"
+  resolved "http://47.110.251.215:9000/js-fast-way/-/js-fast-way-0.3.7.tgz#b84c6fe151816f44d8453655bcaf122bf7e3a072"
+  integrity sha512-tdelAmrYlCJIykMv8o2BEFI+v+WKLiJyzPyCVlUGSZgxm2xewlXM4A307lXBPZwC1HdLuwTWctAoLeBNf6RdOg==
 
 js-fast-way@^0.3.6:
   version "0.3.6"