intelligent-medicine-cabinet/mini-pro-web/src/views/order/list.vue

<template>
    <div class='order-list'>
        <van-sticky :offset-top="offsetTop">
            <div class="top-banner  fs-14 kitbox ">
                <div class="box-flex-1">
                    <form action="/">
                        <van-search
                            v-model="searchText"
                            placeholder="订单号、手机号、社区名称"
                            @search="onSearch"
                            shape="round"
                        >
                        <!-- <div v-if="type!='pending'" slot="action" class="plr5 search-action">
                            <div class="sort-panel" @click.stop="onSort">
                                <div>时间</div>
                                <div>
                                    <img v-show="sortAsc===true" src="@/assets/images/z-paixu.png" alt="">
                                    <img v-show="sortAsc===false" src="@/assets/images/z-paixu1.png" alt="">
                                </div>
                            </div>
                            <van-icon @click="filterShow=true" style="vertical-align: text-bottom;" color="#17b3ec" size="20px" name="filter-o" />
                        </div> -->
                        </van-search>
                    </form>
                </div>
                <div>
                    <div v-if="type!='pending'" slot="action" class="pr15 search-action">
                        <div class="sort-panel" @click.stop="onSort">
                            <div>时间</div>
                            <div>
                                <img v-show="sortAsc===true" src="@/assets/images/z-paixu.png" alt="">
                                <img v-show="sortAsc===false" src="@/assets/images/z-paixu1.png" alt="">
                            </div>
                        </div>
                        <van-icon @click="filterShow=true" style="vertical-align: text-bottom;" color="#17b3ec" size="20px" name="filter-o" />
                    </div>
                </div>


                <!-- <div @click="drowMenuShow=false" class="kitbox pl15 search-date ptb10">
                    <div @click="pickDate(1)" class="date-item">{{$moment(startDate).format('YYYY-MM-DD')}}</div>
                    <div class="ptb5 plr10">至</div>
                    <div @click="pickDate(2)" class="date-item">{{$moment(endDate).format('YYYY-MM-DD')}}</div>
                    <div class="pl15  box-flex-1 tr pr15">
                        <van-button @click="onSearch" type="info" size="mini">搜索</van-button>
                    </div>
                </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 class="v-middle ml5" name="play" />
                    </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>
        </van-sticky>
        
            <!-- searchPlaceholder="订单号、金额、手机号" -->

        <CustomList 
			ref="customList"
            :searchfun="false"
			@onLoad="onLoad">
			<div class="list plr15">
                <div @click="gotoUrl('/order/detail', {id: item.id})" v-for="(item, i) in list" :key="i" class="item plr15 c-333 fs-14">
                    <div class="kitbox ptb10 bb-e1e1e1">
                        <div class="box-flex-1 fs-14">订单编号：{{item.prescribeNum}}</div>
                        <div v-if="item.sellState==1" class="c-17b3ec">{{item.sellStateName}}</div>
                        <div v-else class="" >{{item.sellStateName}}</div>
                        <div>-<span class="c-17b3ec" v-if="item.reviewerState==1">审核通过</span><span class="c-ff5e6c" v-else-if="item.reviewerState==-1">审核不通过</span><span class="c-ff5e6c" v-else-if="item.reviewerState==-2">取消审方</span><span v-else>未审方</span></div>
                    </div>
                    <div class="lh20 ptb10">
                        <div>来源机构：{{item.community}}</div>
                        <div>订单类型：{{item.orderSource=='厦门i健康'? '线上订单' : "线下订单"}}</div>
                        <div>开方时间：{{item.orderSource=='厦门i健康'? formatDatetime(item.prescribeTime) : formatDate(item.prescribeTime)}}</div>
                        <div>取药码：{{item.pickUpNum}}</div>
                    </div>
                    <div class="ptb10 bt-e1e1e1 kitbox" v-if="item.amount">
                        <div class="box-flex-1 lh24"><span v-if="item.amount">￥{{item.amount}}</span></div>
                        <!-- <div v-if="item.reviewerState==1 || item.reviewerState==-1"><van-button @click.stop="reviewerOrder(item)" size="mini" color="#17b3ec" type="primary">取消审方</van-button></div> -->
                    </div>
                </div>
            </div>
		</CustomList>

        <FilterPanel v-if="type!='pending'" v-model="filterShow" :extendList="extendList" @onSubmit="onSubmit" ref="Filter"/>
        <!-- <van-popup v-model="filterShow" position="right">
            <div class="fs-14 c-333 plr15 filter-panel">
                <div class="ptb10">按社区</div>

                <div class="ptb10">按时间</div>
                <div class="">
                    <van-tag type="primary" round>全部</van-tag>
                    <van-tag type="primary" round>标签</van-tag>
                    <van-tag type="primary" round>标签</van-tag>
                    <van-tag type="primary" round>标签</van-tag>
                </div>

                <div class="ptb10">按类型</div>
                <div class="">
                    <van-tag type="primary" round>全部</van-tag>
                    <van-tag type="primary" round>标签</van-tag>
                    <van-tag type="primary" round>标签</van-tag>
                </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"
            />
        </van-popup>

        <div class="bot-banner ptb10 bgc-fff">
            <div class="kitbox fs-14">
                <div class="pr40 box-v-middle pl15">
                    共 {{totalCount}} 笔订单
                </div>
                <!-- <div class="box-flex-1 plr15 tr">
                    药品总金额 ￥{{totalMoney}}
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
import FilterPanel from './components/Filter'
import medicineAbinetApi from '@/api/api-medicineAbinet'
import { findOneUser} from "@/api/login";
export default{
    name: 'orderList',
    props: ['type'],
    components:{
        FilterPanel
    },
    data(){
        return {
            filterShow: false,
            searchText: '',
            list: [],
            currentDate: new Date(),
            maxDate: new Date(),
            datePickerShow: false,
            startDate: this.$moment().subtract(30, 'days'),
            endDate: new Date(),
            pickType: 1,
            totalCount: 0,
            totalMoney: 0,
            activeKey: 0,

            value1: '',
            defaultOption: [
                { townName: '全部', townCode: "", children: [{hospitalCode: '', hospitalName: '全部'}] },
            ],
            drowMenuShow: false,

            townList: [],
            communityList: [],
            selcommunity: '',
            sellState: '',

            extendList: [{
                name: "按审方状态",
                value: this.type == 'pending'? 0 : '',
                opts: [
                    {name: '全部', value: ""},
                    {name: '未审方', value: 0},
                    {name: '审方通过', value: 1},
                    {name: '审方不通过', value: -1},
                    // {name: '取消审方', value: -2},
                ],
            }],
            sortAsc: false 
        }
    },
    watch: {
        activeKey(n){
            this.loadChildren()
        }
    },
    created() {
        if(this.type == 'pending'){
            this.startDate = this.$moment("2000-01-01")
        }
    },
    mounted(){
        var allTime = false
        if(this.$route.query.hospital||this.$route.query.town){
            this.selcommunity = {
                hospitalCode: this.$route.query.hospital||'',
                hospitalName: this.$route.query.hospitalName||'',
                town: this.$route.query.town||'',
                townName: this.$route.query.townName||'',
            }
        }
        if(this.$route.query.sellState!==''&&this.$route.query.sellState!==undefined){
            this.sellState = this.$route.query.sellState
            allTime = true
        }
        if(this.type != 'pending'){
            this.$refs.Filter.submit(this.selcommunity, this.sellState, allTime)
        }
    },
    methods:{
        $refreshData(){
            this.$refs.customList.refresh(true)
        },
        onLoad({page, pageSize, searchText}){
            var { startDate, endDate } = this
            var p 
            if(this.searchText){
                p = {
                    userId: this.user.id,
                    content: this.searchText,
                    timeSort: this.sortAsc? 1 : 2,
                    page: page,
                    size: pageSize
                }
            } else {
                var town = '', community = ''
                if(this.selcommunity){
                    community = this.selcommunity.hospitalCode||this.selcommunity.hospital||''
                    town = community? '' : (this.selcommunity.town||'')
                }
                p = {
                    startTime: startDate? this.$moment(startDate).format('YYYY-MM-DD 00:00:00') : '',
                    endTime: endDate? this.$moment(endDate).format('YYYY-MM-DD 23:59:59') : '',
                    userId: this.user.id,
                    community,
                    sellState: this.sellState,
                    reviewerState: this.extendList[0].value,
                    town,
                    page: page,
                    size: pageSize,
                    timeSort: this.sortAsc? 1 : -1,
                } 
            }
            console.log('params', p)
            medicineAbinetApi
                .orderList(p)
                .then(res=>{
                    console.log('orderList', res)
                    if(res.status == 200){
                        this.totalCount = res.totalCount
                        var list = res.detailModelList
                        this.list = page==1? list : this.list.concat(list)
                        this.$refs.customList.endLoad(!res.detailModelList || res.detailModelList.length==0, this.list.length)
                    } else {
                        this.onLoadError()
                    }
                }).catch(err=>{
                    console.error(err)
                    this.onLoadError()
                })
        },
        onLoadError(){
            this.list = []
            this.totalCount = 0
            this.$refs.customList.endLoad(false, true)
        },
        pickDate(pickType){
            this.pickType = pickType
            this.currentDate = pickType ==1? this.startDate : this.endDate
            this.datePickerShow = true
        },
        onPick(){
            var date = this.$moment(this.currentDate).toDate()
            if(this.pickType ==1){
                this.startDate = date
            } else {
                this.endDate = date
            }
            this.datePickerShow = false
        },
        onSearch(){
            this.list = []
            this.$refs.customList.refresh(true)
        },
        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
        },
        onSubmit(data){
            this.startDate = data.startTime
            this.endDate = data.endTime
            this.selcommunity = data.selcommunity
            this.sellState = data.sellState
            this.onSearch()
        },
        reviewerOrder(item){
            new Promise((resolve, reject)=>{
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定取消审核？',
                })
                .then(() => {
                    resolve()
                })
                .catch(() => {
                    reject()
                });
            }).then(res=>{
                this.$loading('加载中..')
                let p = {
                    orderId: item.id,
                    reviewerState: -2,
                    reviewerContent: '',
                    doctor: this.user.id
                }
                medicineAbinetApi
                    .reviewerOrder(p)
                    .then(res=>{
                        console.log('reviewerOrder', res)
                        if(res.status == 200){
                            this.$toast("操作成功")
                            item.reviewerState = -2
                        } 
                    })
                    .catch(err=>{
                        console.error(err)
                    })
            }).catch(err=>{
                console.error(err)
            })
            
        },
        onSort(){
            this.sortAsc = !this.sortAsc
            this.$refs.customList.refresh(true)
        }
    },
}
</script>
<style lang='scss' scoped>
.order-list{
    .custom-list{
        height: calc(100vh - 50px);
    }
    .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);
                    }
                } 
            }
        }
        .search-action{
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            background: #fff;
            height: 54px;
            .sort-panel{
                font-size: 16px;
                display: -webkit-box;
                -webkit-box-align: center;
                margin-right: 20px;
                img{
                    display: block;
                    width: 10px;
                    height: 10px;
                    margin-left: 7px;
                }
            }
        }
        
        // ::v-deep .van-dropdown-menu__bar{
        //     position: absolute;
        //     bottom: -10px;
        //     .van-dropdown-menu__item{
        //         display: none;
        //     }
        // }
    }
    .list{
        .item{
            border: 1px solid #e1e1e1;
            background: #fff;
            margin-top: 10px;
            // margin-bottom: 10px;
            // &:last-child{
            //     margin-bottom: 0;
            // }
        }
    }

    .bot-banner{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 5px #ccc;
    }
    ::v-deep .van-list__placeholder{
        height: 40px;
    }
    .filter-panel{
        background: #fff;
        width: 90vw;
        height: 100vh;
        .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;
            }
        }
    }
}
</style>

<style lang="scss">
.mainNobotHasTop{
    .order-list{
        .custom-list {
            height: calc(100vh - 176px);
            .search{
                top: 96px;
            }
        }
        .top-banner{
            .drop-menu{
                &.active{
                    height: calc(100vh - 95px);
                    
                }
            }
        }
    }
}
</style>