qmx_page_admin/src/views/create-order/components/baseInfoModule.vue

<template>
  <!-- 基本信息 -->
  <el-form ref="form" :model="form" :rules="rules" label-width="126px" class="order-base-info-container">
    <el-form-item label="购买主体" :required="required.buySubject">
      <RadioGroup
        :value="form.buySubject"
        @input="onElInput($event, 'buySubject')"
        :options="conf.buySubjectOptions"
      />
    </el-form-item>
    <el-form-item label="公司名称" :required="companyRequired">
      <el-input
        :value="form.companyName"
        @input="onElInput($event, 'companyName')"
        placeholder="请输入完整的公司名称"
        size="medium"
        maxlength="50"
      ></el-input>
    </el-form-item>
    <el-row :gutter="2">
      <el-col :span="12">
        <el-form-item label="联系人姓名">
          <el-input
            :value="form.username"
            @input="onElInput($event, 'username')"
            placeholder="请输入联系人姓名"
            size="medium"
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系人手机号" :required="required.userTel">
          <el-input
            :value="form.userTel"
            @input="onElInput($event, 'userTel')"
            placeholder="请输入联系人手机号，非权益开通手机号"
            size="medium"
            maxlength="11"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="12">
        <el-form-item label="开通权益手机号" :required="required.accountTel">
        <el-input
          :value="form.accountTel"
          @input="onElInput($event, 'accountTel')"
          placeholder="请输入开通权益手机号"
          size="medium"
          maxlength="11"
        ></el-input>
      </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import RadioGroup from '@/views/create-order/components/product-info-submodule/RadioGroup'
import { buySubjectOptions } from '@/views/create-order/data/index.js'
import { selectorVModelMixin } from '@/utils/mixins/selector-v-model'
import { checkPhonePass } from '@/utils/utils'
import { phoneRegExp } from '@/utils/data'
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'OrderBaseInfo',
  mixins: [selectorVModelMixin],
  components: {
    RadioGroup
  },
  data() {
    return {
      conf: {
        buySubjectOptions,
      },
      required: {
        buySubject: true,
        userTel: true,
        accountTel: true,
      },
      // form: {
      //   buySubject: 1,
      //   companyName: '',
      //   username: '',
      //   userTel: '',
      //   accountTel: '',
      // },
    }
  },
  computed: {
    ...mapState({
      form: state => state.order.pageForm,
    }),
    requiredList() {
      return [
        {
          field: 'buySubject',
          message: '购买主体为必填项', // 错误提示文案
          rank: 1, // 提示优先级，值越小优先级越高
          required: this.required.buySubject,
        },
        {
          field: 'companyName',
          message: '公司名称为必填项', // 错误提示文案
          rank: 1, // 提示优先级，值越小优先级越高
          required: this.companyRequired,
        },
        {
          field: 'userTel',
          message: '联系人手机号为必填项', // 错误提示文案
          rank: 1, // 提示优先级，值越小优先级越高
          required: this.required.userTel,
          validator: () => {}
        },
        {
          field: 'accountTel',
          message: '开通权益手机号为必填项', // 错误提示文案
          rank: 1, // 提示优先级，值越小优先级越高
          required: this.required.accountTel,
        },
      ].filter(f => f.required)
    },
    rules() {
      const companyRequired = this.companyRequired

      return {
        companyName: [
          { required: companyRequired, message: '请输入公司名称', trigger: 'blur' },
          { required: companyRequired, message: '请输入公司名称', trigger: 'change' },
        ],
        userTel: [
          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          { required: true, message: '请输入联系人手机号', trigger: 'change' },
          { type: 'string', pattern: phoneRegExp, message: '手机号格式不正确', trigger: 'blur'}
        ],
        accountTel: [
          { required: true, message: '请输入开通权益手机号', trigger: 'blur' },
          { required: true, message: '请输入开通权益手机号', trigger: 'change' },
          { type: 'string', pattern: phoneRegExp, message: '手机号格式不正确', trigger: 'blur'}
        ]
      }
    },
    companyRequired() {
      return this.form.buySubject === 2
    },
  },
  watch: {
    companyRequired() {
      setTimeout(() => {
        this.$refs.form.clearValidate()
      }, 0)
    }
  },
  methods: {
    ...mapMutations('order', [
      'setPageForm',
      'setOrderProductInfoList',
      'addOrderProductItem',
    ]),
    ...mapActions('order', [
      'getProductList'
    ]),
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    getState() {
      return Object.assign({}, this.form)
    },
    setState(t) {
      if (!t) return
      Object.assign(this.form, t)
    },
    phoneCheck(text) {
      return checkPhonePass(text)
    },
    onElInput(e, key) {
      this.onInputChange(e, key)
      this.setPageForm({
        key,
        data: e
      })
    },
    onInputChange(e, key) {
      if (key === 'buySubject') {
        // 清空产品列表
        this.setOrderProductInfoList([])
        this.addOrderProductItem()
        this.$nextTick(() => {
          // 重新获取可选产品列表
          this.getProductList()
        })
      } else if (key === 'accountTel') {
        // 清空产品列表
        this.setOrderProductInfoList([])
        this.addOrderProductItem()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>