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

zhuzhuanzhuan

2024-03-04 697082adae9e0225bf5ab20b33353970dd8b3f3a

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

@@ -4,10 +4,22 @@
    <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="['calendarId', validatorRules.calendarId]"
                              @search="deviceSearch" enter-button/>
          <!--<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-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>
@@ -15,27 +27,27 @@
          <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]"/>
                             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="['endTime',validatorRules.endTime]"/>
                             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="['remark', validatorRules.remark]" 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>

@@ -52,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 {
@@ -73,7 +86,7 @@
            span: 24
          },
          sm: {
            span: 6
            span: 8
          }
        },
        wrapperCol: {
@@ -81,7 +94,7 @@
            span: 24
          },
          sm: {
            span: 18
            span: 16
          }
        },
        labelColLong: {
@@ -89,7 +102,7 @@
            span: 24
          },
          sm: {
            span: 3
            span: 4
          }
        },
        wrapperColLong: {
@@ -97,17 +110,49 @@
            span: 24
          },
          sm: {
            span: 21
            span: 20
          }
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          equipmentIds:{
          equipmentId:{
            rules:[
              {
                required:true,
                message: "请选择设备"
              },
            ],
          },
          // calendarId:{
          //   rules:[
          //     {
          //       required:true,
          //       message: "请选择班次"
          //     },
          //   ],
          // },
          theDate:{
            rules:[
              {
                required:true,
                message: "请选择加班日期"
              },
            ],
          },
          startTime:{
            rules:[
              {
                required:true,
                message: "请选择加班开始时间"
              },
            ],
          },
          endTime:{
            rules:[
              {
                required:true,
                message: "请选择加班结束时间"
              },
            ],
          },
@@ -145,32 +190,33 @@
      onChangeEnd(dates, dateStrings){
        this.endTime = dateStrings[0];
      },
      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
        // })
      },
      // 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) {
@@ -203,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',
          ))
        })
      },
@@ -212,19 +258,6 @@
        this.visible = false
        this.show = false
      },
      fun(obj) {
    if(obj){
      if (obj = obj.split("T")) {
        var tim = obj[1];
        if(tim = tim.split(".")){
          var tim0 = tim[0];
        }
        var dd = tim0
        return dd;
      }
    }

  },
      handleOk() {
        const that = this
        // 触发表单验证
@@ -232,28 +265,17 @@
          if (!err) {
            that.confirmLoading = true
            let formData = Object.assign(this.model, values)
            let start = moment(formData.startTime).format('HH:mm:ss');
            let end = moment(formData.endTime).format('HH:mm:ss');
            let startOne = start.replace(/:/g,'');
            let endOne = end.replace(/:/g,'');
            // var data = new Date();
            // let stertDate = moment(data).format("HH:mm:ss");
            // let dataStart = stertDate.replace(/:/g,'');
            // if(startOne < dataStart){
            //   that.$message.warning("开始时间不能小于当前时间")
            //   that.confirmLoading = false
            // }else{
            let startOne = formData.startTime.replace(/:/g,'');
            let endOne = formData.endTime.replace(/:/g,'')
              if(startOne>=endOne){
                that.$message.warning("结束时间不能小于开始时间");
                // console.log(this.model)
                // this.endTime = ''
                that.$notification.warning({
                  message:'消息',
                  description:"结束时间不能小于开始时间"
                });
                that.confirmLoading = false
              }else{
                let obj

                if (!this.model.id) {
                  formData.startTime = this.fun(JSON.stringify(formData.startTime));
                  formData.endTime = this.fun(JSON.stringify(formData.endTime))
                  obj = postAction(this.url.add, formData)
                } else {
                  obj = requestPut(this.url.edit, formData, {
@@ -322,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(',')
        })
      }
    }
  }