222

src/views/project/periods/base/check-list.vue

@@ -1,54 +1,102 @@
 <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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
+    <div class="relative h-full flex">
+        <div :id="`hc_tree_card_${uuid}`">
+            <hc-new-card scrollbar>
+                <template #header>
+                    <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
+                        <el-option label="工区1" value="1" />
+                        <el-option label="工区2" value="2" />
+                        <el-option label="工区3" value="3" />
+                    </el-select>
+                </template>
+                <hc-lazy-tree :h-props="treeProps" is-load-menu @load="treeLoadNode" @loadMenu="treeLoadMenu" @menuTap="treeMenuTap" />
+            </hc-new-card>
         </div>
-    </hc-card>
+        <div :id="`hc_table_card_${uuid}`" class="flex-1">
+            <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="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>
 </template>
 
 <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: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsBaseList',
 })
 
 const uuid = getRandom(4)
@@ -71,10 +119,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
+const searchForm = ref({})
 
 //数据格式
 const treeProps = {
@@ -99,33 +144,65 @@ 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: '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 = '新增合同工程清单'
+        treeModalShow.value = true
+    }
+    if (key === 'edit') {
+        treeModalTitle.value = '修改合同工程清单'
+        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: '清单编号' },
+    { 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' },
 ])
 
-//表格选择
-const tableCheckChange = () => {
+//弹窗
+const treeModalShow = ref(false)
+const treeModalTitle = ref('')
 
-}
-</script>
+//弹窗表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = ref({})
 
-<style scoped lang="scss">
+//弹窗保存
+const treeModalSave = () => {
 
-</style>
+}
+</script>

src/views/project/periods/base/check-list1.vue

@@ -1,54 +1,32 @@
 <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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
+    <div class="relative h-full flex">
+        <div :id="`hc_tree_card_${uuid}`">
+            <hc-new-card scrollbar>
+                <template #header>
+                    <el-button hc-btn type="primary">归集工区清单</el-button>
+                </template>
+                <hc-lazy-tree :h-props="treeProps" is-load-menu @load="treeLoadNode" @loadMenu="treeLoadMenu" @menuTap="treeMenuTap" />
+            </hc-new-card>
         </div>
-    </hc-card>
+        <div :id="`hc_table_card_${uuid}`" class="flex-1">
+            <hc-new-card scrollbar title="合同工程清单明细">
+                <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>
+    </div>
 </template>
 
 <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: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsBaseList1',
 })
 
 const uuid = getRandom(4)
@@ -71,10 +49,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
+const searchForm = ref({})
 
 //数据格式
 const treeProps = {
@@ -99,33 +74,38 @@ 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: 'arrow-up-down-line', label: '排序', key: 'sort' },
+        ])
+    } else {
+        return resolve([
+            { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+        ])
+    }
+}
+
+const treeMenuTap = ({ key, node, data }) => {
+
 }
 
 //表格数据
 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: '清单编号' },
+    { 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' },
 ])
-
-//表格选择
-const tableCheckChange = () => {
-
-}
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/views/project/periods/base/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/periods/base/components/pay/formula.vue

@@ -0,0 +1,102 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="1200px" title="添加公式" @save="modalSave">
+        <div class="hc-search-form">
+            <el-select v-model="searchForm.key1" filterable class="w-40" placeholder="公式分类" @change="searchKeyClick">
+                <el-option label="xxx" value="1" />
+            </el-select>
+        </div>
+        <div class="hc-search-table">
+            <el-radio-group v-model="tableRadio" class="hc-search-table-radio-group">
+                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
+                    <template #action="{ row }">
+                        <el-radio :label="row.key1" size="large" />
+                    </template>
+                </hc-table>
+            </el-radio-group>
+        </div>
+    </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('处理数据')
+    }
+})
+
+//搜索表单
+const searchForm = ref({})
+const searchKeyClick = () => {
+
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'key1', name: '公式编号' },
+    { key: 'key2', name: '公式名称' },
+    { key: 'key3', name: '备注' },
+    { key: 'action', name: '选择', width: 50, align: 'center' },
+]
+const tableData = ref([
+    { key1: '1111' },
+    { key1: '222' },
+])
+
+const tableRadio = ref('')
+
+const modalSave = () => {
+    emit('finish')
+}
+</script>
+
+<style scoped lang="scss">
+.hc-search-form {
+    position: relative;
+    margin-bottom: 10px;
+}
+.hc-search-table {
+    position: relative;
+    height: calc(100% - 42px);
+}
+.hc-search-table-radio-group {
+    display: block;
+    height: 100%;
+}
+</style>
+
+<style lang="scss">
+.hc-search-table .hc-search-table-radio-group .el-table[hc].new .cell .el-radio {
+    margin-right: 0;
+    height: 20px;
+    .el-radio__label {
+        display: none;
+    }
+}
+</style>

src/views/project/periods/base/components/pay/info-table.vue

