佣金列表佣金详情页面2

src/api/ecw/customerCommissionInfo.js

@@ -48,7 +48,23 @@ export function exportCustomerCommissionInfoExcel(query) {
   return request({
     url: '/ecw/customer-commission-info/export-excel',
     method: 'get',
-    params: query,
+    query: query,
     responseType: 'blob'
   })
 }
+//商品类型列表
+export function itemTypeListApi(query){
+  return request({
+    url:'/ecw/product-attr/list',
+    method:'get',
+    query:query
+  })
+}
+//
+export  function customerDropDownList(query){
+  return request({
+    url:'/ecw/customer/select',
+    method:'get',
+    query,
+  })
+}

src/views/ecw/customerCommissionInfo/customSelectorsDictionary.vue

@@ -2,9 +2,9 @@
   <el-select v-if="options" v-model="selectVal" placeholder="请选择">
     <el-option
       v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value">
+      :key="item[valueKey]"
+      :label="item[labelKey]"
+      :value="item[valueKey]">
     </el-option>
   </el-select>
 </template>
@@ -13,8 +13,19 @@
 export default {
   name: "customSelectorsDictionary",
   props:{
-    options:Array,
-    value:String
+    options:{
+      type:Array,
+      default:()=>[]
+    },
+    value:String,
+    labelKey:{
+      type:String,
+      default:'label'
+    },
+    valueKey:{
+      type:String,
+      default: 'value',
+    },
   },
   data(){
     return{

src/views/ecw/customerCommissionInfo/darkServantAndProduct.vue

+<template>
+<el-form>
+  <el-form-item label="商品类型">
+    <div class="shanping-type">
+      <div class="tool">
+        <el-input placeholder="商品"></el-input>
+      </div>
+      <div class="box">
+        <div class="label">
+          商品类型
+        </div>
+        <div class="custom">
+          <custom-selectors-dictionary  label-key="attrName" value-key="id" :options="commodityType"></custom-selectors-dictionary>
+        </div>
+      </div>
+      <div class="box">
+        <div class="label">
+          佣金
+        </div>
+        <div class="custom">
+        <el-input></el-input>
+        </div>
+        <div class="custom">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
+        </div>
+        <div class="custom">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
+        </div>
+      </div>
+      <div>
+          <el-button type="primary">添加</el-button>
+      </div>
+    </div>
+  </el-form-item>
+</el-form>
+</template>
+
+<script>
+//暗涌加产品
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import customSelectorsDictionary from "@/views/ecw/customerCommissionInfo/customSelectorsDictionary";
+export default {
+  name: "darkServantAndProduct",
+  components:{
+    customSelectorsDictionary
+  },
+  props:{
+    commodityType:{
+      type:Array,
+      default:()=>[]
+    }
+  },
+  data(){
+    return{
+      DICT_TYPE,
+      getDictDatas,
+    }
+  },
+  mounted() {
+    console.log(this.commodityType,'commodityType')
+  },
+  watch:{
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shanping-type {
+  display: flex;
+
+  .tool {
+    width: 150px;
+  }
+  .box {
+    margin-left: 20px;
+    display: flex;
+    .label {
+      width: 80px;
+      vertical-align: middle;
+      font-size: 14px;
+      color: #606266;
+      font-weight: 700;
+    }
+    .custom {
+      width: 150px;
+      margin-right:10px;
+    }
+  }
+}
+</style>

src/views/ecw/customerCommissionInfo/darkServantAndRebate.vue

+<template>
+  <div>
+    <div class="column">
+       <div class="label">
+         佣金:
+       </div>
+      <div class="content">
+        <div class="item label">满</div>
+        <div class="item"><el-input></el-input></div>
+        <div class="item"> <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary></div>
+        <div class="item">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
+        </div>
+      </div>
+      <div class="content">
+        <div class="item label">返</div>
+        <div class="item"><el-input></el-input></div>
+        <div class="item"> <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary></div>
+        <div class="item">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
+        </div>
+      </div>
+      <el-button>添加</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//暗佣-达标返佣
+import customSelectorsDictionary from "@/views/ecw/customerCommissionInfo/customSelectorsDictionary";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+export default {
+  name: "darkServantAndRebate",
+  components:{
+    customSelectorsDictionary
+  },
+  data(){
+    return{
+      DICT_TYPE,
+      getDictDatas
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.column{
+  display: flex;
+  align-items: center;
+  .label{
+    width: 50px;
+    white-space: nowrap;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #606266;
+    font-weight: 700;
+  }
+}
+.content{
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  .item{
+    text-align: right;
+    width: 150px;
+    margin: 0 5px;
+  }
+  .label{
+    width: 50px;
+  }
+}
+</style>

src/views/ecw/customerCommissionInfo/mingServantAndDarkServant.vue

+<template>
+<div>
+  <div class="mingServantAndDarkServant">
+    <div class="box">
+      <div class="label">暗佣佣金：</div>
+      <div class="content">
+        <div class="item">
+          <el-input></el-input>
+        </div>
+        <div class="item">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
+        </div>
+        <div class="item">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
+        </div>
+      </div>
+    </div>
+     <div class="title">
+      <span class="label">成本价：</span>原价-暗佣佣金
+     </div>
+    <div class="box">
+      <div class="label">销售价上调：</div>
+      <div class="content">
+        <div class="item">
+          <el-input></el-input>
+        </div>
+        <div class="item">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
+        </div>
+        <div class="item">
+          <custom-selectors-dictionary :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
+        </div>
+      </div>
+    </div>
+    <div class="title">
+     <span class="label"> 实际佣金返点：</span>销售价-成本价
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+//暗佣+明佣
+import customSelectorsDictionary from "@/views/ecw/customerCommissionInfo/customSelectorsDictionary";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+export default {
+  name: "mingServantAndDarkServant",
+  components:{
+    customSelectorsDictionary
+  },
+  data(){
+    return{
+      getDictDatas,
+      DICT_TYPE
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.mingServantAndDarkServant{
+  margin-top: 10px;
+  .box{
+    display: flex;
+    align-items: center;
+    .label{
+      vertical-align: middle;
+      font-size: 14px;
+      color: #606266;
+      font-weight: 700;
+    }
+    .content{
+      display: flex;
+      align-items: center;
+      .item{
+        margin-right: 20px;
+      }
+    }
+  }
+  .title{
+    margin: 15px 0;
+    .label{
+      vertical-align: middle;
+      font-size: 14px;
+      color: #606266;
+      font-weight: 700;
+    }
+  }
+}
+</style>