Commit e9e0d47e by crushh

udpate: 筛选器

parent 33e70c2e
/** 表单校验滚动到第一个错误项
* @param {Object} that vue实例
* this.scrollToError(this);
*/
const scrollToError = that => {
that.$nextTick(_ => {
const isError = document.getElementsByClassName('is-error');
isError[0].scrollIntoView({
// 滚动到指定节点
// 值有start,center,end,nearest,当前显示在视图区域中间
block: 'center',
// 值有auto、instant,smooth,缓动动画(当前是慢速的)
behavior: 'smooth'
});
});
};
export default scrollToError;
......@@ -60,7 +60,7 @@ const transform = (data, scenes) => {
const result = {
filterJson: [], // 后台需要的查询条件
filterFrontShow: [], // 前端回显的数据
scenes: scenes // 场景值 member02
scenes // 场景值 member02
};
const obj = { list: [], type: 'and' };
let filterFrontShow = [];
......@@ -72,6 +72,43 @@ const transform = (data, scenes) => {
});
result.filterJson = JSON.stringify(obj);
result.filterFrontShow = JSON.stringify(filterFrontShow);
return result;
return { data: result, bool: filterFrontShow.length > 0 };
};
/**
* @description 处理回显数据
* @param {Object} data 选择好的筛选条件数据
* @chainNodeName {String} 节点名字如:会员等级
* @selectValue {String} 选择条件的文案
* @esScreeningWidgetChainId {String} 节点Id
*/
// const handleEchoData = data => {
// let arr = [];
// data.forEach(item => {
// if (item.selectValue && item.selectValue.length) {
// let selectValue = [];
// if (item.templateCode == 'com026') {
// let myMap = new Map();
// item.selectList.forEach(item => {
// item.data.forEach(val => {
// myMap.set(val.key, val.value);
// });
// });
// item.selectValue.forEach(key => {
// selectValue.push(myMap.get(key));
// });
// selectValue = selectValue.join(',');
// } else if (item.templateCode == 'tag001') {
// item.selectList.forEach(obj => {
// if (item.selectValue.includes(obj.key)) {
// selectValue.push(obj.value);
// }
// });
// selectValue = selectValue.join(',');
// }
// arr.push({ chainNodeName: item.chainNodeName, selectValue, esScreeningWidgetChainId: item.esScreeningWidgetChainId });
// }
// });
// return arr;
// };
export default transform;
......@@ -6,7 +6,7 @@
<div class="text">
<div class="space-between">
已选分组
<span><el-button type="text" class="delBtn" @click="del">删除</el-button><el-button type="text" @click="edit">编辑</el-button></span>
<span><el-button type="text" class="delBtn" @click="delAll">删除</el-button><el-button type="text" @click="edit">编辑</el-button></span>
</div>
</div>
</div>
......@@ -19,13 +19,13 @@
<div class="ruleContainer">
<div class="left">
<el-tabs tab-position="left" @tab-click="onTabsClick" v-model="activeName">
<el-tab-pane :label="item.chainNodeName" v-for="item in conditionTypeList" :key="item.esScreeningWidgetChainId" :name="item.esScreeningWidgetChainId">
<div v-if="templateCode == 'tag001'" class="leftContent">
<el-tab-pane :label="item.chainNodeName" v-for="item in conditionTypeList" :key="item.esScreeningWidgetChainId" :name="item.esScreeningWidgetChainId" v-loading="tabPaneLoading">
<div v-if="item.templateCode == 'tag001' && templateCode == 'tag001'" class="leftContent">
<el-checkbox-group v-model="item.selectValue" @change="val => handleChange(val, item.esScreeningWidgetChainId)" class="checkBoxContainer">
<el-checkbox v-for="row in item.selectList" :key="row.key" :label="row.key">{{ row.value }}</el-checkbox>
</el-checkbox-group>
</div>
<div v-if="templateCode == 'com026'" class="leftContent">
<div v-if="item.templateCode == 'com026' && templateCode == 'com026'" class="leftContent">
<div class="line" v-for="(value, index) in item.selectList" :key="index">
<h3>{{ value.title }}</h3>
<el-checkbox-group v-model="item.selectValue" @change="val => handleChange(val, item.esScreeningWidgetChainId)" class="checkBoxContainer">
......@@ -33,8 +33,8 @@
</el-checkbox-group>
</div>
</div>
<div v-if="templateCode == 'com020'" class="leftContent">
<vue-gic-store-new :isAdd="isAdd" :creatorId="creatorId" :scenesVal="scenes" scenes="auth" :uuid="item.value" ref="storeNew" @store-change="storeChange"></vue-gic-store-new>
<div v-if="item.templateCode == 'com020' && templateCode == 'com020'" class="leftContent">
<dm-store-selector v-if="item.templateCode == 'com020'" ref="storeSelector" scenes="auth" scenesVal="marketing" @store-change="val => storeChange(val, item.esScreeningWidgetChainId)" :uuid.sync="item.value"></dm-store-selector>
</div>
</el-tab-pane>
</el-tabs>
......@@ -43,7 +43,7 @@
<div class="right-top">
已选条件
</div>
<ul class="right-content">
<ul class="right-content" v-loading="selectDataLoading">
<li class="contact-li" v-for="(item, index) in selectData" :key="index">
<div class="li-cell cursor-pointer">{{ item.chainNodeName }} <i v-if="!readonly" class="el-icon-close" @click="deleteRow(item)"></i></div>
<span> {{ item.selectValue }}</span>
......@@ -53,7 +53,7 @@
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
<el-button type="primary" @click="confirm" :loading="loading">确定</el-button>
</div>
</el-dialog>
</div>
......@@ -67,12 +67,12 @@ export default {
return {
activeName: '',
conditionTypeList: [], // 第一层级
checkboxList: [],
arr: [],
uuid: '',
templateCode: '', //当前控件类型
echoFlag: false,
echoData: []
echoData: [],
loading: false,
tabPaneLoading: false,
selectDataLoading: false
};
},
props: {
......@@ -112,7 +112,6 @@ export default {
},
methods: {
getEchoData() {
// "ff8080817fab027b017fce8c4cac26ab"
const data = { memberCrowdWidgetId: this.memberCrowdWidgetId };
this.axios.post(`api-plug/query-member-crowd-new?requestProject=${this.requestProject}`, data).then(res => {
let resData = res.data;
......@@ -122,14 +121,14 @@ export default {
const obj = this.conditionTypeList.find(val => val.esScreeningWidgetChainId == item.esScreeningWidgetChainId);
if (obj) {
obj.selectValue = item.selectValue;
obj.value = item.selectValue.join(' ');
obj.value = item.value;
obj.selectList = item.selectList;
}
});
this.echoData = this.handleEchoData(filterFrontShow);
console.log(this.echoData);
console.log(filterFrontShow);
console.log(this.conditionTypeList);
// console.log(this.echoData);
// console.log(filterFrontShow);
// console.log(this.conditionTypeList);
}
});
},
......@@ -156,16 +155,34 @@ export default {
}
});
selectValue = selectValue.join(',');
} else if (item.templateCode == 'com020') {
selectValue = item.selectValue;
}
arr.push({ chainNodeName: item.chainNodeName, selectValue, esScreeningWidgetChainId: item.esScreeningWidgetChainId });
}
});
return arr;
},
del() {
echoStoreSelectorData(key) {
return new Promise((resolve, reject) => {
this.$refs.storeSelector[0].getStoreConfig().then(async data => {
console.log(data);
if (data.type == 0) {
resolve('所有门店');
return;
} else {
const str = data.list.map(item => item.name).join(',');
resolve(str);
}
});
});
// 取得门店筛选器的文字回显
},
delAll() {
this.conditionTypeList.forEach(item => {
item.selectValue = [];
});
this.activeName = this.conditionTypeList.length && this.conditionTypeList[0].esScreeningWidgetChainId;
this.$emit('save', '');
this.echoFlag = false;
},
......@@ -176,15 +193,24 @@ export default {
this.conditionTypeList.forEach(item => {
if (item.esScreeningWidgetChainId == row.esScreeningWidgetChainId) {
item.selectValue = [];
item.value = '';
}
});
},
handleChange(val, id) {
this.conditionTypeList.find(item => item.esScreeningWidgetChainId == id).value = val.join(' ');
console.log(this.conditionTypeList);
},
storeChange(val) {
console.log(val);
storeChange(uuid, esScreeningWidgetChainId) {
this.selectDataLoading = true;
const obj = this.conditionTypeList.find(item => item.esScreeningWidgetChainId == esScreeningWidgetChainId);
obj.value = uuid;
this.$nextTick(() => {
this.echoStoreSelectorData(uuid).then(res => {
obj.selectValue = res;
this.selectDataLoading = false;
});
});
console.log(this.conditionTypeList);
},
onTabsClick(val) {
const { name } = val;
......@@ -194,15 +220,27 @@ export default {
this.$emit('update:visiable', false);
},
confirm() {
const data = transform(this.conditionTypeList, this.sceneCode);
this.axios.post(`api-plug/save-member-crowd-new?requestProject=${this.requestProject}`, data).then(res => {
let resData = res.data;
if (resData.errorCode == 0) {
this.$emit('save', resData.result);
this.echoFlag = true;
this.$emit('update:visiable', false);
}
});
const { data, bool } = transform(this.conditionTypeList, this.sceneCode);
console.log(data);
console.log(bool);
if (!bool) {
this.$message.warning('请选择条件');
return;
}
this.loading = true;
this.axios
.post(`api-plug/save-member-crowd-new?requestProject=${this.requestProject}`, data)
.then(res => {
let resData = res.data;
if (resData.errorCode == 0) {
this.$emit('save', resData.result);
this.echoFlag = true;
this.$emit('update:visiable', false);
}
})
.finally(() => {
this.loading = false;
});
},
// 获取列表
getDataList() {
......@@ -225,8 +263,9 @@ export default {
computeCharacter,
dealKey,
property,
selectValue: [],
selectList: []
selectValue: [], // 已选条件的文案
selectList: [], // 复选框的条件
value: '' // 提交的值
});
});
this.activeName = this.conditionTypeList.length && this.conditionTypeList[0].esScreeningWidgetChainId;
......@@ -271,12 +310,18 @@ export default {
requestProject: this.requestProject,
key
};
this.axios.post(`${url}`, qs.stringify(param)).then(res => {
let resData = res.data;
if (resData.errorCode == 0) {
this.conditionTypeList.find(item => item.esScreeningWidgetChainId == id).selectList = resData.result;
}
});
this.tabPaneLoading = true;
this.axios
.post(`${url}`, qs.stringify(param))
.then(res => {
let resData = res.data;
if (resData.errorCode == 0) {
this.conditionTypeList.find(item => item.esScreeningWidgetChainId == id).selectList = resData.result;
}
})
.finally(() => {
this.tabPaneLoading = false;
});
}
}
};
......
......@@ -5,6 +5,7 @@ import store from './store';
import { axios } from './service/api/index';
import directives from './directives';
import limit from '@/utils/limiting';
import scrollToError from '@/assets/common.js';
Vue.config.productionTip = false;
if (process.env.NODE_ENV == 'development') { // eslint-disable-line
......@@ -12,7 +13,7 @@ if (process.env.NODE_ENV == 'development') { // eslint-disable-line
} else {
Vue.config.devtools = false;
}
Vue.prototype.scrollToError = scrollToError;
Vue.prototype.axios = axios;
Vue.prototype.axios.withCredentials = true;
Vue.prototype.axios.defaults.timeout = 50000;
......
......@@ -14,7 +14,7 @@ export default {
{
path: 'add/:scene',
name: '新增活动详情',
component: () => import('../../views/ai/form.vue'),
component: () => import('../../views/ai/task/form.vue'),
meta: {
type: 'add'
}
......@@ -22,7 +22,7 @@ export default {
{
path: 'edit/:id',
name: '编辑活动详情',
component: () => import('../../views/ai/form.vue'),
component: () => import('../../views/ai/task/form.vue'),
meta: {
type: 'edit'
}
......@@ -30,7 +30,7 @@ export default {
{
path: 'info/:id',
name: '活动详情',
component: () => import('../../views/ai/info.vue'),
component: () => import('../../views/ai/task/info.vue'),
meta: {
type: 'info'
}
......
......@@ -12,7 +12,7 @@
</template>
<script>
import task from './task.vue';
import task from './task/task.vue';
import manage from './manage.vue';
export default {
data() {
......
/**
* 解析property
* @param {Number | String} val property值,也可能是多个对应值之和
* @return {Object} map
* @return {Boolean} map.isCompute 是否是计算属性
* @return {Boolean} map.isField 是否是字段属性
* @return {Boolean} map.isValue 是否是值属性
* @return {Boolean} map.isCategray 是否是不是属性
* @return {Boolean} map.notProperty 是否是类别属性
*/
export default val => {
// 用二进制对应位上的1表示对应属性的开启状态
// {
// 1: '0001', // 计算属性
// 2: '0010', // 字段属性
// 4: '0100', // 值属性
// 8: '1000', // 不是属性
// 16: '00010000', // 类别属性
// }
// 将val转为二进制,来处理值之和的情况,例如:3 = 1 + 2 = 0001 + 0010 = 0011
// 然后再把二进制值的字符串转为数字,调转顺序,0 1转为bool
const status = Number(val)
.toString(2)
.split('')
.reverse()
.map(i => i == 1);
// 根据上面的键值对表,从二进制最末一位开始,对应在数组里
const keys = ['isCompute', 'isField', 'isValue', 'isCategray', 'notProperty'];
// 根据数组转换出状态结果
return keys.reduce((map, key, index) => ({ ...map, [key]: !!status[index] }), {});
};
......@@ -77,6 +77,7 @@ export default {
}
resolve(obj);
} else {
this.scrollToError(this);
resolve(false);
}
});
......
......@@ -170,6 +170,7 @@ export default {
}
resolve(obj);
} else {
this.scrollToError(this);
resolve(false);
}
});
......
......@@ -213,6 +213,7 @@ export default {
}
resolve(obj);
} else {
this.scrollToError(this);
resolve(false);
}
});
......
......@@ -10,7 +10,7 @@
<el-input class="w340" :maxlength="30" placeholder="请输入活动名称" show-word-limit v-model="form.activityName"></el-input>
</el-form-item>
<el-form-item label="选择话术" prop="aiTemplateId">
<el-select filterable class="w340" v-model="form.aiTemplateId" placeholder="请选择话术" @change="effectActionChange">
<el-select filterable class="w340" v-model="form.aiTemplateId" :disabled="isEdit" placeholder="请选择话术" @change="effectActionChange">
<el-option v-for="item in templateOptions" :key="item.aiTemplateId" :label="item.name" :value="item.aiTemplateId"></el-option>
</el-select>
<span class="tips">仅支持选择已上线的话术,若需要增加话术,请联系运营经理</span>
......@@ -241,13 +241,14 @@
<script>
import filterAvater from '@/mixins/filterAvater.js';
import { templateList, aiDictList, initActivity, getActivityDetail, getMemberCount } from '@/service/api/aiApi.js';
import birthSense from './birthActiveTime.vue';
import holidaySense from './holidayActiveTime.vue';
import birthSense from '@/views/ai/task/components/birthActiveTime.vue';
import holidaySense from '@/views/ai/task/components/holidayActiveTime.vue';
import LibMessage from '@/views/ecm/marketing-event/components/lib-message.vue';
import activeTime from './activeTime.vue';
import activeTime from '@/views/ai/task/components/activeTime.vue';
import { formatDateTimeByType } from '@/utils/index';
import gicNewMemberGroup from '@/components/dm-new-member-group/index.vue';
import ruleFilter from './ruleFilter.vue';
import ruleFilter from '@/components/dm-new-rule/ruleFilter.vue';
export default {
mixins: [filterAvater],
data() {
......@@ -533,6 +534,8 @@ export default {
if (result) {
this.$router.go(-1);
}
} else {
this.scrollToError(this);
}
});
},
......
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