1、用户管理页面表单填写界面新增选择设备功能 2、避免命名冲突，更改原选择设备组件名称为selectDeviceDrawer，用户管理页面选择设备组件...

zhuzhuanzhuan

2024-03-04 697082adae9e0225bf5ab20b33353970dd8b3f3a

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

@@ -8,14 +8,14 @@
            <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/>
                                @search="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="['monShiftId', validatorRules.monShiftId]" placeholder="请选择班制"
                <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 }}
@@ -44,6 +44,7 @@
        </a-form>
      </a-spin>
      <device-calend-list-model ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"></device-calend-list-model>
      <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
    </a-modal>
  </div>
</template>
@@ -62,10 +63,11 @@
  } from '@/api/api'

  import Calendar from 'vue-calendar-component';
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'ShiftInfoModel',
    components: {DeviceCalendListModel,Calendar},
    components: { SelectDeviceDrawer, DeviceCalendListModel,Calendar},
    props: {},
    data() {
      return {
@@ -115,11 +117,18 @@
        },
        confirmLoading: false,        form: this.$form.createForm(this),
        validatorRules: {
          // shiftId:{
          //   rules: [{
          //     required: true, message: '请选择班制!',
          //   }],
          // },
          equipmentId:{
            rules:[
              {
                required:true,message:'请选择设备组!'
              }
            ]
          },
          shiftId:{
            rules: [{
              required: true, message: '请选择班制!',
            }],
          }
        },
        url: {
          add: '/mdc/mdcDeviceCalendar/add',
@@ -152,10 +161,10 @@
      //   console.log(data); //选中某天
      // },
      changeDate(data) {
        console.log(data); //左右点击切换月份
       // console.log(data); //左右点击切换月份
      },
      clickToday(data) {
        console.log(data); // 跳到了本月
        //console.log(data); // 跳到了本月
      },
      // markChange(){
      //
@@ -200,13 +209,10 @@
        }
      },
      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)
@@ -214,7 +220,6 @@
          }
        }
        if (isExist) {//当前日期存在移除
          console.log("不存在-添加===>");
          let tempDate = {date: today, className: "mark1"}
          // let ddd = this.fun(today)
          let ddd = today
@@ -223,8 +228,6 @@
          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);
@@ -238,9 +241,10 @@
        this.value = value;
      },
      deviceSearch() {
        this.$refs.deviceRepairListModel.openPage()
        this.$refs.deviceRepairListModel.title = '选择设备'
        this.$refs.deviceRepairListModel.disableSubmit = false
        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);
@@ -306,20 +310,34 @@
          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)
                that.$emit('ok', res.result)
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
            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.close()
            })
              that.$notification.warning({
                message:'消息',
                description:'请选择生效时间!'
              });
            }
          }
        })
      },
@@ -327,6 +345,21 @@
        this.close()
      },

      /**
       * 选择已有设备后点击确定时触发
       * @param data 已选择的设备
       */
      selectOK(data) {
        // let params = {}
        // params.equipmentIdList = []
        // for (var a = 0; a < data.length; a++) {
        //   params.equipmentIdList.push(data[a])
        // }
        console.log('data=', data)
        this.form.setFieldsValue({
          equipmentId: data.join(',')
        })
      }
    }
  }
</script>
@@ -417,9 +450,11 @@
    color: #000000;
  }
  /deep/ .mainBox .wh_content_all .wh_content_item .wh_isMark {
    color: #1890ff;
    border:1px solid  #1890ff;
    border-radius: 50%;
    /*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;*/
@@ -430,60 +465,6 @@

</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>-->