laws_weilai/jero-web/src/views/projectManagement/components/batchUpdateDeadline.vue

<template>
  <a-modal
    :title="$t('batchUpdateDeadline')"
    :width="500"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="visible = false"
  >
    <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
      <a-row :gutter="24">
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
              <span class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('Deadline')">{{$t('Deadline')}}</span>
            </div>
            <a-form-model-item class="itemModel" :prop="'deadline'">
              <a-date-picker class="box-input"
                             :placeholder="$t('PleaseSelect')+$t('Deadline')"
                             :getCalendarContainer="(trigger) => trigger.parentNode"
                             format="YYYY-MM-DD"
                             v-model="formInline.deadline"
                             style="width: 100%"/>
            </a-form-model-item>
          </div>
        </a-col>

      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { postAction, putAction, getAction } from '@/api/manage'

  export default {
    name: 'batchUpdateDeadline',
    data() {
      return {
        visible: false,
        confirmLoading: false,
        formInline: {},
        rules: {
          deadline: [
            {
              required: true,
              message: this.$t('Deadline') + this.$t('cannotEmpty'),
              trigger: 'change'
            }
          ]
        },
        idList: []
      }
    },
    mounted() {
    },
    methods: {
      handleOk() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let query = {
              ids: this.idList.join(','),
              deadline: moment(this.formInline.deadline).format('YYYY-MM-DD HH:mm:ss')
            }
            this.confirmLoading = true
            postAction('/params/collectManifest/batchEditDeadline', query).then((res) => {
              if (res.success) {
                this.visible = false
                this.confirmLoading = false
                this.$message.success(this.$t('OperationSuccessful'))
                this.$emit('batchUpdateDeadlineForm')
              } else {
                this.$message.warning(this.$t('operationFailed'))
                this.confirmLoading = false
              }
            })
          }
        })
      },
      getData(data) {
        this.idList = []
        if (data && data.length > 0) {
          data.forEach(res => {
            this.idList.push(res.id)
          })
          this.visible = true
          this.formInline = {}
        } else {
          this.$message.warning(this.$t('selectLeastOne'))
        }
      }
    }
  }
</script>


<style>
  .formAdd .ant-form-item-label {
    width: 130px;
  }

  .formAdd .ant-form-item-control-wrapper {
    display: inline-block;
    width: 100%;
  }

  /*.formAdd .ant-form-item {*/
  /*  margin-bottom: 20px;*/
  /*}*/

  .itemModel .ant-form-item-control-wrapper {
    width: 100%;
  }

  .box-input .ant-select-selection--single {
    height: 38px;
  }

  .box-input .ant-select-selection--multiple {
    height: 38px;
  }

  .box-input .ant-select-selection__rendered {
    line-height: 38px;
    height: 38px;
  }

  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
    margin-top: 6px;
  }

  .box-input .ant-calendar-picker {
    line-height: 38px;
    height: 38px;
  }

  .box-input .ant-calendar-picker-input {
    height: 38px;
  }

  .box-input .ant-input-number-input-wrap {
    line-height: 38px;
    height: 38px;
  }

  .box-input .ant-calendar-picker-input {
    padding: 4px 30px 4px 11px;
  }
</style>
<style scoped>
  .box-title-text {
    line-height: 1.4;
    display: flex;
  }

  .title-text {
    width: 104px;
    text-align: right;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    margin-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 42px;
    line-height: 42px;
  }

  .box-input {
    display: inline-block;
    height: 38px;
    width: 100%;
  }

  .itemModel {
    width: calc(100% - 130px);
    display: inline-block;
    margin-top: 2px;
  }

  .title-text-text {
    margin-top: 9px;
  }

  .formAdd {
    margin-bottom: 40px;
  }
  .Required{
     color: red;
  }
</style>