Skip to content

P
pica-learning-report
提交 330f40b8 编写于 作者: 张磊's avatar 张磊
浏览文件
操作

change btn

上级 72d1aa38
隐藏空白字符变更
内嵌 并排
正在显示 包含 229 行增加 和 175 行删除
src/components/common/pica-area.vue
浏览文件 @ 330f40b8
...@@ -19,162 +19,191 @@ ...@@ -19,162 +19,191 @@
class="cancel-btn" class="cancel-btn"
@click="cancelSelect" @click="cancelSelect"
>取消</span> >取消</span>
<h3>选择地区</h3> <van-tabs
v-model="activetab"
color="#449284"
@change="tabchange"
>
<van-tab title="地区"></van-tab>
<van-tab title="层级"></van-tab>
</van-tabs>
<button <button
class="submit-btn" class="submit-btn"
@click="confirm" @click="confirm"
> >
确定 确定
</button> </button>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div> </div>
<div <div v-show="activetab == 0">
v-show="areaList.currentOrgList.length"
class="my-org"
>
<span>我所在机构</span>
<ul>
<li
v-for="(provinceItem, index) in areaList.currentOrgList"
:key="index"
class="list"
:class="{ active: provinceItem.selected }"
@click="provinceSelect(provinceItem, index, true)"
>
<span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png">
</span>
</li>
</ul>
</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 &&
value.provinceName != '全部' &&
rank > 1 &&
areaList.cityList.length
"
:class="{ active: isShowCity }"
class="item"
@click="tabAddressClick(2)"
>
{{ value.cityName ? value.cityName : '请选择' }}
</li>
<li
v-show="value.cityName && rank > 2 && areaList.countyList.length"
:class="{ active: isShowCounty }"
class="item"
@click="tabAddressClick(3)"
>
{{ value.countyName ? value.countyName : '请选择' }}
</li>
<li
v-show="value.countyName && rank > 3 && areaList.townList.length"
:class="{ active: isShowTown }"
class="item"
@click="tabAddressClick(4)"
>
{{ value.townName ? value.townName : '请选择' }}
</li>
<li
v-show="value.townName && rank > 4 && areaList.newOrgList.length"
:class="{ active: isShowOrg }"
class="item"
@click="tabAddressClick(5)"
>
{{ value.newOrgName ? value.newOrgName : '请选择' }}
</li>
</ul>
<div <div
class="address-content" v-show="areaList.currentOrgList.length"
@touchmove.stop class="my-org"
> >
<ul <span>我所在机构</span>
v-show="isShowProvince" <ul>
id="province"
>
<li <li
v-for="(provinceItem, index) in areaList.provinceList" v-for="(provinceItem, index) in areaList.currentOrgList"
:key="index" :key="index"
class="list"
:class="{ active: provinceItem.selected }" :class="{ active: provinceItem.selected }"
@click="provinceSelect(provinceItem, index)" @click="provinceSelect(provinceItem, index, true)"
> >
<span>{{ provinceItem.label }}</span> <span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected"> <span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png"> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
<ul </div>
v-show="isShowCity" <div class="address-select">
id="city" <ul class="show-address-header">
>
<li <li
v-for="(cityItem, index) in areaList.cityList" :class="{ active: isShowProvince }"
:key="index" class="item"
:class="{ active: cityItem.selected }" @click="tabAddressClick(1)"
@click="citySelect(cityItem, index)"
> >
<span>{{ cityItem.label }}</span> {{ value.provinceName ? value.provinceName : '请选择' }}
<span v-show="cityItem.selected">
<img src="../../assets/images/sort-select-icon.png">
</span>
</li> </li>
</ul>
<ul
v-show="isShowCounty"
id="county"
>
<li <li
v-for="(countyItem, index) in areaList.countyList" v-show="
:key="index" value.provinceName &&
:class="{ active: countyItem.selected }" value.provinceName != '全部' &&
@click="countySelect(countyItem, index)" rank > 1 &&
areaList.cityList.length
"
:class="{ active: isShowCity }"
class="item"
@click="tabAddressClick(2)"
> >
<span>{{ countyItem.label }}</span> {{ value.cityName ? value.cityName : '请选择' }}
<span v-show="countyItem.selected"> </li>
<img src="../../assets/images/sort-select-icon.png"> <li
</span> v-show="value.cityName && rank > 2 && areaList.countyList.length"
:class="{ active: isShowCounty }"
class="item"
@click="tabAddressClick(3)"
>
{{ value.countyName ? value.countyName : '请选择' }}
</li>
<li
v-show="value.countyName && rank > 3 && areaList.townList.length"
:class="{ active: isShowTown }"
class="item"
@click="tabAddressClick(4)"
>
{{ value.townName ? value.townName : '请选择' }}
</li>
<li
v-show="value.townName && rank > 4 && areaList.newOrgList.length"
:class="{ active: isShowOrg }"
class="item"
@click="tabAddressClick(5)"
>
{{ value.newOrgName ? value.newOrgName : '请选择' }}
</li> </li>
</ul> </ul>
<ul <div
v-show="isShowTown" class="address-content"
id="town" @touchmove.stop
> >
<li <ul
v-for="(townItem, index) in areaList.townList" v-show="isShowProvince"
:key="index" id="province"
:class="{ active: townItem.selected }"
@click="townSelect(townItem, index)"
> >
<span>{{ townItem.label }}</span> <li
<span v-show="townItem.selected"> 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"> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </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>
<ul
v-show="isShowOrg"
id="org"
>
<li
v-for="(orgItem, index) in areaList.newOrgList"
:key="index"
:class="{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)"
>
<span>{{ orgItem.label }}</span>
<span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png">
</span>
</li>
</ul>
</div>
</div>
</div>
<div v-show="activetab == 1">
<div
class="address-content"
@touchmove.stop
>
<ul <ul
v-show="isShowOrg"
id="org"
> >
<li <li
v-for="(orgItem, index) in areaList.newOrgList" v-for="(i, index) in hl"
:key="index" :key="index"
:class="{ active: orgItem.selected }" :class="{ active: hlselected == i.hospitalId }"
@click="orgSelect(orgItem, index)" @click="hlSelect(i, index)"
> >
<span>{{ orgItem.label }}</span> <span>{{ i.hospitalName }}</span>
<span v-show="orgItem.selected"> <span v-show=" hlselected == i.hospitalId">
<img src="../../assets/images/sort-select-icon.png"> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
...@@ -187,7 +216,7 @@ ...@@ -187,7 +216,7 @@
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { getAreaOrOrgList } from '../../service'; import { getAreaOrOrgList, getAreaOrOrgList2 } from '../../service';
export default { export default {
name: 'PicaArea', name: 'PicaArea',
...@@ -237,6 +266,9 @@ export default { ...@@ -237,6 +266,9 @@ export default {
regionId: '', regionId: '',
}, },
currentOrgList: [], currentOrgList: [],
activetab: '1',
hl:[],
hlselected: ''
}; };
}, },
computed: { computed: {
...@@ -277,6 +309,7 @@ export default { ...@@ -277,6 +309,7 @@ export default {
this.queryParams.projectId = cQuery.projectId || ''; this.queryParams.projectId = cQuery.projectId || '';
if (this.queryParams.projectId) { if (this.queryParams.projectId) {
this.getProvinceData(this.queryParams); this.getProvinceData(this.queryParams);
this.getOrgData2();
} }
} }
}, },
...@@ -383,6 +416,15 @@ export default { ...@@ -383,6 +416,15 @@ export default {
}); });
}, },
async getOrgData2(params) {
await getAreaOrOrgList2(params).then((res) => {
if (res.code === '000000') {
console.log('-res', res);
this.hl = res.data || [];
}
});
},
// 选择省份的操作 // 选择省份的操作
provinceSelect(item, idx, isCurrent) { provinceSelect(item, idx, isCurrent) {
this.value.regionId = item.id; this.value.regionId = item.id;
...@@ -591,17 +633,24 @@ export default { ...@@ -591,17 +633,24 @@ export default {
} }
}, },
confirm() { confirm() {
this.$emit('confirm', this.value); console.log('-this.value', this.value);
const v = this.activetab == 0 ? this.value : this.hlselected;
this.$emit('confirm', v);
}, },
cancelSelect() { cancelSelect() {
this.$emit('cancel', false); this.$emit('cancel', false);
}, },
tabchange(e) {
console.log('e', e, this.activetab);
},
hlSelect(i) {
this.hlselected = i.hospitalId;
}
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.select-wrapper { .select-wrapper {
font-family: PingFangSC-Regular;
.mask { .mask {
position: fixed; position: fixed;
z-index: 1000000015; z-index: 1000000015;
...@@ -611,7 +660,6 @@ export default { ...@@ -611,7 +660,6 @@ export default {
bottom: 0; bottom: 0;
background: rgba(55, 56, 57, 0.6); background: rgba(55, 56, 57, 0.6);
} }
.address-wrap { .address-wrap {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -656,7 +704,6 @@ export default { ...@@ -656,7 +704,6 @@ export default {
} }
} }
} }
.address-select { .address-select {
width: 100%; width: 100%;
height: auto; height: auto;
...@@ -702,7 +749,6 @@ export default { ...@@ -702,7 +749,6 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
// flex: 1 0 auto;
&:last-of-type { &:last-of-type {
padding-right: 15px; padding-right: 15px;
} }
...@@ -729,54 +775,51 @@ export default { ...@@ -729,54 +775,51 @@ export default {
} }
} }
} }
}
.address-content { }
position: relative; .address-content {
position: relative;
width: 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%; width: 100%;
// height: 100%; overflow-x: hidden;
height: 196px; text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box; 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;
}
ul { img {
width: 100%; width: 10px;
height: 196px; height: 10px;
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;
}
}
} }
} }
} }
......
src/service/index.js
浏览文件 @ 330f40b8
...@@ -19,7 +19,14 @@ export const getAreaOrOrgList = async (params) => { ...@@ -19,7 +19,14 @@ export const getAreaOrOrgList = async (params) => {
url: 'stats/region', url: 'stats/region',
}); });
}; };
export const getAreaOrOrgList2 = async (params) => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: 'hospital/hospitalStats/portal/hospital/deepLowers',
});
};
/** /**
* 获取区域（一般是乡镇）下的机构列表 * 获取区域（一般是乡镇）下的机构列表
*/ */
......
src/views/index.vue
浏览文件 @ 330f40b8
...@@ -687,6 +687,10 @@ export default { ...@@ -687,6 +687,10 @@ export default {
return; return;
} }
this.clearParams(); this.clearParams();
if(selData.hospitalId) {
console.log('--selData', selData);
this.queryGDParams.hospitalIdList = [selData.hospitalId];
}
this.queryGDParams.regionId = selData.regionId; this.queryGDParams.regionId = selData.regionId;
this.CNTParams.regionId = selData.regionId; this.CNTParams.regionId = selData.regionId;
this.getHospitalsCNT(this.CNTParams); this.getHospitalsCNT(this.CNTParams);
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或