页面编辑

src/router/index.js

@@ -46,6 +46,14 @@ export default new Router({
                 { // 页面埋点管理
                     path: '/strack-list',
                     component: resolve => require(['../views/strack-data/strack-list.vue'], resolve)
+                },
+                { // 页面埋点管理
+                    path: '/strack-detail',
+                    component: resolve => require(['../views/strack-data/strack-detail.vue'], resolve)
+                },
+                { // 页面埋点管理
+                    path: '/create-point',
+                    component: resolve => require(['../views/strack-data/create-point.vue'], resolve)
                 }
             ]
         },

src/views/strack-data/create-point.vue

+<template>
+    <div class="strack-list-contrainer">
+        <el-breadcrumb separator="/" class="title">
+            <el-breadcrumb-item :to="{ path: '/strack-list' }">页面埋点管理</el-breadcrumb-item>
+            <el-breadcrumb-item>新建(编辑)页面埋点</el-breadcrumb-item>
+        </el-breadcrumb>
+        <el-form ref="form" label-width="120px" :model="form">
+            <el-form-item label="menu_code">
+                <el-input disabled v-model="form.menuCode" style="width: 30%;"></el-input>
+            </el-form-item>
+            <el-form-item label="menu_name">
+                <el-input disabled v-model="form.menuName" style="width: 30%;"></el-input>
+            </el-form-item>
+            <el-form-item label="action_code">
+                <el-input disabled v-model="form.actionCode" style="width: 30%;"></el-input>
+            </el-form-item>
+            <el-form-item label="action_name">
+                <el-input v-model="form.actionName" style="width: 30%;"></el-input>
+            </el-form-item>
+            <el-form-item label="下一个负责人">
+                <el-select v-model="form.member" placeholder="请下一个负责人" style="width:30%;">
+                    <el-option
+                    v-for="(eItem,eIndex) in memberSelect"
+                    :key="eIndex"
+                    :label="eItem"
+                    :value="eItem">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="Tag_type">
+                <el-select v-model="tagType1" @click="changeTag1" style="width:10%;">
+                    <el-option
+                    v-for="(eItem,eIndex) in tagSelect"
+                    :key="eIndex"
+                    :label="eItem.label"
+                    :value="eItem.value">
+                    </el-option>
+                </el-select>
+                <el-input v-model="tag1" placeholder="请输入第一个Tag" clearable style="width:20%;"></el-input>
+            </el-form-item>
+            <el-form-item label="Tag_type">
+                <el-select v-model="tagType2" style="width:10%;">
+                    <el-option
+                    v-for="(eItem,eIndex) in tagSelect"
+                    :key="eIndex"
+                    :label="eItem.label"
+                    :value="eItem.value">
+                    </el-option>
+                </el-select>
+                <el-input v-model="tag2" placeholder="请输入第二个Tag" clearable style="width:20%;"></el-input>
+            </el-form-item>
+            <el-form-item label="Tag_type">
+                <el-select v-model="tagType3" style="width:10%;">
+                    <el-option
+                    v-for="(eItem,eIndex) in tagSelect"
+                    :key="eIndex"
+                    :label="eItem.label"
+                    :value="eItem.value">
+                    </el-option>
+                </el-select>
+                <el-input v-model="tag3" placeholder="请输入第三个Tag" clearable style="width:20%;"></el-input>
+            </el-form-item>
+            <el-form-item label="Tag_type">
+                <el-select v-model="tagType4" style="width:10%;">
+                    <el-option
+                    v-for="(eItem,eIndex) in tagSelect"
+                    :key="eIndex"
+                    :label="eItem.label"
+                    :value="eItem.value">
+                    </el-option>
+                </el-select>
+                <el-input v-model="tag4" placeholder="请输入第四个Tag" clearable style="width:20%;"></el-input>
+            </el-form-item>
+            <el-form-item label="Tag_type">
+                <el-select v-model="tagType5" style="width:10%;">
+                    <el-option
+                    v-for="(eItem,eIndex) in tagSelect"
+                    :key="eIndex"
+                    :label="eItem.label"
+                    :value="eItem.value">
+                    </el-option>
+                </el-select>
+                <el-input v-model="tag5" placeholder="请输入第五个Tag" clearable style="width:20%;"></el-input>
+            </el-form-item>
+            <el-form-item label="上传涂鸦图片:" prop="filePath">
+                 <el-upload
+                     v-model="form.filePath"
+                     class="avatar-uploader"
+                     action="#"
+                     :show-file-list="false"
+                     :before-upload="beforeAvatarUpload">
+                     <img v-if="!imageUrl" class="bg-img" src="../../../static/img/default.png">
+                     <img v-if="imageUrl" class="bg-img" :src="imageUrl">
+                 </el-upload>
+             </el-form-item>
+         </el-form>
+         <div id="tui-image-editor"></div>
+    </div>
+</template>
+<script>
+import ImageEditor from 'tui-image-editor';
+import FileSaver from 'file-saver';
+import { doUpload, getFilePath } from "../../common/qiniuUtil";
+import { isEmptyUtils, openLoading, closeLoading,messageBox } from '../../common/utils';
+export default {
+    data() {
+        return {
+            imageUrl: '',
+            form: {
+                menuCode: '',
+                menuName: '',
+                actionCode: '',
+                actionName: '',
+                member: '',
+                filePath: ''
+            },
+            memberSelect: [],
+            tagSelect: [{
+                label: '新建new_tag_type',
+                value: 0
+            },{
+                label: '课程ID',
+                value: '001'
+            }],
+            tagType1: '',
+            tag1: '',
+            tagType2: '',
+            tag2: '',
+            tagType3: '',
+            tag3: '',
+            tagType4: '',
+            tag4: '',
+            tagType5: '',
+            tag5: '',
+        }
+    },
+    mounted() {
+        this.editorInstance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+            includeUI: {
+                menu: ['draw', 'text'],
+                loadImage: {
+                    path: '../../static/img/test.png',
+                    name: 'SampleImage',
+                },
+                initMenu: 'draw',
+                menuBarPosition: 'top',
+                uiSize: {
+                    width: 400,
+                    height: 700
+                }
+            },
+            cssMaxWidth: 400,
+            cssMaxHeight: 700,
+            selectionStyle: {
+                cornerSize: 20,
+                rotatingPointOffset: 70,
+            },
+        });
+    },
+    methods: {
+        beforeAvatarUpload(file) {
+             let _this = this;
+             if (isEmptyUtils(file)) {
+                 return;
+             }
+             _this.$message.info('开始上传');
+             doUpload(_this, file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
+                 _this.imageUrl = path.fullPath;
+                 _this.form.filePath = path.fullPath
+                 _this.$message.success('上传成功');
+             });
+             return false;  
+         },
+         changeTag1(val) {
+             if(!val) {
+
+             }
+         }
+    }
+}
+</script> 
+<style lang="less">
+.strack-list-contrainer {
+    .title {
+        margin-bottom: 30px;
+    }
+    .tui-image-editor-container {
+        width: 900px;
+        height: 900px;
+        .tui-image-editor-submenu {
+            width: 300px;
+            height: 130px;
+            white-space: normal !important;
+        }
+        .tui-image-editor-controls-buttons > div, .tui-image-editor-controls-logo{
+            display: none !important;
+        }
+        .tui-image-editor-button ul li input {
+            width: 18px;
+            height: 18px;
+        }
+    }
+}
+
+</style>
\ No newline at end of file

