222

package.json

@@ -18,7 +18,7 @@
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
         "element-plus": "2.4.1",
-        "hc-vue3-ui": "^2.2.2",
+        "hc-vue3-ui": "^2.2.5",
         "js-base64": "^3.7.5",
         "js-fast-way": "0.2.9",
         "js-md5": "^0.8.3",
@@ -30,8 +30,9 @@
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
+        "@iconify-json/iconoir": "^1.1.32",
         "@iconify-json/ri": "^1.1.12",
-        "@unocss/eslint-config": "^0.57.0",
+        "@unocss/eslint-config": "^0.57.1",
         "@vitejs/plugin-vue": "^4.4.0",
         "@vue/compiler-sfc": "^3.3.6",
         "archiver": "^6.0.1",

src/styles/app/element.scss

@@ -75,3 +75,8 @@
 .el-scrollbar.hc-dialog-scrollbar .el-scrollbar__bar {
     right: -5px;
 }
+
+//分割线
+.gutter {
+    background-color: transparent;
+}

src/views/project/debit/contract/check-list.vue

@@ -2,44 +2,82 @@
     <div class="relative h-full flex">
         <div :id="`hc_tree_card_${uuid}`">
             <hc-new-card scrollbar>
-                <hc-lazy-tree :h-props="treeProps" :menus="treeMenus" :root-menu="treeRootMenu" @load="treeLoadNode" @menuTap="treeMenuTap" />
+                <hc-lazy-tree :h-props="treeProps" is-load-menu @load="treeLoadNode" @loadMenu="treeLoadMenu" @menuTap="treeMenuTap" />
             </hc-new-card>
         </div>
         <div :id="`hc_table_card_${uuid}`" class="flex-1">
-            <hc-new-card>
-                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" />
-                <template #action>
-                    <hc-pages :pages="searchForm" @change="pageChange" />
+            <hc-new-card scrollbar title="合同工程清单明细">
+                <template #extra>
+                    <el-button hc-btn type="primary">增补清单</el-button>
+                    <el-button hc-btn type="primary">导入</el-button>
+                    <el-button hc-btn type="primary">导出</el-button>
                 </template>
+                <div class="relative">
+                    <infoTable />
+                    <HcTitle title="下级节点列表" />
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" />
+                </div>
             </hc-new-card>
         </div>
         <!-- 节点数据 -->
-        <hc-new-dialog v-model="treeModalShow" widths="500px" :title="treeModalTitle" @save="treeModalSave">
-            <el-form ref="formRef" class="p-2" label-position="left" size="large" label-width="auto" :model="formModel" :rules="formRules">
-                <el-form-item label="节点编码：">
-                    <el-input v-model="formModel.key1" />
-                </el-form-item>
-                <el-form-item label="节点名称：">
-                    <el-input v-model="formModel.key2" />
-                </el-form-item>
-                <el-form-item label="节点类型：">
-                    <el-select v-model="formModel.key3" block>
-                        <el-option label="单位工程" :value="1" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="工程类型：">
-                    <el-select v-model="formModel.key4" block>
-                        <el-option label="总则" :value="1" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="显示类型：">
-                    <el-select v-model="formModel.key5" block>
-                        <el-option label="总则" :value="1" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="备注：">
-                    <el-input v-model="formModel.key6" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
-                </el-form-item>
+        <hc-new-dialog v-model="treeModalShow" widths="1100px" :title="treeModalTitle" @save="treeModalSave">
+            <el-form ref="formRef" class="p-4" label-position="left" label-width="auto" :model="formModel" :rules="formRules">
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <el-form-item label="清单编号：">
+                            <el-input v-model="formModel.key1" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="清单名称：">
+                            <el-input v-model="formModel.key2" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="单位：">
+                            <el-input v-model="formModel.key3" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="清单节点：">
+                            <el-select v-model="formModel.key4" block>
+                                <el-option label="是" :value="1" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="中标单价：">
+                            <el-input v-model="formModel.key5" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="合同数量：">
+                            <el-input v-model="formModel.key6" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="章编号：">
+                            <el-input v-model="formModel.key7" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="清单标识：">
+                            <el-input v-model="formModel.key8" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="清单类型：">
+                            <el-select v-model="formModel.key9" block>
+                                <el-option label="普通清单" :value="1" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="备注：">
+                            <el-input v-model="formModel.key10" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
         </hc-new-dialog>
     </div>
