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

<template>
    <div class='order-detail' v-if="info">
        <van-tabs class="mt10" v-model="active1" >
            <van-tab title="订单状态">
                
            </van-tab>
            <van-tab title="审方状态">
                
            </van-tab>
        </van-tabs>

        <div v-show="active1===0" class="lh26 plr15 ptb10 bgc-fff fs-14">
            <div class="row">
                <div>处方号</div>
                <div>{{info.prescribeNum}}</div>
            </div>
            <div class="row">
                <div>订单类型</div>
                <div>{{info.orderSource=='厦门i健康'? '线上订单' : "线下订单"}}</div>
            </div>
            <div class="row">
                <div>开方时间</div>
                <div>{{info.orderSource=='厦门i健康'? formatDatetime(info.prescribeTime) : formatDate(info.prescribeTime)}}</div>
            </div>

            <div class="row">
                <div>患者姓名</div>
                <div>{{info.patientName || "--"}}</div>
            </div>
            <div class="row">
                <div>医保卡号</div>
                <div>{{info.socialSecurityCardNum || "--"}}</div>
            </div>
            <div class="row">
                <div>开方医生</div>
                <div>{{info.doctorName || "--"}}</div>
            </div>


            <div class="row">
                <div>订单金额</div>
                <div v-if="info.amount">￥{{info.amount}}</div>
                <div v-else>--</div>
            </div>
            <div class="row" >
                <div>社保扣款</div>
                <div v-if="info.socialinsurPayment">￥{{info.socialinsurPayment}}</div>
                <div v-else>--</div>
            </div>
            <div class="row">
                <div>订单状态</div>
                <div>{{info.sellStateName}}</div>
                <div v-if="info.sellState==-5&&$hasAuth('orderManage', 'index','updateOrderToWaitOut')"><van-button @click="updateOrderToWaitOut" class="ml10" block type="primary" size="mini" color="#17b3ec">更正订单状态</van-button></div>
            </div>
            <div class="row">
                <div>取药码</div>
                <div>{{info.pickUpNum}}</div>
            </div>
        </div>
        <div v-show="active1===1" class="lh26 plr15 ptb10 bgc-fff fs-14">
            <template v-if="info.reviewerState==1||info.reviewerState==-1"> 
            <div class="row">
                <div>审方状态</div>
                <div>{{info.reviewerState==1? "审核通过" : "审核不通过"}}</div>
            </div>
            <div class="row">
                <div>审方医生</div>
                <div>{{info.reviewerDoctorName || '--'}}</div>
            </div>
            <div class="row">
                <div>审方时间</div>
                <div>{{info.reviewerTime || '--'}}</div>
            </div>
            <div class="row" v-if="info.reviewerState==-1">
                <div>审方批注</div>
                <div>{{info.reviewerContent || "--"}}</div>
            </div>
            </template>
            <NoData v-else/>
        </div>

        <van-tabs class="mt10" v-model="active" sticky>
            <van-tab title="药品详情">
                <DrugList :list="info.drugList"/>
            </van-tab>
            <van-tab v-if="info.outList&&info.outList.length" title="出货日志">
                <LogList :list="info.outList"/>
            </van-tab>
            <van-tab title="设备信息" v-if="info.device">
                <DeviceInfo :data="info.device"/>
            </van-tab>
            <van-tab title="出货拍照" v-if="info.outList&&info.outList.length">
                <div class="pl10">
                    <div class="pic-list" >
                        <div class="pic-item" v-for="(item, i) in info.outList" :key="i">
                            <img @click="preview(i)" :src="item.pic" alt="">
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

        <div v-if="info.reviewerState==0" class="bot-button">
            <div class="bot-button-inner bot-button-inner-fixed">
                <div><van-button @click="show=true" round block type="danger">不通过</van-button></div>
                <div><van-button @click="reviewerOrder(1, '')" round block type="primary" color="#17b3ec">审方通过</van-button></div>
            </div>
        </div>

        <van-popup v-model="show" position="bottom" >
            <div class="plr20">
                <div class="ptb15 fs-14">请填写不通过原因</div>
                <div class="text-ipt">
                    <van-cell-group >
                        <van-field
                            v-model="reviewerContent"
                            rows="5"
                            label=""
                            type="textarea"
                            maxlength="500"
                            placeholder="请输入.."
                            show-word-limit
                        />
                    </van-cell-group>
                </div>
            </div>
            <div class="ptb15">
                <div class="bot-button-inner">
                    <div><van-button @click="show=false" round block type="danger">返回</van-button></div>
                    <div><van-button @click="reviewerOrder(-1, reviewerContent)" round block type="primary" color="#17b3ec">确定</van-button></div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { ImagePreview } from 'vant';
import medicineAbinetApi from '@/api/api-medicineAbinet'
import dictApi from '@/api/dictApi'
import DeviceInfo from './components/DeviceInfo'
import LogList from './components/LogList'
import DrugList from './components/DrugList'
export default{
    name: 'orderDetail',
    components:{
        DeviceInfo,
        DrugList,
        LogList
    },
    data(){
        return {
            id: this.$route.query.id,
            info: '',
            show: false,
            reviewerContent: '',
            active1: 0,
            auth: false
        }
    },
    async created() {
        this.getOrderDetailById()
        dictApi
            .findDictNew({
                name: 'updateOrderToWaitOut',
                code: 'updateOrderToWaitOut'
            })
            .then(res=>{
                if(res.status == 200){
                    this.auth = !!_.find(res.detailModelList, v=>{
                        return v.dictValue == this.user.id
                    })
                    console.log('findDictNew', res.detailModelList)
                }
            })
    },
    methods:{
        getOrderDetailById(){
            this.$loading('加载中..')
            let p = {
                orderId: this.id
            }
            medicineAbinetApi
                .getOrderDetailById(p)
                .then(res=>{
                    this.$toast.clear()
                    console.log('getOrderDetailById', res)
                    if(res.status == 200){
                        if(res.obj.outList){
                            res.obj.outList.forEach(v => {
                                v.pic = this.setImgUrl(v.pic)
                            });
                        }
                        this.info = res.obj
                    } 
                })
                .catch(err=>{
                    console.error(err)
                })
        },
        preview(startPosition){
            var images = _.map(this.info.outList, v=>{
                return v.pic
            })
            ImagePreview({
                images,
                startPosition
            });
        },
        reviewerOrder(reviewerState, reviewerContent){
            new Promise((resolve, reject)=>{
                if(reviewerState == 1){
                    this.$dialog.confirm({
                        title: '提示',
                        message: '确定审核通过？',
                    })
                    .then(() => {
                        resolve()
                    })
                    .catch(() => {
                        reject()
                    });
                } else {
                    if(this.reviewerContent === ''){
                        this.$toast("请填写原因")
                        return reject()
                    }
                    resolve()
                }
            }).then(res=>{
                this.$loading('加载中..')
                let p = {
                    orderId: this.id,
                    reviewerState,
                    reviewerContent,
                    doctor: this.user.id
                }
                medicineAbinetApi
                    .reviewerOrder(p)
                    .then(res=>{
                        console.log('reviewerOrder', res)
                        if(res.status == 200){
                            this.$toast("审方成功")
                            this.setBackRefresh(true)
                            this.info.reviewerState = reviewerState
                            this.show = false
                        } 
                    })
                    .catch(err=>{
                        console.error(err)
                    })
            }).catch(err=>{
                console.error(err)
            })
            
        },
        updateOrderToWaitOut(){
            new Promise((resolve, reject)=>{
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定执行该操作？',
                })
                .then(() => {
                    resolve()
                })
                .catch(() => {
                    reject()
                });
            }).then(res=>{
                this.$loading('加载中..')
                let p = {
                    orderId: this.id,
                }
                medicineAbinetApi
                    .updateOrderToWaitOut(p)
                    .then(res=>{
                        console.log('updateOrderToWaitOut', res)
                        if(res.status == 200){
                            this.$toast("操作成功")
                            this.setBackRefresh(true)
                            this.getOrderDetailById()
                        } 
                    })
                    .catch(err=>{
                        console.error(err)
                    })
            }).catch(err=>{
                console.error(err)
            })
            
        }

        
    },
}
</script>
<style lang='scss' scoped>
.order-detail{
    .row{
        display: -webkit-box;
        >div{
            &:first-child{
                width: 60px;
                position: relative;
                text-align: justify;
                text-align-last: justify;
                margin-right: 12px;
                &::after{
                    content: "：";
                    display: inline-block;
                    position: absolute;
                    right: -14px;
                    top: 0;
                }
            }
        }
    }
    .pic-list{
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap;
        .pic-item{
            width: calc(100% / 4 - 10px);
            margin-right: 10px;
            margin-bottom: 10px;
            img{
                width: 100%;
                display: block;
            }
        }
    }

    .bot-button{
        height: 100px;
    }
    .bot-button-inner{
        display: -webkit-box;
        padding:0 10px;
        &.bot-button-inner-fixed{
            position: fixed;
            bottom: 20px;
            width: 100%;
        }
        >div{
            width: 50%;
            padding:0 10px;
        }
    }
    .text-ipt{
        border: 1px solid #e1e1e1;
    }
}
</style>