laws_weilai/jero-web/src/views/virtualAuthenticationList/components/batSetting.vue

<template>
  <a-modal
    :title="$t('batSetting')"
    :width="900"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model class="formAdd" v-model="formInline" :rules="rules" ref="ruleForm">
      <a-row :gutter="24">
        <a-col :span="12">
          <div class="box-title-text">
            <div class="title-text">
              <span class="title-text-text" :title="$t('areaOfResponsibility')">{{$t('areaOfResponsibility')}}</span>
            </div>
            <a-form-model-item class="itemModel-multi">
              <j-dict-select-tag class="box-input"
                                  v-model="formInline.dutyTerritory"
                                 @input="handleInput('dutyTerritory')"
                                  :placeholder="$t('PleaseSelect')+$t('areaOfResponsibility')"
                                  :type="'select'"
                                  :triggerChange="false" :dictCode="'duty_territory'"/>
              <!--              <j-dict-select-tag class="box-input" v-model="formInline.dutyTerritory"-->
              <!--                                 @input="handleInput('dutyTerritory')"-->
              <!--                                 :placeholder="$t('PleaseSelect')+$t('areaOfResponsibility')"-->
              <!--                                 :type="'select'"-->
              <!--                                 :triggerChange="false" dictCode="duty_territory"/>-->
            </a-form-model-item>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="box-title-text">
            <div class="title-text">
              <span class="title-text-text" :title="$t('Deliverables')">{{$t('Deliverables')}}</span>
            </div>
            <a-form-model-item class="itemModel-multi">
              <j-multi-select-tag class="box-input"
                                  v-model="formInline.deliverable"
                                  @input="handleInput('deliverable')"
                                  :placeholder="$t('PleaseSelect')+$t('Deliverables')"
                                  :type="'select'"
                                  :triggerChange="false"/>
              <!--              <j-dict-select-tag class="box-input" v-model="formInline.attestationType"-->
              <!--                                 @input="handleInput('attestationType')"-->
              <!--                                 :placeholder="$t('PleaseSelect')+$t('certificationType')"-->
              <!--                                 :type="'select'"-->
              <!--                                 :triggerChange="false" dictCode="attestation_type"/>-->
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { postAction } from '../../../api/manage'

export default {
  name: 'batSetting',
  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.handleOnTwo()
      } else {
        this.handleOkOne()
      }
    },
    handleOkOne() {
      let ids = JSON.parse(JSON.stringify(this.ids))
      let formInline = JSON.parse(JSON.stringify(this.formInline))
      Object.keys(formInline).forEach(res => {
        if (formInline[res] instanceof Array) {
          formInline[res] = formInline[res].join(',')
        }
      })
      let query = {
        ids: ids.join(','),
        ...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(res.message)
          this.confirmLoading = false
        }
      })
    },
    handleOnTwo() {
      let _this = this
      this.$confirm({
        content: _this.$t('areResponsibilityAreaInformationBatch'),
        onOk() {
          let ids = JSON.parse(JSON.stringify(_this.ids))
          let formInline = JSON.parse(JSON.stringify(_this.formInline))
          Object.keys(formInline).forEach(res => {
            if (formInline[res] instanceof Array) {
              formInline[res] = formInline[res].join(',')
            }
          })
          let query = {
            ids: ids.join(','),
            ...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(res.message)
              _this.confirmLoading = false
            }
          })
        }
      })
    },
    handleCancel() {
      this.formInline = {}
      this.visible = false
    },
    handleInput(value) {
      this.$nextTick(() => {
        this.formInline = { ...this.formInline }
        this.$refs.ruleForm.validateField([value])
      })
    },
  }
}
</script>

<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;
}

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

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