<template>
|
<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="title">
|
<el-input v-model="form.title" placeholder="请输入标题" v-trim />
|
</el-form-item>
|
<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="userIds">
|
<el-select v-model="form.userIds" 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="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="计划执行时间">
|
<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="重复频率">
|
<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 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 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>
|
</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() {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
creator: '',
|
createDate: '',
|
editor: '',
|
editDate: '',
|
isdeleted: '',
|
title: '',
|
remark: '',
|
status: '',
|
sortnum: '',
|
lineId: '',
|
userIds: '',
|
dealUserId: '',
|
dealDate: '',
|
dealInfo: '',
|
circleType: 0,
|
circleDays: '',
|
startDate: '',
|
endDate: '',
|
startTime: '',
|
endTime: '',
|
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() {
|
this.config({
|
api: '/Inspection/ywPatrolScheme',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
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', Number(res.userIds))
|
}
|
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>
|
