优化工作填报样式

src/views/meeting/weekly.vue

@@ -17,7 +17,7 @@
           border
           stripe
           size="mini"
-          style="width: 80%" v-model="workContents" :data="workContents"
+          style="width: 100%" v-model="workContents" :data="workContents"
           @row-click="rowClick" :span-method="objectSpanMethod" :highlight-current-row="true">
           <el-table-column label="分类" prop="classifyName" width="80">
           </el-table-column>
@@ -47,41 +47,69 @@
           border
           stripe
           size="mini"
-          style="width: 80%;margin-top: 10px;" :data="workPlans">
+          style="width: 100%;margin-top: 10px;" :data="workPlans">
           <el-table-column type="index" label="序号" width="60">
           </el-table-column>
-          <el-table-column label="工作计划" prop="workPlan">
+          <el-table-column label="工作计划" prop="workPlan" min-width="250">
             <template slot-scope="scope">
-              <el-input size="mini" type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="scope.row.planContent" placeholder="请填写工作计划信息" ></el-input>
+              <el-input size="mini" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''" :disabled="true"   v-model="scope.row.planContent" placeholder="请填写工作计划信息" ></el-input>
+              <el-input size="mini" v-else v-model="scope.row.planContent" @input="updateWorkPlans(scope.row)" placeholder="请填写工作计划信息" ></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="预计开始时间" prop="beginDate">
+          <el-table-column label="预计开始时间" prop="beginDate" width="180">
             <template slot-scope="scope">
               <el-date-picker
+                v-model="scope.row.beginDate" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''"
+                type="date"
+                size="mini"
+                value-format="yyyy-MM-dd"
+                format="yyyy-MM-dd"
+                :disabled="true"
+                placeholder="选择日期" style="width: 150px">
+              </el-date-picker>
+              <el-date-picker v-else
                 v-model="scope.row.beginDate"
                 type="date"
                 size="mini"
                 value-format="yyyy-MM-dd"
                 format="yyyy-MM-dd"
-                placeholder="选择日期">
+                placeholder="选择日期" style="width: 150px" @change="updateWorkPlans(scope.row)">
               </el-date-picker>
+
             </template>
           </el-table-column>
-          <el-table-column label="预计完成时间" prop="completionTimes">
+          <el-table-column label="预计完成时间" prop="completionTimes" width="180">
             <template slot-scope="scope">
               <el-date-picker
-                v-model="scope.row.completionTimes"
+                v-model="scope.row.completionTimes" style="width: 150px" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''"
                 type="date"
                 size="mini"
                 value-format="yyyy-MM-dd"
                 format="yyyy-MM-dd"
+                :disabled="true"
                 placeholder="选择日期">
               </el-date-picker>
+              <el-date-picker
+                v-model="scope.row.completionTimes" style="width: 150px" v-else
+                type="date"
+                size="mini"
+                value-format="yyyy-MM-dd"
+                format="yyyy-MM-dd"
+                placeholder="选择日期" @change="updateWorkPlans(scope.row)">
+              </el-date-picker>
             </template>
           </el-table-column>
-          <el-table-column label="所属项目" prop="projectId">
+          <el-table-column label="所属项目" prop="projectId" width="180">
             <template slot-scope="scope">
-              <el-select v-model="scope.row.projectId" placeholder="请选择" size="mini">
+              <el-select :disabled="true" v-model="scope.row.projectId" placeholder="请选择" size="mini" v-if="scope.row.taskId!==undefined && scope.row.taskId!==''">
+                <el-option
+                  v-for="item in projects"
+                  :key="item.id"
+                  :label="item.projectName"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+              <el-select  v-model="scope.row.projectId" placeholder="请选择" size="mini" v-else  @change="updateWorkPlans(scope.row)">
                 <el-option
                   v-for="item in projects"
                   :key="item.id"
@@ -91,18 +119,18 @@
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="操作" prop="op" width="150" v-if="currentWeek===weeks">
+          <el-table-column label="操作" prop="op" width="100" v-if="currentWeek===weeks" center>
             <template slot-scope="scope">
               <el-button size="mini" type="danger" v-if="scope.row.taskId===undefined || scope.row.taskId===null" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
-        <div style="margin-top: 15px;width: 80%;text-align: right" >
+        <div style="margin-top: 15px;width: 100%;text-align: right" >
           <el-button size="mini" type="success"  @click="addRow()"  v-if="currentWeek===weeks">添加</el-button>
         </div>
       </div>
     </div>
-    <div style="margin-top: 50px;margin-right: 150px;  width: 65%;text-align: center">
+    <div style="margin-top: 50px;margin-right: 250px;  width: 100%;text-align: center">
       <el-button size="mini" type="primary" @click="saveWorkPlan()" v-if="currentWeek===weeks">保存工作计划</el-button>
     </div>
 
@@ -123,7 +151,7 @@ import {
   getMeetingsAndWorkPlansByWeeks,
   getProjects,
   getWorkPlanConfirmFlags,
-  saveWorkPlans
+  saveWorkPlans, updateWorkPlan
 } from '@/api/meeting/work'
 import {getTask} from "@/api/task/task";
 import TaskDetail from "../task/components/taskDetail"
@@ -414,6 +442,23 @@ export default {
 
       })
     },
+
+    updateWorkPlans(row){
+      let data=row;
+      console.log(JSON.stringify(data))
+      if(row.id!==undefined && row.id!==null){
+        let datas={
+          id:row.id,
+          planContent:data.planContent,
+          beginDate:new Date(data.beginDate).getTime(),
+          projectId:row.projectId,
+          completionTime:new Date(row.completionTimes).getTime()
+        }
+        updateWorkPlan(datas).then(res=>{
+        })
+      }
+
+    }
   }
 }
 </script>