任务管理，任务视图页面

src/api/system/user.js

@@ -70,3 +70,11 @@ export function deptTreeSelect() {
     method: 'get'
   })
 }
+
+// 查询部门员工树结构
+export function getDeptUserTree() {
+  return request({
+    url: '/system/user/getDeptUserTree',
+    method: 'get'
+  })
+}

src/api/task/category.js

@@ -47,7 +47,7 @@ export function delCategory(CategoryId) {
 // 查询分类列表（无条件）
 export function getCategoryList() {
   return request({
-    url: '/task/task/getCategoryList',
+    url: '/task/category/getCategoryList',
     method: 'get'
   })
 }

src/api/task/task.js

@@ -69,3 +69,22 @@ export function getFeedbackList(taskId, date) {
     method: 'get'
   })
 }
+
+
+// 任务审批
+export function auditTask(data) {
+  return request({
+    url: '/task/task/audit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 任务分解
+export function splitTask(data) {
+  return request({
+    url: '/task/task/split',
+    method: 'post',
+    data: data
+  })
+}

src/components/DeptUserTree/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <el-input v-model="userNames" size="mini" disabled></el-input>
+    <el-tree
+      ref="dut"
+      :data="userList"
+      @check="change"
+      show-checkbox
+      node-key="id">
+    </el-tree>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "index",
+  props: {
+    userList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      userNames: undefined
+    }
+  },
+  methods: {
+    change() {
+      let checkedNodes = this.$refs.dut.getCheckedNodes(true, false);
+      let val = checkedNodes.map(node => node.id);
+      let labels = checkedNodes.map(node => node.label);
+      this.userNames = labels.join()
+      console.log(checkedNodes);
+      this.$emit('selected', val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/task/category.vue

@@ -163,9 +163,9 @@ export default {
   methods: {
     /** 查询分类列表 */
     getList() {
-      listCategory(this.queryParams).then(response => {
-          this.categoryList = response.data.records;
-          this.total = response.data.total;
+      listCategory(this.queryParams).then(res => {
+          this.categoryList = res.data.records;
+          this.total = res.data.total;
         }
       );
     },
@@ -216,8 +216,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      getCategory(row.id).then(response => {
-        this.form = response.data;
+      getCategory(row.id).then(res => {
+        this.form = res.data;
         this.open = true;
         this.title = "修改分类";
       });
@@ -229,13 +229,13 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != undefined) {
-            updateCategory(this.form).then(response => {
+            updateCategory(this.form).then(res => {
               this.$message.success("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addCategory(this.form).then(response => {
+            addCategory(this.form).then(res => {
               this.$message.success("新增成功");
               this.open = false;
               this.getList();

src/views/task/components/taskDetail.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <el-form :model="detailForm" label-width="100px">
+      <el-form-item label="任务名称：">
+        <div>{{ detailForm.taskName }}</div>
+      </el-form-item>
+      <el-form-item label="所属项目：">
+        <div>{{ detailForm.projectName }}</div>
+      </el-form-item>
+      <el-form-item label="任务描述：">
+        <div>{{ detailForm.description }}</div>
+      </el-form-item>
+      <el-form-item label="起止时间：">
+        <div>{{ detailForm.beginDate + ' 至 ' + detailForm.endDate }}</div>
+      </el-form-item>
+      <el-form-item label="主要负责人：">
+        <div>{{ detailForm.executorName }}</div>
+      </el-form-item>
+      <el-form-item label="共同执行人：">
+        <template v-for="item in detailForm.coExecutorNames">
+          <el-tag size="mini">{{ item }}</el-tag>
+        </template>
+      </el-form-item>
+      <el-form-item label="附件："></el-form-item>
+    </el-form>
+    <el-table :data="detailForm.feedbacks" border style="font-size: 12px">
+      <el-table-column width="70" label="反馈状态">
+        <template slot-scope="scope">
+          <div>{{ getFeedbackTypeName(scope.row.feedbackType) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column width="60" property="userName" label="反馈人"></el-table-column>
+      <el-table-column width="60" label="完成度">
+        <template slot-scope="scope">
+          <div>{{ scope.row.value + '%' }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column width="140" property="createTime" label="反馈时间"></el-table-column>
+      <el-table-column label="反馈备注">
+        <template slot-scope="scope">
+          <div>{{ scope.row.description }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "taskDetail",
+  props: {
+    detailForm: {
+      type: Object,
+      default: {}
+    }
+  },
+  methods: {
+    getFeedbackTypeName(type) {
+      if (type === '1') {
+        return '进度反馈'
+      } else if (type === '2') {
+        return '完成'
+      } else if (type === '3') {
+        return '终止'
+      }
+      return '评论'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 0;
+}
+</style>

src/views/task/project.vue

@@ -186,9 +186,9 @@ export default {
       getCategoryList().then(res => {
         this.categoryList = res.data;
       })
-      listProject(this.queryParams).then(response => {
-          this.projectList = response.data.records;
-          this.total = response.data.total;
+      listProject(this.queryParams).then(res => {
+          this.projectList = res.data.records;
+          this.total = res.data.total;
         }
       );
     },
@@ -240,8 +240,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      getProject(row.id).then(response => {
-        this.form = response.data;
+      getProject(row.id).then(res => {
+        this.form = res.data;
         this.open = true;
         this.title = "修改项目";
       });
@@ -253,13 +253,13 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != undefined) {
-            updateProject(this.form).then(response => {
+            updateProject(this.form).then(res => {
               this.$message.success("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addProject(this.form).then(response => {
+            addProject(this.form).then(res => {
               this.$message.success("新增成功");
               this.open = false;
               this.getList();

src/views/task/task.vue

@@ -5,7 +5,7 @@
         <el-select
           v-model="queryParams.categoryId"
           clearable
-          style="width: 240px">
+          style="width: 200px">
           <el-option v-for="item in categoryList" :key="item.id" :label="item.categoryName" :value="item.id"/>
         </el-select>
       </el-form-item>
@@ -13,7 +13,7 @@
         <el-select
           v-model="queryParams.projectId"
           clearable
-          style="width: 240px">
+          style="width: 200px">
           <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id"/>
         </el-select>
       </el-form-item>
@@ -22,19 +22,24 @@
           v-model="queryParams.month"
           type="month"
           value-format="yyyy-MM"
-          placeholder="选择月份">
+          placeholder="选择月份"
+          clearable
+          style="width: 200px">
         </el-date-picker>
       </el-form-item>
-      <!--      <el-form-item label="状态" prop="status">-->
-      <!--        <el-select-->
-      <!--          v-model="queryParams.status"-->
-      <!--          placeholder="项目状态"-->
-      <!--          clearable-->
-      <!--          style="width: 240px">-->
-      <!--          <el-option :key="0" label="正常" :value="0"/>-->
-      <!--          <el-option :key="1" label="停用" :value="1"/>-->
-      <!--        </el-select>-->
-      <!--      </el-form-item>-->
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="项目状态"
+          style="width: 200px">
+          <el-option :key="0" label="全部" value="0"/>
+          <el-option :key="1" label="未开始" value="1"/>
+          <el-option :key="2" label="进行中" value="1"/>
+          <el-option :key="3" label="延期" value="1"/>
+          <el-option :key="4" label="完成" value="1"/>
+          <el-option :key="5" label="终止" value="1"/>
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -49,45 +54,38 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['task:Task:add']"
+          v-hasPermi="['task:task:add']"
         >新增
         </el-button>
       </el-col>
-      <el-col :span="10" :offset="2">
-        <el-radio-group v-model="queryParams.status" size="mini">
-          <el-radio-button label="0">全部</el-radio-button>
-          <el-radio-button label="1">完成</el-radio-button>
-          <el-radio-button label="2">延期</el-radio-button>
-          <el-radio-button label="3">终止</el-radio-button>
-          <el-radio-button label="4">未开始</el-radio-button>
-          <el-radio-button label="5">进行中</el-radio-button>
-        </el-radio-group>
-      </el-col>
     </el-row>
 
-    <el-table :data="TaskList">
+    <el-table :data="TaskList"
+              @row-click="rowClick"
+              border
+              stripe
+              size="mini">
       <el-table-column label="任务编号" prop="id" width="100"/>
       <el-table-column label="任务名称" prop="taskName"/>
       <el-table-column label="所属项目" prop="projectName"/>
-      <el-table-column label="执行人" prop="executorName"/>
-      <el-table-column label="进度" prop="progressValue">
+      <el-table-column label="执行人" prop="executorName" width="100"/>
+      <el-table-column label="进度" prop="progressValue" width="80">
         <template slot-scope="scope">
-          <span>{{ scope.row.progressValue ? scope.row.progressValue : 0 + '%' }}</span>
+          <span>{{ (scope.row.progressValue ? scope.row.progressValue : 0) + '%' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="状态">
+      <el-table-column label="状态" width="100">
         <template slot-scope="scope">
-          <el-tag type="success" size="small" v-if="scope.row.status==0">正常</el-tag>
-          <el-tag type="info" size="small" v-else>停用</el-tag>
+          <el-tag size="mini" :color="statusMap[scope.row.status].color">{{ statusMap[scope.row.status].name }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="任务起止时间" width="180">
+      <el-table-column label="任务起止时间" width="200">
         <template slot-scope="scope">
-          <span>{{ scope.row.beginDate + '至' + scope.row.endDate }}</span>
+          <span>{{ scope.row.beginDate + ' 至 ' + scope.row.endDate }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="创建时间" prop="createTime" width="150">
+      <el-table-column label="创建时间" prop="createTime" width="160">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -98,16 +96,16 @@
             size="mini"
             type="text"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:Task:edit']"
+            @click="handleAudit(scope.row)"
+            v-hasPermi="['system:task:edit']"
           >审核
           </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:Task:edit']"
+            @click="handleSplit(scope.row)"
+            v-hasPermi="['system:task:split']"
           >分解
           </el-button>
           <el-button
@@ -115,7 +113,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:Task:edit']"
+            v-hasPermi="['system:task:edit']"
           >终止
           </el-button>
           <el-button
@@ -143,11 +141,11 @@
       </el-pagination>
     </div>
 
-    <!-- 添加或修改项目配置对话框 -->
+    <!-- 添加或修改任务配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="任务名称" prop="taskName">
-          <el-input v-model="form.taskName" placeholder="请输入项目名称"/>
+          <el-input v-model="form.taskName" placeholder="请输入任务名称"/>
         </el-form-item>
         <el-form-item label="任务类型" prop="taskType">
           <el-radio-group v-model="form.taskType">
@@ -177,20 +175,15 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item label="执行人" prop="executor">
-          <el-select
+          <el-cascader
+            ref="dut"
             v-model="form.executor"
-            clearable
-            style="width: 240px">
-            <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id"/>
-          </el-select>
+            :options="userList"
+            :props="{ expandTrigger: 'hover',value:'id',label:'label' }"
+            :show-all-levels="false"></el-cascader>
         </el-form-item>
         <el-form-item label="共同执行人" prop="coExecutor">
-          <el-select
-            v-model="form.coExecutor"
-            clearable
-            style="width: 240px">
-            <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id"/>
-          </el-select>
+          <dept-user-tree :userList="userList" @selected="selectCoExecutor"/>
         </el-form-item>
         <el-form-item label="任务附件">
           <!--          <el-upload-->
@@ -211,8 +204,79 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
+        <el-button size="small" @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 详情/审核任务对话框 -->
+    <el-dialog :title="detailTitle" :visible.sync="detailOpen" width="500px" append-to-body>
+      <task-detail :detail-form="detailForm"></task-detail>
+      <div v-if="detailTitle=='审核任务'" style="margin-top: 10px">
+        <el-form ref="auditForm" :model="auditForm" label-width="100px">
+          <el-form-item label="审核意见">
+            <el-radio-group v-model="auditForm.auditResult">
+              <el-radio label="1">确认完成</el-radio>
+              <el-radio label="0">驳回</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="审核备注">
+            <el-input v-model="auditForm.auditOpinion" type="textarea"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="submitAudit">确 定</el-button>
+        <el-button size="small" @click="detailCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分解任务对话框 -->
+    <el-dialog title="分解任务" :visible.sync="splitOpen" width="500px" append-to-body>
+      <el-form ref="splitForm" class="split-form">
+        <el-form-item label="任务名称：">
+          <div>{{ splitForm.taskName }}</div>
+        </el-form-item>
+        <el-form-item label="所属项目：">
+          <span>{{ splitForm.projectName }}</span>
+          <el-button type="text" size="medium" icon="el-icon-circle-plus-outline"
+                     style="float: right; padding: -1px 3px" @click="addChild"></el-button>
+        </el-form-item>
+        <el-card shadow="always" v-for="(c,index) in splitForm.children" :key="index">
+          <div slot="header" class="clearfix">
+            <span>子任务{{ index + 1 }}</span>
+            <el-button type="text" icon="el-icon-close" @click="delChild(index)"
+                       style="float: right; padding: 3px 0"></el-button>
+          </div>
+          <el-form label-width="80px">
+            <el-form-item label="任务名称">
+              <el-input v-model="c.taskName" size="small" style="width: 350px"/>
+            </el-form-item>
+            <el-form-item label="执行人" prop="executor">
+              <el-cascader
+                ref="dut"
+                v-model="c.executor"
+                :options="userList"
+                :props="{ expandTrigger: 'hover',value:'id',label:'label' }"
+                :show-all-levels="false"></el-cascader>
+            </el-form-item>
+            <el-form-item label="起止时间">
+              <el-date-picker
+                v-model="c.rangeDate"
+                type="daterange"
+                size="small"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="submitSplit">确 定</el-button>
+        <el-button size="small" @click="splitCancel">取 消</el-button>
       </div>
     </el-dialog>
 
@@ -225,21 +289,38 @@ import {
   getTask,
   delTask,
   addTask,
-  updateTask
+  updateTask,
+  auditTask,
+  splitTask
 } from "@/api/task/task";
 import {getCategoryList} from "@/api/task/category";
 import {getProjectList} from "@/api/task/project";
+import {getDeptUserTree} from "@/api/system/user";
+import DateUtil from "@/utils/date"
+import TaskDetail from "./components/taskDetail"
+import DeptUserTree from "@/components/DeptUserTree"
 
+const statusMap = {
+  '0': {name: '待查看', color: '#E8EBEE'},
+  '1': {name: '未开始', color: '#f4f4f5'},
+  '2': {name: '进行中', color: '#ecf5ff'},
+  '3': {name: '延期', color: '#ECD994'},
+  '4': {name: '完成', color: '#f0f9eb'},
+  '5': {name: '终止', color: '#F97C07'}
+}
 export default {
   name: "Task",
+  components: {TaskDetail, DeptUserTree},
   data() {
     return {
       categoryList: [],
       projectList: [],
+      userList: [],
       // 总条数
       total: 0,
       // 项目表格数据
       TaskList: [],
+      statusMap: statusMap,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -250,12 +331,17 @@ export default {
         pageSize: 10,
         categoryId: undefined,
         projectId: undefined,
-        month: undefined,
+        month: DateUtil.month(),
         status: '0'
       },
       // 表单参数
       form: {},
-
+      detailTitle: "",
+      detailOpen: false,
+      detailForm: {},
+      auditForm: {},
+      splitOpen: false,
+      splitForm: {},
       // 表单校验
       rules: {
         taskName: [
@@ -282,39 +368,18 @@ export default {
   methods: {
     /** 查询项目列表 */
     getList() {
-      getCategoryList().then(res => {
+      getCategoryList("").then(res => {
         this.categoryList = res.data;
       })
       getProjectList("").then(res => {
         this.projectList = res.data;
       })
-      listTask(this.queryParams).then(response => {
-          this.TaskList = response.data.records;
-          this.total = response.data.total;
+      listTask(this.queryParams).then(res => {
+          this.TaskList = res.data.records;
+          this.total = res.data.total;
         }
       );
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 取消按钮（数据权限）
-    cancelDataScope() {
-      this.openDataScope = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        taskName: undefined,
-        categoryId: undefined,
-        description: undefined,
-        status: "0",
-      };
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -333,20 +398,82 @@ export default {
       this.pageNum = val;
       this.getList();
     },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset()
+    },
+    reset() {
+      this.form = {
+        id: undefined,
+        taskName: undefined,
+        categoryId: undefined,
+        description: undefined,
+        status: "0",
+      };
+      this.resetForm("form");
+    },
+    // 取消按钮（详情/审核）
+    detailCancel() {
+      this.detailOpen = false;
+      this.detailForm = {};
+      this.auditForm = {}
+      this.resetForm("auditForm");
+    },
+    // 取消按钮（分解任务）
+    splitCancel() {
+      this.splitOpen = false;
+      this.splitForm = {}
+      this.resetForm("splitForm");
+    },
+
+    /** 查看任务详情*/
+    rowClick(row, column, event) {
+      if (!column.property) {
+        return
+      }
+      getTask(row.id).then(res => {
+        this.detailForm = res.data;
+        this.detailOpen = true;
+        this.detailTitle = "任务详情";
+      })
+    },
     /** 新增按钮操作 */
     handleAdd() {
+      getDeptUserTree().then(res => {
+        this.userList = res.data
+      })
       this.reset();
       this.open = true;
       this.title = "添加项目";
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      getTask(row.id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改项目";
-      });
+
+    selectExecutor(val) {
+      console.log(val);
+    },
+    selectCoExecutor(val) {
+      console.log(val);
+    },
+    /** 审核按钮操作 */
+    handleAudit(row) {
+      getTask(row.id).then(res => {
+        this.detailForm = res.data;
+        this.detailOpen = true;
+        this.detailTitle = "审核任务";
+      })
+    },
+    /** 分解按钮操作 */
+    handleSplit(row) {
+      getDeptUserTree().then(res => {
+        this.userList = res.data
+        this.splitForm = {
+          parentId: row.id,
+          taskName: row.taskName,
+          projectName: row.projectName,
+          children: []
+        }
+        this.splitOpen = true
+      })
     },
 
 
@@ -356,26 +483,40 @@ export default {
         if (valid) {
           this.form.beginDate = this.form.rangeDate[0]
           this.form.endDate = this.form.rangeDate[1]
-          if (this.form.id != undefined) {
-            updateTask(this.form).then(response => {
-              this.$message.success("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addTask(this.form).then(response => {
-              this.$message.success("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
+          addTask(this.form).then(res => {
+            this.$message.success("新增成功");
+            this.open = false;
+            this.getList();
+          });
         }
       });
     },
 
+    /** 审核提交按钮 */
+    submitAudit() {
+
+    },
+    /** 分解任务提交按钮 */
+    submitSplit() {
+      console.log(this.splitForm);
+      splitTask(this.splitForm).then(res => {
+        console.log(res);
+      })
+    },
+
+    /** 终止按钮操作 */
+    handleUpdate(row) {
+      this.$confirm('是否确认终止任务编号为"' + row.id + '"的任务？').then(() => {
+        return updateTask({id: row.id, status: '5'});
+      }).then(() => {
+        this.getList();
+        this.$message.success("终止成功");
+      }).catch(() => {
+      });
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$confirm('是否确认删除项目编号为"' + row.id + '"的数据项？').then(() => {
+      this.$confirm('是否确认删除任务编号为"' + row.id + '"的数据项？').then(() => {
         return delTask(row.id);
       }).then(() => {
         this.getList();
@@ -383,6 +524,38 @@ export default {
       }).catch(() => {
       });
     },
+
+    addChild() {
+      let child = {
+        taskName: undefined,
+        executor: undefined,
+        rangeDate: []
+      }
+      this.splitForm.children.push(child)
+    },
+    delChild(index) {
+      this.splitForm.children.splice(index, 1)
+    },
   }
 };
 </script>
+<style scoped lang="scss">
+.split-form {
+
+  ::v-deep .el-form-item__label {
+    font-size: 13px;
+  }
+
+  ::v-deep.el-form-item {
+    margin-bottom: 0;
+  }
+
+  ::v-deep.el-card__header {
+    padding: 5px 10px;
+  }
+
+  ::v-deep.el-card__body {
+    padding: 5px;
+  }
+}
+</style>

src/views/task/view.vue

@@ -22,28 +22,31 @@
       <el-form-item>
         <el-radio-group v-model="queryParams.status" size="mini" @change="getList">
           <el-radio-button label="0">全部</el-radio-button>
-          <el-radio-button label="1">完成</el-radio-button>
-          <el-radio-button label="2">延期</el-radio-button>
-          <el-radio-button label="3">终止</el-radio-button>
-          <el-radio-button label="4">未开始</el-radio-button>
-          <el-radio-button label="5">进行中</el-radio-button>
+          <el-radio-button label="1">未开始</el-radio-button>
+          <el-radio-button label="2">进行中</el-radio-button>
+          <el-radio-button label="3">延期</el-radio-button>
+          <el-radio-button label="4">完成</el-radio-button>
+          <el-radio-button label="5">终止</el-radio-button>
         </el-radio-group>
       </el-form-item>
     </el-form>
 
     <el-table
+      ref="view-table"
       :data="tableData"
-      :header-cell-style="headerCellStyle"
+      stripe
+      size="mini"
       :cell-style="cellStyle"
       @cell-click="cellClick"
       @cell-dblclick="cellDbclick"
+      @row-click="rowClick"
       height="calc(100vh - 140px)"
       border>
       <el-table-column prop="id" label="编号" align="center" width="50"/>
       <el-table-column prop="taskName" label="任务名称" align="center" width="180"/>
       <el-table-column prop="executorName" label="主负责人" align="center" width="80">
         <template slot-scope="scope">
-          <div>{{ scope.row.executorName }}</div>
+          <div style="line-height: 15px">{{ scope.row.executorName }}</div>
           <el-tag size="mini">{{ scope.row.progressValue + '%' }}</el-tag>
         </template>
       </el-table-column>
@@ -52,7 +55,7 @@
           <span v-if="scope.row.formLastMonth" style="color: red">是</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" v-for="(item,index) in tableHeaders" :key="index" :prop="item.day" width="40">
+      <el-table-column align="center" v-for="(item,index) in tableHeaders" :key="index" :prop="item.day" width="50">
         <template slot="header" slot-scope="scope">
           <div style="width: 20px">{{ item.day }}</div>
           <div v-if="item.week=='周六'" style="width: 24px;color: #1c84c6">{{ item.week }}</div>
@@ -63,7 +66,7 @@
         <template slot-scope="scope">
           <el-popover
             placement="top"
-            width="560"
+            width="680"
             trigger="click">
             <el-table :data="feedbacks" border style="font-size: 12px">
               <el-table-column width="70" label="反馈状态">
@@ -78,7 +81,11 @@
                 </template>
               </el-table-column>
               <el-table-column width="140" property="createTime" label="反馈时间"></el-table-column>
-              <el-table-column width="200" label="反馈备注"></el-table-column>
+              <el-table-column label="反馈备注">
+                <template slot-scope="scope">
+                  <div>{{ scope.row.description }}</div>
+                </template>
+              </el-table-column>
             </el-table>
             <div slot="reference">{{ scope.row[item.day].value }}</div>
           </el-popover>
@@ -86,7 +93,7 @@
       </el-table-column>
     </el-table>
 
-    <el-dialog title="反馈任务" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog title="反馈任务" :visible.sync="open" width="680px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="任务名称">
           <div>{{ form.taskName }}</div>
@@ -119,60 +126,27 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="任务详情" :visible.sync="openDetail" width="500px" append-to-body>
-      <el-form :model="detailForm" label-width="100px">
-        <el-form-item label="任务名称：">
-          <div>{{ detailForm.taskName }}</div>
-        </el-form-item>
-        <el-form-item label="所属项目：">
-          <div>{{ detailForm.projectName }}</div>
-        </el-form-item>
-        <el-form-item label="任务描述：">
-          <div>{{ detailForm.description }}</div>
-        </el-form-item>
-        <el-form-item label="起止时间：">
-          <div>{{ detailForm.beginDate + '至' + detailForm.endDate }}</div>
-        </el-form-item>
-        <el-form-item label="主要负责人：">
-          <div>{{ detailForm.executorName }}</div>
-        </el-form-item>
-        <el-form-item label="共同执行人：">
-          <div>{{ detailForm.executorName }}</div>
-        </el-form-item>
-        <el-form-item label="附件："></el-form-item>
-      </el-form>
-      <el-table :data="detailForm.feedbacks" border style="font-size: 12px">
-        <el-table-column width="70" label="反馈状态">
-          <template slot-scope="scope">
-            <div>{{ getFeedbackTypeName(scope.row.feedbackType) }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column width="60" property="userName" label="反馈人"></el-table-column>
-        <el-table-column width="60" label="完成度">
-          <template slot-scope="scope">
-            <div>{{ scope.row.value + '%' }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column width="140" property="createTime" label="反馈时间"></el-table-column>
-        <el-table-column width="200" label="反馈备注"></el-table-column>
-      </el-table>
+    <el-dialog title="任务详情" :visible.sync="openDetail" width="680px" append-to-body>
+      <task-detail :detailForm="detailForm"></task-detail>
     </el-dialog>
 
   </div>
 </template>
 
 <script>
-import {addTask, listView, updateTask, addTaskFeedback, getFeedbackList} from "@/api/task/task";
+import {getTask, listView, addTaskFeedback, getFeedbackList} from "@/api/task/task";
 import {getProjectList} from "@/api/task/project";
 import DateUtil from "@/utils/date"
+import TaskDetail from "./components/taskDetail"
 
 export default {
+  components: {TaskDetail},
   data() {
     return {
       queryParams: {
         projectId: undefined,
         month: undefined,
-        status: '5'
+        status: '0'
       },
       projectList: [],
       tableHeaders: [],
@@ -248,7 +222,15 @@ export default {
         description: undefined
       };
       this.open = true
-
+    },
+    rowClick(row, column, event) {
+      if (column.property != "taskName") {
+        return
+      }
+      getTask(row.id).then(res => {
+        this.detailForm = res.data
+        this.openDetail = true
+      })
     },
     // 取消按钮
     cancel() {
@@ -274,7 +256,7 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          addTaskFeedback(this.form).then(response => {
+          addTaskFeedback(this.form).then(res => {
             this.$message.success("反馈成功");
             this.open = false;
             this.getList();
@@ -298,8 +280,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header-cell {
-  fontSize: 12px;
-  padding: 2px 0;
-}
+
 </style>