traffic-eff-app/components/RegistForm/index.vue

<template>
  <view class="register-form-container">
    <u--form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="uForm"
        @submit="onSubmit"
    >
      <u-form-item
          label="姓名"
          v-if="rules['userInfo.usrName']"
          prop="userInfo.usrName"
          borderBottom
          :class="{
                'require': rules['userInfo.usrName'].required
              }"
      >
        <u--input
            placeholder="输入姓名"
            v-model="model1.userInfo.usrName"
            border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="单位名称"
          prop="userInfo.orgUnitName"
          v-if="rules['userInfo.orgUnitName']"
          borderBottom
          :class="{
                'require': rules['userInfo.orgUnitName'].required
              }"
      >
        <u--input
            placeholder="输入单位名称"
            v-model="model1.userInfo.orgUnitName"
            border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="职务"
          prop="userInfo.uniLevel"
          v-if="rules['userInfo.uniLevel']"
          borderBottom
          :class="{
                'require': rules['userInfo.uniLevel'].required
              }"
      >
        <u--input
            placeholder="输入职务"
            v-model="model1.userInfo.uniLevel"
            border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="联系电话"
          prop="userInfo.tel"
          borderBottom
          v-if="rules['userInfo.tel']"
          :class="{
                'require': rules['userInfo.tel'].required
              }"
      >
        <u--input
            placeholder="输入联系电话"
            border="none"
            type="number"
            maxlength="11"
            v-model="model1.userInfo.tel"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="邮箱"
          prop="userInfo.email"
          borderBottom
          v-if="rules['userInfo.email']"
          :class="{
                'require': rules['userInfo.email'].required
              }"
      >
        <u--input
            placeholder="输入邮箱"
            border="none"
            v-model="model1.userInfo.email"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="人员类型"
          prop="userInfo.usrType"
          borderBottom
          v-if="rules['userInfo.usrType']"
          :class="{
                'require': rules['userInfo.usrType'].required
              }"
      >
        <u-radio-group
            v-model="model1.userInfo.usrType"
            placement="row"
        >
          <u-radio
              :style="{
                  marginRight: '20rpx'
                }"
              v-for="(item, index) in USR_TYPE_LIST"
              :key="index"
              :label="item.name"
              :name="item.value"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item
          label="是否参加现场调研"
          prop="userInfo.conferenceFlag"
          borderBottom
          v-if="rules['userInfo.conferenceFlag']"
          :class="{
                'require': rules['userInfo.conferenceFlag'].required
              }"
      >
        <u-radio-group
            v-model="model1.userInfo.conferenceFlag"
            placement="row"
        >
          <u-radio
              :style="{
                  marginRight: '20rpx'
                }"
              label="是"
              name="0"
          >
          </u-radio>
          <u-radio
              :style="{
                  marginRight: '20rpx'
                }"
              label="否"
              name="1"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item
          label="调研会场"
          prop="userInfo.contentId"
          borderBottom
          :class="{
                'require': rules['userInfo.contentId'].required
              }"
          v-if="rules['userInfo.contentId'] && model1.userInfo.conferenceFlag === '0'"
      >
        <SingleDropList
            :style="{
                marginLeft: '20rpx'
              }"
            :defaultValue="model1.userInfo.contentId"
            :src="conferenceHall"
            placeholder="请选择会场"
            @onChange="conferenceSelect"
        >
        </SingleDropList>
      </u-form-item>
      <u-form-item
          label="来程交通方式"
          prop="userInfo.wayComing"
          borderBottom
          v-if="rules['userInfo.wayComing']"
          :class="{
                'require': rules['userInfo.wayComing'].required
              }"
      >
        <u-radio-group
            v-model="model1.userInfo.wayComing"
            placement="row"
            @change="waycomChange"
        >
          <u-radio
              v-for="way in tfcDic"
              :style="{
                  marginRight: '20rpx'
                }"
              :label="way.name"
              :name="way.value"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item
          :label="comLabel"
          prop="userInfo.comInfo"
          borderBottom
          v-if="rules['userInfo.comInfo']"
          :class="{
                'require': rules['userInfo.comInfo'].required
              }"
      >
        <u--input
            :placeholder="`输入${comLabel}`"
            border="none"
            v-model="model1.userInfo.comInfo"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="回程交通方式"
          prop="userInfo.wayBack"
          borderBottom
          v-if="rules['userInfo.wayBack']"
          :class="{
                'require': rules['userInfo.wayBack'].required
              }"
      >
        <u-radio-group
            v-model="model1.userInfo.wayBack"
            placement="row"
            @change="wayBackChange"
        >
          <u-radio
              v-for="way in tfcDic"
              :style="{
                  marginRight: '20rpx'
                }"
              :label="way.name"
              :name="way.value"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item
          :label="backLabel"
          prop="userInfo.backInfo"
          borderBottom
          v-if="rules['userInfo.backInfo']"
          :class="{
                'require': rules['userInfo.backInfo'].required
              }"
      >
        <u--input
            :placeholder="`输入${backLabel}`"
            border="none"
            v-model="model1.userInfo.backInfo"
        ></u--input>
      </u-form-item>
      <u-form-item
          label="备注"
          prop="userInfo.remark"
          borderBottom
          ref="item3"
      >
        <u--textarea
            placeholder="不低于3个字"
            v-model="model1.userInfo.remark"
        ></u--textarea>
      </u-form-item>
    </u--form>
    <u-button
        type="primary"
        text="提交"
        :disabled="loading"
        :loading="loading"
        loadingText="正在提交..."
        @click="onSubmit"
    >
    </u-button>
  </view>
