Skip to content

P
pica-learning-report
提交 f9cdaadb 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

代码整理、样式优化

上级 d2dc7da2
隐藏空白字符变更
内嵌 并排
正在显示 包含 14 行增加 和 4857 行删除
components/README.md 已删除 100644 → 0
浏览文件 @ d2dc7da2
# COMPONENTS
**This directory is not required, you can delete it if you don't want to use it.**
The components directory contains your Vue.js Components.
_Nuxt.js doesn't supercharge these components._
components/about.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<template>
<div class="about-container">
about nuxtjs ssr
</div>
</template>
<script>
// asyncData fetch 在组件中无效
export default {
data() {
return {
name: 'about'
}
}
}
</script>
<style lang="less">
.about-container {
font-size: 18px;
}
</style>
\ No newline at end of file
components/bussiness/coop-list-item.1.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<template>
<!-- 专项合作列表 -->
<section class="coop-container">
<div
v-show="paramData.length && isShow"
v-for="(item , index) in paramData"
:key="index"
class="coop-item"
@click="coopDetails(item)"
>
<div class="coop-item-left">
<img :src="item.imgUrl">
<!-- <span v-if="item.progressStatus == 2"
class="coop-container-status"
:style="{'background': cBgColor(item)}"
>已完成</span> -->
</div>
<div class="coop-item-right">
<span class="coop-item-right-title">{{item.projectName}}</span>
<span class="coop-item-right-other">
<img src="../../images/p251/org.png" >
{{item.organizationNameList | subOrgNames | shortName}}
</span>
<span v-if="item.pType == 1"
class="coop-item-right-other">
<img src="../../images/p251/pub-time.png" >
{{item.oldTime}}
<span class="pro-status" :class="{continue: item.projectStatus == 5}">
{{item.projectStatus == 5 ? '进行中' : item.projectStatus == 10 ? '已结束' : ''}}
</span>
</span>
<span v-else
class="coop-item-right-other"
><img src="../../images/p251/pub-time.png" >
{{item.projectBegintimeLong | formatTime}}-{{item.projectEndtimeLong | formatTime}}
<span class="pro-status" :class="{continue: item.projectStatus == 5}">
{{item.projectStatus == 5 ? '进行中' : item.projectStatus == 10 ? '已结束' : ''}}
</span>
</span>
</div>
</div>
<NoMoreContent v-show="paramData.length > 9"></NoMoreContent>
<NoContent v-show="!paramData.length && isShow"></NoContent>
<!-- <van-popup
v-model="showGoUpdate"
position="bottom"
:style="{ height: '4.427rem' }"
>
<div class="update-dialog-content">
<p class="title">本项目需要更新至最新版本才能参加哦</p>
<p class="update-btn v-hairline-top confirm-btn" @click="goUpdateHandler">立即更新</p>
<p class="update-btn v-hairline-top" @click="showGoUpdate = false">取消</p>
</div>
</van-popup> -->
</section>
</template>
<script>
import NoMoreContent from "@/components/business/no-more-content";
import NoContent from "@/components/business/no-content";
import UpdateDialog from "@/components/business/update-dialog";
import { setEventByModuleCode, deepCopy, getWebPageUrl } from "@/utils/index";
import { getAppVersion } from "@/utils";
import { mapActions, mapGetters } from "vuex";
import { Popup } from 'vant';
export default {
name: "coop-list-item",
data() {
return {
bgColor: "green",
statusText: "进行中",
// showGoUpdate: false,
};
},
props: {
paramData: {
type: Array,
default: () => []
},
coopType: {
type: Number,
default: 1
},
isShow: {
type: Boolean,
default: false
},
tabTo: {
type: Number,
default: 1
},
},
computed: {
...mapGetters(["userInfo"])
// cBgColor() {
// }
},
components: {
NoMoreContent,
NoContent,
UpdateDialog,
},
mounted() {},
filters: {
statusText(status) {
if (status === 1) {
return "参加中";
} else if (status === 5) {
return "进行中";
} else if (status === 10) {
return "已结束";
} else {
return "已结束";
}
},
// 将字符串截短至指定长度，并用在最后追加特定字符串（例如：...）
shortNameL(value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
subOrgNames(orgNameList) {
let allName = orgNameList[0];
for(let i = 1; i < orgNameList.length; i ++) {
allName += `/${orgNameList[i]}`
}
if (allName && allName.length > 13) {
return allName.substring(0, 13) + '...'
} else {
return allName
}
},
},
methods: {
...mapActions(['setProjectTabIndex']),
cBgColor(item) {
if (item.projectStatus === 1) {
return "#5890DD";
} else if (item.projectStatus === 5) {
return "#449284";
} else if (item.projectStatus === 10) {
return "#373839";
} else {
return "#5890DD";
}
},
coopDetails(item) {
this.$sendBuriedData({
component_tag: '089#400081#0#'+item.projectName
});
if (window.__isWeb) {
this.showModule(item, this.coopType, this.tabTo, item.courseRequire);
return;
}
if (item.courseRequire == 1) { //对课程完成度有控制，需判断版本号
let appVersion = getAppVersion(this.userInfo.appVersion);
// alert('版本'+appVersion)
let flag = appVersion < 315;
if (flag === true) {
// 小于315版本，添加去更新弹层
this.showGoUpdate = true;
}else {
// 跳转到老项目
if(this.tabTo != 3) {
this.setProjectTabIndex(this.tabTo)
}
if (item.pType == 1) {
this.goToPage(item);
// 跳转到新项目
} else {
this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
}
}
} else {
// 跳转到老项目
if(this.tabTo != 3) {
this.setProjectTabIndex(this.tabTo)
}
if (item.pType == 1) {
this.goToPage(item);
// 跳转到新项目
} else {
this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
// this.$router.push({
// path: "/coop",
// query: {
// id: item.id,
// coopType: this.coopType
// }
// });
}
}
},
// 跳转到新项目
showModule(item, coopType, tabTo, courseRequire) {
if (window.__isWeb) {
if(item.parent === false) {
this.$router.push({
path: "/coop",
query: {
id: item.id,
coopType: coopType,
tabTo: tabTo,
courseRequire: courseRequire,
}
});
} else {
this.$router.push({
path: "/parent",
query: {
entryId: item.entryId,
}
});
}
return;
}
let pageUrl = "";
let paramList = [];
if(item.parent === false) {
pageUrl = getWebPageUrl('coopv2/#/coop');
paramList = [
{
key: "pageUrl",
value: pageUrl + `?id=${item.id}&coopType=${coopType}&tabTo=${tabTo}&courseRequire=${courseRequire}`,
type: 4,
seqNo: 1
}
]
} else {
pageUrl = getWebPageUrl('coopv2/#/parent');
paramList = [
{
key: "pageUrl",
value: pageUrl + `?entryId=${item.entryId}`,
type: 4,
seqNo: 1
}
]
}
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
goToPage(item) {
let _this = this;
// 如果是湖北考试项目，则做相应权限判断 湖北的projectId=3
if( item.id == '3') {
if(!_this.userInfo.userToken) {
rocNative.gotoLogin();
return;
}
let param = {
type: 1,
token: _this.userInfo.userToken || _this.token,
setEntry: true
};
this.GET("portal/portalApp/role/3", param).then(
res => {
if (res.code == "000000") {
// {
// "data": 0, // 0就是无权限，1有权限
// "code": "000000",
// "message": "成功"
// }
if(res.data == 0) {
rocNative.showNativeToast({ message: "您不属于该项目，无法查看" });
return;
}
} else {
rocNative.gotoLogin();
return;
}
_this.goToPage1(item.contentListModel)
}
);
} else {
_this.goToPage1(item.contentListModel)
}
},
// 跳转
goToPage1(itemData) {
let paramList = deepCopy(setEventByModuleCode(itemData));
let isStrokeUrl =
paramList[0] &&
paramList[0]["value"] &&
paramList[0]["value"].indexOf("stroke.js") !== -1;
let strokeUrl = "";
if (isStrokeUrl) {
strokeUrl = paramList[0]["value"] + "&token=" + this.userInfo.userToken || _this.token;
paramList[0]["value"] = strokeUrl;
}
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
},
// goUpdateHandler () {
// //去更新
// rocNative.upGradeVersion();
// this.showGoUpdate = false;
// }
}
};
</script>
<style lang="less" scoped>
@import "../../style/mixin";
.coop-container {
position: relative;
margin: px2rem(0px) px2rem(15px);
&-status {
position: absolute;
top: px2rem(6px);
left: 0;
// display: block;
width: px2rem(44px);
height: px2rem(18px);
line-height: px2rem(18px);
padding: px2rem(0px) 0 0 px2rem(4px);
background: rgba(88, 144, 221, 1);
color: #fff;
font-size: px2rem(11px);
border-top-right-radius: px2rem(3px);
border-bottom-right-radius: px2rem(3px);
}
}
.coop-item {
display: flex;
width: 100%;
height: px2rem(128px);
border-bottom: 1px solid #f0f0f0;
background: #fff;
flex-direction: row;
justify-content: center;
align-items: center;
img {
width: px2rem(115px);
height: px2rem(86px);
margin-right: px2rem(15px);
border-radius: px2rem(3px);
}
&-left {
display: flex;
position: relative;
top: 0;
}
&-right {
display: flex;
width: px2rem(215px);
flex-direction: column;
padding-top: px2rem(4px);
&-title {
height: px2rem(50px);
line-height: px2rem(23px);
font-size: px2rem(16px);
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: px2rem(20px);
line-height: px2rem(20px);
font-size: px2rem(13px);
font-weight: 400;
color: rgba(151, 152, 153, 1);
& > img {
position: relative;
top: px2rem(2px);
left: 0;
width: px2rem(15px);
height: px2rem(15px);
margin-right: 0;
}
.pro-status {
float: right;
font-size: px2rem(13px);
padding-right: px2rem(4px);
color: #979899;
&.continue {
color: #449284;
}
&.end {
color: #979899;
}
}
}
}
}
.update-dialog-content{
padding: 0 px2rem(15px);
box-sizing: border-box;
.title{
text-align: center;
color: #373839;
font-size: px2rem(18px);
padding: px2rem(15px) 0;
line-height: px2rem(25px);
}
.update-btn{
text-align: center;
height: px2rem(55px);
line-height: px2rem(55px);
font-size: px2rem(16px);
color: #979899;
&.confirm-btn{
color: #449284;
}
&.v-hairline-top::after{
border-top-width: 1px;
}
}
}
</style>
<style>
.van-overlay{
background-color: rgba(0,0,0,0.5);
}
</style>
components/bussiness/coop-list-item.2.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<template>
<!-- 专项合作列表 -->
<section class="coop-container">
<div
v-for="(item , index) in dataList"
:key="index"
class="coop-item"
@click="jumpByAuthId(item)"
>
<div class="coop-item-left">
<img :src="item.attachmentUrl">
</div>
<div class="coop-item-right">
<span class="coop-item-right-title">{{item.projectName}}</span>
<span class="coop-item-right-other">
<img src="../../assets/images/org.png" >
{{item.organizationNameList | subOrgNames}}
</span>
<span v-if="item.authType == 1"
class="coop-item-right-other">
<img src="../../assets/images/pub-time.png" >
2010-10-10
<!-- {{item.oldTime}} -->
<!-- <span class="pro-status" :class="{continue: item.projectStatus == 5}">
{{item.projectStatus == 5 ? '进行中' : item.projectStatus == 10 ? '已结束' : ''}}
</span> -->
</span>
<span v-else
class="coop-item-right-other"
><img src="../../assets/images/pub-time.png" >
2010.01.10 ~ 2010.10.10
<!-- {{item.projectBegintimeLong | formatTime}}-{{item.projectEndtimeLong | formatTime}} -->
<!-- <span class="pro-status" :class="{continue: item.projectStatus == 5}">
{{item.projectStatus == 5 ? '进行中' : item.projectStatus == 10 ? '已结束' : ''}}
</span> -->
</span>
</div>
</div>
<!-- <NoMoreContent v-show="dataList.length > 9"></NoMoreContent> -->
<!-- <NoContent v-show="!dataList.length && isShow"></NoContent> -->
<!-- <van-popup
v-model="showGoUpdate"
position="bottom"
:style="{ height: '4.427rem' }"
>
<div class="update-dialog-content">
<p class="title">本项目需要更新至最新版本才能参加哦</p>
<p class="update-btn v-hairline-top confirm-btn" @click="goUpdateHandler">立即更新</p>
<p class="update-btn v-hairline-top" @click="showGoUpdate = false">取消</p>
</div>
</van-popup> -->
</section>
</template>
<script>
// import NoMoreContent from "@/components/business/no-more-content";
// import NoContent from "@/components/business/no-content";
// import UpdateDialog from "@/components/business/update-dialog";
// import { setEventByModuleCode, deepCopy, getWebPageUrl } from "@/utils/index";
import { goNativePage, goPageByNative } from "@/utils/index";
// import { getAppVersion } from "@/utils";
// import { mapActions, mapGetters } from "vuex";
// import { Popup } from 'vant';
export default {
name: "coop-list-item",
data() {
return {
bgColor: "green"
};
},
props: {
dataList: {
type: Array,
default: () => []
},
},
// computed: {
// ...mapGetters(["userInfo"])
// },
components: {
// NoMoreContent,
// NoContent,
// UpdateDialog,
},
mounted() {},
filters: {
subOrgNames(orgNameList) {
let allName = orgNameList[0];
for(let i = 1; i < orgNameList.length; i ++) {
allName += `/${orgNameList[i]}`
}
if (allName && allName.length > 13) {
return allName.substring(0, 13) + '...'
} else {
return allName
}
},
// 将字符串截短至指定长度，并用在最后追加特定字符串（例如：...）
shortNameL(value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
},
methods: {
jumpByAuthId(pInfo) {
// this.$sendBuriedData({
// component_tag: '467#400141'
// });
if(pInfo.authId == 1) {
goNativePage(this, pInfo);
} else {
goPageByNative(this, pInfo);
}
}
}
};
</script>
<style scoped lang="less">
.coop-container {
position: relative;
margin: 0px 15px;
&-status {
position: absolute;
top: 6px;
left: 0;
// display: block;
width: 44px;
height: 18px;
line-height: 18px;
padding: 0 0 0 4px;
background: rgba(88, 144, 221, 1);
color: #fff;
font-size: 11px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
.coop-item {
display: flex;
width: 100%;
height: 128px;
border-bottom: 1px solid #f0f0f0;
background: #fff;
flex-direction: row;
justify-content: center;
align-items: center;
img {
width: 115px;
height: 86px;
margin-right: 15px;
border-radius: 3px;
}
&-left {
display: flex;
position: relative;
top: 0;
}
&-right {
display: flex;
width: 215px;
flex-direction: column;
padding-top: 4px;
&-title {
height: 50px;
line-height: 23px;
font-size: 16px;
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: 20px;
line-height: 20px;
font-size: 13px;
font-weight: 400;
color: rgba(151, 152, 153, 1);
& > img {
position: relative;
top: 2px;
left: 0;
width: 15px;
height: 15px;
margin-right: 0;
}
.pro-status {
float: right;
font-size: 13px;
padding-right: 4px;
color: #979899;
&.continue {
color: #449284;
}
&.end {
color: #979899;
}
}
}
}
}
.update-dialog-content{
padding: 0 15px;
box-sizing: border-box;
.title{
text-align: center;
color: #373839;
font-size: 18px;
padding: 15px 0;
line-height: 25px;
}
.update-btn{
text-align: center;
height: 55px;
line-height: 55px;
font-size: 16px;
color: #979899;
&.confirm-btn{
color: #449284;
}
&.v-hairline-top::after{
border-top-width: 1px;
}
}
}
</style>
<style>
.van-overlay{
background-color: rgba(0,0,0,0.5);
}
</style>
components/common/common-area-select copy.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- 区域与机构选择（表头）组件 -->
<template>
<ul class="common-area-select">
<li class="center" @click="areaClick">
{{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
</li>
<li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li>
</ul>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
areaName: {
type: String,
default: "全部"
},
orgName: {
type: String,
default: "全部机构"
},
showArea: {
type: Boolean,
default: false,
},
showOrg: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
orgList: 'orgList',
areaDegree: 'areaDegree'
}),
isNotVisible() {
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true;
} else {
return false;
}
}
},
methods: {
areaClick() {
this.$emit("areaClick");
},
orgClick() {
this.$emit("orgClick");
}
}
};
</script>
<style lang="less" scoped>
.common-area-select {
&.fixed {
position: fixed;
top: 69px;
z-index: 10000000;
}
// padding-top: 50px;
display: flex;
width: 100%;
height: 35px;
line-height: 35px;
margin: 2px 0 0px;
flex-direction: row nowrap;
align-content: center;
align-items: center;
text-align: center;
justify-content: center; /* 水平居中 */
.center {
flex: 1;
font-size: 15px;
font-weight: 400;
color: #676869;
&.gray {
color: #C7C8C9;
}
}
img {
// padding-top: 10px;
position: relative;
left: 3px;
top: 1px;
width: 12px;
height: 12px;
}
}
</style>
components/common/common-area-select-old.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- 区域与机构选择（表头）组件 -->
<template>
<ul class="common-area-select">
<li class="center" @click="areaClick">
{{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
</li>
<li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li>
</ul>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
areaName: {
type: String,
default: "全部"
},
orgName: {
type: String,
default: "全部机构"
},
showArea: {
type: Boolean,
default: false,
},
showOrg: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
orgList: 'orgList',
areaDegree: 'areaDegree'
}),
isNotVisible() {
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true;
} else {
return false;
}
}
},
methods: {
areaClick() {
this.$emit("areaClick");
},
orgClick() {
this.$emit("orgClick");
}
}
};
</script>
<style lang="less" scoped>
.common-area-select {
// padding-top: 50px;
display: flex;
width: 100%;
height: 35px;
line-height: 35px;
margin: 2px 0 10px;
flex-direction: row nowrap;
align-content: center;
align-items: center;
text-align: center;
justify-content: center; /* 水平居中 */
.center {
flex: 1;
font-size: 15px;
font-weight: 400;
color: #676869;
&.gray {
color: #C7C8C9;
}
}
img {
// padding-top: 10px;
position: relative;
left: 3px;
top: 1px;
width: 12px;
height: 12px;
}
}
</style>
components/common/common-area-select.vue
浏览文件 @ f9cdaadb
...@@ -4,9 +4,6 @@ ...@@ -4,9 +4,6 @@
<li class="center" @click="areaClick"> <li class="center" @click="areaClick">
<span><img class="map" src="../../assets/images/map-icon.png"/>{{areaName}}</span><img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/> <span><img class="map" src="../../assets/images/map-icon.png"/>{{areaName}}</span><img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
</li> </li>
<!-- <li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li> -->
</ul> </ul>
</template> </template>
<script> <script>
...@@ -17,31 +14,23 @@ export default { ...@@ -17,31 +14,23 @@ export default {
type: String, type: String,
default: "全部" default: "全部"
}, },
orgName: {
type: String,
default: "全部机构"
},
showArea: { showArea: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
showOrg: {
type: Boolean,
default: false
}
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
orgList: 'orgList', // orgList: 'orgList',
areaDegree: 'areaDegree' areaDegree: 'areaDegree'
}), }),
isNotVisible() { // isNotVisible() {
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) { // if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true; // return true;
} else { // } else {
return false; // return false;
} // }
} // }
}, },
methods: { methods: {
......
components/common/common-tabs-old.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- Tabs组件 -->
<template>
<div class="common-tabs-wrapper">
<ul class="common-tabs">
<li
v-show="(item === '总体概况'
|| item === '人群分析'
|| item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)"
v-for="(item, index) in tapList"
:class="{'active': index === cIndex}"
:key="index"
@click="clickTab(index)"
>{{item}}</li>
</ul>
<span class="over"></span>
<span class="border"></span>
</div>
</template>
<script>
export default {
data() {
return {
cIndex: 0,
tapList: [
"总体概况",
"人群分析",
"课程分析",
"考试分析",
"学习效果分析"
]
};
},
props: {
projectInfo: {
type: Object
}
},
mounted() {},
methods: {
clickTab(index) {
this.cIndex = index;
this.$emit("tabClicked", index);
}
}
};
</script>
<style lang="less" scoped>
.common-tabs-wrapper {
display: flex;
position: relative;
top: 0;
left: 0;
z-index: 1;
font-size: 13px;
.common-tabs {
white-space: nowrap;
overflow-x: auto;
padding-bottom: 6px;
font-size: 13px;
li {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 13px;
font-weight: 700;
margin: 0 6px;
color: #979899;
background: #f0f1f2;
padding: 0 12px;
border-radius: 30px;
&:first-child {
margin-left: 15px;
}
&.active {
color: #449284;
background: #e3efed;
}
}
margin-top: 0;
}
.over {
display: block;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 6px;
z-index: 2;
background: #fff;
}
.border {
display: block;
width: 100%;
height: 1px;
bottom: -3px;
left: 0;
border-bottom: 1px solid #f0f1f2;
position: absolute;
z-index: 2;
}
}
</style>
components/common/pica-area copy 2.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" @touchmove.prevent.stop>
<div class="mask" @click="cancelSelect" @touchmove.prevent.stop>
<div class="address-wrap" @click.stop @touchmove.prevent.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 && 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>
</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() {
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;
},
provinceList(newVal) {
this.areaList.provinceList = newVal;
this.areaList.provinceList[0].selected = true;
this.value.provinceName = this.areaList.provinceList[0].label;
this.value.areaDegree = this.areaList.provinceList[0].degree;
// this.value.provinceName = "全部";
}
},
methods: {
// 映射Store中的Actions
...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) {
await getProvinceList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = (res.data && res.data.list) || [];
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
// 获取城市列表
async getCityData(params) {
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) {
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) {
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;
}
});
}
});
},
// 选择省份的操作
provinceSelect(item, idx) {
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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCounty = false;
this.isShowTown = false;
if (this.rank > 1 && item.degree != 5) {
this.isShowCity = true;
this.isDisabled = true;
this.getCityData(this.queryParams);
} else {
this.isShowProvince = true;
this.isShowCity = false;
this.isDisabled = false;
}
},
// 选择市的操作
citySelect(item, idx) {
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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
if (this.rank > 2 && item.degree != 5) {
this.isShowCounty = true;
this.isDisabled = true;
this.getCountyData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isDisabled = false;
}
},
// 选择区/县的操作
countySelect(item, idx) {
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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
if (this.rank > 3 && item.degree != 5) {
this.isShowTown = true;
this.isDisabled = true;
this.getTownData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isDisabled = false;
}
},
// 选择乡镇的操作
townSelect(item, idx) {
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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
// 当前选中的样式
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: 1000000015;
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;
z-index: 1000000016;
.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
components/common/pica-area copy 3.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" @touchmove.prevent.stop>
<div class="mask" @click="cancelSelect" @touchmove.prevent.stop>
<div class="address-wrap" @click.stop @touchmove.prevent.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="my-org" >
<span>我所在机构</span>
<ul>
<li
class="list"
v-for="(provinceItem, index) in areaList.currentOrgList"
:key="index"
: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>
</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: {
currentOrgList: [],
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: ""
},
currentOrgList: []
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
created() {
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;
},
provinceList(newVal) {
newVal[0].selected = true;
this.value.provinceName = newVal[0].label;
this.value.areaDegree = newVal[0].degree;
this.value.regionId = newVal[0].id;
this.value.provinceId = newVal[0].id;
this.queryParams.regionId = newVal[0].id;
this.value.provinceName = newVal[0].label;
// this.areaList.provinceList = newVal;
// this.areaList.provinceList[0].selected = true;
// this.value.provinceName = this.areaList.provinceList[0].label;
// this.value.areaDegree = this.areaList.provinceList[0].degree;
if(newVal[0].containHospitalFlag == 1) {
// this.value.provinceName = newVal[1].label;
// this.value.provinceName = '请选择';
this.areaList.currentOrgList = newVal.slice(0, 1);
this.areaList.provinceList = newVal.slice(1);
} else {
this.areaList.currentOrgList = [];
this.areaList.provinceList = newVal;
}
// this.value.provinceName = "全部";
}
},
methods: {
// 映射Store中的Actions
...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) {
await getProvinceList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = (res.data && res.data.list) || [];
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
// 获取城市列表
async getCityData(params) {
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) {
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) {
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;
}
});
}
});
},
// 选择省份的操作
provinceSelect(item, idx, isCurrent) {
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));
if(isCurrent) {
this.areaList.currentOrgList.map(a => (a.selected = true));
} else {
this.areaList.currentOrgList.map(a => (a.selected = false));
this.areaList.provinceList[idx].selected = true;
}
// 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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCounty = false;
this.isShowTown = false;
if (this.rank > 1 && item.degree != 5) {
this.isShowCity = true;
this.isDisabled = true;
this.getCityData(this.queryParams);
} else {
this.isShowProvince = true;
this.isShowCity = false;
this.isDisabled = false;
this.areaList.cityList = [];
this.areaList.countyList = [];
this.areaList.townList = [];
}
},
// 选择市的操作
citySelect(item, idx) {
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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
if (this.rank > 2 && item.degree != 5) {
this.isShowCounty = true;
this.isDisabled = true;
this.getCountyData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isDisabled = false;
this.areaList.countyList = [];
this.areaList.townList = [];
}
},
// 选择区/县的操作
countySelect(item, idx) {
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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
if (this.rank > 3 && item.degree != 5) {
this.isShowTown = true;
this.isDisabled = true;
this.getTownData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isDisabled = false;
this.areaList.townList = [];
}
},
// 选择乡镇的操作
townSelect(item, idx) {
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;
}
// // Modified By Anndy Yang
// if (item.degree == 3 || item.degree == 4) {
// this.getHospitalsByRegionId(this.queryParams);
// }
// 当前选中的样式
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() {
console.log(this.areaList);
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: 1000000015;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 353px;
// height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
z-index: 1000000016;
.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;
}
}
}
}
}
}
.my-org {
margin: 0 15px 15px;
& > span {
font-size: 12px;
color: #979899;
}
.list {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 4px;
span {
font-size: 15px;
color: #676869;
}
img {
width: 10px;
}
}
}
}
</style>
\ No newline at end of file
components/common/pica-area copy 4.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" @touchmove.prevent.stop>
<div class="mask" @click="cancelSelect" @touchmove.prevent.stop>
<div class="address-wrap" :style="{'height': areaList.currentOrgList.length ? '353px' : '293px'}" @click.stop @touchmove.prevent.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="my-org" v-show="areaList.currentOrgList.length">
<span>我所在机构</span>
<ul>
<li
class="list"
v-for="(provinceItem, index) in areaList.currentOrgList"
:key="index"
: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 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>
<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>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {
getProvinceList,
getCityList,
getCountyList,
getTownList,
// getHospitalsByRegionId
} from "../../service";
export default {
name: "PicaArea",
data() {
return {
areaList: {
currentOrgList: [],
provinceList: [],
cityList: [],
countyList: [],
townList: [],
newOrgList: []
},
value: {
cityId: "",
cityName: "",
countyId: "",
countyName: "",
patientAddress: "",
provinceId: "",
provinceName: "",
townId: "",
townName: "",
newOrgId: "",
newOrgName: "",
regionId: "",
areaDegree: 0,
},
isDisabled: true,
isShowProvince: true,
isShowCity: false,
isShowCounty: false,
isShowTown: false,
isShowOrg: false,
// 区域选择通用接口参数
queryParams: {
projectId: 374,
regionId: ""
},
currentOrgList: []
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 5
}
},
created() {
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;
},
provinceList(newVal) {
newVal[0].selected = true;
this.value.provinceName = newVal[0].label;
this.value.areaDegree = newVal[0].degree;
this.value.regionId = newVal[0].id;
this.value.provinceId = newVal[0].id;
this.queryParams.regionId = newVal[0].id;
this.value.provinceName = newVal[0].label;
// this.areaList.provinceList = newVal;
// this.areaList.provinceList[0].selected = true;
// this.value.provinceName = this.areaList.provinceList[0].label;
// this.value.areaDegree = this.areaList.provinceList[0].degree;
if(newVal[0].containHospitalFlag == 1) {
// this.value.provinceName = newVal[1].label;
// this.value.provinceName = '请选择';
this.areaList.currentOrgList = newVal.slice(0, 1);
this.areaList.provinceList = newVal.slice(1);
} else {
this.areaList.currentOrgList = [];
this.areaList.provinceList = newVal;
}
// this.value.provinceName = "全部";
}
},
methods: {
// 映射Store中的Actions
...mapActions({
setOrgList: "setOrgList",
}),
// // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
// async getHospitalsByRegionId(params) {
// await getHospitalsByRegionId(params).then(res => {
// if (res.code === "000000") {
// this.setOrgList(res.data.list || []);
// }
// });
// },
// 获取省列表
async getProvinceData(params) {
await getProvinceList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = (res.data && res.data.list) || [];
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
// 获取城市列表
async getCityData(params) {
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) {
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) {
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;
}
});
}
});
},
// 获取最后一级的机构列表
async getOrgData(params) {
await getTownList(params).then(res => {
if (res.code === "000000") {
this.areaList.newOrgList = (res.data && res.data.list) || [];
if (this.areaList.newOrgList.length === 0) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
this.isShowOrg = true;
this.isDisabled = false;
}
this.areaList.newOrgList.map(a => {
if (a.id == this.value.townId) {
a.selected = true;
}
});
}
});
},
// 选择省份的操作
provinceSelect(item, idx, isCurrent) {
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));
if(isCurrent) {
this.areaList.currentOrgList.map(a => (a.selected = true));
} else {
this.areaList.currentOrgList.map(a => (a.selected = false));
this.areaList.provinceList[idx].selected = true;
}
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
this.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCounty = false;
this.isShowTown = false;
if (this.rank > 1 && item.degree != 5) {
this.isShowCity = true;
this.isDisabled = true;
this.getCityData(this.queryParams);
} else {
this.isShowProvince = true;
this.isShowCity = false;
this.isDisabled = false;
this.areaList.cityList = [];
this.areaList.countyList = [];
this.areaList.townList = [];
this.areaList.newOrgList = [];
}
},
// 选择市的操作
citySelect(item, idx) {
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.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
if (this.rank > 2 && item.degree != 5) {
this.isShowCounty = true;
this.isDisabled = true;
this.getCountyData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isDisabled = false;
this.areaList.countyList = [];
this.areaList.townList = [];
this.areaList.newOrgList = [];
}
},
// 选择区/县的操作
countySelect(item, idx) {
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.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
if (this.rank > 3 && item.degree != 5) {
this.isShowTown = true;
this.isDisabled = true;
this.getTownData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isDisabled = false;
this.areaList.townList = [];
this.areaList.newOrgList = [];
}
},
// 选择乡镇的操作
townSelect(item, idx) {
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.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 当前选中的样式
this.areaList.townList.map(a => (a.selected = false));
this.areaList.townList[idx].selected = true;
this.isDisabled = false;
if (this.rank > 4 && item.degree != 5) {
this.isShowTown = false;
this.isShowOrg = true;
this.isDisabled = true;
this.getOrgData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
this.isDisabled = false;
this.areaList.newOrgList = [];
}
},
// 选择最后一级机构
orgSelect(item, idx) {
this.value.regionId = item.id;
this.value.newOrgId = item.id;
// this.queryParams.regionId = item.id;
this.value.newOrgName = item.label;
// this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
this.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 当前选中的样式
this.areaList.newOrgList.map(a => (a.selected = false));
this.areaList.newOrgList[idx].selected = true;
this.isDisabled = false;
},
tabAddressClick(tab) {
if (tab === 1) {
this.isShowProvince = true;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
this.isShowOrg = false;
} else if (tab === 2) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isShowTown = false;
this.isShowOrg = false;
} else if (tab === 3) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isShowOrg = false;
} else if (tab === 4) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
this.isShowOrg = false;
} else if (tab === 5) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
this.isShowOrg = true;
}
},
confirm() {
console.log(this.areaList);
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: 1000000015;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 353px;
// height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
z-index: 1000000016;
.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;
}
}
}
}
}
}
.my-org {
margin: 0 15px 15px;
& > span {
font-size: 12px;
color: #979899;
}
.list {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 4px;
span {
font-size: 15px;
color: #676869;
}
img {
width: 10px;
}
}
}
}
</style>
\ No newline at end of file
components/common/pica-area copy.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" @touchmove.prevent.stop>
<div class="mask" @click="cancelSelect" @touchmove.prevent.stop>
<div class="address-wrap" @click.stop @touchmove.prevent.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 && 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>
</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() {
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;
},
provinceList(newVal) {
this.areaList.provinceList = newVal;
this.areaList.provinceList[0].selected = true;
this.value.provinceName = this.areaList.provinceList[0].label;
this.value.areaDegree = this.areaList.provinceList[0].degree;
// this.value.provinceName = "全部";
}
},
methods: {
// 映射Store中的Actions
...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) {
await getProvinceList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = (res.data && res.data.list) || [];
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
// 获取城市列表
async getCityData(params) {
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) {
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) {
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;
}
});
}
});
},
// 选择省份的操作
provinceSelect(item, idx) {
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);
}
//控制省市县乡数据展示与隐藏
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;
}
},
// 选择市的操作
citySelect(item, idx) {
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);
}
// 控制省市县乡数据展示与隐藏
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) {
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);
}
// 控制省市县乡数据展示与隐藏
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) {
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);
}
// 当前选中的样式
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: 1000000015;
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;
z-index: 1000000016;
.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
components/common/pica-area.vue
浏览文件 @ f9cdaadb
...@@ -157,7 +157,6 @@ export default { ...@@ -157,7 +157,6 @@ export default {
cityName: "", cityName: "",
countyId: "", countyId: "",
countyName: "", countyName: "",
patientAddress: "",
provinceId: "", provinceId: "",
provinceName: "", provinceName: "",
townId: "", townId: "",
...@@ -226,6 +225,7 @@ export default { ...@@ -226,6 +225,7 @@ export default {
// this.value.provinceName = this.areaList.provinceList[0].label; // this.value.provinceName = this.areaList.provinceList[0].label;
// this.value.areaDegree = this.areaList.provinceList[0].degree; // this.value.areaDegree = this.areaList.provinceList[0].degree;
// 包含所在机构
if(newVal[0].containHospitalFlag == 1) { if(newVal[0].containHospitalFlag == 1) {
// this.value.provinceName = newVal[1].label; // this.value.provinceName = newVal[1].label;
// this.value.provinceName = '请选择'; // this.value.provinceName = '请选择';
...@@ -347,7 +347,6 @@ export default { ...@@ -347,7 +347,6 @@ export default {
this.value.provinceId = item.id; this.value.provinceId = item.id;
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.provinceName = item.label; this.value.provinceName = item.label;
// this.value.patientAddress = "";
this.value.cityId = null; this.value.cityId = null;
this.value.cityName = ""; this.value.cityName = "";
this.value.countyId = null; this.value.countyId = null;
...@@ -397,7 +396,6 @@ export default { ...@@ -397,7 +396,6 @@ export default {
this.value.cityId = item.id; this.value.cityId = item.id;
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.cityName = item.label; this.value.cityName = item.label;
// this.value.patientAddress = "";
this.value.countyId = null; this.value.countyId = null;
this.value.countyName = ""; this.value.countyName = "";
this.value.townId = null; this.value.townId = null;
...@@ -441,7 +439,6 @@ export default { ...@@ -441,7 +439,6 @@ export default {
this.value.townName = ""; this.value.townName = "";
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = ""
// this.value.patientAddress = "";
// 当前选中的样式 // 当前选中的样式
this.areaList.countyList.map(a => (a.selected = false)); this.areaList.countyList.map(a => (a.selected = false));
this.areaList.countyList[idx].selected = true; this.areaList.countyList[idx].selected = true;
...@@ -477,7 +474,6 @@ export default { ...@@ -477,7 +474,6 @@ export default {
this.value.townName = item.label; this.value.townName = item.label;
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = ""
// this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
this.value.areaDegree = item.degree; this.value.areaDegree = item.degree;
if (item.degree == 0) { if (item.degree == 0) {
return; return;
...@@ -508,7 +504,6 @@ export default { ...@@ -508,7 +504,6 @@ export default {
this.value.newOrgId = item.id; this.value.newOrgId = item.id;
// this.queryParams.regionId = item.id; // this.queryParams.regionId = item.id;
this.value.newOrgName = item.label; this.value.newOrgName = item.label;
// this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
this.value.areaDegree = item.degree; this.value.areaDegree = item.degree;
if (item.degree == 0) { if (item.degree == 0) {
return; return;
...@@ -555,7 +550,6 @@ export default { ...@@ -555,7 +550,6 @@ export default {
} }
}, },
confirm() { confirm() {
console.log(this.areaList);
this.$emit("confirm", this.value); this.$emit("confirm", this.value);
}, },
cancelSelect() { cancelSelect() {
...@@ -635,7 +629,7 @@ export default { ...@@ -635,7 +629,7 @@ export default {
display: flex; display: flex;
position: relative; position: relative;
padding-bottom: 4px; padding-bottom: 4px;
margin: 0 5px;
&:after { &:after {
content: " "; content: " ";
position: absolute; position: absolute;
...@@ -656,7 +650,8 @@ export default { ...@@ -656,7 +650,8 @@ export default {
font-size: 15px; font-size: 15px;
line-height: 35px; line-height: 35px;
height: 35px; height: 35px;
padding: 0 15px; padding: 0 10px;
// padding-right: 15px;
box-sizing: border-box; box-sizing: border-box;
max-width: 25%; max-width: 25%;
text-align: left; text-align: left;
......
components/common/pica-org copy.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<!-- 选择机构组件 -->
<template>
<div class="select-wrapper" @touchmove.prevent.stop>
<div class="mask" @click="cancel" @touchmove.prevent.stop>
<div class="address-wrap" @click.stop @touchmove.prevent.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancel">取消</span>
<h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span>
</div>
<div class="address-select">
<ul class="show-address-header">
<li class="item active">
请选择
</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul id="province">
<li
v-for="(orgItem, index) in dataList"
:key="index"
:class="{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)"
>
<span>{{ orgItem.hospitalName }}</span>
<span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "PicaOrg",
data() {
return {
dataList: [],
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
computed: {
...mapGetters({
orgList: "orgList"
})
},
watch: {
orgList: {
handler(newList) {
this.dataList = newList || [];
this.dataList.map(a => {
a.selected = false;
});
},
deep: true
}
},
created() {
},
methods: {
orgSelect(item, idx) {
this.dataList[idx].selected = !this.dataList[idx].selected;
this.$forceUpdate()
},
confirm() {
this.$emit("confirm", this.dataList);
},
cancel() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000000005;
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;
z-index: 1000000006;
.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
layouts/README.md 已删除 100644 → 0
浏览文件 @ d2dc7da2
# LAYOUTS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Application Layouts.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
middleware/README.md 已删除 100644 → 0
浏览文件 @ d2dc7da2
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
pages/index copy.vue 已删除 100644 → 0
浏览文件 @ d2dc7da2
<template>
<section class="container">
<CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
<CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" @orgClick="orgTabClick" :areaName="areaName" :orgName="orgName" :showArea="isShowArea" :showOrg="isShowOrg">
</CommonAreaSelect>
<CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
<!-- 总体概况 -->
<div v-show="isScroll" class="pd-top-60"></div>
<article v-show="cIndex === 0">
<CommonSwiperItem :isSingleOrg="isSingleOrg" :percentData="allData.percentData || {}" :certFlag="projectInfo.certFlag" @tipsClick="tipsSwiperClick"></CommonSwiperItem>
<div v-show="!isSingleOrg">
<CommonTitle v-if="projectInfo.certFlag" title="证书分布情况"></CommonTitle>
<ChartPie v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" id="certPieId2" :pieData="(allData && allData.certData)"></ChartPie>
<CommonTitle v-if="projectInfo.certFlag" title="证书级别按学历分布情况"></CommonTitle>
<ChartColumnStack v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" :echartsData="echartsData"></ChartColumnStack>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="项目情况排名"></CommonTitle>
<RankingList :certFlag="projectInfo.certFlag" :rankList="studyRankList.slice(0, 5)"></RankingList>
<ShowAll v-show="studyRankList.length > 5" @action="gotoPage('/rankedu', true)"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitleWithWhat @tipsClick="tipsRankingItemClick" title="完成天数排名"></CommonTitleWithWhat>
<RankingItemDays :rankList="costRankList.slice(0, 5)"></RankingItemDays>
<ShowAll v-show="costRankList.length > 5" @action="gotoPage('/rankdays')"></ShowAll>
</div>
<div v-show="isSingleOrg">
<CommonTitle title="培训机构情况"></CommonTitle>
<OrgDoctorList @orgDoctorTabChange="orgDoctorTabChange" :certUserList="orgDoctorTabData.certUserList" :noCertUserList="orgDoctorTabData.noCertUserList" :noJoinList="orgDoctorTabData.noJoinList" :certFlag="projectInfo.certFlag" :containOfficialFlag="projectInfo.containOfficialFlag"></OrgDoctorList>
</div>
<CommonBottomInfo></CommonBottomInfo>
</article>
<!-- 人群分析 -->
<article v-show="cIndex === 1">
<CommonTitleWithBtn title="人员学历情况" @btnClick="analysisEduClick"></CommonTitleWithBtn>
<ChartPieEdu :dataList="analysisEduData"></ChartPieEdu>
<CommonSplitLine></CommonSplitLine>
<CommonTitleWithBtn title="人员职称情况" @btnClick="analysisTitleClick"></CommonTitleWithBtn>
<ChartPieTitle :dataList="analysisTitleData"></ChartPieTitle>
<CommonBottomInfo></CommonBottomInfo>
</article>
<!-- 课程分析 -->
<article ref="courseAnalysitRef" v-show="(cIndex === 2) && (projectInfo.existCourse == 1)" style="padding-top: 8px;">
<CourseTimesStat :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg" :processDataObj="processDataObj"></CourseTimesStat>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="课程列表"></CommonTitle>
<CourseTimesList :dataList="courseInfo.pCourseList"></CourseTimesList>
<CommonBottomInfo :class="{'fixed-bottom-info': needFixedBottomInfo}"></CommonBottomInfo>
</article>
<!-- 考试分析 -->
<article v-show="(cIndex === 3) && (projectInfo.existExam == 1)">
<CommonCard :cardList="examCardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<div v-if="projectInfo.containOfficialFlag">
<CommonTitle title="完成项目考试次数情况"></CommonTitle>
<ChartColumnVerticalTimes :dataList="(generalExamData.examTimesList || []).slice(0, 5)" id="chartCourseTimesId" :colors="colors"></ChartColumnVerticalTimes>
<!-- <ShowAll v-show="generalExamData.examTimesList.length" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll> -->
<ShowAll v-show="generalExamData && generalExamData.examTimesList.length > 5" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试分数情况"></CommonTitle>
<ChartColumnVerticalScore id="chartCourseScoreId" :dataList="(generalExamData.examScoreList || []).slice(0, 5)"></ChartColumnVerticalScore>
<ShowAll v-show="generalExamData.examScoreList && generalExamData.examScoreList.length > 5" @action="gotoPage('/examscore')" class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
</div>
<CommonTitle title="考试列表"></CommonTitle>
<ExamList :dataList="examInfoList"></ExamList>
<CommonBottomInfo :class="{'fixed-bottom-info': !projectInfo.containOfficialFlag && examInfoList.length < 4}"></CommonBottomInfo>
</article>
<!-- 学习效果分析 -->
<article v-show="(cIndex === 4) && (projectInfo.existEffect == 1)">
<CommonCard :needBG="needBG" :cardList="effectCardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="不同学历培训前后正确率对比"></CommonTitle>
<ChartColumnVerticalTC :dataList="studyEffect.educationEffectList || []" id="chartColumnVerticalTC"></ChartColumnVerticalTC>
<CommonSplitLine style="margin-top: 10px;"></CommonSplitLine>
<CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
<ChartColumnHorizontalTC :dataList="(studyEffect.knowledgeEffectList || []).slice(0, 5)" id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC>
<ShowAll v-show="studyEffect.knowledgeEffectList && studyEffect.knowledgeEffectList.length > 5" @action="gotoPage('/klgpoint')" class="mt-10"></ShowAll>
<CommonBottomInfo></CommonBottomInfo>
</article>
<PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel" :projectId="projectId" :token="token"></PicaArea>
<PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
<CommonLoading v-show="false"></CommonLoading>
<PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
<Loading v-show="isShowLoading"></Loading>
</section>
</template>
<script>
const cookies = require("cookie-universal")();
import {
goPageByNative
} from "@/utils";
import {
mapGetters,
mapActions
} from "vuex";
import {
getProvinceList,
getUserAnalysis,
getHospitalsCNT,
getGeneralPersonal,
getGeneralCourse,
getGeneralExam,
getProjectInfo,
getGeneralExamList,
getStudyEffect,
getHospitalsByRegionId
} from "@/service";
import CommonHeader from "@/components/common/common-header";
import CommonTitle from "@/components/common/common-title";
import CommonTitleWithWhat from "@/components/common/common-title-with-what";
import CommonTitleWithBtn from "@/components/common/common-title-with-btn";
import CommonLoading from "@/components/common/common-loading";
import CommonTaps from "@/components/common/common-tabs";
import CommonSwiperItem from "@/components/common/common-swiper-item";
import CommonSplitLine from "@/components/common/common-split-line";
import RankingList from "@/components/bussiness/ranking-item";
import ShowAll from "@/components/common/common-show-all";
import CommonBottomInfo from "@/components/common/common-bottom-info";
import RankingItemDays from "@/components/bussiness/ranking-item-days";
import ChartPie from "@/components/bussiness/charts/chart-pie";
import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu";
import ChartPieTitle from "@/components/bussiness/charts/chart-pie-title";
import ChartColumnStack from "@/components/bussiness/charts/chart-column-stack";
import ChartColumnVerticalTimes from "@/components/bussiness/charts/chart-column-vertical-times";
import ChartColumnVerticalScore from "@/components/bussiness/charts/chart-column-vertical-score";
import ChartColumnVerticalTC from "@/components/bussiness/charts/chart-column-vertical-tc";
import ChartColumnHorizontalTC from "@/components/bussiness/charts/chart-column-horizontal-tc";
import PicaArea from "@/components/common/pica-area";
import PicaOrg from "@/components/common/pica-org";
import CommonAreaSelect from "@/components/common/common-area-select";
import ProcessBar from "@/components/common/pica-process";
import CourseTimesStat from "@/components/bussiness/course-times-stat";
import CourseTimesList from "@/components/bussiness/course-times-list";
import OrgDoctorList from "@/components/bussiness/org-doctor-list";
import ExamList from "@/components/bussiness/exam-list";
import PopTips from "@/components/bussiness/pop-tips";
import CommonCard from "@/components/common/common-card";
import Loading from "@/components/common/common-loading";
import {
getGeneralData
} from "@/service/index";
let timeOutId = null;
export default {
components: {
CommonHeader,
CommonTitle,
CommonLoading,
CommonTaps,
CommonSwiperItem,
CommonSplitLine,
RankingList,
ChartPie,
ChartPieEdu,
ChartPieTitle,
ShowAll,
CommonBottomInfo,
RankingItemDays,
ChartColumnStack,
PicaArea,
PicaOrg,
CommonAreaSelect,
ProcessBar,
CourseTimesStat,
CourseTimesList,
CommonCard,
ExamList,
// ChartColumnVertical,
ChartColumnVerticalTC,
ChartColumnHorizontalTC,
CommonTitleWithBtn,
OrgDoctorList,
ChartColumnVerticalTimes,
ChartColumnVerticalScore,
PopTips,
CommonTitleWithWhat,
Loading
},
data() {
return {
isShowLoading: true,
isScroll: false,
isShowArea: false,
isShowOrg: false,
isShowTips: false,
isShowRankingItemTips: false,
tipsContent: '',
areaName: '全部',
orgName: '全部机构',
cIndex: 0,
colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"],
needBG: true,
effectCardList: [{
count: 65,
unitName: "%",
description: "培训前正确率"
},
{
count: 80,
unitName: "%",
description: "培训后正确率"
}
],
allData: {},
studyRankList: [],
costRankList: [],
projectId: "",
token: "6774A32CF72F4AA0ABB86DF37DB7F916" ||
"79A005DB585C45C389ED1DD0C76E3633" ||
"A220943B006347799F277CC524EBB662",
isOrgStat: false,
// 区域选择通用接口参数
queryParams: {
projectId: 374,
regionId: ""
},
// 查询概况数据
queryGDParams: {
beginDate: "",
endDate: "",
hospitalIdList: [],
originalFlag: 2, // 默认值2：1.查看原始数据 2.查看调整后的数据
projectId: 374,
regionId: "",
timeFlag: 1,
pageNo: 0,
pageSize: 0,
sourceType: 1,
pageCfg: {
type: 1
}
},
echartsData: null,
analysisData: {
eduList: {
join: [],
finish: []
},
titleList: {
join: [],
finish: []
},
},
analysisEduData: [],
analysisTitleData: [],
CNTParams: {
projectId: 374,
regionId: ""
},
hospitalCnt: 2,
isSingleOrg: false,
orgDoctorTabData: {
certUserList: [],
noCertUserList: [],
noJoinList: []
},
projectInfo: {
projectName: '项目名称',
certFlag: 0, // 项目证书情况 0：无证；1：单证书；2：多证书
existCourse: 2, // 是否显示课程分析 1：显示 2：不显示
existEffect: 2, // 是否显示学习效果分析 1：显示 2：不显示
existExam: 2, // 是否显示考试分析 1：显示 2：不显示
roleType: 0, // 0：普通人 1：内部管理员 2：项目负责人 3：次级负责人
status: 0, // 是否显示查看原始数据 1：显示 2：不显示
containOfficialFlag: 0 // 0: 无正式考考试 1: 有正式考考试
},
courseInfo: {
pCourseTotalTime: 0,
pCourseAvg: 0,
pCourseList: []
},
generalExamData: {
beforeExamCount: 4,
afterExamCount: 4,
examTitleCount: 800,
examTimesList: [],
examScoreList: [],
fiveExamScoreList: [],
tenExamScoreList: []
},
examCardList: [],
examInfoList: [],
studyEffect: {
beforeRate: 0,
afterRate: 0,
educationEffectList: [],
knowledgeEffectList: []
},
processDataObj: {
},
needFixedBottomInfo: false,
};
},
filters: {
shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
}
},
computed: {
...mapGetters({
orgList: "orgList",
areaDegree: "areaDegree"
}),
},
asyncData() {
return {};
},
created() {
if (process.client) {
this.token = (this.$route && this.$route.query && this.$route.query.token) || this.token;
this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 374;
this.queryGDParams.projectId = this.projectId;
this.CNTParams.projectId = this.projectId;
this.queryParams.projectId = this.projectId;
if (this.$rocNative.isWeb) {
this.setUserToken(this.token);
cookies.set("lreporttoken", this.token);
this.setProjectId(this.projectId);
} else {
this.getUserInfo();
}
}
// this.$store.dispatch('searchHospital', { name: '测试' });
},
mounted() {
if (this.$rocNative.isWeb) {
this.getProjectInfo(this.queryParams);
}
window.addEventListener('scroll', () => { this.handleScroll() }, false);
},
methods: {
handleScroll() {
var scrollTop = window.scrollY;
if (scrollTop > 40) {
this.isScroll = true;
} else {
this.isScroll = false;
}
},
// 获取可区域高度
getViewportHeight() {
var doc = document;
var docE = doc.documentElement;
var body = doc.body;
return docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0;
// return {
// 'width': docE && docE.clientWidth || body && body.offsetWidth || window.innerWidth || 0,
// 'height': docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0
// };
},
// 切换机构人员列表中的tabs
orgDoctorTabChange(index) {
this.queryGDParams.pageCfg.type = index + 1;
this.getGeneralPersonal(this.queryGDParams);
},
// 查询用户信息和权限
getProjectInfo(params) {
getProjectInfo({
projectId: this.projectId
}).then(res => {
if (res.code === "000000") {
this.projectInfo = res.data;
getProvinceList(params).then(res => {
if (res.code === "000000") {
let regionId = (res.data && res.data.list[0] && res.data.list[0].id) || '';
this.queryGDParams.regionId = regionId;
this.CNTParams.regionId = regionId;
let proviceList = (res.data && res.data.list) || [];
let degree = (proviceList.length && proviceList[0].degree) || 0;
this.areaName = (proviceList.length && proviceList[0].label) || '全部';
this.queryParams.projectId = this.projectId;
this.queryParams.regionId = regionId;
this.getHospitalsByRegionId(this.queryParams);
this.setProvinceList(proviceList);
this.setAreaDegree(degree);
// if( degree == 3 || degree == 4) {
// this.isShowOrg = true;
// }
this.getHospitalsCNT(this.CNTParams);
}
});
}
});
},
// 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
async getHospitalsByRegionId(params) {
await getHospitalsByRegionId(params).then(res => {
if (res.code === "000000") {
this.setOrgList(res.data.list || []);
}
});
},
// 异步延迟调用其它Tabs接口（除了数据概述）
otherInterface() {
setTimeout(() => {
this.getUserAnalysis(this.queryGDParams);
this.projectInfo.existCourse == 1 && this.getGeneralCourse(this.queryGDParams);
this.projectInfo.existExam == 1 && this.getGeneralExam(this.queryGDParams);
this.projectInfo.existEffect == 1 && this.getStudyEffect(this.queryGDParams);
}, 100);
},
// 根据地区查询地区下是否有机构
getHospitalsCNT(params) {
getHospitalsCNT(params).then(res => {
if (res.code === "000000") {
this.hospitalCnt = res.data.hospitalCnt;
this.isSingleOrg = res.data.hospitalCnt === 1;
if (this.isSingleOrg) {
// 只有一个机构，则调用另外一个接口（机构下人员）
this.queryGDParams.hospitalIdList = [];
this.queryGDParams.hospitalIdList.push(res.data.list[0].hospitalId);
this.getGeneralPersonal(this.queryGDParams);
} else {
this.getGeneralData(this.queryGDParams);
}
this.otherInterface();
}
});
},
// 请求单个机构下的数据(总体概述的数据)
getGeneralPersonal(params) {
getGeneralPersonal(params).then(res => {
if (res.code === "000000") {
this.isShowLoading = false;
this.allData = res.data;
this.studyRankList = this.allData.studyRank || [];
this.costRankList = this.allData.costRank || [];
if (params.pageCfg.type === 1) {
this.orgDoctorTabData.certUserList = res.data.personData;
} else if (params.pageCfg.type === 2) {
this.orgDoctorTabData.noCertUserList = res.data.personData;
} else {
this.orgDoctorTabData.noJoinList = res.data.personData;
}
}
});
},
// 请求多个机构下的数据
getGeneralData(queryData) {
getGeneralData(queryData).then(res => {
if (res.code === "000000") {
this.isShowLoading = false;
this.allData = res.data;
this.studyRankList = this.allData.studyRank || []
this.costRankList = this.allData.costRank || [];
this.echartsData = res.data.eduData;
}
});
},
// 人群分析
getUserAnalysis(queryData) {
getUserAnalysis(queryData).then(res => {
if (res.code === "000000") {
this.analysisData = res.data;
this.analysisEduData = res.data.eduList.join;
this.analysisTitleData = res.data.titleList.join;
}
});
},
// 考试分析
getGeneralExam(queryData) {
// 上面三个图标数据
getGeneralExam(queryData).then(res => {
if (res.code === "000000") {
this.generalExamData = res.data;
this.setExamTimesList(res.data.examTimesList)
this.setExamScoreList(res.data.examScoreList)
this.examCardList = [{
count: res.data.afterExamCount,
unitName: "门",
description: "正式考试数"
},
{
count: res.data.beforeExamCount,
unitName: "门",
description: "模拟考试数"
},
{
count: res.data.examTitleCount,
unitName: "道",
description: "所有考题数"
}
];
}
});
// 下面一个列表数据
getGeneralExamList(queryData).then(res => {
if (res.code === "000000") {
this.examInfoList = res.data.examInfoList || []
}
});
},
// 课程数据
getGeneralCourse(params) {
getGeneralCourse(params).then(res => {
if (res.code === "000000") {
this.processDataObj = {
maxDuration: res.data.pCourseTotalTime,
avgDuration: res.data.pCourseAvg
}
this.processDataObj.maxDuration = res.data.pCourseTotalTime;
this.processDataObj.avgDuration = res.data.pCourseAvg;
this.courseInfo = res.data;
let viewportHeight = this.getViewportHeight();
let courseLength = res.data.pCourseList.length;
// 上面的高度 468 每一条数据的高度 60
if (viewportHeight > (468 + (courseLength - 1) * 60)) {
this.needFixedBottomInfo = true;
}
}
});
},
// 学习效果分析
getStudyEffect(params) {
getStudyEffect(params).then(res => {
if (res.code === "000000") {
this.studyEffect = res.data;
this.effectCardList[0].count = (res.data.beforeRate * 100).toFixed(1);
this.effectCardList[1].count = (res.data.afterRate * 100).toFixed(1);
}
});
},
// Tabs切换
tabClicked(index) {
this.cIndex = index;
},
// 清空参数
clearParams() {
this.orgName = '全部机构';
this.queryGDParams.hospitalIdList = [];
},
// 确认选择区域
areaConfirm(selData) {
this.clearParams();
this.queryGDParams.regionId = selData.regionId;
this.CNTParams.regionId = selData.regionId;
this.getHospitalsCNT(this.CNTParams);
this.isShowArea = false;
this.setAreaDegree(selData.areaDegree);
if (selData.townName || selData.countyName || selData.cityName || selData.provinceName) {
this.areaName = this.shortName(selData.townName || selData.countyName || selData.cityName || selData.provinceName, 6)
}
},
// 取消选择区域
areaCancel() {
this.isShowArea = false;
},
// 确认选择机构
orgConfirm(selData) {
let hospitalIds = [];
let hospitalNames = [];
let orgName = '';
selData.forEach(org => {
if (org.selected) {
hospitalIds.push(org.hospitalId);
hospitalNames.push(org.hospitalName);
}
});
// 如果没有选择机构，则重新获取所有数据
this.isShowOrg = false;
this.orgName = this.shortName(hospitalNames[0] || '全部机构', 6);
this.queryGDParams.hospitalIdList = hospitalIds;
if (hospitalIds.length == 0) {
this.getHospitalsCNT(this.CNTParams);
return;
}
if (hospitalIds.length === 1) {
// this.hospitalCnt = 1
this.orgDoctorTabData.certUserList = [];
this.orgDoctorTabData.noCertUserList = [];
this.orgDoctorTabData.noJoinList = [];
this.isSingleOrg = true;
this.getGeneralPersonal(this.queryGDParams);
} else {
this.isSingleOrg = false;
this.getGeneralData(this.queryGDParams);
}
this.otherInterface();
},
// 取消选择机构
orgCancel() {
this.isShowOrg = false;
},
// 弹出选择区域控件
areaTabClick() {
if (this.isShowOrg) {
this.isShowOrg = false;
}
this.isShowArea = !this.isShowArea;
},
// 弹出选择机构控件
orgTabClick() {
if (this.areaDegree !== 3 && this.areaDegree !== 4) {
this.$toast('选择区/县后才可选择机构');
return;
}
if (this.orgList.length === 0) {
this.$toast('此区域下无机构');
return;
}
this.isShowOrg = !this.isShowOrg;
},
// 通用跳转页面
gotoPage(subUrl, hasCert) {
let subUrlAndParams = `${subUrl}?token=${this.token}&projectId=${this.queryGDParams.projectId}&regionId=${this.queryGDParams.regionId}&hospitalIdList=${this.queryGDParams.hospitalIdList.join(',')}`
if (hasCert) {
subUrlAndParams += `&certFlag=${this.projectInfo.certFlag}`
}
if (this.$rocNative.isWeb) {
this.$router.push(subUrlAndParams);
} else {
let nativeUrl = `/lreport_ssr${subUrlAndParams}`
goPageByNative(this, nativeUrl);
}
},
// 人员学历情况切换按钮
analysisEduClick(index) {
this.analysisEduData = this.analysisData.eduList[
index ? "finish" : "join"
] || [];
this.$forceUpdate();
},
// 人员职称情况切换按钮
analysisTitleClick(index) {
this.analysisTitleData = this.analysisData.titleList[
index ? "finish" : "join"
] || [];
this.$forceUpdate();
},
// 与原生交互，获取用户信息
getUserInfo() {
this.$rocNative.getUserInfo &&
this.$rocNative.getUserInfo().then(params => {
this.token = params.userToken; // 测试用时注释掉
cookies.set("lreporttoken", this.token);
this.setUserToken(this.token);
this.setProjectId(this.projectId);
this.getProjectInfo(this.queryParams);
});
},
// 弹出提示信息一
tipsRankingItemClick() {
this.tipsContent = '在线项目完成天数=完成项目时间-开始参与项目时间'
this.isShowTips = true
},
// 弹出提示信息二
tipsSwiperClick(tipsContent) {
this.tipsContent = tipsContent; //'是已获证人数/应参与人数*100%'
this.isShowTips = true
},
// 关闭提示信息
clickTips() {
this.isShowTips = false
},
// 文本截断
shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
// 映射Store中的Actions
...mapActions({
setOrgList: "setOrgList",
setProjectId: "setProjectId",
setRegionId: "setRegionId",
setUserToken: "setUserToken",
setProvinceList: "setProvinceList",
setExamTimesList: "setExamTimesList",
setExamScoreList: "setExamScoreList",
setAreaDegree: "setAreaDegree"
})
}
};
</script>
<style lang="less" scoped>
.container {
margin: 0 auto;
font-size: 17px;
h1 {
font-size: 36px;
text-align: center;
}
.m1 {
width: 100%;
>div {
width: 100%;
}
}
.mt-10 {
margin-top: 0;
}
.fixed-bottom-info {
position: fixed;
bottom: 0;
left: 0;
}
.pd-top-60 {
padding-top: 85px;
}
}
</style>
pages/index.vue
浏览文件 @ f9cdaadb
<template> <template>
<section class="container"> <section class="container">
<CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader> <CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
<CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" :areaName="areaName" :orgName="orgName" :showArea="isShowArea" :showOrg="isShowOrg"> <CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" :areaName="areaName" :showArea="isShowArea">
</CommonAreaSelect> </CommonAreaSelect>
<!-- <CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" @orgClick="orgTabClick" :areaName="areaName" :orgName="orgName" :showArea="isShowArea" :showOrg="isShowOrg">
</CommonAreaSelect> -->
<CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps> <CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
<!-- 总体概况 --> <!-- 总体概况 -->
<div v-show="isScroll" class="pd-top-60"></div> <div v-show="isScroll" class="pd-top-60"></div>
...@@ -85,7 +83,6 @@ ...@@ -85,7 +83,6 @@
</article> </article>
<PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel" :projectId="projectId" :token="token"></PicaArea> <PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel" :projectId="projectId" :token="token"></PicaArea>
<!-- <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg> -->
<CommonLoading v-show="false"></CommonLoading> <CommonLoading v-show="false"></CommonLoading>
<PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips> <PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
<Loading v-show="isShowLoading"></Loading> <Loading v-show="isShowLoading"></Loading>
...@@ -186,12 +183,10 @@ export default { ...@@ -186,12 +183,10 @@ export default {
isShowLoading: false, isShowLoading: false,
isScroll: false, isScroll: false,
isShowArea: false, isShowArea: false,
isShowOrg: false,
isShowTips: false, isShowTips: false,
isShowRankingItemTips: false, isShowRankingItemTips: false,
tipsContent: '', tipsContent: '',
areaName: '全部', areaName: '全部',
orgName: '全部机构',
cIndex: 0, cIndex: 0,
colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"], colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"],
needBG: true, needBG: true,
...@@ -556,7 +551,6 @@ export default { ...@@ -556,7 +551,6 @@ export default {
// 清空参数 // 清空参数
clearParams() { clearParams() {
this.orgName = '全部机构';
this.queryGDParams.hospitalIdList = []; this.queryGDParams.hospitalIdList = [];
}, },
...@@ -586,67 +580,19 @@ export default { ...@@ -586,67 +580,19 @@ export default {
// 确认选择机构 // 确认选择机构
orgConfirmNew(selData) { orgConfirmNew(selData) {
console.log(selData);
let regionIdAndOrgId = selData.regionId, lindex = regionIdAndOrgId.lastIndexOf('_'); let regionIdAndOrgId = selData.regionId, lindex = regionIdAndOrgId.lastIndexOf('_');
let regionId = regionIdAndOrgId.slice(0, lindex), orgId = regionIdAndOrgId.slice(lindex + 1); let regionId = regionIdAndOrgId.slice(0, lindex), orgId = regionIdAndOrgId.slice(lindex + 1);
let hospitalIds = [orgId]; let hospitalIds = [orgId];
this.isShowArea = false; this.isShowArea = false;
this.queryGDParams.regionId = regionId; this.queryGDParams.regionId = regionId;
this.CNTParams.regionId = regionId; this.CNTParams.regionId = regionId;
// let hospitalNames = [];
// let orgName = '';
// selData.forEach(org => {
// if (org.selected) {
// hospitalIds.push(org.hospitalId);
// hospitalNames.push(org.hospitalName);
// }
// });
// 如果没有选择机构，则重新获取所有数据
// this.isShowOrg = false;
// this.orgName = this.shortName(hospitalNames[0] || '全部机构', 6);
this.queryGDParams.hospitalIdList = hospitalIds;
if (hospitalIds.length == 0) {
this.getHospitalsCNT(this.CNTParams);
return;
}
if (hospitalIds.length === 1) {
// this.hospitalCnt = 1
this.orgDoctorTabData.certUserList = [];
this.orgDoctorTabData.noCertUserList = [];
this.orgDoctorTabData.noJoinList = [];
this.isSingleOrg = true;
this.getGeneralPersonal(this.queryGDParams);
} else {
this.isSingleOrg = false;
this.getGeneralData(this.queryGDParams);
}
this.otherInterface();
},
// 确认选择机构
orgConfirm(selData) {
console.log(selData);
let hospitalIds = [];
let hospitalNames = [];
let orgName = '';
selData.forEach(org => {
if (org.selected) {
hospitalIds.push(org.hospitalId);
hospitalNames.push(org.hospitalName);
}
});
// 如果没有选择机构，则重新获取所有数据
this.isShowOrg = false;
this.orgName = this.shortName(hospitalNames[0] || '全部机构', 6);
this.queryGDParams.hospitalIdList = hospitalIds; this.queryGDParams.hospitalIdList = hospitalIds;
if (hospitalIds.length == 0) { if (hospitalIds.length == 0) {
this.getHospitalsCNT(this.CNTParams); this.getHospitalsCNT(this.CNTParams);
return; return;
} }
if (hospitalIds.length === 1) { if (hospitalIds.length === 1) {
// this.hospitalCnt = 1 this.hospitalCnt = 1 // todo
this.orgDoctorTabData.certUserList = []; this.orgDoctorTabData.certUserList = [];
this.orgDoctorTabData.noCertUserList = []; this.orgDoctorTabData.noCertUserList = [];
this.orgDoctorTabData.noJoinList = []; this.orgDoctorTabData.noJoinList = [];
...@@ -659,33 +605,11 @@ export default { ...@@ -659,33 +605,11 @@ export default {
this.otherInterface(); this.otherInterface();
}, },
// // 取消选择机构
// orgCancel() {
// this.isShowOrg = false;
// },
// 弹出选择区域控件 // 弹出选择区域控件
areaTabClick() { areaTabClick() {
// if (this.isShowOrg) {
// this.isShowOrg = false;
// }
this.isShowArea = !this.isShowArea; this.isShowArea = !this.isShowArea;
}, },
// // 弹出选择机构控件
// orgTabClick() {
// if (this.areaDegree !== 3 && this.areaDegree !== 4) {
// this.$toast('选择区/县后才可选择机构');
// return;
// }
// if (this.orgList.length === 0) {
// this.$toast('此区域下无机构');
// return;
// }
// this.isShowOrg = !this.isShowOrg;
// },
// 通用跳转页面 // 通用跳转页面
gotoPage(subUrl, hasCert) { gotoPage(subUrl, hasCert) {
let subUrlAndParams = `${subUrl}?token=${this.token}&projectId=${this.queryGDParams.projectId}&regionId=${this.queryGDParams.regionId}&hospitalIdList=${this.queryGDParams.hospitalIdList.join(',')}` let subUrlAndParams = `${subUrl}?token=${this.token}&projectId=${this.queryGDParams.projectId}&regionId=${this.queryGDParams.regionId}&hospitalIdList=${this.queryGDParams.hospitalIdList.join(',')}`
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或