农场任务ui

src/views/farm/task/index.vue

@@ -48,17 +48,29 @@
 
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="" align="center" prop="id" />
+      <el-table-column label="任务ID" align="center" prop="id" />
-      <el-table-column label="" align="center" prop="name" />
+      <el-table-column label="任务名" align="center" prop="name" />
-      <el-table-column label="" align="center" prop="content" />
+      <el-table-column label="任务内容" align="center" prop="content" />
-      <el-table-column label="" align="center" prop="resources" />
+      <el-table-column label="需要的资源" align="center" prop="resources" />
-      <el-table-column label="" align="center" prop="images" />
+
-      <el-table-column label="" align="center" prop="planStartTime" width="180">
+
+      <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]" 
+              :preview-src-list="scope.row.images">
+            </el-image>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="开始时间" align="center" prop="planStartTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.planStartTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="" align="center" prop="planEndTime" width="180">
+      <el-table-column label="截止时间" align="center" prop="planEndTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.planEndTime) }}</span>
         </template>
@@ -85,23 +97,35 @@
     <!-- 对话框(添加 / 修改) -->
     <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="name">
+        <el-form-item label="任务名" prop="name">
           <el-input v-model="form.name" placeholder="请输入" />
         </el-form-item>
-        <el-form-item label="">
+        <el-form-item label="任务内容">
           <editor v-model="form.content" :min-height="192"/>
         </el-form-item>
-        <el-form-item label="" prop="resources">
+
-          <el-input v-model="form.resources" placeholder="请输入" />
+
+        <el-form-item label="资源选择">
+          <el-select  v-model="selectResourceList" multiple placeholder="请选择">
+            <el-option
+              v-for="item in resourceList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+              {{item.name}}
+            </el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="" prop="images">
+
-          <el-input v-model="form.images" placeholder="请输入" />
+        <el-form-item label="任务图片">
+          <imageUpload v-model="form.images"/>
         </el-form-item>
-        <el-form-item label="" prop="planStartTime">
+
-          <el-date-picker clearable v-model="form.planStartTime" type="date" value-format="yyyy-MM-dd" placeholder="选择" />
+        <el-form-item label="任务开始时间" prop="planStartTime">
+          <el-date-picker clearable v-model="form.planStartTime" type="date" value-format="timestamp" placeholder="选择" />
         </el-form-item>
-        <el-form-item label="" prop="planEndTime">
+        <el-form-item label="任务结束时间" prop="planEndTime">
-          <el-date-picker clearable v-model="form.planEndTime" type="date" value-format="yyyy-MM-dd" placeholder="选择" />
+          <el-date-picker clearable v-model="form.planEndTime" type="date" value-format="timestamp" placeholder="选择" />
         </el-form-item>
         <el-form-item label="优先级" prop="weight">
           <el-input v-model="form.weight" placeholder="请输入优先级" />
@@ -117,12 +141,15 @@
 
 <script>
 import { createTask, updateTask, deleteTask, getTask, getTaskPage, exportTaskExcel } from "@/api/farm/task";
+import ImageUpload from '@/components/ImageUpload';
 import Editor from '@/components/Editor';
+import { getResourcePage } from "@/api/farm/resource";
 
 export default {
   name: "Task",
   components: {
     Editor,
+    ImageUpload,
   },
   data() {
     return {
@@ -157,14 +184,27 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      resourceList:[],
+      selectResourceList:[],
     };
   },
   created() {
+    this.getResource();
     this.getList();
   },
   methods: {
-    /** 查询列表 */
+    /**查询资源*/
+    getResource(){
+      getResourcePage({
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+      }).then(res=>{
+        this.resourceList = res.data.list;
+      })
+    },
+    /** 查询任务列表 */
     getList() {
       this.loading = true;
       // 处理查询参数
@@ -174,9 +214,35 @@ export default {
       this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
       // 执行查询
       getTaskPage(params).then(response => {
-        this.list = response.data.list;
+      //1 循环list
-        this.total = response.data.total;
+      response.data.list.forEach(element => {
-        this.loading = false;
+        if(element.images != null){
+          //有图片转json
+          element.images = JSON.parse(element.images);
+        }else{
+          //无图片给个空
+          element.images = [];
+        }
+
+        //2 循环每个list对象的resource
+        element.resources = JSON.parse(element.resources);
+        let resourceName = '';
+        element.resources.forEach((inn) =>{
+          //3 每个resouce循环比较 resourceList，取得名字
+          this.resourceList.forEach((resource) =>{
+              if(inn == resource.id){
+                resourceName += (resource.name + ",");
+              }
+            }
+          )
+        })
+        element.resources = resourceName;
+
+
+      });
+      this.list = response.data.list;
+      this.total = response.data.total;
+      this.loading = false;
       });
     },
     /** 取消按钮 */
@@ -223,6 +289,17 @@ export default {
       const id = row.id;
       getTask(id).then(response => {
         this.form = response.data;
+        if(response.data.resources != null){
+          let resourceArr = JSON.parse(response.data.resources);
+          this.form.resources = resourceArr;
+          this.selectResourceList = resourceArr;
+        }
+
+        if(response.data.images != null){
+          let imagesArr = JSON.parse(response.data.images);
+          this.form.images = imagesArr;
+        }
+
         this.open = true;
         this.title = "修改农场项目";
       });
@@ -233,6 +310,16 @@ export default {
         if (!valid) {
           return;
         }
+        //资源转json
+        this.form.resources = JSON.stringify(this.selectResourceList);
+
+        //图片转json
+        let im = this.form.images;
+        if(im != null && typeof(im) != 'object'){
+            let imgArr = im.split(",")
+            this.form.images = JSON.stringify(imgArr);
+        }
+
         // 修改的提交
         if (this.form.id != null) {
           updateTask(this.form).then(response => {