|
@@ -1,232 +0,0 @@
|
|
|
-<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[stepList.length-1].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>
|
|
|
- <div>
|
|
|
- <ion-label style="text-align: center;color:#46b0e0;">
|
|
|
- <h2 style="font-size: 28px;">
|
|
|
- {{ dataModel.companyName == null?"":dataModel.companyName }}
|
|
|
- </h2>
|
|
|
- </ion-label>
|
|
|
- </div>
|
|
|
- <ion-grid>
|
|
|
- <ion-row class="ion-justify-content-center">
|
|
|
- <ion-col size="4">
|
|
|
- <ion-button expand="block" style="display: inline-block; width: 120px;height:45px;font-size: 20px;" @click="onPathForward('./edit',1)">信息维护</ion-button>
|
|
|
- </ion-col>
|
|
|
- <ion-col size="4" >
|
|
|
- <ion-button expand="block" style="display: inline-block; width: 120px;height:45px;font-size: 20px;" @click="onPathForward('./postList',3)">岗位管理</ion-button>
|
|
|
- </ion-col>
|
|
|
- </ion-row>
|
|
|
- </ion-grid>
|
|
|
- </ion-content>
|
|
|
- <ion-footer>
|
|
|
- </ion-footer>
|
|
|
- </ion-page>
|
|
|
-</template>
|
|
|
-<script lang="ts">
|
|
|
-import {defineComponent, ref, reactive, watch, toRefs} from "vue";
|
|
|
-import {getCompanyById} from "@/api/company";
|
|
|
-import {useRoute, useRouter} from "vue-router";
|
|
|
-import {onIonViewDidEnter} from "@ionic/vue";
|
|
|
-import {arrowBackOutline} from 'ionicons/icons';
|
|
|
-
|
|
|
-interface StepParams{
|
|
|
- name: string,
|
|
|
- statusVal: number
|
|
|
-}
|
|
|
-
|
|
|
-interface FormData{
|
|
|
- dataModel:any
|
|
|
-}
|
|
|
-export default defineComponent({
|
|
|
- name: 'CompanyMenu',
|
|
|
- setup() {
|
|
|
- const router = useRouter();
|
|
|
- const route = useRoute();
|
|
|
- const curStepData = ref<StepParams>({
|
|
|
- name:"",
|
|
|
- statusVal: 1
|
|
|
- });
|
|
|
- const loading = ref<boolean>(false);
|
|
|
- const formData = reactive<FormData>({
|
|
|
- dataModel: {
|
|
|
- companyID:null,
|
|
|
- companyName:null
|
|
|
- }
|
|
|
- });
|
|
|
- const stepList = ref([
|
|
|
- {title: '基础信息', desc: '企业基础信息', val: 1},
|
|
|
- {title: '', desc: '', val: 2},
|
|
|
- {title: '岗位信息', desc: '企业岗位信息', val: 3}
|
|
|
- ]);
|
|
|
-
|
|
|
- const onBack=()=>{
|
|
|
- router.push({path:'./list',query:{reload:1}});
|
|
|
- };
|
|
|
-
|
|
|
- const onPathForward = (pathValue:string,statusValue:any)=>{
|
|
|
- router.push({path: pathValue, query: {reload:1,id:formData.dataModel.companyID,status:statusValue}});
|
|
|
- };
|
|
|
-
|
|
|
- const loadData = async (companyID:any,status:any)=>{
|
|
|
- loading.value = true;
|
|
|
- curStepData.value.statusVal = status;
|
|
|
- console.log(companyID);
|
|
|
- const reqData = await getCompanyById(companyID,"60ea0d5b-a75c-11ed-a6c5-7085c2a9999e");
|
|
|
- formData.dataModel = reqData;
|
|
|
- console.log("dataModel",formData.dataModel);
|
|
|
- loading.value = false;
|
|
|
- };
|
|
|
-
|
|
|
- const reload = (companyID:any,status:any) => {
|
|
|
- loadData(companyID,status);
|
|
|
- };
|
|
|
-
|
|
|
- watch(() => route.query, () => {
|
|
|
- if (route.query.reload) {
|
|
|
- reload(route.query.id,route.query.status);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- onIonViewDidEnter(() => {
|
|
|
- if (route.query.reload) {
|
|
|
- reload(route.query.id,route.query.status)
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- return {
|
|
|
- ...toRefs(formData),
|
|
|
- arrowBackOutline,
|
|
|
- route,
|
|
|
- loading,
|
|
|
- stepList,
|
|
|
- curStepData,
|
|
|
- onPathForward,
|
|
|
- onBack,
|
|
|
- loadData,
|
|
|
- router,
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- const companyID = this.route.query.id;
|
|
|
- const status = this.route.query.status;
|
|
|
- this.loadData(companyID,status);
|
|
|
- }
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
-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>
|