|
|
@@ -0,0 +1,413 @@
|
|
|
+<template>
|
|
|
+ <div class="app-list-content">
|
|
|
+ <x-crud class="liu-crud-wrap order-list-wrap" @load="onLoad">
|
|
|
+ <!-- tabs -->
|
|
|
+ <template #slot-tabs>
|
|
|
+ <el-tabs class="liu-tabs" type="border-card" v-model="tabIndex" @tab-click="handleClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(item, index) in tabsData"
|
|
|
+ :key="index"
|
|
|
+ :label="`${item.text}(${item.val})`"
|
|
|
+ :name="item.key"
|
|
|
+ ></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 单号 -->
|
|
|
+ <template #table-column-orderSn="{scope}">
|
|
|
+ <el-link
|
|
|
+ :underline="true"
|
|
|
+ style="font-size:12px;display:inline-block;"
|
|
|
+ >{{ scope.row.orderSn }}</el-link>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-customName="{scope}">
|
|
|
+ <div>
|
|
|
+ {{ scope.row.customName }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-customMobile="{scope}">
|
|
|
+ <div v-if="scope.row.customMobile == ''">-</div>
|
|
|
+ <div v-else>{{ scope.row.customMobile }}</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 状态 -->
|
|
|
+ <template #table-column-status="{scope}">
|
|
|
+ <span v-if="scope.row.status == 2">待配送</span>
|
|
|
+ <span v-else-if="scope.row.status == 3">配送中</span>
|
|
|
+ <span v-else-if="scope.row.status == 4">已完成</span>
|
|
|
+ <span v-else-if="scope.row.status == 5">已取消</span>
|
|
|
+ <span v-else>待付款</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 送达时间 -->
|
|
|
+ <template #table-column-reachTime="{scope}">
|
|
|
+ <span>
|
|
|
+ {{scope.row.requireReachTime}}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template #slot-column-option="{scope}">
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #slot-search-date="{scope}">
|
|
|
+ <el-date-picker type="date" placeholder="开始日期" v-model="adForm.startTime" value-format="yyyy-MM-dd" style="margin-right: 10px;" @change="changeStartDate()"></el-date-picker>
|
|
|
+ <el-date-picker type="date" placeholder="结束日期" v-model="adForm.endTime" value-format="yyyy-MM-dd" style="margin-right: 10px;" @change="changeEndDate()"></el-date-picker>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </x-crud>
|
|
|
+ <!-- 用户详情 -->
|
|
|
+ <order-detail ref="orderDetail" :orderOperate="optionData" />
|
|
|
+ <!-- 发货状态 -->
|
|
|
+ <sel-order ref="selOrder" :id="optionData.id" @song-success="onSongSuccess" />
|
|
|
+ <!-- 配送单 -->
|
|
|
+ <div class="print-html-box">
|
|
|
+ <table border="0" width="730" style="border:solid 1px #fff;border-collapse:collapse">
|
|
|
+ <tr>
|
|
|
+ <td style="width: 340px;">客户：{{orderData.customName}} {{orderData.customMobile}}</td>
|
|
|
+ <td style="width: 200px;">单号：{{orderData.orderSn}}</td>
|
|
|
+ <td style="width: 220px;">日期：{{orderData.deadline}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="3">地址：{{orderData.fullAddress}}<span v-if="orderData.showAddress!=''">（{{orderData.showAddress}}）</span></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table border="1" width="730" style="border:solid 1px black;border-collapse:collapse">
|
|
|
+ <tr>
|
|
|
+ <td style="width: 50px;text-align: center;">序号</td>
|
|
|
+ <td style="width: 250px;text-align: center;">名称</td>
|
|
|
+ <td style="width: 80px;text-align: center;">单位</td>
|
|
|
+ <td style="width: 80px;text-align: center;">数量</td>
|
|
|
+ <td style="width: 80px;text-align: center;">单价</td>
|
|
|
+ <td style="width: 60px;text-align: center;">金额</td>
|
|
|
+ <td style="width: 100px;text-align: center;">备注</td>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(res,i) in orderData.product">
|
|
|
+ <td style="width: 50px;text-align: center;">{{ i+1 }}</td>
|
|
|
+ <td style="width: 250px;text-align: center;">{{ res.name }}</td>
|
|
|
+ <td style="width: 80px;text-align: center;">扎/支</td>
|
|
|
+ <td style="width: 80px;text-align: center;">{{ `${res.bigNum}/${res.smallNum}` }}</td>
|
|
|
+ <td style="width: 80px;text-align: center;">{{ res.price }}</td>
|
|
|
+ <td style="width: 80px;text-align: center;" v-if="res.ratio==0">{{ Number(res.price) * (Number(res.bigNum) + 0) }}</td>
|
|
|
+ <td style="width: 80px;text-align: center;" v-else>{{ Number(res.price) * (Number(res.bigNum) + Number(res.smallNum) / Number(res.ratio)) }}</td>
|
|
|
+ <td style="width: 100px;text-align: center;"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td style="width: 100px;"></td>
|
|
|
+ <td style="width: 100px;font-weight:bold;" colspan="6">
|
|
|
+ <span>合计：{{orderData.actPrice}}<span v-if="orderData.sendCost > 0">(运费：{{orderData.sendCost}} )</span></span>
|
|
|
+ <span style="margin-left:30px;">应收：{{orderData.realPrice}}</span>
|
|
|
+ <span style="margin-left:30px;">实收：{{orderData.debt==0?orderData.realPrice:'0.00'}}</span>
|
|
|
+ <span v-if="orderData.debtAmount > 0" style="margin-left:30px;">累计欠款：{{orderData.debtAmount}}</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td style="width: 100px;">其他说明：</td>
|
|
|
+ <td style="width: 100px;" colspan="6">{{orderData.remark}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table border="0" width="730" style="border:solid 1px #fff;border-collapse:collapse">
|
|
|
+ <tr >
|
|
|
+ <td style="width: 260px;" colspan="2">开单：{{orderData.shopAdminName}}</td>
|
|
|
+ <td style="width: 260px;">打印时间：{{todays(1)}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SelOrder from './components/sel-order';
|
|
|
+import OrderDetail from './components/order-detail';
|
|
|
+import { getLodop } from '@/utils/lodop';
|
|
|
+import {hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ SelOrder,
|
|
|
+ OrderDetail
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ app: null,
|
|
|
+ tabIndex: '0',
|
|
|
+ tabsData: [
|
|
|
+ {
|
|
|
+ text: '全部',
|
|
|
+ key: '0',
|
|
|
+ val: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ optionData: {},
|
|
|
+ orderData:'',
|
|
|
+ adForm: {
|
|
|
+ startTime: '',
|
|
|
+ endTime: ''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeStartDate(){
|
|
|
+ console.log(this.adForm)
|
|
|
+ },
|
|
|
+ changeEndDate(){
|
|
|
+ console.log(this.adForm)
|
|
|
+ },
|
|
|
+ todays(type) {
|
|
|
+ var myDate = new Date();
|
|
|
+ let todaty = '';
|
|
|
+ if(type==1){
|
|
|
+ todaty = myDate.getFullYear()+'-'+parseInt(myDate.getMonth()+1)+'-'+myDate.getDate()+' '+myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds()
|
|
|
+ }else if(type=='time'){
|
|
|
+ todaty = myDate.getHours()+':'+myDate.getMinutes();
|
|
|
+ }else{
|
|
|
+ let getDate = myDate.getDate()>9?myDate.getDate():'0'+myDate.getDate()
|
|
|
+ let getDateMonth = parseInt(myDate.getMonth()+1)>9?parseInt(myDate.getMonth()+1):'0'+parseInt(myDate.getMonth()+1)
|
|
|
+ todaty = myDate.getFullYear()+'-'+getDateMonth+'-'+getDate
|
|
|
+ }
|
|
|
+ return todaty
|
|
|
+ },
|
|
|
+ formatProgress(){
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.$store.dispatch('getUsage');
|
|
|
+ },
|
|
|
+ selfGetCancel(id) {
|
|
|
+ this.$refs[`popover-` + id][1].doClose();
|
|
|
+ },
|
|
|
+ noSendShipFn(item) {
|
|
|
+ this.$refs[`popover-` + item.id][1].doClose();
|
|
|
+ this.$service.order.freeShipping({ id: item.id }).then(res => {
|
|
|
+ this.$message.success('操作成功！');
|
|
|
+ item.buttonList.forEach((ele)=>{
|
|
|
+ if(ele.type=='selfGet'){
|
|
|
+ console.log(ele)
|
|
|
+ ele.disable = 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //发货详情
|
|
|
+ shipDrawFn(item) {
|
|
|
+ this.optionData = item;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.selOrder.init();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取订单详情
|
|
|
+ detailShowFn(item) {
|
|
|
+ this.optionData = item;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.orderDetail.init();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClick(tab, e) {
|
|
|
+ this.app.refresh({ status: this.tabIndex });
|
|
|
+ },
|
|
|
+ onLoad({ ctx, app }) {
|
|
|
+ this.app = app;
|
|
|
+
|
|
|
+ //传入参数 shish 2020.5.9
|
|
|
+ if(this.$route.query.status){
|
|
|
+ this.tabIndex = this.$route.query.status
|
|
|
+ }
|
|
|
+
|
|
|
+ ctx.service(this.$service.order)
|
|
|
+ .set('table', {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ prop: 'orderSn',
|
|
|
+ label: '单号',
|
|
|
+ align: 'center',
|
|
|
+ width: '160'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'prePrice',
|
|
|
+ label: '总价',
|
|
|
+ align: 'center',
|
|
|
+ width: '110'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'actPrice',
|
|
|
+ label: '实付款',
|
|
|
+ align: 'center',
|
|
|
+ emptyText: '无',
|
|
|
+ width: '110'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'customName',
|
|
|
+ label: '客户',
|
|
|
+ align: 'center',
|
|
|
+ width: '150'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'customMobile',
|
|
|
+ label: '手机号',
|
|
|
+ align: 'center',
|
|
|
+ width: '120'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'bigNum',
|
|
|
+ label: '数量',
|
|
|
+ align: 'center',
|
|
|
+ width: '150'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sendTypeName',
|
|
|
+ label: '配送方式',
|
|
|
+ align: 'center',
|
|
|
+ width: '150'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'reachTime',
|
|
|
+ label: '送达时间',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sendNum',
|
|
|
+ label: '编号',
|
|
|
+ align: 'center',
|
|
|
+ width: 110
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'status',
|
|
|
+ label: '状态',
|
|
|
+ align: 'center',
|
|
|
+ width: 110
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'shopAdminName',
|
|
|
+ label: '开单人',
|
|
|
+ align: 'center',
|
|
|
+ width: 110
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ on: {
|
|
|
+ 'row-click': (row, column) => {
|
|
|
+ this.detailShowFn(row)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ props: {
|
|
|
+ 'default-sort': {
|
|
|
+ prop: 'createTime',
|
|
|
+ order: 'descending'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ op: {
|
|
|
+ visible: true,
|
|
|
+ props: {
|
|
|
+ width: 220,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ layout: ['slot-column-option']
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('dict', {
|
|
|
+ search: {
|
|
|
+ keyWord: 'name'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('search', {
|
|
|
+ key: { placeholder: '订单号 / 姓名，支持拼音首字母搜索' }
|
|
|
+ })
|
|
|
+ .set('layout', [
|
|
|
+ ['slot-tabs'],
|
|
|
+ ['slot-search-date'],
|
|
|
+ ['data-table'],
|
|
|
+ ['flex1', 'pagination']
|
|
|
+ ])
|
|
|
+ .on('refresh', async (params, { next }) => {
|
|
|
+ let asset = await next(params);
|
|
|
+ this.tabsData[0].val = asset.shop.totalOrder||0;
|
|
|
+ this.tabsData[1].val = asset.shop.unPayOrder||0;
|
|
|
+ this.tabsData[2].val = asset.shop.unSendOrder||0;
|
|
|
+ this.tabsData[3].val = asset.shop.sendingOrder||0;
|
|
|
+ this.tabsData[4].val = asset.shop.finishOrder||0;
|
|
|
+ })
|
|
|
+ .done();
|
|
|
+ app.refresh({ status: this.tabIndex });
|
|
|
+ },
|
|
|
+ onSongSuccess() {
|
|
|
+ this.app.refresh();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.book-wrap {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ & > div {
|
|
|
+ margin-left: 6px;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.print-html-box {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 9990px;
|
|
|
+}
|
|
|
+.steps-wrap {
|
|
|
+ width: 150px;
|
|
|
+ //height: 26px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.order-list-wrap {
|
|
|
+ .el-step__head.is-process {
|
|
|
+ color: #c0c4cc;
|
|
|
+ border-color: #c0c4cc;
|
|
|
+ .el-step__icon.is-text {
|
|
|
+ background-color: #c0c4cc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-step__head.is-success {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+ .el-step__icon.is-text {
|
|
|
+ background-color: #409eff;
|
|
|
+ font-size: 1px;
|
|
|
+ }
|
|
|
+ .el-step__line {
|
|
|
+ background-color: #409eff;
|
|
|
+ .el-step__line-inner {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-step__head.is-wait {
|
|
|
+ .el-step__icon.is-text {
|
|
|
+ background-color: #c0c4cc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-step__icon-inner {
|
|
|
+ font-size: 1px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-step__icon {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
+ .el-step.is-horizontal .el-step__line {
|
|
|
+ height: 1px;
|
|
|
+ left: 16px;
|
|
|
+ right: -16px;
|
|
|
+ top: 9px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
