| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | :visible.sync="visible" |
| | | :confirm-working="isWorking" |
| | | @confirm="confirm" |
| | | > |
| | | <GlobalWindow width="520px" :title="title" @close="close" :visible.sync="visible" :confirm-working="isWorking" |
| | | @confirm="confirm"> |
| | | <div class="warnning"> |
| | | {{ form.id ? '编辑计划对已生成的任务无效,会在下次生成任务时生效,且当天不会生成两个任务' : '新建巡检计划会从当天开始,按照配置规则产生对应的巡检任务' }} |
| | | </div> |
| | | <el-form :model="form" ref="form" :rules="rules"> |
| | | <el-form-item label="创建人编码" prop="creator"> |
| | | <el-input v-model="form.creator" placeholder="请输入创建人编码" v-trim/> |
| | | <el-form-item label="计划名称" prop="title"> |
| | | <el-input v-model="form.title" placeholder="请输入标题" v-trim /> |
| | | </el-form-item> |
| | | <el-form-item label="创建时间" prop="createDate"> |
| | | <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="请输入创建时间"></el-date-picker> |
| | | <el-form-item label="巡检线路" prop="lineId"> |
| | | <el-select v-model="form.lineId" filterable clearable> |
| | | <el-option v-for="item in lineList" :value="item.id" :label="item.name"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="更新人编码" prop="editor"> |
| | | <el-input v-model="form.editor" placeholder="请输入更新人编码" v-trim/> |
| | | <el-form-item label="巡检负责人" prop="userIds"> |
| | | <el-select v-model="form.userIds" multiple filterable clearable> |
| | | <el-option v-for="item in staffList" :value="item.id" :label="item.realname"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="更新时间" prop="editDate"> |
| | | <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="请输入更新时间"></el-date-picker> |
| | | <el-form-item label="计划开始日期-结束日期" prop="selDate"> |
| | | <el-date-picker v-model="form.selDate" @change="changeDate" is-range range-separator="-" |
| | | value-format="yyyy-MM-dd" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" /> |
| | | </el-form-item> |
| | | <el-form-item label="是否删除0否 1是" prop="isdeleted"> |
| | | <el-input v-model="form.isdeleted" placeholder="请输入是否删除0否 1是" v-trim/> |
| | | <el-form-item label="计划执行时间"> |
| | | <el-time-picker v-model="form.selTime" @change="changeTime" is-range range-separator="-" format="HH:mm" |
| | | value-format="HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" /> |
| | | </el-form-item> |
| | | <el-form-item label="标题" prop="title"> |
| | | <el-input v-model="form.title" placeholder="请输入标题" v-trim/> |
| | | <el-form-item label="重复频率"> |
| | | <el-select v-model="form.circleType" @change="changeType" filterable> |
| | | <el-option :value="0" label="每天"></el-option> |
| | | <el-option :value="1" label="每周"></el-option> |
| | | <el-option :value="2" label="每月"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="备注" prop="remark"> |
| | | <el-input v-model="form.remark" placeholder="请输入备注" v-trim/> |
| | | <el-form-item v-if="form.circleType == 1" prop="circleDays" label="重复规则"> |
| | | <div class="weeks"> |
| | | <div class="week" @click="weekClick(i)" :class="{ active: item.sel }" v-for="item, i in weeks">{{ item.la }} |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="状态 0启用 1禁用" prop="status"> |
| | | <el-input v-model="form.status" placeholder="请输入状态 0启用 1禁用" v-trim/> |
| | | <el-form-item v-if="form.circleType == 2" prop="circleDays" label="重复规则"> |
| | | <div class="weeks"> |
| | | <div class="week" @click="monthClick(i)" :class="{ active: item.sel }" v-for="item, i in monthsList">{{ |
| | | item.la |
| | | }}</div> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="排序码" prop="sortnum"> |
| | | <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="巡检点编码(关联yw_patrol_line)" prop="lineId"> |
| | | <el-input v-model="form.lineId" placeholder="请输入巡检点编码(关联yw_patrol_line)" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="巡检负责人编码集合,多个使用英文逗号隔开" prop="userIds"> |
| | | <el-input v-model="form.userIds" placeholder="请输入巡检负责人编码集合,多个使用英文逗号隔开" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="处理人编码(关联system_user)" prop="dealUserId"> |
| | | <el-input v-model="form.dealUserId" placeholder="请输入处理人编码(关联system_user)" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="处理时间" prop="dealDate"> |
| | | <el-date-picker v-model="form.dealDate" value-format="yyyy-MM-dd" placeholder="请输入处理时间"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="处理备注" prop="dealInfo"> |
| | | <el-input v-model="form.dealInfo" placeholder="请输入处理备注" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="循环周期 0每天 1每周 2每天" prop="circleType"> |
| | | <el-input v-model="form.circleType" placeholder="请输入循环周期 0每天 1每周 2每天" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="循环重复规则 1-31,多个英文逗号隔开" prop="circleDays"> |
| | | <el-input v-model="form.circleDays" placeholder="请输入循环重复规则 1-31,多个英文逗号隔开" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="开始日期" prop="startDate"> |
| | | <el-date-picker v-model="form.startDate" value-format="yyyy-MM-dd" placeholder="请输入开始日期"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="结束日期" prop="endDate"> |
| | | <el-date-picker v-model="form.endDate" value-format="yyyy-MM-dd" placeholder="请输入结束日期"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="开始时间点" prop="startTime"> |
| | | <el-input v-model="form.startTime" placeholder="请输入开始时间点" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="结束时间点" prop="endTime"> |
| | | <el-input v-model="form.endTime" placeholder="请输入结束时间点" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="执行进度 0待开始 1进行中 2超期 3已完成" prop="processStatus"> |
| | | <el-input v-model="form.processStatus" placeholder="请输入执行进度 0待开始 1进行中 2超期 3已完成" v-trim/> |
| | | </el-form-item> |
| | | |
| | | </el-form> |
| | | </GlobalWindow> |
| | | </template> |
| | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { fetchList as getLineList } from '@/api/Inspection/ywPatrolLine' |
| | | import { detailById } from '@/api/Inspection/ywPatrolScheme' |
| | | import { getUserList } from '@/api/system/user' |
| | | export default { |
| | | name: 'OperaYwPatrolSchemeWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | data () { |
| | | data() { |
| | | return { |
| | | // 表单数据 |
| | | form: { |
| | |
| | | status: '', |
| | | sortnum: '', |
| | | lineId: '', |
| | | userIds: '', |
| | | userIds: [], |
| | | dealUserId: '', |
| | | dealDate: '', |
| | | dealInfo: '', |
| | | circleType: '', |
| | | circleType: 0, |
| | | circleDays: '', |
| | | startDate: '', |
| | | endDate: '', |
| | | startTime: '', |
| | | endTime: '', |
| | | processStatus: '' |
| | | processStatus: '', |
| | | selDate: [], |
| | | }, |
| | | // 验证规则 |
| | | lineList: [], |
| | | staffList: [], |
| | | weeks: [ |
| | | { la: '周一', va: 1, sel: false }, |
| | | { la: '周二', va: 2, sel: false }, |
| | | { la: '周三', va: 3, sel: false }, |
| | | { la: '周四', va: 4, sel: false }, |
| | | { la: '周五', va: 5, sel: false }, |
| | | { la: '周六', va: 6, sel: false }, |
| | | { la: '周日', va: 7, sel: false }, |
| | | ], |
| | | monthsList: [], |
| | | selCircleDays: [], |
| | | rules: { |
| | | title: [{ required: true, message: '请输入' }], |
| | | lineId: [{ required: true, message: '请选择' }], |
| | | userIds: [{ required: true, message: '请选择' }], |
| | | selDate: [{ type: 'array', required: true, message: '请选择' }], |
| | | circleDays: [{ required: true, message: '请选择' }], |
| | | } |
| | | } |
| | | }, |
| | | created () { |
| | | created() { |
| | | this.config({ |
| | | api: '/Inspection/ywPatrolScheme', |
| | | 'field.id': 'id' |
| | | }) |
| | | }, |
| | | methods: { |
| | | open(title) { |
| | | this.title = title |
| | | this.visible = true |
| | | }, |
| | | __confirmCreate () { |
| | | this.$refs.form.validate((valid) => { |
| | | if (!valid) { |
| | | return |
| | | } |
| | | let obj = JSON.parse(JSON.stringify(this.form)) |
| | | obj.userIds = obj.userIds.join(',') |
| | | // 调用新建接口 |
| | | this.isWorking = true |
| | | this.api.create(obj) |
| | | .then(() => { |
| | | this.visible = false |
| | | this.$tip.apiSuccess('新建成功') |
| | | this.$emit('success') |
| | | }) |
| | | .catch(e => { |
| | | // this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking = false |
| | | }) |
| | | }) |
| | | }, |
| | | __confirmEdit () { |
| | | this.$refs.form.validate((valid) => { |
| | | if (!valid) { |
| | | return |
| | | } |
| | | let obj = JSON.parse(JSON.stringify(this.form)) |
| | | obj.userIds = obj.userIds.join(',') |
| | | // 调用新建接口 |
| | | this.isWorking = true |
| | | this.api.updateById(obj) |
| | | .then(() => { |
| | | this.visible = false |
| | | this.$tip.apiSuccess('修改成功') |
| | | this.$emit('success') |
| | | }) |
| | | .catch(e => { |
| | | // this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking = false |
| | | }) |
| | | }) |
| | | }, |
| | | weekClick(i) { |
| | | this.weeks.forEach((item, index) => { |
| | | if (i == index) { item.sel = !item.sel } |
| | | }) |
| | | this.$set(this.form, 'circleDays', this.weeks.filter(j => j.sel).map(a => a.va).join(',')) |
| | | }, |
| | | monthClick(i) { |
| | | this.monthsList.forEach((item, index) => { |
| | | if (i == index) { item.sel = !item.sel } |
| | | }) |
| | | this.$set(this.form, 'circleDays', this.monthsList.filter(j => j.sel).map(a => a.va).join(',')) |
| | | }, |
| | | changeTime(e) { |
| | | if (e && e.length > 0) { |
| | | this.$set(this.form, 'startTime', e[0]) |
| | | this.$set(this.form, 'endTime', e[1]) |
| | | } else { |
| | | this.$set(this.form, 'startTime', '') |
| | | this.$set(this.form, 'endTime', '') |
| | | } |
| | | }, |
| | | changeDate(e) { |
| | | if (e && e.length > 0) { |
| | | this.$set(this.form, 'startDate', e[0]) |
| | | this.$set(this.form, 'endDate', e[1]) |
| | | } else { |
| | | this.$set(this.form, 'startDate', '') |
| | | this.$set(this.form, 'endDate', '') |
| | | } |
| | | }, |
| | | changeType() { |
| | | this.$set(this.form, 'circleDays', '') |
| | | }, |
| | | getDetail(id) { |
| | | detailById(id).then(res => { |
| | | this.form = res |
| | | if (res.userIds) { |
| | | this.$set(this.form, 'userIds', [...res.userIds.split(',').map(item => Number(item))]) |
| | | } |
| | | if (res.startTime) { |
| | | this.$set(this.form, 'selTime', [res.startTime, res.endTime]) |
| | | } |
| | | if (res.circleDays) { |
| | | const circleDays = res.circleDays.split(',') |
| | | if (res.circleType == 1) { |
| | | circleDays.forEach(i => { |
| | | this.weeks.forEach(j => { |
| | | if (i == j.va) { |
| | | j.sel = true |
| | | } |
| | | }) |
| | | }) |
| | | } else { |
| | | setTimeout(() => { |
| | | circleDays.forEach(i => { |
| | | this.monthsList.forEach(j => { |
| | | if (i == j.va) { |
| | | j.sel = true |
| | | } |
| | | }) |
| | | }) |
| | | }, 500) |
| | | } |
| | | } |
| | | this.$set(this.form, 'selDate', [res.startDate, res.endDate]) |
| | | }) |
| | | }, |
| | | initData() { |
| | | getLineList({ |
| | | model: {}, |
| | | capacity: 9999, |
| | | page: 1, |
| | | }).then(res => { |
| | | this.lineList = res.records |
| | | }) |
| | | getUserList({}).then(res => { |
| | | this.staffList = res |
| | | }) |
| | | this.monthsList = [] |
| | | for (let i = 1; i < 32; i++) { |
| | | this.monthsList.push({ la: i, va: i, sel: false }) |
| | | } |
| | | }, |
| | | close() { |
| | | this.$refs.form.resetFields() |
| | | this.visible = false |
| | | } |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | @import '@/assets/style/variables.scss'; |
| | | .warnning{ |
| | | padding: 6px 10px; |
| | | background-color: #fcf3e6; |
| | | font-size: 12px; |
| | | color: #333333; |
| | | } |
| | | .weeks { |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | |
| | | .week { |
| | | border: 1px solid #999999; |
| | | width: 40px; |
| | | height: 18px; |
| | | text-align: center; |
| | | line-height: 18px; |
| | | font-size: 12px; |
| | | margin-right: 8px; |
| | | cursor: pointer; |
| | | margin-bottom: 6px; |
| | | } |
| | | |
| | | .active { |
| | | color: $primary-color; |
| | | border: 1px solid $primary-color; |
| | | } |
| | | } |
| | | </style> |