|
|
@@ -0,0 +1,400 @@
|
|
|
+<template>
|
|
|
+ <div style="padding: 20px;">
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <div style="padding: 0 0 10px;">
|
|
|
+ <el-button type="primary" size="mini" @click="handleAddRelationshipLevel">新增平台关系等级</el-button>
|
|
|
+ <el-button type="primary" size="mini" plain @click="handleSearch">查询</el-button>
|
|
|
+ <el-button type="info" size="mini" plain @click="handleClear">重置</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable" :data="tableData" border
|
|
|
+ :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" prop="levelName" label="等级名称" />
|
|
|
+ <el-table-column align="center" prop="levelNum" label="等级编号" />
|
|
|
+ <el-table-column align="center" label="等级图标" prop="levelLogo">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ v-if="scope.row.levelLogo" :src="scope.row.levelLogo" style="width:40px; height:40px" fit="cover"
|
|
|
+ :preview-src-list="[ scope.row.levelLogo ]"
|
|
|
+ />
|
|
|
+ <span v-else>--</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="levelReason" label="关系等级说明" />
|
|
|
+ <el-table-column align="center" width="120" label="是否开启自购分佣" prop="ifSelf">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag v-if="row.ifSelf === 1" type="success" effect="plain">是</el-tag>
|
|
|
+ <el-tag v-else-if="row.ifSelf === 0" type="info" effect="plain">否</el-tag>
|
|
|
+ <div v-else>--</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" width="120" label="是否勾选累计分销金额" prop="ifMoney">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag v-if="row.ifMoney === 1" type="success" effect="plain">是</el-tag>
|
|
|
+ <el-tag v-else-if="row.ifMoney === 0" type="info" effect="plain">否</el-tag>
|
|
|
+ <div v-else>--</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" width="120" label="是否购买指定商品" prop="ifProduct">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag v-if="row.ifProduct === 1" type="success" effect="plain">是</el-tag>
|
|
|
+ <el-tag v-else-if="row.ifProduct === 0" type="info" effect="plain">否</el-tag>
|
|
|
+ <div v-else>--</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" width="120" label="是否勾选客户" prop="ifCustomer">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag v-if="row.ifCustomer === 1" type="success" effect="plain">是</el-tag>
|
|
|
+ <el-tag v-else-if="row.ifCustomer === 0" type="info" effect="plain">否</el-tag>
|
|
|
+ <div v-else>--</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="conditionMoney" label="累计分销金额" />
|
|
|
+ <el-table-column align="center" prop="conditionInvitation" label="邀请下级满人数" />
|
|
|
+ <el-table-column align="center" prop="conditionProduct" label="指定商品" />
|
|
|
+ <el-table-column align="center" prop="conditionCustomer" label="客户满人数" />
|
|
|
+ <el-table-column align="center" prop="shopId" label="商家ID" />
|
|
|
+ <el-table-column align="center" prop="adminId" label="平台ID" />
|
|
|
+ <el-table-column align="center" prop="proportion" label="分佣金额" />
|
|
|
+ <el-table-column align="center" prop="directProportion" label="直接分佣比例" />
|
|
|
+ <el-table-column align="center" prop="indirectProportion" label="间接分佣比例" />
|
|
|
+ <el-table-column align="center" prop="directNum" label="直接分佣金额" />
|
|
|
+ <el-table-column align="center" prop="indirectNum" label="间接分佣金额" />
|
|
|
+ <el-table-column align="center" prop="manageArea" label="区域ID" />
|
|
|
+ <el-table-column align="center" label="操作" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <el-button type="text" @click="handleEditRelationshipLevel(scope.row)">编辑</el-button>
|
|
|
+ <!-- <el-button type="text" @click="handleDeleteRelationshipLevel(scope.row)">删除</el-button> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div>
|
|
|
+ <el-pagination
|
|
|
+ :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增或编辑表单 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="dialogStatus === 'create' ? '新增会员等级' : '修改会员等级'" :visible.sync="dialogFormVisible" width="800px" center
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-form ref="formData" :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>
|
|
|
+ <el-form-item label="等级编号" prop="levelNum">
|
|
|
+ <el-input v-model="formData.levelNum" type="number" placeholder="请输入等级编号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="等级图标" prop="levelLogo">
|
|
|
+ <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleIconSuccess">
|
|
|
+ <img v-if="formData.levelLogo" :src="formData.levelLogo" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
+ </el-upload>
|
|
|
+ <p style="line-height: 0px;color: #999999;">建议尺寸：100*100像素，jpg、png图片类型</p>
|
|
|
+ </el-form-item>
|
|
|
+ <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-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-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 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-form-item>
|
|
|
+ <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-form-item>
|
|
|
+ <el-form-item label="累计分销金额" prop="conditionMoney">
|
|
|
+ <el-input v-model="formData.conditionMoney" type="number" placeholder="请输入累计分销金额" />
|
|
|
+ </el-form-item>
|
|
|
+ <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-input v-model="formData.conditionProduct" placeholder="请输入指定商品（逗号隔开）" />
|
|
|
+ </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-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>
|
|
|
+ <el-form-item label="区域ID" prop="manageArea">
|
|
|
+ <el-input v-model="formData.manageArea" type="number" placeholder="请输入区域ID" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
|
|
|
+ <el-button v-if="dialogStatus == 'update'" type="primary" @click="updateData">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getByIdPlatformRelationshipLevel,
|
|
|
+ getAllPlatformRelationshipLevel,
|
|
|
+ savePlatformRelationshipLevel,
|
|
|
+ updatePlatformRelationshipLevel
|
|
|
+} from '@/api/relationshipChainManagement/relationshipLevel'
|
|
|
+import { uploadUrl } from '@/utils/request'
|
|
|
+export default {
|
|
|
+ name: 'RelationshipLevel',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listQuery: {
|
|
|
+ relationshipLevelId: '',
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ total: 1,
|
|
|
+ tableData: [],
|
|
|
+ currentPage: 1,
|
|
|
+ dialogStatus: '',
|
|
|
+ action: uploadUrl,
|
|
|
+ formData: {
|
|
|
+ relationshipLevelId: '',
|
|
|
+ levelName: '',
|
|
|
+ levelNum: '',
|
|
|
+ levelLogo: '',
|
|
|
+ levelReason: '',
|
|
|
+ ifSelf: '',
|
|
|
+ ifMoney: '',
|
|
|
+ ifProduct: '',
|
|
|
+ ifCustomer: '',
|
|
|
+ conditionMoney: '',
|
|
|
+ conditionInvitation: '',
|
|
|
+ conditionProduct: '',
|
|
|
+ conditionCustomer: '',
|
|
|
+ shopId: '',
|
|
|
+ adminId: '',
|
|
|
+ proportion: '',
|
|
|
+ directProportion: '',
|
|
|
+ indirectProportion: '',
|
|
|
+ directNum: '',
|
|
|
+ indirectNum: '',
|
|
|
+ manageArea: ''
|
|
|
+ },
|
|
|
+ dialogFormVisible: false,
|
|
|
+ rules: {
|
|
|
+ levelName: [ { required: true, message: '请输入等级名称', trigger: 'blur' } ],
|
|
|
+ levelNum: [ { required: true, message: '请输等级编号', trigger: 'blur' } ],
|
|
|
+ levelLogo: [ { required: true, message: '请输入会员成长值', trigger: 'blur' } ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化查询所有数据
|
|
|
+ async getList() {
|
|
|
+ const res = await getAllPlatformRelationshipLevel(this.listQuery)
|
|
|
+ this.tableData = res.data.list
|
|
|
+ this.total = res.data.total
|
|
|
+ },
|
|
|
+ handleIconSuccess(response) {
|
|
|
+ this.formData.levelLogo = response.data.url
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.listQuery.pageSize = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.listQuery.page = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ // 查询
|
|
|
+ handleSearch() {
|
|
|
+ this.total = 1
|
|
|
+ this.listQuery.page = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ // 清除
|
|
|
+ handleClear() {
|
|
|
+ this.listQuery = {
|
|
|
+ relationshipLevelId: '',
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ // 新增平台关系等级
|
|
|
+ handleAddRelationshipLevel() {
|
|
|
+ this.dialogStatus = 'create'
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ this.resetForm()
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.formData = {
|
|
|
+ relationshipLevelId: '',
|
|
|
+ levelName: '',
|
|
|
+ levelNum: '',
|
|
|
+ levelLogo: '',
|
|
|
+ levelReason: '',
|
|
|
+ ifSelf: '',
|
|
|
+ ifMoney: '',
|
|
|
+ ifProduct: '',
|
|
|
+ ifCustomer: '',
|
|
|
+ conditionMoney: '',
|
|
|
+ conditionInvitation: '',
|
|
|
+ conditionProduct: '',
|
|
|
+ conditionCustomer: '',
|
|
|
+ shopId: '',
|
|
|
+ adminId: '',
|
|
|
+ proportion: '',
|
|
|
+ directProportion: '',
|
|
|
+ indirectProportion: '',
|
|
|
+ directNum: '',
|
|
|
+ indirectNum: '',
|
|
|
+ manageArea: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 编辑平台关系等级
|
|
|
+ handleEditRelationshipLevel(row) {
|
|
|
+ this.resetForm()
|
|
|
+ getByIdPlatformRelationshipLevel({ relationshipLevelId: row.relationshipLevelId })
|
|
|
+ .then((res) => {
|
|
|
+ this.formData = res.data
|
|
|
+ })
|
|
|
+ this.dialogStatus = 'update'
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ },
|
|
|
+ // 删除平台关系等级
|
|
|
+ handleDeleteRelationshipLevel(row) {
|
|
|
+ this.$confirm('是否继续删除此平台关系等级?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ deletePlatformRelationshipLevel({ relationshipLevelId: row.relationshipLevelId })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === '') {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交平台关系等级
|
|
|
+ createData() {
|
|
|
+ this.$refs.dataForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ savePlatformRelationshipLevel(this.formData)
|
|
|
+ .then((response) => {
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.$message({
|
|
|
+ message: '新增成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ .catch((response) => {
|
|
|
+ this.$message({
|
|
|
+ message: '新增失败',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateData() {
|
|
|
+ this.$refs.dataForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ updatePlatformRelationshipLevel(this.formData)
|
|
|
+ .then(() => {
|
|
|
+ this.getList()
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.$message({
|
|
|
+ message: '修改成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch((response) => {
|
|
|
+ this.$message({
|
|
|
+ message: '修改失败',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less' scoped>
|
|
|
+@import url("../../../styles/elDialog.scss");
|
|
|
+.avatar-uploader {
|
|
|
+ /deep/ .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader {
|
|
|
+ /deep/ .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
zweiqin