合同工程清单

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

@@ -314,7 +314,6 @@ const treeProps = {
 }
 
 //懒加载的数据
-const isInfoView = ref(false)
 const treeLoadNode = ({ level, node }, resolve) => {
     if (level === 0) {
         return resolve([{ name: '根节点', type: 2 }])
@@ -331,6 +330,7 @@ const treeLoadNode = ({ level, node }, resolve) => {
 }
 
 //树被点击
+const isInfoView = ref(false)
 const treeNodeTap = ({ node }) => {
     isInfoView.value = !!node.isLeaf
 }
@@ -435,8 +435,7 @@ const supplementsModalSave = () => {
 const sortModalShow = ref(false)
 //表格数据
 const sortTableColumn = ref([
-    { key:'key1', name: '文件编号', width: 160 },
-    { key:'key2', name: '文件名称' },
+    { key:'key1', name: '节点名称', width: 160 },
     { key:'action', name: '排序', width: 90 },
 ])
 const sortTableLoading = ref(false)

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

@@ -0,0 +1,85 @@
+<template>
+    <hc-new-dialog is-table :padding="false" widths="1200px" :show="isShow" title="添加合同工程清单" @save="modalSave" @close="modalClose">
+        <hc-new-card>
+            <template #search>
+                <hc-search-input v-model="searchForm.queryValue" placeholder="请输入清单编号关键词" @search="searchClick" />
+            </template>
+            <hc-table
+                :column="tableColumn" :datas="tableData" :loading="tableLoading"
+                is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+                @selection-change="tableCheckChange"
+            />
+        </hc-new-card>
+    </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({
+    queryValue: '',
+})
+
+const searchClick = () => {
+
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = [
+    { key: 'key1', name: '清单编号' },
+    { key: 'key2', name: '清单名称' },
+    { key: 'key3', name: '现行单价' },
+    { key: 'key4', name: '合同数量' },
+    { key: 'key5', name: '合同变更后数量' },
+    { key: 'key6', name: '已分解量' },
+    { key: 'key7', name: '是否增补' },
+]
+const tableData = ref([
+    { key1: '1111' },
+])
+
+//表格选择
+const tableCheckChange = (checks) => {
+    console.log(checks)
+}
+const modalSave = () => {
+    emit('finish')
+    modalClose()
+}
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>

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

@@ -1,97 +1,124 @@
 <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 v-model="isShow" widths="90%" :is-table="isTable" :padding="false" title="合同计量单元修改" @save="modalSave">
+        <hc-body scrollbar :contents="!isTable">
+            <el-form ref="formRef" 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" placeholder="节点类型" block>
+                                <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" placeholder="工程类型" disabled block>
+                                <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" placeholder="是否增补" disabled block>
+                                <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="施工图金额" disabled>
+                                <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="变更后金额" disabled>
+                                <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>
+            <template v-if="isTable">
+                <el-divider border-style="dashed" content-position="left">分解清单列表</el-divider>
+                <hc-title>
+                    <span class="text-sm text-orange">温馨提示：累计分解量 > 合同变更后量，整行文字红色</span>
+                    <template #extra>
+                        <el-button hc-btn type="primary" @click="addCheckListShow = true">添加</el-button>
+                    </template>
+                </hc-title>
+                <hc-table :column="tableColumn" :datas="tableData" is-new :index-style="{ width: 60 }">
+                    <template #key8="{ row }">
+                        <hc-table-input v-model="row.key8" />
+                    </template>
+                    <template #action="{ row }">
+                        <el-link type="danger">删除</el-link>
+                    </template>
+                </hc-table>
+                <div class="mt-4 text-orange">温馨提示：进行过变更的分解清单不允许修改编辑，分解清单编辑后，请重新下达零号变更台账</div>
+            </template>
+        </hc-body>
     </hc-new-dialog>
+    <!-- 添加合同工程清单 -->
+    <AddCheckList v-model="addCheckListShow" />
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
+import AddCheckList from './addCheckList.vue'
 
 const props = defineProps({
     ids: {
         type: [String, Number],
         default: '',
     },
+    isTable: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 //事件
@@ -122,7 +149,26 @@ const formRef = ref(null)
 const formModel = ref({})
 const formRules = ref({})
 
+//列表
+const tableColumn = ref([
+    { 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: 'action', name: '操作', width: 80, align: 'center' },
+])
+const tableData = ref([
+    { key1: '101-1-a' },
+])
+
 const modalSave = () => {
     emit('finish')
 }
+
+const addCheckListShow = ref(false)
 </script>

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

@@ -5,7 +5,7 @@
                 <template #header>
                     <el-button hc-btn type="primary">重新设置treeCode</el-button>
                 </template>
-                <hc-lazy-tree :h-props="treeProps" is-load-menu @load="treeLoadNode" @loadMenu="treeLoadMenu" @menuTap="treeMenuTap" />
+                <hc-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">
@@ -13,7 +13,7 @@
                 <template #extra>
                     <el-button hc-btn type="primary" @click="editModalShow = true">修改</el-button>
                     <el-button hc-btn type="danger">删除</el-button>
-                    <el-button hc-btn type="warning">增补单元</el-button>
+                    <el-button hc-btn type="warning" @click="treeModalShow = true">增补单元</el-button>
                     <el-button hc-btn type="success">导入</el-button>
                 </template>
                 <div class="relative">
@@ -36,7 +36,29 @@
         <treeForm v-model="treeModalShow" />
 
         <!-- 修改合同计量单元 -->
-        <rowData v-model="editModalShow" />
+        <rowData v-model="editModalShow" :is-table="isInfoView" />
+
+        <!-- 调整排序 -->
+        <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>
 
@@ -96,6 +118,12 @@ const treeLoadNode = ({ level }, resolve) => {
     }, 500)
 }
 
+//节点点击
+const isInfoView = ref(false)
+const treeNodeTap = ({ node }) => {
+    isInfoView.value = node.isLeaf
+}
+
 //菜单
 const treeLoadMenu = ({ item, level }, resolve) => {
     if (level === 1) {
@@ -124,6 +152,9 @@ const treeMenuTap = ({ key, node, data }) => {
     if (key === 'edit') {
         treeModalShow.value = true
     }
+    if (key === 'sort') {
+        sortModalShow.value = true
+    }
 }
 
 //表格数据
@@ -143,6 +174,51 @@ const tableData = ref([
 
 //弹窗
 const treeModalShow = ref(false)
-
 const editModalShow = ref(false)
+
+
+//调整排序
+const sortModalShow = ref(false)
+//表格数据
+const sortTableColumn = ref([
+    { key:'key1', name: '节点名称', width: 160 },
+    { 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
+}
 </script>