项目 两级区域

src/views/farm/project/index.vue

@@ -81,7 +81,7 @@
       </el-table-column>
       <el-table-column label="项目名" align="center" prop="name" />
       <!-- <el-table-column label="项目内容" align="center" prop="content" /> -->
-      <el-table-column label="区域名" align="center" prop="areas" width="80" >
+      <el-table-column label="区域名" align="center" prop="areas" width="180" >
         <template slot-scope="scope">
           <span>{{areasConvert(scope.row.areas)}}</span>
         </template>
@@ -142,12 +142,21 @@
         <el-form-item label="项目内容" prop="content">
           <editor v-model="form.content" :min-height="192"/>
         </el-form-item>
-        <el-form-item label="区域选择" prop="areas">
+        <!-- <el-form-item label="区域选择" prop="areas">
           <el-select  v-model="form.areas" multiple placeholder="请选择">
             <el-option v-for="item in areasList" :key="item.id" :label="item.name" :value="item.id"> {{item.name}}
             </el-option>
           </el-select>
+        </el-form-item> -->
+
+
+        <el-form-item label="区域选择" prop="assemAreaList">
+          <el-cascader :options="assemAreaList" :props="props"  emitPath clearable ref="chooseA" v-model="form.areas">
+          </el-cascader>
         </el-form-item>
+
+
+
         <el-form-item label="作物选择" prop="cropId">
           <el-select  v-model="form.cropId" placeholder="请选择">
             <el-option v-for="item in cropList" :key="item.id" :label="item.name" :value="item.id"> {{item.name}}
@@ -238,6 +247,7 @@ export default {
       },
       // 表单参数
       form: {},
+      props: { multiple: true , emitPath: false},
       // 表单校验
       rules: {
         name: [{ required: true, message: "不能为空", trigger: "blur" }],
@@ -248,6 +258,10 @@ export default {
       areasList:[],
       cropList:[],
       membersList:[],
+
+      assemAreaList: [],
+      areasParentList: [],
+      areasSonList: []
     };
   },
   created() {
@@ -267,10 +281,18 @@ export default {
     },
     areasConvert(areas){
       let areasName = "";
-      this.areasList.forEach(item => {
-        areas.forEach( pArea =>{
-          if (pArea == item.id) {
-            areasName += item.name + "\n";
+      areas.forEach(selectArea =>{
+        this.areasList.forEach(son => {
+          //二级区域
+          let name = "";
+          if(selectArea == son.id){
+            this.areasList.forEach(parent =>{
+              if(parent.id == son.parentId){
+                  name = parent.name +"/";
+              }
+            })
+            name += son.name ;
+            areasName += name +"\n";
           }
         })
       })
@@ -288,7 +310,6 @@ export default {
       getAreaPage({
         pageNo: 1,
         pageSize: 100,
-        parentId: 0
       }).then(res =>{
         this.areasList = res.data.list;
       })
@@ -376,12 +397,14 @@ export default {
     handleAdd() {
       this.reset();
       this.getCpUserList();
+      this.assemArea();
       this.open = true;
       this.title = "添加农场项目";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
+      this.assemArea();
       const id = row.id;
       getProject(id).then(response => {
         this.form = response.data;
@@ -459,6 +482,24 @@ export default {
           this.$download.excel(response, '${table.classComment}.xls');
           this.exportLoading = false;
         }).catch(() => {});
+    },
+
+    assemArea() {
+      let parentLsit = this.areasList.filter(t => t.parentId == 0);
+      let sonList = this.areasList.filter(s => s.parentId != 0);
+      let firstList = [];
+      parentLsit.forEach(p => {
+        this.areasParentList.push(p);
+        let secondList = [];
+        sonList.forEach(s => {
+          if (p.id == s.parentId) {
+            this.areasSonList.push(s);
+            secondList.push({ value: s.id, label: s.name });
+          }
+        })
+        firstList.push({ value: p.id, label: p.name, children: secondList })
+      })
+      this.assemAreaList = firstList;
     }
   }
 };