update

Lius

12 小时以前 54c22f2f0e98c35e48cdad6c4d0299d08beea630

 src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue

@@ -1,5 +1,5 @@
<template>
  <a-modal :title="title" :width="500" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
  <a-modal :title="title" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
           @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="spinning">
      <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelColLong"
@@ -8,7 +8,7 @@
          <a-col :span="24">
            <a-form-model-item label="设备组" prop="equipmentIds">
              <a-input-search readOnly v-model="model.equipmentIds" @search="deviceSearch" enter-button
                              placeholder="请选择设备"/>
                              placeholder="请选择设备" />
            </a-form-model-item>
          </a-col>
        </a-row>
@@ -40,19 +40,30 @@

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="停机日期" prop="theDate">
              <a-date-picker v-model="model.theDate" placeholder="请选择停机日期" value-format="YYYY-MM-DD"
                             style="width: 100%"/>
            <a-form-model-item v-if="title === '编辑'" label="停机日期" prop="theDate">
              <a-date-picker :disabled="true" v-model="model.theDate" placeholder="请选择停机日期"
                             value-format="YYYY-MM-DD"
                             style="width: 100%" />
            </a-form-model-item>
          </a-col>

            <a-form-item v-if="title === '新增'" label="停机日期" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
              <div class="mainBox">
                <Calendar
                  v-on:choseDay="clickDay"
                  :markDate="shiData"
                  :agoDayHide="value"
                ></Calendar>
              </div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="停机时长(min)" prop="downLong">
              <a-input-number v-model="model.downLong" :min="1" :step="1" :precision="0" placeholder="请输入停机时长(min)"
                              style="width: 100%"/>
              <a-input-number v-model="model.downLong" :min="1" :step="1" :precision="0"
                              placeholder="请输入停机时长(min)"
                              style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
@@ -73,118 +84,124 @@
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="备注">
              <a-textarea v-model="model.remark" placeholder="请输入备注"/>
              <a-textarea v-model="model.remark" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>

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

<script>
  import { getAction, postAction } from '@api/manage'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'
