项目计量单元树接口对接

src/api/modules/project/debit/unit.js

@@ -0,0 +1,61 @@
+import { HcApi } from '../../../request/index'
+
+ 
+export default {
+    //懒加载系统树
+    async lazyTree(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/tree/project/lazy',
+            method: 'get',
+            params: form,
+        }, msg)
+    },
+    //获取默认项目
+    async refresh(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/tree/project/refresh',
+            method: 'get',
+            params: form,
+        }, msg)
+    },
+      //获取节点详情
+      async getNodeDetail(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/tree/project/detail',
+            method: 'get',
+            params: form,
+        }, msg)
+    },
+    //修改节点
+   async updateForm(form, msg = true) {
+    return HcApi({
+        url: '/api/blade-meter/tree/project/update',
+        method: 'post',
+        data: form,
+    }, msg)
+   },
+    //新增节点
+    async addNode(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/tree/project/save',
+            method: 'post',
+            data: form,
+        }, msg)
+    },
+    //删除节点
+       async deleteNode(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/tree/project/remove',
+            method: 'get',
+            params: form,
+        }, msg)
+    },
+    //调整排序
+    async sortForm(form, msg = true) {
+        return HcApi({
+            url: '/api/blade-meter/tree/project/sort',
+            method: 'post',
+            params: form,
+        }, msg)
+    },
+}

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

@@ -2,7 +2,20 @@
     <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" />
+                <template #header>
+                    <el-button hc-btn type="primary" @click="setTree">重新设置treeCode</el-button>
+                </template>
+                <hc-lazy-tree 
+                    v-if="ishowTree"
+                    tree-key="id" 
+                    :h-props="treeProps" 
+                    :menus="treeMenus" 
+                    :root-menu="treeRootMenu" 
+                    :auto-expand-keys="TreeAutoExpandKeys" 
+                    @load="treeLoadNode"
+                    @menuTap="treeMenuTap" 
+                    @nodeTap="wbsElTreeClick"
+                />
             </hc-new-card>
         </div>
         <div :id="`hc_table_card_${uuid}`" class="flex-1">
@@ -15,21 +28,21 @@
         </div>
 
         <!-- 节点数据 -->
-        <hc-new-dialog v-model="treeModalShow" widths="500px" :title="treeModalTitle" @save="treeModalSave">
+        <hc-new-dialog v-model="treeModalShow" widths="500px" :title="treeModalTitle" :loading="addNodeLoading" @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-input v-model="formModel.nodeCode" />
                 </el-form-item>
                 <el-form-item label="节点名称：">
-                    <el-input v-model="formModel.key2" />
+                    <el-input v-model="formModel.nodeName" />
                 </el-form-item>
                 <el-form-item label="节点类型：">
-                    <el-select v-model="formModel.key3" block>
-                        <el-option label="单位工程" :value="1" />
+                    <el-select v-model="formModel.nodeType" block>
+                        <el-option v-for="item in nodeOptions" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="工程类型：">
-                    <el-select v-model="formModel.key4" disabled block>
+                <el-form-item label="工程类型">
+                    <el-select v-model="formModel.engineeringType" disabled block>
                         <el-option label="总则" :value="1" />
                     </el-select>
                 </el-form-item>
@@ -39,17 +52,44 @@
                     </el-select>
                 </el-form-item -->
                 <el-form-item label="备注：">
-                    <el-input v-model="formModel.key6" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
+                    <el-input v-model="formModel.remarks" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
                 </el-form-item>
             </el-form>
         </hc-new-dialog>
+        <!-- 调整排序 -->
+        <hc-new-dialog v-model="sortModalShow" is-table widths="1100px" title="调整排序" :loading="sortNodeLoading" @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 #nodeName="{ row }">
+                    <span class="text-link">{{ row?.nodeName }}</span>
+                </template>
+                <template #action="{ row, index }">
+                    <span class="text-link text-xl" @click="upSortClick(row, index)">
+                        <HcIcon name="arrow-up" fill />
+                    </span>
+                    <span class="text-link ml-2 text-xl" @click="downSortClick(row, index)">
+                        <HcIcon name="arrow-down" fill />
+                    </span>
+                </template>
+            </hc-table>
+        </hc-new-dialog>
     </div>
 </template>
 
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
-import { getRandom } from 'js-fast-way'
-
+import { arrToId, getArrValue, getObjValue, getRandom } from 'js-fast-way'
+import unitApi from '~api/project/debit/unit.js'
+import { useAppStore } from '~src/store'
+import { getStoreValue, setStoreValue } from '~src/utils/storage'
+import { getDictionary } from '~api/other'
+import { delMessageV2 } from '~com/message/index.js'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
 defineOptions({
     name: 'ProjectDebitProjectUnit',
 })
