合同工程清单

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

@@ -2,20 +2,23 @@
     <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-lazy-tree :h-props="treeProps" is-load-menu @load="treeLoadNode" @loadMenu="treeLoadMenu" @menuTap="treeMenuTap" @nodeTap="treeNodeTap" />
             </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="supplementsModalShow = true">增补清单</el-button>
+                    <el-button v-if="!isInfoView" hc-btn type="primary" @click="supplementsModalShow = true">增补清单</el-button>
                     <el-button hc-btn type="primary" @click="leadModalShow = true">导入</el-button>
                     <el-button hc-btn type="primary">导出</el-button>
                 </template>
                 <div class="relative">
-                    <infoTable />
-                    <el-divider border-style="dashed">下级节点列表</el-divider>
-                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" />
+                    <infoTable1 v-if="isInfoView" />
+                    <template v-else>
+                        <infoTable />
+                        <el-divider border-style="dashed">下级节点列表</el-divider>
+                        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" />
+                    </template>
                 </div>
             </hc-new-card>
         </div>
@@ -247,8 +250,25 @@
         </hc-new-dialog>
 
         <!-- 调整排序 -->
-        <hc-new-dialog v-model="sortModalShow" widths="1100px" title="调整排序" @save="sortModalSave">
-            1111
+        <hc-new-dialog v-model="sortModalShow" is-table widths="1100px" title="调整排序" @save="sortModalSave">
+            <hc-table
+                ui="hc-table-row-drop"
+                :column="sortTableColumn" :datas="sortTableData" :loading="sortTableLoading"
+                is-row-drop quick-sort is-new :index-style="{ width: 80 }"
+                @row-drop="sortTableRowDrop" @row-sort="sortTableRowDrop"
+            >
+                <template #key2="{ row }">
+                    <span class="text-link">{{ row?.key2 }}</span>
+                </template>
+                <template #action="{ index }">
+                    <span class="text-link text-xl" @click="upSortClick(index)">
+                        <HcIcon name="arrow-up" fill />
+                    </span>
+                    <span class="text-link ml-2 text-xl" @click="downSortClick(index)">
+                        <HcIcon name="arrow-down" fill />
+                    </span>
+                </template>
+            </hc-table>
         </hc-new-dialog>
     </div>
 </template>
@@ -258,6 +278,7 @@ import { nextTick, onMounted, ref } from 'vue'
 import { getRandom } from 'js-fast-way'
 import { getHeader } from 'hc-vue3-ui'
 import infoTable from './components/check-list/info-table.vue'
+import infoTable1 from './components/check-list/info-table1.vue'
 
 defineOptions({
     name: 'ProjectDebitContractList',
@@ -293,21 +314,27 @@ const treeProps = {
 }
 
 //懒加载的数据
-const treeLoadNode = ({ level }, resolve) => {
+const isInfoView = ref(false)
+const treeLoadNode = ({ level, node }, resolve) => {
     if (level === 0) {
-        return resolve([{ name: '根节点', type: 1 }])
+        return resolve([{ name: '根节点', type: 2 }])
     }
     if (level > 3) {
         return resolve([])
     }
     setTimeout(() => {
         resolve([
-            { name: '非清单节点', type: 1, leaf: true },
-            { name: '清单节点', type: 2 },
+            { name: '清单节点', type: 2, leaf: true },
+            { name: '非清单节点', type: 1 },
         ])
     }, 500)
 }
 
+//树被点击
+const treeNodeTap = ({ node }) => {
+    isInfoView.value = !!node.isLeaf
+}
+
 //菜单
 const treeLoadMenu = ({ item, level }, resolve) => {
     if (level === 1) {
@@ -329,7 +356,7 @@ const treeLoadMenu = ({ item, level }, resolve) => {
 
 const menuType = ref('')
 const treeItem = ref({})
-const treeMenuTap = ({ key, node, data }) => {
+const treeMenuTap = ({ key, data }) => {
     treeItem.value = data
     if (key === 'add') {
         menuType.value = 'add'
@@ -406,6 +433,46 @@ const supplementsModalSave = () => {
 
 //调整排序
 const sortModalShow = ref(false)
+//表格数据
+const sortTableColumn = ref([
+    { key:'key1', name: '文件编号', width: 160 },
+    { key:'key2', name: '文件名称' },
+    { key:'action', name: '排序', width: 90 },
+])
+const sortTableLoading = ref(false)
+const sortTableData = ref([
+    { key1: '1' }, { key1: '2' }, { key1: '3' },
+])
+//拖动完成
+const sortTableRowDrop = (rows) => {
+    sortTableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        sortTableData.value = rows
+    })
+}
+
+//向下
+const downSortClick = (index) => {
+    const indexs = index + 1
+    const data = sortTableData.value
+    if (indexs !== data.length) {
+        const tmp = data.splice(indexs, 1)
+        sortTableData.value.splice(index, 0, tmp[0])
+    } else {
+        window?.$message?.warning('已经处于置底，无法下移')
+    }
+}
+
+//向上
+const upSortClick = (index) => {
+    const data = sortTableData.value || []
+    if (index !== 0) {
+        const tmp = data.splice(index - 1, 1)
+        sortTableData.value.splice(index, 0, tmp[0])
+    } else {
+        window?.$message?.warning('已经处于置顶，无法上移')
+    }
+}
 const sortModalSave = () => {
     sortModalShow.value = false
 }

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

@@ -0,0 +1,48 @@
+<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">-</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">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>