EmploymentSite/h5app/src/views/pages/company/edit.vue

<template>
  <ion-page>
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onBack"></ion-icon>
        </ion-buttons>
        <ion-title>
          企业信息录入
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="stepFlex">
        <div v-for="(record,key) in stepList" :key="key" class="stepFlex-item">
          <div
              :class="[(record.val < curStepData?.statusVal || curStepData?.statusVal == stepList.val) ? 'greenCircle' :record.val == curStepData?.statusVal ? 'now' : 'grayCircle']"></div>
          <div v-if="key !== stepList.length - 1"
               :class="[record.val < curStepData?.statusVal ? 'greenLine' : 'grayLine']"></div>
          <div class="stepFlex-item-label">
            <p class="stepFlex-item-label-title">{{ record.title }}</p>
            <p class="stepFlex-item-label-desc">{{ record.desc }}</p>
          </div>
        </div>
      </div>
      <form autocomplete="off">
        <ion-list>
          <ion-item>
            <div class="panel-title2">
              <div class="item-flag"></div>
              基本信息
            </div>
          </ion-item>
          <ion-label class="title-item">统一信用代码<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.companyCode.$error?'ion-invalid':'ion-valid']">
            <ion-input placeholder="请输入统一信用代码" label-placement="stacked" :clear-input="true"
                       v-model="dataModel.companyCode" class="custom">
            </ion-input>
            <ion-note slot="error">统一信用代码不能为空</ion-note>
          </ion-item>
          <ion-label class="title-item">企业名称<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.companyName.$error?'ion-invalid':'ion-valid']">
            <ion-input placeholder="请输入企业名称" label-placement="stacked" :clear-input="true"
                       v-model="dataModel.companyName" class="custom">
            </ion-input>
            <ion-note slot="error">企业名称不能为空</ion-note>
          </ion-item>
          <ion-label class="title-item">服务驿站<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.siteID.$error?'ion-invalid':'ion-valid']">
              <ion-select id="siteID" name="siteID"  cancel-text="取消"  v-model="dataModel.siteID"
                          interface="action-sheet" placeholder="请选择服务驿站"  style="width: 100%;text-align: left;">
                <ion-select-option v-for="(record,key) in siteList" :key="key"  v-model:value="record.siteID">
                  {{ record.siteName }}
                </ion-select-option>
              </ion-select>
            <ion-note slot="error">服务驿站不能为空</ion-note>
          </ion-item>
          <ion-label class="title-item">企业办公地址<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.companyAddress.$error?'ion-invalid':'ion-valid']">
            <ion-textarea placeholder="请输入企业办公地址" label-placement="stacked" :rows="3" :clear-input="true"
                       v-model="dataModel.companyAddress" class="custom" >
            </ion-textarea>
            <ion-note slot="error">企业办公地址不能为空</ion-note>
          </ion-item>
          <ion-label class="title-item">企业联系人<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.userName.$error?'ion-invalid':'ion-valid']">
            <ion-input placeholder="请输入企业联系人" label-placement="stacked" :clear-input="true"
                       v-model="dataModel.userName" class="custom">
            </ion-input>
            <ion-note slot="error">企业联系人不能为空</ion-note>
          </ion-item>
          <ion-label class="title-item">联系电话<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.userMobile.$error?'ion-invalid':'ion-valid']">
            <ion-input placeholder="请输入联系电话" label-placement="stacked" :clear-input="true"
                       v-model="dataModel.userMobile" class="custom">
            </ion-input>
            <ion-note slot="error">企业联系电话不能为空</ion-note>
          </ion-item>
          <ion-label class="title-item">企业状态<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.recordStatus.$error?'ion-invalid':'ion-valid']">
            <ion-select id="recordStatus" name="recordStatus" cancel-text="取消"  v-model="dataModel.recordStatus"
                        interface="action-sheet" placeholder="请选择企业状态" style="width: 100%;text-align: left;">
              <ion-select-option v-for="(record,key) in companyStatusList" :key="key"
                                 v-model:value="record.value">
                {{ record.name }}
              </ion-select-option>
            </ion-select>
            <ion-note slot="error">企业状态不能为空</ion-note>
          </ion-item>
          <ion-label class="title-item">是否缺工<span class="danger">*</span></ion-label>
          <ion-item mode="md" :class="[v$.dataModel.isShortage.$error?'ion-invalid':'ion-valid']">
            <ion-select id="isShortAge" name="isShortAge" cancel-text="取消"  v-model="dataModel.isShortage"
                        interface="action-sheet" placeholder="请选择是否缺工" style="width: 100%;text-align: left;">
              <ion-select-option v-for="(record,key) in shortAgeTypeList" :key="key"
                                 v-model:value="record.value">
                {{ record.name }}
              </ion-select-option>
            </ion-select>
            <ion-note slot="error">企业状态不能为空</ion-note>
          </ion-item>

          <ion-item mode="md" >
            <div class="panel-title2" style="width: 25%;">
              <div class="item-flag"></div>
              其他信息
            </div>
            <div style="width: 75%;text-align: right;">
              <ion-icon :icon="chevronDownOutline" @click="isShow=!isShow" v-show="!isShow"
                        style="font-size: 24px;"></ion-icon>
              <ion-icon :icon="chevronUpOutline" @click="isShow=!isShow" v-show="isShow"
                        style="font-size: 24px;"></ion-icon>
            </div>
          </ion-item>
          <ion-list v-show="isShow" >
            <ion-label class="title-item">法定代表人(负责人)</ion-label>
            <ion-item mode="md">
              <ion-input placeholder="请输入法定代表人" label-placement="stacked" :clear-input="true"
                         v-model="dataModel.frName" class="custom">
              </ion-input>
            </ion-item>
            <ion-label class="title-item">营业执照有效期</ion-label>
            <ion-item mode="md">
              <div>
                <ion-radio v-model:checked="isLongDate" justify="start" labelPlacement="end"
                           @click="changeLongDate" style="height:30px;">至长期</ion-radio>
                <ion-datetime-button datetime="validDate" style=""></ion-datetime-button>
                <ion-modal :keep-contents-mounted="true" >
                  <ion-datetime id="validDate" name="validDate" placeholder="营业执照有效期"
                                v-model="dataModel.validDate"  :prefer-wheel="true"  @ionChange="changeValidDate"
                                dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                                :show-default-buttons="true" >
                  </ion-datetime>
                </ion-modal>
              </div>
            </ion-item>
            <ion-label class="title-item">企业邮箱</ion-label>
            <ion-item mode="md">
              <ion-input placeholder="请输入企业邮箱" label-placement="stacked" :clear-input="true"
                         v-model="dataModel.companyEmail" class="custom">
              </ion-input>
            </ion-item>
            <ion-label class="title-item">企业归类</ion-label>
            <ion-item mode="md">
              <ion-select interface="action-sheet" placeholder="请选择企业归类" cancel-text="取消"
                          id="companyType" v-model="dataModel.companyType"  style="width: 100%;text-align: left;">
                <ion-select-option v-for="(record,key) in companyTypeList" :key="key"
                                   v-model:value="record.code">
                  {{ record.name }}
                </ion-select-option>
              </ion-select>
            </ion-item>
            <ion-label class="title-item">企业规模</ion-label>
            <ion-item mode="md">
              <ion-select interface="action-sheet" placeholder="请选择企业规模" cancel-text="取消"
                          id="companyModel" v-model="dataModel.companyModel"  style="width: 100%;text-align: left;">
                <ion-select-option v-for="(record,key) in companyModelList" :key="key"
                                   v-model:value="record.value" style="width:100%;text-align: left;">
                  {{ record.name }}
                </ion-select-option>
              </ion-select>
            </ion-item>
            <ion-label class="title-item">所属县区</ion-label>
            <ion-item mode="md">
              <ion-select interface="action-sheet" placeholder="请选择所属县区" cancel-text="取消" @ionChange="changeCity"
                          id="regionCode" v-model="dataModel.regionCode" style="width:100%;text-align: left;">
                <ion-select-option v-for="(record,key) in regionList" :key="key"
                                   v-model:value="record.code">
                  {{ record.name }}
                </ion-select-option>
              </ion-select>
            </ion-item>
            <ion-label class="title-item">所属街道</ion-label>
            <ion-item  mode="md">
              <ion-select interface="action-sheet" placeholder="请选择所属街道" cancel-text="取消"
                          id="streetCode" v-model="dataModel.streetCode" style="width: 100%;text-align: left;">
                <ion-select-option v-for="(record,key) in streetList" :key="key"
                                   v-model:value="record.code">
                  {{ record.name }}
                </ion-select-option>
              </ion-select>
            </ion-item>
            <ion-label class="title-item">用工情况(人)</ion-label>
            <ion-item mode="md">
              <ion-input type="number" placeholder="请输入用工人数" label-placement="stacked" :clear-input="true"
                         v-model="dataModel.workSituation" class="custom">
              </ion-input>
            </ion-item>
            <ion-label class="title-item">参保人数(人)</ion-label>
            <ion-item mode="md">
              <ion-input type="number" placeholder="请输入参保人数" label-placement="stacked" :clear-input="true"
                         v-model="dataModel.insuredCount" class="custom">
              </ion-input>
            </ion-item>
            <ion-label class="title-item">经营范围</ion-label>
            <ion-item mode="md">
              <ion-textarea placeholder="请输入经营范围" :rows="3" label-placement="stacked" :clear-input="true"
                            v-model="dataModel.businScope" class="custom">
              </ion-textarea>
            </ion-item>
            <ion-label class="title-item">企业简介</ion-label>
            <ion-item mode="md">
              <ion-textarea placeholder="请输入企业简介" :rows="3" label-placement="stacked" :clear-input="true"
                         v-model="dataModel.companyDesc" class="custom">
              </ion-textarea>
            </ion-item>
          </ion-list>
        </ion-list>
      </form>
    </ion-content>
    <ion-footer>
      <ion-toolbar>
        <div slot="end">
          <ion-button shape="round" expand="block" @click="onNext">提交</ion-button>
        </div>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>
