6

src/views/relationshipChainManagement/relationshipLevel/index.vue

@@ -87,8 +87,9 @@
       :title="dialogStatus === 'create' ? '新增会员等级' : '修改会员等级'" :visible.sync="dialogFormVisible" width="800px" center
       :close-on-click-modal="false"
     >
+    <!-- ref能tm写错，你是真nb zwq -->
       <div>
-        <el-form ref="formData" :model="formData" label-width="140px" :rules="rules">
+        <el-form ref="dataForm" :model="formData" label-width="140px" :rules="rules">
           <el-form-item label="等级名称" prop="levelName">
             <el-input v-model="formData.levelName" maxlength="20" placeholder="请输入等级名称" />
           </el-form-item>
@@ -105,56 +106,85 @@
           <el-form-item label="关系等级说明" prop="levelReason">
             <el-input v-model="formData.levelReason" maxlength="200" type="textarea" placeholder="请输入关系等级说明" />
           </el-form-item>
-          <el-form-item label="是否开启自购分佣" prop="ifSelf">
+          <!-- <el-form-item label="是否开启自购分佣" prop="ifSelf">
             <el-radio-group v-model="formData.ifSelf">
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="是否勾选累计分销金额" prop="ifMoney">
+          <el-form-item label="是否勾选累计消费金额" prop="ifMoney">
             <el-radio-group v-model="formData.ifMoney">
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
             </el-radio-group>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="是否购买指定商品" prop="ifProduct">
             <el-radio-group v-model="formData.ifProduct">
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
             </el-radio-group>
+            <el-button v-if="formData.ifProduct == 1" size="small" style="margin-left: 20px;" type="primary" @click="showAddShoping = true">选择分销商品</el-button>
+            <!-- <el-input size="small" style="width: 260px;margin-left: 20px;"  v-if="formData.ifProduct == 1" v-model="formData.conditionProduct" placeholder="请选择指定商品" /> -->
+          </el-form-item>
+          <el-form-item label="是否开启邀请人数" prop="ifMoney">
+            <el-radio-group v-model="formData.ifMoney">
+              <el-radio :label="1">是</el-radio>
+              <el-radio :label="0">否</el-radio>
+            </el-radio-group>
+            <el-input size="small" style="width: 260px;margin-left: 20px;" v-if="formData.ifMoney == 1" v-model="formData.conditionInvitation" type="number" placeholder="请输入满足升级条件所需要的总人数" />
           </el-form-item>
-          <el-form-item label="是否勾选客户" prop="ifCustomer">
+          <el-form-item label="是否勾选团长客户" prop="ifCustomer">
             <el-radio-group v-model="formData.ifCustomer">
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
             </el-radio-group>
+             <el-input size="small" style="width: 260px;margin-left: 20px;" v-if="formData.ifCustomer == 1" v-model="formData.conditionCustomer" type="number" placeholder="满足升级条件的团长数" />
           </el-form-item>
           <el-form-item label="累计分销金额" prop="conditionMoney">
-            <el-input v-model="formData.conditionMoney" type="number" placeholder="请输入累计分销金额" />
+            <el-input style="width: 300px" v-model="formData.conditionMoney" type="number" placeholder="请输入累计分销金额" />
           </el-form-item>
-          <el-form-item label="邀请下级满人数" prop="conditionInvitation">
+          <!-- <el-form-item label="邀请下级满人数" prop="conditionInvitation">
             <el-input v-model="formData.conditionInvitation" type="number" placeholder="请输入邀请下级满人数" />
-          </el-form-item>
-          <el-form-item label="指定商品" prop="conditionProduct">
+          </el-form-item> -->
+          <!-- <el-form-item label="指定商品" prop="conditionProduct">
             <el-input v-model="formData.conditionProduct" placeholder="请输入指定商品（逗号隔开）" />
