部门产线的权限控制、设备工作日历界面的样式调整

zhuzhuanzhuan

2023-08-09 90e466c3e52c189e802ad1898becba54c55d91e8

 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarModel.vue

@@ -1,6 +1,6 @@
<template>
  <div ref="device">
    <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" :getContainer="() => this.$refs.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">
@@ -13,22 +13,8 @@
            </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-col :span="24">
              <a-form-item label="班制" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
                <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">
@@ -37,112 +23,24 @@
                </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 :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-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>
@@ -163,12 +61,19 @@
    duplicateCheck
  } from '@/api/api'

  import Calendar from 'vue-calendar-component';

  export default {
    name: 'ShiftInfoModel',
    components: {DeviceCalendListModel},
    components: {DeviceCalendListModel,Calendar},
    props: {},
    data() {
      return {
        value:'',
        date:'',
        week:"",
        selectDate: [],
        // 当前日期
        allowClear:true,
        title: '',
        isDaySpan: false,
@@ -226,13 +131,112 @@
        },
        shiftList: [],
        shiftSubList: [],
        disableSubmit: true
        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){//选中日期
        // today = this.fun(today)
        console.log("当前选中日期===>", today);
        let existDate = this.selectDate;
        let isExist = true;
        for (var i = 0; i < existDate.length; i++) {
          if (existDate[i].date === today) {
            console.log("当前日期存已在===>",today);
            this.selectDate.splice(i,1);
            this.shiData.splice(i,1);
            this.sendDte.splice(i,1)
            isExist = false;
          }
        }
        if (isExist) {//当前日期存在移除
          console.log("不存在-添加===>");
          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)
        }
        console.log("this.selectDate===>",JSON.stringify(this.selectDate));
        console.log(this.sendDte)
      },
      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 = '选择设备'
@@ -276,16 +280,17 @@
        // })
      },
      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, 'equmentName'))
          this.form.setFieldsValue(pick(this.model))
          this.form.setFieldsValue({
            takeEffectDate: moment(),
            invalidDate: moment().endOf('month')
            // takeEffectDate: moment(),
            // invalidDate: moment().endOf('month')
          })
        })
      },
@@ -301,6 +306,9 @@
          if (!err) {
            that.confirmLoading = true
            let formData = Object.assign(this.model, values)

            formData.dateList = this.sendDte
            console.log(formData)
            postAction(this.url.settingCalendar, formData).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
@@ -318,37 +326,14 @@
      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)));*/
@@ -383,4 +368,124 @@
  .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%;
  }
  /deep/ .mainBox .wh_content_all .wh_content_item .wh_isToday {
    /*background: #33ad53;*/
    /*background: #ff4d4d!important;*/
    background-color: #ffffff;
    color: #000000;
  }

</style>

<!--<style lang="scss">-->

  <!--.mark1 {-->
    <!--color: white !important;-->
    <!--background: #1890ff !important;-->
    <!--border-radius: 50%;-->
  <!--}-->

  <!--.mainBox {-->
    <!--.wh_content_all { /*主体*/-->
      <!--background-color: #ffffff;-->
      <!--border: 1px silver solid;-->
      <!--border-radius: 5px;-->
      <!--.wh_jiantou1{/*左箭头*/-->
        <!--border-top: 2px solid #000000;-->
        <!--border-left: 2px solid #000000;-->
      <!--}-->
      <!--.wh_jiantou2{/*右箭头*/-->
        <!--border-top: 2px solid #000000;-->
        <!--border-right: 2px solid #000000;-->
      <!--}-->
      <!--.wh_top_changge li { /*当前年月标题*/-->
        <!--color: black;-->
      <!--}-->
      <!--.wh_content_item {-->
        <!--margin-top: 5px;-->
        <!--.wh_top_tag{/*星期标题*/-->
          <!--color: #000000;-->
        <!--}-->
        <!--.wh_item_date {/*当前月*/-->
          <!--color: #000000;-->
        <!--}-->
        <!--.wh_item_date:hover { //悬浮-->
          <!--color: #1890ff;-->
          <!--background: #ffffff;-->
          <!--border-radius: 50%;-->
        <!--}-->
        <!--.wh_other_dayhide { /*上月和下月时间*/-->
          <!--color: #bfbfbf;-->
        <!--}-->
        <!--.wh_chose_day { //选中-->
          <!--background: #ffffff;-->
          <!--color: #000000;-->
        <!--}-->
        <!--.wh_isToday { /*当前天*/-->
          <!--/*background: #33ad53;*/-->
          <!--background: #ff4d4d;-->
          <!--color: #ffffff;-->
        <!--}-->
      <!--}-->

    <!--}-->
  <!--}-->
<!--</style>-->