@@ -0,0 +1,44 @@
+<template>
+    <hc-info-table>
+        <tr>
+            <hc-info-table-td center is-title>支付项编号：</hc-info-table-td>
+            <hc-info-table-td width="120px">100章</hc-info-table-td>
+            <hc-info-table-td center is-title>支付项名称：</hc-info-table-td>
+            <hc-info-table-td width="120px">100章</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>支付项类型：</hc-info-table-td>
+            <hc-info-table-td width="120px">100章</hc-info-table-td>
+            <hc-info-table-td center is-title>是否为扣款项：</hc-info-table-td>
+            <hc-info-table-td width="120px">否</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>是否合计项：</hc-info-table-td>
+            <hc-info-table-td width="120px">否</hc-info-table-td>
+            <hc-info-table-td center is-title>是否显示百分比：</hc-info-table-td>
+            <hc-info-table-td width="120px">是</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>是否手动输入：</hc-info-table-td>
+            <hc-info-table-td width="120px">否</hc-info-table-td>
+            <hc-info-table-td center is-title>排序号：</hc-info-table-td>
+            <hc-info-table-td width="120px">1</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>合同计算公式名称：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">章清单合同原总金额</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>变更计算公式名称：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">章清单变更金额</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>本期计算公式名称：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">章清单本期完成金额</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>备注：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">-</hc-info-table-td>
+        </tr>
+    </hc-info-table>
+</template>

src/views/project/periods/base/components/pay/row-data.vue

@@ -0,0 +1,116 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="666px" title="修改项目支付项" @save="modalSave">
+        <el-scrollbar class="hc-dialog-scrollbar">
+            <el-form ref="formRef" class="p-2" label-position="left" 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="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item class="nowrap" label="合同计算公式：">
+                    <el-input v-model="formModel.key4" class="flex-1" disabled />
+                    <el-link type="primary" class="ml-2 line-height-normal" @click="formulaClick">添加公式</el-link>
+                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
+                </el-form-item>
+                <el-form-item class="nowrap" label="变更计算公式：">
+                    <el-input v-model="formModel.key5" disabled class="flex-1" />
+                    <el-link type="primary" class="ml-2 line-height-normal">添加公式</el-link>
+                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
+                </el-form-item>
+                <el-form-item class="nowrap" label="本期计算公式：">
+                    <el-input v-model="formModel.key6" disabled class="flex-1" />
+                    <el-link type="primary" class="ml-2 line-height-normal">添加公式</el-link>
+                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
+                </el-form-item>
+                <el-form-item label="是否为扣款项：">
+                    <el-select v-model="formModel.key7" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否加粗：">
+                    <el-select v-model="formModel.key8" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否手动输入：">
+                    <el-select v-model="formModel.key9" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否显示百分比：">
+                    <el-select v-model="formModel.key10" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="支付项适用类型：">
+                    <el-select v-model="formModel.key11" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="排序号：">
+                    <el-input v-model="formModel.key12" />
+                </el-form-item>
+                <el-form-item label="备注：">
+                    <el-input v-model="formModel.key13" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+    </hc-new-dialog>
+    <HcFormula v-model="isFormulaShow" />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import HcFormula from './formula.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 formRef = ref(null)
+const formModel = ref({ })
+const formRules = ref({})
+
+const modalSave = () => {
+    emit('finish')
+}
+
+//公式
+const isFormulaShow = ref(false)
+const formulaClick = () => {
+    isFormulaShow.value = true
+}
+</script>

src/views/project/periods/base/components/pay/system-pay.vue

@@ -0,0 +1,64 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="1200px" title="引用系统支付项" @save="modalSave">
+        <hc-table
+            :column="tableColumn" :datas="tableData" :loading="tableLoading"
+            is-new :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+            is-check @selection-change="tableCheckChange"
+        />
+    </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('处理数据')
+    }
+})
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'key1', name: '支付项编号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型' },
+    { key: 'key4', name: '是否为扣款项' },
+    { key: 'key5', name: '是否合计项' },
+    { key: 'key5', name: '适用类型' },
+]
+const tableData = ref([
+    { key1: '1111' },
+])
+
+//表格选择
+const tableCheckChange = (checks) => {
+    console.log(checks)
+}
+const modalSave = () => {
+    emit('finish')
+}
+</script>

src/views/project/periods/base/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/periods/base/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/periods/base/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/periods/base/pay.vue

@@ -1,54 +1,61 @@
 <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>
+    <div class="relative h-full flex">
+        <div :id="`hc_table_card_${uuid}`">
+            <hc-new-card>
+                <template #header>
+                    <div class="mr-3 w-40">
+                        <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
+                            <el-option label="工区1" value="1" />
+                            <el-option label="工区2" value="2" />
+                            <el-option label="工区3" value="3" />
+                        </el-select>
+                    </div>
+                    <el-button hc-btn type="primary" @click="systemPaymentClick">引用系统支付项</el-button>
+                </template>
+                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" is-current-row>
+                    <template #action="{ row }">
+                        <el-link type="success" @click="editRowClick(row)">修改</el-link>
+                        <el-link type="danger">删除</el-link>
                     </template>
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-new-card>
+        </div>
+        <div :id="`hc_info_card_${uuid}`" class="flex-1">
+            <hc-new-card scrollbar>
+                <infoTable />
+                <hc-title title="汇总项">
                     <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>
