Skip to content

M
mongo-ui
Commit 8e760aa0 authored by 郭志伟's avatar 郭志伟
Browse files
Options

fix: 解决地区、日期、工作码表选择器默认值问题

parent f919352d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2433 additions and 493 deletions
src/api/jobs.js
View file @ 8e760aa0
This diff is collapsed.
src/components/LoginModal.vue
View file @ 8e760aa0
......@@ -109,6 +109,7 @@ export default {
if (res && !this.timer) {
this.count = TIME_COUNT;
this.showCount = true;
this.$notify({ type: "success", message: "短信验证码已发送，请注意查收" });
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
......
src/components/PopupAreaPicker.vue
View file @ 8e760aa0
......@@ -9,7 +9,7 @@
<svg-icon icon-class="triangle-right" slot="button" />
</div>
<cr-popup v-model="show" position="bottom" get-container="body">
<cr-area ref="area" :list="areaList" @cancel="onCancel" @confirm="onConfirm" />
<cr-area ref="area" :value="value" :list="areaList" @cancel="onCancel" @confirm="onConfirm" />
</cr-popup>
</div>
</template>
......@@ -23,19 +23,49 @@ export default {
data() {
return {
refName: "area",
areaList
areaList,
pickerDefaultVal: ""
};
},
watch: {
value(val) {
if (val) {
this.setDefaultVal(false);
}
}
},
methods: {
handleResult(res) {
let valShow = [];
let val = [];
res.forEach(item => {
valShow.push(item.name);
valShow.push(item.name || item.text);
val.push(item.code);
});
this.pickerValShow = valShow.join(",");
this.pickerVal = val;
this.pickerVal = val[2];
},
setDefaultVal(setCol = true) {
setTimeout(() => {
const $area = this.$refs.area;
const $picker = $area.$refs.picker;
const val = this.value;
let columns = "";
$area.selectedCodes = [`${val.substring(0, 2)}0000`, `${val.substring(0, 4)}00`, val];
$area.renderProvince();
// 防止refresh把数据刷没
columns = JSON.parse(JSON.stringify($area.columns));
if (setCol) {
$picker.setColumnIndex(0, columns[0].selectedIndex);
$picker.setColumnIndex(1, columns[1].selectedIndex);
$picker.setColumnIndex(2, columns[2].selectedIndex);
} else {
const province = columns[0].values[columns[0].selectedIndex];
const city = columns[1].values[columns[1].selectedIndex];
const country = columns[2].values[columns[2].selectedIndex];
this.handleResult([province, city, country]);
}
});
}
}
};
......
src/components/PopupCascade.vue
View file @ 8e760aa0
<template>
<div class="jobs-wrap">
<div class="jobs-wrap-txt" :class="{ placeholder: !selectedTexts.length }" @click="show = true">
<span>{{ selectedTexts[1] || placeholder }}</span>
<div class="jobs-wrap-txt" :class="{ placeholder: !selectedTexts[2] }" @click="show = true">
<span>{{ selectedTexts[2] || placeholder }}</span>
<svg-icon icon-class="triangle-right" slot="button" />
</div>
<cr-popup v-model="show" get-container="body" round closeable position="bottom" class="jobs">
<div class="jobs-head">
<div class="jobs-title">请选择</div>
<div class="jobs-title">请选择职业</div>
<cr-divider :hairline="false" :style="{ color: '#F4F4F4', margin: 0 }" />
</div>
<!-- content -->
......@@ -17,7 +17,7 @@
v-for="(item, index) in industry"
:key="index"
:class="{ active: columns[0].values.length > 0 && index === columns[0].selectedIndex }"
@click="changeIndustry(item, index)"
@click.stop="changeIndustry(item, index)"
>
<div class="jobs-item-txt">
<span>{{ item.text }}</span>
......@@ -30,10 +30,30 @@
<div
class="jobs-item"
v-for="(it, idx) in columns[1].values"
:class="{
active: columns[1].values.length > 0 && idx === columns[1].selectedIndex
}"
:key="idx"
@click="changeProfession(it, idx)"
@click.stop="changeCategory(it, idx)"
>
<div class="jobs-item-txt">{{ it.text }}</div>
<div class="jobs-item-txt">
<span>{{ it.text }}</span>
<cr-icon type="arrow" />
</div>
<div
class="jobs-children jobs-leaf"
v-if="columns[2].values.length > 0 && idx === columns[1].selectedIndex"
>
<div
class="jobs-item"
v-for="(itc, idxc) in columns[2].values"
:key="idxc"
@click.stop="changeProfession(itc, idxc)"
>
<div class="jobs-item-txt">{{ itc.text }}</div>
</div>
</div>
<cr-divider />
</div>
</div>
<cr-divider />
......@@ -45,6 +65,7 @@
</template>
<script>
// TODO 组件目前只针对职业码表处理，有待优化
/**
* @description: 职业码表
* @param {type}
......@@ -54,17 +75,26 @@ import popupPickerMixin from "../mixins/popupPicker.mixin.js";
import jobs from "@/api/jobs";
const CHANGE_EVENT = "input";
const INDUSTRY_INDEX = 0;
const PROFESSION_INDEX = 1;
const CATEGORY_INDEX = 1;
const PROFESSION_INDEX = 2;
export default {
name: "PopupCascade",
mixins: [popupPickerMixin],
props: {
value: null
value: null,
isLite: {
type: Boolean,
default: false
}
},
watch: {
// value(val) {
// this.popupShow = val;
// },
value(val) {
if (val) {
const value = "" + val;
this.selectedCodes = [value.substring(0, 1), value.substring(0, 3), value];
this.renderIndustry();
}
},
popupShow(val) {
this.$emit(CHANGE_EVENT, val);
}
......@@ -79,8 +109,18 @@ export default {
};
});
},
category() {
const list = this.jobs[this.categoryKey];
return Object.keys(list).map(key => {
return {
code: key,
text: list[key]
};
});
},
profession() {
const list = this.jobs[this.professionKey];
const key = this.isLite ? this.professionLiteKey : this.professionKey;
const list = this.jobs[key];
return Object.keys(list).map(key => {
return {
code: key,
......@@ -94,7 +134,9 @@ export default {
show: false,
jobs,
industryKey: "industry",
categoryKey: "category",
professionKey: "profession",
professionLiteKey: "professionLite",
columns: [],
selectedCodes: [],
selectedTexts: []
......@@ -103,10 +145,10 @@ export default {
created() {
if (this.value) {
const value = "" + this.value;
this.selectedCodes = [value.substring(0, 4), value];
this.selectedCodes = [value.substring(0, 1), value.substring(0, 3), value];
}
for (let i = 0; i < 2; i++) {
for (let i = 0; i < 3; i++) {
this.columns[i] = {
values: [],
selectedIndex: ""
......@@ -118,16 +160,33 @@ export default {
},
methods: {
changeIndustry(item, index) {
this.columns[INDUSTRY_INDEX].selectedIndex = index;
this.selectedCodes[INDUSTRY_INDEX] = item.code;
this.selectedTexts[INDUSTRY_INDEX] = item.text;
this.renderProfession(item.code);
if (index === this.columns[INDUSTRY_INDEX].selectedIndex) {
this.columns[INDUSTRY_INDEX].selectedIndex = "";
this.$forceUpdate();
} else {
this.columns[INDUSTRY_INDEX].selectedIndex = index;
this.setValueOfSelected(item, INDUSTRY_INDEX);
this.renderCategory(item.code);
}
this.columns[CATEGORY_INDEX].selectedIndex = "";
this.columns[PROFESSION_INDEX].selectedIndex = "";
},
changeCategory(item, index) {
if (index === this.columns[CATEGORY_INDEX].selectedIndex) {
this.columns[CATEGORY_INDEX].selectedIndex = "";
this.$forceUpdate();
return;
} else {
this.columns[CATEGORY_INDEX].selectedIndex = index;
this.setValueOfSelected(item, CATEGORY_INDEX);
this.renderProfession(item.code);
}
this.columns[PROFESSION_INDEX].selectedIndex = "";
},
changeProfession(item, index) {
this.columns[PROFESSION_INDEX].selectedIndex = index;
this.selectedCodes[PROFESSION_INDEX] = item.code;
this.selectedTexts[PROFESSION_INDEX] = item.text;
this.$emit("input", this.selectedCodes);
this.setValueOfSelected(item, PROFESSION_INDEX);
this.$emit(CHANGE_EVENT, item.code);
this.show = false;
},
renderIndustry() {
......@@ -135,14 +194,29 @@ export default {
this.setDefaultIndexOfColumn(this.industry, INDUSTRY_INDEX);
const industry = this.industry[this.columns[INDUSTRY_INDEX].selectedIndex];
if (industry) {
this.selectedTexts[PROFESSION_INDEX] = industry.text;
this.renderProfession(industry?.code);
this.setValueOfSelected(industry, INDUSTRY_INDEX);
this.renderCategory(industry?.code);
}
},
renderCategory(industryCode) {
const categoryOfIndustry = this.quickFilter(this.category, 1, industryCode);
this.columns[CATEGORY_INDEX].values = categoryOfIndustry;
this.setDefaultIndexOfColumn(categoryOfIndustry, CATEGORY_INDEX);
const category = categoryOfIndustry[this.columns[CATEGORY_INDEX].selectedIndex];
if (category) {
this.setValueOfSelected(category, CATEGORY_INDEX);
this.renderProfession(category?.code);
}
this.$forceUpdate();
},
renderProfession(industryCode) {
const professionOfIndustry = this.quickFilter(this.profession, 5, industryCode);
this.columns[PROFESSION_INDEX].values = professionOfIndustry;
this.setDefaultIndexOfColumn(professionOfIndustry, PROFESSION_INDEX);
renderProfession(categoryCode) {
const professionOfCategory = this.quickFilter(this.profession, 3, categoryCode);
this.columns[PROFESSION_INDEX].values = professionOfCategory;
this.setDefaultIndexOfColumn(professionOfCategory, PROFESSION_INDEX);
const profession = professionOfCategory[this.columns[PROFESSION_INDEX].selectedIndex];
if (profession) {
this.setValueOfSelected(profession, PROFESSION_INDEX);
}
this.$forceUpdate();
},
quickFilter(list, slice, code) {
......@@ -161,6 +235,10 @@ export default {
}
return filtered;
},
setValueOfSelected(item, index) {
this.selectedCodes[index] = item.code;
this.selectedTexts[index] = item.text;
},
setDefaultIndexOfColumn(list, index) {
if (this.selectedCodes[index]) {
list.some((item, i) => {
......@@ -183,12 +261,12 @@ export default {
.body-wrap-mixin {
overflow-x: hidden;
overflow-y: auto;
height: 80vh;
height: calc(70vh - 90px);
padding: @padding-lg;
}
.jobs {
z-index: 200;
height: 80vh;
height: 70vh;
overflow: hidden;
@{deep} .cr-icon {
position: absolute;
......@@ -248,20 +326,25 @@ export default {
}
}
&.active {
.jobs-children {
display: block;
}
.cr-icon {
& > .jobs-item-txt > .cr-icon {
transform: rotate(90deg);
}
}
&:last-child {
.cr-divider {
display: none;
}
}
}
&-children {
display: none;
margin: 0 0 10px;
padding: 2px 10px;
border-radius: 8px;
background-color: @gray-1;
padding: 2px 0 2px 10px;
&.jobs-leaf {
border-radius: 8px;
background-color: @gray-1;
.jobs-item-txt {
margin: 10px 0;
}
}
.jobs-item-txt {
color: @gray-5;
padding: 0;
......
src/components/PopupDatePicker.vue
View file @ 8e760aa0
......@@ -32,10 +32,30 @@ export default {
initVal: parseTime("", "{y}-{m}-{d}")
};
},
watch: {
value(val) {
if (val) {
this.initVal = val;
this.handleResult(val);
}
}
},
methods: {
handleResult(res) {
this.pickerValShow = res;
this.pickerVal = res;
},
setDefaultVal() {
setTimeout(() => {
const $datepicker = this.$refs.datepicker;
const $picker = $datepicker.$refs.picker;
const columns = $datepicker.columns;
$datepicker.setInitValue();
$picker.setColumnIndex(0, columns[0].selectedIndex);
$picker.setColumnIndex(1, columns[1].selectedIndex);
$picker.setColumnIndex(2, columns[2].selectedIndex);
});
}
}
};
......
src/components/PopupPicker.vue
View file @ 8e760aa0
......@@ -21,6 +21,7 @@
</template>
<script>
// TODO 目前没有用到的业务场景，默认值还未做处理
import popupPickerMixin from "../mixins/popupPicker.mixin.js";
export default {
name: "PopupPicker",
......@@ -29,6 +30,12 @@ export default {
handleResult(res) {
this.pickerValShow = res[0];
this.pickerVal = res[1];
},
setDefaultVal() {
setTimeout(() => {
const $picker = this.$refs.picker;
$picker.setColumnIndex(0, this.pickerData.indexOf(this.value));
});
}
}
};
......
src/mixins/popupPicker.mixin.js
View file @ 8e760aa0
......@@ -2,7 +2,7 @@
* @Description: PopupPicker mixin
* @Date: 2020-07-28 19:46:31
* @LastEditors: gzw
* @LastEditTime: 2020-08-16 21:21:05
* @LastEditTime: 2020-08-17 16:52:26
*/
// TODO 默认值需要处理
......@@ -36,6 +36,7 @@ export default {
if (val && !this.refreshed && this.$refs[this.refName]) {
this.refreshed = true;
this.$refs[this.refName].refreshColumns();
this.setDefaultVal();
}
}
// value: {
......
src/views/Consultant/Buy/index.vue
View file @ 8e760aa0
......@@ -231,14 +231,14 @@ export default {
}
},
updateRemain(isBuy = false) {
let historyRemain = sessionStorage.getItem("historyRemain");
let historyRemain = localStorage.get("historyRemain");
if (historyRemain && +historyRemain > 100) {
isBuy && historyRemain--;
} else {
historyRemain = Math.floor(Math.random() * (200 - 100) + 100);
}
this.remain = historyRemain;
sessionStorage.setItem("historyRemain", historyRemain);
localStorage.set("historyRemain", historyRemain);
},
async generateOrder() {
const res = await create();
......
src/views/Policy/Add/index.vue
View file @ 8e760aa0
......@@ -82,7 +82,10 @@
:rules="[{ required: true, message: '请选择投保人职业' }]"
>
<template #input>
<popup-cascade />
<popup-cascade
v-model="formData.holderUserInfo.occupation"
placeholder="请选择投保人职业"
/>
</template>
</cr-field>
<cr-field
......@@ -216,13 +219,13 @@
v-model="formData.insuredUserInfo.occupation"
name="insuredUserInfo_occupation"
label="职业"
:rules="[{ required: true, message: '请选择投保人职业' }]"
:rules="[{ required: true, message: '请选择被保人职业' }]"
>
<template #input>
<popup-picker
:picker-data="['老师', '工人']"
<popup-cascade
v-model="formData.insuredUserInfo.occupation"
placeholder="请选择投保人职业"
placeholder="请选择被保人职业"
:is-lite="true"
/>
</template>
</cr-field>
......@@ -340,7 +343,6 @@
<script>
import GoodAction from "@/components/GoodAction";
import CrRadioBtn from "@/components/CrRadioBtn";
import PopupPicker from "@/components/PopupPicker";
import PopupAreaPicker from "@/components/PopupAreaPicker";
import PopupDatePicker from "@/components/PopupDatePicker";
import PopupWithIframe from "@/components/PopupWithIframe";
......@@ -377,7 +379,6 @@ export default {
GoodAction,
CrRadioBtn,
GoInsureDialog,
PopupPicker,
PopupAreaPicker,
PopupDatePicker,
PopupWithIframe,
......@@ -533,7 +534,7 @@ export default {
}
this.formData.insuredUserInfo = {
...this.formData.insuredUserInfo,
...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity }
...{ name, idNo, userInfoSecId, socialSecurity: socialSecurity ? "1" : "0" }
};
this.$forceUpdate();
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment