ylrz_his_scrm_adminUI/src/views/components/his/packageOrderDetails.vue

<template>

  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      套餐订单详情
    </div>
<div class="content" v-if="item!=null">
   <div class="desct"></div>
   <div class="order-status" v-if="item!=null" >
             <el-steps  :active="item.status==3?item.status:item.status-1" align-center finish-status="success">
               <el-step title="待支付"></el-step>
               <el-step title="服务中"></el-step>
               <el-step title="已完成"></el-step>
             </el-steps>
   </div>
              <el-card shadow="never" style="margin-top: 15px">
                <div class="operate-container"  v-if="item!=null">
                  <span style="margin-left: 20px" class="color-danger">订单状态：
                     <el-tag prop="status" v-for="(ite, index) in statusOptions"    v-if="item.status==ite.dictValue">{{ite.dictLabel}}</el-tag>
                  </span>
             <!--     <div class="operate-button-container" v-if="item.status==2">
                     <el-button size="mini" @click="orderRefund()" v-hasPermi="['his:packageOrder:refund']">全部退款 </el-button>
                  </div> -->

                  <div class="operate-button-container" v-if="item.status==2 &&item.packageSubType==1 && (item.inquiryRefundStatus==0 || item.inquiryRefundStatus == null)" >
                     <el-button size="mini" @click="inquiryOrderRefund()" v-hasPermi="['his:packageOrder:inquiryRefund']">问诊退款</el-button>
                  </div>

                  <div class="operate-button-container" v-if="item.status==2 &&item.packageSubType!=1 && item.storeRefundStatus==0" >
                     <el-button size="mini" @click="storeOrderRefund()" v-hasPermi="['his:packageOrder:productRefund']">商品退款</el-button>
                  </div>


                  <div class="operate-button-container"  v-if="item.storeOrderId!=null&&item.storeOrderId!=''">
                    <el-button size="mini"  @click="showStoreOrder">商品订单</el-button>
                  </div>
                  <div class="operate-button-container"  v-if="item.inquiryOrderId!=null&&item.inquiryOrderId!=''">
                    <el-button size="mini"  @click="showInquiryOrder">问诊订单</el-button>
                  </div>
         <!--         <div class="operate-button-container" v-if="item.refundStatus==1">
                     <el-button size="mini" @click="orderRefundAudit()" v-hasPermi="['his:packageOrder:refund']">退款审核</el-button>
                  </div> -->
                </div>
        <div class="desct">
         基本信息
        </div>
         <el-descriptions :column="3" border  >
               <el-descriptions-item label="订单号"><span v-if="item!=null">{{item.orderSn}}</span></el-descriptions-item>
               <el-descriptions-item label="套餐名称"><span v-if="item!=null">{{item.packageName}}</span></el-descriptions-item>
               <el-descriptions-item label="套餐别名"><span v-if="item!=null">{{item.secondName}}</span></el-descriptions-item>
               <el-descriptions-item label="套餐价格"><span v-if="item!=null">{{item.totalPrice}}</span></el-descriptions-item>
			   <el-descriptions-item label="订单来源"  ><dict-tag :options="sourceOptions" :value="item.source"/></el-descriptions-item>
               <el-descriptions-item label="医生名称"><span v-if="item!=null">{{item.doctorName}}</span></el-descriptions-item>
               <el-descriptions-item label="用户昵称"><span v-if="item!=null">{{item.nickName}}</span></el-descriptions-item>
               <el-descriptions-item label="用户电话"><span v-if="item!=null">{{item.phone}}</span>
                <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['his:packageOrder:queryPhone']"></el-button>
               </el-descriptions-item>
			   
               <el-descriptions-item label="是否支付"> <dict-tag :options="isPayOptions" :value="item.isPay"/></el-descriptions-item>
               <el-descriptions-item label="付款类别"> <dict-tag :options="payTypeOptions" :value="item.payType"/></el-descriptions-item>
               <el-descriptions-item label="套餐包类别"> <dict-tag :options="packageSubTypeOptions" :value="item.packageSubType"/></el-descriptions-item>
               <el-descriptions-item label="天数"><span v-if="item!=null">{{item.days}}</span></el-descriptions-item>
               <el-descriptions-item label="状态"> <dict-tag :options="statusOptions" :value="item.status"/></el-descriptions-item>
               <el-descriptions-item label="所属公司"><span v-if="item!=null">{{item.companyName}}</span></el-descriptions-item>
               <el-descriptions-item label="公司员工"><span v-if="item!=null">{{item.companyUserName}}</span></el-descriptions-item>
               <el-descriptions-item label="退款状态"> <dict-tag :options="refundStatusOptions" :value="item.refundStatus"/></el-descriptions-item>
               <el-descriptions-item label="退款用户说明"><span v-if="item!=null">{{item.refundExplain}}</span></el-descriptions-item>
               <el-descriptions-item label="不退款的理由"><span v-if="item!=null">{{item.refundReason}}</span></el-descriptions-item>
               <el-descriptions-item label="退款时间"><span v-if="item!=null">{{item.refundTime}}</span></el-descriptions-item>
               <el-descriptions-item label="退款金额"><span v-if="item!=null">{{item.refundMoney}}</span></el-descriptions-item>
               <el-descriptions-item label="备注"><span v-if="item!=null">{{item.remark}}</span></el-descriptions-item>
               <el-descriptions-item label="支付时间"><span v-if="item!=null">{{item.startTime}}</span></el-descriptions-item>
               <el-descriptions-item label="开始时间"><span v-if="item!=null">{{item.payTime}}</span></el-descriptions-item>
               <el-descriptions-item label="结束时间"><span v-if="item!=null">{{item.finishTime}}</span></el-descriptions-item>
               <el-descriptions-item label="创建时间"><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
         </el-descriptions>
       </el-card>
     </div>



   <div class="contentx" v-if="item!=null">
     <div class="desct">
       支付信息
     </div>
   <el-table
     border
     :data="pay"
     size="small"
     style="width: 100%;margin-top: 20px" >
       <el-table-column label="支付单号" align="center" prop="payCode" width="120px" />
       <el-table-column label="支付金额" align="center" prop="payMoney" />
       <el-table-column label="类型" align="center" prop="payTypeCode" />
       <el-table-column label="交易单号" align="center" prop="bankTransactionId" />
       <el-table-column label="银行流水号" align="center" prop="bankSerialNo" />
       <el-table-column label="创建时间" align="center" prop="createTime" />
       <el-table-column label="支付时间" align="center" prop="payTime" />
   </el-table>
          </div>

  <div class="contentx" v-if="item!=null " style="padding-bottom: 70px;">
   <div class="desct">
       商品信息
      </div>
      <el-tooltip class="item" effect="dark" :content="showList ? '显示全部' : '隐藏'" placement="top" style="float: right;">
        <el-button size="mini" circle icon="el-icon-search" @click="showListD()" />
      </el-tooltip>
   <el-table border v-if="showProd!=null" :data="showProd" size="small" style="width: 100%;margin-top: 20px" >
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
            </template>
          </el-table-column>
          <el-table-column label="商品编码" width="300" align="center">
            <template slot-scope="scope">
              <p>{{JSON.parse(scope.row.jsonInfo).barCode}}</p>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="300" align="center">
            <template slot-scope="scope">
              <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="240" align="center">
            <template slot-scope="scope">
              <p>￥{{JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}</p>
            </template>
          </el-table-column>
          <el-table-column label="规格" width="240" align="center">
            <template slot-scope="scope">
              {{JSON.parse(scope.row.jsonInfo).sku}}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template slot-scope="scope">
              {{scope.row.num}}
            </template>
          </el-table-column>
          <el-table-column label="处方药" width="240" align="center">
            <template slot-scope="scope">
              {{scope.row.isPrescribe!=null&&scope.row.isPrescribe==1?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column label="小计"  align="center">
            <template slot-scope="scope" >
              ￥{{(scope.row.num*JSON.parse(scope.row.jsonInfo).price).toFixed(2)}}
            </template>
          </el-table-column>
        </el-table>
   </div>
        <div class="contentx" v-if="item!=null">
          <div class="desct">
            费用信息
          </div>
         <el-descriptions   :column="3" border  >
                   <el-descriptions-item label="商品合计"  ><span v-if="item.totalPrice!=null">￥{{item.totalPrice.toFixed(2)}} </span></el-descriptions-item>
                  <el-descriptions-item label="处方定价"  ><span v-if="item.prescribePrice!=null"> ￥{{item.prescribePrice.toFixed(2)}}</span></el-descriptions-item>
                   <el-descriptions-item label="处方应付金额"  ><span v-if="item.payPrice!=null"> ￥{{item.payPrice.toFixed(2)}}</span></el-descriptions-item>
                  <el-descriptions-item label="运费" ><span v-if="item.payDelivery!=null">￥{{item.payDelivery.toFixed(2)}}</span></el-descriptions-item>
                  <el-descriptions-item label="优惠劵" ><span v-if="item.discountMoney!=null">￥{{item.discountMoney.toFixed(2)}}</span></el-descriptions-item>
                   <el-descriptions-item label="实付金额"  ><span v-if="item.payMoney!=null">￥{{item.payMoney.toFixed(2)}}</span></el-descriptions-item>
                   <el-descriptions-item label="代收金额" ><span v-if="item.payRemain!=null">￥{{item.payRemain.toFixed(2)}}</span></el-descriptions-item>
        </el-descriptions>
           </div>
       <el-drawer
           :with-header="false"
           :append-to-body="true"
            size="75%"
             :title="show.title" :visible.sync="show.open"
             >
             <storeOrderDetails  ref="Details" />
        </el-drawer>

       <el-drawer
            :with-header="false"
            :append-to-body="true"
            size="75%"
             :title="inquiryOrderShow.title" :visible.sync="inquiryOrderShow.open">
         <inquiryOrderDetails  ref="inquiryOrderDetails" />
       </el-drawer>
      <el-dialog
           width="50%"
           title="退款审核"
           :visible.sync="auditVisible"
           append-to-body @close="auditCancel">
      <el-form ref="form" :model="refundForm" :rules="rules" label-width="120px">
                  <el-form-item label="审核" prop="deliveryCode">
                     <el-radio v-model="refundForm.refundStatus" label="2">同意</el-radio>
                      <el-radio v-model="refundForm.refundStatus" label="3">拒绝</el-radio>
                  </el-form-item>
                  <el-form-item label="拒绝理由" prop="deliveryName">
                    <el-input v-model="refundForm.refundReason" placeholder="请输入快递名称"  type="textarea"/>
                  </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="auditOk">确 定</el-button>
                          <el-button @click="auditCancel">取 消</el-button>
        </div>
          </el-dialog>
      </div>
</template>

<script>

import { listPackageOrder,storeRefund,inquiryRefund, payment,getPackageOrder, delPackageOrder,refundAudit, addPackageOrder,refund, updatePackageOrder, exportPackageOrder,getPhone } from "@/api/his/packageOrder";
import { listOrderitem} from "@/api/his/storeOrder";
import storeOrderDetails from '../his/storeOrderDetails2.vue';
import inquiryOrderDetails from '../his/inquiryOrderDetails.vue';
  export default {
    name: "patientdetails",
    components: { storeOrderDetails,inquiryOrderDetails },
    props:["data"],
    data() {

      return {
        show:{
          open:false,
          title:"订单详情"
        },
        auditVisible:false,
        rules:{},
        inquiryOrderShow:{
          open:false,
          title:"订单详情"
        },
		sourceOptions:[],
        showList:true,
        prod:null,
        showProd:null,
       // 状态字典
      isPayOptions: [],
      packageSubTypeOptions: [],
      productJson:[],
      refundForm:{
        orderId:null,
        refundReason:null,
        refundStatus:null,
      },
      // 状态字典
      statusOptions: [],
      refundStatusOptions: [],
        item:null,
      pay:[],
      }
    },
    created() {
    this.getDicts("sys_company_or").then(response => {
      this.isPayOptions = response.data;
    });
    this.getDicts("sys_package_order_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_refund_status").then(response => {
      this.refundStatusOptions = response.data;
    });
    this.getDicts("sys_package_pay_type").then(response => {
      this.payTypeOptions = response.data;
    });
	this.getDicts("sys_order_source").then(response => {
		  this.sourceOptions = response.data;
		});

    this.getDicts("sys_package_sub_type").then(response => {
      this.packageSubTypeOptions = response.data;
    });
    },
    methods: {
      handlePhone(){
        const orderId = this.item.orderId;
          getPhone(orderId).then(response =>{
            this.item.phone = response.data;
        })
      },
      getDetails(orderId) {

          this.item=null;
          getPackageOrder(orderId).then(response => {
              this.item = response.data;
              payment(orderId).then(response => {
                  this.pay = response.data;
              });
              if(this.item.storeOrderId!=null){
              this.getlistOrderitem(this.item.storeOrderId)

              }



          });
      },
      showStoreOrder(){
            this.show.open=true;
              setTimeout(() => {
                   this.$refs.Details.getDetails(this.item.storeOrderId,this.item.nickName,null);
              }, 1);
      },
      showListD(){
        if(this.showList){
          this.showProd=this.prod
        }else{
          this.showProd=[this.prod[0]]
        }
        this.showList=this.showList?false:true;
      },
      orderRefundAudit(){
        this.refundForm.orderId=this.item.orderId;
        this.refundForm.refundReason=null;
        this.refundForm.refundStatus="2";
        this.auditVisible=true;
      },
      showInquiryOrder(){
            this.inquiryOrderShow.open=true;
            setTimeout(() => {
                 this.$refs.inquiryOrderDetails.getDetails(this.item.inquiryOrderId);
            }, 1);
      },
      auditCancel(){
        this.auditVisible=false;
      },
      auditOk(){
        refundAudit(this.refundForm).then(response => {
              this.msgSuccess("操作成功");
              getPackageOrder(this.item.orderId).then(response => {
                  this.item = response.data;
                  payment(orderId).then(response => {
                      this.pay = response.data;
                  });
              });
            });
            this.auditVisible=false;
      },
      getlistOrderitem(orderId){
        listOrderitem(orderId).then(response => {
            this.prod = response.rows;
            this.showProd=[this.prod[0]]
        });
      },
      orderRefund(){
          var that=this;
          this.$confirm('是否确认退款?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return refund(that.item.orderId);
          }).then(() => {
            this.msgSuccess("操作成功");
            getPackageOrder(that.item.orderId).then(response => {
                this.item = response.data;
                payment(orderId).then(response => {
                    this.pay = response.data;
                });
            });
          }).catch(function() {});
      },
      inquiryOrderRefund(){
          var that=this;
          this.$confirm('是否确认问诊退款?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return inquiryRefund(that.item.orderId);
          }).then(() => {
            this.msgSuccess("操作成功");
            getPackageOrder(that.item.orderId).then(response => {
                this.item = response.data;
                payment(orderId).then(response => {
                    this.pay = response.data;
                });
            });
          }).catch(function() {});
      },
      storeOrderRefund(){
          var that=this;
          this.$confirm('是否确认退款?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return storeRefund(that.item.orderId);
          }).then(() => {
            this.msgSuccess("操作成功");
            getPackageOrder(that.item.orderId).then(response => {
                this.item = response.data;
                payment(orderId).then(response => {
                    this.pay = response.data;
                });
            });
          }).catch(function() {});
      },
    }
  }
</script>
<style>
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .content{
      height: 100%;
      background-color: #fff;
     padding: 0px 20px 20px;

      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>
<style scoped>
.order-content{
  margin: 10px;

}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}
</style>