laws-sinotruk-client/src/views/workCenter/enterpriseStandardRecheck/modules/StandardizationInitBaseInfo.vue

<template>
  <a-form-model :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
    <div class="collapsible-panel-form">
      <div class="form-flex-box collapsible-panel-form-content collapsible-content-no-head">
        <!--  企标编号  -->
        <div class="box-title-text form-flex-item">
          <div class="title-text">
            <span class="required">*</span>
            <span class="title-text-text" :title="$t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum')">
                  {{ $t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum') }}
                </span>
          </div>
          <a-form-model-item class="item-model" prop="standardNumber">
            <enterprise-recheck-plan-selection
                                :disabled="disabled"
                                type="radio"
                                v-model="formInline.standardNumber"
                                :standardNumber="formInline.standardNumber"
                                @listChange="listChange" />
          </a-form-model-item>
        </div>
        <!--  企标名称  -->
        <div class="box-title-text form-flex-item">
          <div class="title-text">
                  <span class="title-text-text" :title="$t('workCenter.enterpriseInitChangePlan.enterpriseStandardName')">
                  {{ $t('workCenter.enterpriseInitChangePlan.enterpriseStandardName') }}
                </span>
          </div>
          <a-form-model-item class="item-model" prop="standardName">
            <a-input class="box-input"
                     v-model="formInline.standardName"
                     :maxLength="50"
                     disabled
                     @change="event => event.target.value = event.target.value.trim()"
                     :placeholder="$t('pleaseEnter')+$t('workCenter.enterpriseInitChangePlan.enterpriseStandardName')" />
          </a-form-model-item>
        </div>
        <!--  联络人  -->
        <div class="box-title-text form-flex-item">
          <div class="title-text">
            <span class="title-text-text" :title="$t('workCenter.revisionPlanActivelyReport.contactPerson')">
                  {{ $t('workCenter.revisionPlanActivelyReport.contactPerson') }}
                </span>
          </div>
          <a-form-model-item class="item-model" prop="contactPerson">
            <user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.revisionPlanActivelyReport.contactPerson')"
                            v-model="formInline.contactPerson"
                            :disabled="disabled"
                            filedName="contactPerson"
                            @nameChange="userSelectNameChange"
                            :nameStr="formInline.contactPerson_dictText"
                            type="radio" />
          </a-form-model-item>
        </div>
      </div>
    </div>
  </a-form-model>
</template>

<script>
import { StandardSource } from '@/enums/commonEnums'
import UserSelection from '@/components/selection/UserSelection'
import EnterpriseRecheckPlanSelection from '@/components/selection/EnterpriseRecheckPlanSelection'

export default {
  name: 'StandardizationInitBaseInfo',
  components: { EnterpriseRecheckPlanSelection, UserSelection },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      StandardSource,
      formInline: {},
      rules: {
        // 企标编号
        recheckPlanId: [
          {
            required: true,
            message: this.$t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ],
        // 联络人
        contactPerson: [
          {
            required: true,
            message: this.$t('workCenter.revisionPlanActivelyReport.contactPerson') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
    initData (data) {
      // 给表单赋值
      this.formInline = data
    },
    // 外层要获取数据
    getData () {
      // 把数据抛出，在线编辑不知道要不要抛
      const data = {}
      data.formInline = this.formInline
      return data
    },
    // 外层获取数据要过校验,返回false表示没有通过校验
    async getDataValidate () {
      let data = {}
      await this.$refs.ruleForm.validate(valid => {
        if (valid) {
          data.formInline = this.formInline
        } else {
          data = false
        }
      })
      return data
    },
    // 选完企标编号了，需要回显内容,返回流程名称
    listChange (value) {
      console.log(value)
      // 企标名称
      this.formInline.standardName = value[0].standardName
      // 主起草人赋值给联络人
      this.formInline.contactPerson = value[0].mainDraftingUser
      this.formInline.contactPerson_dictText = value[0].mainDraftingUser_dictText
      this.$emit('processNameChange', (this.formInline.standardNumber || '') + '-' + (this.formInline.standardName || '') + '-' + '复审')
    },
    // 选择用户得到用户名
    userSelectNameChange (value, fieldName) {
      this.formInline[fieldName + '_dictText'] = value
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';

.collapsible-content-no-head {
  border-top: 1px solid #E5E6EB;
  border-radius: 8px 8px 8px 8px;
}
</style>