三级区域

src/views/farm/area/index.vue

@@ -36,12 +36,10 @@
       <el-table-column label="区域名" align="center" prop="name" />
       <el-table-column label="唯一占用" align="center" prop="occupied" >
         <template slot-scope="scope">
-          <el-button type="danger" v-if="scope.row.occupied">未占用</el-button>
+          <el-button type="danger" v-if="!scope.row.occupied">未占用</el-button>
-          <el-button type="success" v-if="!scope.row.occupied">已占用</el-button>
+          <el-button type="success" v-if="scope.row.occupied">已占用</el-button>
         </template>
       </el-table-column>
-
-
        <el-table-column label="面积(亩)" align="center" prop="area" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
@@ -64,25 +62,15 @@
     <!-- 对话框(添加 / 修改) -->
     <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="上级" prop="projectId">
+        <el-form-item label="上级区域选址" prop="twoAreaList">
-          <el-select  v-model="form.parentId"   placeholder="请选择">
+          <el-cascader :options="twoAreaList" :props="{emitPath:false, checkStrictly:true}" v-model="form.parentId" placeholder="不选择,默认为第一级区域"></el-cascader>
-            <el-option
-              v-for="item in firstList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-              {{item.name}}
-            </el-option>
-          </el-select>
         </el-form-item>
         <el-form-item label="区域名" prop="name">
           <el-input v-model="form.name" placeholder="请输入" />
         </el-form-item>
-
         <el-form-item label="面积(亩)" prop="area">
           <el-input v-model="form.area" placeholder="请输入" />
         </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -128,10 +116,11 @@ export default {
       rules: {
       },
 
-      allList:[],
       firstList:[],
-      secondList:[],
+      assembleList:[],
-      assembleList:[]
+
+      allAreaList:[],   //提供给新增和修改数据
+      twoAreaList:[]    //用于新增和修改展示数据
     };
   },
   created() {
@@ -146,6 +135,7 @@ export default {
       this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
       // 执行查询
       getAreaPage(params).then(response => {
+        this.allAreaList = response.data.list;
         this.list = response.data.list;
         this.total = response.data.total;
         let filterList = this.list.filter(t => t.parentId == 0);
@@ -163,6 +153,7 @@ export default {
           })
           oneList.push({id:one.id, name:one.name, occupied:one.occupied, area:one.area, createTime:one.createTime, children:twoList});
         })
+        
         this.list = oneList;
         this.loading = false;
       });
@@ -194,7 +185,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.firstList = this.allList.filter(t => t.parentId == 0);
+      this.assembleArea();
       this.open = true;
       this.title = "添加";
     },
@@ -202,6 +193,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id;
+      this.assembleArea();
       getArea(id).then(response => {
         this.form = response.data;
         this.open = true;
@@ -256,6 +248,28 @@ export default {
           this.$download.excel(response, '${table.classComment}.xls');
           this.exportLoading = false;
         }).catch(() => {});
+    },
+
+    assembleArea(){
+      //先拿到一级区域
+      let firstLsit = this.allAreaList.filter(t => t.parentId == 0);
+      let secondList = [];
+      //在根据一级区域拿到二级区域
+      let oneList = [];
+      firstLsit.forEach(first =>{
+        let list = this.allAreaList.filter(area => area.parentId == first.id);
+        let twoList = [];
+        list.forEach(item => {
+            secondList.push(item);
+            twoList.push({value:item.id, label:item.name});
+        });
+        if(twoList.length != 0){
+          oneList.push({value:first.id, label:first.name, children:twoList});
+        }else{
+          oneList.push({value:first.id, label:first.name});
+        }
+      });
+      this.twoAreaList = oneList;
     }
   }
 };