提交 f6d306bd 编写于 作者: guangjun.yang's avatar guangjun.yang

区域选择、调整后数据

上级 a6dc17fd
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper">
<div class="mask" @click="cancelSelect" @touchmove.prevent>
<div class="address-wrap" @click.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancelSelect">取消</span>
<h3>选择地区</h3>
<button class="submit-btn" @click="confirm">确定</button>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div>
<div class="address-select">
<ul class="show-address-header">
<li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
<li
v-show="value.provinceName && rank>1"
:class="{ active: isShowCity }"
class="item"
@click="tabAddressClick(2)"
>{{ value.cityName ? value.cityName : '请选择' }}</li>
<li
v-show="value.cityName && rank>2"
:class="{ active: isShowCounty }"
class="item"
@click="tabAddressClick(3)"
>
{{
value.countyName ? value.countyName : '请选择'
}}
</li>
<li
v-show="value.countyName && rank>3"
:class="{ active: isShowTown }"
class="item"
@click="tabAddressClick(4)"
>{{ value.townName ? value.townName : '请选择' }}</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province">
<li
v-for="(provinceItem, index) in areaList.provinceList"
:key="index"
:class="{ active: provinceItem.selected }"
@click="provinceSelect(provinceItem, index)"
>
<span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCity" id="city">
<li
v-for="(cityItem, index) in areaList.cityList"
:key="index"
:class="{ active: cityItem.selected }"
@click="citySelect(cityItem, index)"
>
<span>{{ cityItem.label }}</span>
<span v-show="cityItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCounty" id="county">
<li
v-for="(countyItem, index) in areaList.countyList"
:key="index"
:class="{ active: countyItem.selected }"
@click="countySelect(countyItem, index)"
>
<span>{{ countyItem.label }}</span>
<span v-show="countyItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowTown" id="town">
<li
v-for="(townItem, index) in areaList.townList"
:key="index"
:class="{ active: townItem.selected }"
@click="townSelect(townItem, index)"
>
<span>{{ townItem.label }}</span>
<span v-show="townItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {
getProvinceList,
getCityList,
getCountyList,
getTownList,
getHospitalsByRegionId
} from "../../service";
export default {
name: "PicaArea",
data() {
return {
areaList: {
provinceList: [],
cityList: [],
countyList: [],
townList: []
},
value: {
cityId: "",
cityName: "",
countyId: "",
countyName: "",
patientAddress: "",
provinceId: "",
provinceName: "",
townId: "",
townName: "",
regionId: "",
areaDegree: 0
},
isDisabled: true,
isShowProvince: true,
isShowCity: false,
isShowCounty: false,
isShowTown: false,
// 区域选择通用接口参数
queryParams: {
projectId: 374,
regionId: ""
}
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
created() {
// localStorage.setItem('baseUrl',this.baseUrl);
// this.projectId = (this.$route.query && this.$route.query.projectId) || 374;
// this.getProvinceData(this.queryParams);
// if(process.client) {
// if(this.$route && this.$route.query) {
// let cQuery = this.$route.query
// let hospitalIdList = cQuery.hospitalIdList || ''
// this.queryParams.projectId = cQuery.projectId || '';
// }
// }
},
computed: {
...mapGetters({
projectId: "projectId",
provinceList: "provinceList"
})
},
watch: {
projectId(newVal) {
this.queryParams.projectId = newVal;
// this.getProvinceData(this.queryParams);
},
provinceList(newVal) {
this.areaList.provinceList = newVal;
this.areaList.provinceList[0].selected = true
this.value.provinceName = '全部'
// this.areaList.provinceList.map(a => {
// if (a.id == this.value.provinceId) {
// a.selected = true;
// }
// });
}
},
methods: {
...mapActions({
setOrgList: 'setOrgList',
setAreaDegree: 'setAreaDegree'
}),
async getHospitalsByRegionId(params) {
await getHospitalsByRegionId(params).then(res => {
if (res.code === "000000") {
this.setOrgList(res.data.list || [])
}
});
},
async getProvinceData(params) {
console.log('getProvinceData')
await getProvinceList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = res.data && res.data.list || [];
console.log(this.areaList.provinceList);
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
async getCityData(params) {
console.log('getCityData')
await getCityList(params).then(res => {
if (res.code === "000000") {
this.areaList.cityList = res.data && res.data.list || [];
if (this.areaList.cityList.length === 0) {
this.isShowProvince = true;
this.isShowCity = false;
this.isDisabled = false;
}
this.areaList.cityList.map(a => {
if (a.id == this.value.cityId) {
a.selected = true;
}
});
}
});
},
async getCountyData(params) {
console.log('getCountyData')
await getCountyList(params).then(res => {
if (res.code === "000000") {
this.areaList.countyList = res.data && res.data.list || [];
if (this.areaList.countyList.length === 0) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isDisabled = false;
}
this.areaList.countyList.map(a => {
if (a.id == this.value.countyId) {
a.selected = true;
}
});
}
});
},
async getTownData(params) {
console.log('getTownData')
await getTownList(params).then(res => {
if (res.code === "000000") {
this.areaList.townList = res.data && res.data.list || [];
if (this.areaList.townList.length === 0) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isDisabled = false;
}
this.areaList.townList.map(a => {
if (a.id == this.value.townId) {
a.selected = true;
}
});
}
});
},
// provinceCallback(provinceId) {
// this.getCityData(provinceId);
// },
// cityCallback(cityId) {
// this.getCountyData(cityId);
// },
// countryCallback(countyId) {
// this.getTownData(countyId);
// },
//选择省份的操作
provinceSelect(item, idx) {
console.log('provinceSelect', item, this.rank);
this.value.regionId = item.id
this.value.provinceId = item.id;
this.queryParams.regionId = item.id;
this.value.provinceName = item.label;
this.value.patientAddress = "";
this.value.cityId = null;
this.value.cityName = "";
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
// 当前选中的样式
this.areaList.provinceList.map(a => (a.selected = false));
this.areaList.provinceList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCounty = false;
this.isShowTown = false;
if (this.rank > 1) {
this.isShowCity = true;
this.getCityData(this.queryParams);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
// // 当前选中的样式
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
},
//选择市的操作
citySelect(item, idx) {
console.log('citySelect', item, this.rank);
this.value.regionId = item.id
this.value.cityId = item.id;
this.queryParams.regionId = item.id;
this.value.cityName = item.label;
this.value.patientAddress = "";
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
// 当前选中的样式
this.areaList.cityList.map(a => (a.selected = false));
this.areaList.cityList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
if (this.rank > 2) {
this.isShowCounty = true;
this.getCountyData(this.queryParams);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
},
//选择区/县的操作
countySelect(item, idx) {
console.log('countySelect', item, this.rank);
this.value.regionId = item.id
this.value.countyId = item.id;
this.queryParams.regionId = item.id;
this.value.countyName = item.label;
this.value.townId = null;
this.value.townName = "";
this.value.patientAddress = "";
// 当前选中的样式
this.areaList.countyList.map(a => (a.selected = false));
this.areaList.countyList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
if (this.rank > 3) {
this.isShowTown = true;
this.getTownData(this.queryParams);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
},
//选择乡镇的操作
townSelect(item, idx) {
console.log('townSelect', item, this.rank);
this.value.regionId = item.id
this.value.townId = item.id;
this.queryParams.regionId = item.id;
this.value.townName = item.label;
this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
// 当前选中的样式
this.areaList.townList.map(a => (a.selected = false));
this.areaList.townList[idx].selected = true;
this.isDisabled = false;
},
tabAddressClick(tab) {
if (tab === 1) {
this.isShowProvince = true;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
} else if (tab === 2) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isShowTown = false;
} else if (tab === 3) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
} else if (tab === 4) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
}
},
confirm() {
this.$emit("confirm", this.value);
},
cancelSelect() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 3000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
...@@ -19,13 +19,13 @@ ...@@ -19,13 +19,13 @@
}} }}
</li> </li>
<li <li
v-show="value.provinceName && rank>1" v-show="value.provinceName && value.provinceName != '全部' && rank > 1 && areaList.cityList.length"
:class="{ active: isShowCity }" :class="{ active: isShowCity }"
class="item" class="item"
@click="tabAddressClick(2)" @click="tabAddressClick(2)"
>{{ value.cityName ? value.cityName : '请选择' }}</li> >{{ value.cityName ? value.cityName : '请选择' }}</li>
<li <li
v-show="value.cityName && rank>2" v-show="value.cityName && rank > 2 && areaList.countyList.length"
:class="{ active: isShowCounty }" :class="{ active: isShowCounty }"
class="item" class="item"
@click="tabAddressClick(3)" @click="tabAddressClick(3)"
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
}} }}
</li> </li>
<li <li
v-show="value.countyName && rank>3" v-show="value.countyName && rank > 3 && areaList.townList.length"
:class="{ active: isShowTown }" :class="{ active: isShowTown }"
class="item" class="item"
@click="tabAddressClick(4)" @click="tabAddressClick(4)"
...@@ -158,15 +158,16 @@ export default { ...@@ -158,15 +158,16 @@ export default {
created() { created() {
// localStorage.setItem('baseUrl',this.baseUrl); // localStorage.setItem('baseUrl',this.baseUrl);
// this.projectId = (this.$route.query && this.$route.query.projectId) || 374; // this.projectId = (this.$route.query && this.$route.query.projectId) || 374;
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 374;
// this.getProvinceData(this.queryParams); // this.getProvinceData(this.queryParams);
// if(process.client) { if(process.client) {
// if(this.$route && this.$route.query) { if(this.$route && this.$route.query) {
// let cQuery = this.$route.query let cQuery = this.$route.query
// let hospitalIdList = cQuery.hospitalIdList || '' let hospitalIdList = cQuery.hospitalIdList || ''
// this.queryParams.projectId = cQuery.projectId || ''; this.queryParams.projectId = cQuery.projectId || '';
// } }
// } }
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
...@@ -176,10 +177,13 @@ export default { ...@@ -176,10 +177,13 @@ export default {
}, },
watch: { watch: {
projectId(newVal) { projectId(newVal) {
// alert(newVal)
console.log('###############', newVal);
this.queryParams.projectId = newVal; this.queryParams.projectId = newVal;
// this.getProvinceData(this.queryParams); // this.getProvinceData(this.queryParams);
}, },
provinceList(newVal) { provinceList(newVal) {
console.log('###############', newVal);
this.areaList.provinceList = newVal; this.areaList.provinceList = newVal;
this.areaList.provinceList[0].selected = true this.areaList.provinceList[0].selected = true
this.value.provinceName = '全部' this.value.provinceName = '全部'
...@@ -255,7 +259,6 @@ export default { ...@@ -255,7 +259,6 @@ export default {
}); });
}, },
async getTownData(params) { async getTownData(params) {
console.log('getTownData')
await getTownList(params).then(res => { await getTownList(params).then(res => {
if (res.code === "000000") { if (res.code === "000000") {
this.areaList.townList = res.data && res.data.list || []; this.areaList.townList = res.data && res.data.list || [];
...@@ -274,15 +277,7 @@ export default { ...@@ -274,15 +277,7 @@ export default {
} }
}); });
}, },
// provinceCallback(provinceId) {
// this.getCityData(provinceId);
// },
// cityCallback(cityId) {
// this.getCountyData(cityId);
// },
// countryCallback(countyId) {
// this.getTownData(countyId);
// },
//选择省份的操作 //选择省份的操作
provinceSelect(item, idx) { provinceSelect(item, idx) {
console.log('provinceSelect', item, this.rank); console.log('provinceSelect', item, this.rank);
......
...@@ -29,7 +29,7 @@ export default { ...@@ -29,7 +29,7 @@ export default {
beginDate: "", beginDate: "",
endDate: "", endDate: "",
hospitalIdList: [], hospitalIdList: [],
originalFlag: 1, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: "",
timeFlag: 1, timeFlag: 1,
...@@ -67,7 +67,7 @@ export default { ...@@ -67,7 +67,7 @@ export default {
// beginDate: "", // beginDate: "",
// endDate: "", // endDate: "",
// hospitalIdList: [], // hospitalIdList: [],
// originalFlag: 1, // 默认值0:0不查看原始数据 // originalFlag: 2, // 默认值0:0不查看原始数据
// projectId: 374, // projectId: 374,
// regionId: "", // regionId: "",
// timeFlag: 1, // timeFlag: 1,
......
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
beginDate: "", beginDate: "",
endDate: "", endDate: "",
hospitalIdList: [], hospitalIdList: [],
originalFlag: 1, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: "",
timeFlag: 1, timeFlag: 1,
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
// beginDate: "", // beginDate: "",
// endDate: "", // endDate: "",
// hospitalIdList: [], // hospitalIdList: [],
// originalFlag: 1, // 默认值0:0不查看原始数据 // originalFlag: 2, // 默认值0:0不查看原始数据
// projectId: 374, // projectId: 374,
// regionId: "", // regionId: "",
// timeFlag: 1, // timeFlag: 1,
......
...@@ -232,7 +232,7 @@ export default { ...@@ -232,7 +232,7 @@ export default {
beginDate: "", beginDate: "",
endDate: "", endDate: "",
hospitalIdList: [], hospitalIdList: [],
originalFlag: 1, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: "",
timeFlag: 1, timeFlag: 1,
......
...@@ -219,8 +219,8 @@ export default { ...@@ -219,8 +219,8 @@ export default {
costRankList: [], costRankList: [],
projectId: "", projectId: "",
token: token:
"C7AEA346BC6A4EE0B2F1F76CBD511AC9" || // "C7AEA346BC6A4EE0B2F1F76CBD511AC9" ||
"A4EC71DD3D50420B86ED454EF25BCEA9" || "79A005DB585C45C389ED1DD0C76E3633" ||
"A220943B006347799F277CC524EBB662", "A220943B006347799F277CC524EBB662",
isOrgStat: false, isOrgStat: false,
// 区域选择通用接口参数 // 区域选择通用接口参数
...@@ -233,7 +233,7 @@ export default { ...@@ -233,7 +233,7 @@ export default {
beginDate: "", beginDate: "",
endDate: "", endDate: "",
hospitalIdList: [], hospitalIdList: [],
originalFlag: 1, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值2:1.查看原始数据 2.查看调整后的数据
projectId: 374, projectId: 374,
regionId: "", regionId: "",
timeFlag: 1, timeFlag: 1,
...@@ -348,7 +348,7 @@ export default { ...@@ -348,7 +348,7 @@ export default {
}, },
created() { created() {
if (process.client) { if (process.client) {
this.projectId = (this.$router && this.$route.query && this.$route.query.projectId) || 374; this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 374;
this.queryGDParams.projectId = this.projectId; this.queryGDParams.projectId = this.projectId;
this.CNTParams.projectId = this.projectId; this.CNTParams.projectId = this.projectId;
this.queryParams.projectId = this.projectId; this.queryParams.projectId = this.projectId;
......
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
beginDate: "", beginDate: "",
endDate: "", endDate: "",
hospitalIdList: [], hospitalIdList: [],
originalFlag: 1, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: "",
timeFlag: 1, timeFlag: 1,
......
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
beginDate: "", beginDate: "",
endDate: "", endDate: "",
hospitalIdList: [], hospitalIdList: [],
originalFlag: 1, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: "",
timeFlag: 1, timeFlag: 1,
......
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
beginDate: "", beginDate: "",
endDate: "", endDate: "",
hospitalIdList: [], hospitalIdList: [],
originalFlag: 1, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: "",
timeFlag: 1, timeFlag: 1,
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册