1

src/views/desk/system-unit/temp.vue

@@ -14,28 +14,58 @@
                 </hc-card>
             </template>
             <hc-card class="hc-desk-system-unit-temp">
-                <hc-card-item title="节点信息">
-                    <el-descriptions :column="3" border>
-                        <el-descriptions-item label="节点编码：">{{ nodeInfo.nodeCode ?? '-' }}</el-descriptions-item>
-                        <el-descriptions-item label="节点名称：">{{ nodeInfo.nodeName ?? '-' }}</el-descriptions-item>
-                        <el-descriptions-item label="节点类型：">{{ nodeInfo.nodeTypeName ?? '-' }}</el-descriptions-item>
-                        <el-descriptions-item label="工程类型：">{{ nodeInfo.engineeringTypeName ?? '-' }}</el-descriptions-item>
-                        <el-descriptions-item label="备注：">{{ nodeInfo.remarks ?? '-' }}</el-descriptions-item>
-                    </el-descriptions>
-                </hc-card-item>
-                <hc-card-item title="下节节点列表">
-                    222
-                </hc-card-item>
+                <template v-if="!isNullES(nodeInfo.id)">
+                    <hc-card-item title="节点信息">
+                        <el-descriptions :column="3" border>
+                            <el-descriptions-item label="节点编号：">{{ nodeInfo.nodeCode ?? '-' }}</el-descriptions-item>
+                            <el-descriptions-item label="节点名称：">{{ nodeInfo.nodeName ?? '-' }}</el-descriptions-item>
+                            <el-descriptions-item label="节点类型：">{{ nodeInfo.nodeTypeName ?? '-' }}</el-descriptions-item>
+                            <el-descriptions-item label="工程类型：">{{ nodeInfo.engineeringTypeName ?? '-' }}</el-descriptions-item>
+                            <el-descriptions-item label="备注：">{{ nodeInfo.remarks ?? '-' }}</el-descriptions-item>
+                        </el-descriptions>
+                    </hc-card-item>
+                    <hc-card-item title="下节节点列表">
+                        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false" :is-current-row="false" />
+                    </hc-card-item>
+                </template>
+                <hc-empty v-else title="请先点击左侧树节点" />
             </hc-card>
         </hc-body>
+
+        <!-- 新增/修改 -->
+        <hc-dialog v-model="isAddEditShow" widths="44rem" is-footer-center :title="formModel.id ? '修改' : '新增'" @close="addEditClose">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
+                <el-form-item label="节点编号：">
+                    <el-input v-model="formModel.nodeCode" clearable placeholder="请输入节点编号" />
+                </el-form-item>
+                <el-form-item label="节点名称：" prop="nodeName">
+                    <el-input v-model="formModel.nodeName" clearable placeholder="请输入节点名称" />
+                </el-form-item>
+                <el-form-item label="节点类型：" prop="nodeType">
+                    <el-select v-model="formModel.nodeType" filterable clearable block placeholder="请选择节点类型">
+                        <el-option v-for="item in meterUnitType" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="工程类型：">
+                    <el-input v-model="formModel.engineeringTypeName" clearable placeholder="请输入工程类型" disabled />
+                </el-form-item>
+                <el-form-item label="备注：">
+                    <el-input v-model="formModel.remarks" clearable placeholder="请输入备注" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button hc-btn @click="addEditClose">取消</el-button>
+                <el-button hc-btn type="primary" :loading="addEditLoading" @click="addEditSubmit">提交</el-button>
+            </template>
+        </hc-dialog>
     </hc-drawer>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { HcDelMsg } from 'hc-vue3-ui'
 import { getDictionaryData, getDictionaryName } from '~src/utils/tools'
-import { getArrValue, getObjValue } from 'js-fast-way'
+import { deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import mainApi from '~api/desk/system-unit'
 
 const props = defineProps({
@@ -68,7 +98,6 @@ const meterUnitType = ref([])
 const getDataApi = async () => {
     isTreeMode.value = true
     meterUnitType.value = await getDictionaryData('meter_unit_type', true)
-    console.log(meterUnitType.value)
 }
 
 //树配置
@@ -99,8 +128,17 @@ const treeMenuData = [
 ]
 
 //菜单被点击
-const treeMenuClick = ({ key, data, node }) => {
+const treeMenuClick = async ({ key, data, node }) => {
     console.log(key)
+    if (key === 'add') {
+        formModel.value = {}
+        await nextTick()
+        isAddEditShow.value = true
+    } else if (key === 'edit') {
+        formModel.value = deepClone(data)
+        await nextTick()
+        isAddEditShow.value = true
+    }
 }
 
 //树节点被点击
@@ -109,13 +147,91 @@ const treeNodeTap = ({ data }) => {
     const label = getDictionaryName(meterUnitType.value, data.nodeType)
     data.nodeTypeName = label ?? '-'
     nodeInfo.value = data
-    console.log(data)
+    getTableData(data)
+}
+
+//表格数据
+const tableColumn = ref([
+    { key: 'nodeCode', name: '节点编号' },
+    { key: 'nodeName', name: '节点名称' },
+    { key: 'nodeTypeName', name: '节点类型' },
+    { key: 'engineeringTypeName', name: '工程类型' },
+    { key: 'remarks', name: '备注' },
+])
+const tableData = ref([{}])
+
+//获取表格数据
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableData.value = []
+    const { id } = nodeInfo.value
+    tableLoading.value = true
+    const { data } = await mainApi.getChildList({ id })
+    tableData.value = getArrValue(data)
+    tableLoading.value = false
+}
+
+//新增、编辑节点
+const isAddEditShow = ref(false)
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    nodeName: { required: true, trigger: 'blur', message: '请输入节点名称' },
+    nodeType: { required: true, trigger: 'blur', message: '请选择节点类型' },
+}
+
+//新增、编辑节点提交
+const addEditLoading = ref(false)
+const addEditSubmit = async () => {
+    //验证表单
+    const isForm = await formValidate(formRef.value)
+    if (!isForm) return false
+    addEditLoading.value = true
+    //处理表单
+    const form = formModel.value
+    const { id, ancestor, templateId } = nodeInfo.value
+    form.parentId = id
+    form.ancestor = ancestor
+    form.templateId = templateId
+    form.nodeTypeName = getDictionaryName(meterUnitType.value, form.nodeType)
+    //发起请求
+    let res
+    if (isNullES(form.id)) {
+        res = await mainApi.add(form)
+    } else {
+        res = await mainApi.update(form)
+    }
+    //处理结果
+    const { error, code } = getObjValue(res)
+    addEditLoading.value = false
+    if (!error && code === 200) {
+        window?.$message?.success('操作成功')
+        addEditClose()
+        setTreeMode()
+    }
+}
+
+//关闭 新增、编辑节点
+const addEditClose = () => {
+    isAddEditShow.value = false
+    formModel.value = {}
+}
+
+//树重加载
+const setTreeMode = () => {
+    isTreeMode.value = false
+    nodeInfo.value = {}
+    tableData.value = []
+    setTimeout(() => {
+        isTreeMode.value = true
+    }, 500)
 }
 
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false
     isTreeMode.value = false
+    nodeInfo.value = {}
     emit('close')
 }
 </script>