功能优化

src/views/meeting/weekly.vue

@@ -1,137 +1,150 @@
 <template>
   <div class="app-container">
-    <el-form   size="mini" :inline="true">
+    <el-form size="mini" :inline="true">
       <el-form-item label="关联会议">
-        <el-select size="small"   placeholder="关联会议" clearable filterable v-model="meetingWeek" @change="changeWeekData()">
-          <el-option  v-for="(item,index) in meetingData" :label="item.meetingName" :key="item.id" :value="item.weeks"></el-option>
+        <el-select size="small" placeholder="关联会议" clearable filterable v-model="meetingWeek"
+                   @change="changeWeekData()">
+          <el-option v-for="(item,index) in meetingData" :label="item.meetingName" :key="item.id"
+                     :value="item.weeks"></el-option>
         </el-select>
 
       </el-form-item>
-      <el-form-item >
-        <el-button  type="primary" icon="el-icon-download" @click="generateWeekly()" v-show="false">周报生成</el-button>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-download" @click="generateWeekly()" v-show="false">周报生成</el-button>
       </el-form-item>
     </el-form>
     <div ref="exportPdf" id="exportPdf">
-    <div>
-      <h3>本周工作内容</h3>
-      <el-table
-        border
-        stripe
-        size="mini"
-        style="width: 65%" v-model="workContents" :data="workContents">
-        <el-table-column  type="index" label="序号" width="60">
-        </el-table-column>
-        <el-table-column label="任务名称" prop="taskName" width="250">
-        </el-table-column>
-        <el-table-column label="工作反馈" prop="description" >
-        </el-table-column>
-      </el-table>
-    </div>
-    <div>
-      <h3>下周工作计划</h3>
-      <el-table
-        border
-        stripe
-        size="mini"
-        style="width: 65%" :data="workPlans">
-        <el-table-column  type="index" label="序号" width="60">
-        </el-table-column>
-        <el-table-column label="工作计划" prop="workPlan">
-          <template slot-scope="scope">
-            <el-input size="mini" type="textarea" autosize v-model="scope.row.planContent" ></el-input>
-          </template>
-        </el-table-column>
-        <el-table-column label="预计完成时间" prop="completionTimes">
-          <template slot-scope="scope">
-            <el-date-picker
-              v-model="scope.row.completionTimes"
-              type="date"
-              size="mini"
-              value-format="yyyy-MM-dd"
-              format="yyyy-MM-dd"
-              placeholder="选择日期">
-            </el-date-picker>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" prop="op" width="150" v-if="currentWeek===weeks">
-          <template slot-scope="scope">
-            <el-button size="mini" type="primary" @click="addRow()">添加</el-button>
-            <el-button size="mini" type="danger" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+      <div>
+        <h3>本周工作内容</h3>
+        <el-table
+          border
+          stripe
+          size="mini"
+          style="width: 65%" v-model="workContents" :data="workContents"
+          @row-click="rowClick">
+          <el-table-column type="index" label="序号" width="60">
+          </el-table-column>
+          <el-table-column label="任务名称" prop="taskName" width="250">
+          </el-table-column>
+          <el-table-column label="工作反馈" prop="description">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div>
+        <h3>下周工作计划</h3>
+        <el-table
+          border
+          stripe
+          size="mini"
+          style="width: 65%" :data="workPlans">
+          <el-table-column type="index" label="序号" width="60">
+          </el-table-column>
+          <el-table-column label="工作计划" prop="workPlan">
+            <template slot-scope="scope">
+              <el-input size="mini" type="textarea" autosize v-model="scope.row.planContent"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="预计完成时间" prop="completionTimes">
+            <template slot-scope="scope">
+              <el-date-picker
+                v-model="scope.row.completionTimes"
+                type="date"
+                size="mini"
+                value-format="yyyy-MM-dd"
+                format="yyyy-MM-dd"
+                placeholder="选择日期">
+              </el-date-picker>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" prop="op" width="150" v-if="currentWeek===weeks">
+            <template slot-scope="scope">
+              <el-button size="mini" type="primary" @click="addRow()">添加</el-button>
+              <el-button size="mini" type="danger" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
 
     </div>
     <div style="margin-top: 50px;margin-right: 150px;  width: 65%;text-align: center">
       <el-button size="mini" type="primary" @click="saveWorkPlan()" v-if="currentWeek===weeks">保存工作计划</el-button>
     </div>
+
+    <!-- 任务详情对话框 -->
+    <el-dialog title="任务详情" :visible.sync="taskOpen" width="680px" append-to-body
+               :close-on-click-modal="false">
+      <task-detail :detail-form="taskForm"></task-detail>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 
 import {list} from '@/api/meeting/meeting'