@@ -48,6 +86,7 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
+import infoTable from './components/check-list/info-table.vue'
 
 defineOptions({
     name: 'ProjectDebitContractList',
@@ -73,7 +112,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({ current: 1, size: 10, total: 0 })
+const searchForm = ref({})
 
 //数据格式
 const treeProps = {
@@ -98,46 +137,49 @@ const treeLoadNode = ({ level }, resolve) => {
     }, 500)
 }
 
-//根节点菜单
-const treeRootMenu = [
-    { icon: 'lock', label: '锁定', key: 'lock' },
-    { icon: 'add', label: '新增', key: 'add' },
-    { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
-]
-
-//节点菜单
-const treeMenus = [
-    { icon: 'add', label: '新增', key: 'add' },
-    { icon: 'pencil', label: '修改', key: 'edit' },
-    { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
-    { icon: 'close', label: '删除', key: 'del' },
-]
+//菜单
+const treeLoadMenu = ({ item, level }, resolve) => {
+    if (level === 1) {
+        return resolve([
+            { icon: 'lock', label: '锁定', key: 'lock' },
+            { icon: 'add', label: '新增', key: 'add' },
+            { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+        ])
+    } else {
+        return resolve([
+            { icon: 'lock', label: '锁定', key: 'lock' },
+            { icon: 'add', label: '新增', key: 'add' },
+            { icon: 'pencil', label: '修改', key: 'edit' },
+            { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+            { icon: 'close', label: '删除', key: 'del' },
+        ])
+    }
+}
 
 const treeMenuTap = ({ key, node, data }) => {
     if (key === 'add') {
-        treeModalTitle.value = '新增下级节点'
+        treeModalTitle.value = '新增合同工程清单'
         treeModalShow.value = true
     }
     if (key === 'edit') {
-        treeModalTitle.value = '项目计量单元修改'
+        treeModalTitle.value = '修改合同工程清单'
         treeModalShow.value = true
     }
 }
 
-
-//分页
-const pageChange = ({ current, size }) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-}
-
 //表格数据
 const tableLoading = ref(false)
 const tableColumn = ref([
-    { key: 'key1', name: '节点编号' },
-    { key: 'key2', name: '节点名称' },
-    { key: 'key3', name: '节点类型' },
-    { key: 'key4', name: '工程类型' },
+    { key: 'key1', name: '清单编号' },
+    { key: 'key2', name: '清单名称' },
+    { key: 'key3', name: '单位' },
+    { key: 'key4', name: '现行单价' },
+    { key: 'key5', name: '合同数量' },
+    { key: 'key6', name: '合同金额' },
+    { key: 'key7', name: '变更后单价' },
+    { key: 'key8', name: '变更后数量' },
+    { key: 'key9', name: '变更后金额' },
+    { key: 'key10', name: '是否增补' },
 ])
 const tableData = ref([
     { key1: '1111' },

src/views/project/debit/contract/components/check-list/info-table.vue

@@ -0,0 +1,32 @@
+<template>
+    <hc-info-table>
+        <tr>
+            <hc-info-table-td center is-title width="120px">清单编号：</hc-info-table-td>
+            <hc-info-table-td width="auto">100章</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">支付项名称：</hc-info-table-td>
+            <hc-info-table-td width="auto">100章</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">支付项名称：</hc-info-table-td>
+            <hc-info-table-td width="auto">100章</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title width="120px">清单类型：</hc-info-table-td>
+            <hc-info-table-td width="auto">普通清单</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">单位：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">清单标识：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title width="120px">合同金额：</hc-info-table-td>
+            <hc-info-table-td width="auto">123123</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">变更后金额：</hc-info-table-td>
+            <hc-info-table-td width="auto">123123</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">章编号：</hc-info-table-td>
+            <hc-info-table-td width="auto">200</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title width="120px">备注：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="5">-</hc-info-table-td>
+        </tr>
+    </hc-info-table>
+</template>

src/views/project/debit/contract/components/unit/info-table.vue

@@ -0,0 +1,40 @@
+<template>
+    <hc-info-table>
+        <tr>
+            <hc-info-table-td center is-title width="120px">工程名称：</hc-info-table-td>
+            <hc-info-table-td width="auto">合同计量单元</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">工程编号：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">节点类型：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title width="120px">工程类型：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">显示类型：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">起始桩号：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title width="120px">结束桩号：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">施工图金额：</hc-info-table-td>
+            <hc-info-table-td width="auto">123123</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">合同图号：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title width="120px">变更合同图号：</hc-info-table-td>
+            <hc-info-table-td width="auto">-</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">变更后金额：</hc-info-table-td>
+            <hc-info-table-td width="auto">123123</hc-info-table-td>
+            <hc-info-table-td center is-title width="120px">是否增补：</hc-info-table-td>
+            <hc-info-table-td width="auto">否</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title width="120px">备注：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="5">-</hc-info-table-td>
+        </tr>
+    </hc-info-table>
+</template>

src/views/project/debit/contract/components/unit/row-data.vue

@@ -0,0 +1,128 @@
+<template>
+    <hc-new-dialog v-model="isShow" widths="90%" title="合同计量单元修改" @save="modalSave">
+        <el-form ref="formRef" class="p-4" label-position="left" label-width="auto" :model="formModel" :rules="formRules">
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="工程名称：">
+                        <el-input v-model="formModel.key1" placeholder="工程名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="工程编号：">
+                        <el-input v-model="formModel.key2" placeholder="工程编号" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="节点类型：">
+                        <el-select v-model="formModel.key3" block placeholder="节点类型">
+                            <el-option label="单位工程" :value="1" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="工程类型：">
+                        <el-select v-model="formModel.key4" block placeholder="工程类型">
+                            <el-option label="总则" :value="1" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="桩号类型：">
+                        <el-select v-model="formModel.key5" block placeholder="桩号类型">
+                            <el-option label="总则" :value="1" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="起始桩号：">
+                        <el-input v-model="formModel.key6" placeholder="起始桩号" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="结束桩号：">
+                        <el-input v-model="formModel.key7" placeholder="结束桩号" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="是否增补：">
+                        <el-select v-model="formModel.key8" block placeholder="是否增补">
+                            <el-option label="是" :value="1" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="施工金额：">
+                        <el-input v-model="formModel.key9" placeholder="施工图金额">
+                            <template #suffix>元</template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="变更金额：">
+                        <el-input v-model="formModel.key9" placeholder="变更后金额">
+                            <template #suffix>元</template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="合同图号：">
+                        <el-input v-model="formModel.key9" placeholder="合同图号" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="变更图号：">
+                        <el-input v-model="formModel.key9" placeholder="变更合同图号" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                    <el-form-item label="备注：">
+                        <el-input v-model="formModel.key10" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+    </hc-new-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('isShow', val)
+    }
+})
+
+//弹窗表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = ref({})
+
+const modalSave = () => {
+    emit('finish')
+}
+</script>

src/views/project/debit/contract/components/unit/tree-form.vue

@@ -0,0 +1,148 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="95%" title="合同计量单元新增" @save="modalSave">
+        <div class="relative h-full flex">
+            <div :id="`hc_tree_card_${uuid}`">
+                <hc-new-card scrollbar>
+                    <template #header>
+                        <div class="text-sm text-orange">↓ 选择部位【点击新增】</div>
+                    </template>
+                    <div class="tree-list">
+                        <div v-for="(item, index) in treeDataList" :key="index" class="item" @click="treeListClick(item)">
+                            <HcIcon name="box-3" fill />
+                            <span class="ml-1">{{ item.name }}</span>
+                        </div>
+                    </div>
+                </hc-new-card>
+            </div>
+            <div :id="`hc_table_card_${uuid}`" class="flex-1">
+                <hc-new-card scrollbar title="合同计量单元">
+                    <hc-table :is-index="false" :column="tableColumn" :datas="tableData" is-new :index-style="{ width: 60 }">
+                        <template #key1="{ row }">
+                            <hc-table-input v-model="row.key1" />
+                        </template>
+                        <template #key2="{ row }">
+                            <hc-table-input v-model="row.key2" />
+                        </template>
+                        <template #key3="{ row }">
+                            <hc-table-input v-model="row.key3" />
+                        </template>
+                        <template #key4="{ row }">
+                            <hc-table-input v-model="row.key4" />
+                        </template>
+                        <template #key5="{ row }">
+                            <el-radio-group v-model="row.key5">
+                                <el-radio :label="1">是</el-radio>
+                                <el-radio :label="2" class="ml-2">否</el-radio>
+                            </el-radio-group>
+                        </template>
+                        <template #action="{ index }">
+                            <el-link type="danger" @click="delRowClick(index)">删除</el-link>
+                        </template>
+                    </hc-table>
+                </hc-new-card>
+            </div>
+        </div>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { getRandom } from 'js-fast-way'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+const uuid = getRandom(4)
+
+//双向绑定
+// 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) {
+        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 treeDataList = ref([
+    { name: '测试' },
+    { name: '临时道路修建、养护与拆除(包括原道路的养护费)' },
+    { name: '征地拆迁放样（含挖边沟、埋界桩）' },
+])
+const treeListClick = (item) => {
+    tableData.value.push({
+        key1: item.name,
+        key2: '',
+        key3: '',
+        key4: '',
+        key5: 1,
+    })
+}
+
+//表格数据
+const tableColumn = ref([
+    { key: 'key1', name: '名称' },
+    { key: 'key2', name: '开始桩号' },
+    { key: 'key3', name: '结束桩号' },
+    { key: 'key4', name: '合同图号' },
+    { key: 'key5', name: '是否划分子节点', width: 120, align: 'center' },
+    { key: 'action', name: '操作', width: 80, align: 'center' },
+])
+const tableData = ref([])
+
+//删除
+const delRowClick = (index) => {
+    tableData.value.splice(index, 1)
+}
+
+const modalSave = () => {
+    emit('finish')
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-list {
+    position: relative;
+    .item {
+        position: relative;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: color .2s;
+        &:hover {
+            color: var(--el-color-primary);
+        }
+    }
+}
+</style>

src/views/project/debit/contract/unit.vue

@@ -1,54 +1,54 @@
 <template>
-    <hc-card>
-        <template #header>
-            111
-        </template>
-        <template #extra>
-            222
-        </template>
-        <div class="relative h-full flex">
-            <div :id="`hc_tree_card_${uuid}`">
-                <hc-card-item scrollbar>
-                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
-                </hc-card-item>
-            </div>
-            <div :id="`hc_table_card_${uuid}`" class="flex-1">
-                <hc-card-item>
-                    <template #header>
-                        <div class="font-400 text-orange">收方总金额：0元</div>
-                    </template>
-                    <template #extra>
-                        <el-button hc-btn color="#626aef">
-                            <HcIcon name="sort-desc" :line="false" />
-                            <span>按部位排序</span>
-                        </el-button>
-                        <el-button hc-btn color="#626aef">
-                            <HcIcon name="sort-desc" :line="false" />
-                            <span>按录入时间排序</span>
-                        </el-button>
-                    </template>
-                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange">
-                        <template #action="{ row }">
-                            <el-link type="primary" @click="giveTaskModalClick(row)">下达</el-link>
-                            <el-link type="success">修改</el-link>
-                            <el-link type="danger">删除</el-link>
+    <div class="relative h-full flex">
+        <div :id="`hc_tree_card_${uuid}`">
+            <hc-new-card scrollbar>
+                <template #header>
+                    <el-button hc-btn type="primary">重新设置treeCode</el-button>
+                </template>
+                <hc-lazy-tree :h-props="treeProps" is-load-menu @load="treeLoadNode" @loadMenu="treeLoadMenu" @menuTap="treeMenuTap" />
+            </hc-new-card>
+        </div>
+        <div :id="`hc_table_card_${uuid}`" class="flex-1">
+            <hc-new-card scrollbar title="合同计量单元">
+                <template #extra>
+                    <el-button hc-btn type="primary" @click="editModalShow = true">修改</el-button>
+                    <el-button hc-btn type="danger">删除</el-button>
+                    <el-button hc-btn type="warning">增补单元</el-button>
+                    <el-button hc-btn type="success">导入</el-button>
+                </template>
+                <div class="relative">
+                    <infoTable />
+                    <HcTitle title="清单分解汇总列表">
+                        <template #extra>
+                            <div class="text-sm text-orange">温馨提示：累计分解量 > 合同变更后量，整行文字红色</div>
+                        </template>
+                    </HcTitle>
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
+                        <template #key1="{ row }">
+                            <i class="i-iconoir-open-select-hand-gesture inline-block" />
                         </template>
                     </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
+                </div>
+            </hc-new-card>
         </div>
-    </hc-card>
+
+        <!-- 节点新增和编辑 -->
+        <treeForm v-model="treeModalShow" />
+
+        <!-- 修改合同计量单元 -->
+        <rowData v-model="editModalShow" />
+    </div>
 </template>
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
+import infoTable from './components/unit/info-table.vue'
+import treeForm from './components/unit/tree-form.vue'
+import rowData from './components/unit/row-data.vue'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectDebitContractUnit',
 })
 
 const uuid = getRandom(4)
@@ -71,10 +71,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
+const searchForm = ref({})
 
 //数据格式
 const treeProps = {
@@ -99,33 +96,53 @@ const treeLoadNode = ({ level }, resolve) => {
     }, 500)
 }
 
-//分页
-const pageChange = ({ current, size }) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
+//菜单
+const treeLoadMenu = ({ item, level }, resolve) => {
+    if (level === 1) {
+        return resolve([
+            { icon: 'lock', label: '锁定', key: 'lock' },
+            { icon: 'upload-cloud', label: '导入', key: 'lead' },
+            { icon: 'add', label: '新增', key: 'add' },
+            { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+        ])
+    } else {
+        return resolve([
+            { icon: 'lock', label: '锁定', key: 'lock' },
+            { icon: 'upload-cloud', label: '导入', key: 'lead' },
+            { icon: 'add', label: '新增', key: 'add' },
+            { icon: 'pencil', label: '修改', key: 'edit' },
+            { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+            { icon: 'close', label: '删除', key: 'del' },
+        ])
+    }
+}
+
+const treeMenuTap = ({ key, node, data }) => {
+    if (key === 'add') {
+        treeModalShow.value = true
+    }
+    if (key === 'edit') {
+        treeModalShow.value = true
+    }
 }
 
 //表格数据
 const tableLoading = ref(false)
 const tableColumn = ref([
-    { key: 'key1', name: '收方单编号' },
-    { key: 'key2', name: '收方期' },
-    { key: 'key3', name: '工程划分部位' },
-    { key: 'key4', name: '收方金额' },
-    { key: 'key5', name: '业务日期' },
-    { key: 'key6', name: '审核状态' },
-    { key: 'action', name: '操作', width: 200, align: 'center' },
+    { key: 'key1', name: '分解明细', width: 80, align: 'center' },
+    { key: 'key2', name: '清单编号', width: 120, align: 'center' },
+    { key: 'key3', name: '清单名称', align: 'center' },
+    { key: 'key4', name: '合同变更数量', width: 110, align: 'center' },
+    { key: 'key5', name: '施工图变更后汇总数量', align: 'center' },
+    { key: 'key6', name: '单价（元）', width: 90, align: 'center' },
+    { key: 'key7', name: '施工图变更后汇总金额（元）', align: 'center' },
 ])
 const tableData = ref([
-    { key1: '1111' },
+    { key2: '1111' },
 ])
 
-//表格选择
-const tableCheckChange = () => {
+//弹窗
+const treeModalShow = ref(false)
 
-}
+const editModalShow = ref(false)
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/views/project/debit/project/components/pay/info-table.vue

@@ -42,7 +42,3 @@
         </tr>
     </hc-info-table>
 </template>
-
-<script setup>
-
-</script>

yarn.lock

@@ -224,6 +224,13 @@
   resolved "http://47.110.251.215:9000/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
   integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
+"@iconify-json/iconoir@^1.1.32":
+  version "1.1.32"
+  resolved "http://47.110.251.215:9000/@iconify-json/iconoir/-/iconoir-1.1.32.tgz#cce1ba842757bc8eef40439db5407611965a24c2"
+  integrity sha512-z12EzOZsqatGuCAc7CzYpxufVoexRKC910ZouB29sDT8lJiGUSVCmrhgqZSz4M7PIeqaN6YUuE6jNRgH7Wal+A==
+  dependencies:
+    "@iconify/types" "*"
+
 "@iconify-json/ri@^1.1.12":
   version "1.1.12"
   resolved "http://47.110.251.215:9000/@iconify-json/ri/-/ri-1.1.12.tgz#f5a012d4ffb032dbfc73b795921096c28fc33faf"
@@ -452,6 +459,14 @@
     "@unocss/core" "0.57.0"
     unconfig "^0.3.11"
 
+"@unocss/config@0.57.1":
+  version "0.57.1"
+  resolved "http://47.110.251.215:9000/@unocss/config/-/config-0.57.1.tgz#0c7d8f16028acb24bcb475746335308a5e4f2d85"
+  integrity sha512-mbuVO0mH1PX7rEkViMNWb3jG1ji7TUydo2DdnMHhJE+dOrGtnQzhzXGlAd4qqel1fnt/VWuOyZKwJA3QO6VCtg==
+  dependencies:
+    "@unocss/core" "0.57.1"
+    unconfig "^0.3.11"
+
 "@unocss/core@0.56.0", "@unocss/core@^0.56.0":
   version "0.56.0"
   resolved "http://47.110.251.215:9000/@unocss/core/-/core-0.56.0.tgz#aaa51b1748a451939c56abde1441d063e58f51f8"
@@ -462,21 +477,26 @@
   resolved "http://47.110.251.215:9000/@unocss/core/-/core-0.57.0.tgz#eca8ce3febc723003742c30ca66f07fbec55fdfe"
   integrity sha512-vjLnE3PnbFQY0du8jC1hZorFNFlVBBeqo7AoO+69Jqx7aJx3gtBlg4QQV607LIJgU+hsul3RUy8r/pKb7y1MoA==
 
-"@unocss/eslint-config@^0.57.0":
-  version "0.57.0"
-  resolved "http://47.110.251.215:9000/@unocss/eslint-config/-/eslint-config-0.57.0.tgz#fd4bb44137e2b0f535e5a48e895cb6666e83443c"
-  integrity sha512-mh1vsV4JcKvgLe/DYXXIP72uJlEYw2zvUhwxNsNucF3P9+i3EdHsvFULYSwluf2Iqe2s1jMi0o5OY4+O9gR8sA==
+"@unocss/core@0.57.1":
+  version "0.57.1"
+  resolved "http://47.110.251.215:9000/@unocss/core/-/core-0.57.1.tgz#413bb5dc5546e3b943a67d1040567c2c90bb4120"
+  integrity sha512-cqQW/4gCuk+bFMPg9lBanuRNQ9Lx1l4PpMN/6uKxI5WROpq7ce/Xb4uGvAxKLh3ITtFSpXs2cLfsy7QD6cVD/Q==
+
+"@unocss/eslint-config@^0.57.1":
+  version "0.57.1"
+  resolved "http://47.110.251.215:9000/@unocss/eslint-config/-/eslint-config-0.57.1.tgz#698d24bbf2406db7cd85708ecacd8b5653df81e1"
+  integrity sha512-49okz5jnpiB8uPWVRm9+iEvPaTCIm9dLwAVqN8ZMKq33SuGeTfX/dNR6i8/iKyFMBHPrLmvh3WPGq5iIAZTawQ==
   dependencies:
-    "@unocss/eslint-plugin" "0.57.0"
+    "@unocss/eslint-plugin" "0.57.1"
 
-"@unocss/eslint-plugin@0.57.0":
-  version "0.57.0"
-  resolved "http://47.110.251.215:9000/@unocss/eslint-plugin/-/eslint-plugin-0.57.0.tgz#f4b6a113988f4840bdbf68d43457deba15bbddee"
-  integrity sha512-0dr/Zw8FuMy4UD4yT9uofb125KGgEt0fILPg0MFkE5zre/C+mOiK763RAs1dOlTvBizhLQh1gD9BmlN2+b8mpg==
+"@unocss/eslint-plugin@0.57.1":
+  version "0.57.1"
+  resolved "http://47.110.251.215:9000/@unocss/eslint-plugin/-/eslint-plugin-0.57.1.tgz#e6302eb2b4fc16c4972758d45499038ddbfc51f6"
+  integrity sha512-aErMKeSkJ78bXlqNd2bb0qzebKXAWVHcCSsP58xuzQsLkaNvwtj+/MrYDuF5PCNZakUCR1snfP4f/MGCP4+OmQ==
   dependencies:
     "@typescript-eslint/utils" "^6.8.0"
-    "@unocss/config" "0.57.0"
-    "@unocss/core" "0.57.0"
+    "@unocss/config" "0.57.1"
+    "@unocss/core" "0.57.1"
     magic-string "^0.30.5"
     synckit "^0.8.5"
 
@@ -1549,10 +1569,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.2.2:
-  version "2.2.2"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.2.2.tgz#8e7f408c58a44e42af81ea475fd0daad6572f136"
-  integrity sha512-JuVVjJzAr315Qx3ZyXYGYd4G/FkKY4Eig9b/ifJqDModRWws0i3qgA1+jV5PVsWY4+o98goeMcg95hvNt0KPhQ==
+hc-vue3-ui@^2.2.5:
+  version "2.2.5"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.2.5.tgz#9a13ebdff09bd1c3e0061f4a554ffba6b8e5007a"
+  integrity sha512-DnKIB+xLaJ38Mz/nOezV/W+3jL1eavYdUqXHzlcWu0BDVzI44mp/4DyQlN+o4tvw8biiPu++zSwKPqwwKqP/7g==
   dependencies:
     axios "^1.5.1"
     dayjs "^1.11.10"