更新指标

src/api/backstage/item.js

 import request from '@/utils/request'
 
+// 获取所有层级级联列表
+export function getTotalLevel(id) {
+  return request({
+    url: '/backstage/item/getTotalLevel/' + id,
+    method: 'get',
+  })
+}
+
 // 获取层级级联列表
 export function getLevelById(id) {
   return request({

src/views/backstage/item/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="标签层级名" prop="itemName">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
+             label-width="120px">
+      <el-form-item label="指标分类名称" prop="itemName">
         <el-input
           v-model="queryParams.itemName"
-          placeholder="请输入标签层级名"
+          placeholder="请输入指标分类名称"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="上级id" prop="parentId">
-        <el-input
-          v-model="queryParams.parentId"
-          placeholder="请输入上级id"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态 1正常　0删除" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态 1正常　0删除" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
+<!--      <el-form-item label="上级id" prop="parentId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.parentId"-->
+<!--          placeholder="请输入上级id"-->
+<!--          clearable-->
+<!--          size="small"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="状态 1正常　0删除" prop="status">-->
+<!--        <el-select v-model="queryParams.status" placeholder="请选择状态 1正常　0删除" clearable size="small">-->
+<!--          <el-option label="请选择字典生成" value="" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -60,24 +61,25 @@
           v-hasPermi="['backstage:item:remove']"
         >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['backstage:item:export']"
-        >导出</el-button>
-      </el-col>
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="warning"-->
+<!--          icon="el-icon-download"-->
+<!--          size="mini"-->
+<!--          @click="handleExport"-->
+<!--          v-hasPermi="['backstage:item:export']"-->
+<!--        >导出</el-button>-->
+<!--      </el-col>-->
 	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="itemList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="id" align="center" prop="id" />
-      <el-table-column label="标签层级名" align="center" prop="itemName" />
-      <el-table-column label="上级id" align="center" prop="parentId" />
-      <el-table-column label="状态 1正常　0删除" align="center" prop="status" />
+<!--      <el-table-column label="id" align="center" prop="id" />-->
+      <el-table-column label="指标分类名称" align="center" prop="itemName" />
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+<!--      <el-table-column label="上级id" align="center" prop="parentId" />-->
+<!--      <el-table-column label="状态 1正常　0删除" align="center" prop="status" />-->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -118,13 +120,14 @@
 <!--            <span class="demonstration"></span>-->
             <el-cascader
               style="width: 100%"
-              placeholder="不选择层级默认是第一层级"
+              :key="cascaderKey"
               v-model="form.levelValue"
               :options="levelOptions"
-              :props="levelProps"
-              @change="handleChangeLevel"
-              ></el-cascader>
+              :props="{ expandTrigger: 'hover' }"
+              @change="handleChange"
+              clearable></el-cascader>
           </div>
+          <span style="color: red">注：不选择层级默认是第一层级</span>
         </el-form-item>
 
       </el-form>
@@ -139,27 +142,30 @@
 </template>
 
 <script>
-import { getLevelById, getLevel, listItem, getItem, delItem, addItem, updateItem, exportItem } from "@/api/backstage/item";
+import { getTotalLevel, getLevelById, getLevel, listItem, getItem, delItem, addItem, updateItem, exportItem } from "@/api/backstage/item";
 
 export default {
   name: "Item",
   data() {
     return {
       levelProps: {
-        expandTrigger: 'hover',
+        expandTrigger: 'click',
         lazy: true,
         lazyLoad (node, resolve) {
           // const { level } = node;
-          console.log(node)
-          setTimeout(() => {
-            getLevelById(node.value).then(res=>{
-              console.log(res);
-              resolve(res.data);
-            });
-            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
-          }, 1000);
+          if(node.value){
+            setTimeout(() => {
+              getLevelById(node.value).then(res=>{
+                console.log(res);
+                resolve(res.data);
+              });
+              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+            }, 1000);
+          }
+
         }
       },
+      cascaderKey:1,
       levelOptions: [],
       // 不可重复提交
       repeatSubmit: false,
@@ -199,6 +205,12 @@ export default {
   created() {
     this.getList();
   },
+  watch:{
+    //切换数据源
+    levelOptions(){
+      ++this.cascaderKey
+    }
+  },
   methods: {
     /** 查询指标层级列表 */
     getList() {
@@ -245,7 +257,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       //获取层级
-      getLevel().then(res=>{
+      getTotalLevel(0).then(res=>{
         this.levelOptions = res.data;
       });
 
@@ -259,8 +271,15 @@ export default {
       const id = row.id || this.ids
       getItem(id).then(response => {
         this.form = response.data;
-        this.open = true;
-        this.title = "修改指标层级";
+        this.form.levelValue = JSON.parse(response.data.levelValue);
+        //获取层级
+        getTotalLevel(id).then(res=>{
+          this.levelOptions = res.data;
+          this.open = true;
+          this.title = "修改指标层级";
+        });
+
+
       });
     },
     /** 提交按钮 */
@@ -282,12 +301,18 @@ export default {
               this.msgSuccess("修改成功");
               this.open = false;
               this.getList();
+            }).catch(()=>{
+              this.form.levelValue = JSON.parse(this.form.levelValue);
+              this.form.parentId = null;
             });
           } else {
             addItem(this.form).then(response => {
               this.msgSuccess("新增成功");
               this.open = false;
               this.getList();
+            }).catch(()=>{
+              this.form.levelValue = JSON.parse(this.form.levelValue);
+              this.form.parentId = null;
             });
           }
         }
@@ -320,7 +345,7 @@ export default {
           this.download(response.msg);
         })
     },
-    handleChangeLevel(){
+    handleChange(){
 
     }
   }