提交 83c1d1b2 编写于 作者: huangwensu's avatar huangwensu

接口联调

上级 5070f21b
...@@ -10,7 +10,13 @@ ...@@ -10,7 +10,13 @@
<el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;"> <el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;">
<el-col :span="21"> <el-col :span="21">
<el-form-item label="漏斗名称"> <el-form-item label="漏斗名称">
<el-input v-model="searchParam.name" maxlength="30" placeholder="请输入漏斗名称" style="width:288px;"></el-input> <el-input
:class="{'red-b': disabledSave}"
v-model="searchParam.name"
maxlength="30"
placeholder="请输入漏斗名称"
style="width:430px;"
@blur="validValue"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3" style="padding:0;text-align:right;padding-right:15px;"> <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
...@@ -31,17 +37,27 @@ ...@@ -31,17 +37,27 @@
style="width:100%;"> style="width:100%;">
<el-col :span="11"> <el-col :span="11">
<el-form-item label="步骤名称"> <el-form-item label="步骤名称">
<el-input v-model="item.actionName" maxlength="30" placeholder="请输入步骤名称" style="width:200px;"></el-input> <el-input v-model="item.actionName" @blur="stepNameRepeat(item.actionName, index)" maxlength="30" placeholder="请输入步骤名称" style="width:250px;"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="触发事件"> <el-form-item label="触发事件">
<el-select v-model="item.eventId" filterable placeholder="请选择用户触发事件" style="width:200px"> <el-input v-show="!showEvent && funnelId" :class="{'red-b': item.unchecked}" @focus="getEventData" v-model="item.eventName" style="width:300px;"></el-input>
<el-select
v-show="!funnelId || showEvent"
v-model="item.eventId"
filterable
placeholder="请选择用户触发事件"
:class="{'red-b': item.unchecked}"
@blur="selectValid(item)"
style="width:300px"
>
<el-option <el-option
v-for="(eItem,eIndex) in eventSelect" v-for="(eItem,eIndex) in eventSelect"
:key="eIndex" :key="eIndex"
:label="eItem.eventName" :label="eItem.eventName"
:value="eItem.eventId"> :value="eItem.eventId"
>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -60,6 +76,8 @@ import { openLoading, closeLoading } from "../../common/utils"; ...@@ -60,6 +76,8 @@ import { openLoading, closeLoading } from "../../common/utils";
export default { export default {
data() { data() {
return { return {
showEvent: false, // 编辑回显时不显示触发事件下拉数据
disabledSave: false,
funnelId: '', funnelId: '',
searchParam: { searchParam: {
name: '', name: '',
...@@ -76,8 +94,11 @@ export default { ...@@ -76,8 +94,11 @@ export default {
this.funnelId = this.$route.query.id; this.funnelId = this.$route.query.id;
}, },
mounted() { mounted() {
this.getEventList(); if(this.funnelId) { // 编辑
if(this.funnelId) this.getFunnelDetail(); this.getFunnelDetail();
}else { // 新增
this.getEventList();
}
}, },
methods: { methods: {
// 封装一下请求通用的方法 // 封装一下请求通用的方法
...@@ -95,15 +116,18 @@ export default { ...@@ -95,15 +116,18 @@ export default {
}) })
}, },
// 获取触发事件列表 // 获取触发事件列表
getEventList() { getEventList(item) {
let req = this.searchParam.name;
this.getData( this.getData(
"get", `/session/funnel/eventList?searchName=${req}`, {}, "get", `/session/funnel/eventList`, {},
res => { res => {
this.eventSelect = res.data; this.eventSelect = res.data;
} }
); );
}, },
getEventData() {
this.showEvent = true;
this.getEventList();
},
// 编辑获取漏斗详情 // 编辑获取漏斗详情
getFunnelDetail() { getFunnelDetail() {
this.getData( this.getData(
...@@ -115,15 +139,42 @@ export default { ...@@ -115,15 +139,42 @@ export default {
} }
); );
}, },
validValue() {
if(this.searchParam.name) {
this.disabledSave = false;
}
},
// 步骤名称不重复
stepNameRepeat(val, index) {
let arr = [];
for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
if(i != index) {
arr.push(this.searchParam.actionModelList[i].actionName);
}
}
arr.forEach((item) => {
if(val == item) {
this.$message.error('步骤名称重复');
this.searchParam.actionModelList[index].actionName = '';
}
})
},
selectValid(item) {
if(item.eventId) {
this.$set(this.searchParam.actionModelList[i], 'unchecked', false);
}
},
// 保存 // 保存
saveAddAndEdit() { saveAddAndEdit() {
if(!this.searchParam.name) { if(!this.searchParam.name) {
this.$message.error('请输入漏斗名称'); this.$message.error('请输入漏斗名称');
this.disabledSave = true;
return; return;
} }
for(let i = 0; i < this.searchParam.actionModelList.length; i++) { for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
if(!this.searchParam.actionModelList[i].eventId) { if(!this.searchParam.actionModelList[i].eventId) {
this.$message.error('触发事件不能为空'); this.$message.error('触发事件不能为空');
this.$set(this.searchParam.actionModelList[i], 'unchecked', true);
return; return;
} }
} }
...@@ -134,6 +185,9 @@ export default { ...@@ -134,6 +185,9 @@ export default {
if(res.code == '000000') { if(res.code == '000000') {
this.$message.success('转化漏斗创建成功'); this.$message.success('转化漏斗创建成功');
this.$router.push({ path: 'user-path' }); this.$router.push({ path: 'user-path' });
}else if(res.code == '227002' || res.code == '227003'){
this.disabledSave = true;
this.$message.error(res.message);
}else { }else {
this.$message.error(res.message); this.$message.error(res.message);
} }
...@@ -158,6 +212,9 @@ export default { ...@@ -158,6 +212,9 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.add-funnel-container { .add-funnel-container {
margin: -20px -40px; margin: -20px -40px;
.red-b {
border: 1px solid red;
}
.add-title { .add-title {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
......
...@@ -37,16 +37,15 @@ ...@@ -37,16 +37,15 @@
<el-option <el-option
v-for="(eItem,eIndex) in versionSelect" v-for="(eItem,eIndex) in versionSelect"
:key="eIndex" :key="eIndex"
:label="eItem.label" :label="eItem"
:value="eItem.value"> :value="eItem">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6" style="padding:0;text-align:right;padding-right:15px;"> <el-col :span="6" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="default" size="small">下载</el-button>
<el-button type="default" size="small" @click="reset">重置</el-button> <el-button type="default" size="small" @click="reset">重置</el-button>
<el-button type="primary" size="small">筛选</el-button> <el-button type="primary" size="small" @click="getAnalysisData">筛选</el-button>
</el-col> </el-col>
</el-form> </el-form>
</el-row> </el-row>
...@@ -143,13 +142,15 @@ export default { ...@@ -143,13 +142,15 @@ export default {
}) })
}, },
// 获取版本号数据 // 获取版本号数据
getVersionData() { getVersionData() { //https://dev-sc.yunqueyi.com/session/funnel/version/list
openLoading(this); this.getData(
this.$axios.get(localStorage.getItem("versionUrl") + '/api/PICAVersionServiceImpl/getVersionList', {}) "get", `/session/funnel/version/list`, {},
.then(res => { res => {
closeLoading(this); if(res.code == '000000') {
this.versionSelect = res.data;
}) }
}
);
}, },
// 获取漏斗分析数据 // 获取漏斗分析数据
getAnalysisData() { getAnalysisData() {
...@@ -321,7 +322,11 @@ export default { ...@@ -321,7 +322,11 @@ export default {
myChart.setOption(option); myChart.setOption(option);
}, },
reset() { reset() {
this.searchParam = {
endDate: '2020-11-23',
startDate: '2020-11-20',
version: ''
};
} }
} }
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册