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"
            @change="usrTypeChange"
        >
          <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']&& model1.userInfo.usrType === USR_TYPE['1'].value"
          :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'] && false"
      >
        <SingleDropList
            :style="{
                marginLeft: '20rpx'
              }"
            :defaultValue="model1.userInfo.contentId"
            :src="conferenceHall"
            placeholder="请选择会场"
            @onChange="conferenceSelect"
        >
        </SingleDropList>
      </u-form-item>
      <u-form-item
          label="是否参加主题研讨"
          prop="userInfo.themeFlag"
          borderBottom
          v-if="rules['userInfo.themeFlag']"
          :class="{
                'require': rules['userInfo.themeFlag'].required
              }"
      >
        <u-radio-group
            v-model="model1.userInfo.themeFlag"
            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.themeId"
          borderBottom
          :class="{
                'require': rules['userInfo.themeId'].required
              }"
          v-if="rules['userInfo.themeId'] && model1.userInfo.themeFlag === '0' && model1.userInfo.usrType === USR_TYPE['2'].value"
      >
        <SingleDropList
            :style="{
                marginLeft: '20rpx'
              }"
            :defaultValue="model1.userInfo.themeId"
            :src="themes"
            placeholder="请选择主题"
            @onChange="themesSelect"
        >
        </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"
              :key="way.value"
              :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']&& model1.userInfo.wayComing!=TFC_TYPE['3'].value"
          :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"
              :key="way.value"
              :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'] && model1.userInfo.wayBack!=TFC_TYPE['3'].value"
          :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="请输入备注"
            v-model="model1.userInfo.remark"
        ></u--textarea>
      </u-form-item>
      <u-form-item
          label="随行人员名单"
      >
        <u-icon name="plus-circle-fill" color="#2979ff" size="28" @click="addFollower" style="margin-left: auto">新增
        </u-icon>
      </u-form-item>
      <view>
        <u-form-item
            prop="userInfo.follows"
            class="follower-item"
        >
          <view v-for="(item, index) in model1.userInfo.follows"
                :key="index"
          >
            <view style="display: flex;align-items: center;justify-content: flex-start;">
              {{ `随行人员${index + 1}` }}
              <u-icon name="minus-circle-fill" color="red" size="28" @click="()=>minusFollower(index)"
                      style="margin-left: auto">
              </u-icon>
            </view>
            <u-form-item
                label="姓名"
                prop="item.usrName"
                class="require"
            >
              <u--input
                  placeholder="输入姓名"
                  v-model="item.usrName"
                  @change="followsValidate"
                  @blur="followsValidate"
                  border="none"
              ></u--input>
            </u-form-item>
            <view
                v-if="followErrors[index] && followErrors[index].usrName"
                style="font-size: 12px;line-height: 12px;color: #f56c6c;">
              请填写姓名
            </view>
            <u-form-item
                label="单位职务"
                prop="item.usrLevel"
                class="require"
            >
              <u--input
                  placeholder="输入单位职务"
                  @change="followsValidate"
                  @blur="followsValidate"
                  v-model="item.usrLevel"
                  border="none"
              ></u--input>
            </u-form-item>
            <view
                v-if="followErrors[index] && followErrors[index].usrLevel"
                style="font-size: 12px;line-height: 12px;color: #f56c6c;">请填写单位职务
            </view>
            <u-form-item
                label="联系电话"
                prop="item.tel"
                border="none"
                class="require"
            >
              <u--input
                  placeholder="输入联系电话"
                  border="none"
                  type="number"
                  maxlength="11"
                  @change="followsValidate"
                  @blur="followsValidate"
                  v-model="item.tel"
              ></u--input>
            </u-form-item>
            <view
                v-if="followErrors[index] && followErrors[index].tel"
                style="font-size: 12px;line-height: 12px;color: #f56c6c;">请填写正确的手机号
            </view>
            <u-line margin="20rpx 0" color="#d6d7d9"></u-line>
          </view>
        </u-form-item>
        <view
            style="color: #fb0000c7;margin-top: 10rpx;font-size: 24rpx"
        >
          * 温馨提示：请同步填写随行人员信息。
        </view>

      </view>
    </u--form>
    <slot name="footer"></slot>
    <u-button
        type="primary"
        text="提交"
        style="margin-top: 20px;"
        :disabled="loading"
        :loading="loading"
        loadingText="正在提交..."
        @click="onSubmit"
    >
    </u-button>
  </view>