+                        <el-link type="primary">添加汇总项</el-link>
                     </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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
+                </hc-title>
+                <hc-table :column="tableColumn1" :datas="tableData1" is-new :index-style="{ width: 60 }">
+                    <template #action="{ row }">
+                        <el-link type="danger">删除</el-link>
                     </template>
-                </hc-card-item>
-            </div>
+                </hc-table>
+            </hc-new-card>
         </div>
-    </hc-card>
+
+        <!-- 引用系统支付项 -->
+        <systemPay v-model="systemPayShow" />
+
+        <!-- 修改项目支付项 -->
+        <rowDataInfo v-model="isEditRowShow" />
+    </div>
 </template>
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
+import infoTable from './components/pay/info-table.vue'
+import systemPay from './components/pay/system-pay.vue'
+import rowDataInfo from './components/pay/row-data.vue'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsBasePay',
 })
 
 const uuid = getRandom(4)
@@ -62,42 +69,16 @@ onMounted(() => {
 const setSplitRef = () => {
     //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
     nextTick(() => {
-        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
-            sizes: [20, 80],
+        window.$split(['#hc_table_card_' + uuid, '#hc_info_card_' + uuid], {
+            sizes: [70, 30],
             snapOffset: 0,
-            minSize: [50, 500],
+            minSize: [50, 300],
         })
     })
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
-
-//数据格式
-const treeProps = {
-    label: 'name',
-    children: 'children',
-    isLeaf: 'leaf',
-}
-
-//懒加载的数据
-const treeLoadNode = ({ level }, resolve) => {
-    if (level === 0) {
-        return resolve([{ name: 'region' }])
-    }
-    if (level > 3) {
-        return resolve([])
-    }
-    setTimeout(() => {
-        resolve([
-            { name: 'leaf', leaf: true },
-            { name: 'zone' },
-        ])
-    }, 500)
-}
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
 //分页
 const pageChange = ({ current, size }) => {
@@ -108,24 +89,42 @@ const pageChange = ({ current, size }) => {
 //表格数据
 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: 140 },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型', width: 160 },
+    { key: 'key4', name: '是否为扣款项', width: 100 },
+    { key: 'key5', name: '是否合计项', width: 100 },
+    { key: 'key5', name: '适用类型', width: 100 },
+    { key: 'action', name: '操作', width: 100 },
 ])
 const tableData = ref([
     { key1: '1111' },
 ])
 
-//表格选择
-const tableCheckChange = () => {
-
+//引用系统支付项
+const systemPayShow = ref(false)
+const systemPaymentClick = () => {
+    systemPayShow.value = true
 }
-</script>
 
-<style scoped lang="scss">
+//汇总项
+const tableColumn1 = ref([
+    { key: 'key1', name: '支付项编号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型' },
+    { key: 'key4', name: '合同计算公式' },
+    { key: 'key5', name: '变更计算公式' },
+    { key: 'key6', name: '本期计算公式' },
+    { key: 'key7', name: '是否为扣款项' },
+    { key: 'action', name: '操作', width: 50 },
+])
+const tableData1 = ref([
+    { key1: '1111' },
+])
 
-</style>
+//修改
+const isEditRowShow = ref(false)
+const editRowClick = () => {
+    isEditRowShow.value = true
+}
+</script>

src/views/project/periods/base/pay1.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>
+    <div class="relative h-full flex">
+        <div :id="`hc_table_card_${uuid}`">
+            <hc-new-card>
+                <template #header>
+                    <el-button hc-btn type="primary" @click="systemPaymentClick">引用系统支付项</el-button>
+                </template>
+                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" is-current-row>
+                    <template #action="{ row }">
+                        <el-link type="success" @click="editRowClick(row)">修改</el-link>
+                        <el-link type="danger">删除</el-link>
                     </template>
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-new-card>
+        </div>
+        <div :id="`hc_info_card_${uuid}`" class="flex-1">
+            <hc-new-card scrollbar>
+                <infoTable />
+                <hc-title title="汇总项">
                     <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>
+                        <el-link type="primary">添加汇总项</el-link>
                     </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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
+                </hc-title>
+                <hc-table :column="tableColumn1" :datas="tableData1" is-new :index-style="{ width: 60 }">
+                    <template #action="{ row }">
+                        <el-link type="danger">删除</el-link>
                     </template>
-                </hc-card-item>
-            </div>
+                </hc-table>
+            </hc-new-card>
         </div>
-    </hc-card>
+
+        <!-- 引用系统支付项 -->
+        <systemPay v-model="systemPayShow" />
+
+        <!-- 修改项目支付项 -->
+        <rowDataInfo v-model="isEditRowShow" />
+    </div>
 </template>
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
+import infoTable from './components/pay/info-table.vue'
+import systemPay from './components/pay/system-pay.vue'
+import rowDataInfo from './components/pay/row-data.vue'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsBasePay1',
 })
 
 const uuid = getRandom(4)
@@ -62,42 +62,16 @@ onMounted(() => {
 const setSplitRef = () => {
     //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
     nextTick(() => {
-        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
-            sizes: [20, 80],
+        window.$split(['#hc_table_card_' + uuid, '#hc_info_card_' + uuid], {
+            sizes: [70, 30],
             snapOffset: 0,
-            minSize: [50, 500],
+            minSize: [50, 300],
         })
     })
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
-
-//数据格式
-const treeProps = {
-    label: 'name',
-    children: 'children',
-    isLeaf: 'leaf',
-}
-
-//懒加载的数据
-const treeLoadNode = ({ level }, resolve) => {
-    if (level === 0) {
-        return resolve([{ name: 'region' }])
-    }
-    if (level > 3) {
-        return resolve([])
-    }
-    setTimeout(() => {
-        resolve([
-            { name: 'leaf', leaf: true },
-            { name: 'zone' },
-        ])
-    }, 500)
-}
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
 //分页
 const pageChange = ({ current, size }) => {
@@ -108,24 +82,42 @@ const pageChange = ({ current, size }) => {
 //表格数据
 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: 140 },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型', width: 160 },
+    { key: 'key4', name: '是否为扣款项', width: 100 },
+    { key: 'key5', name: '是否合计项', width: 100 },
+    { key: 'key5', name: '适用类型', width: 100 },
+    { key: 'action', name: '操作', width: 100 },
 ])
 const tableData = ref([
     { key1: '1111' },
 ])
 
-//表格选择
-const tableCheckChange = () => {
-
+//引用系统支付项
+const systemPayShow = ref(false)
+const systemPaymentClick = () => {
+    systemPayShow.value = true
 }
-</script>
 
-<style scoped lang="scss">
+//汇总项
+const tableColumn1 = ref([
+    { key: 'key1', name: '支付项编号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型' },
+    { key: 'key4', name: '合同计算公式' },
+    { key: 'key5', name: '变更计算公式' },
+    { key: 'key6', name: '本期计算公式' },
+    { key: 'key7', name: '是否为扣款项' },
+    { key: 'action', name: '操作', width: 50 },
+])
+const tableData1 = ref([
+    { key1: '1111' },
+])
 
-</style>
+//修改
+const isEditRowShow = ref(false)
+const editRowClick = () => {
+    isEditRowShow.value = true
+}
+</script>

src/views/project/periods/base/unit.vue

@@ -1,54 +1,55 @@
 <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-select v-model="searchForm.key1" filterable block placeholder="选择工区">
+                        <el-option label="工区1" value="1" />
+                        <el-option label="工区2" value="2" />
+                        <el-option label="工区3" value="3" />
+                    </el-select>
+                </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="warning">增补单元</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: 'ProjectPeriodsBaseUnit',
 })
 
 const uuid = getRandom(4)
@@ -71,10 +72,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
+const searchForm = ref({})
 
 //数据格式
 const treeProps = {
@@ -99,33 +97,48 @@ 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' },
+        ])
+    } else {
+        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' },
+        ])
+    }
+}
+
+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/periods/base/unit1.vue

