额外任务部分完善

src/components/OP/DepartProcessAdd.vue

@@ -137,7 +137,69 @@
                             </div>
                         </el-collapse-item>
                         <el-collapse-item title="临时额外任务" name="2">
-                            <div>临时额外任务内容区域</div>
+                            <el-table :data="extraTasks" style="width: 100%" border>
+                                <el-table-column type="index" label="序号" width="80"></el-table-column>
+                                <el-table-column prop="name" label="单项任务名称" width="300">
+                                    <template slot-scope="scope">
+                                        <el-input height="70" type="textarea" v-model="scope.row.name"
+                                            size="mini"></el-input>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="priorityId" label="优先级" width="100">
+                                    <template slot-scope="scope">
+                                        <el-select v-model="scope.row.priorityId" size="mini" placeholder="请选择">
+                                            <el-option v-for="item in initResp.taskLv" :key="item.id" :label="item.name"
+                                                :value="item.id"></el-option>
+                                        </el-select>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="isUrgent" label="是否加急" width="100">
+                                    <template slot-scope="scope">
+                                        <el-switch v-model="scope.row.isUrgent" active-color="#13ce66"
+                                            inactive-color="#ff4949">
+                                        </el-switch>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="assignedUserId" label="指派给谁" width="120">
+                                    <template slot-scope="scope">
+                                        <el-select v-model="scope.row.assignedUserId" size="mini" placeholder="请选择">
+                                            <el-option v-for="item in initResp.users" :key="item.id"
+                                                :label="item.cnName" :value="item.id"></el-option>
+                                        </el-select>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="timeRange" label="任务时间（起止）">
+                                    <template slot-scope="scope">
+                                        <el-date-picker v-model="scope.row.timeRange" type="datetimerange"
+                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                            size="mini" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
+                                            @change="onExtraTaskTimeRangeChange(scope.$index)">
+                                        </el-date-picker>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="durationHours" label="任务默认完成小时数" width="160">
+                                    <template slot-scope="scope">
+                                        <el-input-number v-model="scope.row.durationHours" size="mini" :min="0"
+                                            :step="1"></el-input-number>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="操作" width="120">
+                                    <template slot-scope="scope">
+                                        <!-- <el-button class="czbtn" size="mini" type="primary"
+                                            @click="insertExtraTaskAbove(scope.$index)">插入行↑</el-button>
+                                        <br /> -->
+                                        <el-button class="czbtn" style="margin: 10px 0;" size="mini" type="danger"
+                                            @click="deleteExtraTask(scope.$index)">删除 <i
+                                                class="el-icon-delete"></i></el-button>
+                                        <br />
+                                        <!-- <el-button class="czbtn" size="mini" type="primary"
+                                            @click="insertExtraTaskBelow(scope.$index)">插入行↓</el-button> -->
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                            <div style="margin-top: 10px;text-align: center;">
+                                <el-button size="small" type="primary" @click="addExtraTask">新增任务</el-button>
+                            </div>
                         </el-collapse-item>
                     </el-collapse>
                 </div>
