零号变更

src/api/modules/alter/admin/zero.js

@@ -0,0 +1,20 @@
+import { HcApi } from '../../../request/index'
+//  零号变更
+export default {
+    //获取节点下的零号变更
+    async getZeroChange(form) {
+        return HcApi({
+            url: '/api/blade-meter/changeTokenForm/getZeroChange',
+            method: 'get',
+            params: form,
+        }, false)
+    },
+    //一键生成零号变更
+    async buildZeroChange(form) {
+        return HcApi({
+            url: '/api/blade-meter/changeTokenForm/buildZeroChange',
+            method: 'get',
+            params: form,
+        }, false)
+    },
+}

src/views/alter/admin/zero.vue

@@ -13,46 +13,21 @@
         <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-lazy-tree tree-key="id" :h-props="treeProps" @load="treeLoadNode" @nodeTap="treeNodeTap" />
                 </hc-card-item>
             </div>
             <div :id="`hc_table_card_${uuid}`" class="flex-1">
-                <hc-card-item style="height: 106px">
+                <hc-card-item class="h-full">
                     <template #header>
-                        <div class="font-400 text-orange">温馨提示： 可选择树节点生成和删除该节点下所有清单的零号变更</div>
+                        <div class="font-400 text-orange">零号变更数据列表</div>
                     </template>
                     <template #extra>
-                        <el-button hc-btn type="danger">
-                            <HcIcon name="delete-bin" />
-                            <span>批量删除</span>
-                        </el-button>
                         <el-button hc-btn type="primary">
-                            <HcIcon name="pencil-ruler-2" />
+                            <hc-icon name="pencil-ruler-2" />
                             <span>一键生成零号变更</span>
                         </el-button>
                     </template>
-                    <el-form inline :model="searchForm" class="search-form-box">
-                        <el-form-item label="零号变更编号">
-                            <el-input v-model="searchForm.key1" placeholder="零号变更编号" clearable />
-                        </el-form-item>
-                        <el-form-item label="生成时间">
-                            <el-date-picker v-model="searchForm.key2" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
-                        </el-form-item>
-                        <el-form-item label="零号变更金额">
-                            <el-input v-model="searchForm.key3" placeholder="零号变更金额" clearable />
-                        </el-form-item>
-                    </el-form>
-                </hc-card-item>
-                <!-- 数据列表 -->
-                <hc-card-item class="mt-3" style="height: calc(100% - 106px - 0.75rem);">
-                    <template #header>
-                        <div class="font-400 text-orange">零号变更数据列表</div>
-                    </template>
-                    <hc-table :is-index="false" :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new>
-                        <template #action="{ row }">
-                            <el-link type="danger">删除</el-link>
-                        </template>
-                    </hc-table>
+                    <hc-table :is-index="false" :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new />
                 </hc-card-item>
             </div>
         </div>
