|
|
@@ -0,0 +1,365 @@
|
|
|
+<template>
|
|
|
+ <el-drawer class="storeRecord" :size="700" append-to-body title="商品监控" :visible.sync="drawer" direction="rtl">
|
|
|
+ <div class="record-main">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="订单记录" name="first">
|
|
|
+ <by-table :propConfig="orderConfig" ref="orderTable" @pagination="paginationOrder">
|
|
|
+ <template v-slot:state='{ row }'>
|
|
|
+ <span v-if="row.status == 'WaitPay'">待付款</span>
|
|
|
+ <span v-if="row.status == 'Delivering'">发货中</span>
|
|
|
+ <span v-if="row.status == 'Merged'">被合并</span>
|
|
|
+ <span v-if="row.status == 'Question'" style="color:red">异常</span>
|
|
|
+ <span v-if="row.status == 'Split'">被拆分</span>
|
|
|
+ <span v-if="row.status == 'WaitOuterSent'">等供销商|外仓发货</span>
|
|
|
+ <span v-if="row.status == 'WaitConfirm'">已付款待审核</span>
|
|
|
+ <span v-if="row.status == 'WaitFConfirm'">已客审待财审</span>
|
|
|
+ <span v-if="row.status == 'Sent'">已发货</span>
|
|
|
+ <span v-if="row.status == 'Cancelled'">取消</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:tmsOrderStatus='{ row }'>
|
|
|
+ {{ getTMSStatus(row.tmsOrderStatus) }}
|
|
|
+ </template>
|
|
|
+ </by-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="入库记录" name="second">
|
|
|
+ <by-table :propConfig="inStoreConfig" ref="inStoreTable" @pagination="paginationInStore"></by-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="出库记录" name="third">
|
|
|
+ <by-table :propConfig="outStoreConfig" ref="outStoreTable" @pagination="paginationOutnStore"></by-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <!-- <div class="re-box">
|
|
|
+ <div class="re-list" v-for="(item,index) of data" :key="index">
|
|
|
+ <div class="record-row">
|
|
|
+ <div class="log-time"><span>时间：</span> {{item.createTime}}</div>
|
|
|
+ <div class="log-user"><span>订单号：</span> {{item.id}}</div>
|
|
|
+ <div class="state"><span>状态：</span>
|
|
|
+ <span v-if="item.status == 'WaitPay'" title="待付款">待付款</span>
|
|
|
+ <span v-if="item.status == 'Delivering'" title="发货中">发货中</span>
|
|
|
+ <span v-if="item.status == 'Merged'" title="被合并">被合并</span>
|
|
|
+ <span v-if="item.status == 'Question'" title="异常">异常</span>
|
|
|
+ <span v-if="item.status == 'Split'" title="被拆分">被拆分</span>
|
|
|
+ <span v-if="item.status == 'WaitOuterSent'" title="等供销商|外仓发货">等供销商|外仓发货</span>
|
|
|
+ <span v-if="item.status == 'WaitConfirm'" title="已付款待审核">已付款待审核</span>
|
|
|
+ <span v-if="item.status == 'WaitFConfirm'" title="已客审待财审">已客审待财审</span>
|
|
|
+ <span v-if="item.status == 'Sent'" title="已发货">已发货</span>
|
|
|
+ <span v-if="item.status == 'Cancelled'" title="取消">取消</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="record-row">
|
|
|
+ <div class="d-code">
|
|
|
+ <span>运输号：</span>
|
|
|
+ {{ item.tmsOrderNo }}
|
|
|
+ </div>
|
|
|
+ <div class="d-state">
|
|
|
+ <span>运输状态：</span>
|
|
|
+ {{ getTMSStatus(item.tmsOrderStatus) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="page.pageNo"
|
|
|
+ :page-size="page.pageSize"
|
|
|
+ :total="page.total">
|
|
|
+ </el-pagination>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
+import api from '@/api/currency'
|
|
|
+@Component({components:{}})
|
|
|
+export default class StoreRecord extends Vue {
|
|
|
+ drawer=false
|
|
|
+ data:Array<any>=[]
|
|
|
+ value:any={}
|
|
|
+ load:boolean = false;
|
|
|
+ activeName:any='first'
|
|
|
+ orderConfig:any={
|
|
|
+ attr:{
|
|
|
+ size:'mini'
|
|
|
+ },
|
|
|
+ columns:[{
|
|
|
+ title:'订单号',
|
|
|
+ field:'id',
|
|
|
+ width:70
|
|
|
+ },{
|
|
|
+ title:'状态',
|
|
|
+ field:'state',
|
|
|
+ slot:true,
|
|
|
+ // width:120
|
|
|
+ },{
|
|
|
+ title:'运输号',
|
|
|
+ field:'tmsOrderNo',
|
|
|
+ width:70
|
|
|
+ },{
|
|
|
+ title:'运输状态',
|
|
|
+ field:'tmsOrderStatus',
|
|
|
+ slot:true,
|
|
|
+ // width:120
|
|
|
+ },{
|
|
|
+ title:'创建时间',
|
|
|
+ field:'createTime',
|
|
|
+ width:140
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ inStoreConfig:any={
|
|
|
+ attr:{
|
|
|
+ size:'mini'
|
|
|
+ },
|
|
|
+ columns:[{
|
|
|
+ title:'订单号',
|
|
|
+ field:'orderNumber'
|
|
|
+ },{
|
|
|
+ title:'数量',
|
|
|
+ field:'number'
|
|
|
+ },{
|
|
|
+ title:'创建时间',
|
|
|
+ field:'createTime'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ outStoreConfig:any={
|
|
|
+ attr:{
|
|
|
+ size:'mini'
|
|
|
+ },
|
|
|
+ columns:[{
|
|
|
+ title:'订单号',
|
|
|
+ field:'orderNumber'
|
|
|
+ },{
|
|
|
+ title:'数量',
|
|
|
+ field:'number'
|
|
|
+ },{
|
|
|
+ title:'创建时间',
|
|
|
+ field:'createTime'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ pageOrder = {
|
|
|
+ pageNo: 1, //当前页
|
|
|
+ pageSize: 20, //每页条数
|
|
|
+ total: 0 //总条数
|
|
|
+ }
|
|
|
+ inStorePage={
|
|
|
+ pageNo: 1, //当前页
|
|
|
+ pageSize: 20, //每页条数
|
|
|
+ total: 0 //总条数
|
|
|
+ }
|
|
|
+ outStorePage={
|
|
|
+ pageNo: 1, //当前页
|
|
|
+ pageSize: 20, //每页条数
|
|
|
+ total: 0 //总条数
|
|
|
+ }
|
|
|
+ getTMSStatus(v:any){
|
|
|
+ let n = '';
|
|
|
+ switch(v){
|
|
|
+ case 0:
|
|
|
+ n = '创建';
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ n = '已分派';
|
|
|
+ break;
|
|
|
+ case 10:
|
|
|
+ n = '已派车';
|
|
|
+ break;
|
|
|
+ case 15:
|
|
|
+ n = '已提货';
|
|
|
+ break;
|
|
|
+ case 20:
|
|
|
+ n = '已发运';
|
|
|
+ break;
|
|
|
+ case 30:
|
|
|
+ n = '已送达';
|
|
|
+ break;
|
|
|
+ case 35:
|
|
|
+ n = '已回单';
|
|
|
+ break;
|
|
|
+ case -1:
|
|
|
+ n = '已撤回';
|
|
|
+ break;
|
|
|
+ case -2:
|
|
|
+ n = '取消';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ return n;
|
|
|
+ }
|
|
|
+ paginationOrder(p:any){
|
|
|
+ this.pageOrder.pageNo = p.pageNum
|
|
|
+ this.loadOrderList()
|
|
|
+ }
|
|
|
+ paginationInStore(p:any){
|
|
|
+ this.inStorePage.pageNo = p.pageNum
|
|
|
+ this.loadInstoreList()
|
|
|
+ }
|
|
|
+ paginationOutnStore(p:any){
|
|
|
+ this.outStorePage.pageNo = p.pageNum
|
|
|
+ this.loadOutstoreList()
|
|
|
+ }
|
|
|
+ // handleCurrentChange(v:number){
|
|
|
+ // this.page.pageNo = v
|
|
|
+ // }
|
|
|
+ setShow(v:boolean){
|
|
|
+ this.drawer = v
|
|
|
+ }
|
|
|
+ setData(data:any){
|
|
|
+ this.value = data
|
|
|
+ this.loadOrderList()
|
|
|
+ }
|
|
|
+ loadOrderList(){
|
|
|
+ if(this.value && this.value.id){
|
|
|
+ let data:any = {};
|
|
|
+ data.itemId = this.value.id
|
|
|
+ data.pageNo = this.pageOrder.pageNo
|
|
|
+ data.pageSize = this.pageOrder.pageSize
|
|
|
+ this.load = true;
|
|
|
+ api.queryByProductId(data).then(res => {
|
|
|
+ this.load = false;
|
|
|
+ this.pageOrder.total = res.data.total;
|
|
|
+ (this.$refs.orderTable as any).setValue(res.data.records);
|
|
|
+ (this.$refs.orderTable as any).setPage(this.pageOrder);
|
|
|
+ }).catch(() => {
|
|
|
+ this.load = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ loadInstoreList(){
|
|
|
+ if(this.value && this.value.id){
|
|
|
+ let data:any = {};
|
|
|
+ data.sku = this.value.id
|
|
|
+ data.pageNo = this.inStorePage.pageNo
|
|
|
+ data.pageSize = this.inStorePage.pageSize
|
|
|
+ this.load = true;
|
|
|
+ api.inQueryBySku(data).then(res => {
|
|
|
+ this.load = false;
|
|
|
+ this.inStorePage.total = res.data.total;
|
|
|
+ this.$nextTick(()=> {
|
|
|
+ (this.$refs.inStoreTable as any).setValue(res.data.records);
|
|
|
+ (this.$refs.inStoreTable as any).setPage(this.inStorePage);
|
|
|
+ })
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.load = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ loadOutstoreList(){
|
|
|
+ if(this.value && this.value.id){
|
|
|
+ let data:any = {};
|
|
|
+ data.sku = this.value.id
|
|
|
+ data.pageNo = this.outStorePage.pageNo
|
|
|
+ data.pageSize = this.outStorePage.pageSize
|
|
|
+ this.load = true;
|
|
|
+ api.inQueryBySku(data).then(res => {
|
|
|
+ this.load = false;
|
|
|
+ this.outStorePage.total = res.data.total
|
|
|
+ this.$nextTick(()=> {
|
|
|
+ (this.$refs.outStoreTable as any).setValue(res.data.records);
|
|
|
+ (this.$refs.outStoreTable as any).setPage(this.outStorePage);
|
|
|
+ })
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.load = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ handleClick() {
|
|
|
+ if(this.activeName == 'first') {
|
|
|
+ this.pageOrder.pageNo = 1
|
|
|
+ this.pageOrder.total = 0
|
|
|
+ this.loadOrderList()
|
|
|
+ }else if(this.activeName == 'second') {
|
|
|
+ this.inStorePage.pageNo = 1
|
|
|
+ this.inStorePage.total = 0
|
|
|
+ this.loadInstoreList()
|
|
|
+ }else if(this.activeName == 'third') {
|
|
|
+ this.outStorePage.pageNo = 1
|
|
|
+ this.outStorePage.total = 0
|
|
|
+ this.loadOutstoreList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .record-main{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 16px;
|
|
|
+ .re-box{
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .re-list{
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: dotted 1px #CCC;
|
|
|
+ padding: 16px 0;
|
|
|
+ }
|
|
|
+ .record-row{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ // flex-flow: wrap;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ .log-time{
|
|
|
+ width: 220px;
|
|
|
+ color: #666;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .log-user{
|
|
|
+ width: 120px;
|
|
|
+ padding-right: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #666;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .state{
|
|
|
+ // width: 130px;
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #666;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .d-code{
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ .d-state{
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page{
|
|
|
+ height:50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.storeRecord {
|
|
|
+ .el-drawer__body {
|
|
|
+ height: calc(100% - 63px);
|
|
|
+ }
|
|
|
+}
|
|
|
+.record-main{
|
|
|
+ .el-tabs__header{
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+ .el-tabs__content{
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ padding-top: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
ymy