|
@@ -14,9 +14,9 @@
|
|
|
<div class="stepFlex">
|
|
|
<div v-for="(record,key) in stepList" :key="key" class="stepFlex-item">
|
|
|
<div
|
|
|
- :class="[(record.val < dataModel?.statusVal || dataModel?.statusVal==stepList[stepList.length-1].val) ? 'greenCircle' :record.val == dataModel?.statusVal ? 'now' : 'greyCircle']"></div>
|
|
|
+ :class="[(record.val <formState.dataModel?.statusVal || formState.dataModel?.statusVal==stepList[stepList.length-1].val) ? 'greenCircle' :record.val == formState.dataModel?.statusVal ? 'now' : 'greyCircle']"></div>
|
|
|
<div v-if="key !== stepList.length - 1"
|
|
|
- :class="[record.val < dataModel?.statusVal ? 'greenline' : 'greyline']"></div>
|
|
|
+ :class="[record.val < formState.dataModel?.statusVal ? 'greenline' : 'greyline']"></div>
|
|
|
<div class="stepFlex-item-label">
|
|
|
<p class="stepFlex-item-label-title">{{ record.title }}</p>
|
|
|
<p class="stepFlex-item-label-desc">{{ record.desc }}</p>
|
|
@@ -26,89 +26,154 @@
|
|
|
<form autocomplete="off">
|
|
|
<ion-list>
|
|
|
<ion-item>
|
|
|
- <ion-input label="企业名称" label-placement="stacked" :clear-input="true" >
|
|
|
- </ion-input>
|
|
|
+ <div class="panel-title2">
|
|
|
+ <div class="item-flag"></div>
|
|
|
+ 基本信息
|
|
|
+ </div>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="统一信用代码" label-placement="stacked" :clear-input="true"
|
|
|
- >
|
|
|
+ <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"
|
|
|
+ v-model="formState.dataModel.companyCode">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">统一信用代码不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="所属驿站" label-placement="stacked" :clear-input="true" >
|
|
|
+ <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"
|
|
|
+ v-model="formState.dataModel.companyName">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">企业名称不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="所属县区" label-placement="stacked" :clear-input="true" >
|
|
|
- </ion-input>
|
|
|
+ <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>
|
|
|
+ <ion-note slot="error">服务驿站不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="所属街道" label-placement="stacked" :clear-input="true" >
|
|
|
+ <ion-item mode="md" :class="[v$.dataModel.address.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-input label="企业办公地址" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="formState.dataModel.address">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">企业办公地址不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="企业办公地址" label-placement="stacked" :clear-input="true" >
|
|
|
+ <ion-item mode="md" :class="[v$.dataModel.address.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-input label="企业联系人" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="formState.dataModel.userName">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">企业联系人不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="用工情况" label-placement="stacked" :clear-input="true" >
|
|
|
+ <ion-item mode="md" :class="[v$.dataModel.userMobile.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-input label="企业联系电话" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="formState.dataModel.userMobile">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">企业联系电话不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="企业规模" label-placement="stacked" :clear-input="true" >
|
|
|
- </ion-input>
|
|
|
+ <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>
|
|
|
+ <ion-note slot="error">企业状态不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
<ion-item>
|
|
|
- <ion-input label="企业归类" label-placement="stacked" :clear-input="true" >
|
|
|
- </ion-input>
|
|
|
+ <div class="panel-title2">
|
|
|
+ <div class="item-flag"></div>
|
|
|
+ 其他信息
|
|
|
+ </div>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="企业联系人" label-placement="stacked" :clear-input="true" >
|
|
|
- </ion-input>
|
|
|
+ <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-note slot="error">所属县区不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="企业联系电话" label-placement="stacked" :clear-input="true" >
|
|
|
- </ion-input>
|
|
|
+ <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-note slot="error">所属街道不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="企业邮箱" label-placement="stacked" :clear-input="true" >
|
|
|
+ <ion-item mode="md" :class="[v$.dataModel.companyModel.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-input label="企业规模" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="formState.dataModel.companyModel">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">企业规模不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
<ion-item>
|
|
|
- <ion-input label="法人代表" label-placement="stacked" :clear-input="true" >
|
|
|
- </ion-input>
|
|
|
+ <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>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="营业执照有效期" label-placement="stacked" :clear-input="true" >
|
|
|
+ <ion-item mode="md" :class="[v$.dataModel.companyEmail.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-input label="企业邮箱" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="formState.dataModel.companyEmail">
|
|
|
</ion-input>
|
|
|
+ <ion-note slot="error">企业邮箱不能为空</ion-note>
|
|
|
</ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input label="企业状态" label-placement="stacked" :clear-input="true" >
|
|
|
+ <ion-item mode="md" :class="[v$.dataModel.frName.$error?'ion-invalid':'ion-valid']">
|
|
|
+ <ion-input label="法人代表" label-placement="stacked" :clear-input="true"
|
|
|
+ v-model="formState.dataModel.frName">
|
|
|
</ion-input>
|
|
|
</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>
|
|
|
</ion-list>
|
|
|
- <ion-button class="next-btn">下一步
|
|
|
- </ion-button>
|
|
|
</form>
|
|
|
</ion-content>
|
|
|
- <!-- <ion-footer>
|
|
|
- <div>
|
|
|
- <ion-button @click="onSave">下一步</ion-button>
|
|
|
- </div>
|
|
|
- </ion-footer>-->
|
|
|
+ <ion-footer>
|
|
|
+ <ion-toolbar>
|
|
|
+ <div slot="end">
|
|
|
+ <ion-button shape="round" expand="block" @click="next">下一步</ion-button>
|
|
|
+ </div>
|
|
|
+ </ion-toolbar>
|
|
|
+ </ion-footer>
|
|
|
</ion-page>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import {defineComponent, ref, watch} from "vue";
|
|
|
-/*import {getPracticeBaseForStudentList,getSysAreaList} from "@/api/system/dictionary";
|
|
|
-import {get, save} from "@/api/practice/intention";*/
|
|
|
+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";
|
|
|
|
|
|
-interface DataModel {
|
|
|
- name: string,
|
|
|
- statusVal: number
|
|
|
+interface FormState {
|
|
|
+ dataModel: any;
|
|
|
}
|
|
|
|
|
|
export default defineComponent({
|
|
@@ -116,50 +181,98 @@ export default defineComponent({
|
|
|
setup() {
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
- const dataModel = ref<DataModel>({
|
|
|
- name: '',
|
|
|
- statusVal: 1
|
|
|
- });
|
|
|
+ const formState = reactive<FormState>({dataModel: {}});
|
|
|
const stepList = ref([{title: '基础信息', desc: '企业基础信息', val: 1}, {
|
|
|
title: '岗位信息',
|
|
|
desc: '企业岗位信息',
|
|
|
val: 2
|
|
|
}]);
|
|
|
+ const regionList = ref<any>([]);
|
|
|
+ const streetList = ref<any>([]);
|
|
|
+ const siteList = ref<any>([]);
|
|
|
+ const companyStatuslist = [
|
|
|
+ {value: 1, name: '在营'},
|
|
|
+ {value: 0, name: '关闭'},
|
|
|
+ ];
|
|
|
+ const rules = computed(() => {
|
|
|
+ return {
|
|
|
+ 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},
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const v$ = useVuelidate(rules, formState);
|
|
|
|
|
|
- const onSave = () => {
|
|
|
- if (!dataModel.value.name) {
|
|
|
- presentAlert("请填写姓名!");
|
|
|
- return false;
|
|
|
+ const next = async () => {
|
|
|
+ const isFormCorrect = await v$.value.$validate();
|
|
|
+
|
|
|
+ if (!isFormCorrect) {
|
|
|
+ return null;
|
|
|
}
|
|
|
+ const jsonStr=JSON.stringify(formState.dataModel);
|
|
|
+ localStorage.setItem("companyData",jsonStr)
|
|
|
+ // router.push({path: './postList', query: {dataModel:jsonStr }});
|
|
|
+ router.push({path: './postList'});
|
|
|
+ }
|
|
|
|
|
|
- /*save(dataModel.value as any).then(result => {
|
|
|
- if (result) {
|
|
|
- router.push({path: './index', query: {reload: 1}});
|
|
|
- }
|
|
|
- });*/
|
|
|
+ const onSave = () => {
|
|
|
+ // if (!dataModel.value.name) {
|
|
|
+ // presentAlert("请填写姓名!");
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
const onCancel = () => {
|
|
|
router.push("./index");
|
|
|
}
|
|
|
|
|
|
- const loadData = (practiceTaskStudentID: any) => {
|
|
|
- /*get(practiceTaskStudentID).then((result: any) => {
|
|
|
- dataModel.value = result;
|
|
|
+ const getRegionListData = () => {
|
|
|
+ getRegionList({}).then(data => {
|
|
|
+ regionList.value = data;
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- loadPracticeBaseList(dataModel.value.schoolYearID);
|
|
|
- loadCityList();
|
|
|
- });*/
|
|
|
- };
|
|
|
+ const getStreetListData = (code: any) => {
|
|
|
+ getStreeList({code: code}).then(data => {
|
|
|
+ streetList.value = data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const getSitetListData = () => {
|
|
|
+ getSiteList({}).then(data => {
|
|
|
+ siteList.value = data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const changeCity = () => {
|
|
|
+ console.log(formState.dataModel.regionCode);
|
|
|
+ if (formState.dataModel.regionCode)
|
|
|
+ getStreetListData(formState.dataModel.regionCode);
|
|
|
+ }
|
|
|
|
|
|
- const initData = (id: any) => {
|
|
|
- dataModel.value = {name: '', statusVal: 1};
|
|
|
- loadData(id);
|
|
|
+ const initData = () => {
|
|
|
+ // dataModel.value = {name: '', statusVal: 1};
|
|
|
+ // loadData(id);
|
|
|
+ formState.dataModel.statusVal = 1;
|
|
|
+ getRegionListData();
|
|
|
+ getSitetListData();
|
|
|
};
|
|
|
|
|
|
onIonViewDidEnter(() => {
|
|
|
- if (route.query.reload)
|
|
|
- initData(route.query.id);
|
|
|
+ // if (route.query.reload)
|
|
|
+ initData();
|
|
|
});
|
|
|
|
|
|
const presentAlert = async (message: string) => {
|
|
@@ -175,14 +288,21 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
- dataModel,
|
|
|
+ formState,
|
|
|
stepList,
|
|
|
initData,
|
|
|
onSave,
|
|
|
onCancel,
|
|
|
+ next,
|
|
|
route,
|
|
|
arrowBackOutline,
|
|
|
router,
|
|
|
+ regionList,
|
|
|
+ streetList,
|
|
|
+ companyStatuslist,
|
|
|
+ changeCity,
|
|
|
+ v$,
|
|
|
+ siteList
|
|
|
}
|
|
|
}
|
|
|
});
|