@@ -61,13 +36,19 @@
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
-import { getRandom } from 'js-fast-way'
+import { useAppStore } from '~src/store'
+import { getArrValue, getObjValue, getRandom } from 'js-fast-way'
+import unitApi from '~api/project/debit/contract/unit'
+import mainApi from '~api/alter/admin/zero'
 
 defineOptions({
     name: 'AlterAdminZero',
 })
 
 const uuid = getRandom(4)
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId || '')
+const contractId = ref(useAppState.getContractId || '')
 
 //渲染完成
 onMounted(() => {
@@ -100,52 +81,62 @@ const tabChange = (item) => {
 
 //数据格式
 const treeProps = {
-    label: 'name',
+    label: 'nodeName',
     children: 'children',
-    isLeaf: 'leaf',
+    isLeaf: 'notExsitChild',
 }
 
 //懒加载的数据
-const treeLoadNode = ({ level }, resolve) => {
-    if (level === 0) {
-        return resolve([{ name: 'region' }])
-    }
-    if (level > 3) {
-        return resolve([])
+const treeLoadNode = async ({ item, level }, resolve) => {
+    let id = 0
+    if (level !== 0) {
+        const nodeData = getObjValue(item)
+        id = nodeData?.id || ''
     }
-    setTimeout(() => {
-        resolve([
-            { name: 'leaf', leaf: true },
-            { name: 'zone' },
-        ])
-    }, 500)
+    //获取数据
+    const { data } = await unitApi.lazyTree({
+        contractId: contractId.value,
+        id: id,
+    })
+    resolve(getArrValue(data))
+}
+const nodeId = ref('')
+const treeNodeTap = ({ data }) => {
+    nodeId.value = data?.id || ''
+    getTableData()
 }
 
 //搜索表单
-const searchForm = ref({
-    key1: null,
-})
+const searchForm = ref({ key1: null, nodeId: null })
 
 //表格数据
 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: 'key7', name: '现划分数量' },
-    { key: 'key8', name: '修正量' },
-    { key: 'key9', name: '修正金额' },
-    { key: 'key10', name: '核实量' },
-    { key: 'key11', name: '核实金额' },
-    { key: 'key12', name: '状态' },
-    { key: 'action', name: '操作', width: 80, align: 'center' },
-])
-const tableData = ref([
-    { key1: '1111' },
+    { key: 'formNumber', name: '清单编号' },
+    { key: 'formName', name: '清单名称' },
+    { key: 'currentPrice', name: '现行单价' },
+    { key: 'contractTotal', name: '合同数量' },
+    { key: 'contractMoney', name: '清单金额' },
+    { key: 'buildChangeTotal', name: '生成变更时划分数量' },
+    { key: 'currentChangeTotal', name: '现划分数量' },
+    { key: 'updateTotal', name: '修正量' },
+    { key: 'updateMoney', name: '修正金额' },
+    { key: 'verifyTotal', name: '核实量' },
+    { key: 'verifyMoney', name: '核实金额' },
+    { key: 'statusName', name: '状态' },
 ])
+const tableData = ref([])
+const getTableData = async () => {
+    tableData.value = []
+    tableLoading.value = true
+    const { data } = await mainApi.getZeroChange({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        nodeId: nodeId.value,
+    })
+    tableData.value = getArrValue(data)
+    tableLoading.value = false
+}
 </script>
 
 <style lang="scss">

src/views/alter/admin/zero_bak.vue

@@ -0,0 +1,155 @@
+<template>
+    <hc-new-card>
+        <template #header>
+            <hc-new-switch :datas="tabTab" :keys="tabKey" :round="false" size="default" @change="tabChange" />
+            <div v-if="tabKey === 'key2'" class="ml-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>
+        </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 style="height: 106px">
+                    <template #header>
+                        <div class="font-400 text-orange">温馨提示： 可选择树节点生成和删除该节点下所有清单的零号变更</div>
+                    </template>
+                    <template #extra>
+                        <el-button hc-btn type="danger">
+                            <hc-icon name="delete-bin" />
+                            <span>批量删除</span>
+                        </el-button>
+                        <el-button hc-btn type="primary">
+                            <hc-icon name="pencil-ruler-2" />
+                            <span>一键生成零号变更</span>
+                        </el-button>
+                    </template>
+                    <el-form inline :model="searchForm" class="search-form-box">
+                        <el-form-item label="零号变更编号">
+                            <el-input v-model="searchForm.key1" placeholder="零号变更编号" clearable />
+                        </el-form-item>
+                        <el-form-item label="生成时间">
+                            <el-date-picker v-model="searchForm.key2" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
+                        </el-form-item>
+                        <el-form-item label="零号变更金额">
+                            <el-input v-model="searchForm.key3" placeholder="零号变更金额" clearable />
+                        </el-form-item>
+                    </el-form>
+                </hc-card-item>
+                <!-- 数据列表 -->
+                <hc-card-item class="mt-3" style="height: calc(100% - 106px - 0.75rem);">
+                    <template #header>
+                        <div class="font-400 text-orange">零号变更数据列表</div>
+                    </template>
+                    <hc-table :is-index="false" :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new>
+                        <template #action="{ row }">
+                            <el-link type="danger">删除</el-link>
+                        </template>
+                    </hc-table>
+                </hc-card-item>
+            </div>
+        </div>
+    </hc-new-card>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref } from 'vue'
+import { getRandom } from 'js-fast-way'
+
+defineOptions({
+    name: 'AlterAdminZero',
+})
+
+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],
+        })
+    })
+}
+
+//类型tab数据和相关处理
+const tabKey = ref('key1')
+const tabTab = ref([
+    { key: 'key1', name: '普通变更' },
+    { key: 'key2', name: '工区变更' },
+])
+
+const tabChange = (item) => {
+    tabKey.value = item?.key
+    console.log(item)
+}
+
+//数据格式
+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({
+    key1: null,
+})
+
+//表格数据
+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: 'key7', name: '现划分数量' },
+    { key: 'key8', name: '修正量' },
+    { key: 'key9', name: '修正金额' },
+    { key: 'key10', name: '核实量' },
+    { key: 'key11', name: '核实金额' },
+    { key: 'key12', name: '状态' },
+    { key: 'action', name: '操作', width: 80, align: 'center' },
+])
+const tableData = ref([
+    { key1: '1111' },
+])
+</script>
+
+<style lang="scss">
+.search-form-box .el-form-item {
+    margin-bottom: 0;
+}
+</style>