订单

src/benyun/components/collapseCheckbox/collapseCheckbox.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-collapse v-model="activeNames">
+    <template v-if="collapseItems && collapseItems.length >0">
+      <el-collapse-item v-for="(item, index) of collapseItems" :key="index" :name="index+1">
+        <template slot="title">
+          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange($event,item)">{{item.title}}</el-checkbox>
+        </template>
+        <el-checkbox-group v-if="item.data && item.data.length > 0" v-model="value" @change="handleCheckedItemChange($event,item)">
+          <el-checkbox v-for="dataItem in item.data" :label="dataItem.value" :key="dataItem.value">{{dataItem.label}}</el-checkbox>
+        </el-checkbox-group>
+      </el-collapse-item>
+    </template>
+  </el-collapse>
+</template>
+
+<script lang="ts">
+/*
+  配置说明
+  config:{
+    attr:{
+     retType:''  //返回值类型 string/arrary
+    },
+    collapseItems:[{
+      title:'',
+      data:[{
+        label:'选项一',
+        value:1
+      },{
+        label:'选项二',
+        value:2
+      }]
+    }]
+  }
+*/
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/compVue/VueViews'
+@Component
+export default class CollapseCheckbox extends VueViews {
+  value:Array<any>=[]
+  activeNames:Array<any>=[1]
+  checkAll= false
+  isIndeterminate= false
+
+  get collapseItems(){
+    let data:Array<any>=[];
+    if(this.config?.collapseItems){
+      data = this.config.collapseItems
+    }
+    return data;
+  }
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+  }
+  mounted(){}
+
+  setValue(v:any){
+    if(v){
+      this.value = v
+    }else{
+      this.value = []
+    }
+  }
+
+  getValue(){
+    if(this.attrs.retType){
+      let n='';
+      for(const item of this.value){
+        if(!n){
+          n = n + ',' + item
+        }else{
+          n = item
+        }
+      }
+      return n;
+    }else{
+      return this.value;
+    }
+  }
+
+
+  handleCheckAllChange(val:any,config:any){
+    this.value = []
+    if(val && config.data){
+      for(const item of config.data){
+        this.value.push(item.value)
+      }
+    }
+    this.isIndeterminate = false;
+  }
+
+  handleCheckedItemChange(value:any,config:any){
+    let checkedCount = value.length;
+    this.checkAll = checkedCount === config.data.length;
+    this.isIndeterminate = checkedCount > 0 && checkedCount < config.data.length;
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/benyun/components/collapseRadio/collapseRadio.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-collapse v-model="activeNames">
+    <template v-if="collapseItems && collapseItems.length >0">
+      <el-collapse-item v-for="(item, index) of collapseItems" :key="index" :name="index+1">
+        <template slot="title">
+          {{ item.title }}
+        </template>
+      </el-collapse-item>
+      <el-radio-group v-model="value">
+        <el-radio :label="3">备选项</el-radio>
+      </el-radio-group>
+    </template>
+  </el-collapse>
+</template>
+
+<script lang="ts">
+/*
+  配置说明
+  config:{
+    attr:{
+     retType:''  //返回值类型 string/arrary
+    },
+    collapseItems:[{
+      title:'',
+      data:[{
+        label:'选项一',
+        value:1
+      },{
+        label:'选项二',
+        value:2
+      }]
+    }]
+  }
+*/
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/compVue/VueViews'
+@Component
+export default class CollapseRadio extends VueViews {
+  value:any='';
+  activeNames:Array<any>=[1]
+
+  get collapseItems(){
+    let data:Array<any>=[];
+    if(this.config?.collapseItems){
+      data = this.config.collapseItems
+    }
+    return data;
+  }
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+  }
+  mounted(){}
+}
+</script>

src/benyun/plugins/componentRegister.ts

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

src/router/index.ts

@@ -42,6 +42,11 @@ export const constantRoutes: Array<any> = [
       }
     ]
   },
