Skip to content

C
clique-web
Commit 7f4c0fb2 by chenyu
Options

update: update

parent c3b8df93
Showing with 137 additions and 125 deletions
src/view/companyGroup/membershipSystem/memberGrade.vue
...@@ -6,44 +6,50 @@ ...@@ -6,44 +6,50 @@
<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>
<div class="table-wrap"> <el-table class="only-header-table">
<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-column label="操作" />
<template slot-scope="scope"> </el-table>
{{ scope.row.gradeType == 1 ? '常规卡' : '特殊卡' }} <div class="sort-btn-wrap" v-show="isEditSort">
</template> <p class="sort-btn-tip">拖拽表格上下移动，调整等级顺序</p>
</el-table-column> <el-button type="text" @click="cancelEditSort">取消</el-button>
<el-table-column prop="" label="移动"> <span class="sort-btn-line"></span>
<template slot-scope="scope"> <el-button type="text" @click="submitSort">保存</el-button>
<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>
...@@ -52,11 +58,11 @@ ...@@ -52,11 +58,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 } from '@/api/api'; import { getRequest, postRequest,postJson } from '@/api/api';
import { log } from '@/utils/index.js'; // import { log } from '@/utils/index.js';
export default { export default {
name: 'memberGrade', name: 'memberGrade',
...@@ -83,7 +89,11 @@ export default { ...@@ -83,7 +89,11 @@ export default {
// 商户id // 商户id
cliqueId: '', cliqueId: '',
cliqueName: '', //商户 name cliqueName: '', //商户 name
memberTableData: [] memberTableData: [],
tableData: [],
isEditSort: false,
loading: false,
sortTable: null
}; };
}, },
mounted() { mounted() {
...@@ -93,6 +103,16 @@ export default { ...@@ -93,6 +103,16 @@ 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: {
//获取列表 //获取列表
...@@ -109,7 +129,7 @@ export default { ...@@ -109,7 +129,7 @@ export default {
resData.result.List.forEach(function(ele, index) { resData.result.List.forEach(function(ele, index) {
ele.popVisible = false; ele.popVisible = false;
}); });
that.memberTableData = resData.result.List; that.tableData = resData.result.List;
} }
return; return;
...@@ -118,99 +138,49 @@ export default { ...@@ -118,99 +138,49 @@ export default {
}) })
.catch(function(error) {}); .catch(function(error) {});
}, },
// 置顶 先删除后追加首部 editSort() {
toUp(index, row, obj) { this.isEditSort = true;
let that = this; this.sortTable.option('sort', true);
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() {
toNext(index, row, obj) { this.isEditSort = false;
let that = this; this.sortTable.option('sort', false);
if (index == obj.length - 1) { this.memberTableData = JSON.parse(JSON.stringify(this.tableData));
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() {
toBottom(index, row, obj) { this.loading = true;
let that = this; this.isEditSort = false;
if (index == obj.length - 1) { this.sortTable.option('sort', false);
return; let data = {
} gradeIds: this.memberTableData.map(el => (el.gradeId)),
log(index, row, obj); gradeType: -1
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)
postRequest('/api-admin/sort-member-grade', para) .then((res) => {
.then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 0) { if (resData.errorCode == 0) {
showMsg.showmsg('设置成功', 'success'); this.$message.success('设置成功');
return; return;
} }
errMsg.errorMsg(resData); }).finally(_ => {
}) 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) {
...@@ -331,4 +301,46 @@ export default { ...@@ -331,4 +301,46 @@ 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