integrated_traffic_uniapp/pages/basics/basic-info/components/baseInfo.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>
          <zqs-select
              :multiple="true"
              :list="dictData.PERSONNEL_TYPE.list"
              :show-search="false"
              v-model="formData.PERSONNEL_TYPE_NAME"
              label-key="NAME"
              value-key="DICTIONARIES_ID"
              placeholder="请选择人员类型"
              title="选择人员类型"
              clearable
              @change="changeSelect($event, 'PERSONNEL_TYPE')"
          ></zqs-select>
        </view>
<!--        <view class="cu-form-group margin-top-xs">
          <view class="title">人员类型</view>
          <view v-if="forbidEdit" style="color: #cccccc">{{formData.PERSONNEL_TYPE_NAME}}</view>
          <picker v-else @change="pickerChangeData($event,'PERSONNEL_TYPE')" :value="dictData.PERSONNEL_TYPE.index" :range="dictData.PERSONNEL_TYPE.list" range-key="NAME">
            <view class="picker">
              {{formData.PERSONNEL_TYPE_NAME?formData.PERSONNEL_TYPE_NAME:'请选择'}}
            </view>
          </picker>
        </view>-->
        <view class="cu-form-group margin-top">
          <view class="title is-required">文化程度</view>
          <view v-if="forbidEdit" style="color: #cccccc">{{formData.DEGREE_OF_EDUCATION_NAME}}</view>
          <picker v-else @change="pickerChangeData($event,'DEGREE_OF_EDUCATION')" :value="dictData.DEGREE_OF_EDUCATION.index" :range="dictData.DEGREE_OF_EDUCATION.list" range-key="NAME">
            <view class="picker">
              {{formData.DEGREE_OF_EDUCATION_NAME?formData.DEGREE_OF_EDUCATION_NAME:'请选择'}}
            </view>
          </picker>
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">政治面貌</view>
          <view v-if="forbidEdit" style="color: #cccccc">{{formData.POLITICAL_OUTLOOK_NAME}}</view>
          <picker v-else @change="pickerChangeData($event,'POLITICAL_OUTLOOK')" :value="dictData.POLITICAL_OUTLOOK.index" :range="dictData.POLITICAL_OUTLOOK.list" range-key="NAME">
            <view class="picker">
              {{formData.POLITICAL_OUTLOOK_NAME?formData.POLITICAL_OUTLOOK_NAME:'请选择'}}
            </view>
          </picker>
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">参加工作日期</view>
          <view v-if="forbidEdit" style="color: #cccccc">{{formData.WORKING_DATE}}</view>
          <picker v-else mode="date" @change="changeDate($event,'WORKING_DATE')" :value="formData.WORKING_DATE" :end="limitData.WORKING_DATE.end">
            <view class="picker">
              {{formData.WORKING_DATE?formData.WORKING_DATE:'请选择'}}
            </view>
          </picker>
        </view>
        <view class="cu-form-group">
          <view class="title is-required">健康状况</view>
          <input v-model="formData.HEALTH" placeholder="请输入健康状况" maxlength="50" name="input" />
        </view>
        <view class="cu-form-group">
          <view class="title is-required">毕业院校及专业</view>
          <input v-model="formData.UNIVERSITY" placeholder="请输入毕业院校及专业" maxlength="50" name="input" />
        </view>
        <view class="cu-form-group">
          <view class="title is-required">户籍所在地</view>
          <input v-model="formData.RESIDENCE" placeholder="请输入户籍所在地" maxlength="50" name="input" />
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">之前从事本岗位时间</view>
          <view v-if="forbidEdit" style="color: #cccccc">{{formData.PREVIOUS_POST_DATE}}</view>
          <picker v-else mode="date" @change="changeDate($event,'PREVIOUS_POST_DATE')" :value="formData.PREVIOUS_POST_DATE" :end="limitData.PREVIOUS_POST_DATE.end">
            <view class="picker">
              {{formData.PREVIOUS_POST_DATE?formData.PREVIOUS_POST_DATE:'请选择'}}
            </view>
          </picker>
        </view>
        <view class="cu-form-textarea margin-top-xs">
          <view class="cu-form-title is-required-cu">主要工作经历</view>
          <textarea v-model="formData.WORK_EXPERIENCE" maxlength="200" placeholder="请输入主要工作经历"></textarea>
        </view>
        <view class="cu-form-textarea margin-top-xs">
          <view class="cu-form-title is-required-cu">入职前接受安全培训和考核以及取得安全培训有关的岗位证书等情况</view>
          <textarea v-model="formData.CERTIFICATES" maxlength="200" placeholder="请输入入职前接受安全培训和考核以及取得安全培训有关的岗位证书等情况"></textarea>
        </view>
        <view class="cu-form-textarea margin-top-xs">
          <view class="cu-form-title is-required-cu">入职前受过何种有关安全生产的处罚以及是否受到刑事处罚</view>
          <textarea v-model="formData.PUNISH" maxlength="200" placeholder="请输入入职前受过何种有关安全生产的处罚以及是否受到刑事处罚"></textarea>
        </view>

      </view>
      <view class="cu-bar btn-group" style="margin-top: 30upx;">
        <button v-if="!forbidEdit" class="cu-btn bg-blue margin-tb-sm lg" @click="$noMultipleClicks(confirmBaseInfo)">下一步</button>
        <button v-if="forbidEdit && applyStatus !== '0'" 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 {
  formatDate,validateIdCard,validateMobile,getLevel
} from '../../../../common/tool.js';
import ZqsSelect from "../../../../components/zqs-select/zqs-select.vue";

	export default {
    name: "register_baseInfo",
    components: {ZqsSelect},
    props: {
      applyStatus: {
        type: String,
        default: ''
      },
      forbidEdit: {
        type: Boolean,
        default: true
      },
      colorValue: {
        type: String,
        default: "#cccccc"
      },
      formData: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
		data() {
			return {
        permissionID:'',
        noClick: true,
        // 范围限制
        limitData: {
          // 参加工作日期
          WORKING_DATE:{ start: '', end: '' },
          PREVIOUS_POST_DATE:{ start: '', end: '' },
        },
        dictData:{
          // 人员类型
          PERSONNEL_TYPE:{
            index: -1,
            list:[],
          },
          // 政治面貌
          POLITICAL_OUTLOOK:{
            index: -1,
            list:[],
          },
          // 文化程度
          DEGREE_OF_EDUCATION:{
            index: -1,
            list:[],
          }
        }
			}
		},
    mounted() {
      this.getDictList()
      this.limitData.WORKING_DATE.end =  formatDate(new Date(), 'yyyy-MM-dd'); // 参加工作日期截止时间
      this.limitData.PREVIOUS_POST_DATE.end =  formatDate(new Date(), 'yyyy-MM-dd'); // 之前从事本岗位时间
    },
    methods: {
      async getDictList(){
        //人员类型
        this.dictData.PERSONNEL_TYPE.list = await getLevel({DICTIONARIES_ID: '0b62f92b0b624aab8e89a77304a64d5e', BIANMA: 'TRAFFIC_EMPLOYMENT_DRIVE'});
        //政治面貌
        this.dictData.POLITICAL_OUTLOOK.list = await getLevel({DICTIONARIES_ID: '6351efdd12dc4730952e5d195718e252'});
        //文化程度
        this.dictData.DEGREE_OF_EDUCATION.list = await getLevel({DICTIONARIES_ID: 'd7d80f08d73a4accbccf4fd3d8d1d867'});

      },
			//跳转事件
			confirmBaseInfo() {
        if (this.validateData()) {
          this.$emit("confirm", '');
        }
			},
      goEdit(){
        this.$emit("goEdit", false);
      },
      changeDate(e,name) {
        this.formData[name] = e.detail.value
        this.$forceUpdate();//强制刷新
      },
      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
        }
        // 政治面貌
        if (name === 'POLITICAL_OUTLOOK') {
          this.dictData.POLITICAL_OUTLOOK.index = e.detail.value;
          this.formData.POLITICAL_OUTLOOK = this.dictData.POLITICAL_OUTLOOK.list[this.dictData.POLITICAL_OUTLOOK.index].DICTIONARIES_ID
          this.formData.POLITICAL_OUTLOOK_NAME = this.dictData.POLITICAL_OUTLOOK.list[this.dictData.POLITICAL_OUTLOOK.index].NAME
        }
        // 文化程度
        if (name === 'DEGREE_OF_EDUCATION') {
          this.dictData.DEGREE_OF_EDUCATION.index = e.detail.value;
          this.formData.DEGREE_OF_EDUCATION = this.dictData.DEGREE_OF_EDUCATION.list[this.dictData.DEGREE_OF_EDUCATION.index].DICTIONARIES_ID
          this.formData.DEGREE_OF_EDUCATION_NAME = this.dictData.DEGREE_OF_EDUCATION.list[this.dictData.DEGREE_OF_EDUCATION.index].NAME
        }
        this.$forceUpdate();//强制刷新
      },
      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.PERSONNEL_TYPE) {
          uni.showToast({
            icon: 'none',
            title: '请选择人员类型',
            duration: 2000
          });
          return false;
        }
        if (!this.formData.HEALTH) {
          uni.showToast({
            icon: 'none',
            title: '健康状况不能为空',
            duration: 2000
          });
          return false;
        }
        if (!this.formData.UNIVERSITY) {
          uni.showToast({
            icon: 'none',
            title: '毕业院校及专业不能为空',
            duration: 2000
          });
          return false;
        }
        if (!this.formData.RESIDENCE) {
          uni.showToast({
            icon: 'none',
            title: '户籍所在地不能为空',
            duration: 2000
          });
          return false;
        }
        if (!this.formData.WORK_EXPERIENCE) {
          uni.showToast({
            icon: 'none',
            title: '主要工作经历不能为空',
            duration: 2000
          });
          return false;
        }
        if (!this.formData.CERTIFICATES) {
          uni.showToast({
            icon: 'none',
            title: '入职前接受安全培训和考核以及取得安全培训有关的岗位证书等情况不能为空',
            duration: 2000
          });
          return false;
        }
        if (!this.formData.PUNISH) {
          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>