EmploymentSite/vue/src/views/companyService/company/edit.vue

<template>
  <div class="card-edit">
    <a-form :model="dataModel" autocomplete="off" @finish="onFinish">
      <a-divider orientation="left">基础信息</a-divider>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="统一信用代码"
            :label-col="{ span: 8 }"
            name="companyCode"
            :rules="[{ required: true, message: '请输入统一信用代码!' }]"
          >
            <a-input v-model:value="dataModel.companyCode" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="企业名称"
            :label-col="{ span: 8 }"
            name="companyName"
            :rules="[{ required: true, message: '请输入企业名称!' }]"
          >
            <a-input v-model:value="dataModel.companyName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="所属驿站"
            :label-col="{ span: 8 }"
            name="siteID"
            :rules="[{ required: true, message: '请选择所属驿站!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.siteID"
              v-on:change="siteChange"
              :options="siteList"
              :field-names="{ label: 'siteName', value: 'siteID' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="企业办公地址"
            :label-col="{ span: 8 }"
            name="companyAddress"
            :rules="[{ required: true, message: '请输入企业办公地址!' }]"
          >
            <a-textarea v-model:value="dataModel.companyAddress" placeholder="" :rows="4"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="企业联系人"
            :label-col="{ span: 8 }"
            name="userName"
            :rules="[{ required: true, message: '请输入企业联系人!' }]"
          >
            <a-input v-model:value="dataModel.userName" placeholder=""/>
          </a-form-item>
          <a-form-item
            label="企业状态"
            :label-col="{ span: 8 }"
            name="recordStatus"
            :rules="[{ required: true, message: '请选择企业状态!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.recordStatus"
              :options="companyStatusList"
              :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="企业联系电话"
            :label-col="{ span: 8 }"
            name="userMobile"
            :rules="[{ required: true, message: '请输入企业联系电话!' }]"
          >
            <a-input v-model:value="dataModel.userMobile" placeholder=""/>
          </a-form-item>
          <a-form-item
            label="是否缺工"
            :label-col="{ span: 8 }"
            name="isShortage"
            :rules="[{ required: true, message: '请选择是否缺工!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.isShortage"
              :options="shortageStatusList"
              :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="企业所在经度"
            :label-col="{ span: 8 }"
            name="longitude"
          >
            <a-input v-model:value="dataModel.longitude" placeholder="" :rows="4"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="企业所在纬度"
            :label-col="{ span: 8 }"
            name="latitude"
          >
            <a-input v-model:value="dataModel.latitude" placeholder=""/>
          </a-form-item>

        </a-col>
        <a-col :span="8">

        </a-col>
      </a-row>
      <a-divider orientation="left">附件图片上传</a-divider>
      <b-upload-file :fileRefId="dataModel.companyID" :readonly="false" :multiple="true" style="width: 100%;"
                     :setFileList="setFileList" :accept="'.pdf,.png,.jpg'"  ></b-upload-file>
      <a-divider orientation="left">其他信息</a-divider>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="法定代表人(负责人)"
            :label-col="{ span: 8 }"
            name="frName"
          >
            <a-input v-model:value="dataModel.frName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="营业执照有效期"
            :label-col="{ span: 8 }"
            name="validTime"
          >
            <a-radio-group v-model:value="showPicker" name="showPicker">
              <a-radio value="1">至长期</a-radio>
              <a-radio value="2">
                <a-date-picker
                  v-model:value="showDateTime"
                  picker="date"
                  value-format="YYYY-MM-DD"
                />
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="企业邮箱"
            :label-col="{ span: 8 }"
            name="companyEmail"
          >
            <a-input v-model:value="dataModel.companyEmail" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="企业分类"
            :label-col="{ span: 8 }"
            name="companyType"
            :rules="[{ required: false, message: '请选择企业分类!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.companyType"
              :options="companyTypeList"
              :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="所属县区"
            :label-col="{ span: 8 }"
            name="regionCode"
            :rules="[{ required: false, message: '请选择所属县区!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.regionCode"
              :options="regionList"
              :field-names="{ label: 'name', value: 'code' }"
              @change="regionChange"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="所属街道"
            :label-col="{ span: 8 }"
            name="streetCode"
            :rules="[{ required: false, message: '请选择所属街道!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.streetCode"
              :options="streetList"
              :field-names="{ label: 'name', value: 'code' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="企业规模"
            :label-col="{ span: 8 }"
            name="companyModel"
            :rules="[{ required: false, message: '请选择企业规模!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.companyModel"
              :options="companyModelList"
              :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="用工情况(人)"
            :label-col="{ span: 8 }"
            name="workSituation"
            :rules="[{ required: false, message: '请输入用工人数!' }]"
          >
            <a-input v-model:value="dataModel.workSituation" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="参保人数(人)"
            :label-col="{ span: 8 }"
            name="insuredCount"
            :rules="[{ required: false, message: '请输入参保人数!' }]"
          >
            <a-input v-model:value="dataModel.insuredCount" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col class="table-bottom-a1" span="24">
          <a-form-item :label-col="{span:24}" name="businScope" label="经营范围">
            <a-textarea v-model:value="dataModel.businScope" placeholder="经营范围" :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col class="table-bottom-a1" span="24">
          <a-form-item :label-col="{span:24}" label="企业简介" name="companyDesc">
            <a-textarea v-model:value="dataModel.companyDesc" placeholder="企业简介" :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item class="buttom-btns">
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<style>
.ant-table-thead th:first-child{width:200px;}
</style>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue';
import {useRouter} from 'vue-router';
import {useTabsViewStore} from '@/store/modules/tabsView';
import type {SelectProps} from 'ant-design-vue';
import BUploadFile from '@/components/file/uploadFile.vue';
import {getRegionCodeList, getStreetCodeList} from "@/api/system/area/index";
import {save, getCompanyById} from '@/api/companyService/company';
import {getSiteByID, getSiteList} from '@/api/baseSettings/siteInfo';
import {getSysDictionaryList} from '@/api/system/dictionary';
import dayjs from "dayjs";
import {message} from "ant-design-vue";

