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 @@
class="cancel-btn"
@click="cancelSelect"
>取消</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
class="submit-btn"
@click="confirm"
>
确定
</button>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div>
<div
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 v-show="activetab == 0">
<div
class="address-content"
@touchmove.stop
v-show="areaList.currentOrgList.length"
class="my-org"
>
<ul
v-show="isShowProvince"
id="province"
>
<span>我所在机构</span>
<ul>
<li
v-for="(provinceItem, index) in areaList.provinceList"
v-for="(provinceItem, index) in areaList.currentOrgList"
:key="index"
class="list"
:class="{ active: provinceItem.selected }"
@click="provinceSelect(provinceItem, index)"
@click="provinceSelect(provinceItem, index, true)"
>
<span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png">
</span>
<img src="../../assets/images/sort-select-icon.png">
</span>
</li>
</ul>
<ul
v-show="isShowCity"
id="city"
>
</div>
<div class="address-select">
<ul class="show-address-header">
<li
v-for="(cityItem, index) in areaList.cityList"
:key="index"
:class="{ active: cityItem.selected }"
@click="citySelect(cityItem, index)"
:class="{ active: isShowProvince }"
class="item"
@click="tabAddressClick(1)"
>
<span>{{ cityItem.label }}</span>
<span v-show="cityItem.selected">
<img src="../../assets/images/sort-select-icon.png">
</span>
{{ value.provinceName ? value.provinceName : '请选择' }}
</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)"
v-show="
value.provinceName &&
value.provinceName != '全部' &&
rank > 1 &&
areaList.cityList.length
"
:class="{ active: isShowCity }"
class="item"
@click="tabAddressClick(2)"
>
<span>{{ countyItem.label }}</span>
<span v-show="countyItem.selected">
<img src="../../assets/images/sort-select-icon.png">
</span>
{{ 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>
<ul
v-show="isShowTown"
id="town"
<div
class="address-content"
@touchmove.stop
>
<li
v-for="(townItem, index) in areaList.townList"
:key="index"
:class="{ active: townItem.selected }"
@click="townSelect(townItem, index)"
<ul
v-show="isShowProvince"
id="province"
>
<span>{{ townItem.label }}</span>
<span v-show="townItem.selected">
<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>
</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>
<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
v-show="isShowOrg"
id="org"
>
<li
v-for="(orgItem, index) in areaList.newOrgList"
v-for="(i, index) in hl"
:key="index"
:class="{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)"
:class="{ active: hlselected == i.hospitalId }"
@click="hlSelect(i, index)"
>
<span>{{ orgItem.label }}</span>
<span v-show="orgItem.selected">
<span>{{ i.hospitalName }}</span>
<span v-show=" hlselected == i.hospitalId">
<img src="../../assets/images/sort-select-icon.png">
</span>
</li>
......@@ -187,7 +216,7 @@
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { getAreaOrOrgList } from '../../service';
import { getAreaOrOrgList, getAreaOrOrgList2 } from '../../service';
export default {
name: 'PicaArea',
......@@ -237,6 +266,9 @@ export default {
regionId: '',
},
currentOrgList: [],
activetab: '1',
hl:[],
hlselected: ''
};
},
computed: {
......@@ -277,6 +309,7 @@ export default {
this.queryParams.projectId = cQuery.projectId || '';
if (this.queryParams.projectId) {
this.getProvinceData(this.queryParams);
this.getOrgData2();
}
}
},
......@@ -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) {
this.value.regionId = item.id;
......@@ -591,17 +633,24 @@ export default {
}
},
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() {
this.$emit('cancel', false);
},
tabchange(e) {
console.log('e', e, this.activetab);
},
hlSelect(i) {
this.hlselected = i.hospitalId;
}
},
};
</script>
<style lang="scss" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000000015;
......@@ -611,7 +660,6 @@ export default {
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
......@@ -656,7 +704,6 @@ export default {
}
}
}
.address-select {
width: 100%;
height: auto;
......@@ -702,7 +749,6 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
// flex: 1 0 auto;
&:last-of-type {
padding-right: 15px;
}
......@@ -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%;
// height: 100%;
height: 196px;
overflow: hidden;
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;
}
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;
}
}
img {
width: 10px;
height: 10px;
}
}
}
......
src/service/index.js
浏览文件 @ 330f40b8
......@@ -19,7 +19,14 @@ export const getAreaOrOrgList = async (params) => {
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 {
return;
}
this.clearParams();
if(selData.hospitalId) {
console.log('--selData', selData);
this.queryGDParams.hospitalIdList = [selData.hospitalId];
}
this.queryGDParams.regionId = selData.regionId;
this.CNTParams.regionId = selData.regionId;
this.getHospitalsCNT(this.CNTParams);
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或