@@ -166,6 +228,8 @@ export default {
             activeNames: ['1'], // 只展开主要任务
             mainTasks: [
             ],
+            extraTasks: [
+            ],
             form: {
                 id: 0,
                 name: '',
@@ -257,7 +321,8 @@ export default {
                 "workOrderId": 0,
                 "sort": this.mainTasks.length + 1,
                 "timeRange": [],
-                "requiredFieldsValue": []
+                "requiredFieldsValue": [],
+                "isExtraTask": false
             });
         },
         insertTaskAbove(index) {
@@ -272,7 +337,8 @@ export default {
                 "workOrderId": 0,
                 "sort": this.mainTasks.length + 1,
                 "timeRange": [],
-                "requiredFieldsValue": []
+                "requiredFieldsValue": [],
+                "isExtraTask": false
             });
         },
         insertTaskBelow(index) {
@@ -287,7 +353,8 @@ export default {
                 "workOrderId": 0,
                 "sort": this.mainTasks.length + 1,
                 "timeRange": [],
-                "requiredFieldsValue": []
+                "requiredFieldsValue": [],
+                "isExtraTask": false
             });
         },
         deleteTask(index) {
@@ -397,7 +464,6 @@ export default {
         save() {
             var tasks = this.mainTasks;
             var i = 1;
-            // 将forEach改为for循环
             for (let j = 0; j < tasks.length; j++) {
                 const item = tasks[j];
                 item.startTime = item.timeRange[0];
@@ -406,21 +472,53 @@ export default {
                 i = i + 1;
                 if (!item.name) {
                     this.$message({
-                        message: '请填写任务名称',
+                        message: '请填写主要任务名称',
                         type: 'warning'
                     });
                     return false;
                 }
                 if (!item.assignedUserId) {
                     this.$message({
-                        message: '请选择任务负责人',
+                        message: '请选择主要任务负责人',
                         type: 'warning'
                     });
                     return false;
                 }
                 if (!item.timeRange[0] || !item.timeRange[1]) {
                     this.$message({
-                        message: '请选择任务时间',
+                        message: '请选择主要任务时间',
+                        type: 'warning'
+                    });
+                    return false;
+                }
+            }
+
+            i = 1;
+            // 处理额外任务
+            var extraTasks = this.extraTasks;
+            for (let j = 0; j < extraTasks.length; j++) {
+                const item = extraTasks[j];
+                item.startTime = item.timeRange[0];
+                item.endTime = item.timeRange[1];
+                item.sort = i;
+                i = i + 1;
+                if (!item.name) {
+                    this.$message({
+                        message: '请填写额外任务名称',
+                        type: 'warning'
+                    });
+                    return false;
+                }
+                if (!item.assignedUserId) {
+                    this.$message({
+                        message: '请选择额外任务负责人',
+                        type: 'warning'
+                    });
+                    return false;
+                }
+                if (!item.timeRange[0] || !item.timeRange[1]) {
+                    this.$message({
+                        message: '请选择额外任务时间',
                         type: 'warning'
                     });
                     return false;
@@ -430,7 +528,7 @@ export default {
             var form = this.form;
             form.createUserId = this.userId;
             form.typeId = this.typeId;
-            form.tasks = tasks;
+            form.tasks = tasks.concat(extraTasks);
 
             this.$axios({
                 method: 'post',
@@ -459,6 +557,9 @@ export default {
             this.mainTasks.forEach(item => {
                 item.assignedUserId = this.form.assignedUserId;
             })
+            this.extraTasks.forEach(item => {
+                item.assignedUserId = this.form.assignedUserId;
+            })
         },
         getDetail() {
             this.$axios({
@@ -471,12 +572,18 @@ export default {
                 // 处理响应数据
                 if (response.data.code == 200) {
                     this.initResp = response.data.data;
-                    var maintasks = response.data.data.workTask;
+                    var maintasks = response.data.data.mainTask;
                     maintasks.forEach(item => {
                         item.timeRange = [item.startTime, item.endTime];
                         item.requiredFieldsValue = [];
                     })
                     this.mainTasks = maintasks;
+                    var extraTasks = response.data.data.extraTask;
+                    extraTasks.forEach(item => {
+                        item.timeRange = [item.startTime, item.endTime];
+                        item.requiredFieldsValue = [];
+                    })
+                    this.extraTasks = extraTasks;
                     this.form = response.data.data.workOrder;
                 } else {
                     this.$message({
@@ -491,6 +598,66 @@ export default {
                 this.loading = false;
             });
         },
+        // 在这里添加额外任务函数
+        addExtraTask() {
+            this.extraTasks.push({
+                "id": 0,
+                "name": "",
+                "priorityId": 1456,
+                "isUrgent": false,
+                "assignedUserId": this.form.assignedUserId || '',
+                "durationHours": 0,
+                "workOrderId": 0,
+                "sort": this.extraTasks.length + 1,
+                "timeRange": [],
+                "requiredFieldsValue": [],
+                "isExtraTask": true
+            });
+        },
+        insertExtraTaskAbove(index) {
+            // 在指定位置上方插入新行
+            this.extraTasks.splice(index, 0, {
+                "id": 0,
+                "name": "",
+                "priorityId": 1456,
+                "isUrgent": false,
+                "assignedUserId": this.form.assignedUserId || '',
+                "durationHours": 0,
+                "workOrderId": 0,
+                "sort": this.extraTasks.length + 1,
+                "timeRange": [],
+                "requiredFieldsValue": [],
+                "isExtraTask": true
+            });
+        },
+        insertExtraTaskBelow(index) {
+            // 在指定位置下方插入新行
+            this.extraTasks.splice(index + 1, 0, {
+                "id": 0,
+                "name": "",
+                "priorityId": 1456,
+                "isUrgent": false,
+                "assignedUserId": this.form.assignedUserId || '',
+                "durationHours": 0,
+                "workOrderId": 0,
+                "sort": this.extraTasks.length + 1,
+                "timeRange": [],
+                "requiredFieldsValue": [],
+                "isExtraTask": true
+            });
+        },
+        deleteExtraTask(index) {
+            this.extraTasks.splice(index, 1);
+        },
+        // 为额外任务添加时间范围变化处理方法
+        onExtraTaskTimeRangeChange(index) {
+            const task = this.extraTasks[index];
+            if (task.timeRange && task.timeRange.length === 2) {
+                task.durationHours = this.calcWorkHoursExact(task.timeRange[0], task.timeRange[1]);
+            } else {
+                task.durationHours = 0;
+            }
+        }
     }
 }
 </script>

src/components/OP/DepartProcessList.vue

@@ -70,11 +70,10 @@
                                             <div style="display: flex;">
                                                 <div class="step_icon">额外任务：</div>
                                                 <div v-for="(stepItem, index) in props.row.stepInfo.extraStep">
-                                                    <div
-                                                        :style="{ 'color': index < props.row.stepInfo.active - 1 ? '#67c23a' : props.row.stepInfo.active - 1 == index ? 'black' : '#c0c4cc' }">
-
-
-                                                        <span class="step_icon"> {{ stepItem.name }}</span>
+                                                    <div :style="{ 'color': 'black' }">
+                                                        <span
+                                                            @click="showdialog(true, stepItem.id, props.row.id, props.row.isReview, props.row.stepInfo.active - 1 == index)"
+                                                            class="step_icon"> {{ stepItem.name }}</span>
                                                         <span v-if="props.row.stepInfo.extraStep.length - 1 != index"
                                                             style="padding:0px 10px;margin:0px 5px; display: inline-block; width: 20px; height: 2px; background-color: currentColor; vertical-align: middle;">
                                                         </span>