调试层级管理页面接口

src/api/basic/level-manage.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 获取层级列表
+export function getLevelListApi(query) {
+    return request({
+        url: '/level/list',
+        method: 'get',
+        params: query,
+    })
+}
+// 新增层级
+export function addLevelApi(data) {
+    return request({
+        url: '/level/add',
+        method: 'post',
+        data,
+    })
+}
+// 删除层级
+export function delLevelApi(data) {
+    return request({
+        url: '/level/remove',
+        method: 'post',
+        data,
+    })
+}
+// 修改层级
+export function editLevelApi(data) {
+    return request({
+        url: '/level/edit',
+        method: 'post',
+        data,
+    })
+}

src/api/basic/project.js

@@ -2,44 +2,43 @@ import request from '@/utils/request'
 
 // 查询项目列表
 export function listProject(query) {
-  return request({
+    return request({
-    url: '/basic/project/list',
+        url: '/project/list',
-    method: 'get',
+        method: 'get',
-    params: query
+        params: query,
-  })
+    })
 }
 
 // 新增项目
 export function addProject(data) {
-  return request({
+    return request({
-    url: '/basic/project',
+        url: '/project',
-    method: 'post',
+        method: 'post',
-    data: data
+        data: data,
-  })
+    })
 }
 
 // 查询项目详细
 export function getProject(proId) {
-  return request({
+    return request({
-    url: '/basic/project/' + proId,
+        url: '/project/' + proId,
-    method: 'get'
+        method: 'get',
-  })
+    })
 }
 
-
 // 修改项目
 export function updateProject(data) {
-  return request({
+    return request({
-    url: '/basic/project',
+        url: '/project',
-    method: 'put',
+        method: 'put',
-    data: data
+        data: data,
-  })
+    })
 }
 
 // 删除项目
 export function delProject(proId) {
-  return request({
+    return request({
-    url: '/basic/project/' + proId,
+        url: '/project/' + proId,
-    method: 'delete'
+        method: 'delete',
-  })
+    })
 }

src/views/basic/level-manage/addOrEditForm.vue

@@ -49,7 +49,7 @@
                             icon="el-icon-delete"
                             style="margin-left: 4px"
                             @click="deleteCurrentLevel(index)"
-                            v-if="index !== 0 && index !== 1"
+                            v-if="index !== 0 && index !== 1 && index === addOrEditForm.levelList.length - 1"
                         />
                     </el-col>
                 </el-row>
@@ -64,9 +64,9 @@
 </template>
 
 <script>
