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

<template>
  <a-modal
    :title="$t('batSetting')"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    :confirm-loading="confirmLoading"
    @ok="editOk"
    @cancel="visible = false"
  >
    <a-spin :spinning="confirmLoading">
      <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('regulatoryEngineer')">{{$t('regulatoryEngineer')}}</span>
              </div>
              <a-form-model-item class="itemModel">
                <PersonnelSelection
                  :query="{db_field_name:'lawEngineer',db_field_txt:$t('regulatoryEngineer')}"
                  :personneQuery="formInline"
                  @change="PersonnelSelectionChange"
                  v-model="formInline.lawEngineerName"/>
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <div class="box-title-text">
              <div class="title-text">
                <span class="title-text-text" :title="$t('engineeringInterfacePerson')">{{$t('engineeringInterfacePerson')}}</span>
              </div>
              <a-form-model-item class="itemModel">
                <PersonnelSelection
                  :query="{db_field_name:'engineeringInterfacePerson',db_field_txt:$t('engineeringInterfacePerson')}"
                  :personneQuery="formInline"
                  @change="PersonnelSelectionChange"
                  v-model="formInline.engineeringInterfacePersonName"/>
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <div class="box-title-text">
              <div class="title-text">
                <span class="title-text-text" :title="$t('certifiedEngineer')">{{$t('certifiedEngineer')}}</span>
              </div>
              <a-form-model-item class="itemModel">
                <a-select allowClear
                          class="box-input"
                          v-model="formInline.certificationEngineer"
                          :placeholder="$t('certifiedEngineer')+$t('areaOfResponsibility')">
                  <a-select-option v-for="(item, key) in dictOptionsValue"
                                   :key="item.certificationEngineer"
                                   :value="item.certificationEngineer">
                      <span class="itemOption" :title=" item.certificationEngineerName ">
                             {{ item.certificationEngineerName }}
                      </span>
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import PersonnelSelection from '@/components/PersonnelSelection/index'
  import { getAction, postAction, downloadFile, putAction } from '@/api/manage'

  export default {
    name: 'personBatting',
    components: {
      PersonnelSelection
    },
    data() {
      return {
        confirmLoading: false,
        formInline: {},
        visible: false,
        rules: {},
        ids: '',
        dictOptionsValue: [],
        url: {
          queryCertificationEngineer: '/project/projectRelatedPersonnel/queryCertificationEngineer'
        }
      }
    },
    mounted() {
    },
    methods: {
      getData(ids) {
        this.visible = true
        this.ids = ids
        this.formInline = {}
        this.queryCertificationEngineer()
      },
      queryCertificationEngineer() {
        getAction(this.url.queryCertificationEngineer, { projectId: this.$route.query.id }).then((res) => {
          if (res.success) {
            this.dictOptionsValue = res.result
          } else {
            this.dictOptionsValue = []
          }
        })
      },
      PersonnelSelectionChange(value, id) {
        this.formInline[value] = id
        this.formInline = { ...this.formInline }
      },
      editOk() {
        let query = {
          ...this.formInline,
          ids: this.ids
        }
        this.confirmLoading = true
        postAction('/project/projectRelatedPersonnel/setBatch', query).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('OperationSuccessful'))
            this.visible = false
            this.confirmLoading = false
            this.$emit('personBattingTable')
          } else {
            this.$message.warning(this.$t('operationFailed'))
            this.confirmLoading = false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .box-title-text {
    line-height: 1.4;
    display: flex;
    /*align-items: center;*/
  }

  .title-text {
    width: 114px;
    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: 48px;
  }

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

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

  .Required {
    color: red;
    margin-right: 4px;
  }

  .title-text-text {
    margin-top: 9px;
  }
</style>