<template>
|
<div ref="device">
|
<a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" :getContainer="() => this.$refs.device"
|
:okButtonProps="{ props: {disabled: disableSubmit} }" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
<a-row :gutter="24">
|
<a-col :span="24">
|
<a-form-item label="设备组" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
|
<a-input-search :readOnly="true" v-decorator="['equipmentId', validatorRules.equipmentId]"
|
@search="deviceSearch" enter-button/>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-item label="生效时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-date-picker v-decorator="['takeEffectDate',validatorRules.takeEffectDate]" :disabled="disableSubmit"
|
:readOnly="disableSubmit" :disabledDate="disabledDate"/>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="失效时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-date-picker v-decorator="['invalidDate',validatorRules.invalidDate]" :disabled="disableSubmit"
|
:readOnly="disableSubmit" :disabledDate="disabledDateEnd"/>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span='12'>
|
<a-form-item label="星期一" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select v-decorator="['monShiftId', validatorRules.monShiftId]" placeholder="请选择班制"
|
:allowClear='allowClear' @change="initShiftSubList">
|
<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
|
{{ em.label }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="星期二" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select v-decorator="['tueShiftId', validatorRules.tueShiftId]" placeholder="请选择班制"
|
:allowClear='allowClear' @change="initShiftSubList">
|
<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
|
{{ em.label }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span='12'>
|
<a-form-item label="星期三" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select v-decorator="['wedShiftId', validatorRules.wedShiftId]" placeholder="请选择班制"
|
:allowClear='allowClear' @change="initShiftSubList">
|
<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
|
{{ em.label }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="星期四" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select v-decorator="['thuShiftId', validatorRules.thuShiftId]" placeholder="请选择班制"
|
:allowClear='allowClear' @change="initShiftSubList">
|
<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
|
{{ em.label }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span='12'>
|
<a-form-item label="星期五" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select v-decorator="['friShiftId', validatorRules.friShiftId]" placeholder="请选择班制"
|
:allowClear='allowClear' @change="initShiftSubList">
|
<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
|
{{ em.label }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="星期六" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select v-decorator="['satShiftId', validatorRules.satShiftId]" placeholder="请选择班制"
|
:allowClear='allowClear' @change="initShiftSubList">
|
<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
|
{{ em.label }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span='12'>
|
<a-form-item label="星期日" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select v-decorator="['sunShiftId', validatorRules.sunShiftId]" placeholder="请选择班制"
|
:allowClear='allowClear' @change="initShiftSubList">
|
<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
|
{{ em.label }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
</a-col>
|
</a-row>
|
<!--<a-row :gutter="24">-->
|
<!--<a-col :span="12">-->
|
<!--<a-form-item label="设备" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
<!--<a-input v-decorator="['equmentName',validatorRules.equmentName]" :disabled="true" :readOnly="true"/>-->
|
<!--</a-form-item>-->
|
<!--</a-col>-->
|
<!--<a-col :span="12">-->
|
<!--<a-form-item label="是否跨天" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
<!--<a-switch v-model="isDaySpan" :disabled="true" checked-children="是" un-checked-children="否"/>-->
|
<!--</a-form-item>-->
|
<!--</a-col>-->
|
<!--</a-row>-->
|
<!--<a-row :gutter="24">-->
|
<!--<a-col :span="12">-->
|
<!--<a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
<!--<a-input v-decorator="['startDate',validatorRules.startDate]" :disabled="true" :readOnly="true"/>-->
|
<!--</a-form-item>-->
|
<!--</a-col>-->
|
<!--<a-col :span="12">-->
|
<!--<a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
<!--<a-input v-decorator="['endDate',validatorRules.endDate]" :disabled="true" :readOnly="true"/>-->
|
<!--</a-form-item>-->
|
<!--</a-col>-->
|
<!--</a-row>-->
|
<!--<a-row :gutter="24">-->
|
<!--<a-col :span="12">-->
|
<!--<a-form-item label="开始休息时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
<!--<a-input v-decorator="['sleepStartDate',validatorRules.sleepStartDate]" :disabled="true"-->
|
<!--:readOnly="true"/>-->
|
<!--</a-form-item>-->
|
<!--</a-col>-->
|
<!--<a-col :span="12">-->
|
<!--<a-form-item label="结束休息时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
<!--<a-input v-decorator="['sleepEndDate',validatorRules.sleepEndDate]" :disabled="true" :readOnly="true"/>-->
|
<!--</a-form-item>-->
|
<!--</a-col>-->
|
<!--</a-row>-->
|
</a-form>
|
</a-spin>
|
<device-calend-list-model ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"></device-calend-list-model>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import DeviceCalendListModel from './DeviceCalendarListModel'
|
import moment from 'moment'
|
import pick from 'lodash.pick'
|
import {
|
getAction,
|
postAction,
|
requestPut
|
} from '@/api/manage'
|
import {
|
duplicateCheck
|
} from '@/api/api'
|
|
export default {
|
name: 'ShiftInfoModel',
|
components: {DeviceCalendListModel},
|
props: {},
|
data() {
|
return {
|
allowClear:true,
|
title: '',
|
isDaySpan: false,
|
visible: false,
|
show: false,
|
model: {},
|
checked: false,
|
labelColLong: {
|
xs: {
|
span: 24
|
},
|
sm: {
|
span: 3
|
}
|
},
|
wrapperColLong: {
|
xs: {
|
span: 24
|
},
|
sm: {
|
span: 21
|
}
|
},
|
labelCol: {
|
xs: {
|
span: 24
|
},
|
sm: {
|
span: 6
|
}
|
},
|
wrapperCol: {
|
xs: {
|
span: 24
|
},
|
sm: {
|
span: 18
|
}
|
},
|
confirmLoading: false, form: this.$form.createForm(this),
|
validatorRules: {
|
// shiftId:{
|
// rules: [{
|
// required: true, message: '请选择班制!',
|
// }],
|
// },
|
},
|
url: {
|
add: '/mdc/mdcDeviceCalendar/add',
|
edit: '/mdc/mdcshiftsub/edit',
|
initShiftList: '/mdc/mdcMdcShift/deleteShift',
|
initShiftSubList: '/mdc/mdcshiftsub/initShiftSubList',
|
getShiftSubById: '/mdc/mdcshiftsub/getShiftSubById',
|
settingCalendar: '/mdc/mdcDeviceCalendar/add',
|
},
|
shiftList: [],
|
shiftSubList: [],
|
disableSubmit: true
|
}
|
},
|
created() {
|
},
|
|
methods: {
|
deviceSearch() {
|
this.$refs.deviceRepairListModel.openPage()
|
this.$refs.deviceRepairListModel.title = '选择设备'
|
this.$refs.deviceRepairListModel.disableSubmit = false
|
},
|
getDeviceRows(val) {
|
console.log("========",val);
|
var equipmentIds = "";
|
for(var i = 0;i<val.length;i++){
|
//equipmentIds = equipmentIds + "," + val[i].equipmentId;
|
if (i == 0) {
|
equipmentIds = val[i].equipmentId;
|
} else {
|
equipmentIds = equipmentIds + "," + val[i].equipmentId;
|
}
|
}
|
this.form.setFieldsValue({
|
equipmentId: equipmentIds,
|
})
|
},
|
disabledDate(current){
|
//Can not slect days before today and today
|
return current && current < moment().subtract('days', 1);
|
},
|
disabledDateEnd(currentend){
|
//Can not slect days before today and today
|
return currentend && currentend < moment().subtract('days', 0);
|
},
|
initShiftList() {
|
getAction(this.url.initShiftList).then((res) => {
|
if (res.success) {
|
this.shiftList = res.result
|
}
|
})
|
},
|
initShiftSubList(shiftId) {
|
// getAction(this.url.initShiftSubList, { shiftId, shiftId }).then((res) => {
|
// if (res.success) {
|
// this.shiftSubList = res.result
|
// }
|
// })
|
},
|
add(record) {
|
let _this = this
|
this.visible = true
|
this.form.resetFields()
|
this.model = Object.assign({}, record)
|
this.initShiftList()
|
this.$nextTick(() => {
|
this.form.setFieldsValue(pick(this.model, 'equmentName'))
|
this.form.setFieldsValue({
|
takeEffectDate: moment(),
|
invalidDate: moment().endOf('month')
|
})
|
})
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
this.show = false
|
},
|
handleOk() {
|
const that = this
|
// 触发表单验证
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
that.confirmLoading = true
|
let formData = Object.assign(this.model, values)
|
postAction(this.url.settingCalendar, formData).then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.$emit('ok', res.result)
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
// shiftSubChange(val) {
|
// let _this = this
|
// getAction(this.url.getShiftSubById, { shiftSubId: val }).then((res) => {
|
// if (res.success) {
|
// if (res.result.isDaySpan == 'true') {
|
// _this.isDaySpan = true
|
// } else {
|
// _this.isDaySpan = false
|
// }
|
// _this.form.setFieldsValue({
|
// startDate: res.result.startDate,
|
// endDate: res.result.endDate
|
// })
|
// if (res.result.sleepStartDate) {
|
// _this.form.setFieldsValue({
|
// sleepStartDate: res.result.sleepStartDate
|
// })
|
// }
|
// if (res.result.sleepStartDate) {
|
// _this.form.setFieldsValue({
|
// sleepEndDate: res.result.sleepEndDate
|
// })
|
// }
|
// }
|
// })
|
// }
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-modal-content{
|
/*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/
|
/*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/
|
/*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
|
/*background-color: #000;*/
|
}
|
/deep/ .ant-modal-close{
|
color: #1191b0;
|
font-size: 24px;
|
}
|
/deep/ .ant-modal-close-x{
|
font-size: 24px;
|
}
|
.ant-btn {
|
padding: 0 10px;
|
margin-left: 3px;
|
}
|
|
.ant-form-item-control {
|
line-height: 0px;
|
}
|
|
/** 主表单行间距 */
|
.ant-form .ant-form-item {
|
margin-bottom: 10px;
|
}
|
|
/** Tab页面行间距 */
|
.ant-tabs-content .ant-form-item {
|
margin-bottom: 0px;
|
}
|
</style>
|