@@ -1,54 +1,50 @@
 <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>
+                <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>
+                </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: 'ProjectPeriodsBaseUnit1',
 })
 
 const uuid = getRandom(4)
@@ -71,10 +67,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
+const searchForm = ref({})
 
 //数据格式
 const treeProps = {
@@ -99,33 +92,49 @@ 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: 'add', label: '新增', key: 'add' },
+            { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
+        ])
+    } else {
+        return resolve([
+            { 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/periods/project/affix.vue

@@ -1,102 +1,71 @@
 <template>
-    <hc-card>
+    <hc-new-card>
         <template #header>
-            111
+            <hc-search-input v-model="searchForm.queryValue" placeholder="请输入文件名称关键词" @search="searchClick" />
         </template>
         <template #extra>
-            222
+            <el-button hc-btn type="primary" @click="addDataClick">新增附件</el-button>
+            <el-button hc-btn type="success">一键引入系统变更附件</el-button>
         </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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
-        </div>
-    </hc-card>
+        <hc-table
+            is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+            :column="tableColumn" :datas="tableData" :loading="tableLoading"
+            @selection-change="tableCheckChange"
+        >
+            <template #action="{ row }">
+                <el-link type="success" @click="editDataClick(row)">修改</el-link>
+                <el-link type="danger">删除</el-link>
+            </template>
+        </hc-table>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
+
+        <!-- 新增编辑 -->
+        <hc-new-dialog v-model="dataModalShow" widths="500px" :title="dataModalTitle" @save="dataModalSave">
+            <el-form ref="formRef" class="p-2" label-position="top" size="large" :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-input v-model="formModel.key5" />
+                </el-form-item>
+            </el-form>
+        </hc-new-dialog>
+    </hc-new-card>
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
-import { getRandom } from 'js-fast-way'
+import { onMounted, ref } from 'vue'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsProjectAffix',
 })
 
-const uuid = getRandom(4)
-
 //渲染完成
 onMounted(() => {
-    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 searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
 })
 
+//搜索表单
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
-//数据格式
-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 searchClick = () => {
+    searchForm.value.current = 1
 }
 
 //分页
@@ -108,13 +77,11 @@ const pageChange = ({ current, size }) => {
 //表格数据
 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: '文件名称' },
+    { key: 'key2', name: '是否必须上传', align: 'center' },
+    { key: 'key3', name: '所属申请类型', align: 'center' },
+    { key: 'key4', name: '变更类型', align: 'center' },
+    { key: 'action', name: '操作', width: 100, align: 'center' },
 ])
 const tableData = ref([
     { key1: '1111' },
@@ -124,8 +91,30 @@ const tableData = ref([
 const tableCheckChange = () => {
 
 }
-</script>
 
-<style scoped lang="scss">
+//弹窗
+const dataModalShow = ref(false)
+const dataModalTitle = ref('')
+
+//新增
+const addDataClick = () => {
+    dataModalTitle.value = '新增项目变更附件'
+    dataModalShow.value = true
+}
+
+//编辑
+const editDataClick = (row) => {
+    dataModalTitle.value = '修改项目变更附件'
+    dataModalShow.value = true
+}
 
-</style>
+//弹窗表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = ref({})
+
+//弹窗保存
+const dataModalSave = () => {
+
+}
+</script>

src/views/project/periods/project/components/pay/formula.vue

@@ -0,0 +1,102 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="1200px" title="添加公式" @save="modalSave">
+        <div class="hc-search-form">
+            <el-select v-model="searchForm.key1" filterable class="w-40" placeholder="公式分类" @change="searchKeyClick">
+                <el-option label="xxx" value="1" />
+            </el-select>
+        </div>
+        <div class="hc-search-table">
+            <el-radio-group v-model="tableRadio" class="hc-search-table-radio-group">
+                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
+                    <template #action="{ row }">
+                        <el-radio :label="row.key1" size="large" />
+                    </template>
+                </hc-table>
+            </el-radio-group>
+        </div>
+    </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('处理数据')
+    }
+})
+
+//搜索表单
+const searchForm = ref({})
+const searchKeyClick = () => {
+
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'key1', name: '公式编号' },
+    { key: 'key2', name: '公式名称' },
+    { key: 'key3', name: '备注' },
+    { key: 'action', name: '选择', width: 50, align: 'center' },
+]
+const tableData = ref([
+    { key1: '1111' },
+    { key1: '222' },
+])
+
+const tableRadio = ref('')
+
+const modalSave = () => {
+    emit('finish')
+}
+</script>
+
+<style scoped lang="scss">
+.hc-search-form {
+    position: relative;
+    margin-bottom: 10px;
+}
+.hc-search-table {
+    position: relative;
+    height: calc(100% - 42px);
+}
+.hc-search-table-radio-group {
+    display: block;
+    height: 100%;
+}
+</style>
+
+<style lang="scss">
+.hc-search-table .hc-search-table-radio-group .el-table[hc].new .cell .el-radio {
+    margin-right: 0;
+    height: 20px;
+    .el-radio__label {
+        display: none;
+    }
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+    <hc-info-table>
+        <tr>
+            <hc-info-table-td center is-title>支付项编号：</hc-info-table-td>
+            <hc-info-table-td width="120px">100章</hc-info-table-td>
+            <hc-info-table-td center is-title>支付项名称：</hc-info-table-td>
+            <hc-info-table-td width="120px">100章</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>支付项类型：</hc-info-table-td>
+            <hc-info-table-td width="120px">100章</hc-info-table-td>
+            <hc-info-table-td center is-title>是否为扣款项：</hc-info-table-td>
+            <hc-info-table-td width="120px">否</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>是否合计项：</hc-info-table-td>
+            <hc-info-table-td width="120px">否</hc-info-table-td>
+            <hc-info-table-td center is-title>是否显示百分比：</hc-info-table-td>
+            <hc-info-table-td width="120px">是</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>是否手动输入：</hc-info-table-td>
+            <hc-info-table-td width="120px">否</hc-info-table-td>
+            <hc-info-table-td center is-title>排序号：</hc-info-table-td>
+            <hc-info-table-td width="120px">1</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>合同计算公式名称：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">章清单合同原总金额</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>变更计算公式名称：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">章清单变更金额</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>本期计算公式名称：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">章清单本期完成金额</hc-info-table-td>
+        </tr>
+        <tr>
+            <hc-info-table-td center is-title>备注：</hc-info-table-td>
+            <hc-info-table-td width="auto" colspan="3">-</hc-info-table-td>
+        </tr>
+    </hc-info-table>
+</template>

src/views/project/periods/project/components/pay/row-data.vue

@@ -0,0 +1,116 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="666px" title="修改项目支付项" @save="modalSave">
+        <el-scrollbar class="hc-dialog-scrollbar">
+            <el-form ref="formRef" class="p-2" label-position="left" 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="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item class="nowrap" label="合同计算公式：">
+                    <el-input v-model="formModel.key4" class="flex-1" disabled />
+                    <el-link type="primary" class="ml-2 line-height-normal" @click="formulaClick">添加公式</el-link>
+                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
+                </el-form-item>
+                <el-form-item class="nowrap" label="变更计算公式：">
+                    <el-input v-model="formModel.key5" disabled class="flex-1" />
+                    <el-link type="primary" class="ml-2 line-height-normal">添加公式</el-link>
+                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
+                </el-form-item>
+                <el-form-item class="nowrap" label="本期计算公式：">
+                    <el-input v-model="formModel.key6" disabled class="flex-1" />
+                    <el-link type="primary" class="ml-2 line-height-normal">添加公式</el-link>
+                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
+                </el-form-item>
+                <el-form-item label="是否为扣款项：">
+                    <el-select v-model="formModel.key7" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否加粗：">
+                    <el-select v-model="formModel.key8" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否手动输入：">
+                    <el-select v-model="formModel.key9" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否显示百分比：">
+                    <el-select v-model="formModel.key10" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="支付项适用类型：">
+                    <el-select v-model="formModel.key11" block>
+                        <el-option label="xx项" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="排序号：">
+                    <el-input v-model="formModel.key12" />
+                </el-form-item>
+                <el-form-item label="备注：">
+                    <el-input v-model="formModel.key13" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+    </hc-new-dialog>
+    <HcFormula v-model="isFormulaShow" />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import HcFormula from './formula.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 formRef = ref(null)
+const formModel = ref({ })
+const formRules = ref({})
+
+const modalSave = () => {
+    emit('finish')
+}
+
+//公式
+const isFormulaShow = ref(false)
+const formulaClick = () => {
+    isFormulaShow.value = true
+}
+</script>

src/views/project/periods/project/components/pay/system-pay.vue

@@ -0,0 +1,64 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="1200px" title="引用系统支付项" @save="modalSave">
+        <hc-table
+            :column="tableColumn" :datas="tableData" :loading="tableLoading"
+            is-new :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+            is-check @selection-change="tableCheckChange"
+        />
+    </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('处理数据')
+    }
+})
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'key1', name: '支付项编号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型' },
+    { key: 'key4', name: '是否为扣款项' },
+    { key: 'key5', name: '是否合计项' },
+    { key: 'key5', name: '适用类型' },
+]
+const tableData = ref([
+    { key1: '1111' },
+])
+
+//表格选择
+const tableCheckChange = (checks) => {
+    console.log(checks)
+}
+const modalSave = () => {
+    emit('finish')
+}
+</script>