-          </el-form-item>
-          <el-form-item label="商家ID" prop="shopId">
+          </el-form-item> -->
+          <!-- <el-form-item label="商家ID" prop="shopId">
             <el-input v-model="formData.shopId" type="number" placeholder="请输入商家ID" />
           </el-form-item>
           <el-form-item label="平台ID" prop="adminId">
             <el-input v-model="formData.adminId" type="number" placeholder="请输入平台ID" />
+          </el-form-item> -->
+          <el-form-item label="分佣形式配置" prop="proportion">
+              <el-radio-group v-model="formData.proportion">
+                <el-radio :label="1">比例</el-radio>
+                <el-radio :label="2">金额</el-radio>
+              </el-radio-group>
+            <!-- <el-input v-model="formData.proportion" type="number" placeholder="请输入分佣金额" /> -->
           </el-form-item>
-          <el-form-item label="分佣金额" prop="proportion">
-            <el-input v-model="formData.proportion" type="number" placeholder="请输入分佣金额" />
-          </el-form-item>
-          <el-form-item label="直接分佣比例" prop="directProportion">
-            <el-input v-model="formData.directProportion" type="number" placeholder="请输入直接分佣比例（整数，最大99）" />
-          </el-form-item>
-          <el-form-item label="间接分佣金额" prop="indirectProportion">
-            <el-input v-model="formData.indirectProportion" type="number" placeholder="请输入间接分佣金额（整数，最大99）" />
-          </el-form-item>
+          <template v-if="formData.proportion == 1">
+            <el-form-item label="直接分佣比例 (%)" prop="directProportion">
+              <el-input-number :min="0" :max="99" v-model.number="formData.directProportion"></el-input-number>
+            </el-form-item>
+            <el-form-item label="间接分佣比例 (%)" prop="indirectProportion">
+              <el-input-number :min="0" :max="99" v-model.number="formData.indirectProportion"></el-input-number>
+              <!-- <el-input v-model="formData.indirectProportion" type="number" placeholder="请输入间接分佣金额（整数，最大99）" /> -->
+            </el-form-item>
+          </template>
+           <template v-if="formData.proportion == 2">
+                <!-- <div style="display: flex;"> -->
+                  <el-form-item label="直接分佣金额" prop="directNum">
+                    <el-input style="width: 300px" v-model.number="formData.directNum" type="number" placeholder="请输入直接分佣金额" />
+                  </el-form-item>
+                  <el-form-item label="间接分佣金额" prop="indirectNum">
+                    <el-input style="width: 300px" v-model.number="formData.indirectNum" type="number" placeholder="请输入间接分佣金额" />
+                  </el-form-item>
+                <!-- </div> -->
+          </template>
           <el-form-item label="区域ID" prop="manageArea">
-            <el-input v-model="formData.manageArea" type="number" placeholder="请输入区域ID" />
+            <el-cascader :props="areaData" ref="cascaderRef"
+                    @change="handleCascaderChange"></el-cascader>
+            <!-- <el-input v-model="formData.manageArea" type="number" placeholder="请选择区域ID" /> -->
           </el-form-item>
         </el-form>
       </div>
@@ -164,6 +194,59 @@
         <el-button v-if="dialogStatus == 'update'" type="primary" @click="updateData">确定</el-button>
       </span>
     </el-dialog>
+    <el-drawer
+      title="已选商品"
+      :visible.sync="showAddShoping"
+      :append-to-body="true"
+      size="50%"
+      :before-close="() => showAddShoping = false">
+      <!-- <el-button style="margin-left: 20px" size="small" type="primary" @click="innerDrawer = true">添加商品</el-button> -->
+      <div class="shopContainer">
+        <el-table
+          ref="multipleTable" :data="shopList" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+          max-height="620" @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="40px" />
+          <el-table-column label="产品主图" width="100" align="center">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.image" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="productName" label="产品名称" width="160" align="center" />
+          <el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip />
+          <el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip />
+        </el-table>
+        <div style="display: flex;justify-content: center;align-items: center;box-sizing: border-box;padding: 10px;">
+          <el-button type="primary" @click="showAddShoping = false">确定</el-button>
+        </div>
+      </div>
+      <!-- <el-drawer
+        title="选择商品"
+        :append-to-body="true"
+        size="40%"
+        :before-close="() => innerDrawer = false"
+        :visible.sync="innerDrawer">
+        <el-table
+          ref="multipleTable" :data="shopList" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+          max-height="620" @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="40px" />
+          <el-table-column label="产品主图" width="100" align="center">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.image" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="productName" label="产品名称" width="160" align="center" />
+          <el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip />
+          <el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip />
+        </el-table>
+        <div style="display: flex;justify-content: center;align-items: center;box-sizing: border-box;padding: 10px;">
+          <el-button type="primary">确定</el-button>
+        </div>
+      </el-drawer> -->
+    </el-drawer>
   </div>
 </template>
 