+import { addLevelApi, editLevelApi } from '@/api/basic/level-manage'
 export default {
     name: 'AddOrEditForm',
-
     data() {
         const validateLevelName = (rule, value, callback) => {
             if (!value || value.trim() === '') {
@@ -78,6 +78,7 @@ export default {
         return {
             addOrEditForm: {
                 levelSettingName: '',
+                configId: undefined,
                 levelList: [
                     {
                         level: 1,
@@ -90,7 +91,7 @@ export default {
                 ],
             },
             addOrEditFormRules: {
-                levelSettingName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
+                levelSettingName: [{ required: true, message: '请输入层级配置名称', trigger: 'blur' }],
                 // 动态层级的校验规则
                 levelList: {
                     validator: (rule, value, callback) => {
@@ -108,12 +109,12 @@ export default {
     },
     methods: {
         cancel() {
-            this.$emit('closeAddOrEditFormDialog')
+            this.$emit('closeAddOrEditFormDialog', false)
         },
         submitForm() {
             // this.$emit('submitForm')
 
-            this.$refs.addOrEditFormRef.validate((valid) => {
+            this.$refs.addOrEditFormRef.validate(async (valid) => {
                 if (valid) {
                     const hasEmptyLevel = this.addOrEditForm.levelList.some(
                         (item) => !item.levelName || item.levelName.trim() === '',
@@ -123,7 +124,28 @@ export default {
                         this.$message.error('所有层级节点名称不能为空')
                         return
                     }
-                    // this.$emit('closeAddOrEditFormDialog')
+
+                    const nodesList = this.addOrEditForm.levelList.map((item) => {
+                        return {
+                            nodeName: item.levelName,
+                        }
+                    })
+
+                    // 组装参数
+                    const params = {
+                        configName: this.addOrEditForm.levelSettingName,
+                        nodes: nodesList,
+                    }
+                    if (this.addOrEditForm.configId) {
+                        params.configId = this.addOrEditForm.configId
+                    }
+                    const API = this.addOrEditForm.configId ? editLevelApi : addLevelApi
+
+                    const res = await API(params)
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('新增成功')
+                        this.$emit('closeAddOrEditFormDialog', true)
+                    }
                 } else {
                     return false
                 }
@@ -145,13 +167,15 @@ export default {
         },
 
         setFormData(data) {
-            const { deviceName, deviceCode, remark, Keeper } = data
+            const { configName, nodes, configId } = data
-            this.addOrEditForm = {
+            this.addOrEditForm.levelSettingName = configName
-                deviceName,
+            this.addOrEditForm.configId = configId
-                deviceCode,
+            this.addOrEditForm.levelList = nodes.map((item, index) => {
-                remark,
+                return {
-                Keeper,
+                    level: index + 1,
-            }
+                    levelName: item.nodeName,
+                }
+            })
         },
     },
 }

src/views/basic/level-manage/index.vue

@@ -2,11 +2,11 @@
     <!-- 基础管理-层级 -->
     <div class="app-container">
         <el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
-            <el-form-item label="层级配置名称" prop="proName">
+            <el-form-item label="层级配置名称" prop="configName">
                 <el-input
                     clearable
                     placeholder="请输入层级配置名称"
-                    v-model="queryParams.proName"
+                    v-model="queryParams.configName"
                     @keyup.enter.native="handleQuery"
                 />
             </el-form-item>
@@ -35,6 +35,12 @@
                 v-for="item in columnList"
             />
 
+            <el-table-column label="层级数量" align="center">
+                <template slot-scope="{ row }">
+                    {{ row.nodes.length || 0 }}
+                </template>
+            </el-table-column>
+
             <el-table-column label="操作" align="center" width="240">
                 <template slot-scope="scope">
                     <el-button
@@ -77,6 +83,7 @@
 
 <script>
 import AddOrEditForm from './addOrEditForm.vue'
+import { getLevelListApi, delLevelApi } from '@/api/basic/level-manage'
 export default {
     name: 'DeviceManage',
     components: {
@@ -92,46 +99,13 @@ export default {
             useOrReturnFormVisible: false, // 领用或归还对话框是否显示
             useRecordFormVisible: false, // 使用记录对话框是否显示
             // 设备列表
-            deviceList: [
+            deviceList: [],
-                {
-                    id: 1,
-                    deviceName: '设备1',
-                    deviceCode: '123456',
-                    Keeper: '张三',
-                    status: '正常',
-                    remark: '备注1',
-                },
-                {
-                    id: 2,
-                    deviceName: '设备2',
-                    deviceCode: '123456',
-                    Keeper: '李四',
-                    status: '异常',
-                    remark: '备注2',
-                },
-            ],
 
             // 列配置
             columnList: [
                 {
-                    label: '设备名称',
+                    label: '层级名称',
-                    prop: 'deviceName',
+                    prop: 'configName',
-                },
-                {
-                    label: '设备编号',
-                    prop: 'deviceCode',
-                },
-                {
-                    label: '所属保管人',
-                    prop: 'Keeper',
-                },
-                {
-                    label: '设备状态',
-                    prop: 'status',
-                },
-                {
-                    label: '备注',
-                    prop: 'remark',
                 },
             ],
 
@@ -139,14 +113,12 @@ export default {
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
-                proName: undefined,
+                configName: undefined,
-                unit: undefined,
-                chargePerson: undefined,
             },
         }
     },
     created() {
-        // this.getDeviceList()
+        this.getDeviceList()
     },
     methods: {
         // 查询按钮
@@ -169,13 +141,13 @@ export default {
         },
 
         //  获取设备列表
-        getDeviceList() {
+        async getDeviceList() {
             this.loading = true
-            listProject(this.queryParams).then((response) => {
+            const res = await getLevelListApi(this.queryParams)
-                this.proList = response.rows
+            console.log(res, '获取层级列表')
-                this.total = response.total
+            this.deviceList = res.rows
-                this.loading = false
+            this.total = res.total
-            })
+            this.loading = false
         },
 
         // 领用或归还按钮
@@ -195,8 +167,8 @@ export default {
         handleEdit(row) {
             this.addOrEditFormTitle = '编辑'
             this.addOrEditFormVisible = true
-            const { deviceId, deviceName, deviceCode, remark, Keeper } = row
+            const { configName, nodes, configId } = row
-            const editForm = { deviceId, deviceName, deviceCode, remark, Keeper }
+            const editForm = { configName, nodes, configId }
             this.$nextTick(() => {
                 this.$refs.addOrEditComponentRef.setFormData(editForm)
             })
@@ -209,12 +181,23 @@ export default {
         },
 
         // 删除按钮
-        handleDelete(row) {},
+        handleDelete(row) {
+            this.$modal.confirm('是否确认删除层级编号为"' + row.configId + '"的数据项？').then(async () => {
+                const res = await delLevelApi([row.configId])
+                if (res.code === 200) {
+                    this.$modal.msgSuccess('删除成功')
+                    this.getDeviceList()
+                }
+            })
+        },
 
         // 关闭新增或编辑对话框
-        closeAddOrEditFormDialog() {
+        closeAddOrEditFormDialog(isRefresh) {
             this.$refs.addOrEditComponentRef.resetForm()
             this.addOrEditFormVisible = false
+            if (isRefresh) {
+                this.getDeviceList()
+            }
         },
 
         // 关闭领用或归还对话框