Skip to content

C
clique-web
Commit dd319e9d by chenyu
Options

update: update

parent 62527271
Showing with 356 additions and 120 deletions
src/view/companyGroup/membershipSystem/components/MemberCardTable.vue 0 → 100644
<template>
<div class="member-grade-card-table">
<div class="card-table-header">
<p class="card-table-line"></p>
<p class="card-table-title">{{type|typeFilter}}</p>
<p class="card-table-tip">{{type|typeTipFilter}}</p>
</div>
<div class="add-level">
<el-button @click="editSort" v-if="type==1">调整顺序</el-button>
<el-button type="primary" @click="addCard(type)">新增{{type|typeFilter}}
</el-button>
</div>
<el-table class="only-header-table">
<el-table-column label="等级" width="80" v-if="type==='1'"/>
<el-table-column label="卡面预览" width="260" />
<el-table-column label="等级编码" />
<el-table-column label="等级折扣" />
<el-table-column label="计算方式" />
<el-table-column label="升级条件" />
<el-table-column label="操作" />
</el-table>
<div class="sort-btn-wrap" v-show="isEditSort">
<p class="sort-btn-tip">拖拽表格上下移动，调整等级顺序</p>
<el-button type="text" @click="cancelEditSort">取消</el-button>
<span class="sort-btn-line"></span>
<el-button type="text" @click="submitSort">保存</el-button>
</div>
<el-table :class="['only-content-table',`sortable-table-type${type}`]" :data="list"
style="width: 100%" row-key="gradeId" v-loading="loading">
<el-table-column prop="" label="等级" width="80" v-if="type==='1'">
<template slot-scope="scope">
<div class="card-index-item">
<p>LV.{{scope.$index| indexFilter}}</p>
</div>
</template>
</el-table-column>
<el-table-column prop="" label="卡面预览" width="260">
<template slot-scope="{row}">
<div class="card-cell" :style="{background: row.cardColor}" :title="row.gradeName">
<img :src="logoImg" />
<span :style="{color: row.cardFontColor}">{{row.gradeName}}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="gradeCode" label="等级编码">
</el-table-column>
<el-table-column prop="discountRate" label="等级折扣">
<template slot-scope="{row}">{{row.discountRate||10}}折</template>
</el-table-column>
<el-table-column prop="gradeCode" label="计算方式">
<template
slot-scope="{row}">{{row.calculationMethod===1?'就低原则':row.calculationMethod===2?'折上折':''}}</template>
</el-table-column>
<el-table-column prop="upGradeCondition" label="升级条件">
</el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="{$index,row}">
<el-button @click="editCliqueLevel($index,row,list)" type="text" :disabled="isEditSort">编辑</el-button>
<delete-tip @confirm="delCliqueLevel($index,row,list)" tips="确认删除吗?">
<el-button v-show="list.length>1" type="text" :disabled="isEditSort">删除</el-button>
</delete-tip>
</template>
</el-table-column>
<template slot="empty">
<div class="no-data-wrap">
<div class="no-data-icon">
<img src="../../../../../static/img/no-data_icon.png" alt="">
</div>
<p>暂无数据</p>
</div>
</template>
</el-table>
</div>
</template>
<script>
import { postRequest, postJson } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import Sortable from 'sortablejs';
export default {
name: 'MemberCardTable',
props: {
tableData: {
typeL: Array,
default: () => {
return [];
}
},
logoImg: {
typeL: String,
default: ''
},
type: {
typeL: String,
default: '1' // type 1 常规卡 2 特殊卡 3 付费卡
},
},
watch: {
tableData: {
handler (n, o){
this.list = JSON.parse(JSON.stringify(n));
},
deep: true,
immediate: true
}
},
filters: {
indexFilter: (v) => {
return v < 9 ? `0${v + 1}` : `${v + 1}`;
},
typeFilter: (v) => {
switch (v) {
case '1': return '常规卡';
case '2': return '特殊卡';
default:return '';
}
},
typeTipFilter: (v) => {
switch (v) {
case '1': return '会员等级根据从低到高的顺序，自上而下进行排序';
case '2': return '特殊卡不支持会员等级升降级';
default:return '';
}
}
},
mounted() {
if (this.type==1) {
this.rowDrop();//行拖拽排序
}
},
data() {
return {
list: [],
loading: false,
isEditSort: false,
sortTable: null,
};
},
methods: {
// 编辑集团
editCliqueLevel(index, row, obj) {
this.$router.push({
path: '/editGroupGrade',
query: {
gradeId: row.gradeId
}
});
},
// 删除
delCliqueLevel(index, row, obj) {
let para = {
gradeId: row.gradeId,
enterpriseId: '',
};
let list=[].concat(obj)
postRequest('/api-admin/delete-member-grade', para)
.then((res) => {
let resData = res.data;
if (resData.errorCode == 0) {
showMsg.showmsg('删除成功', 'success');
list.splice(index, 1)
this.list = JSON.parse(JSON.stringify(list));
return;
}
errMsg.errorMsg(resData);
});
},
addCard(type) {
if (this.tableData.length===10) return this.$message.warning('每个卡类型最多可创建10张会员卡')
this.$router.push({
path: '/addGroupGrade',
query: {
type
}
});
},
editSort() {
if (!this.list.length) return this.$message.warning(`暂无${this.$options.filters.typeFilter(this.type)}！`);
this.isEditSort = true;
this.sortTable.option('sort', true);
},
cancelEditSort() {
this.isEditSort = false;
this.sortTable.option('sort', false);
this.list = JSON.parse(JSON.stringify(this.tableData));
},
submitSort() {
this.loading = true;
this.isEditSort = false;
this.sortTable.option('sort', false);
let para = {
gradeIds: this.list.map(el => (el.gradeId)),
gradeType: this.type
};
postJson('/api-admin/sort-member-grade', para)
.then((res) => {
let resData = res.data;
if (resData.errorCode == 0) {
this.$message.success('设置成功');
return;
}
}).finally(_ => {
this.loading = false;
});
},
// 行拖拽
rowDrop() {
// 此时找到的元素是要拖拽元素的父容器
const tbody = document.querySelector(`.sortable-table-type${this.type} .el-table__body-wrapper tbody`);
const that = this;
this.sortTable = new Sortable(tbody, {
// 指定父元素下可被拖拽的子元素
draggable: '.el-table__row',
sort: this.isEditSort,
onEnd({ newIndex, oldIndex }) {
const currRow = that.list.splice(oldIndex, 1)[ 0 ];
that.list.splice(newIndex, 0, currRow);
}
});
},
// 取消删除
cancelPop(index, row, obj) {
row.popVisible = false;
},
}
}
</script>
<style lang="less" scoped>
/deep/.only-header-table.el-table {
.el-table__body-wrapper {
display: none;
}
}
/deep/.only-content-table.el-table {
.el-table__header-wrapper {
display: none;
}
}
.sort-btn-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
background: #fcf6f1;
.sort-btn-tip {
margin-right: 20px;
font-size: 13px;
font-weight: 400;
color: #303133;
line-height: 18px;
cursor: default;
}
.sort-btn-line {
display: block;
width: 1px;
height: 13px;
margin: 0 10px;
background: #c4c7cd;
}
}
.card-cell {
display: flex;
align-items: center;
width: 120px;
height: 40px;
padding-left: 10px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
img {
width: 20px;
height: 20px;
border-radius: 50%;
}
span {
margin-left: 10px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
}
}
.add-level {
width: 100%;
margin-bottom: 24px;
text-align: right;
}
.card-table-header {
display: flex;
align-items: center;
width: 100%;
height: 40px;
margin-bottom: 20px;
background: #ffffff;
border-bottom: 1px solid #e4e7ed;
.card-table {
&-line {
width: 3px;
height: 14px;
margin-right: 8px;
background: #1890ff;
}
&-title {
margin-right: 20px;
font-size: 14px;
font-weight: 500;
color: #303133;
line-height: 20px;
}
&-tip {
font-size: 12px;
font-weight: 400;
color: #606266;
line-height: 17px;
}
}
}
.card-index-item {
width: 40px;
height: 20px;
line-height: 16px;
text-align: center;
color: #778aff;
// background: #778aff;
border: 2px solid #778aff;
border-radius: 8px;
p {
font-size: 12px;
font-weight: bold;
transform: scale(0.9);
}
}
/deep/.el-table__empty-text::before{
background: none;
}
</style>
<style lang="less">
.el-tooltip__popper.member-grade-edit-form-tooltip {
max-width: 400px;
line-height: 18px;
}
</style>
\ No newline at end of file
src/view/companyGroup/membershipSystem/memberCardSet.vue
...@@ -276,62 +276,9 @@ ...@@ -276,62 +276,9 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="add-level"><el-button type="primary" @click="changeRoute('/addGroupGrade')">新增等级</el-button></div> <div class="add-level"><el-button type="primary" @click="changeRoute('/addGroupGrade')">新增等级</el-button></div>
<el-table :data="cliqueTableData" style="width: 100%"> <!-- type 1 常规卡 2 特殊卡 3 付费卡(集团不展示) -->
<el-table-column prop="" label="卡面预览" width="260"> <member-card-table :tableData="generalCardList" type="1" :logoImg="logoImg"/>
<template slot-scope="scope"> <member-card-table :tableData="specialCardList" type="2" :logoImg="logoImg"/>
<div class="card-cell" :style="{ background: scope.row.cardColor }">
<img :src="logoImg" />
<span :style="{ color: scope.row.cardFontColor }">{{ scope.row.gradeName }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="gradeCode" label="等级编码"> </el-table-column>
<el-table-column prop="" label="等级类型">
<template slot-scope="scope">
{{ scope.row.gradeType == 1 ? '常规卡' : '特殊卡' }}
</template>
</el-table-column>
<el-table-column prop="" label="移动">
<template slot-scope="scope">
<!-- <div class="move-icon">
<i :class="['iconfont','sort-icon-all', 'icon-yd-icon-upload2', scope.$index==0? 'disable': '']" @click="toPre(scope.$index,scope.row,cliqueTableData)"></i>
<i :class="['sort-icon-all', 'sort-icon-down','iconfont','icon-yd-icon-upload2', scope.$index == cliqueTableData.length-1?'disable':'']" class="icon-font-down" @click="toNext(scope.$index,scope.row,cliqueTableData)"></i>
<i :class="['sort-icon-all', 'el-icon-upload2', 'sort-icon', scope.$index==0? 'disable':'']" @click="toUp(scope.$index,scope.row,cliqueTableData)"></i>
<i :class="['sort-icon-all', 'el-icon-download','sort-icon', scope.$index == cliqueTableData.length-1?'disable':'']" @click="toBottom(scope.$index,scope.row,cliqueTableData)"></i>
</div> -->
<i :class="['icon-color', 'el-icon-upload2', scope.$index == 0 ? 'disable' : '']" @click="toUp(scope.$index, scope.row, cliqueTableData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-pre', scope.$index == 0 ? 'disable' : '']" @click="toPre(scope.$index, scope.row, cliqueTableData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-next', scope.$index == cliqueTableData.length - 1 ? 'disable' : '']" @click="toNext(scope.$index, scope.row, cliqueTableData)"></i>
<i :class="['icon-color', 'el-icon-download', scope.$index == cliqueTableData.length - 1 ? 'disable' : '']" @click="toBottom(scope.$index, scope.row, cliqueTableData)"></i>
</template>
</el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<!-- <el-button
@click="editCliqueLevel(scope.$index,scope.row,cliqueTableData)"
type="text"
size="small">
编辑
</el-button> -->
<router-link :to="{ path: '/editGroupGrade', query: { gradeId: scope.row.gradeId } }" class="edit-btn el-button--text">编辑</router-link>
<!-- <el-button class="m-l-10"
@click="delCliqueLevel(scope.$index,scope.row,cliqueTableData)"
type="text">
删除
</el-button> -->
<el-popover placement="top" width="160" v-model="scope.row.popVisible">
<p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="cancelPop(scope.$index, scope.row, cliqueTableData)">取消</el-button>
<el-button type="primary" size="mini" @click="delCliqueLevel(scope.$index, scope.row, cliqueTableData)">确定</el-button>
</div>
<el-button slot="reference" class="m-l-10" type="text">
删除
</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </div>
<!-- end --> <!-- end -->
...@@ -346,6 +293,7 @@ import showMsg from '@/common/js/showmsg'; ...@@ -346,6 +293,7 @@ import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
import topNavNew from 'components/nav/navNew'; import topNavNew from 'components/nav/navNew';
import cardCate from 'components/memberShip/card-cate'; // 开卡策略 import cardCate from 'components/memberShip/card-cate'; // 开卡策略
import MemberCardTable from './components/MemberCardTable.vue';
import { getRequest, postRequest } from '@/api/api'; import { getRequest, postRequest } from '@/api/api';
import { log } from '@/utils/index.js'; import { log } from '@/utils/index.js';
export default { export default {
...@@ -411,7 +359,8 @@ export default { ...@@ -411,7 +359,8 @@ export default {
gradeUpModelSyncchange: false, // 单商户独立计算下是否关联升级 1是 0否 (集团) gradeUpModelSyncchange: false, // 单商户独立计算下是否关联升级 1是 0否 (集团)
gradeUpModel: '0' // 等级升级模式 0单商户独立计算 1跨商户联合计算 (集团参数) gradeUpModel: '0' // 等级升级模式 0单商户独立计算 1跨商户联合计算 (集团参数)
}, },
cliqueTableData: [], generalCardList: [],
specialCardList: [],
logoImg: '', //企业logo logoImg: '', //企业logo
popVisible: false, //表格中删除 popVisible: false, //表格中删除
...@@ -609,63 +558,6 @@ export default { ...@@ -609,63 +558,6 @@ export default {
}); });
}, },
// 置顶 先删除后追加首部
toUp(index, row, obj) {
let that = this;
if (index == 0) {
return;
}
let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
newTable.splice(index, 1);
newTable.unshift(row);
// 保存设置
that.setSort(row.gradeId, 10);
that.cliqueTableData = newTable;
},
// 向上
toPre(index, row, obj) {
let that = this;
if (index == 0) {
return;
}
let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
let temp = {};
temp = newTable[index - 1];
newTable[index - 1] = row;
newTable[index] = temp;
// 保存设置
that.setSort(row.gradeId, 20);
that.cliqueTableData = newTable;
},
// 向下
toNext(index, row, obj) {
let that = this;
if (index == obj.length - 1) {
return;
}
let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
let temp = {};
temp = newTable[index + 1];
newTable[index + 1] = row;
newTable[index] = temp;
// 保存设置
that.setSort(row.gradeId, 30);
that.cliqueTableData = newTable;
},
//置底 先删除后追加尾部
toBottom(index, row, obj) {
let that = this;
if (index == obj.length - 1) {
return;
}
let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
newTable.splice(index, 1);
newTable.push(row);
// 保存设置
that.setSort(row.gradeId, 40);
that.cliqueTableData = newTable;
},
// 等级排序 // 等级排序
setSort(gradeId, type, enterpriseId) { setSort(gradeId, type, enterpriseId) {
let para = { let para = {
...@@ -733,12 +625,8 @@ export default { ...@@ -733,12 +625,8 @@ export default {
// 卡面 // 卡面
that.logoImg = resData.result.logoImg; that.logoImg = resData.result.logoImg;
if (!!resData.result.List && !!resData.result.List.length) { that.generalCardList = resData.result.generalCardList||[];
resData.result.List.forEach(function(ele, index) { that.specialCardList = resData.result.specialCardList||[];
ele.popVisible = false;
});
that.cliqueTableData = resData.result.List;
}
return; return;
} }
...@@ -807,6 +695,7 @@ export default { ...@@ -807,6 +695,7 @@ export default {
} }
}, },
components: { components: {
MemberCardTable,
topNavNew, topNavNew,
cardCate cardCate
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment