Skip to content

C
clique-web
Commit 1959878e by chenyu
Options

Revert "update: update" 

This reverts commit 7f4c0fb2.
parent 5efdf238
Showing with 125 additions and 137 deletions
src/view/companyGroup/membershipSystem/memberGrade.vue
...@@ -6,50 +6,44 @@ ...@@ -6,50 +6,44 @@
<div class="attention-wrap"> <div class="attention-wrap">
<div class="title"> <div class="title">
<div>会员等级根据从低到高的顺序，自上而下进行排序</div> <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> </div>
<el-table class="only-header-table"> <div class="table-wrap">
<el-table-column label="会员等级名称"/> <el-table :data="memberTableData" style="width: 100%">
<el-table-column label="等级编码" /> <el-table-column prop="gradeName" label="会员等级名称"> </el-table-column>
<el-table-column label="等级类型" /> <el-table-column prop="gradeCode" label="等级编码"> </el-table-column>
<el-table-column label="操作" /> <el-table-column prop="" label="等级类型">
</el-table> <template slot-scope="scope">
<div class="sort-btn-wrap" v-show="isEditSort"> {{ scope.row.gradeType == 1 ? '常规卡' : '特殊卡' }}
<p class="sort-btn-tip">拖拽表格上下移动，调整等级顺序</p> </template>
<el-button type="text" @click="cancelEditSort">取消</el-button> </el-table-column>
<span class="sort-btn-line"></span> <el-table-column prop="" label="移动">
<el-button type="text" @click="submitSort">保存</el-button> <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>
</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>
</div>
<el-button slot="reference" class="m-l-10" type="text">
删除
</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</div> </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="{row}">
{{ row.gradeType == 1 ? '常规卡' : '特殊卡' }}
</template>
</el-table-column>
<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>
<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> </div>
</div> </div>
</div> </div>
...@@ -58,11 +52,11 @@ ...@@ -58,11 +52,11 @@
</template> </template>
<script> <script>
import topNavNew from 'components/nav/navNew'; import topNavNew from 'components/nav/navNew';
import Sortable from 'sortablejs';
import showMsg from '@/common/js/showmsg'; import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
import { getRequest, postRequest,postJson } 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 {
name: 'memberGrade', name: 'memberGrade',
...@@ -89,11 +83,7 @@ export default { ...@@ -89,11 +83,7 @@ export default {
// 商户id // 商户id
cliqueId: '', cliqueId: '',
cliqueName: '', //商户 name cliqueName: '', //商户 name
memberTableData: [], memberTableData: []
tableData: [],
isEditSort: false,
loading: false,
sortTable: null
}; };
}, },
mounted() { mounted() {
...@@ -103,16 +93,6 @@ export default { ...@@ -103,16 +93,6 @@ export default {
that.navpath[3].name = '编辑【' + that.cliqueName + '】会员等级'; that.navpath[3].name = '编辑【' + that.cliqueName + '】会员等级';
that.getList(); that.getList();
sessionStorage.removeItem('enterpriseId'); sessionStorage.removeItem('enterpriseId');
this.rowDrop();
},
watch: {
tableData: {
handler (n, o){
this.memberTableData = JSON.parse(JSON.stringify(n));
},
deep: true,
immediate: true
}
}, },
methods: { methods: {
//获取列表 //获取列表
...@@ -129,7 +109,7 @@ export default { ...@@ -129,7 +109,7 @@ export default {
resData.result.List.forEach(function(ele, index) { resData.result.List.forEach(function(ele, index) {
ele.popVisible = false; ele.popVisible = false;
}); });
that.tableData = resData.result.List; that.memberTableData = resData.result.List;
} }
return; return;
...@@ -138,49 +118,99 @@ export default { ...@@ -138,49 +118,99 @@ export default {
}) })
.catch(function(error) {}); .catch(function(error) {});
}, },
editSort() { // 置顶 先删除后追加首部
this.isEditSort = true; toUp(index, row, obj) {
this.sortTable.option('sort', true); 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;
}, },
cancelEditSort() { // 向下
this.isEditSort = false; toNext(index, row, obj) {
this.sortTable.option('sort', false); let that = this;
this.memberTableData = JSON.parse(JSON.stringify(this.tableData)); 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;
}, },
submitSort() { //置底 先删除后追加尾部
this.loading = true; toBottom(index, row, obj) {
this.isEditSort = false; let that = this;
this.sortTable.option('sort', false); if (index == obj.length - 1) {
let data = { return;
gradeIds: this.memberTableData.map(el => (el.gradeId)), }
gradeType: -1 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;
},
// 等级排序
setSort(gradeId, type, enterpriseId) {
let that = this;
let para = {
gradeId: gradeId,
sortType: type,
enterpriseId: enterpriseId
}; };
postJson('/api-admin/sort-member-grade', data)
.then((res) => { postRequest('/api-admin/sort-member-grade', para)
.then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 0) { if (resData.errorCode == 0) {
this.$message.success('设置成功'); showMsg.showmsg('设置成功', 'success');
return; return;
} }
}).finally(_ => { errMsg.errorMsg(resData);
this.loading = false; })
.catch(function(error) {
log(error);
that.$message.error({
duration: 1000,
message: error.message
});
}); });
}, },
// 行拖拽
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);
}
});
},
// 编辑 // 编辑
editGrade(index, row, obj) { editGrade(index, row, obj) {
...@@ -301,46 +331,4 @@ export default { ...@@ -301,46 +331,4 @@ export default {
cursor: not-allowed; 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> </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