<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" enter-button/>
|
</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-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'
|
|
import Calendar from 'vue-calendar-component';
|
|
export default {
|
name: 'ShiftInfoModel',
|
components: {DeviceCalendListModel,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: {
|
// 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: {
|
// clickDay(data) {
|
// console.log(data); //选中某天
|
// },
|
changeDate(data) {
|
// console.log(data); //左右点击切换月份
|
},
|
clickToday(data) {
|
//console.log(data); // 跳到了本月
|
},
|
// markChange(){
|
//
|
// },
|
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.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) {
|
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
|
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()
|
})
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
|
}
|
}
|
</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;
|
}
|
|
/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: #1890ff;*/
|
/*border:1px solid #1890ff;*/
|
/*border-radius: 50%;*/
|
color: #ffffff;
|
background-color: blue;
|
}
|
/deep/ .mainBox .wh_content_all .wh_content_item .wh_isToday {
|
/*background: #33ad53;*/
|
/*background: #ff4d4d!important;*/
|
background-color: #ffffff;
|
color: #000000;
|
}
|
|
</style>
|
