漏斗接口联调

src/common/env.js

@@ -19,6 +19,7 @@ export const getAddress = () => {
     let ipAddress = "https://" + window.location.host;
     // let ipAddress = "http://localhost:8099";
     let env = getTestEnv(ipAddress);
+    let versionUrl = "";
     let preViewUrl = ""
     let qiniuImgUrl  = "";
     let qiniuFileUrl = '';
@@ -41,6 +42,7 @@ export const getAddress = () => {
     //本地
     if (ipAddress.indexOf("localhost") > -1 || ipAddress.indexOf("10.177.10.118") > -1 || ipAddress.indexOf("test-kf") > -1) {
         ipAddress = "http://localhost:7070";
+        versionUrl = 'https://dev-dev.yunqueyi.com';
         preViewUrl = "http://localhost:9090/#/template";
         qiniuImgUrl = "https://test1-file.yunqueyi.com";
         resource_url = "https://test-file.yunqueyi.com";
@@ -64,6 +66,7 @@ export const getAddress = () => {
         qiniuFileUrl = "http://dev-sc.yunqueyi.com/contents/admin/qiniu/token1";
         qiniuResourceUrl = "https://test1-videos.yunqueyi.com";
     } else if (isNotEmptyUtils(env)) {//测试test1 test2 uat
+        versionUrl = 'https://' + env + '-dev.yunqueyi.com';
         preViewUrl = "https://" + env + "-phome.yunqueyi.com" + "/template/#/template"
         qiniuFileUrl = "https://" + env + "-sc.yunqueyi.com" + "/contents/admin/qiniu/token1";
         qiniuImgUrl = "https://test1-file.yunqueyi.com";
@@ -97,6 +100,7 @@ export const getAddress = () => {
             lectureUrl = "https://" + env + "-sc.yunqueyi.com"
         }
     } else {//生产环境
+        versionUrl = 'https://dev.yunqueyi.com';
         preViewUrl = "https://phome.yunqueyi.com" + "/template/#/template"
         qiniuFileUrl = "https://sc.yunqueyi.com" + "/contents/admin/qiniu/token1";
         qiniuImgUrl = "https://files.yunqueyi.com";//qiniu存储域名
@@ -116,6 +120,7 @@ export const getAddress = () => {
         qiniuResourceUrl = "https://video.yunqueyi.com";//qiniu存储域名
         exam_url = "https://sc.yunqueyi.com/exams";
     }
+    localStorage.setItem("versionUrl",versionUrl);
     localStorage.setItem("preViewUrl",preViewUrl);
     localStorage.setItem("qiniuFileUrl", qiniuFileUrl);
     localStorage.setItem("qiniuImgUrl", qiniuImgUrl);

src/views/user-path/add-funnel.vue

@@ -10,7 +10,7 @@
                     <el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;">
                         <el-col :span="21">
                             <el-form-item label="漏斗名称">
-                                <el-input v-model="searchParam.name" maxlength="20" placeholder="请输入漏斗名称" style="width:288px;"></el-input>
+                                <el-input v-model="searchParam.name" maxlength="30" placeholder="请输入漏斗名称" style="width:288px;"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
@@ -21,7 +21,7 @@
                 <div class="add-step">
                     <p>请以用户逐步触发的事件为依据，构造漏斗、系统会自动计算整个过程的转化率。如果事件之间不连续，转化率为0！</p>
                 </div>
-                <div class="step-content" v-for="(item,index) in stepArray" :key="index">
+                <div class="step-content" v-for="(item,index) in searchParam.actionModelList" :key="index">
                     <span>步骤{{index + 1}}</span>
                     <el-form 
                     ref="form" 
@@ -31,17 +31,17 @@
                     style="width:100%;">
                         <el-col :span="11">
                             <el-form-item label="步骤名称">
-                                <el-input v-model="item.name" maxlength="20" placeholder="请输入步骤名称" style="width:200px;"></el-input>
+                                <el-input v-model="item.actionName" maxlength="30" placeholder="请输入步骤名称" style="width:200px;"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="11">
                             <el-form-item label="触发事件">
-                                <el-select v-model="item.event" placeholder="请选择用户触发事件" style="width:200px">
+                                <el-select v-model="item.eventId" filterable placeholder="请选择用户触发事件" style="width:200px">
                                     <el-option
                                     v-for="(eItem,eIndex) in eventSelect"
                                     :key="eIndex"
-                                    :label="eItem.label"
-                                    :value="eItem.value">
+                                    :label="eItem.eventName"
+                                    :value="eItem.eventId">
                                     </el-option>
                                 </el-select>
                             </el-form-item>
@@ -56,35 +56,100 @@
     </div>
 </template>
 <script>
+import { openLoading, closeLoading } from "../../common/utils";
 export default {
     data() {
         return {
+            funnelId: '',
             searchParam: {
-                name: ''
-            },
-            stepArray: [
+                name: '',
+                actionModelList: [
                 {
-                    name: '',
-                    event: ''
-                }
-            ],
+                    actionName: '',
+                    eventId: ''
+                }]
+            },
             eventSelect: []
         }
     },
+    created() {
+        this.funnelId = this.$route.query.id;
+    },
+    mounted() {
+        this.getEventList();
+        if(this.funnelId) this.getFunnelDetail();
+    },
     methods: {
+        // 封装一下请求通用的方法
+        getData(type, url, req, callback) {
+            openLoading(this);
+            this.$axios[type](localStorage.getItem("lectureUrl") + url, req)
+                .then(res => {
+                    closeLoading(this);
+                    let data = res.data;
+                    if (data.code == "000000") {
+                        if (callback) callback(data);
+                    } else {
+                        this.$message.error(data.message);
+                    }
+                })
+        },
+        // 获取触发事件列表
+        getEventList() {
+            let req = this.searchParam.name;
+            this.getData(
+                "get", `/session/funnel/eventList?searchName=${req}`, {},
+                res => {
+                    this.eventSelect = res.data;
+                }
+            );
+        },
+        // 编辑获取漏斗详情
+        getFunnelDetail() {
+            this.getData(
+                "get", `/session/funnel/detail/${this.funnelId}`, {},
+                res => {
+                    if(res.code == '000000') {
+                        this.searchParam = res.data;
+                    }
+                }
+            );
+        },
         // 保存
         saveAddAndEdit() {
-
+            if(!this.searchParam.name) {
+                this.$message.error('请输入漏斗名称');
+                return;
+            }
+            for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
+                if(!this.searchParam.actionModelList[i].eventId) {
+                    this.$message.error('触发事件不能为空');
+                    return;
+                }
+            }
+            let req = this.searchParam;
+            this.getData(
+                "post", `/session/funnel/save`, req,
+                res => {
+                    if(res.code == '000000') {
+                        this.$message.success('转化漏斗创建成功');
+                        this.$router.push({ path: 'user-path' });
+                    }else {
+                        this.$message.error(res.message);
+                    }
+                }
+            );
         },
         // 删除步骤
         deleteSteps(i) {
-            this.stepArray.splice(i,1);
+            this.$message.success('删除成功');
+            this.searchParam.actionModelList.splice(i,1);
         },
         // 增加步骤
         addSteps() {
-            this.stepArray.push({
-                name: '',
-                event: ''
+            this.searchParam.actionModelList.push({
+                actionName: '',
+                eventId: ''
             });
         }
     }

src/views/user-path/funnel.vue

@@ -114,12 +114,12 @@ export default {
             this.$router.push({ path: 'add-funnel' });
         },
         // 查看数据
-        visitData() {
-            this.$router.push({ path: 'path-data' });
+        visitData(row) {
+            this.$router.push({ path: 'path-data',query: {id: row.id, name: row.name} });
         },
         // 编辑
         editColumn(row) {
-            this.$router.push({ path: 'add-funnel' ,query: {id: row.id}});
+            this.$router.push({ path: 'add-funnel',query: {id: row.id}});
         },
         // 删除确认框
         deleteConfirm(row) {