</template>

<script>

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

export default {
  computed: {
    USR_TYPE() {
      return USR_TYPE;
    },
    TFC_TYPE() {
      return TFC_TYPE;
    },
  },
  components: {
    SingleDropList,
  },
  props: {
    rules: {},
    onSubmitHandle: {
      type: Function,
      default: function () {},
    },
    mode: {
      type: String,
      default: 'add',
    },
    registInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    registInfo: {
      handler(newVal) {
        if (newVal) {
          this.model1.userInfo = newVal;
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      USR_TYPE_LIST,
      loading: false,
      comLabel: '',
      tfcDic: [],
      backLabel: '',
      followErrors: {},
      model1: {
        userInfo: {
          usrName: '',
          conferenceFlag: '0',
          usrType: '1',
          follows: [],
        },
      },
      conferenceHall: [],
      themes: [],
    };
  },
  created() {
    this.initUser();
  },
  onLoad() {

  },
  onReady() {
    this.setFormRules();
  },
  methods: {
    followsValidate(index) {
      debugger
      this.$refs.uForm.validateField('userInfo.follows');
    },
    initUser() {
      const user = getUserInfo();
      if (user) {
        this.model1.userInfo.tel = user.tel;
      }
      this.init();
    },
    setFormRules() {
      const that = this;
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      const rules = {
        'userInfo.follows': [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              debugger
              const followMsg = {};
              value.forEach((item, index) => {
                const msgs = {};
                if (!item.usrName) {
                  msgs.usrName = '姓名不能为空';
                }
                if (!uni.$u.test.mobile(item.tel)) {
                  msgs.tel = '手机号码不正确';
                }
                if (!item.usrLevel) {
                  msgs.usrLevel = '单位职务不能为空';
                }
                if (Object.keys(msgs).length > 0) {
                  followMsg[index] = msgs;
                }
              });
              that.followErrors = followMsg;
              return Object.keys(followMsg).length < 1;
            },
            message: ' ',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          },
        ],
        ...this.rules,
      };
      this.$refs.uForm.setRules(rules);
    },
    getImageUrl,
    addFollower() {
      this.model1.userInfo.follows.push({
        usrName: '',
        tel: '',
      });
    },
    minusFollower(index) {
      this.removeItemAtIndex(this.model1.userInfo.follows, index);
    },
    removeItemAtIndex(array, index) {
      array.splice(index, 1);
    },
    conferenceSelect(item) {
      this.model1.userInfo.contentId = item.value;
      this.$refs.uForm.clearValidate('userInfo.contentId');
    },
    themesSelect(item) {
      this.model1.userInfo.themeId = item.value;
      this.$refs.uForm.clearValidate('userInfo.themeId');
    },
    validateUsername(rule, value, callback) {
      console.log(value);
      // 自定义验证规则，例如用户名必须包含"uview"
      if (value.indexOf('uview') === -1) {
        // 验证不通过，调用callback并传入错误信息
        callback(new Error('用户名必须包含"uview"'));
      } else {
        // 验证通过，调用callback并不传入参数或者传入null
        callback();
      }
    },
    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: themedCode,
        rows: themeData,
      } = await fetchContentInfo({
        pageNum: 1,
        pageSize: 99,
        contentType: CONTENT_TYPE.theme,
      });
      this.themes = themeData.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,
          };
        });
        if (this.mode !== FORM_MOD.modify) {
          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;
      if (e == 3) {
        this.model1.userInfo.comInfo = '无';
      }
    },
    wayBackChange(e) {
      this.backLabel = TFC_INFO[e].name;
      if (e == 3) {
        this.model1.userInfo.backInfo = '无';
      }
    },
    restForm() {
      this.model1 = {
        userInfo: {
          usrName: '',
          conferenceFlag: '0',
          usrType: '1',
          follows: [],
        },
      };
      const user = getUserInfo();
      if (user) {
        this.model1.userInfo.usrName = user.usrName;
        this.model1.userInfo.tel = user.tel;
      }
    },
    clearValidate() {
      this.$refs.uForm.clearValidate();
    },
    usrTypeChange(val) {
      if (val === '2') {
        this.model1.userInfo.conferenceFlag = '3';
        return;
      }
      this.model1.userInfo.conferenceFlag = '0';
      this.$refs.uForm.setRules(this.rules);
    },
  },
};
</script>