<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, toRefs} from "vue";
import {chevronDownOutline, chevronUpOutline, arrowBackOutline} from 'ionicons/icons';
import {getRegionList, getSiteList, getStreeList} from '@/api/company/index'
import {useRoute,useRouter} from "vue-router";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {useVuelidate} from "@vuelidate/core";
import {getCompanyById,saveCompanyInfo} from "@/api/company";
import {minLength,required} from "@vuelidate/validators";
import {getSysDictionaryList} from "@/api/system/dictionary";
import dayjs from "dayjs";

interface StepParams{
  name: string,
  statusVal: number
}


export default defineComponent({
  name: 'CompanyEdit',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const isAllowCommit = ref(true);
    const curStepData = ref<StepParams>({
      name:"",
      statusVal: 1
    });
    const isAdd = ref<any>(true);
    const isShow = ref<any>(false);
    const isLongDate = ref<any>(false);
    const formState = reactive({
      dataModel: {
        companyID:null,
        companyCode: '',
        companyName: null,
        siteID: null,
        companyAddress: null,
        userName: null,
        userMobile: '',
        recordStatus: null,
        isShortage: null,
        frName: null,
        validDate: dayjs().format("YYYY-MM-DD"),
        companyEmail: '',
        companyType: null,
        companyModel: null,
        regionCode: null,
        streetCode: null,
        workSituation: null,
        insuredCount: null,
        businScope: null,
        companyDesc: null
    }});
    const stepList = ref([
        {title: '基础信息', desc: '企业基础信息', val: 1},
        {title: '岗位信息', desc: '企业岗位信息', val: 2}
    ]);

    const companyTypeList = ref<any>([]);
    const companyModelList = ref<any>([]);
    const regionList = ref<any>([]);
    const streetList = ref<any>([]);
    const siteList = ref<any>([]);
    const companyStatusList = [
      {value: 1, name: '在营'},
      {value: 0, name: '关闭'},
    ];
    const shortAgeTypeList = [
      {value: 1, name: '是'},
      {value: 0, name: '否'},
    ];


    const getCompanyModelList = async function(){
      const companyModelResult :any = await getSysDictionaryList("CompanyModel");
      companyModelList.value = companyModelResult;
    }

    const rules = computed(() => {
      return {
        dataModel: {
          companyCode: {required},
          companyName: {required},
          siteID: {required},
          companyAddress: {required},
          userName: {required},
          userMobile: {required},
          recordStatus: {required},
          isShortage: {required},
        }
      }
    });
    const v$ = useVuelidate(rules, formState);

    const changeLongDate = ()=>{
      isLongDate.value = true;
      formState.dataModel.validDate = "2099-12-31T00:00:00.000+08:00";
    };

    const changeValidDate = () => {
        isLongDate.value = false;
    };

    const companyCodeValidate = ()=>{
      isAllowCommit.value = true;
      const codeReg = /^[0-9A-Z]+$/;
      console.log(formState.dataModel.companyCode);
      if(formState.dataModel.companyCode.length != 18 || !codeReg.test(formState.dataModel.companyCode)){
        presentAlert("输入的信用代码有误！");
        isAllowCommit.value = false;
      }else{
        let aCode;
        let aCodeValue;
        let total = 0;
        const weightedFactors = [1,3,9,27,19,26,16,17,20,29,25,13,8,24,10,30,28];
        const str = '0123456789ABCDEFGHJKLMNPQRTUWXY';
        for(let i =0;i < formState.dataModel.companyCode.length-1;i++){
          aCode = formState.dataModel.companyCode.substring(i,i+1);
          aCodeValue = str.indexOf(aCode);
          total += aCodeValue * weightedFactors[i];
        }
        let logicCheckCode = 31 - total % 31;
        if(logicCheckCode == 31){
           logicCheckCode = 0;
        }
        const Str = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y";
        const Array_Str = Str.split(',');
        const correctCodeStr  = Array_Str[logicCheckCode];
        console.log("正确的校验码是",correctCodeStr);
        const currentCodeStr = formState.dataModel.companyCode.substring(17, 18);
        if (correctCodeStr != currentCodeStr) {
          presentAlert('输入的统一信用代码无效！');
          isAllowCommit.value = false;
        }
      }
    }
    const inputDataValidate = () =>{
      const mobileReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
      if(!mobileReg.test(formState.dataModel.userMobile)){
        presentAlert("输入的联系电话有误!");
        isAllowCommit.value = false;
      }
      const emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      // 这里由于企业邮箱非必填所以先判断是否填写了企业邮箱
      if(formState.dataModel.companyEmail.trim()!==""){
        if(!emailReg.test(formState.dataModel.companyEmail)){
          presentAlert("输入的企业邮箱有误!");
          isAllowCommit.value = false;
        }
      }
    };

    const onNext = async () => {
      const isFormCorrect = await v$.value.$validate();
      if (!isFormCorrect) {
        await presentAlert('请输入完整信息！');
        return null;
      }
      /*const jsonStr = JSON.stringify(formState.dataModel);
      localStorage.removeItem('companyData');
      localStorage.setItem("companyData", jsonStr);*/
      companyCodeValidate();
      inputDataValidate();
      if(isAllowCommit.value){
        saveCompanyInfo(formState.dataModel).then(result => {
          if (result) {
            if(isAdd.value){
              router.push({path: './menu', query: {reload:1,id:formState.dataModel.companyID,status:2}});
            }
            else{
              router.push({path: './postList', query: {reload:1,id:formState.dataModel.companyID,status:3}});
            }
          }
        });
      }
    };

    const onBack=()=>{
      if(isAdd.value)
        router.push({path: './list', query: {reload:1}});
      else if(curStepData.value.statusVal==1)
        router.push({path: './menu', query: {reload:1,id:formState.dataModel.companyID,status:2}});
    }

    const getRegionListData = () => {
      getRegionList({}).then(data => {
        regionList.value = data;
      });
    }
    const getStreetListData = (code: any) => {
      getStreeList({code: code}).then(data => {
        streetList.value = data;
      });
    }
    const getSiteListData = () => {
      getSiteList({}).then(data => {
        siteList.value = data;
      });
    }
    const changeCity = () => {
      console.log(formState.dataModel.regionCode);
      if (formState.dataModel.regionCode)
        getStreetListData(formState.dataModel.regionCode);
    }

    const loadData = async (companyID: any,status:any) => {
      curStepData.value.statusVal = status;
      isAdd.value = companyID == null;
      const reqData = await getCompanyById(companyID);
      formState.dataModel = reqData;
      isLongDate.value = formState.dataModel.validDate == "2099-12-31T00:00:00.000+08:00";
      console.log('dataModel',formState.dataModel);
      console.log('isAdd',isAdd.value);
      if(formState.dataModel.regionCode!=null) getStreetListData(formState.dataModel.regionCode);
    };

   /* watch(() => route.query, () => {
      if (route.query.reload) {
        loadData(route.query.id,route.query.status);
      }
    });*/

    const reload = (companyID:any,status:any) => {
      isAdd.value = true;
      isShow.value = false;
      loadData(companyID,status);
    }

    onIonViewDidEnter(() => {
      if (route.query.reload) {
        reload(route.query.id,route.query.status);
      }
    });

    const presentAlert = async (message: string) => {
      const alert = await alertController.create({
        header: '错误！',
        message: message,
        buttons: [
          '确定'
        ],
      });

      await alert.present();
    }

    return {
      ...toRefs(formState),
      arrowBackOutline,
      chevronDownOutline,
      chevronUpOutline,
      route,
      router,
      isShow,
      v$,
      isLongDate,
      curStepData,
      stepList,
      companyTypeList,
      siteList,
      regionList,
      streetList,
      shortAgeTypeList,
      companyStatusList,
      companyModelList,
      onNext,
      onBack,
      getCompanyModelList,
      getRegionListData,
      getSiteListData,
      changeCity,
      changeLongDate,
      changeValidDate,
      loadData,
    }
  },mounted(){
    this.getCompanyModelList();
    this.getRegionListData();
    this.getSiteListData();
  }
});
</script>

