laws-sinotruk-client/src/views/workCenter/annualRevisionPlanActivelyReport/modules/ContactEnterSendTaskForm.vue

<template>
  <div>
    <a-form-model :model="formInline" :rules="rules" ref="ruleForm">
      <div class="form-flex-box">
        <!--  是否下发联络人  -->
        <div class="box-title-text form-flex-item flex-item-small">
          <div class="title-text">
            <span class="required">*</span>
            <span class="title-text-text" :title="$t('workCenter.revisionPlanActivelyReport.whetherToSendAContact')">
                  {{ $t('workCenter.revisionPlanActivelyReport.whetherToSendAContact') }}
                </span>
          </div>
          <a-form-model-item class="item-model" prop="distributeFlag">
            <a-radio-group v-model="formInline.distributeFlag">
              <a-radio value="1">
                {{ $t('yes') }}
              </a-radio>
              <a-radio value="0">
                {{ $t('not') }}
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </div>
        <!--  是否下发联络人选了是，选择联络人，不显示表格  -->
        <template v-if="formInline.distributeFlag === '1'">
          <!--  工作组/所联络人  -->
          <div class="box-title-text form-flex-item flex-item-long">
            <div class="title-text title-text-middle">
              <span class="required">*</span>
              <span class="title-text-text" :title="$t('workCenter.revisionPlanActivelyReport.workingGroupContactPerson')">
                  {{ $t('workCenter.revisionPlanActivelyReport.workingGroupContactPerson') }}
                </span>
            </div>
            <a-form-model-item class="item-model" prop="workGroupUser">
              <user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.revisionPlanActivelyReport.workingGroupContactPerson')"
                              v-model="formInline.workGroupUser"
                              :disabled="disabled"
                              filedName="workGroupUser"
                              @nameChange="userSelectNameChange"
                              :nameStr="formInline.workGroupUser_dictText"
                              type="checkbox" />
            </a-form-model-item>
          </div>
        </template>
        <!--  联络人主管级上一级领导  -->
        <div class="box-title-text form-flex-item flex-item-long">
          <div class="title-text title-text-long">
            <span class="required">*</span>
            <span class="title-text-text" :title="$t('workCenter.revisionPlanActivelyReport.contactSupervisorSuperiorLeader')">
                  {{ $t('workCenter.revisionPlanActivelyReport.contactSupervisorSuperiorLeader') }}
                </span>
          </div>
          <a-form-model-item class="item-model" prop="contactUserLeaderLeader">
            <user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.revisionPlanActivelyReport.contactSupervisorSuperiorLeader')"
                            v-model="formInline.contactUserLeaderLeader"
                            :disabled="disabled"
                            filedName="contactUserLeaderLeader"
                            @nameChange="userSelectNameChange"
                            :nameStr="formInline.contactUserLeaderLeader_dictText"
                            type="radio" />
          </a-form-model-item>
        </div>
      </div>
    </a-form-model>
    <!--  是否下发联络人选了否，显示表格  -->
    <div v-if="formInline.distributeFlag === '0'" class="change-base-info-wrapper">
      <only-table-form ref="tableRef"></only-table-form>
    </div>
  </div>
</template>

<script>
import UserSelection from '@/components/selection/UserSelection'
import OnlyTableForm from './OnlyTableForm'

export default {
  name: 'ContactEnterSendTaskForm',
  components: { OnlyTableForm, UserSelection },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    currentNode: {
      type: Number,
      required: false,
      default: 1
    }
  },
  data () {
    return {
      loading: false,
      formInline: {},
      rules: {
        // 是否下发联络人
        distributeFlag: [
          {
            required: true,
            message: this.$t('workCenter.revisionPlanActivelyReport.whetherToSendAContact') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ],
        // 工作组/所联络人
        workGroupUser: [
          {
            required: true,
            message: this.$t('workCenter.revisionPlanActivelyReport.workingGroupContactPerson') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ],
        // 联络人主管级上一级领导
        contactUserLeaderLeader: [
          {
            required: true,
            message: this.$t('workCenter.revisionPlanActivelyReport.contactSupervisorSuperiorLeader') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ]
      },
      modalType: '' // 是在新增还是在编辑，编辑的时候放正在编辑的下标
    }
  },
  methods: {
    // 选择用户得到用户名
    userSelectNameChange (value, fieldName) {
      this.formInline[fieldName + '_dictText'] = value
    },
    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
    initData (data) {
      // 给表单赋值
      if (data.dataList[0].distributeFlag + '' === '0') {
        // 不下发联络人
        this.formInline = { distributeFlag: data.dataList[0].distributeFlag }
        // 给表格赋值
        this.$nextTick(() => {
          this.$refs.tableRef.initData(data)
        })
      } else {
        // 下发联络人，没有表格
        this.formInline = {
          distributeFlag: data.dataList[0].distributeFlag,
          workGroupUserList: data.flowUser.workGroupUserList,
          contactUserLeaderLeader: data.flowUser.contactUserLeaderLeader
        }
      }
    },
    // 外层要获取数据
    getData () {
      // 把数据抛出
      const data = {}
      data.formInline = this.formInline
      data.dataSource = this.$refs.tableRef.dataSource
      return data
    },
    // 外层获取数据要过校验,返回false表示没有通过校验
    async getDataValidate () {
      console.log('------getDataValidate------')
      // 可能是表单，也可能是表格,表单校验一定要填，有是否下发联络人
      let data = {}// 返回的数据
      await this.$refs.ruleForm.validate(async result => {
        if (result) {
          if (this.$refs.tableRef) {
            // 存在表格说明是否下发联络人选择了否
            const tableData = this.$refs.tableRef.getDataValidate()
            if (tableData) {
              data.formInline = this.formInline
              data.dataSource = tableData.dataSource
            } else {
              data = false
            }
          } else {
            // 是否下发联络人选择了是
            data.formInline = this.formInline
          }
        } else {
          data = false
        }
      })
      return data
    }
  }
}
</script>

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

/deep/ .ant-form-item-children {
  width: 100%;
  display: inline-block;
}

.title-text-middle {
  width: 130px !important;
}
.title-text-long {
  width: 220px !important;
}

.flex-item-small {
  width: 300px !important;
}

.flex-item-long {
  width: calc((100% - 300px) / 2) !important;
}
</style>