src/views/strack-data/strack-detail.vue

+<template>
+    <div class="strack-detail-container">
+        <el-breadcrumb separator="/" class="title">
+            <el-breadcrumb-item :to="{ path: '/strack-list' }">页面埋点管理</el-breadcrumb-item>
+            <el-breadcrumb-item>页面埋点详情</el-breadcrumb-item>
+        </el-breadcrumb>
+        <!-- 表格 -->
+        <el-table
+            class="search-table"
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column prop="menuCode" label="action_code" min-width="140" align="center"></el-table-column>
+            <el-table-column prop="menuName" label="action_name" min-width="140" align="center"></el-table-column>
+            <el-table-column label="component_tag投递规则" align="center">
+                <el-table-column prop="province" label="action_type" width="120" align="center"></el-table-column>
+                <el-table-column prop="city" label="规则内容" width="120" align="center"></el-table-column>
+            </el-table-column>
+            <el-table-column prop="menuCode" label="modified_date" min-width="140" align="center"></el-table-column>
+            <el-table-column prop="menuName" label="app_version" min-width="140" align="center"></el-table-column>
+            <el-table-column prop="stepEndName" label="位置" min-width="150" align="center"></el-table-column>
+            <el-table-column prop="stepEndName" label="产品" min-width="150" align="center"></el-table-column>
+            <el-table-column prop="stepEndName" label="开发" min-width="150" align="center"></el-table-column>
+            <el-table-column prop="stepEndName" label="当前处理人/流转" min-width="150" align="center">
+                <el-table-column prop="member" label="当前处理人" width="120" align="center"></el-table-column>
+                <el-table-column label="操作" fixed="right" align="center" min-width="200">
+                    <template slot-scope="scope">
+                        <el-button type="primary" size="small" @click="createPoing(scope.row)">流转</el-button>
+                    </template>
+                </el-table-column>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" align="center" min-width="200">
+                <template slot-scope="scope">
+                    <el-button type="primary" size="small" @click="createPoing(scope.row)">已发布</el-button>
+                    <el-button type="primary" size="small" @click="editColumn(scope.row)">编辑</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tableData: [{}]
+        }
+    },
+    methods: {
+        editColumn() {
+            
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.strack-detail-container {
+    .title {
+        margin-bottom: 30px;
+    }
+}
+</style>
\ No newline at end of file