代码优化

src/assets/icons/svg/material.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688374228452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" id="mx_n_1688374228453" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M85.25 361.59l400.56 206.9a44.1 44.1 0 0 0 52.53-0.09l401.7-211a32 32 0 0 0 7.75-5.7 44.05 44.05 0 0 0 0-62.22 32 32 0 0 0-7.78-5.72L539.39 73.86a44.1 44.1 0 0 0-52.73 0.09l-401.77 214a32 32 0 0 0-7.58 5.62 44 44 0 0 0 0 62.23 32 32 0 0 0 7.94 5.79z m427.89-229.23l359.32 188.27L512 510 152.65 324.37zM946.73 668.33L512.62 896.76l-437.43-226c-10.31 12.45-18.76 55.47 3.76 71.11l416.76 215.58c6.83 4.47 25.52 4.46 32.47 0.33l418.16-219.33c25.66-13.35 13.99-60.77 0.39-70.12z" fill="#ffffff" p-id="2408"></path><path d="M946.73 476L512.62 704.41l-437.43-226c-10.31 12.45-18.76 55.47 3.76 71.11L495.71 765.1c6.83 4.47 25.52 4.46 32.47 0.33L946.34 546.1c25.66-13.35 13.99-60.77 0.39-70.1z" fill="#ffffff" p-id="2409"></path></svg>

src/benyun/components/moduleView/moduleView.vue

@@ -7,13 +7,15 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.5)"
   >
-    <div class="search" v-if="searchConfig" v-show="!hideSearch">
-      <by-form :propConfig="searchConfig" :ref="searchID"></by-form>
-      <div class="search-btn">
-        <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
-        <el-button size="small" icon="el-icon-refresh" @click="resert">重置</el-button>
+    <transition name="el-zoom-in-top">
+      <div class="search" v-if="searchConfig" v-show="!hideSearch">
+        <by-form :propConfig="searchConfig" :ref="searchID"></by-form>
+        <div class="search-btn">
+          <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
+          <el-button size="small" icon="el-icon-refresh" @click="resert">重置</el-button>
+        </div>
       </div>
-    </div>
+    </transition>
     <div class="tool-box" v-if="toolConfig">
       <by-tool :propConfig="toolConfig" :ref="toolID" @clickHandle="clickHandle" />
     </div>

src/benyun/components/textChange/textChange.vue

