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

zhuzhuanzhuan

2024-03-04 697082adae9e0225bf5ab20b33353970dd8b3f3a

 src/views/mdc/base/modules/deviceRepair/DeviceRepairModel.vue

@@ -19,7 +19,7 @@
            <!--</a-form-item>-->
            <a-form-item label="设备组" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
              <a-input-search :readOnly="true" v-decorator="['equipmentIds', validatorRules.equipmentIds]"
                              @search="deviceSearch" enter-button/>
                              @search="deviceSearch" enter-button placeholder="请选择设备"/>
              <!--<a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="请输入设备编号"-->
              <!--v-decorator="['equipmentId',validatorRules.equipmentId]"/>-->
            </a-form-item>
@@ -44,20 +44,22 @@
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date :show-time="{defaultValue:moment('08:00:00','HH:mm:ss'),minuteStep:5,hideDisabledOptions:true}"
              <j-date :show-time="{defaultValue:moment('08:00:00','HH:mm:ss'),hideDisabledOptions:true}"
                      date-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择开始时间"
                      :disabledDate="disabledDate" class="query-group-cust"
                      v-decorator="['startTime', validatorRules.startTime]" :disabledTime="disabledDateTime"></j-date>
                      v-decorator="['startTime', validatorRules.startTime]" :disabledTime="disabledDateTime"
                      :showToday="false"></j-date>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date :show-time="{defaultValue:moment('08:00:00','HH:mm:ss'),minuteStep:5,hideDisabledOptions:true}"
              <j-date :show-time="{defaultValue:moment('08:00:00','HH:mm:ss'),hideDisabledOptions:true}"
                      date-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择结束时间"
                      :disabledDate="disabledDate" class="query-group-cust"
                      v-decorator="['endTime', validatorRules.endTime]" :disabledTime="disabledDateTime"></j-date>
                      v-decorator="['endTime', validatorRules.endTime]" :disabledTime="disabledDateTime"
                      :showToday="false"></j-date>
            </a-form-item>
          </a-col>
        </a-row>
@@ -72,17 +74,13 @@
        <!--</a-row>-->
      </a-form>
    </a-spin>
    <device-repair-list-model ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"
                              :selectedEquipmentIds="selectedEquipmentIds"
    ></device-repair-list-model>

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

<script>
  import moment from 'moment'
  import pick from 'lodash.pick'
  import DeviceRepairListModel from './DeviceRepairListModel'
  import JDate from './JDate'
  import {
    getAction,
@@ -92,12 +90,12 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import AFormItem from 'ant-design-vue/es/form/FormItem'
  import Vue from 'vue'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'DeviceRepairModel',
    components: { AFormItem, DeviceRepairListModel, JDate },
    components: { SelectDeviceDrawer, JDate },
    props: {
      equipmentId: {
        type: String
@@ -226,7 +224,7 @@
      disabledDate(current) {
        //Can not slect days before today and today
        // return current && current < moment().endOf("day");
        return current < moment().subtract(+2, 'day')//前一天之前的年月日不可选，不包括前一天
        return current < moment().subtract(+2, 'day').endOf('day')//前一天之前的年月日不可选，不包括前一天
      },
      moment,
      // onChange(dates) {
@@ -275,9 +273,10 @@
        // })
      },
      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('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {
@@ -461,11 +460,11 @@
        this.checked = e.target.checked
      },
      range(start, end) {
        const result = [];
        const result = []
        for (let i = start; i < end; i++) {
          result.push(i);
          result.push(i)
        }
        return result;
        return result
      },
      /**
       * 禁用日期选择器中的时间选择
@@ -473,8 +472,24 @@
       */
      disabledDateTime() {
        return {
          disabledSeconds: () => this.range(1,60)
          disabledSeconds: () => this.range(1, 60)
        }
      },

      /**
       * 选择已有设备后点击确定时触发
       * @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({
          equipmentIds: data.join(',')
        })
      }
    }
  }
@@ -499,4 +514,6 @@
  .ant-tabs-content .ant-form-item {
    margin-bottom: 0px;
  }


</style>