+  {
+    path:'/order',
+    name:'Order',
+    component:() => import('@/views/demo/order/order.vue')
+  },
   {
     path:'/demo',
     name:'Demo',

src/views/demo/order.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class=""></div>
-</template>
-<script lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/demo/order/components/filterDate.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="filter-row">
+    <div class="label">{{title}}</div>
+    <div class="filter-cont">
+      <el-date-picker
+        v-model="value"
+        clearable
+        size="mini" 
+        type="date"
+        @change="change"
+        placeholder="选择日期">
+      </el-date-picker>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import Format from '@/benyun/utils/dateFormat'
+@Component
+export default class FilterInput extends Vue {
+  value=''
+  @Prop()
+  title:string|undefined
+
+  clear(){
+    this.value = ''
+  }
+
+  change(v:any){
+    this.value = Format(v,'yyyy-MM-dd');
+    this.$emit('change',this.value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-row{
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 4px;
+  flex-direction: column;
+  .label{
+    // width: 80px;
+    flex-shrink: 0;
+    font-size: 14px;
+    text-align: right;
+  }
+  .filter-cont{
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>

src/views/demo/order/components/filterInput.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="filter-row">
+    <div class="label">{{title}}</div>
+    <div class="filter-cont">
+      <el-input v-model="value" size="mini" :placeholder="title" @input="input" clearable></el-input>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class FilterInput extends Vue {
+  value=''
+  @Prop()
+  title:string|undefined
+
+  clear(){
+    this.value = ''
+  }
+
+  input(v:any){
+    this.$emit('input',v)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-row{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-bottom: 4px;
+  .label{
+    width: 70px;
+    flex-shrink: 0;
+    font-size: 14px;
+    text-align: right;
+  }
+  .filter-cont{
+    width: 100%;
+    padding-left: 8px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/views/demo/order/components/orderCheckbox.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-collapse-item :name="keyName">
+    <template slot="title">
+      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{title}}</el-checkbox>
+    </template>
+    <el-checkbox-group v-if="options.length > 0" v-model="value" @change="handleCheckedItemChange">
+      <el-checkbox v-for="dataItem in options" :label="dataItem.value?dataItem.value:dataItem.label" :key="dataItem.value">{{dataItem.label}}</el-checkbox>
+    </el-checkbox-group>
+  </el-collapse-item>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class OrderCheckbox extends Vue {
+  value:Array<any>=[]
+  activeNames:Array<any>=[1]
+  checkAll= false
+  isIndeterminate= false
+
+  @Prop()
+  title:string|undefined
+
+  @Prop()
+  options!:Array<any>
+
+  @Prop()
+  keyName:any
+
+  @Prop()
+  retType?:string
+
+  clear(){
+    this.value = []
+  }
+
+  getValue(){
+    if(this.retType == 'string'){
+      let n='';
+      for(const item of this.value){
+        if(!n){
+          n = n + ',' + item
+        }else{
+          n = item
+        }
+      }
+      return n;
+    }else{
+      return this.value;
+    }
+  }
+
+  emitFun(){
+    let v:any = this.getValue();
+    this.$emit('checkboxChange',v);
+  }
+
+  handleCheckAllChange(val:any){
+    this.value = []
+    if(val && this.options){
+      for(const item of this.options){
+        this.value.push(item.value)
+      }
+    }
+    this.isIndeterminate = false;
+    this.emitFun();
+  }
+
+  handleCheckedItemChange(value:any,config:any){
+    let checkedCount = value.length;
+    this.checkAll = checkedCount === this.options.length;
+    this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
+    this.emitFun();
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/demo/order/components/orderRadio.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-collapse-item :name="keyName" :title="title">
+    <el-radio-group v-model="value" v-if="options.length > 0" @input="input">
+      <el-radio label="" class="order-radio">不限</el-radio>
+      <el-radio v-for="(item,index) in options" :label="item.value?item.value:item.label" :key="index" class="order-radio">{{item.label}}</el-radio>
+      <slot />
+    </el-radio-group>
+  </el-collapse-item>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class OrderCheckbox extends Vue {
+  value:any=''
+  activeNames:Array<any>=[1]
+  checkAll= false
+  isIndeterminate= false
+
+  @Prop()
+  noLimit?:boolean
+
+  @Prop()
+  title:string|undefined
+
+  @Prop() 
+  options!:Array<any>
+
+  @Prop()
+  keyName:any
+
+  getValue(){
+    return this.value;
+  }
+
+  clear(){
+    this.value = ''
+  }
+
+  input(){
+    this.$emit('radioChange',this.value);
+  }
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+.order-radio{
+  margin-bottom: 8px;
+}
+</style>

src/views/demo/order/components/orderTable.vue

@@ -0,0 +1,62 @@
+<template>
+  <vxe-table
+    size="mini"
+    border
+    :data="data">
+    <vxe-column type="seq" width="60" title="序号"></vxe-column>
+    <vxe-column type="checkbox" width="50"></vxe-column>
+    <vxe-column field="sourceId" title="线上订单号" width="120"></vxe-column>
+    <vxe-column field="type" title="订单类型" width="120"></vxe-column>
+    <vxe-column field="status" title="订单状态" width="120"></vxe-column>
+    <vxe-column field="shipment" title="跨境买家指定物流" width="120"></vxe-column>
+    <vxe-column field="chosenChannel" title="实发快递渠道" width="120"></vxe-column>
+    <vxe-column field="logisticsId" title="快递单号" width="120"></vxe-column>
+    <vxe-column field="logisticsCompany" title="快递公司" width="120"></vxe-column>
+    <vxe-column field="logisticsCompanyId" title="物流公司编码" width="120"></vxe-column>
+    <vxe-column field="internationalLogisticsId" title="国际物流单号" width="120"></vxe-column>
+    <vxe-column field="skus" title="商品" width="120"></vxe-column>
+    <vxe-column field="weight" title="重量" width="70"></vxe-column>
+    <vxe-column field="isCod" title="是否货到付款" width="120"></vxe-column>
+    <vxe-column field="freight" title="运费" width="70"></vxe-column>
+    <vxe-column field="sendDate" title="发货日期" width="120"></vxe-column>
+    <vxe-column field="signTime" title="预计送达时间" width="120"></vxe-column>
+    <vxe-column field="endTime" title="确认收货时间" width="120"></vxe-column>
+    <vxe-column field="receiverAddress" title="收货地址" width="120"></vxe-column>
+    <vxe-column field="receiverName" title="收件人" width="120"></vxe-column>
+    <vxe-column field="receiverMobile" title="手机" width="120"></vxe-column>
+    <vxe-column field="buyerMessage" title="买家留言" width="120"></vxe-column>
+    <vxe-column field="wmsCoId" title="发货仓编号" width="120"></vxe-column>
+    <vxe-column field="payDate" title="支付时间" width="120"></vxe-column>
+    <vxe-column field="freeAmount" title="抵扣金额" width="120"></vxe-column>
+    <vxe-column field="payAmount" title="应付金额" width="120"></vxe-column>
+    <vxe-column field="paidAmount" title="实际支付金额" width="120"></vxe-column>
+    <vxe-column field="shopBuyerId" title="买家昵称" width="120"></vxe-column>
+    <vxe-column field="openId" title="平台买家唯一值" width="120"></vxe-column>
+    <vxe-column field="buyerPaidAmount" title="总买家实付" width="120"></vxe-column>
+    <vxe-column field="sellerIncomeAmount" title="总卖家实收" width="120"></vxe-column>
+    <vxe-column field="questionType" title="问题类型" width="120"></vxe-column>
+    <vxe-column field="questionDesc" title="问题描述" width="120"></vxe-column>
+    <vxe-column field="shopName" title="店铺" width="120"></vxe-column>
+    <vxe-column field="invoiceType" title="发票类型" width="120"></vxe-column>
+    <vxe-column field="invoiceTitle" title="发票抬头" width="120"></vxe-column>
+    <vxe-column field="buyerTaxNo" title="发票税号" width="120"></vxe-column>
+    <vxe-column field="drpCoIdFrom" title="分销商编号" width="120"></vxe-column>
+    <vxe-column field="drpCoIdTo" title="供销商编号" width="120"></vxe-column>
+    <vxe-column field="orderDate" title="订单日期" width="120"></vxe-column>
+    <vxe-column field="remark" title="订单备注" width="120"></vxe-column>
+    <vxe-column field="note" title="线下备注" width="120"></vxe-column>
+  </vxe-table>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class OrderTable extends Vue {
+  @Prop()
+  data!:Array<any>
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/demo/order/components/orderTool.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="order-tool">
+    <el-button type="text" >新增订单</el-button>
+    <div class="split"></div>
+    <el-dropdown split-button type="text" @click="auHandle">
+        审批
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>反审批</el-dropdown-item>
+        <el-dropdown-item>批量审批</el-dropdown-item>
+        <el-dropdown-item>批量反审批</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-button type="text">设快递</el-button>
+    <el-dropdown split-button type="text" class="dropdown">
+      设快递单号
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>批量设置快递单号</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <div class="split"></div>
+    <el-button type="text">转异常</el-button>
+    <el-button type="text">转正常</el-button>
+    <el-button type="text">取消订单</el-button>
+    <div class="split"></div>
+    <el-dropdown split-button type="text" class="dropdown">
+      修改
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>添加赠品</el-dropdown-item>
+        <el-dropdown-item>改运费</el-dropdown-item>
+        <el-dropdown-item>改标签</el-dropdown-item>
+        <el-dropdown-item>改备注</el-dropdown-item>
+        <el-dropdown-item>设定业务员</el-dropdown-item>
+        <el-dropdown-item>拆分</el-dropdown-item>
+        <el-dropdown-item>合并</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class OrderTool extends Vue {
+  auHandle(){
+    console.log('123')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.order-tool{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  .order-tool-btn{
+    color: #333;
+  }
+  .split{
+    height: 10px;
+    width: 1px;
+    background-color: #CCC;
+    margin: 0 8px;
+  }
+  .dropdown{
+    padding-left: 8px;
+  }
+}
+</style>

src/views/demo/order/order.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="order">
+    <div class="order-left">
+      <el-collapse v-model="activeNames" class="my-collapse">
+        <el-collapse-item title="基本信息" name="1">
+          <filter-input title="线上订单号" @input="onChange($event,'sourceId')" />
+          <filter-input title="买家昵称" @input="onChange($event,'shopBuyerId')" />
+          <filter-input title="买家ID" @input="onChange($event,'buyerId')" />
+        </el-collapse-item>
+        <el-collapse-item title="物流" name="2">
+          <filter-input title="快递单号" @input="onChange($event,'logisticsId')" />
+          <filter-input title="快递公司" @input="onChange($event,'logisticsCompany')" />
+          <filter-input title="国际单号" @input="onChange($event,'internationalLogisticsId')" />
+          <filter-input title="跨境物流" @input="onChange($event,'shipment')" />
+        </el-collapse-item>
+        <el-collapse-item title="时间" name="time">
+          <filter-date title="计划发货时间" @change="onChange($event,'planDeliveryDate')" />
+          <filter-date title="发货日期" @change="onChange($event,'sendDate')" />
+          <filter-date title="预计送达时间" @change="onChange($event,'signTime')" />
+          <filter-date title="确认收货时间" @change="onChange($event,'endTime')" />
+        </el-collapse-item>
+        <el-collapse-item title="分销和供应" name="3">
+          <filter-input title="分销商编号" @input="onChange($event,'drpCoIdFrom')" />
+          <filter-input title="供销商编号" @input="onChange($event,'drpCoIdTo')" />
+        </el-collapse-item>
+        <order-radio title="是否已提交" keyName="isSubmitte" :options="isSubmittedOptions" noLimit @radioChange="onChange($event,'isSubmitte')" />
+        <order-radio title="订单来源" keyName="sourceFrom" :options="sourceFromOptions" noLimit @radioChange="onChange($event,'sourceFrom')" />
+        <order-radio title="订单类型" keyName="type" :options="typeOption" noLimit @radioChange="onChange($event,'type')" />
+        <order-radio title="订单状态" keyName="status" :options="statusOptions" noLimit @radioChange="onChange($event,'status')" />
+        <order-checkbox title="省份" keyName="receiverProvinceCode" :options="provinceOptions" @checkboxChange="onChange($event,'receiverProvinceCode')" />
+      </el-collapse>
+      <div class="searchHandle">
+        <el-button size="mini">重置</el-button>
+        <el-button type="primary" size="mini">搜索</el-button>
+      </div>
+    </div>
+    <div class="order-right">
+      <div class="tool">
+        <order-tool />
+      </div>
+      <div class="table">
+        <order-table :data="data"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import filterInput from './components/filterInput.vue'
+import OrderCheckbox from "./components/orderCheckbox.vue";
+import OrderRadio from './components/orderRadio.vue'
+import filterDate from './components/filterDate.vue'
+import OrderTool from "./components/orderTool.vue";
+import OrderTable from "./components/orderTable.vue";
+@Component({components:{filterInput,OrderCheckbox,OrderRadio,filterDate,OrderTool,OrderTable}})
+export default class Order extends Vue {
+  activeNames:Array<any>=['1']
+  data:Array<any> = []
+  value:any={
+    sourceId:'',  //线上订单号
+    shopBuyerId:'', //买家昵称
+    buyerId:'', //买家ID
+    logisticsId:'', //快递单号
+    logisticsCompany:'', //快递公司
+    internationalLogisticsId:'', //国际物流单号
+    isSubmitte:'', //数据是否已提交
+    drpCoIdFrom:'', //分销商编号
+    drpCoIdTo:'', //供销商编号
+    sourceFrom:'', //订单来源
+    type:'', //订单类型
+    status:'' , //订单状态
+  }
+  //数据是否已提交options
+  isSubmittedOptions:Array<any>=[{
+    label:'未提交(暂存)',
+    value:0
+  },{
+    label:'已提交',
+    value:1
+  }]
+
+  //订单来源
+  sourceFromOptions:Array<any>=[{
+    label:'手工下单',
+    value:'ERP'
+  },{
+    label:'复制',
+    value:'COPY'
+  },{
+    label:'合并',
+    value:'MERGE'
+  },{
+    label:'拆分；拆分还原',
+    value:'SPLIT'
+  },{
+    label:'手机',
+    value:'MOBILE'
+  },{
+    label:'导入',
+    value:'IMPORT'
+  },{
+    label:'供销推送',
+    value:'drp-s'
+  },{
+    label:'快手；微商城',
+    value:'KWAISHOP'
+  },{
+    label:'拼多多',
+    value:'PINDUODUO'
+  },{
+    label:'头条放心购',
+    value:'TOUTIAOFXG'
+  },{
+    label:'聚水潭',
+    value:'JUSHUITAN'
+  }]
+
+  //订单类型
+  typeOption:Array<any>=[{
+    label:'普通订单'
+  },{
+    label:'补发订单'
+  },{
+    label:'分销Plus'
+  },{
+    label:'供销Plus'
+  },{
+    label:'换货订单'
+  }]
+
+  //订单状态 
+  statusOptions:Array<any>=[{
+    label:'待付款',
+    value:'WaitPay'
+  },{
+    label:'发货中',
+    value:'Delivering'
+  },{
+    label:'被合并',
+    value:'Merged'
+  },{
+    label:'异常',
+    value:'Question'
+  },{
+    label:'被拆分',
+    value:'Split'
+  },{
+    label:'等供销商|外仓发货',
+    value:'WaitOuterSent'
+  },{
+    label:'已付款待审核',
+    value:'WaitConfirm'
+  },{
+    label:'已客审待财审',
+    value:'WaitFConfirm'
+  },{
+    label:'已发货',
+    value:'Sent'
+  },{
+    label:'取消',
+    value:'Cancelled'
+  }]
+
+  //省份
+  provinceOptions:Array<any>=[{
+    label:'北京',
+    value:'1'
+  },{
+    label:'天津',
+    value:'2'
+  },{
+    label:'上海',
+    value:'3'
+  },{
+    label:'河北省',
+    value:'4'
+  },{
+    label:'广西壮族自治区',
+    value:'5'
+  }]
+
+  //组件返回事件
+  onChange(v:any,code:string){
+    this.value[code] = v;
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.order{
+  width: 100%;
+  display: flex;
+  overflow-x: hidden;
+  .order-left{
+    width: 240px;
+    flex-shrink: 0;
+    background-color: #f0f0f0;
+    border-right: solid 1px #CCC;
+    box-sizing: border-box;
+    padding: 4px;
+    .my-collapse{
+      padding: 0 4px;
+      background: #FFF;
+    }
+    .searchHandle{
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px;
+    }
+  }
+  .filter-box{
+    width: calc(100% - 8px);
+    background-color: #FFF;
+    box-sizing: border-box;
+    padding: 8px;
+    border:solid 1px #EEE;
+    
+    .filter-row:last-child{
+      padding: 0;
+    }
+  }
+  .order-right{
+    width: 100%;
+    box-sizing: border-box;
+    padding-left: 8px;
+    .tool{
+      width: 100%;
+    }
+    .table{
+      width: 100%;
+    }
+  }
+}
+</style>