EmploymentSite/h5app/src/views/pages/user/myInfo.vue

<template>
  <ion-page class="list-page">
    <ion-header  class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="()=>router.go(-1)"></ion-icon>
        </ion-buttons>
        <ion-title>个人信息修改</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <form autocomplete="off">
        <div class="bw-vue-form">
        <div class="form-input" >
          <ion-label>头像图片上传</ion-label>
          <b-image v-if="userInfo.userID" :file-ref-id="userInfo.userID" :readonly="false"
                   :is-single="true"></b-image>
        </div>
        <div class="form-input">
          <ion-label>姓名</ion-label>
          <ion-input readonly v-model="dataModel.siteUserName"></ion-input>
        </div>
        <div class="form-input">
          <ion-label>性别</ion-label>
          <ion-input readonly v-model="dataModel.genderName"></ion-input>
        </div>

        <div class="form-input">
          <ion-label>联系电话</ion-label>
          <ion-input name="mobile" v-model="dataModel.mobile"></ion-input>
        </div>
        <div class="form-input">
          <ion-label>工号</ion-label>
          <ion-input readonly v-model="dataModel.userNo"></ion-input>
        </div>
        <div class="form-input">
          <ion-label>身份证号</ion-label>
          <ion-input readonly v-model="dataModel.idCard"></ion-input>
        </div>
        <div class="form-input">
          <ion-label>用户类型</ion-label>
          <ion-input readonly v-model="dataModel.roleName"> </ion-input>
        </div>
        <div class="form-input">
          <ion-label>所属驿站</ion-label>
          <ion-input readonly v-model="dataModel.siteName" > </ion-input>
        </div>
        <div class="form-input">
          <ion-label>社保卡号</ion-label>
          <ion-input name="socialSecurityCard" v-model="dataModel.socialSecurityCard" placeholder="请输入社保卡号" :clear-input="true"> </ion-input>
        </div>
        <div class="form-select">
          <ion-label>民族</ion-label>
          <ion-select name="nationID"  id="nationID" okText="确定" cancelText="取消"
                      v-model="dataModel.nation"
                      interface="action-sheet" placeholder="请选择民族" style="width:100%;text-align:left;" >
            <ion-select-option v-for=" (it,key) in nationTypeList" :key="key" :value="it.value">
              {{ it.name }}
            </ion-select-option>
          </ion-select>
        </div>
        <div class="form-select">
          <ion-label>政治面貌</ion-label>
          <ion-select name="politicsStatusID"  id="politicsStatusID" okText="确定" cancelText="取消"
                      v-model="dataModel.politicsStatusID"
                      interface="action-sheet" placeholder="请选择政治面貌" style="width:100%;text-align:left;" >
            <ion-select-option v-for=" (it,key) in politicsStatusList" :key="key" :value="it.value">
              {{ it.name }}
            </ion-select-option>
          </ion-select>
        </div>
        <div class="form-select">
          <ion-label>最高学历</ion-label>
          <ion-select name="cultureRank"  id="cultureRank" okText="确定" cancelText="取消"
                      v-model="dataModel.cultureRank"
                      interface="action-sheet" placeholder="请选择最高学历" style="width:100%;text-align:left;">
            <ion-select-option v-for=" (it,key) in cultureRankList" :key="key" :value="it.value">
              {{ it.name }}
            </ion-select-option>
          </ion-select>
        </div>
        <div class="form-input">
          <ion-label>毕业院校</ion-label>
          <ion-input  v-model="dataModel.finishSchool" placeholder="请输入毕业院校" :clear-input="true"> </ion-input>
        </div>
        <div class="form-input">
          <ion-label>专业</ion-label>
          <ion-input  v-model="dataModel.profession" placeholder="请输入专业" :clear-input="true"> </ion-input>
        </div>
        <div class="form-select">
          <ion-label>是否全日制</ion-label>
          <ion-select name="isFullTime"  id="isFullTime" okText="确定" cancelText="取消" v-model="dataModel.isFullTime"
                      interface="action-sheet" placeholder="请选择是否非全日制" style="width:100%;text-align:left;" >
            <ion-select-option v-for=" (it,key) in isFullTimeList" :key="key" :value="it.value">
              {{ it.name }}
            </ion-select-option>
          </ion-select>
        </div>
        <div class="form-input">
          <ion-label>职业资格类别</ion-label>
          <div>
            <ion-input placeholder="请选择职业资格类别" label-placement="stacked" style="float: left;width:78%;"
                       v-model="dataModel.occupationalCategoryName" readonly >
            </ion-input>
            <ion-item style="width:22%;float: right;padding:0px;margin: 0px;">
              <category-selection  :OccupationalID="dataModel.occupationalCategory" @SetOccupationalID="onSetOccupationalID"></category-selection>
            </ion-item>
          </div>
        </div>
        <div class="form-select">
          <ion-label>职业资格等级</ion-label>
          <ion-select name="occupationalLevel"  id="occupationalLevel" okText="确定" cancelText="取消" v-model="dataModel.occupationalLevel"
                      interface="action-sheet" placeholder="请选择职业资格类别" style="width:100%;text-align:left;" >
            <ion-select-option v-for=" (it,key) in occupationalLevelList" :key="key" :value="it.value">
              {{ it.name }}
            </ion-select-option>
          </ion-select>
        </div>

        <div class="form-input">
          <ion-label>籍贯</ion-label>
          <ion-input  v-model="dataModel.nativePlace" placeholder="请输入籍贯" :clear-input="true"> </ion-input>
        </div>

        <div class="form-input">
          <ion-label>邮箱</ion-label>
          <ion-input  v-model="dataModel.email" placeholder="请输入邮箱" :clear-input="true"> </ion-input>
        </div>

        <div class="form-input">
          <ion-label>住址</ion-label>
          <ion-input  v-model="dataModel.address" placeholder="请输入住址" :clear-input="true"> </ion-input>
        </div>
      </div>
      </form>
    </ion-content>
    <ion-footer>
      <ion-toolbar>
        <ion-button style="width: 100%;" @click="onSave" >提交</ion-button>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue';
