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

zhuzhuanzhuan

2024-03-04 697082adae9e0225bf5ab20b33353970dd8b3f3a

 src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementModal.vue

@@ -4,53 +4,50 @@
    <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="['equipmentIds', validatorRules.equipmentIds]"
                              @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">
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间"
                       v-decorator="['torqueDate', validatorRules.torqueDate]"></j-date>
            </a-form-item>
          </a-col>
          <!--<a-col :span="12">-->
            <!--<a-form-item label="扭矩值" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--<a-input-number :min="0" :disabled="disableSubmit" placeholder="请输入扭矩值"-->
                       <!--v-decorator="['torqueValue', validatorRules.torqueValue]"/>-->
          <!--<a-col :span="24">-->
            <!--<a-form-item label="班次选择" :labelCol="labelColLong" :wrapperCol="wrapperColLong">-->
              <!--<a-input-search :readOnly="true" v-decorator="['calendarId', validatorRules.calendarId]"-->
                              <!--@search="deviceSearch" enter-button/>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
          <a-col :span="12">
            <a-form-item label="加班开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-time-picker :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear
                             v-decorator="['startDate',validatorRules.startDate]"/>
            <a-form-item label="设备组" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-search :readOnly="true" v-decorator="['equipmentId', validatorRules.equipmentId]"
                              @search="deviceSearch" enter-button placeholder="请选择设备"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker :disabled="disableSubmit" :readOnly="disableSubmit"
                             v-decorator="['theDate',validatorRules.theDate]" format="YYYYMMDD" valueFormat="YYYYMMDD" style="width: 100%" placeholder="请选择加班日期"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">

          <a-col :span="12">
            <a-form-item label="加班开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-time-picker :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear
                             v-decorator="['startTime',validatorRules.startTime]"  valueFormat="HH:mm:ss" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="加班结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-time-picker :disabled="disableSubmit" :readOnly="disableSubmit"
                             v-decorator="['endDate',validatorRules.endDate]"/>
                             v-decorator="['endTime',validatorRules.endTime]" valueFormat="HH:mm:ss" style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea :maxLength="20"  v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <torqueconfiguration-modal-list ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"></torqueconfiguration-modal-list>

    <!--<torqueconfiguration-modal-list ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"></torqueconfiguration-modal-list>-->
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

@@ -67,10 +64,11 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'TorqueconfigurationModal',
    components: {TorqueconfigurationModalList},
    components: { SelectDeviceDrawer, TorqueconfigurationModalList},
    props: {},
    data() {
      return {
@@ -88,7 +86,7 @@
            span: 24
          },
          sm: {
            span: 6
            span: 8
          }
        },
        wrapperCol: {
@@ -96,7 +94,7 @@
            span: 24
          },
          sm: {
            span: 18
            span: 16
          }
        },
        labelColLong: {
@@ -104,7 +102,7 @@
            span: 24
          },
          sm: {
            span: 3
            span: 4
          }
        },
        wrapperColLong: {
@@ -112,13 +110,13 @@
            span: 24
          },
          sm: {
            span: 21
            span: 20
          }
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          equipmentIds:{
          equipmentId:{
            rules:[
              {
                required:true,
@@ -126,11 +124,43 @@
              },
            ],
          },
          // calendarId:{
          //   rules:[
          //     {
          //       required:true,
          //       message: "请选择班次"
          //     },
          //   ],
          // },
          theDate:{
            rules:[
              {
                required:true,
                message: "请选择加班日期"
              },
            ],
          },
          startTime:{
            rules:[
              {
                required:true,
                message: "请选择加班开始时间"
              },
            ],
          },
          endTime:{
            rules:[
              {
                required:true,
                message: "请选择加班结束时间"
              },
            ],
          },
        },

        url: {
          add: '/mdc/MdcTorqueConfig/addMdcTorqueConfig',
          edit: '/mdc/MdcTorqueConfig/editMdcTorqueConfig'
          add: '/mdc/mdcEquipmentOvertime/add',
          edit: '/mdc/mdcEquipmentOvertime/edit'
        },

        disableSubmit: true,
