Skip to content

C
clique-web
Commit 7f4c0fb2 by chenyu
Options

update: update

parent c3b8df93
Showing with 129 additions and 117 deletions
src/view/companyGroup/membershipSystem/memberGrade.vue
......@@ -6,57 +6,63 @@
<div class="attention-wrap">
<div class="title">
<div>会员等级根据从低到高的顺序，自上而下进行排序</div>
<div class="add-btn"><el-button type="primary" @click="addGrade">新增等级</el-button></div>
<!-- <div class="add-btn"><el-button type="primary" @click="addGrade">新增等级</el-button></div> -->
<div class="add-level">
<el-button @click="editSort" :disabled="!memberTableData.length">调整顺序</el-button>
<el-button type="primary" @click="addGrade">新增等级</el-button>
</div>
<div class="table-wrap">
<el-table :data="memberTableData" style="width: 100%">
<el-table-column prop="gradeName" label="会员等级名称"> </el-table-column>
<el-table-column prop="gradeCode" label="等级编码"> </el-table-column>
</div>
<el-table class="only-header-table">
<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',isEditSort?'isEditSort':'']" :data="memberTableData"
style="width: 100%" row-key="gradeId" v-loading="loading">
<el-table-column prop="gradeName" label="会员等级名称"/>
<el-table-column prop="gradeCode" label="等级编码"/>
<el-table-column prop="" label="等级类型">
<template slot-scope="scope">
{{ scope.row.gradeType == 1 ? '常规卡' : '特殊卡' }}
<template slot-scope="{row}">
{{ row.gradeType == 1 ? '常规卡' : '特殊卡' }}
</template>
</el-table-column>
<el-table-column prop="" label="移动">
<template slot-scope="scope">
<i :class="['icon-color', 'el-icon-upload2', scope.$index == 0 ? 'disable' : '']" @click="toUp(scope.$index, scope.row, memberTableData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-pre', scope.$index == 0 ? 'disable' : '']" @click="toPre(scope.$index, scope.row, memberTableData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-next', scope.$index == memberTableData.length - 1 ? 'disable' : '']" @click="toNext(scope.$index, scope.row, memberTableData)"></i>
<i :class="['icon-color', 'el-icon-download', scope.$index == memberTableData.length - 1 ? 'disable' : '']" @click="toBottom(scope.$index, scope.row, memberTableData)"></i>
<el-table-column prop="" label="操作">
<template slot-scope="{$index,row}">
<el-button @click="editGrade($index,row,memberTableData)" type="text" :disabled="isEditSort">编辑</el-button>
<delete-tip @confirm="delGrade($index,row,memberTableData)" tips="确认删除吗?">
<el-button type="text" :disabled="isEditSort">删除</el-button>
</delete-tip>
</template>
</el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-button @click="editGrade(scope.$index, scope.row, memberTableData)" type="text" size="small">
编辑
</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, memberTableData)">取消</el-button>
<el-button type="primary" size="mini" @click="delGrade(scope.$index, scope.row, memberTableData)">确定</el-button>
<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>
<el-button slot="reference" class="m-l-10" type="text">
删除
</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<!-- <vue-gic-footer></vue-gic-footer> -->
</div>
</template>
<script>
import topNavNew from 'components/nav/navNew';
import Sortable from 'sortablejs';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest, postRequest } from '@/api/api';
import { log } from '@/utils/index.js';
import { getRequest, postRequest,postJson } from '@/api/api';
// import { log } from '@/utils/index.js';
export default {
name: 'memberGrade',
......@@ -83,7 +89,11 @@ export default {
// 商户id
cliqueId: '',
cliqueName: '', //商户 name
memberTableData: []
memberTableData: [],
tableData: [],
isEditSort: false,
loading: false,
sortTable: null
};
},
mounted() {
......@@ -93,6 +103,16 @@ export default {
that.navpath[3].name = '编辑【' + that.cliqueName + '】会员等级';
that.getList();
sessionStorage.removeItem('enterpriseId');
this.rowDrop();
},
watch: {
tableData: {
handler (n, o){
this.memberTableData = JSON.parse(JSON.stringify(n));
},
deep: true,
immediate: true
}
},
methods: {
//获取列表
......@@ -109,7 +129,7 @@ export default {
resData.result.List.forEach(function(ele, index) {
ele.popVisible = false;
});
that.memberTableData = resData.result.List;
that.tableData = resData.result.List;
}
return;
......@@ -118,97 +138,47 @@ export default {
})
.catch(function(error) {});
},
// 置顶 先删除后追加首部
toUp(index, row, obj) {
let that = this;
if (index == 0) {
return;
}
log(index, row, obj);
let newTable = JSON.parse(JSON.stringify(that.memberTableData));
newTable.splice(index, 1);
newTable.unshift(row);
log(newTable);
// 保存设置
that.setSort(row.gradeId, 10, that.cliqueId);
that.memberTableData = newTable;
},
// 向上
toPre(index, row, obj) {
let that = this;
if (index == 0) {
return;
}
log(index, row, obj);
let newTable = JSON.parse(JSON.stringify(that.memberTableData));
let temp = {};
temp = newTable[index - 1];
newTable[index - 1] = row;
newTable[index] = temp;
// 保存设置
that.setSort(row.gradeId, 20, that.cliqueId);
that.memberTableData = newTable;
editSort() {
this.isEditSort = true;
this.sortTable.option('sort', true);
},
// 向下
toNext(index, row, obj) {
let that = this;
if (index == obj.length - 1) {
return;
}
log(index, row, obj);
let newTable = JSON.parse(JSON.stringify(that.memberTableData));
let temp = {};
temp = newTable[index + 1];
newTable[index + 1] = row;
newTable[index] = temp;
// 保存设置
that.setSort(row.gradeId, 30, that.cliqueId);
that.memberTableData = newTable;
},
//置底 先删除后追加尾部
toBottom(index, row, obj) {
let that = this;
if (index == obj.length - 1) {
return;
}
log(index, row, obj);
let newTable = JSON.parse(JSON.stringify(that.memberTableData));
newTable.splice(index, 1);
newTable.push(row);
// 保存设置
that.setSort(row.gradeId, 40, that.cliqueId);
that.memberTableData = newTable;
cancelEditSort() {
this.isEditSort = false;
this.sortTable.option('sort', false);
this.memberTableData = JSON.parse(JSON.stringify(this.tableData));
},
// 等级排序
setSort(gradeId, type, enterpriseId) {
let that = this;
let para = {
gradeId: gradeId,
sortType: type,
enterpriseId: enterpriseId
submitSort() {
this.loading = true;
this.isEditSort = false;
this.sortTable.option('sort', false);
let data = {
gradeIds: this.memberTableData.map(el => (el.gradeId)),
gradeType: -1
};
postRequest('/api-admin/sort-member-grade', para)
.then(res => {
postJson('/api-admin/sort-member-grade', data)
.then((res) => {
let resData = res.data;
if (resData.errorCode == 0) {
showMsg.showmsg('设置成功', 'success');
this.$message.success('设置成功');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
log(error);
that.$message.error({
duration: 1000,
message: error.message
}).finally(_ => {
this.loading = false;
});
},
// 行拖拽
rowDrop() {
// 此时找到的元素是要拖拽元素的父容器
const tbody = document.querySelector(`.sortable-table .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.memberTableData.splice(oldIndex, 1)[ 0 ];
that.memberTableData.splice(newIndex, 0, currRow);
}
});
},
......@@ -331,4 +301,46 @@ export default {
cursor: not-allowed;
}
}
/deep/.only-header-table.el-table {
.el-table__body-wrapper {
display: none;
}
}
/deep/.only-content-table.el-table {
.el-table__header-wrapper {
display: none;
}
&.isEditSort .el-table__row{
cursor: move;
}
}
.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;
}
}
.add-level {
width: 100%;
text-align: right;
}
/deep/.el-table__empty-text::before{
background: none;
}
</style>
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