integrated_traffic_uniapp/pages/basics/basic-info/components/apply.vue

<template>
  <view>
    <!--		<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
          <block slot="backText">返回</block>
          <block slot="content">从业人员注册-基础信息</block>
        </cu-custom>-->
    <scroll-view scroll-y="false" >
      <view class="form">
        <view class="cu-form-group">
          <view class="title is-required">姓名</view>
          <input v-model="formData.NAME" disabled placeholder="请输入姓名" maxlength="50" name="input" style="color: #cccccc" />
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">身份证号</view>
          <input v-model="formData.USER_ID_CARD" disabled placeholder="请输入身份证号" maxlength="18" name="input" style="color: #cccccc" />
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">手机</view>
          <input v-model="formData.PHONE" disabled placeholder="请输入手机号码" maxlength="11" name="input" style="color: #cccccc" />
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">人员类型</view>
          <view v-if="forbidEdit" style="color: #cccccc">{{formData.PERSONNEL_TYPE}}</view>
          <picker v-else @change="pickerChangeData($event,'PERSONNEL_TYPE')" disabled :value="dictData.PERSONNEL_TYPE.index" :range="dictData.PERSONNEL_TYPE.list" range-key="NAME">
            <view class="picker" style="color: #cccccc">
              {{formData.PERSONNEL_TYPE?formData.PERSONNEL_TYPE_NAME:'请选择'}}
            </view>
          </picker>
        </view>

        <!-- 入职申请 -->
        <uni-section title="入职申请" type="line" class="margin-top" padding>
          <view class="cu-form-group margin-top-xs">
            <view class="title is-required">入职企业</view>
            <zqs-select
                :multiple="false"
                :list="dictData.APPLY_CORP.list"
                :show-search="true"
                :disabled="forbidEdit"
                v-model="formData.APPLY_CORP"
                label-key="CORP_NAME"
                value-key="CORPINFO_ID"
                placeholder="请选择入职企业"
                title="选择入职企业"
                clearable
                @search="searchSelect($event, 'APPLY_CORP')"
                @change="changeSelect($event, 'APPLY_CORP')"
            ></zqs-select>
          </view>
        </uni-section>


      </view>
      <view class="cu-bar btn-group" style="margin-top: 30upx;">
        <button v-if="!forbidEdit" :loading="buttonloading" :disabled="buttonloading" class="cu-btn bg-green margin-tb-sm lg" @click="$noMultipleClicks(confirmApply)">提 交</button>
        <button v-if="forbidEdit" class="cu-btn bg-blue margin-tb-sm lg" @click="goEdit">编辑</button>
        <!--        <button class="cu-btn bg-green margin-tb-sm lg" @click="$noMultipleClicks(goback)">返回</button>-->
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  getLevel, listCorpAll
} from '../../../../common/tool.js';
import UniSection from "../../../../components/uni-section/components/uni-section/uni-section";
import ZqsSelect from '../../../../components/zqs-select/zqs-select.vue'
export default {
  name: "register_certificate",
  components: {
    UniSection, ZqsSelect
  },
  props: {
    forbidEdit: {
      type: Boolean,
      default: true
    },
    colorValue: {
      type: String,
      default: "#cccccc"
    },
    formData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    buttonloading: {
      type: Boolean,
      default: function() {
        return false
      }
    },
  },
  data() {
    return {
      noClick: true,
      dictData:{
        // 人员类型
        PERSONNEL_TYPE:{
          index: -1,
          list:[],
        },
        // 企业列表
        APPLY_CORP: {
          index: -1,
          list:[],
        },
      }
    }
  },
  mounted() {
    this.getDictList()
  },
  methods: {
    async getDictList(){
      // 人员类型
      this.dictData.PERSONNEL_TYPE.list = await getLevel({DICTIONARIES_ID: '0b62f92b0b624aab8e89a77304a64d5e', BIANMA: 'TRAFFIC_EMPLOYMENT_DRIVE'});
      // 准驾车型
      this.dictData.APPLY_CORP.list = await listCorpAll({ISDELETE: '0'});
      this.dictData.APPLY_CORP.tempList = JSON.parse(JSON.stringify(this.dictData.APPLY_CORP.list));

    },
    //跳转事件
    confirmApply() {
      if (this.validateData()) {
        this.$emit("confirm", '');
      }
    },
    searchSelect(e, name) {
      console.log('查询事件参数', e)
      this.dictData.APPLY_CORP.list = JSON.parse(JSON.stringify(this.dictData.APPLY_CORP.tempList));
      if (e) {
        this.dictData.APPLY_CORP.list = this.dictData[name].list.filter(item => item.CORP_NAME.indexOf(e) > -1);
      }
    },
    changeSelect(e, name) {
      this.$forceUpdate();//强制刷新
    },
    pickerChangeData(e,name) {
      // 人员类型
      if (name === 'PERSONNEL_TYPE') {
        this.dictData.PERSONNEL_TYPE.index = e.detail.value;
        this.formData.PERSONNEL_TYPE = this.dictData.PERSONNEL_TYPE.list[this.dictData.PERSONNEL_TYPE.index].DICTIONARIES_ID
        this.formData.PERSONNEL_TYPE_NAME = this.dictData.PERSONNEL_TYPE.list[this.dictData.PERSONNEL_TYPE.index].NAME
      }
      this.$forceUpdate();//强制刷新
    },
    goEdit(){
      this.$emit("goEdit", false);
    },
    goback(){
      var pages = getCurrentPages();	// 获取当前页面栈
      var prePage = pages[pages.length - 2];	// 上二级页面
      prePage.$vm.initflag = true;    // A 页面 init方法 为true
      uni.navigateBack({delta: 1});
      uni.hideLoading();
    },
    validateData() {
      if (!this.formData.APPLY_CORP) {
        uni.showToast({
          icon: 'none',
          title: '请选择入职企业',
          duration: 2000
        });
        return false;
      }
      return true;
    },

  }
}
</script>

<style>
page{
  background-color: #f3f2f2;
}
.prevent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
.cu-form-title{
  padding: 20upx 0;
}
.cu-form-textarea{
  background-color: #ffffff;
  padding: 1upx 30upx 20upx;
  min-height: 100upx;
}
.cu-form-textarea textarea {
  height: 4.6em;
  width: 100%;
  line-height: 1.2em;
  flex: 1;
  font-size: 28upx;
  padding: 0;
}
.selected{
  display: flex;
  align-items: center;
  height: 100upx;
}
.selected .radio{
  transform:scale(0.8);
  margin-right: 10upx;
}
.group{
  display: flex;
  align-items: center;
}
.cu-form-group .title{
  font-size: 28upx;
  font-weight: bold;
}
.cu-bar .action:first-child {
  font-size: 28upx;
}
.cu-form-group .picker{
  color: #808080;
}
.picker-tree{
  color: #808080;
}
</style>