-import { deleteWorkPlanById, getMeetingsAndWorkPlansByWeeks, saveWorkPlans } from '@/api/meeting/work'
-import Vue from "vue";
-import vueToPdf from 'vue-to-pdf';
-Vue.use(vueToPdf);
+import {deleteWorkPlanById, getMeetingsAndWorkPlansByWeeks, saveWorkPlans} from '@/api/meeting/work'
+import {getTask} from "@/api/task/task";
+import TaskDetail from "../task/components/taskDetail"
+
 
 export default {
   name: 'weekly',
+  components: {TaskDetail},
   data() {
     return {
-      meetingWeek:null,
-      meetingData:[],
-      workContents:[],
-      workPlans:[{
-        planContent:'请填写工作计划信息',
-        id:null,
-        meetingId:null,
-        completionTimes:null,
-        completionTime:null
+      meetingWeek: null,
+      meetingData: [],
+      workContents: [],
+      workPlans: [{
+        planContent: '请填写工作计划信息',
+        id: null,
+        meetingId: null,
+        completionTimes: null,
+        completionTime: null
       }],
-      meetingStatus:null,
-      weeks:null,
-      currentWeek:null,
-      meetingId:null
+      meetingStatus: null,
+      weeks: null,
+      currentWeek: null,
+      meetingId: null,
+      taskOpen: false,
+      taskForm:{}
     }
   },
   mounted() {
     this.getData()
   },
-  methods : {
-    getData(){
-      list().then(response =>{
-        this.meetingData=response.data
-        this.meetingId=this.meetingData.id
+  methods: {
+    getData() {
+      list().then(response => {
+        this.meetingData = response.data
+        this.meetingId = this.meetingData.id
         //js 获取当前周
         const date = new Date();
         // 获取当前第几周
         let week = this.getYearWeek(date.getFullYear(), Number(date.getMonth()) + 1, date.getDate());
-        let currentWeek=week+1;
-        this.meetingWeek=currentWeek
+        let currentWeek = week + 1;
+        this.meetingWeek = currentWeek
         this.getMeetingsAndWorkPlansByWeeksData(currentWeek)
       })
     },
-    getMeetingsAndWorkPlansByWeeksData(currentWeek){
-      let weekss=currentWeek
-      getMeetingsAndWorkPlansByWeeks(currentWeek).then(response =>{
-        this.workContents=response.data.workContent
-        if(response.data.workPlan!=null && response.data.workPlan.length>0){
-          this.workPlans=response.data.workPlan
+    getMeetingsAndWorkPlansByWeeksData(currentWeek) {
+      let weekss = currentWeek
+      getMeetingsAndWorkPlansByWeeks(currentWeek).then(response => {
+        this.workContents = response.data.workContent
+        if (response.data.workPlan != null && response.data.workPlan.length > 0) {
+          this.workPlans = response.data.workPlan
         }
-        this.weeks=response.data.weeks
+        this.weeks = response.data.weeks
         const date = new Date();
         // 获取当前第几周
         let week = this.getYearWeek(date.getFullYear(), Number(date.getMonth()) + 1, date.getDate());
 
-        let currentWeek=week+1;
-        this.currentWeek=currentWeek;
-        if(weekss!==currentWeek){
-          this.workPlans=response.data.workPlan
+        let currentWeek = week + 1;
+        this.currentWeek = currentWeek;
+        if (weekss !== currentWeek) {
+          this.workPlans = response.data.workPlan
         }
-        this.meetingId=response.data.meetingId
+        this.meetingId = response.data.meetingId
       })
     },
     getYearWeek(a, b, c) {
@@ -140,11 +153,11 @@ export default {
         d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
       return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
     },
-    getWorkData(){
+    getWorkData() {
 
     },
-    generateWeekly(){
-      if(this.meetingWeek==null || this.meetingWeek==undefined || this.meetingWeek===''){
+    generateWeekly() {
+      if (this.meetingWeek == null || this.meetingWeek == undefined || this.meetingWeek === '') {
         this.$message({
           message: '请选择会议信息!',
           type: 'warning'
@@ -153,8 +166,8 @@ export default {
       }
       this.$PDFSave(this.$refs.exportPdf, "我的工作周报");
     },
-    saveWorkPlan(){
-      if(this.meetingWeek==null || this.meetingWeek==undefined || this.meetingWeek===''){
+    saveWorkPlan() {
+      if (this.meetingWeek == null || this.meetingWeek == undefined || this.meetingWeek === '') {
         this.$message({
           message: '请选择会议信息!',
           type: 'warning'
@@ -162,17 +175,17 @@ export default {
         return
       }
 
-      let workPlanss=this.workPlans;
-      for(let i=0;i<workPlanss.length;i++){
-        workPlanss[i].completionTime=null;
+      let workPlanss = this.workPlans;
+      for (let i = 0; i < workPlanss.length; i++) {
+        workPlanss[i].completionTime = null;
       }
-      let data={
-        weeks:this.meetingWeek,
-        workPlans:workPlanss,
-        id:this.workPlans.id,
-        meetingId:this.meetingId
+      let data = {
+        weeks: this.meetingWeek,
+        workPlans: workPlanss,
+        id: this.workPlans.id,
+        meetingId: this.meetingId
       }
-      saveWorkPlans(data).then( res => {
+      saveWorkPlans(data).then(res => {
         this.$message({
           message: '操作成功',
           type: 'success'
@@ -181,12 +194,12 @@ export default {
 
       });
     },
-    addRow(){
-      let row={planContent: '','op':'',id:null,completionTimes:null}
+    addRow() {
+      let row = {planContent: '', 'op': '', id: null, completionTimes: null}
       this.workPlans.push(row)
     },
-    deleteRow(index,row){
-      if(index==0){
+    deleteRow(index, row) {
+      if (index == 0) {
         this.$message({
           message: '不能删除此条数据',
           type: 'warning'
@@ -194,18 +207,25 @@ export default {
         return;
       }
       this.workPlans.splice(index, 1)
-      let id=row.id;
-      if(id!=null){
-        deleteWorkPlanById(id).then(res =>{
+      let id = row.id;
+      if (id != null) {
+        deleteWorkPlanById(id).then(res => {
           this.getMeetingsAndWorkPlansByWeeksData(this.meetingWeek)
         });
       }
 
     },
-    changeWeekData(){
+    changeWeekData() {
       this.getMeetingsAndWorkPlansByWeeksData(this.meetingWeek)
 
-    }
+    },
+    /** 查看任务详情*/
+    rowClick(row, column, event) {
+      getTask(row.taskId).then(res => {
+        this.taskForm = res.data;
+        this.taskOpen = true;
+      })
+    },
   }
 }
 </script>