|
@@ -9,29 +9,920 @@
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
<ion-content>
|
|
|
- jobUserInfoEdit
|
|
|
+ <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">
|
|
|
+ <div class="bw-vue-form">
|
|
|
+ <ion-list v-if="curStepData.statusVal==1">
|
|
|
+ <div class="form-title">基本信息</div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>姓名<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input name="name" id="name" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入姓名" v-model="baseData.name" >
|
|
|
+ </ion-input>
|
|
|
+ <!-- <ion-note slot="error">姓名不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>公民身份号码<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input name="identityNumber" id="identityNumber" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入身份证号码" v-model="baseData.identityNumber" ></ion-input>
|
|
|
+ <!-- <ion-note slot="error">公民身份号码不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>性别<span class="danger">*</span></ion-label>
|
|
|
+ <ion-select name="sex" id="sex" okText="确定" cancelText="取消" v-model="baseData.sex"
|
|
|
+ interface="action-sheet" placeholder="请选择性别" style="width:100%;text-align:left;" >
|
|
|
+ <ion-select-option v-for=" (it,key) in genderList" :key="key" :value="it.value" >{{ it.name }}</ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ <!-- <ion-note slot="error">性别不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>联系电话<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input name="userMobile" id="userMobile" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入联系电话" v-model="baseData.userMobile" ></ion-input>
|
|
|
+ <!-- <ion-note slot="error">联系电话不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>所属驿站<span class="danger">*</span></ion-label>
|
|
|
+ <ion-select disabled name="siteID" id="siteID" okText="确定" cancelText="取消" v-model="baseData.siteID"
|
|
|
+ interface="action-sheet" placeholder="请选择所属驿站" style="width:100%;text-align:left;">
|
|
|
+ <ion-select-option v-for=" (it,key) in siteInfoList" :key="key" :value="it.value">
|
|
|
+ {{ it.text }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ <!-- <ion-note slot="error">所属驿站不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>市/县<span class="danger">*</span></ion-label>
|
|
|
+ <ion-select class="disable" disabled name="regionCode" id="regionCode" okText="确定" cancelText="取消" v-model="baseData.regionCode"
|
|
|
+ interface="action-sheet" placeholder="请选择市/县" style="width:100%;text-align:left;" @ionChange="regionChange()" >
|
|
|
+ <ion-select-option v-for=" (it,key) in regionList" :key="key" :value="it.code">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>所在街道<span class="danger">*</span></ion-label>
|
|
|
+ <ion-select name="streetCode" id="streetCode" okText="确定" cancelText="取消" v-model="baseData.streetCode"
|
|
|
+ interface="action-sheet" placeholder="请选择镇/街" style="width:100%;text-align:left;">
|
|
|
+ <ion-select-option v-for=" (it,key) in streetList" :key="key" :value="it.code">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>住址<span class="danger">*</span></ion-label>
|
|
|
+ <ion-input name="address" id="address" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入住址" v-model="baseData.address" ></ion-input>
|
|
|
+ <!-- <ion-note slot="error">地址不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>就业状态<span class="danger">*</span></ion-label>
|
|
|
+ <ion-select name="jobStatusID" id="jobStatusID" okText="确定" cancelText="取消" v-model="baseData.jobStatusID"
|
|
|
+ interface="action-sheet" placeholder="请选择就业状态" style="width:100%;text-align:left;" >
|
|
|
+ <ion-select-option v-for=" (it,key) in jobUserStatusList" :key="key" :value="it.value">{{ it.name }}</ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ <!-- <ion-note slot="error">就业状态不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>重点人员类别<span class="danger">*</span></ion-label>
|
|
|
+ <ion-select name="keyPersonTypeID" id="keyPersonTypeID" okText="确定" cancelText="取消" v-model="baseData.keyPersonTypeID"
|
|
|
+ interface="action-sheet" placeholder="请选择重点人员类别" style="width:100%;text-align:left;" >
|
|
|
+ <ion-select-option v-for=" (it,key) in keyPersonTypeList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ <!-- <ion-note slot="error">重点人员类别不能为空</ion-note>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-title">
|
|
|
+ 其他信息
|
|
|
+ <div style="float: right;">
|
|
|
+ <ion-icon :icon="chevronDownOutline" @click="expandChange" v-if="!expand"
|
|
|
+ style="font-size: 24px;"></ion-icon>
|
|
|
+ <ion-icon :icon="chevronUpOutline" @click="expandChange" v-if="expand"
|
|
|
+ style="font-size: 24px;"></ion-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="expand">
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>民族</ion-label>
|
|
|
+ <ion-select name="nationID" id="nationID" okText="确定" cancelText="取消" v-model="baseData.nation"
|
|
|
+ interface="action-sheet" placeholder="请选择民族" style="width:100%;text-align:left;" >
|
|
|
+ <ion-select-option v-for=" (it,key) in nationTypeList" :key="key" :value="it.name">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ <!-- <ion-input name="nation" id="nation" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ v-model="baseData.nation" placeholder="请输入民族" ></ion-input>-->
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>政治面貌</ion-label>
|
|
|
+ <ion-select name="politicsStatusID" id="politicsStatusID" okText="确定" cancelText="取消" v-model="baseData.politicsStatusID"
|
|
|
+ interface="action-sheet" placeholder="请选择政治面貌" style="width:100%;text-align:left;" >
|
|
|
+ <ion-select-option v-for=" (it,key) in politicsStatusList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>出生地</ion-label>
|
|
|
+ <ion-input name="birthPlace" id="birthPlace" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ v-model="baseData.birthPlace" placeholder="请输入出生地" ></ion-input>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="form-input">
|
|
|
+ <ion-label>出生日期</ion-label>
|
|
|
+ <ion-datetime-button datetime="birthDay" style="position:relative;right:110px;"></ion-datetime-button>
|
|
|
+ <ion-modal :keep-contents-mounted="true">
|
|
|
+ <ion-datetime name="birthDay" id="birthDay" placeholder="日期"
|
|
|
+ v-model="baseData.birthDay" :prefer-wheel="true"
|
|
|
+ dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
|
|
|
+ :show-default-buttons="true">
|
|
|
+ </ion-datetime>
|
|
|
+ </ion-modal>
|
|
|
+ </div>-->
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>户口性质</ion-label>
|
|
|
+ <ion-select name="familyNatureID" id="familyNatureID" okText="确定" cancelText="取消" v-model="baseData.familyNatureID"
|
|
|
+ interface="action-sheet" placeholder="请选择户口性质" style="width:100%;text-align:left;">
|
|
|
+ <ion-select-option v-for=" (it,key) in familyNatureList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>文化程度</ion-label>
|
|
|
+ <ion-select name="cultureRank" id="cultureRank" okText="确定" cancelText="取消" v-model="baseData.cultureRank"
|
|
|
+ interface="action-sheet" placeholder="请选择文化程度" style="width:100%;text-align:left;">
|
|
|
+ <ion-select-option v-for=" (it,key) in cultureRankList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>健康状况</ion-label>
|
|
|
+ <ion-select name="healthID" id="healthID" okText="确定" cancelText="取消" v-model="baseData.healthID"
|
|
|
+ interface="action-sheet" placeholder="请选择健康状况" style="width:100%;text-align:left;">
|
|
|
+ <ion-select-option v-for=" (it,key) in userHealthList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>血型</ion-label>
|
|
|
+ <ion-select name="bloodTypeID" id="bloodTypeID" okText="确定" cancelText="取消" v-model="baseData.bloodTypeID"
|
|
|
+ interface="action-sheet" placeholder="请选择血型" style="width:100%;text-align:left;">
|
|
|
+ <ion-select-option v-for=" (it,key) in bloodTypeList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>身高(cm)</ion-label>
|
|
|
+ <ion-input name="height" id="height" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入身高" v-model="baseData.height" ></ion-input>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>视力</ion-label>
|
|
|
+ <ion-input name="vision" id="vision" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ placeholder="如1.0" v-model="baseData.vision" ></ion-input>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>体重(kg)</ion-label>
|
|
|
+ <ion-input name="weight" id="weight" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入体重" v-model="baseData.weight" ></ion-input>
|
|
|
+ </div>
|
|
|
+ <div class="form-select">
|
|
|
+ <ion-label>婚姻状况</ion-label>
|
|
|
+ <ion-select name="maritalStatusID" id="maritalStatusID" okText="确定" cancelText="取消" v-model="baseData.maritalStatusID"
|
|
|
+ interface="action-sheet" placeholder="请选择婚姻状况" style="width:100%;text-align:left;">
|
|
|
+ <ion-select-option v-for=" (it,key) in maritalStatusList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="form-select">
|
|
|
+ <ion-label>省份</ion-label>
|
|
|
+ <ion-select name="provinceCode" id="provinceCode" okText="确定" cancelText="取消" v-model="baseData.provinceCode"
|
|
|
+ interface="action-sheet" placeholder="请选择省份" style="width:100%;text-align:left;" @change="provinceChange()" >
|
|
|
+ <ion-select-option v-for=" (it,key) in provinceList" :key="key" :value="it.value">
|
|
|
+ {{ it.name }}
|
|
|
+ </ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </div>-->
|
|
|
+
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>联系人员</ion-label>
|
|
|
+ <ion-input name="userName" id="userName" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入联系人员" v-model="baseData.userName" ></ion-input>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>电子邮箱</ion-label>
|
|
|
+ <ion-input name="email" id="email" style="text-align: left;" class="custom" :clear-input="true"
|
|
|
+ placeholder="请输入电子邮箱" v-model="baseData.email" ></ion-input>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>家庭住址</ion-label>
|
|
|
+ <ion-textarea name="familyAddress" id="familyAddress" class="custom" rows="4"
|
|
|
+ placeholder="请输入家庭住址" v-model="baseData.familyAddress" style="border-bottom: 1px solid #fff2e8;"></ion-textarea>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <ion-label>兴趣爱好</ion-label>
|
|
|
+ <ion-textarea name="hobby" id="hobby" class="custom" rows="4"
|
|
|
+ placeholder="请输入兴趣爱好" v-model="baseData.hobby" style="border-bottom: 1px solid #fff2e8;" ></ion-textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ion-list>
|
|
|
+
|
|
|
+ <ion-list v-if="curStepData.statusVal==2" >
|
|
|
+ <div class="form-title">
|
|
|
+ 教育经历
|
|
|
+ <ion-icon :icon="addCircleOutline" class="iconBtn" style="float:right;"
|
|
|
+ @click="onPathForward('./educationEdit',null,null,null,2)"></ion-icon>
|
|
|
+ </div>
|
|
|
+ <div class="bw-vue-list">
|
|
|
+ <div class="list-content" v-if="!loading">
|
|
|
+ <ion-list>
|
|
|
+ <div v-for="(record,key) in educationList" :key="key" >
|
|
|
+ <ion-item-sliding>
|
|
|
+ <ion-item detail @click="onPathForward('./educationEdit',record.educationID,null,null,2)">
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{record.schoolName}}</h2>
|
|
|
+ <p>{{dayjs(record.schoolTime).format("YYYY-MM-DD")}}至{{dayjs(record.overTime).format("YYYY-MM-DD")}}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item-options>
|
|
|
+ <ion-item-option color="danger" @click="setDelAlertOpen(true, record.educationID)">
|
|
|
+ <ion-icon :icon="trashOutline"></ion-icon>
|
|
|
+ </ion-item-option>
|
|
|
+ </ion-item-options>
|
|
|
+ </ion-item-sliding>
|
|
|
+ </div>
|
|
|
+ </ion-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <b-empty v-if="educationList.length==0" :loading="loading" />
|
|
|
+ </ion-list>
|
|
|
+
|
|
|
+ <ion-list v-if="curStepData.statusVal==3" >
|
|
|
+ <div class="form-title">
|
|
|
+ 工作经验
|
|
|
+ <ion-icon :icon="addCircleOutline" class="iconBtn" style="float:right;"
|
|
|
+ @click="onPathForward('./experienceEdit',null,null,null,3)"></ion-icon>
|
|
|
+ </div>
|
|
|
+ <div class="bw-vue-list">
|
|
|
+ <div class="list-content" v-if="!loading">
|
|
|
+ <ion-list>
|
|
|
+ <div v-for="(record,key) in experienceList" :key="key">
|
|
|
+ <ion-item-sliding>
|
|
|
+ <ion-item detail @click="onPathForward('./experienceEdit',null,record.experienceID,null,3)">
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{record.workAddress}}</h2>
|
|
|
+ <p>{{dayjs(record.startTime).format("YYYY-MM-DD")}}至{{dayjs(record.endTime).format("YYYY-MM-DD")}}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item-options>
|
|
|
+ <ion-item-option color="danger" @click="setDelAlertOpen(true, record.experienceID)">
|
|
|
+ <ion-icon :icon="trashOutline"></ion-icon>
|
|
|
+ </ion-item-option>
|
|
|
+ </ion-item-options>
|
|
|
+ </ion-item-sliding>
|
|
|
+ </div>
|
|
|
+ </ion-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <b-empty v-if="experienceList.length==0" :loading="loading" />
|
|
|
+ </ion-list>
|
|
|
+
|
|
|
+ <ion-list v-if="curStepData.statusVal==4">
|
|
|
+ <div class="form-title">
|
|
|
+ 求职意向
|
|
|
+ <ion-icon :icon="addCircleOutline" class="iconBtn" style="float:right;"
|
|
|
+ @click="onPathForward('./jobHuntEdit',null,null,null,4)"></ion-icon>
|
|
|
+ </div>
|
|
|
+ <div class="bw-vue-list">
|
|
|
+ <div class="list-content" v-if="!loading">
|
|
|
+ <ion-list>
|
|
|
+ <div v-for="(record,key) in jobHuntList" :key="key">
|
|
|
+ <ion-item-sliding>
|
|
|
+ <ion-item detail @click="onPathForward('./jobHuntEdit',null,null,record.jobHuntID,4)">
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{record.professionName}}</h2>
|
|
|
+ <p>期望薪资:{{record.minSalary}}-{{record.maxSalary}}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item-options>
|
|
|
+ <ion-item-option color="danger" @click="setDelAlertOpen(true, record.jobHuntID)">
|
|
|
+ <ion-icon :icon="trashOutline"></ion-icon>
|
|
|
+ </ion-item-option>
|
|
|
+ </ion-item-options>
|
|
|
+ </ion-item-sliding>
|
|
|
+ </div>
|
|
|
+ </ion-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <b-empty v-if="jobHuntList.length==0" :loading="loading" />
|
|
|
+ </ion-list>
|
|
|
+ <ion-infinite-scroll v-if="curStepData.statusVal!=1" threshold="100px" @ionInfinite="onScroll($event)">
|
|
|
+ <ion-infinite-scroll-content
|
|
|
+ :loadingText="pageParams.total>pageParams.pageIndex*pageParams.pageSize?'正在加载...':'暂无更多'"
|
|
|
+ loadingSpinner="bubbles">
|
|
|
+ </ion-infinite-scroll-content>
|
|
|
+ </ion-infinite-scroll>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
</ion-content>
|
|
|
+ <ion-footer>
|
|
|
+ <ion-toolbar>
|
|
|
+ <ion-button style="width: 100%;" @click="onSave" v-if="curStepData.statusVal==1">保存并下一步</ion-button>
|
|
|
+ <div v-if="curStepData.statusVal!=1" >
|
|
|
+ <ion-button style="width: 48%;float:left;margin-left: 1%;" @click="onBack" >上一步</ion-button>
|
|
|
+ <ion-button style="width: 48%;margin-right: 1%;" @click="onSave" v-if="curStepData.statusVal!=4">下一步</ion-button>
|
|
|
+ <ion-button style="width: 48%;margin-right: 1%;" @click="onFinish" v-if="curStepData.statusVal==4">完 成</ion-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </ion-toolbar>
|
|
|
+ </ion-footer>
|
|
|
+ <ion-alert
|
|
|
+ :is-open="delAlertOpen"
|
|
|
+ header="删除确认"
|
|
|
+ message="确定要删除该信息吗?"
|
|
|
+ :buttons="delAlertButtons"
|
|
|
+ @didDismiss="setDelAlertOpen(false, null)"
|
|
|
+ ></ion-alert>
|
|
|
+
|
|
|
+ <ion-alert
|
|
|
+ :is-open="infoAlertOpen"
|
|
|
+ :header="infoAlterData.title"
|
|
|
+ :message="infoAlterData.message"
|
|
|
+ :buttons="infoAlertButtons"
|
|
|
+ @didDismiss="setInfoAlertOpen(false)"
|
|
|
+ ></ion-alert>
|
|
|
+ <ion-loading
|
|
|
+ :is-open="delLoading"
|
|
|
+ message="删除中..."
|
|
|
+ @didDismiss="setDelLoadingOpen(false)" >
|
|
|
+ </ion-loading>
|
|
|
</ion-page>
|
|
|
</template>
|
|
|
-<script>
|
|
|
-import {defineComponent} from "vue";
|
|
|
-import {arrowBackOutline} from 'ionicons/icons';
|
|
|
-import {useRouter} from "vue-router";
|
|
|
+<script lang="ts">
|
|
|
+import {computed, defineComponent, reactive, ref, toRefs, watch} from "vue";
|
|
|
+import {addCircleOutline, arrowBackOutline, chevronDownOutline, chevronUpOutline, trashOutline} from 'ionicons/icons';
|
|
|
+import {useRoute, useRouter} from "vue-router";
|
|
|
+import {alertController, onIonViewDidEnter} from "@ionic/vue";
|
|
|
+import {baseInfoSave, getJobUserById} from "@/api/jobUserInfo";
|
|
|
+import {required} from "@vuelidate/validators";
|
|
|
+import {useVuelidate} from "@vuelidate/core";
|
|
|
+import {post} from "@/api/common";
|
|
|
+import {getSysDictionaryList} from "@/api/system/dictionary";
|
|
|
+import {getSiteDataList} from "@/api/siteInfo";
|
|
|
+import {getRegionCodeList, getStreetCodeList} from "@/api/system/area";
|
|
|
+import {getEducationListByJobUserID} from "@/api/education";
|
|
|
+import {getExperienceListByJobUserID} from "@/api/experience";
|
|
|
+import {getJobHuntListByJobUserID} from "@/api/jobHuntInfo";
|
|
|
+import dayjs from "dayjs";
|
|
|
|
|
|
+interface SelectProps {
|
|
|
+ name: string,
|
|
|
+ value: string
|
|
|
+}
|
|
|
+interface StepParams{
|
|
|
+ loginUserID: string,
|
|
|
+ statusVal: number
|
|
|
+}
|
|
|
export default defineComponent({
|
|
|
name: "jobUserInfoEdit",
|
|
|
setup() {
|
|
|
+ const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
+ const isAllowCommit = ref(true);
|
|
|
+ const expand = ref<boolean>(false);
|
|
|
+ const loading = ref(true);
|
|
|
+ const siteInfoList = ref<SelectProps[]>([]);
|
|
|
+ const curStepData = ref<StepParams>({
|
|
|
+ loginUserID:"",
|
|
|
+ statusVal: 1
|
|
|
+ });
|
|
|
+ const stepList = ref([
|
|
|
+ {title: '基础信息', desc: '个人基础信息', val: 1},
|
|
|
+ {title: '教育经历', desc: '完善教育经历',val: 2},
|
|
|
+ {title: '工作经验', desc: '完善工作经验', val: 3},
|
|
|
+ {title: '求职意向', desc: '个人求职意向', val: 4},
|
|
|
+ ]);
|
|
|
+ const genderList = ref<SelectProps[]>([]);
|
|
|
+ const jobUserStatusList = ref<SelectProps[]>([]);
|
|
|
+ const keyPersonTypeList = ref<SelectProps[]>([]);
|
|
|
+ const cultureRankList = ref<SelectProps[]>([]);
|
|
|
+ const userHealthList = ref<SelectProps[]>([]);
|
|
|
+ const bloodTypeList = ref<SelectProps[]>([]);
|
|
|
+ const maritalStatusList = ref<SelectProps[]>([]);
|
|
|
+ const provinceList = ref<SelectProps[]>([{name:'广东省',value:'440000000000000'}]);
|
|
|
+ const nationTypeList = ref<SelectProps[]>([]);
|
|
|
+ const familyNatureList = ref([]);
|
|
|
+ const politicsStatusList = ref([]);
|
|
|
+ const regionList = ref<SelectProps[]>([]);
|
|
|
+ const streetList = ref<SelectProps[]>([]);
|
|
|
+ const educationList = ref([]);
|
|
|
+ const experienceList = ref([]);
|
|
|
+ const jobHuntList = ref([]);
|
|
|
+ const baseInfoData = reactive({
|
|
|
+ baseData:{
|
|
|
+ jobUserID:null,
|
|
|
+ siteID:null,
|
|
|
+ name:null,
|
|
|
+ identityNumber: null,
|
|
|
+ sex: null,
|
|
|
+ userMobile: null,
|
|
|
+ address: null,
|
|
|
+ jobStatusID: null,
|
|
|
+ keyPersonTypeID: null,
|
|
|
+ nation:null,
|
|
|
+ politicsStatusID:null,
|
|
|
+ birthPlace:null,
|
|
|
+ birthDay:null,
|
|
|
+ familyNatureID:null,
|
|
|
+ cultureRank:null,
|
|
|
+ healthID:null,
|
|
|
+ boolTypeID:null,
|
|
|
+ height:null,
|
|
|
+ vision:null,
|
|
|
+ weight:null,
|
|
|
+ maritalStatusID:null,
|
|
|
+ provinceCode:null,
|
|
|
+ regionCode:null,
|
|
|
+ streetCode:null,
|
|
|
+ userName:null,
|
|
|
+ familyAddress:null,
|
|
|
+ postalCode:null,
|
|
|
+ email:'',
|
|
|
+ hobby:null,
|
|
|
+ personalSkills:null,
|
|
|
+ }});
|
|
|
+ const pageParams = reactive({
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ total:0,
|
|
|
+ jobUserID:''
|
|
|
+ });
|
|
|
+ const baseDataRule = computed(()=>{
|
|
|
+ return {baseData:{
|
|
|
+ siteID:{required},
|
|
|
+ name:{required},
|
|
|
+ identityNumber:{required:true,},
|
|
|
+ sex:{required},
|
|
|
+ userMobile:{required},
|
|
|
+ address:{required},
|
|
|
+ jobStatusID:{required},
|
|
|
+ keyPersonTypeID:{required},
|
|
|
+ }}
|
|
|
+ });
|
|
|
+ const baseDataValid = useVuelidate(baseDataRule,baseInfoData);
|
|
|
+
|
|
|
+ const expandChange= ()=>{
|
|
|
+ expand.value = !expand.value;
|
|
|
+ }
|
|
|
+ // 删除警告弹窗开关
|
|
|
+ const delAlertOpen = ref(false);
|
|
|
+
|
|
|
+ // 删除数据
|
|
|
+ const delID = ref("");
|
|
|
+ const postUrl = ref("jobUserService/education/deleteEducation");
|
|
|
+ const actionName = ref("删除教育经历信息");
|
|
|
+ // 删除加载
|
|
|
+ const delLoading = ref(false);
|
|
|
+ // 信息弹窗开关
|
|
|
+ const infoAlertOpen = ref(false);
|
|
|
+ // 删除警告弹窗按钮定义
|
|
|
+ const infoAlertButtons = [
|
|
|
+ {
|
|
|
+ text: '确定',
|
|
|
+ role: 'confirm',
|
|
|
+ handler: () => {
|
|
|
+ reload(baseInfoData.baseData.jobUserID,curStepData.value.statusVal,curStepData.value.loginUserID);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // 设置要删除的教育经历
|
|
|
+ function setDelAlertOpen(value: boolean, id: any) {
|
|
|
+ delAlertOpen.value = value;
|
|
|
+ if(id != null) {
|
|
|
+ delID.value = id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 设置信息提示弹窗开关
|
|
|
+ function setInfoAlertOpen(value: boolean) {
|
|
|
+ infoAlertOpen.value = value;
|
|
|
+ }
|
|
|
+ // 设置删除弹窗开启关闭
|
|
|
+ function setDelLoadingOpen(value: boolean) {
|
|
|
+ delLoading.value = value;
|
|
|
+ }
|
|
|
+ // 信息弹窗内容
|
|
|
+ const infoAlterData = reactive({
|
|
|
+ title:"",
|
|
|
+ message:""
|
|
|
+ });
|
|
|
+
|
|
|
+ // 删除警告弹窗按钮定义
|
|
|
+ const delAlertButtons = [
|
|
|
+ {
|
|
|
+ text: '取消',
|
|
|
+ role: 'cancel',
|
|
|
+ handler: () => {
|
|
|
+ console.log("取消了删除");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '确定',
|
|
|
+ role: 'confirm',
|
|
|
+ handler: () => {
|
|
|
+ delLoading.value = true;
|
|
|
+ postUrl.value = "jobUserService/education/deleteEducation";
|
|
|
+ actionName.value = "删除教育经历";
|
|
|
+ if(curStepData.value.statusVal!=2){
|
|
|
+ postUrl.value = curStepData.value.statusVal==3 ?"jobUserService/experience/deleteExperience":"jobUserService/jobHunt/delete";
|
|
|
+ actionName.value = curStepData.value.statusVal==3 ?"删除工作经验":"删除求职意向";
|
|
|
+ }
|
|
|
+ post(postUrl.value,[delID.value],actionName.value).then((res) => {
|
|
|
+ /*infoAlterData.title = "提示";
|
|
|
+ infoAlterData.message = "删除成功";
|
|
|
+ setInfoAlertOpen(true);*/
|
|
|
+ }).finally(()=>{
|
|
|
+ delLoading.value = false;
|
|
|
+ reload(baseInfoData.baseData.jobUserID,curStepData.value.statusVal,curStepData.value.loginUserID);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const presentAlert = async (message: string) => {
|
|
|
+ const alert = await alertController.create({
|
|
|
+ header: '错误!',
|
|
|
+ message: message,
|
|
|
+ buttons: [
|
|
|
+ '确定'
|
|
|
+ ],
|
|
|
+ });
|
|
|
+
|
|
|
+ await alert.present();
|
|
|
+ }
|
|
|
+
|
|
|
const onBack = () => {
|
|
|
- router.push('/jobUserInfo/index');
|
|
|
+ curStepData.value.statusVal-=1;
|
|
|
+ if(curStepData.value.statusVal > 0){
|
|
|
+ router.push({path:"/jobUserInfo/userEdit", query: {reload:0,educationID:null,jobHuntID:null,jobUserID: baseInfoData.baseData.jobUserID,status:curStepData.value.statusVal,loginUserId:curStepData.value.loginUserID}});
|
|
|
+ }else{
|
|
|
+ router.push('/jobUserInfo/index');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const inputDataValidate = () =>{
|
|
|
+ isAllowCommit.value = true;
|
|
|
+ const identReg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
|
|
|
+ if(baseInfoData.baseData.identityNumber != null){
|
|
|
+ if(!identReg.test(baseInfoData.baseData.identityNumber)){
|
|
|
+ presentAlert("输入的身份证号码有误!");
|
|
|
+ isAllowCommit.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const mobileReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
|
|
|
+ if(baseInfoData.baseData.userMobile != null){
|
|
|
+ if(!mobileReg.test(baseInfoData.baseData.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(baseInfoData.baseData.email!=""&&baseInfoData.baseData.email!=null){
|
|
|
+ if(!emailReg.test(baseInfoData.baseData.email)){
|
|
|
+ presentAlert("输入的电子邮箱有误!");
|
|
|
+ isAllowCommit.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSave = async function (){
|
|
|
+ if (curStepData.value.statusVal==1){
|
|
|
+ const isFormCorrect = await baseDataValid.value.$validate();
|
|
|
+ if(!isFormCorrect){
|
|
|
+ await presentAlert("请填写完整的信息!");
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ inputDataValidate();
|
|
|
+ if(isAllowCommit.value){
|
|
|
+ baseInfoSave(baseInfoData.baseData).then(result => {
|
|
|
+ if (result) {
|
|
|
+ router.push({path: '/jobUserInfo/userEdit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:2,loginUserId:curStepData.value.loginUserID}});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (curStepData.value.statusVal==2){
|
|
|
+ await router.push({path: '/jobUserInfo/userEdit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:3,loginUserId:curStepData.value.loginUserID}});
|
|
|
+ }else if (curStepData.value.statusVal==3){
|
|
|
+ await router.push({path: '/jobUserInfo/userEdit', query: {reload:0,jobUserID: baseInfoData.baseData.jobUserID,status:4,loginUserId:curStepData.value.loginUserID}});
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const onPathForward = (pathValue:string,educationIDValue:any,experienceIDValue:any,jobHuntIDValue:any,statusValue:any)=>{
|
|
|
+ console.log("userid",baseInfoData.baseData.jobUserID);
|
|
|
+ router.push({path: pathValue, query: {reload:1,educationID:educationIDValue,experienceID:experienceIDValue,jobHuntID:jobHuntIDValue,jobUserID: baseInfoData.baseData.jobUserID,status:statusValue,loginUserID:curStepData.value.loginUserID}});
|
|
|
+ }
|
|
|
+
|
|
|
+ const onScroll = (e: any) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ e.target.complete();
|
|
|
+ if (pageParams.total > pageParams.pageIndex * pageParams.pageSize) {
|
|
|
+ pageParams.pageSize += 5;
|
|
|
+ loadData(pageParams.jobUserID,curStepData.value.statusVal,curStepData.value.loginUserID);
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+
|
|
|
+ const onFinish = () => {
|
|
|
+ router.push('/jobUserInfo/finish');
|
|
|
+ }
|
|
|
+
|
|
|
+ /*下拉字典查询*/
|
|
|
+ const getSelectorDataList = async function(){
|
|
|
+ const genderResult :any = await getSysDictionaryList("Gender");
|
|
|
+ genderList.value = genderResult;
|
|
|
+ const jobUserStatusResult :any = await getSysDictionaryList("JobStatus");
|
|
|
+ jobUserStatusList.value = jobUserStatusResult;
|
|
|
+ const keyPersonTypeResult :any = await getSysDictionaryList("KeyPersonType");
|
|
|
+ keyPersonTypeList.value = keyPersonTypeResult;
|
|
|
+ const cultureRankResult :any = await getSysDictionaryList("CultureLevel");
|
|
|
+ cultureRankList.value = cultureRankResult;
|
|
|
+ const userHealthResult :any = await getSysDictionaryList("Health");
|
|
|
+ userHealthList.value = userHealthResult;
|
|
|
+ const bloodTypeResult :any = await getSysDictionaryList("BloodType");
|
|
|
+ bloodTypeList.value = bloodTypeResult;
|
|
|
+ const maritalStatusResult :any = await getSysDictionaryList("MaritalStatus");
|
|
|
+ maritalStatusList.value = maritalStatusResult;
|
|
|
+ const politicsStatusResult :any = await getSysDictionaryList("PoliticsStatus");
|
|
|
+ politicsStatusList.value = politicsStatusResult;
|
|
|
+ const familyNatureResult :any = await getSysDictionaryList("FamilyNature");
|
|
|
+ familyNatureList.value = familyNatureResult;
|
|
|
+ const nationTypeListResult :any = await getSysDictionaryList("NationType");
|
|
|
+ nationTypeList.value = nationTypeListResult;
|
|
|
}
|
|
|
+
|
|
|
+ const getSiteInfoList = async function(){
|
|
|
+ const siteInfoResult :any = await getSiteDataList();
|
|
|
+ siteInfoList.value = siteInfoResult;
|
|
|
+ }
|
|
|
+ const getRegionList = async function(){
|
|
|
+ const regionResult: any = await getRegionCodeList();
|
|
|
+ regionList.value = regionResult;
|
|
|
+ }
|
|
|
+ const getStreetList = async function(){
|
|
|
+ if (baseInfoData.baseData.regionCode != null){
|
|
|
+ const streetResult: any = await getStreetCodeList(baseInfoData.baseData.regionCode);
|
|
|
+ streetList.value = streetResult;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const regionChange = async function(){
|
|
|
+ baseInfoData.baseData.streetCode = null;
|
|
|
+ await getStreetList();
|
|
|
+ }
|
|
|
+ const provinceChange = async function(){
|
|
|
+ baseInfoData.baseData.regionCode = null;
|
|
|
+ await getRegionList();
|
|
|
+ await regionChange();
|
|
|
+ }
|
|
|
+
|
|
|
+ const loadData = async (jobUserID: any,status:any,userId:any) => {
|
|
|
+ loading.value = true;
|
|
|
+ pageParams.jobUserID = jobUserID;
|
|
|
+ baseInfoData.baseData.jobUserID = jobUserID;
|
|
|
+ curStepData.value.statusVal = status;
|
|
|
+ curStepData.value.loginUserID = userId;
|
|
|
+ console.log("当前curStepData",curStepData.value);
|
|
|
+ if(curStepData.value.statusVal==1){
|
|
|
+ const reqData = await getJobUserById(jobUserID,userId);
|
|
|
+ baseInfoData.baseData = reqData;
|
|
|
+ console.log('baseData',baseInfoData.baseData);
|
|
|
+ await getStreetList();
|
|
|
+ }
|
|
|
+ else if(curStepData.value.statusVal==2){
|
|
|
+ const reqData :any = await getEducationListByJobUserID(pageParams);
|
|
|
+ educationList.value = reqData.list;
|
|
|
+ pageParams.total = reqData.total;
|
|
|
+ console.log("educationList",educationList.value);
|
|
|
+ }
|
|
|
+ else if(curStepData.value.statusVal==3){
|
|
|
+ const reqData = await getExperienceListByJobUserID(pageParams);
|
|
|
+ experienceList.value= reqData.list;
|
|
|
+ pageParams.total = reqData.total;
|
|
|
+ console.log("experienceList",experienceList.value);
|
|
|
+ }
|
|
|
+ else if(curStepData.value.statusVal==4){
|
|
|
+ const reqData = await getJobHuntListByJobUserID(pageParams);
|
|
|
+ jobHuntList.value= reqData.list;
|
|
|
+ pageParams.total = reqData.total;
|
|
|
+ console.log("jobHuntList",jobHuntList.value);
|
|
|
+ }
|
|
|
+ loading.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ watch(() => route.query, () => {
|
|
|
+ if (route.query.reload) {
|
|
|
+ loadData(route.query.jobUserID,route.query.status,route.query.loginUserId);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const reload = (jobUserID:any,status:any,userId:any) => {
|
|
|
+ pageParams.pageIndex = 1;
|
|
|
+ expand.value = false;
|
|
|
+ console.log("status",status);
|
|
|
+ loadData(jobUserID,status,userId);
|
|
|
+ }
|
|
|
+
|
|
|
+ onIonViewDidEnter(() => {
|
|
|
+ if (route.query.reload)
|
|
|
+ reload(route.query.jobUserID,route.query.status,route.query.loginUserId);
|
|
|
+ });
|
|
|
+
|
|
|
return {
|
|
|
+ ...toRefs(baseInfoData),
|
|
|
+ chevronDownOutline,
|
|
|
+ chevronUpOutline,
|
|
|
arrowBackOutline,
|
|
|
- onBack
|
|
|
+ addCircleOutline,
|
|
|
+ trashOutline,
|
|
|
+ route,
|
|
|
+ router,
|
|
|
+ expand,
|
|
|
+ loading,
|
|
|
+ stepList,
|
|
|
+ curStepData,
|
|
|
+ baseDataValid,
|
|
|
+ siteInfoList,
|
|
|
+ genderList,
|
|
|
+ nationTypeList,
|
|
|
+ familyNatureList,
|
|
|
+ politicsStatusList,
|
|
|
+ pageParams,
|
|
|
+ jobUserStatusList,
|
|
|
+ keyPersonTypeList,
|
|
|
+ cultureRankList,
|
|
|
+ userHealthList,
|
|
|
+ bloodTypeList,
|
|
|
+ maritalStatusList,
|
|
|
+ provinceList,
|
|
|
+ regionList,
|
|
|
+ streetList,
|
|
|
+ educationList,
|
|
|
+ experienceList,
|
|
|
+ jobHuntList,
|
|
|
+ delID,
|
|
|
+ delAlertButtons,
|
|
|
+ infoAlertButtons,
|
|
|
+ delAlertOpen,
|
|
|
+ infoAlertOpen,
|
|
|
+ delLoading,
|
|
|
+ infoAlterData,
|
|
|
+ expandChange,
|
|
|
+ provinceChange,
|
|
|
+ regionChange,
|
|
|
+ onSave,
|
|
|
+ onBack,
|
|
|
+ onFinish,
|
|
|
+ onScroll,
|
|
|
+ onPathForward,
|
|
|
+ loadData,
|
|
|
+ reload,
|
|
|
+ setDelAlertOpen,
|
|
|
+ setInfoAlertOpen,
|
|
|
+ setDelLoadingOpen,
|
|
|
+ getSiteInfoList,
|
|
|
+ getSelectorDataList,
|
|
|
+ getRegionList,
|
|
|
+ getStreetList,
|
|
|
+ dayjs
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getSiteInfoList();
|
|
|
+ this.getSelectorDataList();
|
|
|
+ this.getRegionList();
|
|
|
+ this.getStreetList();
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
+ion-select#siteID.md.select-disabled.legacy-select::after{display: none;}
|
|
|
+ion-select#regionCode.md.select-disabled.legacy-select::after{display: none;}
|
|
|
+.custom{
|
|
|
+ --placeholder-color: gray;
|
|
|
+ --placeholder-opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.title-item{
|
|
|
+ margin-left: 15px;
|
|
|
+ color:#1c3d70 !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.next-btn {
|
|
|
+ width: 80px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color:#3a7be0;
|
|
|
+ color: #363432;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.iconBtn{
|
|
|
+ width:24px;
|
|
|
+ height:24px;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|