店铺管理+moduleView新增弹窗设置

src/benyun/components/byForm/byForm.vue

@@ -19,7 +19,7 @@
     :inline-message="true" 
     v-bind="$attrs" 
     :disabled="attrs.disabled"
-    :label-width="attrs.labelWidth"
+    :label-width="attrs.labelWidth?attrs.labelWidth:'100px'"
     :rules="attrs.readonly?{}:attrs.rules"
     :label-position="attrs.labelPosition ? attrs.labelPosition : ''">
       <el-row class="form-row" v-for="(itemChild,index) of columns" :key="index">
@@ -31,7 +31,7 @@
             :required="item.required"
             :error="item.error"
             :size="item.size"
-            :label-width="item.labelWidth?item.labelWidth:'100px'">
+            :label-width="item.labelWidth">
             <component v-bind:is="item.component" 
               class="form-comp"
               :propConfig="item.compConfig" 
@@ -82,7 +82,7 @@
         component:''   //组件
         compConfig:{}  //组件配置
         slot：true/false  //插槽
-        colspan：‘’  //在itemCount的基础上 列的数量（desc的时候用）
+        colspan：''  //在itemCount的基础上 列的数量（desc的时候用）
         descSlot：true/false  //插槽（desc的时候用）
     }]]
     request:{

src/benyun/components/bySwitch/bySwitch.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-switch
+    v-model="value"
+    :active-color="attrs.activeColor"
+    :inactive-color="attrs.inactiveColor"
+    :disabled="attrs.disabled"
+    :width="attrs.width"
+    :active-text="attrs.activeText"
+    :inactive-text="attts.inactiveText"
+    :active-value="attrs.activeValue"
+    :inactive-value="attrs.inactiveValue"
+    @change="change"
+    >
+  </el-switch>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/compVue/VueViews';
+
+@Component
+export default class BySwitch extends VueViews {
+  value:any=null
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+  }
+  setValue(v:any){
+    this.value = v;
+  }
+  getValue(){
+    return this.value;
+  }
+  // 清空数据
+  clearValue(){
+    this.value = null
+  }
+  change(v:any){
+    this.$emit('onChange',v);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/benyun/components/byTool/byTool.vue

@@ -51,7 +51,7 @@ export default class GmTools extends Vue {
     { name: '新增', icon: 'el-icon-plus', clickName: 'onAdd', _class: 'add' },
 		{ name: '保存', icon: 'el-icon-plus', clickName: 'onSave', _class: 'save' },
     { name: '提交', icon: 'el-icon-finished', clickName: 'onSmt', _class: 'smt' },
-    { name: '反提交', icon: 'el-icon-finished', clickName: 'onReturnSmt', _class: 'returnSmt' },
+    { name: '反提交', icon: 'el-icon-refresh-left', clickName: 'onReturnSmt', _class: 'returnSmt' },
     { name: '接单', icon: 'el-icon-sold-out', clickName: 'onOrder', _class: 'order' },
     { name: '派单', icon: 'el-icon-sell', clickName: 'onDispatch', _class: 'dispatch' },
     { name: '修改', icon: 'el-icon-edit', clickName: 'onUpdate', _class: 'edit' },

src/benyun/components/moduleView/moduleView.vue

@@ -23,6 +23,16 @@
         <by-table :propConfig="tableConfig" :ref="tableID" @pagination="paginationChange" @detail="detail" @onChangeRow="onChangeRow" />
       </div>
     </div>
+    <transition name="el-zoom-in-center" v-if="modalConfig">
+      <div class="view-modal" v-show="modalShow">
+        <div class="tool-box" v-if="modalConfig.tool">
+          <by-tool :propConfig="modalConfig.tool" @clickHandle="modalHandle" />
+        </div>
+        <div class="view-form">
+          <by-form :propConfig="modalConfig.form"></by-form>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -36,6 +46,7 @@ interface Page{
 }
 @Component
 export default class ModuleView extends ModuleViewHandle {
+  modalShow=false;
   get attrs(){
     return this.config.attr ? this.config.attr : {};
   }
@@ -54,6 +65,11 @@ export default class ModuleView extends ModuleViewHandle {
     return this.config?.table ? this.config.table : null
   }
 
+  //弹窗
+  get modalConfig(){
+    return this.config.modal ? this.config.modal : null
+  }
+
   calculateCount=0;
 
   created(){
@@ -62,7 +78,7 @@ export default class ModuleView extends ModuleViewHandle {
     }
   }
   mounted(){
-    this.getList() 
+    // this.getList() 
     this.$nextTick(()=>{
       if(this.attrs.calculateH){
         this.initTable();
@@ -116,12 +132,24 @@ export default class ModuleView extends ModuleViewHandle {
       this.calculateCount=0;
       this.initTable()
     }
+    if(e == 'onAdd'){
+      this.modalShow = true;
+    }
     if((this as any)[e]){
       (this as any)[e]()
     }else{
       this.$emit('clickHandle',e)
     }
   }
+  //弹窗工具栏
+  modalHandle(e:string){
+    if(e == 'onReturn'){
+      this.modalShow = false;
+    }else{
+      this.$emit('modalHandle',e)
+    }
+    
+  }
   getSelectData(){
     let data:Array<any>=[];
     if(this.$refs[this.tableID]){
@@ -170,6 +198,23 @@ export default class ModuleView extends ModuleViewHandle {
   width: 100%;
   box-sizing: border-box;
   padding:  16px;
+  position: relative;
+  .view-modal{
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    padding: 16px;
+    background-color: #FFF;
+    z-index: 999;
+    .view-form{
+      width: 100%;
+      height: calc(100% - 48px);
+      overflow-y: auto;
+    }
+  }
   .search{
     width: 100%;
     padding-bottom: 8px;

src/benyun/plugins/componentRegister.ts

@@ -47,6 +47,10 @@ const comps: Array<ComBase> = [
     name: "sideTree",
     component: () => import("@/benyun/components/sideTree/sideTree.vue"),
   },
+  {
+    name: "bySwitch",
+    component: () => import("@/benyun/components/bySwitch/bySwitch.vue"),
+  },
 ];
 
 const install = function (Vue: any) {

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

@@ -0,0 +1,31 @@
+<template>
+  <el-tag type="success" v-if="value == 'Authorized'">已授权</el-tag>
+  <el-tag type="danger" v-else-if="value == 'Unauthorized'">未授权</el-tag>
+  <el-tag type="info" v-else-if="value == 'Expired'">已过期</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
+
+  setValue(v:any){
+    this.value = v;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/oms/shop/index.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="shop">
     <module-view :propConfig="config" ref="view" v-loading="load" style="height:100%" @pagination="pagination" />
-    
+
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { query,save,update,del } from '@/api/shop'
+import shopTag from './components/tag.vue'
 @Component({components:{}})
 export default class Shop extends Vue {
   load=false;
@@ -275,6 +276,254 @@ export default class Shop extends Vue {
         width:150
       }]
     },
+    modal:{
+      tool:{
+        tools:{
+          return:true,
+          save:true
+        }
+      },
+      form:{
+        attr:{
+          size:'small',
+          labelWidth:'130px'
+        },
+        columns:[
+          [{
+            label:'店铺编号',
+            prop:'shopId',
+            component:'by-input',
+          },{
+            label:'店铺名称',
+            prop:'shopName',
+            component:'by-input',
+          },{
+            label:'店铺简称',
+            prop:'shortName',
+            component:'by-input',
+          },{
+            label:'店铺分组',
+            prop:'shopGroup',
+            component:'by-input',
+          }],
+          [{
+            label:'店铺网址',
+            prop:'shopUrl',
+            component:'by-input',
+          },{
+            label:'店铺站点',
+            prop:'shopSite',
+            component:'by-input',
+          },{
+            label:'公司编号',
+            prop:'companyCode',
+            component:'by-input',
+          },{
+            label:'所属平台',
+            prop:'channelName',
+            component:'by-input',
+          }],
+          [{
+            label:'平台类型',
+            prop:'channel',
+            component:'by-input'
+          },{
+            label:'平台店铺名称',
+            prop:'channelShopName',
+            component:'by-input'
+          },{
+            label:'授权账号',
+            prop:'authAccount',
+            component:'by-input'
+          },{
+            label:'授权状态',
+            prop:'authStatus',
+            component:shopTag
+          }],
+          [{
+            label:'APP KEY',
+            prop:'appKey',
+            component:'by-input'
+          },{
+            label:'APP SECRET',
+            prop:'appSecret',
+            component:'by-input'
+          },{
+            label:'ACCESSTOKEN',
+            prop:'accessToken',
+            component:'by-input'
+          },{
+            label:'REFRESHTOKEN',
+            prop:'refreshToken',
+            component:'by-input'
+          }],
+          [{
+            label:'会话用户编号',
+            prop:'sessionUid',
+            component:'by-input'
+          },{
+            label:'授权开始时间',
+            prop:'authBegin',
+            component:'by-date-picker'
+          },{
+            label:'授权过期时间',
+            prop:'authExpired',
+            component:'by-date-picker'
+          },{
+            label:'授权修改时间',
+            prop:'authModified',
+            component:'by-date-picker'
+          }],
+          [{
+            label:'店铺状态',
+            prop:'shopStatus',
+            component:'by-input'
+          },{
+            label:'退款状态',
+            prop:'refundStatus',
+            component:'by-input'
+          },{
+            label:'身份证号',
+            prop:'sendIdCard',
+            component:'by-input'
+          },{
+            label:'联系电话',
+            prop:'sendPhone',
+            component:'by-input'
+          }],
+          [{
+            label:'发货地址',
+            prop:'sendTimeEffect',
+            component:'by-input'
+          },{
+            label:'标签',
+            prop:'labels',
+            component:'by-input'
+          },{
+            span:12,
+            label:'发货地址',
+            prop:'sendAddress',
+            component:'by-input'
+          }],
+          [{
+            label:'服务市场订购版本',
+            prop:'subscriptionVersion',
+            component:'by-input'
+          },{
+            label:'退货手机',
+            prop:'returnPhone',
+            component:'by-input'
+          },{
+            label:'退货人',
+            prop:'returnName',
+            component:'by-input'
+          },{
+            label:'退货邮编',
+            prop:'returnZip',
+            component:'by-input'
+          }],
+          [{
+            label:'同步发货',
+            prop:'enableSyncSend',
+            component:'by-input'
+          },{
+            label:'揽收轨迹同步发货',
+            prop:'enableTrackSyncSend',
+            component:'by-input'
+          },{
+            span:12,
+            label:'退货地址',
+            prop:'returnAdress',
+            component:'by-input'
+          }],
+          [{
+            label:'拆分订单整单发货',
+            prop:'enableSplitOrderFullSend',
+            component:'by-input'
+          },{
+            label:'同步库存',
+            prop:'enableSynvStore',
+            component:'by-input'
+          },{
+            label:'订单下载',
+            prop:'enableSyncOrder',
+            component:'by-input'
+          },{
+            label:'天猫物流升级',
+            prop:'enableTmallLogistics',
+            component:'by-input'
+          }],
+          [{
+            label:'下载截止时间',
+            prop:'endPullTime',
+            component:'by-date-picker'
+          },{
+            label:'最晚截单时间',
+            prop:'endInterceptTime',
+            component:'by-date-picker'
+          },{
+            label:'最晚出库时间',
+            prop:'endDeliveryTime',
+            component:'by-date-picker'
+          },{
+            label:'淘宝消息通知',
+            prop:'enableTaobaoMessageNotice',
+            component:'by-input'
+          }],
+          [{
+            label:'商品下载',
+            prop:'enableSkuDownload',
+            component:'by-input'
+          },{
+            label:'开启链接库存同步',
+            prop:'enableLinkSync',
+            component:'by-input'
+          },{
+            label:'是否虾皮SIP',
+            prop:'shopeeSip',
+            component:'by-input'
+          },{
+            label:'支付宝授权状态',
+            prop:'alipayAuthStatus',
+            component:'by-input'
+          }],
+          [{
+            label:'京东授权状态',
+            prop:'jdAuthStatus',
+            component:'by-input'
+          },{
+            label:'京东拒绝申请原因',
+            prop:'jdRejectReason',
+            component:'by-input'
+          },{
+            label:'启用分销',
+            prop:'enableDistribution',
+            component:'by-input'
+          },{
+            label:'菜鸟电子面单',
+            prop:'enableCainiaoElectronicBill',
+            component:'by-input'
+          }],
+          [{
+            label:'售后单下载',
+            prop:'enableSyncAfterSale',
+            component:'by-input'
+          },{
+            label:'开通AG',
+            prop:'enableAg',
+            component:'by-input'
+          },{
+            label:'确认收货自动退款',
+            prop:'enableAutoRefund',
+            component:'by-input'
+          },{
+            label:'开启跨境操作',
+            prop:'enableCbec',
+            component:'by-input'
+          }]
+        ]
+      }
+    },
     request:{
       url:'/omsOrder/omsShop/save'
     }