|
|
@@ -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
|
|
|
}
|
