|
@ -0,0 +1,422 @@
|
|
|
<template>
|
|
|
<div class='order-list-filter'>
|
|
|
<van-popup v-model="filterShow" position="right">
|
|
|
<div class="fs-14 c-333 filter-panel">
|
|
|
<div class="inner-content plr15">
|
|
|
<div class="ptb10">按社区</div>
|
|
|
<div class="drop-menu" :class="{active: drowMenuShow}">
|
|
|
<div class="drop-menu-title tc fs-14" @click="drowMenuShow=!drowMenuShow">
|
|
|
<span class="v-middle">{{selcommunity? selcommunity.hospitalName : '全部'}}</span>
|
|
|
<van-icon name="arrow-down" />
|
|
|
</div>
|
|
|
<div class="drop-menu-area kitbox">
|
|
|
<div class="drop-menu-area-left" v-if="townList&&townList.length">
|
|
|
<van-sidebar v-model="activeKey">
|
|
|
<van-sidebar-item v-for="(item, i) in townList" :key="i" :title="item.townName" />
|
|
|
</van-sidebar>
|
|
|
</div>
|
|
|
<div class="drop-menu-area-right">
|
|
|
<div v-for="(item, i) in communityList" :key="i" @click="selcommunity=item;drowMenuShow=false;onSearch()">{{item.hospitalName}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ptb10 mt10">按时间</div>
|
|
|
<div class="">
|
|
|
<van-tag @click="endDate='';startDate='';dateType=item.value" v-for="(item, i) in dateTypeOpts" :key="i" :class="{active: item.value===dateType}" type="primary" round>{{item.name}}</van-tag>
|
|
|
|
|
|
<van-tag @click="pickDate(1)" type="primary" round :class="{active: startDate}">{{(startDate&&$moment(startDate).format('YYYY-MM-DD')) || '请选择日期'}}</van-tag>
|
|
|
<van-tag class="small" type="primary" round>至</van-tag>
|
|
|
<van-tag @click="pickDate(2)" type="primary" round :class="{active: endDate}">{{(endDate&&$moment(endDate).format('YYYY-MM-DD')) || '请选择日期'}}</van-tag>
|
|
|
</div>
|
|
|
|
|
|
<div class="ptb10">按类型</div>
|
|
|
<div class="">
|
|
|
<van-tag @click="state=item.value" v-for="(item, i) in stateOpts" :key="i" :class="{active: item.value===state}" type="primary" round>{{item.name}}</van-tag>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="buttons kitbox ">
|
|
|
<div><van-button @click="reset" round block plain size="small">重置</van-button></div>
|
|
|
<div><van-button @click="submit" round block type="primary" color="#17b3ec" size="small">确定</van-button></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
|
|
|
<van-popup v-model="datePickerShow" position="bottom" >
|
|
|
<van-datetime-picker
|
|
|
v-model="currentDate"
|
|
|
@confirm="onPick"
|
|
|
@cancel="datePickerShow=false"
|
|
|
type="date"
|
|
|
title=""
|
|
|
:max-date="maxDate"
|
|
|
:min-date="minDate"
|
|
|
/>
|
|
|
</van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { findOneUser} from "@/api/login";
|
|
|
import medicineAbinetApi from '@/api/api-medicineAbinet'
|
|
|
export default{
|
|
|
props: ['value'],
|
|
|
data(){
|
|
|
return {
|
|
|
communityText: '全部',
|
|
|
filterShow: false,
|
|
|
currentDate: new Date(),
|
|
|
minDate: this.$moment('2020-01-01').toDate(),
|
|
|
maxDate: new Date(),
|
|
|
datePickerShow: false,
|
|
|
startDate: '',
|
|
|
endDate: '',
|
|
|
|
|
|
|
|
|
pickType: 1,
|
|
|
totalCount: 0,
|
|
|
totalMoney: 0,
|
|
|
activeKey: 0,
|
|
|
|
|
|
value1: '',
|
|
|
defaultOption: [
|
|
|
{ townName: '全部', townCode: "", children: [{hospitalCode: '', hospitalName: '全部'}] },
|
|
|
],
|
|
|
drowMenuShow: false,
|
|
|
|
|
|
townList: [],
|
|
|
communityList: [],
|
|
|
selcommunity: '',
|
|
|
|
|
|
stateOpts: [
|
|
|
{name: '全部', value: ''},
|
|
|
{name: '未取药', value: 0},
|
|
|
{name: '已取药', value: 1},
|
|
|
],
|
|
|
state: '',
|
|
|
dateTypeOpts: [
|
|
|
{name: '1个月内', value: 1},
|
|
|
{name: '3个月内', value: 3},
|
|
|
{name: '6个月内', value: 6},
|
|
|
],
|
|
|
dateType: 3
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
value(n){
|
|
|
this.filterShow = n
|
|
|
},
|
|
|
filterShow(n){
|
|
|
this.$emit('input', n)
|
|
|
},
|
|
|
activeKey(n){
|
|
|
this.loadChildren()
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
var cur = this.$moment().subtract()
|
|
|
var year = cur.years()
|
|
|
this.dateTypeOpts.push(
|
|
|
{name: '今年', value: year}
|
|
|
)
|
|
|
var year = cur.subtract(1, 'years').years()
|
|
|
this.dateTypeOpts.push(
|
|
|
{name: year+"年", value: year}
|
|
|
)
|
|
|
year = cur.subtract(1, 'years').years()
|
|
|
this.dateTypeOpts.push(
|
|
|
{name: year+"年", value: year}
|
|
|
)
|
|
|
this.getOrgList()
|
|
|
},
|
|
|
methods:{
|
|
|
reset(){
|
|
|
this.dateType = 3
|
|
|
this.selcommunity = ''
|
|
|
this.state = ''
|
|
|
},
|
|
|
submit(){
|
|
|
var {dateType} = this
|
|
|
console.log(this.selcommunity, 'this.selcommunity')
|
|
|
var startTime = '', endTime = ''
|
|
|
if(dateType==1 || dateType==3 || dateType==6){
|
|
|
startTime = this.$moment().subtract(dateType, 'months')
|
|
|
endTime = new Date()
|
|
|
} else if(dateType > 2000){
|
|
|
var time = this.$moment().years(dateType)
|
|
|
startTime = time.startOf('year')
|
|
|
endTime = time.endOf('year')
|
|
|
} else {
|
|
|
if(this.startDate){
|
|
|
startTime = this.startDate
|
|
|
}
|
|
|
if(this.endDate){
|
|
|
endTime = this.endDate
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.$emit('onSubmit', {
|
|
|
selcommunity: this.selcommunity,
|
|
|
sellState: this.state,
|
|
|
startTime,
|
|
|
endTime
|
|
|
})
|
|
|
this.$emit('input', false)
|
|
|
},
|
|
|
pickDate(pickType){
|
|
|
this.pickType = pickType
|
|
|
this.currentDate = pickType ==1? this.startDate : this.endDate
|
|
|
this.datePickerShow = true
|
|
|
},
|
|
|
onPick(){
|
|
|
this.dateType = ''
|
|
|
var date = this.$moment(this.currentDate).toDate()
|
|
|
if(this.pickType ==1){
|
|
|
this.startDate = date
|
|
|
} else {
|
|
|
this.endDate = date
|
|
|
}
|
|
|
this.datePickerShow = false
|
|
|
},
|
|
|
getOrgList(){
|
|
|
findOneUser({
|
|
|
id: this.user.id
|
|
|
}).then(async res => {
|
|
|
// "saasAdmin": "管理员"; regionAdmin" "区域管理员" ; communityAdmin "社区管理员" ; "replenisher": "补货员"
|
|
|
var role = this.user.curRoleCode
|
|
|
var userArea = res.obj.userArea
|
|
|
var townList = [].concat(this.defaultOption)
|
|
|
if(role=='communityAdmin' || role=="replenisher"){
|
|
|
var g = _.groupBy(userArea, 'town')
|
|
|
for(var k in g){
|
|
|
var tmp = g[k][0].concat([])
|
|
|
tmp.children = g[k]
|
|
|
townList.push(tmp)
|
|
|
}
|
|
|
this.townList = townList
|
|
|
} else {
|
|
|
if(role == 'regionAdmin'){
|
|
|
userArea.forEach(v => {
|
|
|
v.children = []
|
|
|
});
|
|
|
this.townList = townList.concat(userArea)
|
|
|
} else if(role=='saasAdmin'){
|
|
|
await medicineAbinetApi
|
|
|
.baseTownList({ filters: "city=350200"})//写死厦门市
|
|
|
.then(res => {
|
|
|
console.log('baseTownList', res)
|
|
|
if (res.status == 200) {
|
|
|
var detailModelList = res.detailModelList;
|
|
|
detailModelList.forEach((item) => {
|
|
|
item.town = item.code
|
|
|
item.townName = item.name
|
|
|
item.children = [];
|
|
|
});
|
|
|
this.townList = townList.concat(detailModelList)
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
this.loadChildren()
|
|
|
});
|
|
|
},
|
|
|
async loadChildren(){
|
|
|
var item = this.townList[this.activeKey]
|
|
|
if(!item.children || !item.children.length){
|
|
|
await medicineAbinetApi
|
|
|
.findOrgList({ code: item.town, paeg: 1, pageSize: 999 })
|
|
|
.then(res => {
|
|
|
console.log('findOrgList', res)
|
|
|
if (res.status == 200) {
|
|
|
res.detailModelList.forEach(v=>{
|
|
|
v.hospitalName = v.name
|
|
|
v.hospitalCode = v.code
|
|
|
})
|
|
|
item.children = res.detailModelList
|
|
|
}
|
|
|
})
|
|
|
.catch(err=>{
|
|
|
item.children = []
|
|
|
})
|
|
|
}
|
|
|
|
|
|
this.communityList = item.children
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
.order-list-filter{
|
|
|
.top-banner{
|
|
|
.search-date{
|
|
|
background: #f2f3f5;
|
|
|
}
|
|
|
.date-item{
|
|
|
width: 110px;
|
|
|
text-align: center;
|
|
|
padding: 5px 0;
|
|
|
border: 1px solid #ccc;
|
|
|
background: #fff;
|
|
|
color: #333;
|
|
|
border-radius: 30px;
|
|
|
}
|
|
|
.van-button--mini{
|
|
|
height: 28px;
|
|
|
width: 60px;
|
|
|
}
|
|
|
.drop-menu{
|
|
|
position: relative;
|
|
|
.van-sidebar-item--select::before{
|
|
|
background-color: #17b3ec;
|
|
|
}
|
|
|
.drop-menu-title{
|
|
|
padding: 10px 0;
|
|
|
background: #fff;
|
|
|
.van-icon{
|
|
|
transform: rotate(90deg);
|
|
|
}
|
|
|
}
|
|
|
.drop-menu-area{
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
display: none;
|
|
|
border-top: 1px solid #e1e1e1;
|
|
|
height: calc(100% - 39px);
|
|
|
.drop-menu-area-right{
|
|
|
height: 100%;
|
|
|
overflow-y: auto;
|
|
|
background: #fff;
|
|
|
-webkit-box-flex: 1;
|
|
|
>div{
|
|
|
padding: 10px 15px;
|
|
|
border-bottom: 1px solid #e1e1e1;
|
|
|
&:last-child{
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&.active{
|
|
|
background: rgba($color: #000000, $alpha: .4);
|
|
|
height: calc(100vh - 49px);
|
|
|
.drop-menu-area{
|
|
|
display: -webkit-box;
|
|
|
}
|
|
|
.drop-menu-title{
|
|
|
color: #17b3ec;
|
|
|
.van-icon{
|
|
|
transform: rotate(-90deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.filter-panel{
|
|
|
background: #fff;
|
|
|
width: 90vw;
|
|
|
height: 100vh;
|
|
|
.inner-content{
|
|
|
overflow-y: auto;
|
|
|
height: calc(100% - 60px);
|
|
|
}
|
|
|
.community-input{
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 100px;
|
|
|
line-height: 30px;
|
|
|
padding: 0 15px;
|
|
|
position: relative;
|
|
|
padding-right: 40px;
|
|
|
.van-icon{
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
.van-tag{
|
|
|
width: 95px;
|
|
|
text-align: center;
|
|
|
background: rgb(242, 242, 242);
|
|
|
color: #999;
|
|
|
padding: 5px 0;
|
|
|
justify-content: center;
|
|
|
margin-bottom: 10px;
|
|
|
margin-right: 10px;
|
|
|
&:nth-child(3n){
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
&.active{
|
|
|
background: #17b3ec;
|
|
|
color: #fff;
|
|
|
}
|
|
|
&.small{
|
|
|
width: 20px;
|
|
|
background: #fff;
|
|
|
}
|
|
|
}
|
|
|
.buttons{
|
|
|
position: absolute;
|
|
|
bottom: 15px;
|
|
|
width: calc(100%);
|
|
|
>div{
|
|
|
width: 50%;
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.drop-menu{
|
|
|
position: relative;
|
|
|
.van-sidebar-item--select::before{
|
|
|
background-color: #17b3ec;
|
|
|
}
|
|
|
.drop-menu-title{
|
|
|
padding: 5px 15px;
|
|
|
background: #fff;
|
|
|
border-radius: 30px;
|
|
|
border: 1px solid #e1e1e1;
|
|
|
text-align: left;
|
|
|
.van-icon{
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
top: 8px;
|
|
|
}
|
|
|
}
|
|
|
.drop-menu-area{
|
|
|
margin-top: 10px;
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
display: none;
|
|
|
border-top: 1px solid #e1e1e1;
|
|
|
height: calc(100% - 39px);
|
|
|
.drop-menu-area-right{
|
|
|
height: 100%;
|
|
|
overflow-y: auto;
|
|
|
background: #fff;
|
|
|
-webkit-box-flex: 1;
|
|
|
>div{
|
|
|
padding: 10px 15px;
|
|
|
border-bottom: 1px solid #e1e1e1;
|
|
|
&:last-child{
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&.active{
|
|
|
height: calc(100vh - 49px);
|
|
|
.drop-menu-area{
|
|
|
display: -webkit-box;
|
|
|
}
|
|
|
.drop-menu-title{
|
|
|
color: #17b3ec;
|
|
|
.van-icon{
|
|
|
transform: rotate(-180deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|