@@ -59,8 +99,19 @@ const uuid = getRandom(4)
 //渲染完成
 onMounted(() => {
     setSplitRef()
+    getNodeType()
 })
-
+//获节点类型
+const nodeOptions = ref([])
+const getNodeType = async () => {
+    const { data } = await getDictionary({
+        code: 'meter_node_type',
+    })
+    nodeOptions.value = getArrValue(data)
+    nodeOptions.value.forEach((ele)=>{
+        ele.dictKey = Number(ele.dictKey)
+    })
+}
 //初始化设置拖动分割线
 const setSplitRef = () => {
     //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
@@ -78,27 +129,44 @@ const searchForm = ref({ current: 1, size: 10, total: 0 })
 
 //数据格式
 const treeProps = {
-    label: 'name',
+    label: 'nodeName',
     children: 'children',
     isLeaf: 'leaf',
 }
-
+const TreeAutoExpandKeys = ref(getStoreValue('wbsTreeExpandKeys') || [])
 //懒加载的数据
-const treeLoadNode = ({ level }, resolve) => {
-    if (level === 0) {
-        return resolve([{ name: 'region' }])
-    }
-    if (level > 3) {
-        return resolve([])
+const treeLoadNode = async ({ node, 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 { error, code, data } = await unitApi.lazyTree({
+        projectId: projectId.value,
+        id:id,
+    })
+
+    resolve(getArrValue(data))
 }
 
+const ishowTree = ref(true)
+//重新设置树
+const setLoading = ref(false)
+const setTree = async ()=>{
+    const { error, code, data } = await unitApi.refresh({
+        projectId: projectId.value,
+    })
+    setLoading.value = false
+    if (!error && code === 200) {
+        ishowTree.value = false
+        setTimeout(() => {
+            ishowTree.value = true
+        }, 100)
+        } else {
+            // newlistdata.value = []
+        }
+}
 //根节点菜单
 const treeRootMenu = [
     { icon: 'add', label: '新增', key: 'add' },
@@ -112,16 +180,43 @@ const treeMenus = [
     { icon: 'arrow-up-down-line', label: '排序', key: 'sort' },
     { icon: 'close', label: '删除', key: 'del' },
 ]
-
-const treeMenuTap = ({ key, node, data }) => {
+const menuType = ref('')
+const treeMenuTap = ({ key, node, data, keys }) => {
+    menuType.value = key
+    setStoreValue('wbsTreeExpandKeys', keys)
+    TreeAutoExpandKeys.value = keys || []
     if (key === 'add') {
         treeModalTitle.value = '新增下级节点'
         treeModalShow.value = true
+        formModel.value = {}
+        formModel.value.nodeType = data.nodeType
+        formModel.value.parentId = data.id
+        formModel.value.ancestor = data.ancestor
+        formModel.value.projectId = data.projectId
     }
     if (key === 'edit') {
         treeModalTitle.value = '项目计量单元修改'
         treeModalShow.value = true
+        formModel.value = data
+    }
+    if (key === 'del') {
+        delModalClick()
     }
+    if (key === 'sort') {
+            let nodes = [], childNodes = []
+            childNodes = node?.parent?.childNodes || node?.parent?.children || []
+            
+            for (let i = 0; i < childNodes.length; i++) {
+                const res = childNodes[i]?.data
+                nodes.push({
+                    nodeName:res?.nodeName,
+                    id:res?.id,
+                })
+            }
+            sortTableData.value = nodes
+            sortModalShow.value = true
+            // sortTableData.value = data.children
+        }
 }
 
 
@@ -134,14 +229,12 @@ const pageChange = ({ current, size }) => {
 //表格数据
 const tableLoading = ref(false)
 const tableColumn = ref([
-    { key: 'key1', name: '节点编号' },
-    { key: 'key2', name: '节点名称' },
-    { key: 'key3', name: '节点类型' },
-    { key: 'key4', name: '工程类型' },
-])
-const tableData = ref([
-    { key1: '1111' },
+    { key: 'nodeCode', name: '节点编号' },
+    { key: 'nodeName', name: '节点名称' },
+    { key: 'nodeTypeName', name: '节点类型' },
+    { key: 'engineeringType', name: '工程类型' },
 ])
+const tableData = ref([])
 
 //弹窗
 const treeModalShow = ref(false)
@@ -153,7 +246,145 @@ const formModel = ref({})
 const formRules = ref({})
 
 //弹窗保存
-const treeModalSave = () => {
+const addNodeLoading = ref(false)
+const treeModalSave = async () => {
+    if (menuType.value === 'edit') {
+        const { error, code } = await unitApi.updateForm({
+            ...formModel.value,
+        
+        })
+        //判断状态
+        addNodeLoading.value = false
+        if (!error && code === 200) {
+            window?.$message?.success('修改成功')
+            treeModalShow.value = false
+            window?.location?.reload() //刷新页面
+        }
+    }
+    if (menuType.value === 'add') {
+        const { error, code } = await unitApi.addNode({
+            ...formModel.value,
+      
+        })
+        //判断状态
+        addNodeLoading.value = false
+        if (!error && code === 200) {
+            window?.$message?.success('新增成功')
+            treeModalShow.value = false
+            window?.location?.reload() //刷新页面
+        }
+    }
+}
+//树被点击
+const curTreeData = ref({})
+const wbsElTreeClick = ({ node, data, keys }) => {
+    TreeAutoExpandKeys.value = keys || []
+    setStoreValue('wbsTreeExpandKeys', keys)
+    getTreeNodeDetail(data)
+    
+}
 
+//获取节点详情
+const getTreeNodeDetail = async (node)=>{
+    const { id } = node
+    const { error, code, data } = await unitApi.getNodeDetail({
+       id,
+    })
+    if (!error && code === 200) {
+        curTreeData.value = getObjValue(data)
+        nodeOptions.value.forEach((ele)=>{
+            if (ele.dictKey == curTreeData.value.nodeType) {
+                curTreeData.value.nodeTypeName = ele.dictValue
+            }
+        })
+        tableData.value = [curTreeData.value]
+   
+    } else {
+        curTreeData.value = {}
+        tableData.value = []
+    }
+}
+//删除节点
+const delModalClick = () => {
+    delMessageV2(async (action, instance, done) => {
+            if (action === 'confirm') {
+                instance.confirmButtonLoading = true
+                removeContractTreeNode()
+                instance.confirmButtonLoading = false
+                done()
+            } else {
+                done()
+            }
+    })
+}
+const removeContractTreeNode = async () => {
+    const loadingInstance = window.$loading.service({
+        fullscreen: true,
+        text: '删除节点中，请耐心等待...',
+        background: 'rgba(0, 0, 0, 0.7)',
+    })
+    const { error, code } = await unitApi.deleteNode({
+        id: curTreeData.value.id || '',
+    })
+    loadingInstance.close()
+    if (!error && code === 200) {
+        window?.$message?.success('删除成功')
+        window?.location?.reload() //刷新页面
+    }
+}
+
+//调整排序
+const sortModalShow = ref(false)
+//表格数据
+const sortTableColumn = ref([
+    { key:'nodeName', name: '节点名称' },
+    { key:'action', name: '排序', width: 90 },
+])
+const sortTableLoading = ref(false)
+const sortTableData = ref([])
+//拖动完成
+const sortTableRowDrop = (rows) => {
+    sortTableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        sortTableData.value = rows
+    })
+}
+
+//向下
+const downSortClick = (row, 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 = (row, 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 sortNodeLoading = ref(false)
+const sortModalSave = async () => {
+    const ids = arrToId(sortTableData.value)
+  //发起请求
+  sortNodeLoading.value = true
+    const { error, code } = await unitApi.sortForm({ ids })
+    sortNodeLoading.value = false
+    //判断状态
+    if (!error && code === 200) {
+        window?.$message?.success('保存成功')
+        sortModalShow.value = false
+        window?.location?.reload() //刷新页面
+    }
+   
 }
 </script>