优化修改所在位置页面

ruoyi-admin/src/main/java/com/ruoyi/asset/controller/TbLocationController.java

@@ -49,12 +49,15 @@ public class TbLocationController extends BaseController
         return getDataTable(list);
     }
 
+    @PreAuthorize("@ss.hasPermi('asset:location:list')")
     @PostMapping("/tree")
-    public AjaxResult tree(@RequestBody TbLocation tbLocation) {
+    public TableDataInfo tree(@RequestBody(required = false) TbLocation tbLocation) {
+        startPage();
         List<TbLocation> tbLocations = tbLocationService.selectTree(tbLocation);
-        return success(tbLocations);
+        return getDataTable(tbLocations);
     }
 
+    @PreAuthorize("@ss.hasPermi('asset:location:list')")
     @GetMapping("/treeSelect")
     public AjaxResult treeSelect(@Parameter(name = "id") Long id) {
         List<TreeSelect> tbLocations = tbLocationService.selectTreeSelect(id);

ruoyi-admin/src/main/java/com/ruoyi/asset/service/impl/TbLocationServiceImpl.java

@@ -55,13 +55,10 @@ public class TbLocationServiceImpl implements ITbLocationService
     @Override
     public List<TbLocation> selectTree(TbLocation tbLocation) {
         List<TbLocation> locations;
-        if (tbLocation != null) {
-            locations = selectTbLocationList(tbLocation);
-        } else {
-            TbLocation location = new TbLocation();
-            location.setParentId(0L);
-            locations = selectTbLocationList(location);
+        if (tbLocation.getParentId() == null) {
+            tbLocation.setParentId(0L);
         }
+        locations = selectTbLocationList(tbLocation);
         for (TbLocation location : locations) {
             List<TbLocation> tbLocations = buildChildren(location);
             location.setChildren(tbLocations);

ruoyi-ui/src/api/asset/location.js

@@ -18,6 +18,28 @@ export function getLocation(id) {
 }
 
 // 新增所属位置
+export function tree(data) {
+  return request({
+    url: '/asset/location/tree',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询所属位置详细
+export function treeSelect(id) {
+  return request({
+    url: '/asset/location/treeSelect',
+    method: 'get',
+    data: {
+      params: {
+        id
+      }
+    }
+  })
+}
+
+// 新增所属位置
 export function addLocation(data) {
   return request({
     url: '/asset/location',

ruoyi-ui/src/views/asset/location/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="位置编号" prop="number">
+    <el-form :model="queryParams" ref="queryForm" class="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <!-- <el-form-item label="位置编号" prop="number">
         <el-input v-model="queryParams.number" placeholder="请输入位置编号" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="名称" prop="name">
+      </el-form-item> -->
+      <!-- <el-form-item label="名称" prop="name">
         <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="上级位置" prop="parentId">
-        <el-input v-model="queryParams.parentId" placeholder="请输入上级位置" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item> -->
+      <el-form-item label="位置名称" prop="parentId">
+        <!-- <el-input v-model="queryParams.parentId" placeholder="请输入位置名称" clearable @keyup.enter.native="handleQuery" /> -->
+        <treeselect v-model="queryParams.parentId" :options="locationOption" placeholder="选择位置" @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="位置标签" prop="label">
         <el-input v-model="queryParams.label" placeholder="请输入位置标签" clearable @keyup.enter.native="handleQuery" />
@@ -35,13 +36,19 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="locationList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="locationList" 
+      row-key="id"
+      @selection-change="handleSelectionChange" 
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}
+    ">
       <el-table-column type="selection" width="55" align="center" />
-      <!-- <el-table-column label="编号" align="center" prop="id" /> -->
-      <el-table-column label="位置编号" align="center" prop="number" />
+      <!-- <el-table-column label="位置编号" align="center" prop="number" /> -->
       <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="上级位置" align="center" prop="parentId" />
-      <el-table-column label="祖级列表" align="center" prop="sequence" />
+      <!-- <el-table-column label="祖级列表" align="center" prop="sequence" /> -->
       <el-table-column label="位置标签" align="center" prop="label" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -64,8 +71,8 @@
           <el-input v-model="form.name" placeholder="请输入名称" />
         </el-form-item>
         <el-form-item label="上级位置" prop="parentId">
-          <el-input v-model="form.parentId" placeholder="请输入上级位置2" />
-          <!-- <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择所属公司" /> -->
+          <!-- <el-input v-model="form.parentId" placeholder="请输入上级位置" /> -->
+          <treeselect v-model="form.parentId" :options="locationOption" placeholder="选择上级位置" />
         </el-form-item>
         <el-form-item label="位置标签" prop="label">
           <el-input v-model="form.label" placeholder="请输入位置标签" />
@@ -83,8 +90,7 @@
 </template>
 
 <script>
-import { listLocation, getLocation, delLocation, addLocation, updateLocation } from '@/api/asset/location'
-import { listDept } from '@/api/system/dept'
+import { getLocation, delLocation, addLocation, updateLocation, tree, treeSelect } from '@/api/asset/location'
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
@@ -105,8 +111,6 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      // 部门树选项
-      deptOptions: [],
       arr: [],
       // 所属位置表格数据
       locationList: [],
@@ -132,6 +136,7 @@ export default {
         createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
         updateTime: [{ required: true, message: '最后修改时间不能为空', trigger: 'blur' }],
       },
+      locationOption: []
     }
   },
   created() {
@@ -141,32 +146,23 @@ export default {
     /** 查询所属位置列表 */
     getList() {
       this.loading = true
-      listDept().then((response) => {
-        this.deptOptions = this.handleTree(response.data, 'deptId')
-        this.arr = response.data
-      })
-      listLocation(this.queryParams).then((response) => {
+      // listLocation(this.queryParams).then((response) => {
+      //   this.locationList = response.rows
+      //   this.total = response.total
+      //   this.loading = false
+      // })
+      tree(this.queryParams).then((response) => {
         this.locationList = response.rows
         this.total = response.total
         this.loading = false
       })
+      this.getTreeSelect()
     },
-    /** 转换部门数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children
-      }
-      return {
-        id: node.deptId,
-        label: node.deptName,
-        children: node.children,
-      }
-    },
-    //获取公司名
-    companyName(val) {
-      let num = parseInt(val)
-      let arr2 = this.arr.filter((item) => item.deptId === num)
-      return arr2[0].deptName
+    getTreeSelect() {
+      treeSelect().then(res => {
+        console.log('下拉树结果', res)
+        this.locationOption = res.data
+      })
     },
     // 取消按钮
     cancel() {
@@ -179,7 +175,7 @@ export default {
         id: null,
         number: null,
         name: null,
-        parentId: null,
+        parentId: 0,
         label: null,
         remark: null,
         createBy: null,
@@ -206,16 +202,16 @@ export default {
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
-    handleAdd(row) {
+    handleAdd() {
       this.reset()
-      if (row != undefined) {
-        this.form.parentId = row.deptId
-      }
+      // if (row != undefined) {
+      //   this.form.parentId = row.deptId
+      // }
       this.open = true
       this.title = '添加所属位置'
-      listDept().then((response) => {
-        this.deptOptions = this.handleTree(response.data, 'deptId')
-      })
+      // listDept().then((response) => {
+      //   this.deptOptions = this.handleTree(response.data, 'deptId')
+      // })
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -275,8 +271,14 @@ export default {
 }
 </script>
 
-<style>
-.a{
-  
+<style lang="less" scoped>
+/deep/ .vue-treeselect {
+  display: inline-block;
+}
+.queryForm {
+  /deep/ .vue-treeselect {
+    width: 205px;
+    height: 32px;
+  }
 }
 </style>