订单

src/benyun/components/bySelect/bySelect.vue

@@ -28,7 +28,7 @@
       size：medium/small/mini //尺寸
       clearable：true/false  //是否清空
       placeholder：''  //占位符
-
+      requestFormat:''
     },
     request:{}
   }
@@ -107,8 +107,9 @@ export default class BySelect extends VueViews {
     }
     let parame = (this as any).$lodash.cloneDeep(this.requestConfig);
     parame.success = (res:any) => {
-      if(res.data){
-        this.setOptions(res.data);
+      let f = this.attrs.requestFormat?this.attrs.requestFormat:'data'
+      if(res.data && res.data[f]){
+        this.setOptions(res.data[f]);
       }
     }
     parame.fail = (err:any) => {}

src/benyun/components/byTable/byTable.vue

@@ -49,7 +49,7 @@
           :width="item.width"
           :fixed="item.fixed"
           :align="item.align"
-          show-overflow="ellipsis"
+          :show-overflow="item.ellipsis"
           :tree-node="item.treeNode"
         >
           <template #default="{ row }">
@@ -57,8 +57,8 @@
             <component v-else-if="item.component" :is="item.component" :ref="item.prop+'Comp'" :propConfig="item.compConfig" 
               :propValue="row[item.field]" @onChange="onChange($event, row,item.field)" />
             <template v-else>
-              <span v-if="item.isDetail" class="detail" @click="detail(row)">{{ row[item.field] }}</span>
-              <span v-else>{{ row[item.field] }}</span>
+              <div v-if="item.isDetail" :style="{ 'text-align': item.align }" class="tdCol detail" @click="detail(row)">{{ row[item.field] }}</div>
+              <div class="tdCol" :style="{ 'text-align': item.align }" v-else>{{ row[item.field] }}</div>
             </template>
             
           </template>
@@ -102,8 +102,10 @@
       layoutPage:''  //分页组件布局
     },
     columns:[{
+      ellipsis:true/false //超出省略号表示
       title:''  //标题
       field：''  //字段名
+      align: left/center/right   //对齐方式
       width:''  //列宽
       fixed: true, left, right  // 固定列
       action： true/false 是否操作列
@@ -294,6 +296,9 @@ export default class ByTable extends VueViews {
     padding-top: 16px;
     justify-content: flex-end;
   }
+  .tdCol{
+    width: 100%;
+  }
 }
 .col-action{
   color: #0089ff;

src/components/productDialog/productDialog.vue

@@ -90,14 +90,15 @@ export default class ProductDialog extends Vue {
         },{
           span:6,
           label:'品牌',
-          prop:'brand_id',
+          prop:'brandId',
           component:'by-select',
           compConfig:{
             attr:{
               label:'name',
               value:'id',
               placeholder:'请选择品牌',
-              clearable:true
+              clearable:true,
+              requestFormat:'records'
             },
             request:{
               url:'/maindata/maindataMaterialBrand/page',
@@ -118,7 +119,8 @@ export default class ProductDialog extends Vue {
               label:'name',
               value:'id',
               placeholder:'请选择分类',
-              clearable:true
+              clearable:true,
+              requestFormat:'records'
             },
             request:{
               url:'/maindata/maindataMaterialCategory/page',
@@ -146,6 +148,10 @@ export default class ProductDialog extends Vue {
         checkbox:true
       },
       columns:[{
+        title:'编码',
+        field:'id',
+        width:100
+      },{
         title:'名称',
         field:'name',
         width:150
@@ -229,7 +235,6 @@ export default class ProductDialog extends Vue {
     if(this.$refs.view){
       data = (this.$refs.view as any).getSelectData()
     }
-    console.log(data);
     return data;
   }
   //显示弹窗

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

@@ -1,55 +1,69 @@
 <template>
   <vxe-modal v-model="value" id="addOrder" @show="show" width="70%" 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="baseform"></by-form>
-          </el-collapse-item>
-          <el-collapse-item title="买家信息" name="2">
-            <by-form :propConfig="config2" ref="infoform">
-              <template v-slot:slotField='{ value }'>
-                <div class="updateBuyer">
-                  <el-checkbox v-model="value.slotField">更新买家收货人信息</el-checkbox>
+    <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="baseform"></by-form>
+        </el-collapse-item>
+        <el-collapse-item title="买家信息" name="2" class="add-order-item">
+          <by-form :propConfig="config2" ref="infoform">
+            <template v-slot:slotField='{ value }'>
+              <div class="updateBuyer">
+                <el-checkbox v-model="value.slotField">更新买家收货人信息</el-checkbox>
+              </div>
+            </template>
+          </by-form>
+        </el-collapse-item>
+        <el-collapse-item title="商品订单" name="3" class="add-order-item">
+          <div class="addProductTool">
+            <by-tool :propConfig="toolConfig"></by-tool>
+          </div>
+          
+          <by-table :propConfig="tableConfig" ref="table">
+            <template v-slot:t_cont='{ row }'>
+              <div class="product-cont">
+                <div class="product-name">{{ row.name }}</div>
+                <div class="other-info">
+                  <span>{{ row.styleId }}</span>
+                  <span>{{ row.skuId }}</span>
                 </div>
-              </template>
-              <template v-slot:address='{ value }'>
-                地址
-              </template>
-            </by-form>
-          </el-collapse-item>
-          <el-collapse-item title="商品订单" name="3">
-            <div class="addProductTool">
-              <by-tool :propConfig="toolConfig"></by-tool>
-            </div>
-            
-            <by-table :propConfig="tableConfig" ref="table">
-              <template v-slot:slotField='{ row }'>插槽：{{ row.name }}</template>
-            </by-table>
-          </el-collapse-item>
-          <el-collapse-item title="订单支付情况" name="4">
-            <el-radio-group v-model="radioPay" @input="inputPay">
-              <el-radio :label="1">待付款</el-radio>
-              <el-radio :label="2">快速支付&已付款</el-radio>
-              <el-radio :label="3">手工添加支付信息</el-radio>
-            </el-radio-group>
-            <by-form v-if="radioPay == 3" :propConfig="payConfig" ref="payform"></by-form>
-          </el-collapse-item>
-          <el-collapse-item title="发票信息" name="5">
-            <by-form :propConfig="invoicesConfig" ref="invoicesform"></by-form>
-          </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>
+              </div>
+            </template>
+            <template v-slot:qty='{ row }'>
+              <el-input v-model="row.qty" placeholder="数量" class="number-input" type="number" @input="qtyChange($event, row)"></el-input>
+            </template>
+            <template v-slot:price='{ row }'>
+              <el-input v-model="row.price" placeholder="单价" class="number-input" type="number" @input="priceChange($event, row)"></el-input>
+            </template>
+          </by-table>
+        </el-collapse-item>
+        <el-collapse-item title="订单支付情况" name="4" class="add-order-item">
+          <el-radio-group v-model="radioPay" @input="inputPay" class="payType">
+            <el-radio :label="1">待付款</el-radio>
+            <el-radio :label="2">快速支付&已付款</el-radio>
+            <el-radio :label="3">手工添加支付信息</el-radio>
+          </el-radio-group>
+          <by-form v-if="radioPay == 3" :propConfig="payConfig" ref="payform"></by-form>
+        </el-collapse-item>
+        <el-collapse-item title="发票信息" name="5" class="add-order-item">
+          <by-form :propConfig="invoicesConfig" ref="invoicesform"></by-form>
+        </el-collapse-item>
+      </el-collapse>
+      <productDialog ref="product" @confirm="confirmProduct" />
+    </template>
+    <template #footer>
+      <div class="btn">
+        <el-button type="primary" size="small">确定并继续</el-button>
+        <el-button type="primary" size="small" @click="btn">确定</el-button>
+      </div>
+    </template>
+    
+  </vxe-modal>
+  
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@@ -57,6 +71,7 @@ import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 @Component
 export default class AddOrder extends Vue {
   value=false;
+  productData:Array<any>=[]
   userName:any='';//用户信息
   orderValue:any={}; //新增订单值
   radioPay=null;
@@ -224,7 +239,20 @@ export default class AddOrder extends Vue {
         label:'收货地址',
         // slot:true,
         prop:'address',
-        component:'by-area'
+        component:'by-area',
+        compConfig:{
+          attr:{
+            province:'receiverProvince', //省
+            provinceCode:'receiverProvinceCode', //省编码
+            city:'receiverCity',   //市
+            cityCode:'receiverCityCode',  //市编码
+            county:'receiverDistrict',  //县/区
+            countyCode:'receiverDistrictCode',   //县/区编码
+            townCode:'receiverTownCode',
+            town:'receiverTown',
+            // show:'county'
+          }
+        }
       }],
       [{
         span:24,
@@ -276,23 +304,38 @@ export default class AddOrder extends Vue {
   }
   tableConfig:any={
     attr:{
-      size:'mini',
+      size:'small',
       seq:true,
       align:'center',
       checkbox:true,
     },
     columns:[{
       title:'名称|款式编码|商品编码',
-      field:'id',
+      field:'t_cont',
+      slot:true,
       width:300
     },{
       title:'数量',
       field:'qty',
-      width:100
+      width:100,
+      slot:true,
+      // component:'by-input',
+      // compConfig:{
+      //   attr:{
+      //     type:'number'
+      //   }
+      // }
     },{
       title:'单价',
       field:'price',
-      width:100
+      width:100,
+      slot:true,
+      // component:'by-input',
+      // compConfig:{
+      //   attr:{
+      //     type:'number'
+      //   }
+      // }
     },{
       title:'原价',
       field:'basePrice',
@@ -325,7 +368,7 @@ export default class AddOrder extends Vue {
       {
         name: '新增商品', icon: 'el-icon-plus', event:{
           click:()=>{
-            console.log('新增123')
+            (this.$refs.product as any).setShow(true);
           }
         }
       },
@@ -604,14 +647,71 @@ export default class AddOrder extends Vue {
   }
   mounted(){
     this.userName = this.$store.getters.name;
-    console.log('用户信息',this.userName);
-
     
   }
   show(){
     (this.$refs.baseform as any).setValue({
       createBy:this.userName
-    })
+    });
+    
+  }
+  confirmProduct(data:Array<any>){
+    let nowData = (this.$refs.table as any).getValue();
+    let ids='';
+    if(data.length > 0){
+      for(const item of data){
+        let t = true;
+        for(const t_item of nowData){
+          if(item.id == t_item.skuId){
+            if(!ids){
+              ids = item.id
+            }else{
+              ids = ids + ',' + item.id
+            }
+            t = false;
+            break;
+          }
+        }
+        if(t){
+          let obj:any={};
+          obj.name = item.name; //商品名称
+          obj.skuId = item.id; //商品编码
+          obj.styleId = item.newNumber; //款式编码
+          obj.qty = 1;
+          obj.price = item.price;  //单价
+          obj.basePrice = item.basePrice; //原价
+          obj.amount = item.price;
+          obj.stock = item.stock;
+          nowData.push(obj)
+        }
+      }
+      console.log(nowData);
+      (this.$refs.table as any).setValue(nowData);
+      if(ids){
+        this.$alert('编码“'+ids+'”已添加！', '提示', {
+          confirmButtonText: '确定',
+          callback: action => {}
+        });
+      }
+    }
+  }
+  qtyChange(v:any,row:any){
+    if(v && row.price){
+      row.amount = v*row.price
+    }else{
+      row.amount = 0
+    }
+  }
+  priceChange(v:any,row:any){
+    if(v && row.qty){
+      row.amount = v*row.qty
+    }else{
+      row.amount = 0
+    }
+  }
+  btn(){
+    let value = (this.$refs.infoform as any).getValue();
+    console.log(value);
   }
 }
 </script>
@@ -629,6 +729,23 @@ export default class AddOrder extends Vue {
   width: 100%;
   padding-bottom: 8px;
 }
+.payType{
+  padding-bottom: 16px;
+}
+.product-cont{
+  width: 100%;
+  .product-name{
+    font-size: 14px;
+    padding-bottom: 4px;
+    color: #000;
+  }
+  .other-info{
+    font-size: 12px;
+    span{
+      padding: 0 8px;
+    }
+  }
+}
 </style>
 
 <style lang="scss">

src/views/oms/order/index.vue

@@ -511,7 +511,7 @@ export default class Order extends Vue {
     query(data).then((res:any) => {
       this.data = res.data.records;
       this.page.pageNo = res.data.pages;
-      this.page.pageSize = res.data.size;
+      // this.page.pageSize = res.data.size;
       this.page.total = res.data.total;
     }).catch((err:any) => {