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

<template>
  <a-modal
    :title="$t('batSetting')"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <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="title-text-text"
                            :title="$t('CertificationProgress')">{{$t('CertificationProgress')}}</span>
            </div>
            <a-form-model-item class="itemModel">
              <j-dict-select-tag class="box-input" v-model="formInline.certificationProgress"
                                 @input="handleInput('certificationProgress')"
                                 :placeholder="$t('PleaseSelect')+$t('CertificationProgress')"
                                 :type="'select'"
                                 :triggerChange="false" :dictCode="'certification_progress'"/>
            </a-form-model-item>
          </div>
        </a-col>
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
              <span class="title-text-text"
                    :title="$t('CurrentStatus')">{{$t('CurrentStatus')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="conditionAssessment">
              <a-select
                v-model="formInline.conditionAssessment"
                :placeholder="$t('PleaseSelect')+$t('CurrentProjectStatusEvaluation')">
                <a-select-option :value="'1'">
                             <span style="display: inline-block;width: 100%">
                                    {{ $t('red') }}
                             </span>
                </a-select-option>
                <a-select-option :value="'2'">
                             <span style="display: inline-block;width: 100%">
                                    {{ $t('yellow') }}
                             </span>
                </a-select-option>
                <a-select-option :value="'3'">
                             <span style="display: inline-block;width: 100%">
                                    {{ $t('green') }}
                             </span>
                </a-select-option>

                <a-select-option :value="'4'" disabled>
                               <span style="display: inline-block;width: 100%">
                                     {{ $t('blue') }}
                                </span>
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

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

  export default {
    name: 'taskBatSetting',
    props: ['url'],
    data() {
      return {
        visible: false,
        confirmLoading: false,
        formInline: {},
        rules: {},
        ids: []
      }
    },
    mounted() {
    },
    methods: {
      edit(data) {
        this.visible = true
        this.$nextTick(() => {
          this.ids = data || []
          this.formInline = {}
        })
      },
      handleOk() {
        if (this.formInline.dutyTerritory) {
          this.handleOkTwo()
        } else {
          this.handleOkOne()
        }
      },
      handleOkOne() {
        let ids = JSON.parse(JSON.stringify(this.ids))
        let query = {
          ids: ids.join(','),
          ...this.formInline
        }
        this.confirmLoading = true
        postAction(this.url.setBatch, query).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('OperationSuccessful'))
            this.visible = false
            this.confirmLoading = false
            this.$emit('batSettingList')
          } else {
            this.$message.warning(this.$t('operationFailed'))
            this.confirmLoading = false
          }
        })
      },
      handleOkTwo() {
        let _this = this
        this.$confirm({
          content: _this.$t('areResponsibilityAreaInformationBatch'),
          onOk() {
            let ids = JSON.parse(JSON.stringify(_this.ids))
            let query = {
              ids: ids.join(','),
              ..._this.formInline
            }
            _this.confirmLoading = true
            postAction(_this.url.setBatch, query).then((res) => {
              if (res.success) {
                _this.$message.success(_this.$t('OperationSuccessful'))
                _this.visible = false
                _this.confirmLoading = false
                _this.$emit('batSettingList')
              } else {
                _this.$message.warning(_this.$t('operationFailed'))
                _this.confirmLoading = false
              }
            })
          }
        })
      },
      handleCancel() {
        this.formInline = {}
        this.visible = false
      },
      handleInput(value) {
        this.$nextTick(() => {
          this.formInline = { ...this.formInline }
          this.$refs.ruleForm.validateField([value])
        })
      },
    }
  }
</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: 84px;
    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;
  }
</style>