import Calendar from 'vue-calendar-component'
import { getAction, postAction } from '@api/manage'
import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'EquipmentStandbyShutdownModal',
    components: { SelectDeviceDrawer },
    props: {},
    data() {
      return {
        title: '',
        visible: false,
        model: {},
        equipmentList: [],
        downtimeDescriptionList: [],
        labelColLong: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperColLong: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        spinning: false,
        disableSelectDevice: false,
        validatorRules: {
          equipmentIds: [
            { required: true, message: '请选择设备', trigger: 'change' }
          ],
          downtimeType: [
            { required: true, message: '请选择停机类型' }
          ],
          reasonId: [
            { required: true, message: '请选择停机原因' }
          ],
          theDate: [
            { required: true, message: '请选择停机日期' }
          ],
          downLong: [
            { required: true, message: '请输入停机时长(min)' }
          ]
        },
        url: {
          add: '/mdc/mdcDowntime/add',
          edit: '/mdc/mdcDowntime/edit',
          getDowntimeDescriptionListByDowntimeType: '/mdc/mdcDowntimeReason/downtimeReasonList'
        }
      }
export default {
  name: 'EquipmentStandbyShutdownModal',
  components: { SelectDeviceDrawer, Calendar },
  props: {},
  data() {
    return {
      title: '',
      visible: false,
      value: '',
      model: {},
      equipmentList: [],
      downtimeDescriptionList: [],
      labelColLong: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperColLong: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      spinning: false,
      disableSelectDevice: false,
      validatorRules: {
        equipmentIds: [
          { required: true, message: '请选择设备', trigger: 'change' }
        ],
        downtimeType: [
          { required: true, message: '请选择停机类型' }
        ],
        reasonId: [
          { required: true, message: '请选择停机原因' }
        ],
        theDate: [
          { required: true, message: '请选择停机日期' }
        ],
        downLong: [
          { required: true, message: '请输入停机时长(min)' }
        ]
      },
      url: {
        add: '/mdc/mdcDowntime/add',
        edit: '/mdc/mdcDowntime/edit',
        getDowntimeDescriptionListByDowntimeType: '/mdc/mdcDowntimeReason/downtimeReasonList'
      },
      shiData: [],
      sendDte: []
    }
  },
  methods: {
    add() {
      this.resetSelect()
      this.edit({
        downtimeType: 0
      })
    },
    methods: {
      add() {
        this.edit({
          downtimeType: 0

    edit(record) {
      this.model = Object.assign({}, record, { equipmentIds: record.equipmentId })
      this.getDowntimeDescriptionListByApi()
      if (this.model.downtimeType === null) {
        delete this.model.downtimeType
        delete this.model.reasonId
      }
      this.visible = true
    },

    // 停机类型值发生改变时触发清空停机原因并重新获取对应停机类型的停机原因列表
    handleDowntimeTypeChange() {
      if (this.model.reasonId) delete this.model.reasonId
      this.removeValidate()
      this.getDowntimeDescriptionListByApi()
    },

    // 调用接口获取停机原因列表
    getDowntimeDescriptionListByApi() {
      const that = this
      this.downtimeDescriptionList = []
      this.spinning = true
      getAction(this.url.getDowntimeDescriptionListByDowntimeType, { downtimeType: this.model.downtimeType })
        .then(res => {
          if (res.success) that.downtimeDescriptionList = res.result
        })
      },
        .finally(() => {
          that.spinning = false
        })
    },

      edit(record) {
        this.model = Object.assign({}, record, { equipmentIds: record.equipmentId })
        this.getDowntimeDescriptionListByApi()
        if (this.model.downtimeType === null) {
          delete this.model.downtimeType
          delete this.model.reasonId
        }
        this.visible = true
      },

      // 停机类型值发生改变时触发清空停机原因并重新获取对应停机类型的停机原因列表
      handleDowntimeTypeChange() {
        if (this.model.reasonId) delete this.model.reasonId
        this.removeValidate()
        this.getDowntimeDescriptionListByApi()
      },

      // 调用接口获取停机原因列表
      getDowntimeDescriptionListByApi() {
        const that = this
        this.downtimeDescriptionList = []
        this.spinning = true
        getAction(this.url.getDowntimeDescriptionListByDowntimeType, { downtimeType: this.model.downtimeType })
          .then(res => {
            if (res.success) that.downtimeDescriptionList = res.result
          })
          .finally(() => {
            that.spinning = false
          })
      },

      handleOk() {
        const that = this
        // 触发表单验证
        console.log('model', this.model)
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = that.spinning = true
            let url
            if (!that.model.id) {
              url = that.url.add
            } else {
              url = that.url.edit
            }
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = that.spinning = true
          let url
          if (!that.model.id) {
            url = that.url.add
          } else {
            url = that.url.edit
          }
          that.model.dateList = this.sendDte
          if (that.model.dateList && that.model.dateList.length > 0) {
            postAction(url, that.model)
              .then((res) => {
                if (res.success) {
@@ -205,41 +222,181 @@
                that.confirmLoading = that.spinning = false
              })
          } else {
            return false
            that.confirmLoading = false
            that.$notification.warning({
              message: '消息',
              description: '请选择生效时间!'
            })
          }
        })
      },
        }
      })
    },

      deviceSearch() {
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.model.equipmentIds ? this.model.equipmentIds.split(',') : []
      },
    deviceSearch() {
      this.$refs.selectDeviceDrawer.visible = true
      this.$refs.selectDeviceDrawer.selectedRowKeys = []
      this.$refs.selectDeviceDrawer.selectedRows = []
      this.$refs.selectDeviceDrawer.checkedKeys = this.model.equipmentIds ? this.model.equipmentIds.split(',') : []
    },

      /**
       * 选择已有设备后点击确定时触发
       * @param data 已选择的设备
       */
      selectOK(data) {
        this.$set(this.model, 'equipmentIds', data.join(','))
        if (this.model.equipmentIds) this.$refs.form.clearValidate('equipmentIds')
      },
    /**
     * 选择已有设备后点击确定时触发
     * @param data 已选择的设备
     */
    selectOK(data) {
      this.$set(this.model, 'equipmentIds', data.join(','))
      if (this.model.equipmentIds) this.$refs.form.clearValidate('equipmentIds')
    },

      handleCancel() {
        this.visible = false
        this.removeValidate()
      },

      // 关闭弹窗时清楚表单校验
      removeValidate() {
        if (this.$refs.form) this.$refs.form.clearValidate()
    handleCancel() {
      this.visible = false
      this.removeValidate()
    },
    // 关闭弹窗时清楚表单校验
    removeValidate() {
      if (this.$refs.form) this.$refs.form.clearValidate()
    },
    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) {//选中日期
      let existDate = this.selectDate
      let isExist = true
      for (var i = 0; i < existDate.length; i++) {
        if (existDate[i].date === today) {
          this.selectDate.splice(i, 1)
          this.shiData.splice(i, 1)
          this.sendDte.splice(i, 1)
          isExist = false
        }
      }
      if (isExist) {//当前日期存在移除
        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)
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .ant-modal-close {
  color: #1191b0;
  font-size: 24px;
}

/deep/ .ant-modal-close-x {
  font-size: 24px;
}

.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** 主表单行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.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: #ffffff;
  background-color: blue;
}

</style>