<style lang="less">

.custom{
  --placeholder-color: gray;
  --placeholder-font-style:italic;
  --placeholder-opacity: 1;
}

.title-item{
  margin-left: 15px;
  color:#1c3d70 !important;
  font-size: 14px !important;
  font-weight: bold;
}

ion-item {
  --border-width: 0;
  --border-style: none;

  ion-label, ion-input, ion-select, ion-datetime-button {
    font-size: 14px !important;
  }
}

.stepFlex {
  margin: 0;
  display: flex;
  width: 100%;

  .stepFlex-item {
    position: relative;
    flex: 1;
    text-align: center;
    margin-top: -10px;

    .stepFlex-item-label {
      padding-top: 60px;
      font-size: 14px;

      .stepFlex-item-label-title {
        margin-top: 30px;
      }

      .stepFlex-item-label-desc {
        margin-top: 5px;
        color: #b9b9bd;
      }
    }
  }

  .greenCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #31A2FE;
  }

  .now {
    top: calc(50% - 18px);
    left: calc(50% - 8px);
    position: absolute;
    z-index: 3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #31A2FE;
    border: 4px solid #c5e8f9;
  }

  .grayCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
  }

  .greenLine {
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    height: 2px;
    background-color: #31A2FE;
    position: absolute;
  }

  .grayLine {
    height: 0;
    border: 1px dashed #ccc;
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    position: absolute;
  }

}


</style>