src/views/project/periods/project/components/report/report-form.vue

@@ -0,0 +1,49 @@
+<template>
+    <hc-new-dialog v-model="isShow" widths="666px" title="项目报表初始化" @save="modalSave">
+        <el-checkbox-group v-model="checkList" class="w-full p-4">
+            <el-checkbox label="中间计量申请" />
+            <el-checkbox label="开工预付款" />
+            <el-checkbox label="材料预付款" />
+        </el-checkbox-group>
+    </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('处理数据')
+    }
+})
+
+const checkList = ref([])
+
+const modalSave = () => {
+    emit('finish')
+}
+</script>

src/views/project/periods/project/components/report/row-data.vue

@@ -0,0 +1,76 @@
+<template>
+    <hc-new-dialog v-model="isShow" widths="666px" title="项目报表" @save="modalSave">
+        <el-form ref="formRef" class="p-4" label-position="left" 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-input v-model="formModel.key3" />
+            </el-form-item>
+            <el-form-item label="数据文件路径：">
+                <el-input v-model="formModel.key4" />
+            </el-form-item>
+            <el-form-item label="前处理脚本方法：">
+                <el-input v-model="formModel.key5" />
+            </el-form-item>
+            <el-form-item label="后处理脚本方法：">
+                <el-input v-model="formModel.key6" />
+            </el-form-item>
+            <el-form-item label="持久化参数集合：">
+                <el-input v-model="formModel.key7" />
+            </el-form-item>
+            <el-form-item label="顺序号：">
+                <el-input v-model="formModel.key8" />
+            </el-form-item>
+            <el-form-item label="备注：">
+                <el-input v-model="formModel.key9" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+            </el-form-item>
+        </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('处理数据')
+    }
+})
+
+//弹窗表单
+const formRef = ref(null)
+const formModel = ref({ })
+const formRules = ref({})
+
+const modalSave = () => {
+    emit('finish')
+}
+</script>