@@ -0,0 +1,57 @@
+<template>
+  <span :style="{color:color,backgroundColor:backgroundColor}">{{value}}</span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch,Mixins } from "vue-property-decorator";
+import VueViews from '@/benyun/compVue/VueViews'
+
+@Component
+export default class TextChange extends VueViews {
+  color = '';
+  backgroundColor = '';
+  value = '';
+  data:Array<any>=[];
+
+  @Watch('propValue')
+  propDataChange(v:any){
+    this.setValue(v)
+  }
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+  }
+  mounted(){
+    this.setValue(this.propValue)
+  }
+  setConfigAfter(){
+    if(this.attrs.data){
+      this.data = this.attrs.data
+    }
+  }
+  setValue(v:any){
+    this.color = '';
+    this.backgroundColor = '';
+    this.value = '';
+    if(this.data){
+      for(const item of this.data){
+        if(item.value == v){
+          this.value = item.label;
+          if(item.backgroundColor){
+            this.backgroundColor = item.backgroundColor;
+          }
+          if(item.color){
+            this.color = item.color;
+          }
+          break;
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/benyun/plugins/componentRegister.ts

@@ -51,18 +51,10 @@ const comps: Array<ComBase> = [
     name: "bySwitch",
     component: () => import("@/benyun/components/bySwitch/bySwitch.vue"),
   },
-  // {
-  //   name: "columnarChart",
-  //   component: () => import("@/benyun/components/chart/columnarChart.vue"),
-  // },
-  // {
-  //   name: "lineChart",
-  //   component: () => import("@/benyun/components/chart/lineChart.vue"),
-  // },
-  // {
-  //   name: "pieChart",
-  //   component: () => import("@/benyun/components/chart/pieChart.vue"),
-  // },
+  {
+    name: "textChange",
+    component: () => import("@/benyun/components/textChange/textChange.vue"),
+  },
 ];
 
 const install = function (Vue: any) {

src/views/oms/orderPay/components/orderFrom.vue

@@ -0,0 +1,48 @@
+<template>
+  <span>{{ getFromText }}</span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class OrderFrom extends Vue {
+  txt:string='';
+  sourceFrom:any={
+    'ERP':'手工下单',
+    'COPY':'复制',
+    'MERGE':'合并',
+    'SPLIT':'拆分；拆分还原',
+    'MOBILE':'导入',
+    'drp-s':'供销推送',
+    'drp-d':'分销推送',
+    'KWAISHOP':'快手；微商城',
+    'PINDUODUO':'拼多多',
+    'TOUTIAOFXG':'头条放心购',
+    'JUSHUITAN':'聚水潭'
+  }
+
+  @Prop()
+  propValue?:any
+
+  get getFromText(){
+    let t='';
+    if(this.propValue){
+      let arr:Array<any>=this.propValue.split(',');
+      for(const item of arr){
+        if(this.sourceFrom[item]){
+          if(t){
+            t = t + ' , ' + this.sourceFrom[item]
+          }else{
+            t = this.sourceFrom[item]
+          }
+        }
+      }
+    }
+    return t;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/oms/orderPay/components/tag.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-tag type="success" v-if="value == 'Confirmed'" size="mini">审核通过</el-tag>
+  <el-tag type="info" v-else-if="value == 'Invalid'" size="mini">已作废</el-tag>
+  <el-tag v-else-if="value == 'WaitConfirm'" size="mini">待审核</el-tag>
+  <span v-else></span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class ShopTag extends Vue {
+  value:any=null;
+
+  @Prop()
+  propConfig: any
+
+  @Prop()
+  propValue?:any
+
+  @Prop()
+  parentValue:any
+
+  @Watch('propValue')
+  propValueChange(v:any){
+    this.setValue(v);
+  }
+
+  mounted(){
+    if(this.propValue){
+      this.setValue(this.propValue)
+    }
+  }
+
+  setValue(v:any){
+    this.value = v;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/oms/orderPay/index.vue

@@ -6,6 +6,8 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import payOrderTag from './components/tag.vue'
+import orderFrom from './components/orderFrom.vue'
 import {query} from '@/api/orderPay'
 @Component({components:{}})
 export default class OrderPay extends Vue {
@@ -51,29 +53,34 @@ export default class OrderPay extends Vue {
           }
         }],
         [{
+          span:6,
           label:'支付渠道',
           prop:'payment',
           component:'by-input'
         },{
+          span:6,
           label:'卖家ID',
           prop:'sellerId',
           component:'by-input'
         },{
+          span:6,
           label:'卖家收款账号',
           prop:'sellerAccount',
           component:'by-input'
-        },{
-          label:'支付时间',
-          prop:'payDate',
-          component:'by-date-picker',
-          compConfig:{
-            attr:{
-              editable:false,
-              type:'datetimerange',
-              format:'yyyy-MM-dd HH:mm:ss'
-            }
-          }
-        }]
+        }
+        // ,{
+        //   label:'支付时间',
+        //   prop:'payDate',
+        //   component:'by-date-picker',
+        //   compConfig:{
+        //     attr:{
+        //       editable:false,
+        //       type:'datetimerange',
+        //       format:'yyyy-MM-dd HH:mm:ss'
+        //     }
+        //   }
+        // }
+        ]
       ]
     },
     tool:{
@@ -86,7 +93,7 @@ export default class OrderPay extends Vue {
       attr:{
         size:'mini',
         seq:true,
-        align:'center',
+        // align:'center',
       },
       columns:[{
         title:'内部订单号',
@@ -95,15 +102,28 @@ export default class OrderPay extends Vue {
       },{
         title:'订单来源',
         field:'sourceFrom',
-        width:120
+        width:150,
+        component:orderFrom
       },{
         title:'外部支付单号',
         field:'outerPayId',
-        width:120
+        width:150
       },{
         title:'是否支付',
         field:'isOrderPay',
-        width:120
+        width:120,
+        component:'text-change',
+        compConfig:{
+          attr:{
+            data:[{
+              value:0,
+              label:'否'
+            },{
+              value:1,
+              label:'是'
+            }]
+          }
+        }
       },{
         title:'支付渠道',
         field:'payment',
@@ -131,19 +151,16 @@ export default class OrderPay extends Vue {
       },{
         title:'支付时间',
         field:'payDate',
-        width:120
+        width:140
       },{
         title:'审核状态',
         field:'status',
-        width:120
-      },{
-        title:'审核时间',
-        field:'confirmDate',
-        width:120
+        width:120,
+        component:payOrderTag
       },{
         title:'店铺名称',
         field:'shopName',
-        width:120
+        width:140
       }]
     }
   }
@@ -208,5 +225,6 @@ export default class OrderPay extends Vue {
 .order-pay{
   height: 100%;
   width: 100%;
+  overflow-y: hidden;
 }
 </style>