农场事件UI

src/views/farm/event/index.vue

@@ -37,13 +37,19 @@
 
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="" align="center" prop="id" />
-      <el-table-column label="" align="center" prop="projectId" />
-      <el-table-column label="" align="center" prop="taskId" />
-      <el-table-column label="" align="center" prop="name" />
-      <el-table-column label="" align="center" prop="content" />
-      <el-table-column label="" align="center" prop="images" />
-      <el-table-column label="" align="center" prop="createTime" width="180">
+      <el-table-column label="事件ID" align="center" prop="id" />
+      <el-table-column label="项目名" align="center" prop="projectId" />
+      <el-table-column label="任务名" align="center" prop="taskId" />
+      <el-table-column label="事件名" align="center" prop="name" />
+      <el-table-column label="事件内容" align="center" prop="content" />
+      <el-table-column label="事件图片" align="center" prop="images">
+          <template slot-scope="scope">
+            <el-image style="" :src="scope.row.images.split(',')[0]"
+            :preview-src-list="scope.row.images.split(',')">
+            </el-image>
+          </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -64,19 +70,36 @@
     <!-- 对话框(添加 / 修改) -->
     <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-input v-model="form.projectId" placeholder="请输入" />
+
+        <el-form-item label="项目" prop="projectId">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              v-for="item in projectList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="" prop="taskId">
-          <el-input v-model="form.taskId" placeholder="请输入" />
+
+        <el-form-item label="任务" prop="projectId">
+          <el-select v-model="form.taskId" placeholder="请选择任务">
+            <el-option
+              v-for="item in taskList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
         </el-form-item>
-        <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="">
+        <el-form-item label="图片">
           <imageUpload v-model="form.images"/>
         </el-form-item>
       </el-form>
@@ -92,6 +115,9 @@
 import { createEvent, updateEvent, deleteEvent, getEvent, getEventPage, exportEventExcel } from "@/api/farm/event";
 import ImageUpload from '@/components/ImageUpload';
 import Editor from '@/components/Editor';
+import { getProjectPage } from "@/api/farm/project";
+import { getTaskPage } from "@/api/farm/task";
+
 
 export default {
   name: "Event",
@@ -132,13 +158,41 @@ export default {
       rules: {
         projectId: [{ required: true, message: "不能为空", trigger: "blur" }],
         taskId: [{ required: true, message: "不能为空", trigger: "blur" }],
-      }
+      },
+      taskList:[],
+      projectList:[],
+      projectId:'',
+      taskId:'',
     };
   },
   created() {
+    this.getProject();
+    this.getTask();
     this.getList();
+    
   },
   methods: {
+    /*获取项目列表*/
+    getProject(){
+      getProjectPage({
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+      }).then(res=>{
+        this.projectList = res.data.list;
+      })
+    },
+    /*获取任务列表*/
+    getTask(){
+      getTaskPage({
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+      }).then(res=>{
+        this.taskList = res.data.list;
+      })
+    },
+
     /** 查询列表 */
     getList() {
       this.loading = true;
@@ -147,6 +201,22 @@ export default {
       this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
       // 执行查询
       getEventPage(params).then(response => {
+
+        //循环遍历List
+        response.data.list.forEach(eve => {
+          //循环对比 project
+          this.projectList.forEach(project =>{
+            if(project.id == eve.projectId){
+              eve.projectId = project.name;
+            }
+          });
+          this.taskList.forEach(task =>{
+            if (task.id == eve.taskId) {
+              eve.taskId = task.name;
+            }
+          })
+        });
+
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;