src/views/project/periods/project/components/report/template.vue

@@ -0,0 +1,45 @@
+<template>
+    <hc-new-dialog v-model="isShow" is-table widths="95%" title="修改报表模板" @save="modalSave">
+        <hc-online-office :src="docxUrl" title="测试的文档.docx" />
+    </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('处理数据')
+    }
+})
+
+const docxUrl = ref('https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20231023/0663b9e290b8d038003cc95bbe3d9422.xlsx')
+
+const modalSave = () => {
+    emit('finish')
+}
+</script>

src/views/project/periods/project/pay.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>
+    <div class="relative h-full flex">
+        <div :id="`hc_table_card_${uuid}`">
+            <hc-new-card>
+                <template #header>
+                    <el-button hc-btn type="primary" @click="systemPaymentClick">引用系统支付项</el-button>
+                </template>
+                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" is-current-row>
+                    <template #action="{ row }">
+                        <el-link type="success" @click="editRowClick(row)">修改</el-link>
+                        <el-link type="danger">删除</el-link>
                     </template>
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-new-card>
+        </div>
+        <div :id="`hc_info_card_${uuid}`" class="flex-1">
+            <hc-new-card scrollbar>
+                <infoTable />
+                <hc-title title="汇总项">
                     <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>
+                        <el-link type="primary">添加汇总项</el-link>
                     </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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