interface FormState {
  dataModel: any;
}

export default defineComponent(
  {
    components: {BUploadFile},
    setup() {
      const router = useRouter();
      const isAllowCommit = ref(true);
      const formState = reactive<FormState>({dataModel: {}});
      const siteList = ref<any>([]);
      const tabsViewStore = useTabsViewStore();
      const showPicker = ref('1');
      const showDateTime = ref<any>();
      const fileList = ref();
      const setFileList = (files) => {
        fileList.value = files;
      };
      // const showDataPicker = () => {
      //   let toDay = new Date();
      //   showDateTime.value = dayjs(new Date().toLocaleDateString().replaceAll("/", "-"));
      // }
      const companyStatusList = ref<SelectProps['options']>([
        {value: 1, name: '在营'},
        {value: 0, name: '停业'},
      ]);
      const shortageStatusList = ref<SelectProps['options']>([
        {value: 1, name: '是'},
        {value: 0, name: '否'},
      ]);

      const regionList = ref<SelectProps['options']>();
      const streetList = ref<SelectProps['options']>();
      const companyTypeList = ref<SelectProps['options']>();
      const companyModelList = ref<SelectProps['options']>();
      const fullPath = router.currentRoute.value.fullPath;

      const onClose = () => {
        tabsViewStore.closeCurrentTabByPath('/companyService/enterprise/add');
        tabsViewStore.closeCurrentTabByPath('/companyService/enterprise/edit');
        router.push({name: '/companyService/enterprise/index'});
      };

      const getRegionList = async function(){
        const regionResult: any = await getRegionCodeList();
        regionList.value = regionResult;
      }
      const getStreetList = async function(){
        if(formState.dataModel.regionCode){
          const streetResult: any = await getStreetCodeList(formState.dataModel.regionCode);
          streetList.value = streetResult;
        }

      }
      const getAllSites = () => {
        getSiteList({pageIndex:1,pageSize:9999}).then((result :any) => {
          siteList.value = result.list;
        })
      }

      const getCompanyModelList = async function () {
        const data: any = await getSysDictionaryList("CompanyModel");
        companyModelList.value = data;
        // console.log("companyModelList", companyModelList.value);
      }

      const getCompanyTypeList = async function () {
        const data: any = await getSysDictionaryList("CompanyType");
        companyTypeList.value = data;
        // console.log("companyCategoryList", companyCategoryList.value);
      }

      const siteChange = async function () {
        const curSiteData: any = await getSiteByID(formState.dataModel.siteID);
        formState.dataModel.regionCode = curSiteData.regionCode;
        formState.dataModel.streetCode = curSiteData.streetCode;
        await getStreetList();
      }


      const regionChange = async function () {
        formState.dataModel.streetCode = null;
        await getStreetList();
      }

      const companyCodeValidate = ()=>{
        const codeReg = /^[0-9A-Z]+$/;
        if(formState.dataModel.companyCode.length != 18 || !codeReg.test(formState.dataModel.companyCode)){
          message.error("输入的信用代码有误！");
          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) {
            message.error('输入的统一信用代码无效！');
            isAllowCommit.value = false;
          }
        }
      };

      const inputDataValidate = () =>{
        const mobileReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
        if(!mobileReg.test(formState.dataModel.userMobile)){
          message.error("输入的联系电话有误!");
          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!=null&&formState.dataModel.companyEmail.trim()!=''){
          if(!emailReg.test(formState.dataModel.companyEmail)){
            message.error("输入的企业邮箱有误!");
            isAllowCommit.value = false;
          }
        }
      };

      const onFinish = () => {
        isAllowCommit.value = true;
        console.log(showPicker.value);
        if (showPicker.value === '1') {
          formState.dataModel.validDate = '2099-12-31T00:00:00.000+08:00';
        }
        else {
          formState.dataModel.validDate = showDateTime.value;
        };
        companyCodeValidate();
        inputDataValidate();
        console.log("isAllowCommit",isAllowCommit.value);
        if(isAllowCommit.value){
          save(formState.dataModel).then(result => {
            if (result) {
              tabsViewStore.closeCurrentTab(fullPath);
              tabsViewStore.addTabByPath('/companyService/enterprise/index', {reload: 1});
            }
          })
        };
      }

      const loadData = (id: any) => {
        getAllSites();
        getRegionList();
        getCompanyModelList();
        getCompanyTypeList();
        getCompanyById(id).then(result => {
          formState.dataModel = result;
          // console.log("curDataModel",formState.dataModel);
          showPicker.value = formState.dataModel.validDate == '2099-12-31T00:00:00.000+08:00' ? '1' : '2';
          if (showPicker.value === '1')
            showDateTime.value = dayjs(new Date().toLocaleDateString().replaceAll("/", "-"));
          else
            showDateTime.value = formState.dataModel.validDate;
        })
      };

      return {
        ...toRefs(formState),
        loadData,
        onClose,
        onFinish,
        siteChange,
        showPicker,
        siteList,
        regionList,
        streetList,
        companyTypeList,
        companyModelList,
        companyStatusList,
        showDateTime,
        regionChange,
        setFileList,
        shortageStatusList
      }
    },
    created() {
      const id = history.state.params?.id;
      this.loadData(id);
    }
  })
</script>