任务部分完善

src/components/OP/DepartProcessAdd.vue

@@ -0,0 +1,507 @@
+<template>
+    <div style="background-color: white;">
+        <!-- 加上load效果 -->
+        <div class="form_center" v-loading="loading">
+            <el-form :model="form" :rules="rules" ref="form" label-width="120px">
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <el-form-item label="工单名称" prop="name">
+                            <el-input v-model="form.name"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="工单开始时间" prop="startTime">
+                            <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间"
+                                format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="所属团组" prop="groupId">
+                            <el-select filterable v-model="form.groupId" placeholder="请选择">
+                                <el-option v-for="item in initResp.groupList" :key="item.id" :label="item.teamName"
+                                    :value="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <!-- 添加筛选 -->
+                        <el-form-item label="指派用户" prop="assignedUserId">
+                            <el-select @change="userChange" filterable v-model="form.assignedUserId" placeholder="请选择">
+                                <el-option v-for="item in initResp.users" :key="item.id" :label="item.cnName"
+                                    :value="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="外办选项" prop="foreignOptionId">
+                            <el-select v-model="form.foreignOptionId" placeholder="请选择">
+                                <el-option v-for="item in initResp.foreignLv" :key="item.id" :label="item.name"
+                                    :value="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+
+                    </el-col>
+                </el-row>
+                <div class="form_detail">
+                    <el-collapse v-model="activeNames">
+                        <el-collapse-item title="主要任务" name="1">
+                            <el-table :data="mainTasks" 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 :disabled="scope.$index + 1 <= form.action - 1" 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 :disabled="scope.$index + 1 <= form.action - 1"
+                                            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 :disabled="scope.$index + 1 <= form.action - 1"
+                                            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 :disabled="scope.$index + 1 <= form.action - 1"
+                                            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 :disabled="scope.$index + 1 <= form.action - 1"
+                                            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="onTimeRangeChange(scope.$index)">
+                                        </el-date-picker>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="durationHours" label="任务默认完成小时数" width="160">
+                                    <template slot-scope="scope">
+                                        <el-input-number :disabled="scope.$index + 1 <= form.action - 1"
+                                            v-model="scope.row.durationHours" size="mini" :min="0"
+                                            :step="1"></el-input-number>
+                                    </template>
+                                </el-table-column>
+                                <!-- <el-table-column prop="requiredFieldsValue" label="必填项设置" width="120">
+                                    <template slot-scope="scope">
+                                        <el-checkbox-group v-model="scope.row.requiredFieldsValue"
+                                            @change="handleCheckedCitiesChange">
+                                            <div v-for="requiredFieldsItem in requiredFieldsItems">
+                                                <el-checkbox :label="requiredFieldsItem.id"
+                                                    :key="requiredFieldsItem.id">{{
+                                                        requiredFieldsItem.name
+                                                    }}
+                                                </el-checkbox>
+                                            </div>
+                                        </el-checkbox-group>
+                                    </template>
+                                </el-table-column> -->
+                                <el-table-column label="操作" width="120">
+                                    <template slot-scope="scope">
+                                        <div v-if="!(scope.$index + 1 <= form.action - 1)">
+                                            <el-button class="czbtn" size="mini" type="primary"
+                                                @click="insertTaskAbove(scope.$index)">插入行↑</el-button>
+                                            <br />
+                                            <!-- 删除图标加在文字后方 -->
+                                            <el-button class="czbtn" style="margin: 10px 0;" size="mini" type="danger"
+                                                @click="deleteTask(scope.$index)">删除
+                                                <i class="el-icon-delete"></i></el-button>
+                                            <br />
+                                            <el-button class="czbtn" size="mini" type="primary"
+                                                @click="insertTaskBelow(scope.$index)">插入行↓</el-button>
+                                        </div>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                            <div style="margin-top: 10px;text-align: center;">
+                                <el-button size="small" type="primary" @click="addTask">新增任务</el-button>
+                            </div>
+                        </el-collapse-item>
+                        <el-collapse-item title="临时额外任务" name="2">
+                            <div>临时额外任务内容区域</div>
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+                <br />
+                <div style="text-align: right;">
+
+                    <el-form-item>
+                        <el-button type="primary" @click="submitForm">提交</el-button>
+                        <el-button @click="resetForm">返回</el-button>
+                    </el-form-item>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    data() {
+        return {
+            token: '',
+            userId: '',
+            typeId: 1453,
+            activeNames: ['1'], // 只展开主要任务
+            mainTasks: [
+            ],
+            form: {
+                id: 0,
+                name: '',
+                startTime: '',
+                groupId: '',
+                assignedUserId: '',
+                foreignOptionId: '',
+                action: 1
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入工单名称', trigger: 'blur' }
+                ],
+                startTime: [
+                    { required: true, message: '请选择工单开始时间', trigger: 'change' }
+                ],
+                groupId: [
+                    { required: true, message: '请输入所属团组ID', trigger: 'blur' }
+                ],
+                assignedUserId: [
+                    { required: true, message: '请输入指派用户ID', trigger: 'blur' }
+                ],
+                foreignOptionId: [
+                    { required: true, message: '请选择外办选项ID', trigger: 'change' }
+                ]
+            },
+            requiredFieldsItems: [
+                { name: "文本描述", id: 1 },
+                { name: "相关文件", id: 2 }
+            ],
+            initResp: {
+                groupList: [],
+                taskLv: [],
+                foreignLv: [],
+                users: [],
+            },
+            loading: true,
+        }
+    },
+    mounted() {
+
+        this.token = JSON.parse(localStorage.getItem('userinif')).token;
+        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
+
+        //获取$router中的query
+        this.form.id = this.$route.query.id;
+        if (this.$route.query.edit) {
+            this.getDetail();
+        } else {
+            this.init();
+        }
+    },
+    methods: {
+        // 计算两个时间之间的小时数
+        calculateHours(startTime, endTime) {
+            if (!startTime || !endTime) return 0;
+
+            const start = new Date(startTime);
+            const end = new Date(endTime);
+
+            // 计算时间差（毫秒）
+            const diff = end - start;
+
+            // 转换为小时数
+            const hours = diff / (1000 * 60 * 60);
+
+            // 保留一位小数
+            return Math.round(hours * 10) / 10;
+        },
+
+        // 当时间范围改变时更新默认小时数
+        onTimeRangeChange(index) {
+            const task = this.mainTasks[index];
+            if (task.timeRange && task.timeRange.length === 2) {
+                task.durationHours = this.calcWorkHoursExact(task.timeRange[0], task.timeRange[1]);
+            } else {
+                task.durationHours = 0;
+            }
+        },
+
+        addTask() {
+            this.mainTasks.push({
+                "id": 0,
+                "name": "",
+                "priorityId": 1456,
+                "isUrgent": false,
+                "assignedUserId": this.form.assignedUserId || '',
+                "durationHours": 0,
+                "workOrderId": 0,
+                "sort": this.mainTasks.length + 1,
+                "timeRange": [],
+                "requiredFieldsValue": []
+            });
+        },
+        insertTaskAbove(index) {
+            // 在指定位置上方插入新行
+            this.mainTasks.splice(index, 0, {
+                "id": 0,
+                "name": "",
+                "priorityId": 1456,
+                "isUrgent": false,
+                "assignedUserId": this.form.assignedUserId || '',
+                "durationHours": 0,
+                "workOrderId": 0,
+                "sort": this.mainTasks.length + 1,
+                "timeRange": [],
+                "requiredFieldsValue": []
+            });
+        },
+        insertTaskBelow(index) {
+            // 在指定位置下方插入新行
+            this.mainTasks.splice(index + 1, 0, {
+                "id": 0,
+                "name": "",
+                "priorityId": 1456,
+                "isUrgent": false,
+                "assignedUserId": this.form.assignedUserId || '',
+                "durationHours": 0,
+                "workOrderId": 0,
+                "sort": this.mainTasks.length + 1,
+                "timeRange": [],
+                "requiredFieldsValue": []
+            });
+        },
+        deleteTask(index) {
+            this.mainTasks.splice(index, 1);
+        },
+        submitForm() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.save();
+                } else {
+                    // 表单验证失败
+                    this.$message({
+                        message: '请检查填写内容',
+                        type: 'warning'
+                    });
+                    return false;
+                }
+            });
+        },
+        resetForm() {
+            this.$refs.form.resetFields();
+            this.$router.back();
+        },
+        /**
+         * 计算两个时间之间的工作小时数
+         * 工作时间：周一至周五，上午9:00-12:00，下午13:30-18:00
+         * @param {string} startStr "yyyy-mm-dd HH:mm"
+         * @param {string} endStr "yyyy-mm-dd HH:mm"
+         * @returns {number} 工作小时数
+         */
+        calcWorkHoursExact(startStr, endStr) {
+            console.log(startStr, endStr);
+            const start = new Date(startStr);
+            const end = new Date(endStr);
+            if (end <= start) return 0;
+
+            const workPeriods = [
+                { start: 9 * 60, end: 12 * 60 },    // 上午 9:00-12:00
+                { start: 13.5 * 60, end: 18 * 60 }  // 下午 13:30-18:00
+            ];
+
+            let totalMinutes = 0;
+            let current = new Date(start);
+
+            while (current < end) {
+                const day = current.getDay();
+                if (day >= 1 && day <= 5) { // 工作日
+                    for (const period of workPeriods) {
+                        const periodStart = new Date(current);
+                        periodStart.setHours(Math.floor(period.start / 60), period.start % 60, 0, 0);
+
+                        const periodEnd = new Date(current);
+                        periodEnd.setHours(Math.floor(period.end / 60), period.end % 60, 0, 0);
+
+                        // 每天的有效区间
+                        const effectiveStart = periodStart > current ? periodStart : current;
+                        const effectiveEnd = periodEnd < end ? periodEnd : end;
+
+                        if (effectiveEnd > effectiveStart) {
+                            totalMinutes += (effectiveEnd - effectiveStart) / 60000;
+                        }
+                    }
+                }
+                // 下一天
+                current.setDate(current.getDate() + 1);
+                current.setHours(0, 0, 0, 0);
+            }
+
+            return (totalMinutes / 60).toFixed(2);
+
+        },
+        init() {
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/TaskInit',
+                data: {
+                    typeId: 1453,
+                }
+            }).then(response => {
+                // 处理响应数据
+                if (response.data.code == 200) {
+                    this.initResp = response.data.data;
+                    var maintasks = response.data.data.defaultTask;
+                    maintasks.forEach(item => {
+                        item.timeRange = [item.startTime, item.endTime];
+                        item.requiredFieldsValue = [];
+                    })
+                    this.mainTasks = maintasks;
+                    this.form.startTime = response.data.data.startTime;
+                    console.log(this.mainTasks);
+                } else {
+                    this.$message({
+                        message: response.data.msg,
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                // 处理错误
+                console.error(error);
+            }).finally(() => {
+                this.loading = false;
+            });
+        },
+        handleCheckedCitiesChange(val) {
+            console.log(val);
+        },
+        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];
+                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;
+                }
+            }
+
+            var form = this.form;
+            form.createUserId = this.userId;
+            form.typeId = this.typeId;
+            form.tasks = tasks;
+
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/TaskOperation',
+                data: form
+            }).then(response => {
+                // 处理响应数据
+                if (response.data.code == 200) {
+                    this.$message({
+                        message: '保存成功',
+                        type: 'success'
+                    });
+                    this.$router.back();
+                } else {
+                    this.$message({
+                        message: response.data.msg,
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                // 处理错误
+                console.error(error);
+            });
+        },
+        userChange() {
+            this.mainTasks.forEach(item => {
+                item.assignedUserId = this.form.assignedUserId;
+            })
+        },
+        getDetail() {
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/TaskDetail',
+                data: {
+                    id: this.form.id
+                }
+            }).then(response => {
+                // 处理响应数据
+                if (response.data.code == 200) {
+                    this.initResp = response.data.data;
+                    var maintasks = response.data.data.workTask;
+                    maintasks.forEach(item => {
+                        item.timeRange = [item.startTime, item.endTime];
+                        item.requiredFieldsValue = [];
+                    })
+                    this.mainTasks = maintasks;
+                    this.form = response.data.data.workOrder;
+                } else {
+                    this.$message({
+                        message: response.data.msg,
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                // 处理错误
+                console.error(error);
+            }).finally(() => {
+                this.loading = false;
+            });
+        },
+    }
+}
+</script>
+
+<style scoped>
+.form_center {
+    max-width: 100%;
+    /* 限制最大宽度 */
+    width: 100%;
+    margin: 20px auto;
+    padding: 20px;
+    box-sizing: border-box;
+}
+</style>

src/components/OP/DepartProcessList.vue

@@ -0,0 +1,572 @@
+<template>
+    <div>
+        <div id="DepartProcessListConter">
+            <!-- 选项卡 -->
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+                <el-tab-pane v-for="item in switchList" :label="item.name" :key="item.id" :name="item.name">
+                    <div v-if="item.id == 1">
+                        <div style="padding: 10px;display:flex">
+                            <div style="flex: 1;">
+                                <!-- <el-input placeholder="操作人" v-model="searchText" clearable
+                                    style="width: 200px;display: inline-block;"></el-input> -->
+                                <el-input placeholder="流程名称" v-model="loadData.search_Name" clearable
+                                    style="width: 200px;display: inline-block;"></el-input>
+                                <el-button type="primary" @click="Search">筛选</el-button>
+                            </div>
+                            <div style="flex: 1; text-align: right;">
+                                <el-button type="primary" @click="add">新增</el-button>
+                            </div>
+                        </div>
+                        <el-table class="table_list" border :data="tableData" style="width: 100%">
+                            <el-table-column type="expand">
+                                <template slot-scope="props">
+                                    <div style="padding: 5px 20px;">
+                                        <!-- <div>
+                                            <el-steps :active="props.row.stepInfo.active" align-center>
+                                                <el-step v-for="stepItem in props.row.stepInfo.steps"
+                                                    :key="stepItem.name" icon="el-icon-edit">
+                                                    <template slot="icon">
+                                                        <div class="step_icon">
+                                                            {{ stepItem.name }}
+                                                        </div>
+                                                    </template>
+</el-step>
+</el-steps>
+</div>
+<div v-if="props.row.stepInfo.extraStep.length > 0">
+    <div style="padding: 5px;">
+        额外任务
+    </div>
+    <el-steps active="1" space="10%" align-center>
+        <el-step v-for="stepItem in props.row.stepInfo.extraStep" :key="stepItem.name" icon="el-icon-edit">
+            <template slot="icon">
+                                                        <div class="step_icon">
+                                                            {{ stepItem.name }}
+                                                        </div>
+                                                    </template>
+        </el-step>
+    </el-steps>
+</div> -->
+                                        <div style="display: flex;">
+                                            <div class="step_icon">主要任务：</div>
+                                            <div v-for="(stepItem, index) in props.row.stepInfo.steps">
+                                                <div
+                                                    :style="{ 'color': index < props.row.stepInfo.active - 1 ? '#67c23a' : props.row.stepInfo.active - 1 == index ? 'black' : '#c0c4cc' }">
+                                                    <!-- props.row.stepInfo.active - 1 == index -->
+                                                    <span class="step_icon"
+                                                        @click="showdialog(true, stepItem.id, props.row.id, props.row.isReview, props.row.stepInfo.active - 1 == index)">
+                                                        {{
+                                                            stepItem.name
+                                                        }}
+                                                    </span>
+                                                    <span v-if="props.row.stepInfo.steps.length - 1 != index"
+                                                        style="padding:0px 10px;margin:0px 5px; display: inline-block; width: 20px; height: 2px; background-color: currentColor; vertical-align: middle;">
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div v-if="props.row.stepInfo.extraStep.length > 0">
+                                            <br />
+                                            <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>
+                                                        <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>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="工单名称" prop="taskName">
+                            </el-table-column>
+                            <el-table-column label="工单开始时间" prop="startTime">
+                            </el-table-column>
+                            <el-table-column label="所属团组" prop="team">
+                            </el-table-column>
+                            <el-table-column label="指派给谁" prop="assignee">
+                            </el-table-column>
+                            <el-table-column label="外办选项" prop="externalOption">
+                            </el-table-column>
+                            <el-table-column label="操作">
+                                <template slot-scope="scope">
+                                    <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+                                    <el-button type="danger" size="mini"
+                                        @click="DeleteWorkOrder(scope.row.id)">删除</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                        <!-- 分页 -->
+                        <div style="text-align: center;padding: 20px 0;">
+                            <el-pagination :total="pagination.total" :page-size="pagination.pageSize"
+                                :current-page="pagination.pageIndex" :page-sizes="[10, 20, 5, 8]"
+                                @current-change="handleCurrentChange" @size-change="handleSizeChange">
+                            </el-pagination>
+                        </div>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+
+        <div id="dialog">
+            <el-dialog title="回执信息" :visible.sync="dialogVisible" width="30%">
+                <el-card class="form-card" v-for="item in historyForm" :key="item.id">
+                    <div style="margin: 0px auto; width: 90%;">
+                        <el-form :model="item">
+                            <h4>
+                                审核状态:&nbsp;&nbsp;<span v-if="item.isApproved == 1" style="color: #67C23A;">已审核</span>
+                                <span v-else-if="item.isApproved == 0" style="color: #E6A23C;">未审核</span>
+                                <span v-else style="color: #F56C6C;">已驳回</span>
+                            </h4>
+                            <el-form-item label="是否已完成该任务？">
+                                <el-radio-group v-model="item.isCompleted" disabled>
+                                    <el-radio :label="1">是</el-radio>
+                                    <el-radio :label="0">否</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="相关内容提交：">
+                                <div class="over_input">
+                                    <el-input width="70%" type="textarea" v-model="item.content" disabled>
+
+                                    </el-input>
+                                </div>
+                            </el-form-item>
+                            <el-form-item label="驳回原因：" v-if="item.rejectReason">
+                                <div class="over_input">
+                                    <el-input width="70%" type="textarea" v-model="item.rejectReason" disabled>
+
+                                    </el-input>
+                                </div>
+                            </el-form-item>
+                            <div v-if="item.files.length > 0">
+                                <h4>相关文件</h4>
+                                <div v-for="(file, index) in item.files" style="display: flex;text-align: center;">
+                                    <div style="flex: 1;">
+                                        {{ file.fileName }}
+                                    </div>
+                                    <div style="flex: 1;">
+                                        <a :href="file.url" target="_blank">下载</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-form>
+                    </div>
+                    <div v-if="isReview && item.isApproved == 0"
+                        style="text-align: center;padding: 12px 0; display:flex">
+                        <div style="flex: 1;">
+                            <el-button type="primary" size="mini" @click="handleApproval(item)">通过</el-button>
+                        </div>
+                        <div style="flex: 1;">
+                            <el-button type="danger" size="mini" @click="handleReject(item)">驳回</el-button>
+                        </div>
+                    </div>
+                </el-card>
+                <div style="text-align: center;" v-if="historyForm.length == 0">
+                    <h4>暂无历史提交信息</h4>
+                </div>
+                <el-card class="form-card" v-if="!isReview">
+                    <div style="margin: 0px auto; width: 90%;">
+                        <el-form ref="form" :model="form">
+                            <el-form-item label="是否已完成该任务？">
+                                <el-radio-group v-model="form.isCompleted">
+                                    <el-radio :label="1">是</el-radio>
+                                    <el-radio :label="0">否</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="相关内容提交：">
+                                <div class="over_input">
+                                    <el-input width="70%" type="textarea" v-model="form.content">
+
+                                    </el-input>
+                                </div>
+                            </el-form-item>
+                            <!-- 修改文件上传组件 -->
+                            <el-form-item label="相关文件上传：">
+                                <el-upload class="avatar-uploader" action="#" :multiple="true" :show-file-list="true"
+                                    :http-request="handleFileUpload" :on-change="handleFileChange"
+                                    :file-list="form.fileList">
+                                    <el-button size="small" type="primary">点击选择文件</el-button>
+                                    <!-- <div slot="tip" class="el-upload__tip">可选择多个文件</div> -->
+                                </el-upload>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-card>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="submitForm(isReview)">确 定</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            token: '',
+            userId: '',
+            tableData: [],
+            activeName: '商邀任务',
+            switchList: [
+                {
+                    id: 1,
+                    name: '商邀任务'
+                },
+                {
+                    id: 2,
+                    name: '测试任务'
+                }
+            ],
+            dialogVisible: false,
+            form: {
+                isCompleted: 1,
+                content: '',
+                fileList: [],
+                workOrderId: 0,
+                workTaskId: 0,
+            },
+            loadData: {
+                "userId": 0,
+                "typeId": 1453,
+                "search_Name": "",
+                "seach_StartTime": "",
+                "seach_EndTime": ""
+            },
+            pagination: {
+                total: 0,
+                pageSize: 10,
+                pageIndex: 1,
+            },
+            historyForm: [],
+            isReview: false,
+            isSubmit: true,
+        }
+    },
+    methods: {
+        Search() {
+            this.load();
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        add() {
+            this.$router.push({
+                path: '/home/DepartProcessAdd',
+            })
+        },
+
+        // 新增文件处理方法
+        handleFileChange(file, fileList) {
+            this.form.fileList = fileList;
+        },
+        handleFileUpload(option) {
+            const { file } = option;
+            return new Promise((resolve) => resolve());
+        },
+        // 提交表单和文件
+        submitForm() {
+
+            if (this.isReview) {
+                this.dialogVisible = false;
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('isCompleted', this.form.isCompleted);
+            formData.append('content', this.form.content);
+            formData.append('workOrderId', this.form.workOrderId);
+            formData.append('workTaskId', this.form.workTaskId);
+            formData.append('userId', this.userId);
+            this.form.fileList.forEach(fileObj => {
+                if (fileObj.raw) {
+                    formData.append('files', fileObj.raw);
+                }
+            });
+
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/SubmitWorkTaskReceipt',
+                data: formData,
+            }).then(response => {
+                if (response.data.code == 200) {
+                    this.$message({
+                        message: '添加成功',
+                        type: 'success'
+                    });
+                } else {
+                    this.$message({
+                        message: response.data.msg || '添加失败',
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                // 处理错误
+                console.error(error);
+                this.$message({
+                    message: '请求失败，请检查网络连接',
+                    type: 'error'
+                });
+            }).finally(() => {
+                this.dialogVisible = false;
+                // 重置表单
+                this.form = {
+                    isCompleted: 1,
+                    content: '',
+                    fileList: [],
+                    workOrderId: 0,
+                    workTaskId: 0,
+                }
+            });
+        },
+        load() {
+            this.loadData.userId = this.userId;
+            console.log(this.loadData, "this.loadData");
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/GetTaskList',
+                data: {
+                    ...this.loadData,
+                    pageSize: this.pagination.pageSize,
+                    pageIndex: this.pagination.pageIndex,
+                },
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then(response => {
+                if (response.data.code == 200) {
+                    this.tableData = response.data.data;
+                    this.pagination.total = response.data.count;
+                } else {
+                    this.$message({
+                        message: response.data.msg || '获取任务列表失败',
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                // 处理错误
+                console.error(error);
+                this.$message({
+                    message: '请求失败，请检查网络连接',
+                    type: 'error'
+                });
+            });
+        },
+        handleEdit(row) {
+            this.$router.push({
+                path: '/home/DepartProcessAdd',
+                query: {
+                    id: row.id,  // 假设row对象有id字段
+                    edit: true   // 标识是编辑模式
+                }
+            });
+        },
+        handleCurrentChange(val) {
+            this.pagination.pageIndex = val;
+            this.load(); // 重新加载数据
+        },
+        handleSizeChange(val) {
+            this.pagination.pageSize = val;
+            this.pagination.pageIndex = 1; // 重置到第一页
+            this.load(); // 重新加载数据
+        },
+        showdialog(flag, workTaskId, workOrderId, isReview, isSubmit) {
+            this.dialogVisible = flag;
+            this.form.workTaskId = workTaskId;
+            this.form.workOrderId = workOrderId;
+            this.isReview = isReview;
+            this.isSubmit = isSubmit;
+            console.log(isReview, "isReview");
+            this.GethistorySubmit();
+        },
+        GethistorySubmit() {
+            var data = {
+                taskId: this.form.workTaskId,
+                orderId: this.form.workOrderId,
+            };
+            console.log(data);
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/GetWorkTaskReceipt',
+                data: data,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then(response => {
+                if (response.data.code == 200) {
+                    this.historyForm = response.data.data;
+                } else {
+                    this.$message({
+                        message: response.data.msg || '获取任务列表失败',
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                // 处理错误
+                console.error(error);
+                this.$message({
+                    message: '请求失败，请检查网络连接',
+                    type: 'error'
+                });
+            });
+        },
+        DeleteWorkOrder(workOrderId) {
+            var data = {
+                "workOrderId": 0,
+                "userId": 0
+            };
+            data.userId = this.userId;
+            data.workOrderId = workOrderId;
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/SoftDeleteWorkOrder',
+                data: data,
+            }).then(response => {
+                if (response.data.code == 200) {
+                    this.$message({
+                        message: '删除成功',
+                        type: 'success'
+                    });
+                    // 重新加载数据
+                    this.load();
+                } else {
+                    this.$message({
+                        message: response.data.msg || '删除失败',
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                console.error(error);
+                this.$message({
+                    message: '请求失败，请检查网络连接',
+                    type: 'error'
+                });
+            });
+        },
+        handleReject(item) {
+            // 添加一个文本域用于输入驳回原因
+            this.$prompt('请输入驳回原因', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                inputPattern: /.+/, // 要求输入非空
+                inputErrorMessage: '驳回原因不能为空',
+                inputType: 'textarea', // 改为文本域
+                inputValidator: (value) => {
+                    if (!value || value.trim() === '') {
+                        return '驳回原因不能为空';
+                    }
+                    return true;
+                }
+            }).then(({ value }) => {
+                //console.log('驳回原因:', value);
+                this.AuditWorkTaskReceipt(item.id, -1, value);
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '已取消驳回'
+                });
+            });
+        },
+        handleApproval(item) {
+            //一个简单的确定弹窗
+            this.$confirm('确定通过吗？,通过后将开始下一个任务', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                // 用户点击确定后执行的逻辑
+                console.log('通过');
+                this.AuditWorkTaskReceipt(item.id, 1, '');
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '已取消通过'
+                });
+            });
+        },
+        AuditWorkTaskReceipt(receiptId, approve, rejectReason) {
+            var data = {
+                "receiptId": receiptId,
+                "approverId": this.userId,
+                "approve": approve,
+                "rejectReason": rejectReason
+            };
+            this.$axios({
+                method: 'post',
+                url: '/api/Task/AuditWorkTaskReceipt',
+                data: data,
+            }).then(response => {
+                if (response.data.code == 200) {
+                    this.$message({
+                        message: '审核成功',
+                        type: 'success'
+                    });
+                    var history = this.historyForm.filter(item => item.id == receiptId);
+                    history[0].isApproved = approve;
+                    history[0].rejectReason = rejectReason;
+
+                    // 重新加载数据
+                    this.load();
+                } else {
+                    this.$message({
+                        message: response.data.msg || '审核失败',
+                        type: 'warning'
+                    });
+                }
+            }).catch(error => {
+                // 处理错误
+                console.error(error);
+                this.$message({
+                    message: '请求失败，请检查网络连接',
+                    type: 'error'
+                });
+            });
+        },
+    },
+    mounted() {
+        this.token = JSON.parse(localStorage.getItem('userinif')).token;
+        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
+        this.load();
+    }
+}
+
+</script>
+
+<style>
+#DepartProcessListConter {
+    background-color: white;
+}
+
+.step_icon {
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: white;
+    font-size: 12px;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+}
+
+.step_icon:hover {
+    /* ransform: scale(1.1); */
+}
+
+.czbtn {
+    width: 70px;
+}
+
+.form-card {
+    margin: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.over_input .el-textarea {
+    width: 70%;
+}
+</style>

src/router/index.js

@@ -139,14 +139,17 @@ import SharedFile from '@/components/OP/SharedFile';
 import tesseractTest from '@/components/OP/tesseractTest';
 import WorldGamescost from '@/components/Resource/WorldGamescost'
 import ConferenceCost from '@/components/Finance/ConferenceCost'
+import DepartProcessList from '@/components/OP/DepartProcessList'
+import DepartProcessAdd from '@/components/OP/DepartProcessAdd'
+
 
 Vue.use(Router)
 
 export default new Router({
-    // mode: 'history',
-    // scrollBehavior: () => {
-    //   history.pushState(null, null, document.URL)
-    // },
+  // mode: 'history',
+  // scrollBehavior: () => {
+  //   history.pushState(null, null, document.URL)
+  // },
   routes: [
     {
       path: '/',
@@ -394,7 +397,7 @@ export default new Router({
           component: ExpenseReview,
           meta: {
             keepAlive: true, //此组件需要被缓存
-            isBack:false, //用于判断上一个页面是哪个
+            isBack: false, //用于判断上一个页面是哪个
           }
         },
         {
@@ -631,7 +634,7 @@ export default new Router({
           component: TaskList,
           meta: {
             keepAlive: true, //此组件需要被缓存
-            isBack:false, //用于判断上一个页面是哪个
+            isBack: false, //用于判断上一个页面是哪个
           }
         },
         {
@@ -830,6 +833,17 @@ export default new Router({
           name: 'ConferenceCost',
           component: ConferenceCost
         },
+        {
+          path: '/home/DepartProcessList',
+          name: 'DepartProcessList',
+          component: DepartProcessList
+        },
+        {
+          path: '/home/DepartProcessAdd',
+          name: 'DepartProcessAdd',
+          component: DepartProcessAdd
+        },
+
       ]
     },
     {