1、单据新增只读方法

2、编辑订单功能

src/assets/styles/index.scss

@@ -19,9 +19,9 @@ body {
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
-label {
-  font-weight: 700;
-}
+// label {
+//   font-weight: 700;
+// }
 
 html {
   height: 100%;

src/benyun/components/byBill/byBill.vue

@@ -8,7 +8,7 @@
         <div class="bill-nav" v-if="smtConfig" :class="{'onBill':showTab == 'smt'}" @click="tabChange('smt')">已提交</div>
         <div class="bill-nav" v-if="draftsBoxConfig" :class="{'onBill':showTab == 'drafts'}" @click="tabChange('draftsBox')">草稿箱</div>
         <div class="bill-nav" v-if="allConfig" :class="{'onBill':showTab == 'all'}" @click="tabChange('all')">综合查询</div>
-        <div class="bill-nav" v-if="recycleBinConfig" :class="{'onBill':showTab == 'recycle'}" @click="tabChange('recycleBin')">回收站</div>
+        <div class="bill-nav" v-if="recycleBinConfig" :class="{'onBill':showTab == 'recycleBin'}" @click="tabChange('recycleBin')">回收站</div>
         <div class="bill-nav" v-for="(item,index) of customs" :class="{'onBill':showTab == item.name}" @click="tabChange(item.name)" :key="index">{{item.label}}</div>
       </div>
       <div class="close" @click="closeTab = !closeTab">
@@ -162,6 +162,25 @@ export default class ByBill extends VueViews {
     }
   }
 
+  //设置单据内表单和表格配置
+  setBillConfig(c:any){
+    if(c){
+      this.config.bill = c;
+      if(c.form){
+        (this.$refs.billForm as any).setConfig(c.form)
+      }
+      if(c?.tableConfig?.length > 0){
+        let n = 0;
+        for(const item of c.tableConfig){
+          if(item.table && this.$refs['billTable_'+n]){
+            (this.$refs['billTable_'+n] as any)[0].setConfig(item.table)
+          }
+          n++;
+        }
+      }
+    }
+  }
+
   //左侧tab切换
   tabChange(t:string){
     this.showTab = t;
@@ -277,7 +296,6 @@ export default class ByBill extends VueViews {
     return d;
   }
 
-
   //设置单据表单数据
   setBillFormValue(value:any){
     if(this.$refs['billForm']){

src/benyun/components/byForm/byForm.vue

@@ -8,14 +8,15 @@
     :size="attrs.size ? attrs.size : 'small'" 
     :inline-message="true" 
     v-bind="$attrs" 
+    :disabled="attrs.disabled"
     :label-width="attrs.labelWidth"
-    :rules="attrs.rules"
+    :rules="attrs.readonly?[]:attrs.rules"
     :label-position="attrs.labelPosition ? attrs.labelPosition : ''">
       <el-row class="form-row" v-for="(itemChild,index) of columns" :key="index">
         <el-col  v-for="(item,_ind) of itemChild" :span="item.span" :key="'itemChild'+_ind">
           <el-form-item class="by-form-item" 
             :label="item.label" 
-            :rules="item.rules" 
+            :rules="attrs.readonly?[]:item.rules" 
             :prop="item.prop" 
             :required="item.required"
             :error="item.error"
@@ -32,6 +33,7 @@
               />
               <slot v-if="item.slot" :name='item.prop' :value='value'></slot>
               <!-- <slot :[item.prop]="value" ></slot> -->
+              <div class="readonly-cover" v-if="attrs.readonly"></div>
           </el-form-item>
         </el-col>
       </el-row>
@@ -44,6 +46,8 @@
   基础配置
   config:{
     attr:{
+      disabled:true/false //表单禁用
+      readonly:true/false //表单只读
       size:medium / small / mini, //表单域下组件的尺寸,
       height:'',  //高度
       labelPosition: right/left/top //标签位置
@@ -202,6 +206,13 @@ export default class ByForm extends VueViews {
   .form-comp{
     width: 100%;
   }
+  .readonly-cover{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
 }
 </style>
 

src/views/demo/bill.vue

@@ -12,6 +12,7 @@
       <el-button type="primary" plain @click="setdraftsBoxValue">设置草稿箱数据</el-button><br/>
       <el-button type="primary" plain @click="setBillTableData">设置单据表格1数据</el-button><br/>
       <el-button type="primary" plain @click="getBillTableSelectData">获取单据表格1数据</el-button><br/>
+      <el-button type="primary" plain @click="setReadonly">设置单据只读</el-button><br/>
     </div>
     
   </div>
@@ -338,6 +339,16 @@ export default class BillDemo extends Vue {
 
   mounted(){
 
+  }
+  setReadonly(){
+    let c = (this as any).$lodash.cloneDeep(this.config.bill);
+    //表单不可操作
+    c.form.attr.readonly = true;
+    //修改单据表格内工具栏
+    for(const item of c.tableConfig){
+      delete item.tool
+    }
+    (this.$refs.bill as any).setBillConfig(c)
   }
   setBillTableData(){
     let data:Array<any>=[{

src/views/demo/form.vue

@@ -20,6 +20,7 @@ export default class DemoForm extends Vue {
     attr:{
       size:'small',
       height:500,
+      readonly:true,
       rules:{
         name:[{
           required: true, message: '请输入名称', trigger: 'blur'

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

@@ -0,0 +1,165 @@
+<template>
+  <vxe-modal v-model="value" id="addOrder" width="80%" height="80%" min-width="460" min-height="320" 
+    show-zoom resize transfer show-footer>
+      <template #title>
+        <span>创建新订单</span>
+      </template>
+      <template #default>
+        <el-collapse v-model="activeNames">
+          <el-collapse-item title="基本信息" name="1" class="add-order-item">
+            <by-form :propConfig="config" ref="form"></by-form>
+          </el-collapse-item>
+          <el-collapse-item title="买家信息" name="2"></el-collapse-item>
+          <el-collapse-item title="商品订单" name="3"></el-collapse-item>
+          <el-collapse-item title="订单支付情况" name="4"></el-collapse-item>
+          <el-collapse-item title="发票信息" name="5"></el-collapse-item>
+        </el-collapse>
+      </template>
+      <template #footer>
+        <div class="btn">
+          <el-button type="primary" size="small">确定并继续</el-button>
+          <el-button type="primary" size="small">确定</el-button>
+        </div>
+      </template>
+    </vxe-modal>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class AddOrder extends Vue {
+  value=true;
+  activeNames:Array<any> =['1'];
+  config:any={
+    attr:{
+      size:'mini',
+      rules:{
+        shopName:[{
+          required: true, message: '请输入名称', trigger: 'blur'
+        }],
+        sourceId:[{
+          required: true, message: '请输入名称', trigger: 'blur'
+        }],
+        orderDate:[{
+          required: true, message: '请输入名称', trigger: 'blur'
+        }]
+      }
+    },
+    columns:[
+      [{
+        span:6,
+        label:'店铺名称',
+        prop:'shopName',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入店铺名称',
+            clearable:true
+          }
+        }
+      },{
+        span:6,
+        label:'线上订单',
+        prop:'sourceId',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入线上订单',
+            clearable:true
+          }
+        }
+      },{
+        span:6,
+        label:'订单日期',
+        prop:'orderDate',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入订单日期',
+            clearable:true
+          }
+        }
+      }],
+      [{
+        span:6,
+        label:'运费',
+        prop:'freight',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入订单日期',
+            clearable:true
+          }
+        }
+      },{
+        span:6,
+        label:'快递公司',
+        prop:'logisticsCompany',
+        component:'by-select',
+        compConfig:{
+          attr:{
+            placeholder:'请选择快递公司',
+            clearable:true
+          }
+        }
+      },{
+        span:6,
+        label:'业务员',
+        slot:true,
+        prop:'slotField',
+      }],
+      [{
+        label:'多标签',
+        prop:'labels',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'以逗号分隔，单个标签不能超过十个字符',
+            clearable:true
+          }
+        }
+      }],
+      [{
+        label:'买家留言',
+        prop:'buyerMessage',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入买家留言',
+            clearable:true
+          }
+        }
+      }],
+      [{
+        label:'卖家备注',
+        prop:'remark',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入卖家备注',
+            clearable:true
+          }
+        }
+      }]
+    ]
+  }
+  setShow(v:boolean){
+    this.value = v;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
+<style lang="scss">
+.add-order-item{
+  .el-collapse-item__content{
+    padding-bottom: 0;
+  }
+}
+</style>

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

@@ -1,8 +1,8 @@
 <template>
   <div class="filter-row">
-    <div class="label">{{title}}</div>
+    <div class="label" v-if="title" :style="{width:labelWidth?labelWidth+'px':'70px'}">{{title}}</div>
     <div class="filter-cont">
-      <el-input v-model="value" size="mini" :placeholder="title" @input="input" clearable></el-input>
+      <el-input v-model="value" size="mini" :type="type" :placeholder="placeholder?placeholder:title" @input="input" clearable></el-input>
     </div>
   </div>
 </template>
@@ -14,6 +14,12 @@ export default class FilterInput extends Vue {
   value=''
   @Prop()
   title:string|undefined
+  @Prop()
+  placeholder?:string
+  @Prop()
+  type?:string
+  @Prop()
+  labelWidth?:number
 
   clear(){
     this.value = ''

src/views/demo/order/order.vue

@@ -23,9 +23,15 @@
           <filter-input title="分销商编号" @input="onChange($event,'drpCoIdFrom')" />
           <filter-input title="供销商编号" @input="onChange($event,'drpCoIdTo')" />
         </el-collapse-item>
+        <el-collapse-item title="标签和备注" name="4">
+          <filter-input title="标签" labelWidth="60" placeholder="以逗号分隔，单个标签不能超过十个字符" type="textarea" @input="onChange($event,'labels')" />
+          <filter-input title="订单备注" labelWidth="60" placeholder="卖家备注" @input="onChange($event,'remark')" />
+          <filter-input title="线下备注" labelWidth="60" placeholder="线下备注" @input="onChange($event,'note')" />
+        </el-collapse-item>
+        <order-checkbox title="旗帜" keyName="sellerFlag" :options="sellerFlagOptions" @checkboxChange="onChange($event,'sellerFlag')" />
         <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-checkbox title="订单类型" keyName="type" :options="typeOption" noLimit @checkboxChange="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>
@@ -40,8 +46,12 @@
       </div>
       <div class="table">
         <order-table :data="data"/>
-        
+        <div class="page">
+          <el-pagination v-if="page.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNo" :page-size="page.pageSize"
+            :layout="'total, sizes, prev, pager, next, jumper'" :total="page.total"></el-pagination>
+        </div>
       </div>
+      <add-order ref="addOrder" />
     </div>
   </div>
 </template>
@@ -53,10 +63,16 @@ 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}})
+import AddOrder from "./components/addOrder.vue";
+@Component({components:{filterInput,OrderCheckbox,OrderRadio,filterDate,OrderTool,OrderTable,AddOrder}})
 export default class Order extends Vue {
   activeNames:Array<any>=['1']
   data:Array<any> = []
+  page:any={
+    pageNo: 1, //当前页
+    pageSize: 20, //每页条数
+    total: 500 //总条数
+  }
   value:any={
     sourceId:'',  //线上订单号
     shopBuyerId:'', //买家昵称
@@ -180,11 +196,36 @@ export default class Order extends Vue {
     value:'5'
   }]
 
+  //旗帜
+  sellerFlagOptions: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;
   }
 
+  handleSizeChange(v:number){
+    this.page.pageSize = v;
+  }
+  handleCurrentChange(v:number){
+    this.page.pageNo = v;
+  }
+
 }
 </script>
 
@@ -200,6 +241,7 @@ export default class Order extends Vue {
     border-right: solid 1px #CCC;
     box-sizing: border-box;
     padding: 4px;
+    
     .my-collapse{
       padding: 0 4px;
       background: #FFF;
@@ -224,7 +266,7 @@ export default class Order extends Vue {
     }
   }
   .order-right{
-    width: 100%;
+    width: calc(100% - 240px);
     box-sizing: border-box;
     padding-left: 8px;
     .tool{
@@ -232,7 +274,22 @@ export default class Order extends Vue {
     }
     .table{
       width: 100%;
+      .page{
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        padding: 16px;
+        box-sizing: border-box;
+      }
     }
   }
 }
+</style>
+
+<style lang="scss">
+.order-left{
+  .el-collapse-item__content{
+    padding-bottom: 0;
+  }
+}
 </style>