|
@@ -32,124 +32,168 @@
|
|
|
</div>
|
|
|
</ion-item>
|
|
|
<ion-item mode="md" :class="[v$.dataModel.companyCode.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-label>统一信用代码<span class="danger">*</span></ion-label>
|
|
|
- <ion-input placeholder="统一信用代码" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-label style="width: 100px;">统一信用代码<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请输入统一信用代码" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.companyCode">
|
|
|
</ion-input>
|
|
|
<ion-note slot="error">统一信用代码不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
<ion-item mode="md" :class="[v$.dataModel.companyName.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-label>企业名称<span class="danger">*</span></ion-label>
|
|
|
- <ion-input placeholder="企业名称" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-label style="width: 100px;">企业名称<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请输入企业名称" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.companyName">
|
|
|
</ion-input>
|
|
|
<ion-note slot="error">企业名称不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
<ion-item mode="md" :class="[v$.dataModel.siteID.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-label>服务驿站</ion-label>
|
|
|
- <ion-select interface="action-sheet" placeholder="请选择服务驿站" cancel-text="取消"
|
|
|
- id="siteID" v-model="formState.dataModel.siteID">
|
|
|
- <ion-select-option v-for="(record,key) in siteList" :key="key"
|
|
|
- v-model:value="record.siteID">
|
|
|
- {{ record.siteName }}
|
|
|
- </ion-select-option>
|
|
|
- </ion-select>
|
|
|
+ <div style="width: 27%;">
|
|
|
+ <ion-label style="width: 100px;">服务驿站<span class="danger">*</span></ion-label>
|
|
|
+ </div>
|
|
|
+ <div style="width: 73%;text-align: left;">
|
|
|
+ <ion-select interface="action-sheet" placeholder="请选择服务驿站" cancel-text="取消" style="max-width: 70%;"
|
|
|
+ id="siteID" v-model="formState.dataModel.siteID">
|
|
|
+ <ion-select-option v-for="(record,key) in siteList" :key="key"
|
|
|
+ v-model:value="record.siteID">
|
|
|
+ {{ record.siteName }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
<ion-note slot="error">服务驿站不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
<ion-item mode="md" :class="[v$.dataModel.address.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-input label="企业办公地址" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-label style="width: 100px;">企业办公地址<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请输入企业办公地址" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.address">
|
|
|
</ion-input>
|
|
|
<ion-note slot="error">企业办公地址不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
<ion-item mode="md" :class="[v$.dataModel.address.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-input label="企业联系人" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-label style="width: 100px;">企业联系人<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请输入企业联系人" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.userName">
|
|
|
</ion-input>
|
|
|
<ion-note slot="error">企业联系人不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
<ion-item mode="md" :class="[v$.dataModel.userMobile.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-input label="企业联系电话" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-label style="width: 100px;">企业联系电话<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请输入企业联系电话" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.userMobile">
|
|
|
</ion-input>
|
|
|
<ion-note slot="error">企业联系电话不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
+ <ion-item mode="md" :class="[v$.dataModel.insuredCount.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-label style="width: 100px;">参保人数<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请输入参保人数" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="formState.dataModel.insuredCount">
|
|
|
+ </ion-input>
|
|
|
+ <ion-note slot="error">参保人数不能为空</ion-note>
|
|
|
+ </ion-item>
|
|
|
<ion-item mode="md" :class="[v$.dataModel.recordStatus.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-label>企业状态</ion-label>
|
|
|
- <ion-select interface="action-sheet" placeholder="请选择企业状态" cancel-text="取消"
|
|
|
- id="recordStatus" v-model="formState.dataModel.recordStatus">
|
|
|
- <ion-select-option v-for="(record,key) in companyStatuslist" :key="key"
|
|
|
- v-model:value="record.value">
|
|
|
- {{ record.name }}
|
|
|
- </ion-select-option>
|
|
|
- </ion-select>
|
|
|
+ <div style="width: 27%;">
|
|
|
+ <ion-label style="width: 100px;">企业状态</ion-label>
|
|
|
+ </div>
|
|
|
+ <div style="width: 73%;text-align: left;">
|
|
|
+ <ion-select interface="action-sheet" placeholder="请选择企业状态" cancel-text="取消" style="max-width: 70%;"
|
|
|
+ id="recordStatus" v-model="formState.dataModel.recordStatus">
|
|
|
+ <ion-select-option v-for="(record,key) in companyStatuslist" :key="key"
|
|
|
+ v-model:value="record.value">
|
|
|
+ {{ record.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
<ion-note slot="error">企业状态不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <div class="panel-title2">
|
|
|
+ <ion-item mode="md" style="">
|
|
|
+ <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-item mode="md" :class="[v$.dataModel.regionCode.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-label>所属县区</ion-label>
|
|
|
- <ion-select interface="action-sheet" placeholder="请选择所属县区" cancel-text="取消" @ionChange="changeCity"
|
|
|
- id="regionCode" v-model="formState.dataModel.regionCode">
|
|
|
- <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 v-show="isShow" mode="md" :class="[v$.dataModel.regionCode.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <div style="width: 27%;">
|
|
|
+ <ion-label style="width: 100px;">所属县区<span class="danger">*</span></ion-label>
|
|
|
+ </div>
|
|
|
+ <div style="width: 73%;">
|
|
|
+ <ion-select interface="action-sheet" placeholder="请选择所属县区" cancel-text="取消" @ionChange="changeCity" style="max-width: 70%;"
|
|
|
+ id="regionCode" v-model="formState.dataModel.regionCode">
|
|
|
+ <ion-select-option v-for="(record,key) in regionList" :key="key"
|
|
|
+ v-model:value="record.code">
|
|
|
+ {{ record.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
<ion-note slot="error">所属县区不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item mode="md" :class="[v$.dataModel.streetCode.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-label>所属街道</ion-label>
|
|
|
- <ion-select interface="action-sheet" placeholder="请选择所属街道" cancel-text="取消"
|
|
|
- id="streetCode" v-model="formState.dataModel.streetCode">
|
|
|
- <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 v-show="isShow" mode="md" :class="[v$.dataModel.streetCode.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <div style="width: 27%;">
|
|
|
+ <ion-label style="width: 100px;">所属街道<span class="danger">*</span></ion-label>
|
|
|
+ </div>
|
|
|
+ <div style="width: 73%;">
|
|
|
+ <ion-select interface="action-sheet" placeholder="请选择所属街道" cancel-text="取消" style="max-width: 70%;"
|
|
|
+ id="streetCode" v-model="formState.dataModel.streetCode">
|
|
|
+ <ion-select-option v-for="(record,key) in streetList" :key="key"
|
|
|
+ v-model:value="record.code">
|
|
|
+ {{ record.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
<ion-note slot="error">所属街道不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item mode="md" :class="[v$.dataModel.companyModel.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-input label="企业规模" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-item v-show="isShow" mode="md" :class="[v$.dataModel.companyModel.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-label style="width: 100px;">企业规模<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请输入企业规模" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.companyModel">
|
|
|
</ion-input>
|
|
|
<ion-note slot="error">企业规模不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-label>企业归类</ion-label>
|
|
|
- <ion-select interface="action-sheet" placeholder="" cancel-text="取消"
|
|
|
- id="companyType" v-model="formState.dataModel.companyType">
|
|
|
- <ion-select-option v-for="(record,key) in studentStatuslist" :key="key"
|
|
|
- v-model:value="record.code">
|
|
|
- {{ record.name }}
|
|
|
- </ion-select-option>
|
|
|
- </ion-select>
|
|
|
+ <ion-item v-show="isShow">
|
|
|
+ <div style="width: 27%;">
|
|
|
+ <ion-label style="width: 100px;">企业归类</ion-label>
|
|
|
+ </div>
|
|
|
+ <div style="width: 73%;">
|
|
|
+ <ion-select interface="action-sheet" placeholder="请选择企业归类" cancel-text="取消" style="max-width: 70%;"
|
|
|
+ id="companyType" v-model="formState.dataModel.companyType">
|
|
|
+ <ion-select-option v-for="(record,key) in studentStatuslist" :key="key"
|
|
|
+ v-model:value="record.code">
|
|
|
+ {{ record.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
</ion-item>
|
|
|
- <ion-item mode="md" :class="[v$.dataModel.companyEmail.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-input label="企业邮箱" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-item v-show="isShow" mode="md" :class="[v$.dataModel.companyEmail.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-label style="width: 100px;">企业邮箱<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请选择企业邮箱" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.companyEmail">
|
|
|
</ion-input>
|
|
|
<ion-note slot="error">企业邮箱不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item mode="md" :class="[v$.dataModel.frName.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-input label="法人代表" label-placement="stacked" :clear-input="true"
|
|
|
+ <ion-item v-show="isShow" mode="md" :class="[v$.dataModel.frName.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-label style="width: 100px;">法人代表<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input placeholder="请选择法人代表" label-placement="stacked" :clear-input="true"
|
|
|
v-model="formState.dataModel.frName">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">法人代表不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item mode="md" :class="[v$.dataModel.validTime.$error?'ion-invalid':'ion-valid']">
|
|
|
- <ion-label>营业执照有效期<span class="danger">*</span></ion-label>
|
|
|
- <ion-datetime-button datetime="validTime"></ion-datetime-button>
|
|
|
- <ion-modal :keep-contents-mounted="true">
|
|
|
- <ion-datetime id="reportDate" placeholder="营业执照有效期"
|
|
|
- v-model="formState.dataModel.validTime"
|
|
|
- dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
|
|
|
- :show-default-buttons="true">
|
|
|
- </ion-datetime>
|
|
|
- </ion-modal>
|
|
|
+ <ion-item v-show="isShow" mode="md" :class="[v$.dataModel.validTime.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <div style="width: 40%;" >
|
|
|
+ <ion-label style="width: 150px;">营业执照有效期<span class="danger">*</span></ion-label>
|
|
|
+ </div>
|
|
|
+ <div style="width: 60%;">
|
|
|
+ <ion-datetime-button datetime="validTime"></ion-datetime-button>
|
|
|
+ <ion-modal :keep-contents-mounted="true" >
|
|
|
+ <ion-datetime id="validTime" placeholder="营业执照有效期"
|
|
|
+ v-model="formState.dataModel.validTime"
|
|
|
+ dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
|
|
|
+ :show-default-buttons="true">
|
|
|
+ </ion-datetime>
|
|
|
+ </ion-modal>
|
|
|
+ </div>
|
|
|
</ion-item>
|
|
|
</ion-list>
|
|
|
</form>
|
|
@@ -168,10 +212,9 @@ import {defineComponent, ref, toRefs, reactive, computed} from "vue";
|
|
|
import {getRegionList, getSiteList, getStreeList} from '@/api/company/index'
|
|
|
import {useRoute, useRouter} from "vue-router";
|
|
|
import {alertController, onIonViewDidEnter} from "@ionic/vue";
|
|
|
-import {arrowBackOutline} from 'ionicons/icons';
|
|
|
import {useVuelidate} from "@vuelidate/core";
|
|
|
-import {required} from "@vuelidate/validators";
|
|
|
-
|
|
|
+import {chevronDownOutline, chevronUpOutline, arrowBackOutline} from 'ionicons/icons';
|
|
|
+import {minLength, required} from "@vuelidate/validators";
|
|
|
interface FormState {
|
|
|
dataModel: any;
|
|
|
}
|
|
@@ -187,6 +230,7 @@ export default defineComponent({
|
|
|
desc: '企业岗位信息',
|
|
|
val: 2
|
|
|
}]);
|
|
|
+ const isShow = ref<any>(false);
|
|
|
const regionList = ref<any>([]);
|
|
|
const streetList = ref<any>([]);
|
|
|
const siteList = ref<any>([]);
|
|
@@ -196,20 +240,37 @@ export default defineComponent({
|
|
|
];
|
|
|
const rules = computed(() => {
|
|
|
return {
|
|
|
+ // dataModel: {
|
|
|
+ // companyName: {required: true},
|
|
|
+ // companyCode: {required: true},
|
|
|
+ // siteID: {required: true},
|
|
|
+ // regionCode: {required: true},
|
|
|
+ // streetCode: {required: true},
|
|
|
+ // address: {required: true},
|
|
|
+ // companyModel: {required: true},
|
|
|
+ // userName: {required: true},
|
|
|
+ // userMobile: {required: true},
|
|
|
+ // companyEmail: {required: true},
|
|
|
+ // frName: {required: true},
|
|
|
+ // validTime: {required: true},
|
|
|
+ // recordStatus: {required: true},
|
|
|
+ // insuredCount: {required: true},
|
|
|
+ // }
|
|
|
dataModel: {
|
|
|
- companyName: {required: false},
|
|
|
- companyCode: {required: false},
|
|
|
- siteID: {required: false},
|
|
|
- regionCode: {required: false},
|
|
|
- streetCode: {required: false},
|
|
|
- address: {required: false},
|
|
|
- companyModel: {required: false},
|
|
|
- userName: {required: false},
|
|
|
- userMobile: {required: false},
|
|
|
- companyEmail: {required: false},
|
|
|
- frName: {required: false},
|
|
|
- validTime: {required: false},
|
|
|
- recordStatus: {required: false},
|
|
|
+ companyName: {required},
|
|
|
+ companyCode: {required},
|
|
|
+ siteID: {required},
|
|
|
+ regionCode: {required},
|
|
|
+ streetCode: {required},
|
|
|
+ address: {required},
|
|
|
+ companyModel: {required},
|
|
|
+ userName: {required},
|
|
|
+ userMobile: {required},
|
|
|
+ companyEmail: {required},
|
|
|
+ frName: {required},
|
|
|
+ validTime: {required},
|
|
|
+ recordStatus: {required},
|
|
|
+ insuredCount: {required},
|
|
|
}
|
|
|
}
|
|
|
});
|
|
@@ -217,23 +278,16 @@ export default defineComponent({
|
|
|
|
|
|
const next = async () => {
|
|
|
const isFormCorrect = await v$.value.$validate();
|
|
|
-
|
|
|
if (!isFormCorrect) {
|
|
|
+ await presentAlert('请输入完整信息!');
|
|
|
return null;
|
|
|
}
|
|
|
- const jsonStr=JSON.stringify(formState.dataModel);
|
|
|
- localStorage.setItem("companyData",jsonStr)
|
|
|
- // router.push({path: './postList', query: {dataModel:jsonStr }});
|
|
|
- router.push({path: './postList'});
|
|
|
+ console.log(formState.dataModel);
|
|
|
+ const jsonStr = JSON.stringify(formState.dataModel);
|
|
|
+ localStorage.removeItem('companyData');
|
|
|
+ localStorage.setItem("companyData", jsonStr);
|
|
|
+ await router.push({path: './postList', query: {pageStatus: 1}});
|
|
|
}
|
|
|
-
|
|
|
- const onSave = () => {
|
|
|
- // if (!dataModel.value.name) {
|
|
|
- // presentAlert("请填写姓名!");
|
|
|
- // return false;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
const onCancel = () => {
|
|
|
router.push("./index");
|
|
|
}
|
|
@@ -263,16 +317,15 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
const initData = () => {
|
|
|
- // dataModel.value = {name: '', statusVal: 1};
|
|
|
- // loadData(id);
|
|
|
- formState.dataModel.statusVal = 1;
|
|
|
+
|
|
|
getRegionListData();
|
|
|
getSitetListData();
|
|
|
};
|
|
|
|
|
|
onIonViewDidEnter(() => {
|
|
|
- // if (route.query.reload)
|
|
|
initData();
|
|
|
+ formState.dataModel={recordStatus:1,statusVal:1};
|
|
|
+ formState.dataModel.validTime = getCurrentDate();
|
|
|
});
|
|
|
|
|
|
const presentAlert = async (message: string) => {
|
|
@@ -287,35 +340,46 @@ export default defineComponent({
|
|
|
await alert.present();
|
|
|
}
|
|
|
|
|
|
+ const getCurrentDate = () => {
|
|
|
+ const validDate = new Date();
|
|
|
+ // 获取年月日
|
|
|
+ const year = validDate.getFullYear();
|
|
|
+ const month = validDate.getMonth() + 1; // 注意月份是从0开始的,需要加1
|
|
|
+ const day = validDate.getDate();
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ }
|
|
|
+
|
|
|
return {
|
|
|
formState,
|
|
|
stepList,
|
|
|
initData,
|
|
|
- onSave,
|
|
|
onCancel,
|
|
|
next,
|
|
|
route,
|
|
|
arrowBackOutline,
|
|
|
+ chevronDownOutline,
|
|
|
+ chevronUpOutline,
|
|
|
router,
|
|
|
regionList,
|
|
|
streetList,
|
|
|
companyStatuslist,
|
|
|
changeCity,
|
|
|
v$,
|
|
|
- siteList
|
|
|
+ siteList,
|
|
|
+ isShow
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-.next-btn {
|
|
|
- width: 100%;
|
|
|
- --border-radius: 0px;
|
|
|
- --background: #f2f2f5;
|
|
|
- margin: 20px 0 0 0;
|
|
|
- color: #363432;
|
|
|
- font-size: 14px;
|
|
|
+ion-item {
|
|
|
+ --border-width: 0;
|
|
|
+ --border-style: none;
|
|
|
+
|
|
|
+ ion-label, ion-input, ion-select, ion-datetime-button {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.stepFlex {
|
|
@@ -395,6 +459,8 @@ export default defineComponent({
|
|
|
left: calc(50% - 2px);
|
|
|
position: absolute;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
+
|
|
|
</style>
|