@@ -160,32 +190,33 @@
      onChangeEnd(dates, dateStrings){
        this.endTime = dateStrings[0];
      },
      getDeviceRows(val) {
        var equipmentIds;
        for(var i = 0;i<val.length;i++){
          if (i == 0) {
            equipmentIds =  val[i].equipmentId;
          } else {
            equipmentIds = equipmentIds + "," + val[i].equipmentId;
          }
        }
        // console.log("========",equipmentIds);
        this.form.setFieldsValue({
          equipmentIds: equipmentIds,
        })
        //   this.form.setFieldsValue({
        // equipmentId: val.equipmentId,
        // equipmentName: val.equipmentName,
        // equipmentModel: val.equipmentModel,
        // equipmentIp: val.equipmentIp,
        // dataPort: val.dataPort,
        // driveType: val.driveType
        // })
      },
      // getDeviceRows(val) {
      //   var calendarId;
      //   for(var i = 0;i<val.length;i++){
      //     if (i == 0) {
      //       calendarId =  val[i].id;
      //     } else {
      //       calendarId = calendarId + "," + val[i].id;
      //     }
      //   }
      //   // console.log("========",equipmentIds);
      //   this.form.setFieldsValue({
      //     calendarId: calendarId,
      //   })
      //   //   this.form.setFieldsValue({
      //   // equipmentId: val.equipmentId,
      //   // equipmentName: val.equipmentName,
      //   // equipmentModel: val.equipmentModel,
      //   // equipmentIp: val.equipmentIp,
      //   // dataPort: val.dataPort,
      //   // driveType: val.driveType
      //   // })
      // },
      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(',') : []
      },
      //级联框onChange事件
      // onChange(value) {
@@ -218,7 +249,7 @@
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'equipmentIds', 'equipmentName', 'mdcRepairType', 'startTime', 'endTime',
          this.form.setFieldsValue(pick(this.model, 'equipmentId', 'equipmentName', 'mdcRepairType', 'startTime', 'endTime',
          ))
        })
      },
@@ -234,23 +265,15 @@
          if (!err) {
            that.confirmLoading = true
            let formData = Object.assign(this.model, values)
            // let start = moment(formData.startTime).format('YYYY-MM-DD HH:mm:ss');
            // let end = moment(formData.endTime).format('YYYY-MM-DD HH:mm:ss');
            // let startOne = start.replace(/:/g,'');
            // let endOne = end.replace(/:/g,'');
            // var data = new Date();
            // let stertDate = moment(data).format("YYYY-MM-DD HH:mm:ss");
            // let dataStart = stertDate.replace(/:/g,'');
            // if(startOne < dataStart){
            //   that.$message.warning("开始时间不能小于当前时间")
            //   that.confirmLoading = false
            // }else{
            //   if(startOne>=endOne){
            //     that.$message.warning("结束时间不能小于开始时间");
            //     // console.log(this.model)
            //     // this.endTime = ''
            //     that.confirmLoading = false
            //   }else{
            let startOne = formData.startTime.replace(/:/g,'');
            let endOne = formData.endTime.replace(/:/g,'')
              if(startOne>=endOne){
                that.$notification.warning({
                  message:'消息',
                  description:"结束时间不能小于开始时间"
                });
                that.confirmLoading = false
              }else{
                let obj
                if (!this.model.id) {
                  obj = postAction(this.url.add, formData)
@@ -280,7 +303,7 @@
                  that.close()
                })
              }
            // }
            }

          // }
        })
@@ -321,6 +344,22 @@
      },
      checkboxChange(e) {
        this.checked = e.target.checked
      },

      /**
       * 选择已有设备后点击确定时触发
       * @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(',')
        })
      }
    }
  }