@@ -174,16 +257,53 @@ import {
   savePlatformRelationshipLevel,
   updatePlatformRelationshipLevel
 } from '@/api/relationshipChainManagement/relationshipLevel'
+import { getClassifyGetAll } from '@/api/commodity'
 import { uploadUrl } from '@/utils/request'
+import { getProvinceList, getChildAreaList } from '@/api/address'
+import { get } from 'js-cookie'
 export default {
   name: 'RelationshipLevel',
   data() {
     return {
+      showAddShoping: false, // 控制商品添加的展示
+      innerDrawer: false, // 子级抽屉的开关
+      areaData: {
+        lazy: true,
+        label: 'name',
+        value: 'id',
+        checkStrictly: true,
+        lazyLoad(node, resolve) {
+          const { level, value } = node;
+          if (level === 0) {
+            getProvinceList().then(res => {
+              resolve(res.data)
+            })
+          } else if (level != 0) {
+            getChildAreaList(value).then(res => {
+              resolve(res.data.map(item => {
+                item.leaf = level === 3
+                return item
+              }))
+            })
+          }
+        }
+      },
       listQuery: {
         relationshipLevelId: '',
         page: 1,
         pageSize: 10
       },
+      shopListQuery: {
+        page: 1,
+        pageSize: 100,
+        productId: '',
+        productName: '',
+        shelveState: '',
+        shopName: '',
+        classifyId: 1439
+      },
+      shopList: [],
+      shopTotal: 0,
       total: 1,
       tableData: [],
       currentPage: 1,
@@ -195,39 +315,65 @@ export default {
         levelNum: '',
         levelLogo: '',
         levelReason: '',
-        ifSelf: '',
-        ifMoney: '',
-        ifProduct: '',
-        ifCustomer: '',
+        ifSelf: 0,
+        ifMoney: 0,
+        ifProduct: 0,
+        // ifInvitation: 0,
+        ifCustomer: 0,
         conditionMoney: '',
         conditionInvitation: '',
         conditionProduct: '',
         conditionCustomer: '',
         shopId: '',
         adminId: '',
-        proportion: '',
-        directProportion: '',
-        indirectProportion: '',
-        directNum: '',
-        indirectNum: '',
+        proportion: 1,
+        directProportion: '0',
+        indirectProportion: '0',
+        directNum: 0,
+        indirectNum: 0,
         manageArea: ''
       },
       dialogFormVisible: false,
       rules: {
         levelName: [ { required: true, message: '请输入等级名称', trigger: 'blur' } ],
         levelNum: [ { required: true, message: '请输等级编号', trigger: 'blur' } ],
-        levelLogo: [ { required: true, message: '请输入会员成长值', trigger: 'blur' } ]
+        levelLogo: [ { required: true, message: '请输入会员成长值', trigger: 'blur' }],
+        directProportion: [ { required: true, message: '直接分佣比例不能为空或小于零', trigger: 'blur' } ],
+        indirectProportion: [ { required: true, message: '间接分佣比例不能为空或小于零', trigger: 'blur' } ],
+        directNum: [ { required: true, message: '直接分佣金额不能为空或小于零', trigger: 'blur' }, { type: 'number', message: '金额必须为数字值'} ],
+        indirectNum: [ { required: true, message: '间接分佣金额不能为空或小于零', trigger: 'blur' }, { type: 'number', message: '金额必须为数字值'} ]
       }
     }
   },
+  computed: {
+
+  },
   mounted() {
     this.getList()
+    this.getShopList()
   },
   methods: {
+    async getShopList() { // 查询可供选择的分销商品数据
+      const res = await getClassifyGetAll(this.shopListQuery)
+      this.shopList = res.data.list
+      this.shopTotal = res.data.total
+      // console.log(res);
+    },
+    handleSelectionChange(val) {
+      console.log(val);
+      let arr = []
+      val.forEach((item, index) => {
+        arr.push(item.productId)
+      })
+      this.formData.conditionProduct = arr.join()
+      // console.log(this.formData.conditionProduct);
+      // this.multipleSelection = val
+      // this.groupData.ids = []
+    },
     // 初始化查询所有数据
     async getList() {
       const res = await getAllPlatformRelationshipLevel(this.listQuery)
-      this.tableData = res.data.list
+      this.tableData = res.data.records
       this.total = res.data.total
     },
     handleIconSuccess(response) {
@@ -270,31 +416,36 @@ export default {
         levelNum: '',
         levelLogo: '',
         levelReason: '',
-        ifSelf: '',
-        ifMoney: '',
-        ifProduct: '',
-        ifCustomer: '',
+        ifSelf: 0,
+        ifMoney: 0,
+        ifProduct: 0,
+        ifCustomer: 0,
         conditionMoney: '',
         conditionInvitation: '',
         conditionProduct: '',
         conditionCustomer: '',
         shopId: '',
         adminId: '',
-        proportion: '',
-        directProportion: '',
-        indirectProportion: '',
-        directNum: '',
-        indirectNum: '',
+        proportion: 1,
+        directProportion: '0',
+        indirectProportion: '0',
+        directNum: 0,
+        indirectNum: 0,
         manageArea: ''
       }
     },
     // 编辑平台关系等级
     handleEditRelationshipLevel(row) {
       this.resetForm()
-      getByIdPlatformRelationshipLevel({ relationshipLevelId: row.relationshipLevelId })
-        .then((res) => {
-          this.formData = res.data
-        })
+      // getByIdPlatformRelationshipLevel({ relationshipLevelId: row.relationshipLevelId })
+      //   .then((res) => {
+      //     this.formData = res.data
+      //   })
+      for (const key in this.formData) {
+          this.formData[key] = row[key]
+      }
+      // this.formData.relationshipLevelId = row.relationshipLevelId
+      console.log(this.formData);
       this.dialogStatus = 'update'
       this.dialogFormVisible = true
     },
@@ -321,6 +472,8 @@ export default {
     // 提交平台关系等级
     createData() {
       this.$refs.dataForm.validate((valid) => {
+        // console.log(valid);
+        // console.log(this.formData);
         if (valid) {
           savePlatformRelationshipLevel(this.formData)
             .then((response) => {
@@ -360,12 +513,24 @@ export default {
             })
         }
       })
-    }
+    },
+        // 获取省数据
+    handleCascaderChange() {
+      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
+      // console.log(checkedNode);
+      const nodeData = checkedNode[0].data
+      this.formData.manageArea = nodeData.id
+    },
   }
 }
 </script>
 
 <style lang='less' scoped>
+.shopContainer {
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px;
+}
 @import url("../../../styles/elDialog.scss");
 .avatar-uploader {
 	/deep/ .el-upload {

vue.config.js

@@ -41,8 +41,8 @@ module.exports = {
     // before: require('./mock/mock-server.js'),
     proxy: {
       '/api': {
-        target: 'https://nsadminapi.tuanfengkeji.cn', // 测试
-        // target: 'http://192.168.0.91:9103', // 平台端
+        // target: 'https://nsadminapi.tuanfengkeji.cn', // 测试
+        target: 'http://192.168.0.91:9103', // 平台端
         // target: 'http://192.168.0.91:9003', // 商家端
         changeOrigin: true,
         pathRewrite: {