1

src/views/desk/system-unit.vue

@@ -11,8 +11,8 @@
         <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }" :is-current-row="false">
             <template #action="{ row }">
                 <el-link type="warning" @click="editRowClick(row)">修改</el-link>
-                <el-link type="primary">编辑计量系统单元</el-link>
-                <el-link type="danger">删除</el-link>
+                <el-link type="primary" @click="setTempShow(row)">编辑计量系统单元</el-link>
+                <el-link type="danger" @click="delRowClick(row)">删除</el-link>
             </template>
         </hc-table>
         <template #action>
@@ -34,12 +34,17 @@
                 <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
             </template>
         </hc-dialog>
+
+        <!-- 编辑计量系统单元 -->
+        <HcTemp v-model="isTempShow" :data="tempData" />
     </hc-card>
 </template>
 
 <script setup>
 import { nextTick, onActivated, ref } from 'vue'
 import { deepClone, formValidate, getArrValue } from 'js-fast-way'
+import HcTemp from './system-unit/temp.vue'
+import { HcDelMsg } from 'hc-vue3-ui'
 import mainApi from '~api/desk/system-unit'
 
 //激活
@@ -121,13 +126,31 @@ const dialogSubmit = async () => {
     }
 }
 
+//删除
+const delRowClick = (row) => {
+    HcDelMsg(async (resolve) => {
+        const { code } = await mainApi.del(row.id)
+        resolve() //关闭弹窗的回调
+        if (code !== 200) return
+        window.$message.success('删除成功')
+        getTableData().then()
+    })
+}
+
+//编辑计量系统单元
+const isTempShow = ref(false)
+const tempData = ref({})
+
+// 编辑计量系统单元
+const setTempShow = async (row) => {
+    tempData.value = deepClone(row)
+    await nextTick()
+    isTempShow.value = true
+}
+
 //关闭弹窗
 const dialogClose = () => {
     isDialogShow.value = false
     formModel.value = {}
 }
 </script>
-
-<style lang="scss">
-
-</style>

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

@@ -0,0 +1,112 @@
+<template>
+    <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
+        <hc-body split>
+            <template #left>
+                <hc-card scrollbar>
+                    <hc-lazy-tree
+                        v-if="isTreeMode" :root-menu="treeMenuData" :menus="treeMenuData" :h-props="treeProps"
+                        tree-key="id" @load="treeLoadNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
+                    >
+                        <template #nodeName="{ data }">
+                            <span class="text-16px font-400">{{ data.nodeName }}</span>
+                        </template>
+                    </hc-lazy-tree>
+                </hc-card>
+            </template>
+            <hc-card>
+                2222
+            </hc-card>
+        </hc-body>
+    </hc-drawer>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getArrValue, getObjValue } from 'js-fast-way'
+import { HcDelMsg } from 'hc-vue3-ui'
+import mainApi from '~api/desk/system-unit'
+import { getDictionaryData } from '~src/utils/tools'
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const emit = defineEmits(['close'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听数据
+const dataInfo = ref(props.data)
+watch(() => props.data, (data) => {
+    dataInfo.value = data
+}, { immediate: true, deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) getDataApi()
+})
+
+//处理相关数据
+const meterUnitType = ref([])
+const getDataApi = async () => {
+    isTreeMode.value = true
+    meterUnitType.value = await getDictionaryData('meter_unit_type', true)
+    console.log(meterUnitType.value)
+}
+
+//树配置
+const isTreeMode = ref(false)
+const treeProps = {
+    label: 'nodeName',
+    children: 'children',
+    isLeaf: 'notExsitChild',
+}
+
+//懒加载树
+const treeLoadNode = async ({ item, level }, resolve) => {
+    const parentId = level === 0 ? 0 : item.id
+    const { id } = getObjValue(dataInfo.value)
+    const { data } = await mainApi.getLazyTree({
+        id: parentId,
+        templateId: id,
+    })
+    resolve(getArrValue(data))
+}
+
+//树菜单根节点
+const treeMenuData = [
+    { icon: 'add-circle', label: '新增节点', key: 'add' },
+    { icon: 'draft', label: '编辑节点', key: 'edit' },
+    { icon: 'arrow-up-down', label: '排序节点', key: 'rank' },
+    { icon: 'delete-bin', label: '删除节点', key: 'del' },
+]
+
+//菜单被点击
+const treeMenuClick = ({ key, data, node }) => {
+    console.log(key)
+}
+
+//树节点被点击
+const nodeInfo = ref({})
+const treeNodeTap = ({ data }) => {
+    nodeInfo.value = data
+    console.log(data)
+}
+
+//关闭抽屉
+const drawerClose = () => {
+    isShow.value = false
+    isTreeMode.value = false
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>