任务UI代码优化

src/views/farm/task/index.vue

@@ -57,9 +57,16 @@
           <span> {{ cpUserList.find(t => t.id == scope.row.mainPerson).name }} </span>
         </template>
       </el-table-column>
-      <el-table-column label="执行人" align="center" prop="executorPerson" />
+      <el-table-column label="执行人" align="center" prop="executorPerson" width="80" >
-      <el-table-column label="区域" align="center" prop="areas" width="180" />
+        <template slot-scope="scope">
-
+              <span>{{executorPersonConvert(scope.row.executorPerson)}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="区域" align="center" prop="areas" width="180" >
+        <template slot-scope="scope">
+              <span>{{areaConvert(scope.row.areas)}}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="作物名" align="center" prop="cropName">
         <template slot-scope="scope">
           <span> {{ cropList.find(t => t.id == scope.row.cropId).name }} </span>
@@ -76,13 +83,12 @@
           <span> {{ cateTwoList.find(t => t.id == scope.row.taskCateName).name }} </span>
         </template>
       </el-table-column>
-      <el-table-column label="需要的资源" align="center" prop="resources">
+      <el-table-column label="需要的资源" align="center" prop="resources" width="180">
           <template slot-scope="scope">
               <span>{{resouceConvert(scope.row.resources)}}</span>
           </template>
       </el-table-column>
       <el-table-column label="工时" align="center" prop="workingHours" />
-
       <el-table-column label="图片" align="center" prop="images">
         <template slot-scope="scope">
           <el-image v-if="scope.row.images[0] != null" style="" :src="scope.row.images[0]"
@@ -122,7 +128,6 @@
     <!-- 对话框(添加 / 修改) -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-
         <el-form-item label="项目选择" prop="projectId">
           <el-select v-model="form.projectId" placeholder="请选择" @change="changeProject">
             <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
@@ -130,7 +135,6 @@
             </el-option>
           </el-select>
         </el-form-item>
-
         <el-form-item label="负责人" prop="mainPerson">
           <el-select v-model="form.mainPerson" placeholder="请选择">
             <el-option v-for="item in cpUserList" :key="item.id" :label="item.name" :value="item.id">
@@ -138,20 +142,17 @@
             </el-option>
           </el-select>
         </el-form-item>
-
         <el-form-item label="执行人" prop="executorPerson">
-          <el-select v-model="executorPerson" multiple placeholder="请选择">
+          <el-select v-model="form.executorPerson" multiple placeholder="请选择">
             <el-option v-for="item in cpUserList" :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" 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">
@@ -159,11 +160,9 @@
             </el-option>
           </el-select>
         </el-form-item>
-
         <el-form-item label="作物数量" prop="cropNum">
           <el-input v-model="form.cropNum" placeholder="请输入" />
         </el-form-item>
-
         <el-form-item label="任务类型" prop="taskCateId">
           <el-select v-model="form.taskCateId" placeholder="请选择" @change="changeCateOne">
             <el-option v-for="item in cateOneList" :key="item.id" :label="item.name" :value="item.id">
@@ -171,7 +170,6 @@
             </el-option>
           </el-select>
         </el-form-item>
-
         <el-form-item label="任务内容" prop="taskCateName">
           <el-select v-model="form.taskCateName" placeholder="请选择">
             <el-option v-for="item in cateTwoList" :key="item.id" :label="item.name" :value="item.id">
@@ -179,18 +177,12 @@
             </el-option>
           </el-select>
         </el-form-item>
-
         <el-button type="primary" @click="addResource">主要按钮</el-button>
-
         <el-form-item label="资源选择" v-for="(item,index) in form.resources" :key="index">
           <el-cascader :options="twoList" clearable  v-model="item.resourceId" @change="(obj)=>ziyuanxuanze(item,index,obj)">
           </el-cascader>
-
           <el-input v-model="item.num"/>
         </el-form-item>
-
-    
-
         <el-form-item label="工时" prop="workingHours">
           <el-input v-model="form.workingHours" placeholder="请输入工时" />
         </el-form-item>
@@ -324,21 +316,42 @@ export default {
     this.getAreasList();
   },
   methods: {
+    executorPersonConvert(executorPerson){
+      let executorPersonName = "";
+      executorPerson.forEach(person => {
+        this.cpUserList.forEach( user => {
+          if (person == user.id) {
+            executorPersonName += user.name + "\n";
+          }
+        })
+      })
+      return executorPersonName;
+    },
+    areaConvert(area){
+      if (area != null) {
+        let areaMsg = "";
+        let parentLsit = this.areasList.filter(t => t.parentId == 0);
+        let sonList = this.areasList.filter(s => s.parentId != 0);
+        area.forEach(item =>{
+          let parentName = parentLsit.filter(parent => parent.id == item[0])[0].name;
+          let sonName = sonList.filter(son => son.id == item[1])[0].name;
+          areaMsg += parentName +"/"+ sonName +"\n";
+        })
+        return areaMsg;
+      }
+     
+    },
     resouceConvert(resources){
-       let rnameArr = this.resourceList.filter(s=>{
+      let resouceMsg = "";
-            if (resources.length > 0){
+      resources.forEach(item =>{
-                return resources[0].resourceId.indexOf(s.id)>= 0;
+          let typeName = this.resourceTypeList.filter(type => type.id == item.resourceId[0])[0].name;
-            }
+          let resouceName = this.resourceList.filter(type => type.id == item.resourceId[1])[0].name;
-          } );
+          resouceMsg += typeName +"/" + resouceName +":" + item.num +"\n";
-          let rname = "";
+      })
-          rnameArr.forEach(s=>{
+      return resouceMsg;
-            rname +=  s.name + "-";
-          })
-          return rname;
     },
     ziyuanxuanze(item,index,obj){
       this.form.resource[index].reource = obj[1];
-      console.log(this.form.resource);
     },
     addResource(){
       let resourceTmp = {reource:0,num:1}
@@ -421,7 +434,7 @@ export default {
     /** 查询任务列表 */
     getList() {
       this.loading = true;
-      // this.assemArea();
+      this.assemArea();
       // 处理查询参数
       let params = { ...this.queryParams };
       this.addBeginAndEndTime(params, this.dateRangePlanStartTime, 'planStartTime');
@@ -429,7 +442,6 @@ export default {
       this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
       // 执行查询
       getTaskPage(params).then(response => {
-
         //1 循环list
         response.data.list.forEach(element => {
           if (element.images != null) {
@@ -439,29 +451,6 @@ export default {
             //无图片给个空
             element.images = [];
           }
-          
-        
-          element.executorPerson = JSON.parse(element.executorPerson);
-          let executorName = '';
-          element.executorPerson.forEach((exe) => {
-            this.cpUserList.forEach((cp) => {
-              if (exe == cp.id) {
-                executorName += (cp.name + "、\n");
-              }
-            })
-          })
-          element.executorPerson = executorName;
-
-          if (element.areas != null) {
-            element.areas = JSON.parse(element.areas);
-            let areaName = "";
-            element.areas.forEach(item => {
-              let p = this.areasList.filter(t => t.id == item[0])[0].name;
-              let s = this.areasList.filter(t => t.id == item[1])[0].name;
-              areaName += p + "/" + s + "、\n";
-            })
-            element.areas = areaName;
-          }
         });
         this.list = response.data.list;
         this.total = response.data.total;
@@ -485,17 +474,6 @@ export default {
           } else {
             element.images = [];
           }
-          element.resources = JSON.parse(element.resources);
-          let resourceName = '';
-          element.resources.forEach((inn) => {
-            this.resourceList.forEach((resource) => {
-              if (inn == resource.id) {
-                resourceName += (resource.name + "、\n");
-              }
-            }
-            )
-          })
-          element.resources = resourceName;
         });
         this.list = response.data.list;
         this.total = response.data.total;
@@ -546,10 +524,7 @@ export default {
       this.reset();
       this.twoRescoure();
       this.assemArea();
-
       this.resourceNumberList = [];
-
-
       this.open = true;
       this.title = "添加农场任务";
     },
@@ -559,28 +534,13 @@ export default {
       this.assemArea();
       const id = row.id;
       getTask(id).then(response => {
-        this.form = response.data;
+      this.form = response.data;
-        if (response.data.resources != null) {
+      if (response.data.images != null) {
-          let resourceArr = JSON.parse(response.data.resources);
+        let imagesArr = JSON.parse(response.data.images);
-          this.form.resources = resourceArr;
+        this.form.images = imagesArr;
-          this.selectResourceList = resourceArr;
+      }
-        }
+      this.open = true;
-
+      this.title = "修改农场任务";
-        if (response.data.images != null) {
-          let imagesArr = JSON.parse(response.data.images);
-          this.form.images = imagesArr;
-        }
-
-        let executorArr = JSON.parse(response.data.executorPerson);
-        this.form.executorPerson = executorArr;
-        this.executorPerson = executorArr;
-
-
-        let areasArray = JSON.parse(response.data.areas);
-        this.form.areas = areasArray;
-
-        this.open = true;
-        this.title = "修改农场任务";
       });
     },
     /** 提交按钮 */
@@ -590,9 +550,6 @@ export default {
         if (!valid) {
           return;
         }
-        //资源转json
-        this.form.executorPerson = JSON.stringify(this.executorPerson);
-        this.form.areas = JSON.stringify(this.form.areas);
         //图片转json
         let im = this.form.images;
         this.form.images = JSON.stringify("");
@@ -613,8 +570,6 @@ export default {
         }
         // 添加的提交
         createTask(this.form).then(response => {
-          this.form.executorPerson = JSON.stringify(this.form.executorPerson);
-          this.form.members = JSON.stringify(this.form.members);
           this.$modal.msgSuccess("新增成功");
           this.open = false;
           this.getList();