import router from '@/router';
import {useUserStore} from '@/store/modules/user';
import {addCircleOutline, arrowBackOutline, trashOutline} from 'ionicons/icons';
import {getSiteUserByUserID,saveSiteUser} from '@/api/siteUserInfo';
import {getSysDictionaryList} from "@/api/system/dictionary";
import dayjs from "dayjs";
import CategorySelection from "@/components/ocCategorySelection.vue";
import BImage from "@/components/bImage.vue";

interface SelectProps {
  name: string,
  value: string
}
interface userModel {
  dataModel: any;
}

export default defineComponent({
  name: 'myInfo',
  components:{CategorySelection,BImage},
  setup() {
    const userStore = useUserStore();
    const userInfo = ref(userStore.getUserInfo);
    const curLoginUserInfo = reactive<userModel>({
          dataModel:{
            address: null,
            age:null,
            createBy:null,
            createTime: null,
            cultureRank: null,
            cultureRankName:"",
            email: null,
            errorMessage: null,
            finishSchool: null,
            gender:null,
            genderName:"",
            idCard: "",
            institutionID:"",
            isFullTime:null,
            isFullTimeName: null,
            mobile:"",
            nation:null,
            nationName: null,
            nativePlace: null,
            occupationalCategory: null,
            occupationalCategoryName: null,
            occupationalLevel: null,
            occupationalLevelName: null,
            politicsStatusID: null,
            politicsStatusName: null,
            profession:null,
            regionCode: "",
            roleID: 0,
            roleName: "",
            siteID: "",
            siteName:"",
            siteUserID: "",
            siteUserName: "",
            socialSecurityCard: "",
            updateBy: "",
            updateTime: "",
            userID: "",
            userNo: "",
          }
    }
    );

    const onSetOccupationalID = (data: any)=>{
       curLoginUserInfo.dataModel.occupationalCategory = data.value;
       curLoginUserInfo.dataModel.occupationalCategoryName = data.text;
    }

    getSiteUserByUserID(userInfo.value.userID==undefined?"":userInfo.value.userID).then(data=> {
      curLoginUserInfo.dataModel = data;
      // const replaceStr =  curLoginUserInfo.value.idCard.substring(3,15);
      // curLoginUserInfo.value.idCardShow = String(curLoginUserInfo.value.idCard).replace(replaceStr,'************');
    });

      const nationTypeList = ref<SelectProps[]>([]);
      const politicsStatusList = ref<SelectProps[]>([]);
      const isFullTimeList = ref<SelectProps[]>([]);
      const cultureRankList = ref<SelectProps[]>([]);
      const occupationalLevelList = ref<SelectProps[]>([]);

      const getDataList = async  function(){
        const nationTypeListResult: any = await getSysDictionaryList("NationType");
        nationTypeList.value = nationTypeListResult;
        const politicsStatusResult: any = await getSysDictionaryList("PoliticsStatus");
        politicsStatusList.value = politicsStatusResult;
        const isFullTimeListResult: any = await getSysDictionaryList("IsFullTime");
        isFullTimeList.value = isFullTimeListResult;
        const cultureRankResult: any = await getSysDictionaryList("HighestDegree");
        cultureRankList.value = cultureRankResult;
        const occupationalLevelListResult: any = await getSysDictionaryList("OccupationalLevel");
        occupationalLevelList.value = occupationalLevelListResult;
      }

      getDataList();


      const onSave = () => {
        saveSiteUser(curLoginUserInfo.dataModel).then(result => {
          if (result) {
            router.push({path: '/tabs/tabUser'});
          }
        });
      }

      return {
        ...toRefs(curLoginUserInfo),
        router,
        arrowBackOutline,
        addCircleOutline,
        trashOutline,
        userInfo,
        nationTypeList,
        politicsStatusList,
        isFullTimeList,
        cultureRankList,
        occupationalLevelList,
        onSave,
        onSetOccupationalID,
        dayjs
      }

    }
});
</script>

<style lang="less">


ion-item {
  --inner-border-width: 0px 0px 1px 0px;
  margin-right: 10px;
}

</style>