exhibition_service_admin/src/views/user/form.vue

<script lang="ts">
import Vue from 'vue'
import { getFormInfo, submitForm, getLocationList, getJobList } from '@/api/form'
import { getExpoInfo } from '@/api/expo'
import countryCode from '@/lib/countryCode.json'
import login from '@/views/login/index.vue'
export default Vue.extend({
  name: 'Index',
  data() {
    return {
      from_data: [],
      expo_key: '',
      expo_id: '',
      countryCode,
      locationList: [],
      locationPage: 0,
      locationTotal: 1,
      provinceL: [],
      cityL: [],
      jobList: [],
      jobPage: 0,
      jobTotal: 1,
      jobL: [],
      loading: false,
      isOk: false
    }
  },
  computed: {
    user() { return this.$store.state.user.user },
    token() { return this.$store.state.user.token }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.expo_key = this.$route.params.url
      if (this.token) {
        getExpoInfo(this.expo_key).then(res => {
          this.from_data = res.data
          this.expo_id = res.data.id
        }).catch(err => {
          console.log('err')
        })
      } else {
        this.$router.push({
          name: 'userRegister',
          query: {
            expo_key: this.expo_key
          }
        })
      }
    },
    getJob() {
      if (this.loading || this.jobPage >= this.jobTotal) {
        return
      }
      this.loading = true
      getJobList(++this.jobPage, 10).then(res => {
        this.jobList = this.jobList.concat(res.data.data)
        this.jobTotal = res.data.last_page
        this.jobPage = res.data.current_page
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    getLocation() {
      if (this.loading || this.locationPage >= this.locationTotal) {
        return
      }
      this.loading = true
      getLocationList(++this.locationPage, 10).then(res => {
        this.locationList = this.locationList.concat(res.data.data)
        this.locationTotal = res.data.last_page
        this.locationPage = res.data.current_page
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    submit() {
      if(this.loading) {
        return
      }
      this.loading = true
      let form_data = {}
      for (let i = 0; i < this.from_data.form_fields.length; i++) {
        form_data[this.from_data.form_fields[i].field_name] = this.from_data.form_fields[i].value
        if (this.from_data.form_fields[i].is_required && !this.from_data.form_fields[i].value) {
          this.$message.error('请填写必填项')
          this.loading = false
          return
        }
      }
      submitForm(this.expo_id, form_data).then(res => {
        this.isOk = true
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    returnWidth(name) {
      if (['email', 'address'].includes(name)) {
        return 6
      }
      if (['id_number', 'mobile'].includes(name)) {
        return 4
      }
      if (['first_name', 'last_name', 'interested_products', 'business_type'].includes(name)) {
        return 3
      }
      return 2
    }
  }
})
</script>

<template>
  <div class="body">
    <div class="head">
      <div class="form-name">
        {{ from_data.expo_name }}
      </div>
    </div>
    <div class="form">
      <div class="desc">
        {{ from_data.content }}
      </div>
      <div v-if="isOk" class="form-body ok">
        <div class="icon el-icon-success"></div>
        <div class="text">表单提交完成</div>
      </div>
      <div v-else class="form-body">
        <div v-for="item in from_data.form_fields" :key="item.id" :style="{gridColumn:'span '+returnWidth(item.field_name)}" class="form-item">
          <div class="label" :class="item.is_required?'required':''">{{ item.field_label }}</div>
          <el-select v-if="item.field_name==='id_type'" v-model="item.value">
            <el-option value="Passport" label="护照" />
            <el-option value="ID Card" label="身份证" />
          </el-select>
          <el-select v-else-if="item.field_name==='mobile_country_code'" v-model="item.value" filterable>
            <el-option v-for="(code,index) in countryCode" :key="code.country_code+index" :label="'+'+code.phone_code+'('+code.chinese_name+')'" :value="code.phone_code" />
          </el-select>
          <el-popover
            v-else-if="item.field_name==='country'"
            placement="bottom"
            width="260"
            popper-class="popover"
            trigger="click"
            @show="if(locationList.length===0){getLocation()}"
          >
            <div class="cont">
              <div v-for="loca in locationList" :key="loca.id" class="item" @click="item.value=loca.name;from_data.form_fields.push();provinceL=loca.child">
                {{ loca.name }}
              </div>
              <div v-if="locationPage < locationTotal" class="item" @click="getLocation()">加载更多</div>
            </div>
            <el-input slot="reference" :value="item.value" />
          </el-popover>
          <el-popover
            v-else-if="item.field_name==='province'"
            placement="bottom"
            width="260"
            popper-class="popover"
            trigger="click"
          >
            <div class="cont">
              <div v-for="loca in provinceL" :key="loca.id" class="item" @click="item.value=loca.name;from_data.form_fields.push();if(loca.child){cityL=loca.child}else{cityL=[{id:0,name:loca.name}]}">
                {{ loca.name }}
              </div>
              <div v-if="provinceL.length===0" class="item">请先选择国家</div>
            </div>
            <el-input slot="reference" :value="item.value" />
          </el-popover>
          <el-popover
            v-else-if="item.field_name==='city'"
            placement="bottom"
            width="260"
            popper-class="popover"
            trigger="click"
          >
            <div class="cont">
              <div v-for="loca in cityL" :key="loca.id" class="item" @click="item.value=loca.name;from_data.form_fields.push()">
                {{ loca.name }}
              </div>
              <div v-if="cityL.length===0" class="item">请先选择省份</div>
            </div>
            <el-input slot="reference" :value="item.value" />
          </el-popover>
          <el-popover
            v-else-if="item.field_name==='department'"
            placement="bottom"
            width="260"
            popper-class="popover"
            trigger="click"
            @show="if(jobList.length===0){getJob()}"
          >
            <div class="cont">
              <div v-for="job in jobList" :key="job.id" class="item" @click="item.value=job.name;from_data.form_fields.push();jobL=job.child">
                {{ job.name }}
              </div>
              <div v-if="jobPage < jobTotal" class="item" @click="getJob()">加载更多</div>
            </div>
            <el-input slot="reference" :value="item.value" />
          </el-popover>
          <el-popover
            v-else-if="item.field_name==='position'"
            placement="bottom"
            width="260"
            popper-class="popover"
            trigger="click"
          >
            <div class="cont">
              <div v-for="job in jobL" :key="job.id" class="item" @click="item.value=job.name;from_data.form_fields.push()">
                {{ job.name }}
              </div>
              <div v-if="jobL.length===0" class="item">请先选择部门</div>
            </div>
            <el-input slot="reference" :value="item.value" />
          </el-popover>
          <el-input v-else v-model="item.value" />
        </div>
      </div>
      <div v-if="!isOk" class="button">
        <el-button :disabled="loading" type="primary" @click="submit()">
          提交表单
          <span v-if="loading" class="el-icon-loading"></span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.body{
  margin: 36px auto;
  max-width: 800px;
  width: 100%;
  .form{
    border-radius: 8px;
    margin-top: 16px;
    padding: 24px;
    box-shadow: 0 0 8px 0 #00000008;
    background: white;
    .button{
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }
    .desc{
      color: gray;
      margin-bottom: 32px;
    }
    .form-body{
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-gap: 8px;
      &.ok{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 120px 0;
        .icon{
          color: #67C23A;
          font-size: 86px;
        }
        .text{
          margin-top: 24px;
        }
      }
      .form-item{
        .label{
          font-size: 15px;
          color: gray;
          margin-bottom: 8px;
          &.required{
            &::after{
              content: '*';
              color: red;
            }
          }
        }
      }
    }
  }
  .head{
    padding: 0 8px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    .form-name{
      margin-bottom: 8px;
      font-size: 24px;
      font-weight: 600;
    }
  }
}
</style>
<style>
body{
  background: #F9FAFB;
  .popover{
    overflow: hidden;
    padding: 0;
    .cont{
      padding: 8px 0;
      max-height: 220px;
      overflow: auto;
      .item{
        cursor: pointer;
        padding: 8px 16px;
        &:hover{
          background: #F5F7FA;
        }
      }
    }
  }
}
</style>