123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507 |
- <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>
|