<template>
|
<div ref="device">
|
<a-modal :title="title" :width="900" :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" @click="deviceSearch" enter-button placeholder="请选择设备"/>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span="24">
|
<a-form-item label="班制" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
|
<a-select v-decorator="['shiftId', validatorRules.shiftId]" 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="24">
|
<a-form-item label="生效时间" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
|
<div class="mainBox">
|
<Calendar
|
v-on:choseDay="clickDay"
|
v-on:changeMonth="changeDate"
|
v-on:isToday="clickToday"
|
:markDate='shiData'
|
:agoDayHide='value'
|
></Calendar>
|
</div>
|
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</a-spin>
|
<device-calender-list-model ref="deviceCalenderListModel"
|
@sendSelectionRows="getDeviceRows"></device-calender-list-model>
|
<select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import DeviceCalendarListModel from './DeviceCalendarListModel'
|
import moment from 'moment'
|
import pick from 'lodash.pick'
|
import {
|
getAction,
|
postAction,
|
requestPut
|
} from '@/api/manage'
|
|
import Calendar from 'vue-calendar-component'
|
import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'
|
|
export default {
|
name: 'ShiftInfoModel',
|
components: { SelectDeviceDrawer, DeviceCalendarListModel, Calendar },
|
props: {},
|
data() {
|
return {
|
value: '',
|
date: '',
|
week: '',
|
selectDate: [],
|
// 当前日期
|
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: {
|
equipmentId: {
|
rules: [
|
{
|
required: true, message: '请选择设备组!'
|
}
|
]
|
},
|
shiftId: {
|
rules: [{
|
required: true, message: '请选择班制!'
|
}]
|
}
|
},
|
url: {
|
add: '/mdc/mdcDeviceCalendar/add',
|
edit: '/mdc/mdcshiftsub/edit',
|
initShiftList: '/mdc/mdcMdcShift/initShiftList',
|
initShiftSubList: '/mdc/mdcshiftsub/initShiftSubList',
|
getShiftSubById: '/mdc/mdcshiftsub/getShiftSubById',
|
settingCalendar: '/mdc/mdcDeviceCalendar/add'
|
},
|
shiftList: [],
|
shiftSubList: [],
|
disableSubmit: true,
|
calData: undefined,
|
shiData: [],
|
sendDte: []
|
}
|
},
|
created() {
|
this.value = Math.round(new Date().getTime() / 1000).toString()
|
var now = new Date()
|
this.date = now.getDate()//得到日期
|
var day = now.getDay()//得到周几
|
var arr_week = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')
|
this.week = arr_week[day]
|
this.getWorking()
|
},
|
|
methods: {
|
getWorking() {//获取当前月工作日
|
let myDate = new Date()
|
let tY = myDate.getFullYear()//得到当前年
|
let tM = myDate.getMonth()//得到当前月+1
|
let tD = new Date(tY, tM + 1, 0)
|
let tT = tD.getDate()//得到当前月的天数
|
|
for (var i = 1; i <= tT; i++) {
|
let week = new Date(tY, tM, i).getDay()
|
if (week >= 1 && week <= 5) {
|
let dd = tY + '/' + (tM + 1) + '/' + i
|
let temp = { className: 'mark1', date: dd }
|
this.selectDate.push(temp)
|
}
|
}
|
//console.log(JSON.stringify(this.selectDate))
|
},
|
resetSelect() {//重置选中的日期
|
this.selectDate = []
|
this.shiData = []
|
this.sendDte = []
|
},
|
fun(obj) {
|
console.log(obj)
|
if (obj) {
|
if (obj = obj.split('/')) {
|
var timShi = obj[1]
|
var timFen = obj[2]
|
if (timShi < 10) {
|
timShi = '0' + timShi
|
}
|
if (timFen < 10) {
|
timFen = '0' + timFen
|
}
|
var dd = (obj[0] + timShi + timFen)
|
return dd
|
}
|
}
|
},
|
clickDay(today) {//选中日期
|
let existDate = this.selectDate
|
let isExist = true
|
for (var i = 0; i < existDate.length; i++) {
|
if (existDate[i].date === today) {
|
this.selectDate.splice(i, 1)
|
this.shiData.splice(i, 1)
|
this.sendDte.splice(i, 1)
|
isExist = false
|
}
|
}
|
if (isExist) {//当前日期存在移除
|
let tempDate = { date: today, className: 'mark1' }
|
// let ddd = this.fun(today)
|
let ddd = today
|
let ccc = this.fun(today)
|
this.selectDate.push(tempDate)
|
this.shiData.push(ddd)
|
this.sendDte.push(ccc)
|
}
|
},
|
onSelect(value) {
|
console.log(value)
|
let arr = []
|
arr.push(value)
|
this.value = arr
|
// this.value = value;
|
// this.selectedValue = value;
|
},
|
onPanelChange(value) {
|
this.value = value
|
},
|
deviceSearch() {
|
this.$refs.selectDeviceDrawer.visible = true
|
this.$refs.selectDeviceDrawer.selectedRowKeys = []
|
this.$refs.selectDeviceDrawer.selectedRows = []
|
this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentId') ? this.form.getFieldValue('equipmentId').split(',') : []
|
},
|
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
|
}
|
})
|
},
|
add(record) {
|
this.resetSelect()
|
let _this = this
|
this.visible = true
|
this.form.resetFields()
|
this.model = Object.assign({}, record)
|
this.initShiftList()
|
this.$nextTick(() => {
|
this.form.setFieldsValue(pick(this.model))
|
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)
|
formData.dateList = this.sendDte
|
if (formData.dateList && formData.dateList.length > 0) {
|
postAction(this.url.settingCalendar, formData).then((res) => {
|
if (res.success) {
|
// that.$message.success(res.message)
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.$emit('ok', res.result)
|
} else {
|
// that.$message.warning(res.message)
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
} else {
|
that.confirmLoading = false
|
that.$notification.warning({
|
message: '消息',
|
description: '请选择生效时间!'
|
})
|
}
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
|
/**
|
* 选择已有设备后点击确定时触发
|
* @param data 已选择的设备
|
*/
|
selectOK(data) {
|
this.form.setFieldsValue({
|
equipmentId: data.join(',')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .mark1 {
|
color: white !important;
|
background-color: #1890ff !important;
|
border-radius: 50%;
|
}
|
|
/deep/ .mainBox .wh_content_all {
|
background-color: #ffffff;
|
border: 1px silver solid;
|
-webkit-border-radius: 5px;
|
-moz-border-radius: 5px;
|
border-radius: 5px;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_jiantou1 {
|
border-top: 2px solid #000000;
|
border-left: 2px solid #000000;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_jiantou2 {
|
border-top: 2px solid #000000;
|
border-right: 2px solid #000000;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_top_changge li {
|
color: black;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item {
|
margin-top: 5px;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_top_tag {
|
color: #000000;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_item_date {
|
color: #000000;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_item_date:hover {
|
color: #1890ff;
|
border: 1px solid #1890ff;
|
border-radius: 50%;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_other_dayhide {
|
color: #bfbfbf !important;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_want_dayhide {
|
color: #bfbfbf !important;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_chose_day {
|
background: #ffffff;
|
color: #000000;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_isMark {
|
color: #ffffff;
|
background-color: blue;
|
}
|
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_isToday {
|
background-color: #ffffff;
|
color: #000000;
|
}
|
|
</style>
|