+                </hc-title>
+                <hc-table :column="tableColumn1" :datas="tableData1" is-new :index-style="{ width: 60 }">
+                    <template #action="{ row }">
+                        <el-link type="danger">删除</el-link>
                     </template>
-                </hc-card-item>
-            </div>
+                </hc-table>
+            </hc-new-card>
         </div>
-    </hc-card>
+
+        <!-- 引用系统支付项 -->
+        <systemPay v-model="systemPayShow" />
+
+        <!-- 修改项目支付项 -->
+        <rowDataInfo v-model="isEditRowShow" />
+    </div>
 </template>
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
+import infoTable from './components/pay/info-table.vue'
+import systemPay from './components/pay/system-pay.vue'
+import rowDataInfo from './components/pay/row-data.vue'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsProjectPay',
 })
 
 const uuid = getRandom(4)
@@ -62,42 +62,16 @@ onMounted(() => {
 const setSplitRef = () => {
     //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
     nextTick(() => {
-        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
-            sizes: [20, 80],
+        window.$split(['#hc_table_card_' + uuid, '#hc_info_card_' + uuid], {
+            sizes: [70, 30],
             snapOffset: 0,
-            minSize: [50, 500],
+            minSize: [50, 300],
         })
     })
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
-
-//数据格式
-const treeProps = {
-    label: 'name',
-    children: 'children',
-    isLeaf: 'leaf',
-}
-
-//懒加载的数据
-const treeLoadNode = ({ level }, resolve) => {
-    if (level === 0) {
-        return resolve([{ name: 'region' }])
-    }
-    if (level > 3) {
-        return resolve([])
-    }
-    setTimeout(() => {
-        resolve([
-            { name: 'leaf', leaf: true },
-            { name: 'zone' },
-        ])
-    }, 500)
-}
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
 //分页
 const pageChange = ({ current, size }) => {
@@ -108,24 +82,42 @@ const pageChange = ({ current, size }) => {
 //表格数据
 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: 140 },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型', width: 160 },
+    { key: 'key4', name: '是否为扣款项', width: 100 },
+    { key: 'key5', name: '是否合计项', width: 100 },
+    { key: 'key5', name: '适用类型', width: 100 },
+    { key: 'action', name: '操作', width: 100 },
 ])
 const tableData = ref([
     { key1: '1111' },
 ])
 
-//表格选择
-const tableCheckChange = () => {
-
+//引用系统支付项
+const systemPayShow = ref(false)
+const systemPaymentClick = () => {
+    systemPayShow.value = true
 }
-</script>
 
-<style scoped lang="scss">
+//汇总项
+const tableColumn1 = ref([
+    { key: 'key1', name: '支付项编号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型' },
+    { key: 'key4', name: '合同计算公式' },
+    { key: 'key5', name: '变更计算公式' },
+    { key: 'key6', name: '本期计算公式' },
+    { key: 'key7', name: '是否为扣款项' },
+    { key: 'action', name: '操作', width: 50 },
+])
+const tableData1 = ref([
+    { key1: '1111' },
+])
 
-</style>
+//修改
+const isEditRowShow = ref(false)
+const editRowClick = () => {
+    isEditRowShow.value = true
+}
+</script>

src/views/project/periods/project/report.vue

@@ -1,102 +1,69 @@
 <template>
-    <hc-card>
+    <hc-new-card>
         <template #header>
-            111
+            <div class="mr-2 w-40">
+                <el-select v-model="searchForm.key1" filterable block placeholder="报表分类">
+                    <el-option label="中间计量申请" value="1" />
+                </el-select>
+            </div>
+            <div class="mr-2 w-40">
+                <el-input v-model="searchForm.key2" placeholder="报表编号" />
+            </div>
+            <hc-search-input v-model="searchForm.queryValue" placeholder="报表名称" @search="searchClick" />
         </template>
         <template #extra>
-            222
+            <el-button hc-btn type="primary" @click="addRowData">新增</el-button>
+            <el-button hc-btn color="#9e6ab8" style="color: white" @click="initReportForm">报表模板初始化</el-button>
+            <el-button hc-btn type="danger">批量删除</el-button>
         </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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
-        </div>
-    </hc-card>
+        <hc-table
+            is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+            :column="tableColumn" :datas="tableData" :loading="tableLoading"
+            @selection-change="tableCheckChange"
+        >
+            <template #action="{ row }">
+                <el-link type="success">修改</el-link>
+                <el-link type="warning" @click="reportTemplateClick">修改报表模板</el-link>
+                <el-link type="danger">删除</el-link>
+            </template>
+        </hc-table>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
+
+        <!-- 修改项目支付项 -->
+        <rowDataInfo v-model="isRowDataShow" />
+
+        <!-- 报表模板初始化 -->
+        <reportForm v-model="isReportFormShow" />
+
+        <!-- 修改报表模板 -->
+        <reportTemplate v-model="isTemplateShow" />
+    </hc-new-card>
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
-import { getRandom } from 'js-fast-way'
+import { onMounted, ref } from 'vue'
+import rowDataInfo from './components/report/row-data.vue'
+import reportForm from './components/report/report-form.vue'
+import reportTemplate from './components/report/template.vue'
+import { addDocumentsJs } from '~uti/tools'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsProjectReport',
 })
 
-const uuid = getRandom(4)
-
 //渲染完成
 onMounted(() => {
-    setSplitRef()
+    addDocumentsJs()
 })
 
-//初始化设置拖动分割线
-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 searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
-
-//数据格式
-const treeProps = {
-    label: 'name',
-    children: 'children',
-    isLeaf: 'leaf',
-}
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
-//懒加载的数据
-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 searchClick = () => {
+    searchForm.value.current = 1
 }
 
 //分页
@@ -108,13 +75,9 @@ const pageChange = ({ current, size }) => {
 //表格数据
 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: '报表编号' },
+    { key: 'key2', name: '报表名称', align: 'center' },
+    { key: 'action', name: '操作', width: 180, align: 'center' },
 ])
 const tableData = ref([
     { key1: '1111' },
@@ -124,8 +87,22 @@ const tableData = ref([
 const tableCheckChange = () => {
 
 }
-</script>
 
-<style scoped lang="scss">
 
-</style>
+//新增
+const isRowDataShow = ref(false)
+const addRowData = () => {
+    isRowDataShow.value = true
+}
+
+//报表模板初始化
+const isReportFormShow = ref(false)
+const initReportForm = () => {
+    isReportFormShow.value = true
+}
+
+const isTemplateShow = ref(false)
+const reportTemplateClick = () => {
+    isTemplateShow.value = true
+}
+</script>

src/views/project/periods/project/unit.vue

@@ -1,46 +1,49 @@
 <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>
-                        </template>
-                    </hc-table>
-                    <template #action>
-                        <hc-pages :pages="searchForm" @change="pageChange" />
-                    </template>
-                </hc-card-item>
-            </div>
+    <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-new-card>
         </div>
-    </hc-card>
+        <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" />
+                </template>
+            </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>
+            </el-form>
+        </hc-new-dialog>
+    </div>
 </template>
 
 <script setup>
@@ -48,7 +51,7 @@ import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
 
 defineOptions({
-    name: 'DebitPayAdminApply',
+    name: 'ProjectPeriodsProjectUnit',
 })
 
 const uuid = getRandom(4)
@@ -71,10 +74,7 @@ const setSplitRef = () => {
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null, current: 1, size: 10, total: 0,
-})
-
+const searchForm = ref({ current: 1, size: 10, total: 0 })
 
 //数据格式
 const treeProps = {
@@ -99,6 +99,32 @@ const treeLoadNode = ({ level }, resolve) => {
     }, 500)
 }
 
+//根节点菜单
+const treeRootMenu = [
+    { 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 treeMenuTap = ({ key, node, data }) => {
+    if (key === 'add') {
+        treeModalTitle.value = '新增下级节点'
+        treeModalShow.value = true
+    }
+    if (key === 'edit') {
+        treeModalTitle.value = '项目计量单元修改'
+        treeModalShow.value = true
+    }
+}
+
+
 //分页
 const pageChange = ({ current, size }) => {
     searchForm.value.current = current
@@ -108,24 +134,26 @@ const pageChange = ({ current, size }) => {
 //表格数据
 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: '节点编号' },
+    { key: 'key2', name: '节点名称' },
+    { key: 'key3', name: '节点类型' },
+    { key: 'key4', name: '工程类型' },
 ])
 const tableData = ref([
     { key1: '1111' },
 ])
 
-//表格选择
-const tableCheckChange = () => {
+//弹窗
+const treeModalShow = ref(false)
+const treeModalTitle = ref('')
 
-}
-</script>
+//弹窗表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = ref({})
 
-<style scoped lang="scss">
+//弹窗保存
+const treeModalSave = () => {
 
-</style>
+}
+</script>