Skip to content

H
haoban-4
Commit 35dc7bcc by 无尘
Options

feat: 增加数据维度

parent 25cfdef3
Showing with 821 additions and 163 deletions
package.json
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"core-js": "^2.6.5", "core-js": "^2.6.5",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"sass": "^1.26.10", "sass": "^1.26.10",
"sortablejs": "^1.10.2",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.0.3", "vue-router": "^3.0.3",
"vuex": "^3.0.1" "vuex": "^3.0.1"
......
src/api/my-customer-app.js
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-08-27 09:29:13 * @Date: 2020-08-27 09:29:13
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-28 17:21:27 * @LastEditTime: 2020-09-01 11:41:14
*/ */
import getFetch from './get-fetch.js'; import getFetch from './get-fetch.js';
...@@ -82,7 +82,17 @@ let api = { ...@@ -82,7 +82,17 @@ let api = {
useIntercept: false useIntercept: false
}, },
// 导购标签 // 导购标签
getTagClassify: '', // 获取导购标签分类
addClassify: '', // 新增分类
delClassify: {
// 删除分类
url: '/',
method: 'post',
useFormData: true,
useIntercept: false
},
getClerkTag: '', // 获取导购标签 getClerkTag: '', // 获取导购标签
addClerkTag: '', // 新增导购标签
delClerkTag: { delClerkTag: {
// 删除导购标签 // 删除导购标签
url: '/', url: '/',
......
src/components/app/my-customer/edit-tag-dialog.vue 0 → 100644
<!--
* @Descripttion: 编辑标签
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-09-01 17:16:25
* @LastEditors: 无尘
* @LastEditTime: 2020-09-02 09:25:44
-->
<!--
<edit-tag-dialog :edit-row="editRow" @closeTag="closeTag"></edit-tag-dialog>
import editTagDialog from '@/components/app/my-customer/edit-tag-dialog.vue';
-->
<template>
<el-dialog :title="form.tagId ? '编辑标签' : '新建标签'" width="600px" :visible.sync="editVisible" :before-close="handleClose">
<common-alert-tip :width="'476px'" :tip-content="tipContent"></common-alert-tip>
<el-form :model="form" :rules="rules" ref="tagForm" label-width="110px">
<el-form-item label="标签名称" prop="tagName">
<limit-input
:input-width="440"
:input-value.sync="form.tagName"
:holder="'请输入标签名称'"
:get-by-type="'word'"
:max-length="10">
</limit-input>
</el-form-item>
<el-form-item label="所属分类" prop="classifyId">
<el-select v-model="form.classifyId" placeholder="请选择">
<el-option
v-for="item in classOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="标签值" prop="tagVal">
<el-tag
:key="index+'tag'"
v-for="(item, index) in form.tagVal"
closable
:disable-transitions="false"
@close="handleDel(index)">
{{item}}
</el-tag>
<div>
<el-input
class="input-new-tag"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm">
</el-input>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" :loading="loadingBtn" @click="submit('tagForm')">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import commonAlertTip from '@/components/common/common-alert-tip.vue';
import { _debounce, emojiToStr } from '@/common/js/public.js';
import showMsg from '@/common/js/showmsg.js';
import api from '@/api/my-customer-app.js';
const { addClerkTag } = api;
export default {
name: 'TagClassifyDialog',
components: {
limitInput,
commonAlertTip
},
props: {
editRow: {
type: Object,
default() {
return {
tagId: '',
tagName: '',
classifyId: '',
tagVal: []
};
}
}
},
data() {
return {
tipContent: '在好办新建的标签会在GIC虫洞派应用中也会同步创建并消耗license',
classOptions: [],
form: {
tagId: '',
tagName: '',
classifyId: '',
tagVal: []
},
rules: {
tagName: [
{ required: true, message: '请输入标签名称', trigger: 'blur' },
],
classifyId: [
{ required: true, message: '请选择所属分类', trigger: 'change' }
],
tagVal: [
{ type: 'array', required: true, message: '请添加标签值', trigger: 'change' }
],
},
inputValue: '',
editVisible: true,
loadingBtn: false
};
},
// 生命周期 - 挂载完成（访问DOM元素）
mounted() {
const that = this;
if (Object.keys(that.editRow).length) {
that.form = JSON.parse(JSON.stringify(that.editRow));
}
},
// methods
methods: {
/**
* @description: 标签操作
* @param {Number} index
* @author: 无尘
*/
handleDel(index) {
this.form.tagVal.splice(index, 1);
},
handleInputConfirm() {
const that = this;
let inputValue = emojiToStr(that.inputValue);
if (inputValue) {
that.form.tagVal.push(inputValue);
}
that.inputValue = '';
},
/**
* 关闭弹窗
*/
cancel() {
const that = this;
that.$emit('closeClassify', 'close');
},
handleClose() {
const that = this;
that.tableData = [];
that.$emit('closeClassify', 'close');
},
/**
* 确定保存
* @param {String} formName
* @returns {Boolean}
*/
submit: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.postSave();
}
});
}, 300),
postSave() {
const that = this;
that.loadBtn = true;
const param = {
tagId: that.form.tagId,
tagName: emojiToStr(that.form.tagName),
classifyId: that.form.classifyId
};
addClerkTag(param)
.then(res => {
that.loadBtn = false;
if (res.code == '0000') {
showMsg.showmsg('操作成功', 'success');
that.$refs['tagForm'].resetFields();
that.$emit('closeClassify', that.form.classifyName);
}else {
showMsg.showmsg(res.message || '未知错误', 'warning');
}
})
.catch(error => {
that.loadBtn = false;
});
}
},
watch: {
editRow(val) {
const that = this;
if (Object.keys(val).length) {
that.form = JSON.parse(JSON.stringify(val));
}
}
}
};
</script>
<style lang='less' scoped>
</style>
src/components/app/my-customer/tag-classify-dialog.vue 0 → 100644
<!--
* @Descripttion: 导购标签编辑
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-09-01 13:53:59
* @LastEditors: 无尘
* @LastEditTime: 2020-09-01 17:23:01
-->
<!--
<tag-classify-dialog :edit-row="editRow" @closeClassify="closeClassify"></tag-classify-dialog>
import tagClassifyDialog from '@/components/app/my-customer/tag-classify-dialog.vue';
-->
<template>
<el-dialog :title="form.classifyId ? '编辑分类' : '新建分类'" width="600px" :visible.sync="editVisible" :before-close="handleClose">
<el-form :model="form" :rules="rules" ref="tagForm" label-width="110px">
<el-form-item label="分类名称" prop="classifyName">
<limit-input
:input-width="440"
:input-value.sync="form.classifyName"
:holder="'请输入分类名称'"
:get-by-type="'word'"
:max-length="10">
</limit-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" :loading="loadingBtn" @click="submit('tagForm')">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { _debounce, emojiToStr } from '@/common/js/public.js';
import showMsg from '@/common/js/showmsg.js';
import api from '@/api/my-customer-app.js';
const { addClassify } = api;
export default {
name: 'TagClassifyDialog',
components: {
limitInput
},
props: {
editRow: {
type: Object,
default() {
return {
classifyId: '',
classifyName: ''
};
}
}
},
data() {
return {
form: {
classifyId: '',
classifyName: ''
},
rules: {
classifyName: [
{ required: true, message: '请输入分类名称', trigger: 'blur' },
]
},
editVisible: true,
loadingBtn: false
};
},
// 生命周期 - 挂载完成（访问DOM元素）
mounted() {
const that = this;
if (Object.keys(that.editRow).length) {
that.form = JSON.parse(JSON.stringify(that.editRow));
}
},
// methods
methods: {
/**
* 关闭
*/
cancel() {
const that = this;
that.$emit('closeClassify', 'close');
},
handleClose() {
const that = this;
that.tableData = [];
that.$emit('closeClassify', 'close');
},
/**
* 确定保存
* @param {String} formName
* @returns {Boolean}
*/
submit: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.postSave();
}
});
}, 300),
postSave() {
const that = this;
that.loadBtn = true;
const param = {
classifyId: that.form.classifyId,
classifyName: emojiToStr(that.form.classifyName)
};
addClassify(param)
.then(res => {
that.loadBtn = false;
if (res.code == '0000') {
showMsg.showmsg('操作成功', 'success');
that.$refs['tagForm'].resetFields();
that.$emit('closeClassify', that.form.classifyName);
}else {
showMsg.showmsg(res.message || '未知错误', 'warning');
}
})
.catch(error => {
that.loadBtn = false;
});
}
},
watch: {
editRow(val) {
const that = this;
if (Object.keys(val).length) {
that.form = JSON.parse(JSON.stringify(val));
}
}
}
};
</script>
<style lang='less' scoped>
</style>
src/components/app/my-customer/tag-classify-list.vue 0 → 100644
<!--
* @Descripttion: 导购标签分类列表
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-09-01 11:09:16
* @LastEditors: 无尘
* @LastEditTime: 2020-09-02 09:27:14
-->
<!--
<tag-classify-list :brand-id="brandId" @refreshClassify="refreshClassify"></tag-classify-list>
import tagClassifyList from '@/components/app/my-customer/tag-classify-list.vue';
-->
<template>
<div>
<ul class="tag-classify-body">
<li :class="['tag-classify-item', { active: currentClassifyId == item.classifyId }]" v-for="(item, index) in tagList" :key="item.classifyId+index" @click="changeClassify(index, item)">
<span class="tag-classify-name">{{ item.classifyName }}</span>
<el-dropdown placement="bottom-start">
<i class="iconfont icongengduo edit-icon"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.stop="toEditClassify(index, item)">编辑</el-dropdown-item>
<el-dropdown-item v-if="item.hasChild" @click.stop="toDelClassify(index, item)">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
<li v-if="tagList.length == 0" class="no-data" >暂无数据</li>
</ul>
</div>
</template>
<script>
import showMsg from '@/common/js/showmsg.js';
import api from '@/api/my-customer-app.js';
const { delClassify } = api;
export default {
name: 'TagClassify',
props: {
tagList: {
type: Array,
default: () => []
},
currentClassifyId: {
type: String,
default: ''
}
},
data() {
return {
};
},
methods: {
/**
* @description: 选择分类
* @param {Number} index
* @param {Object} row
* @author: 无尘
*/
changeClassify(index, row) {
this.$emit('changeClass', row);
},
/**
* @description: 编辑分类
* @param {Number} index
* @param {Object} row
* @author: 无尘
*/
toEditClassify(index, row) {
this.$emit('edit-role', row);
},
/**
* @description: 删除分类
* @param {Number} index
* @param {Object} row
* @author: 无尘
*/
toDelClassify(index, row) {
const that = this;
that
.$confirm('是否要删除选中的标签分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.delTagData(row.classifyId);
})
.catch(() => {});
},
delTagData(classifyId) {
const that = this;
const para = { classifyId };
delClassify(para)
.then(res => {
that.$emit('refreshClassify');
if (res.code == '0000') {
showMsg.showmsg('删除成功', 'success');
}else {
showMsg.showmsg(res.message || '接口异常', 'warning');
}
})
.catch(function(error) {
});
},
}
};
</script>
<style lang="less" scoped>
.tag-classify-body {
.tag-classify-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px 5px 20px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: @gray02;
cursor: pointer;
&.active {
color: @blue;
background-color: rgba(47,84,235,0.05);;
}
&:hover {
color: @blue;
background-color: rgba(47,84,235,0.05);;
.edit-icon {
opacity: 1;
color: @blue;
background-color: rgba(47,84,235,0.09);
}
}
.edit-icon {
padding: 4px;
opacity: 0;
font-size: 12px;
}
.tag-classify-name {
display: block;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.no-data {
padding: 10px 0 40px 0;
text-align: center;
color: @gray03;
}
}
</style>
src/components/limit-input-blur.vue
...@@ -4,18 +4,18 @@ ...@@ -4,18 +4,18 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-07-29 20:00:00 * @Date: 2019-07-29 20:00:00
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-21 10:29:53 * @LastEditTime: 2020-09-01 13:59:40
--> -->
<!-- <!--
限制输入框组件 限制输入框组件
<limitInput <limitInput
:inputWidth="500" :input-width="500"
:limitClass="'limit-color'" :limit-class="'limit-color'"
:disflag='!childItem.fieldEdited' :disflag='!childItem.fieldEdited'
:inputValue.sync="ruleForm.addressDetail" :input-value.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'" :holder="'请输入详细地址'"
:getByType="'word'" :get-by-type="'word'"
:maxLength="40"> :max-length="40">
</limitInput> </limitInput>
--> -->
<template> <template>
......
src/components/limit-input.vue
...@@ -4,19 +4,20 @@ ...@@ -4,19 +4,20 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2018-12-06 13:44:22 * @Date: 2018-12-06 13:44:22
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-21 10:30:06 * @LastEditTime: 2020-09-01 14:01:07
--> -->
<!-- <!--
限制输入框组件 限制输入框组件
<limitInput <limitInput
:inputWidth="500" :input-width="500"
:limitClass="'limit-color'" :limit-class="'limit-color'"
:disflag='!childItem.fieldEdited' :disflag='!childItem.fieldEdited'
:inputValue.sync="ruleForm.addressDetail" :input-value.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'" :holder="'请输入详细地址'"
:getByType="'word'" :get-by-type="'word'"
:maxLength="40"> :max-length="40">
</limitInput> </limitInput>
import limitInput from '@/components/limit-input.vue';
--> -->
<template> <template>
<div :class="['input-line-cell', limitClass]" :style="{ width: inputWidth + 'px' }"> <div :class="['input-line-cell', limitClass]" :style="{ width: inputWidth + 'px' }">
......
src/components/limit-textarea.vue
...@@ -4,17 +4,17 @@ ...@@ -4,17 +4,17 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2018-12-06 17:25:22 * @Date: 2018-12-06 17:25:22
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-21 10:33:05 * @LastEditTime: 2020-09-01 14:00:39
--> -->
<!-- <!--
限制文本框组件 限制文本框组件
<limit-textarea <limit-textarea
:inputWidth="500" :input-width="500"
:inputValue.sync="ruleForm.addressDetail" :input-value.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'" :holder="'请输入详细地址'"
:getByType="'word'" :get-by-type="'word'"
:disinput="" :disinput=""
:maxLength="40"> :max-length="40">
</limit-textarea> </limit-textarea>
--> -->
<template> <template>
......
src/views/apps/customer-app/clerk-tag.vue
...@@ -4,6 +4,210 @@ ...@@ -4,6 +4,210 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-08-28 16:51:22 * @Date: 2020-08-28 16:51:22
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-28 16:52:52 * @LastEditTime: 2020-09-02 09:23:02
--> -->
<template>
<div class="common-app-right">
<div class="clerk-tag-body flex">
<div class="clerk-tag-left border-box">
<div class="clerk-tag-add">
<el-button icon="el-icon-plus">新建分类</el-button>
</div>
</div>
<div class="clerk-tag-right p-20 border-box">
<div class="clerk-tag-search">
<div class="flex flex-space-between">
<div><el-input placeholder="请输入标签名称" maxlength="50" v-model="searchVal" style="width: 298px;" prefix-icon="el-icon-search" @keyup.native="value => toInput(value)" clearable @clear="clearInput"></el-input></div>
<div><el-button type="primary">新建标签</el-button></div>
</div>
</div>
<div>
<el-table
:data="tagsData"
style="width: 100%">
<el-table-column prop="" label="" width="100" class-name="move-row-cell">
<template>
<span class="font-22 iconfont icontuozhuaiopen color-c4c6cf" style="cursor: move;"></span>
</template>
</el-table-column>
<el-table-column
prop=""
label="标签名称"
show-overflow-tooltip>
<template slot-scope="scope">{{scope.row.name || '--'}}</template>
</el-table-column>
<el-table-column
prop=""
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="toEditTag(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" @click="toEditVisiable(scope.$index, scope.row)">编辑可见范围</el-button>
<el-button type="text" @click="toDelTag(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import fetch from '@/api/my-customer-app.js';
const { getTagClassify, getClerkTag, delClerkTag } = fetch;
import { _debounce } from '@/common/js/public.js';
import showMsg from '@/common/js/showmsg.js';
export default {
name: 'ClerkTag',
components: {},
data() {
return {
currentClassify: '',
tagsClassifyData: [],
tagsData: [],
showTagDialog: false,
showTagVisiable: false
};
},
// 生命周期 - 挂载完成（访问DOM元素）
mounted() {
const that = this;
that.getClassifyList();
},
// methods
methods: {
/**
* 编辑标签
* @param {Number} index
* @param {Object} row
*/
toEditTag(index, row) {
const that = this;
that.showTagDialog = true;
},
/**
* 编辑可见范围
* @param {Number} index
* @param {Object} row
*/
toEditVisiable(index, row) {
const that = this;
that.showTagVisiable = true;
},
/**
* 编辑后刷新数据
*/
refreshTagData() {
const that = this;
that.getTableList();
},
/**
* 删除标签
* @param {Number} index
* @param {Object} row
*/
toDelTag(index, row) {
const that = this;
that
.$confirm('是否要删除选中的标签?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.delTagData(row.tagId);
})
.catch(() => {});
},
delTagData(tagId) {
const that = this;
const para = { tagId };
delClerkTag(para)
.then(res => {
that.getTableList();
if (res.code == '0000') {
showMsg.showmsg('删除成功', 'success');
}else {
showMsg.showmsg(res.message || '接口异常', 'warning');
}
})
.catch(function(error) {
});
},
/**
* 搜索输入
*/
toInput: _debounce(function() {
const that = this;
that.getTableList();
}, 500),
/**
* 搜索清除
*/
clearInput() {
const that = this;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
that.loading = true;
const para = {};
getClerkTag(para)
.then(res => {
that.tagsData = res.result || [];
})
.catch(function(error) {
});
},
/**
* 获取分类数据
*/
getClassifyList() {
const that = this;
that.loading = true;
const para = {};
getTagClassify(para)
.then(res => {
that.tagsClassifyData = res.result || [];
if (res.result && res.result.length) {
that.currentClassify = res.result[0].classifyId;
that.getTableList();
}
})
.catch(function(error) {
});
}
},
watch: {}
};
</script>
<style lang='less' scoped>
.clerk-tag-body {
.clerk-tag-left {
position: relative;
width: 190px;
min-width: 190px;
max-width: 190px;
padding: 30px 0 0 0;
.clerk-tag-add {
.el-button {
border-style: dashed;
}
}
}
.clerk-tag-right {
position: relative;
min-width: calc(100% - 190px);
min-height: calc(100vh - 94px);
border-left: 1px solid #e4e7ed;
}
}
</style>
src/views/apps/customer-app/customer-data-set.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-08-27 10:16:37 * @Date: 2020-08-27 10:16:37
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-28 15:02:52 * @LastEditTime: 2020-09-01 17:57:48
--> -->
<template> <template>
<div class="common-app-right"> <div class="common-app-right">
...@@ -34,7 +34,7 @@ const { getCustomerSet, saveCustomerSet } = fetch; ...@@ -34,7 +34,7 @@ const { getCustomerSet, saveCustomerSet } = fetch;
import { _debounce } from '@/common/js/public'; import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg'; import showMsg from '@/common/js/showmsg';
export default { export default {
name: 'CustomerShowSet', name: 'CustomerDataSet',
components: {}, components: {},
props: { props: {
brandId: { brandId: {
......
src/views/apps/customer-app/data-dimension.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-08-27 11:36:51 * @Date: 2020-08-27 11:36:51
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-28 14:56:48 * @LastEditTime: 2020-09-02 09:27:25
--> -->
<template> <template>
...@@ -13,58 +13,58 @@ ...@@ -13,58 +13,58 @@
<common-alert-tip :width="'100%'" :tip-content="tipContent"></common-alert-tip> <common-alert-tip :width="'100%'" :tip-content="tipContent"></common-alert-tip>
</div> </div>
<div class="data-dimension-table flex"> <div class="data-dimension-table flex">
<div class="data-dimension-table_left"> <div class="data-dimension-table_left flex-1">
<div class="m-b-18">
<el-tooltip class="item" effect="dark" placement="right">
<div slot="content">
排序越靠上的权重越高，当一家门店拥有多个会员卡时，优先展示排序最靠上的会员卡
</div>
<span class="common-bottom-border table-title">会员卡权重</span>
</el-tooltip>
</div>
<el-table <el-table
ref="memberCardData"
:data="memberCardData" :data="memberCardData"
row-key="memberCardId"
v-loading="loadingMember"
style="width: 100%"> style="width: 100%">
<el-table-column prop="" label="" width="56" class-name="move-row-cell">
<template>
<span class="font-22 iconfont icontuozhuaiopen color-c4c6cf" style="cursor: move;"></span>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="name" prop="name"
label="会员卡名称" label="会员卡名称"
show-overflow-tooltip> show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column> </el-table>
<template slot="header"> </div>
<div class="data-dimension-table_right flex-1">
<div class="m-b-18">
<el-tooltip class="item" effect="dark" placement="right"> <el-tooltip class="item" effect="dark" placement="right">
<div slot="content"> <div slot="content">
排序越靠上的权重越高，当一家门店拥有多个会员卡时，优先展示排序最靠上的会员卡 排序越靠上的权重越高，当一家门店拥有多个服务号时，优先展示排序最靠上的服务号
</div> </div>
<span class="common-bottom-border">排序</span> <span class="common-bottom-border table-title">服务号权重</span>
</el-tooltip> </el-tooltip>
</template>
<template slot-scope="scope">
<i :class="['icon-color', 'el-icon-upload2', scope.$index == 0 ? 'disable' : '']" @click="toTop(scope.$index, scope.row, memberCardData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-pre', scope.$index == 0 ? 'disable' : '']" @click="toPre(scope.$index, scope.row, memberCardData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-next', scope.$index == memberCardData.length - 1 ? 'disable' : '']" @click="toNext(scope.$index, scope.row, memberCardData)"></i>
<i :class="['icon-color', 'el-icon-download', scope.$index == memberCardData.length - 1 ? 'disable' : '']" @click="toBottom(scope.$index, scope.row, memberCardData)"></i>
</template>
</el-table-column>
</el-table>
</div> </div>
<div class="data-dimension-table_right">
<el-table <el-table
ref="serviceNumData"
:data="serviceNumData" :data="serviceNumData"
row-key="serviceCardId"
v-loading="loadingService"
style="width: 100%"> style="width: 100%">
<el-table-column prop="" label="" width="56" class-name="move-row-cell">
<template>
<span class="font-22 iconfont icontuozhuaiopen color-c4c6cf" style="cursor: move;"></span>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="name" prop="name"
label="服务号名称" label="服务号名称"
show-overflow-tooltip> show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column>
<template slot="header">
<el-tooltip class="item" effect="dark" placement="right">
<div slot="content">
排序越靠上的权重越高，当一家门店拥有多个服务号时，优先展示排序最靠上的服务号
</div>
<span class="common-bottom-border">排序</span>
</el-tooltip>
</template>
<template slot-scope="scope">
<i :class="['icon-color', 'el-icon-upload2', scope.$index == 0 ? 'disable' : '']" @click="toTop(scope.$index, scope.row, serviceNumData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-pre', scope.$index == 0 ? 'disable' : '']" @click="toPre(scope.$index, scope.row, serviceNumData)"></i>
<i :class="['icon-color', 'el-icon-back', 'icon-to-next', scope.$index == serviceNumData.length - 1 ? 'disable' : '']" @click="toNext(scope.$index, scope.row, serviceNumData)"></i>
<i :class="['icon-color', 'el-icon-download', scope.$index == serviceNumData.length - 1 ? 'disable' : '']" @click="toBottom(scope.$index, scope.row, serviceNumData)"></i>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -72,9 +72,10 @@ ...@@ -72,9 +72,10 @@
</template> </template>
<script> <script>
import Sortable from 'sortablejs';
import fetch from '@/api/my-customer-app.js'; import fetch from '@/api/my-customer-app.js';
const { getMemberData, getServiceData, saveSortMember } = fetch; const { getMemberData, getServiceData, saveSortMember } = fetch;
import showMsg from '@/common/js/showmsg'; import showMsg from '@/common/js/showmsg.js';
export default { export default {
name: 'DataDimensionPage', name: 'DataDimensionPage',
components: {}, components: {},
...@@ -88,12 +89,16 @@ export default { ...@@ -88,12 +89,16 @@ export default {
return { return {
tipContent: '当商户有多个会员卡和服务号时，会造成单家门店适用于多个会员卡或服务号，即单个顾客会有多个域的身份信息，这容易造成门店成员的困扰。请为以下会员卡和服务号域做权重排序，当顾客有多个域的身份信息时，门店成员将只能看到权重最高域的一个身份信息。', tipContent: '当商户有多个会员卡和服务号时，会造成单家门店适用于多个会员卡或服务号，即单个顾客会有多个域的身份信息，这容易造成门店成员的困扰。请为以下会员卡和服务号域做权重排序，当顾客有多个域的身份信息时，门店成员将只能看到权重最高域的一个身份信息。',
memberCardData: [], // 会员卡 memberCardData: [], // 会员卡
serviceNumData: [] // 服务号 serviceNumData: [], // 服务号
loadingMember: false,
loadingService: false,
}; };
}, },
// 生命周期 - 挂载完成（访问DOM元素） // 生命周期 - 挂载完成（访问DOM元素）
mounted() { mounted() {
const that = this; const that = this;
that.rowDrop('memberCardData');
that.rowDrop('serviceNumData');
if (!!that.brandId) { if (!!that.brandId) {
that.getMemberCrad(); that.getMemberCrad();
that.getServiceNum(); that.getServiceNum();
...@@ -102,84 +107,24 @@ export default { ...@@ -102,84 +107,24 @@ export default {
// methods // methods
methods: { methods: {
/** /**
* @description: 置顶 先删除后追加首部 * @description: 拖拽排序
* @param {Number} index * @param {String} data
* @param {Object} row
* @param {Array} arr
* @returns {Boolean}
* @author: 无尘 * @author: 无尘
*/ */
toTop(index, row, arr ) { rowDrop(data) {
const tbody = this.$refs[data].$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
const that = this; const that = this;
if (index == 0) { Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
if (newIndex == oldIndex) {
return false; return false;
} }
let newTable = JSON.parse(JSON.stringify(arr)); let arr = JSON.parse(JSON.stringify(that[data]));
newTable.splice(index, 1); const currRow = arr.splice(oldIndex, 1)[0];
newTable.unshift(row); arr.splice(newIndex, 0, currRow);
// 保存设置 that.setSort(arr);
that.setSort();
},
/**
* @description: 向上
* @param {Number} index
* @param {Object} row
* @param {Array} arr
* @returns {Boolean}
* @author: 无尘
*/
toPre(index, row, arr) {
const that = this;
if (index == 0) {
return false;
} }
let newTable = JSON.parse(JSON.stringify(arr)); });
let temp = {};
temp = newTable[index - 1];
newTable[index - 1] = row;
newTable[index] = temp;
// 保存设置
that.setSort();
},
/**
* @description: 向下
* @param {Number} index
* @param {Object} row
* @param {Array} arr
* @returns {Boolean}
* @author: 无尘
*/
toNext(index, row, arr) {
const that = this;
if (index == arr.length - 1) {
return false;
}
let newTable = JSON.parse(JSON.stringify(arr));
let temp = {};
temp = newTable[index + 1];
newTable[index + 1] = row;
newTable[index] = temp;
// 保存设置
that.setSort();
},
/**
* @description: 置底 先删除后追加尾部
* @param {Number} index
* @param {Object} row
* @param {Array} arr
* @returns {Boolean}
* @author: 无尘
*/
toBottom(index, row, arr) {
const that = this;
if (index == arr.length - 1) {
return false;
}
let newTable = JSON.parse(JSON.stringify(arr));
newTable.splice(index, 1);
newTable.push(row);
// 保存设置
that.setSort();
}, },
setSort() { setSort() {
const that = this; const that = this;
...@@ -206,15 +151,17 @@ export default { ...@@ -206,15 +151,17 @@ export default {
*/ */
getMemberCrad() { getMemberCrad() {
const that = this; const that = this;
that.loadingMember = true;
const para = { const para = {
enterpriseId: that.brandId enterpriseId: that.brandId
}; };
getMemberData(para) getMemberData(para)
.then(res => { .then(res => {
that.loadingMember = false;
that.memberCardData = res.result || []; that.memberCardData = res.result || [];
}) })
.catch(function(error) { .catch(function(error) {
that.loadingMember = false;
}); });
}, },
/** /**
...@@ -223,15 +170,17 @@ export default { ...@@ -223,15 +170,17 @@ export default {
*/ */
getServiceNum() { getServiceNum() {
const that = this; const that = this;
that.loadingService = true;
const para = { const para = {
enterpriseId: that.brandId enterpriseId: that.brandId
}; };
getServiceData(para) getServiceData(para)
.then(res => { .then(res => {
that.loadingService = false;
that.serviceNumData = res.result || []; that.serviceNumData = res.result || [];
}) })
.catch(function(error) { .catch(function(error) {
that.loadingService = false;
}); });
} }
}, },
...@@ -251,14 +200,20 @@ export default { ...@@ -251,14 +200,20 @@ export default {
cursor: pointer; cursor: pointer;
padding-bottom: 2px; padding-bottom: 2px;
border-bottom: 1px dashed #2f54eb; border-bottom: 1px dashed #2f54eb;
&.table-title {
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: #303133;
}
} }
.data-dimension-table { .data-dimension-table {
i.icon-color { margin-top: 32px;
color: #606266; .m-b-18 {
margin-bottom: 18px;
} }
i.disable { .data-dimension-table_right {
color: #909399; margin-left: 47px;
cursor: not-allowed;
} }
} }
</style> </style>
src/views/apps/customer-app/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-03-20 14:36:37 * @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-27 18:45:26 * @LastEditTime: 2020-09-01 17:15:33
--> -->
<template> <template>
<div class="my-customer-wrap common-set-wrap"> <div class="my-customer-wrap common-set-wrap">
...@@ -144,26 +144,25 @@ export default { ...@@ -144,26 +144,25 @@ export default {
} }
}; };
</script> </script>
<style type="text/scss" lang="scss" scoped> <style type="text/less" lang="less" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.line-h-18 { .line-h-18 {
line-height: 18px; line-height: 18px;
} }
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.my-customer-wrap { .my-customer-wrap {
height: 100%; height: 100%;
// 拖拽排序公共样式
.move-row-cell {
.icontuozhuaiopen {
display: none;
}
&:hover {
.icontuozhuaiopen {
display: inline-block;
vertical-align: middle;
}
}
}
} }
.right-content { .right-content {
/*width: 100%;*/ /*width: 100%;*/
...@@ -180,24 +179,11 @@ export default { ...@@ -180,24 +179,11 @@ export default {
background: #fff; background: #fff;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
.apps-content-left__title {
height: 55px;
line-height: 55px;
padding: 0 0 0 18px;
}
} }
.apps-content-right { .apps-content-right {
width: calc(100% - 120px); width: calc(100% - 120px);
padding-left: 10px; padding-left: 10px;
background: #f0f2f5; background: #f0f2f5;
.daily-set-wrap {
height: 100%;
background: #fff;
}
.app-detail-wrap {
height: 100%;
background: #fff;
}
.common-set-wrap { .common-set-wrap {
height: 100%; height: 100%;
background: #fff; background: #fff;
......
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