</template>

<script>

import { fetchContentInfo, getDicts } from '@/common/api';
import { CONTENT_TYPE, TFC_INFO, USR_TYPE_LIST } from '@/common/EnumConst';
import SingleDropList from '@/components/SingleDropList/index.vue';
import { getImageUrl, getUserInfo } from '@/util';

export default {
  components: {
    SingleDropList,
  },
  props: {
    rules: {},
    onSubmitHandle: {
      type: Function,
      default: function () {},
    },
  },
  data() {
    return {
      USR_TYPE_LIST,
      loading: false,
      comLabel: '',
      tfcDic: [],
      backLabel: '',
      model1: {
        userInfo: {
          usrName: '',
          conferenceFlag: '1',
        },
      },
      conferenceHall: [],
    };
  },
  created() {

  },
  onLoad() {

  },
  onReady() {
    this.setFormRules();
  },

  methods: {
    setFormRules() {
      const user = getUserInfo();
      if (user) {
        this.model1.userInfo.usrName = user.usrName;
        this.model1.userInfo.tel = user.tel;
      }
      this.init();
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules);
    },
    getImageUrl,
    conferenceSelect(item) {
      this.model1.userInfo.contentId = item.value;
      this.$refs.uForm.clearValidate('userInfo.contentId');
    },
    async init() {
      const {
        code: conferenceCode,
        rows: conferenceData,
      } = await fetchContentInfo({
        pageNum: 1,
        pageSize: 99,
        contentType: CONTENT_TYPE.conference,
        title: this.keyword,
      });
      this.conferenceHall = conferenceData.map(item => {
        return {
          name: item.title,
          value: item.id,
        };
      });
      const {
        code,
        data,
      } = await getDicts('tfc_type');
      if (data) {
        this.tfcDic = data.map(item => {
          return {
            name: item.dictLabel,
            value: item.dictValue,
          };
        });
        this.model1.userInfo.wayComing = data[0].dictValue;
        this.model1.userInfo.wayBack = data[0].dictValue;
        this.waycomChange(data[0].dictValue);
        this.wayBackChange(data[0].dictValue);
      }
    },
    onSubmit() {
      this.loading = true;
      this.$refs.uForm.validate().then((res) => {
        this.$emit('onSubmitHandle', this.model1.userInfo);
        this.loading = false;
      }).catch(errors => {
        console.error(errors)
        this.loading = false;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
    waycomChange(e) {
      this.comLabel = TFC_INFO[e].name;
    },
    wayBackChange(e) {
      this.backLabel = TFC_INFO[e].name;
    },
    restForm() {
      this.model1 = {
        userInfo: {
          usrName: '',
        },
      };
      const user = getUserInfo();
      if (user) {
        this.model1.userInfo.usrName = user.usrName;
        this.model1.userInfo.tel = user.tel;
      }
    },
    clearValidate() {
      this.$refs.uForm.clearValidate();
    },
  },
};
</script>