Skip to content

P
pica-sensitive-admin
提交 02d1b5f4 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

创建埋点页面

上级 5787f7e4
隐藏空白字符变更
内嵌 并排
正在显示 包含 355 行增加 和 265 行删除
src/router/index.js
浏览文件 @ 02d1b5f4
......@@ -43,15 +43,11 @@ export default new Router({
path: '/path-data',
component: resolve => require(['../views/user-path/funnel-data.vue'], resolve)
},
{ // 页面埋点管理
{ // 页面管理
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
浏览文件 @ 02d1b5f4
<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="180px" :model="form" label-suffix=":">
<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 v-model="form.actionCode" placeholder="请输入action_code(保存后不可修改)" style="width: 30%;"></el-input>
</el-form-item>
<el-form-item label="action_name">
<el-input v-model="form.actionName" placeholder="请输入action_name" style="width: 30%;"></el-input>
</el-form-item>
<el-form-item label="上线时app_version">
<el-select v-model="form.member" placeholder="请选择app_version" 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" @change="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="ACTION_TYPE">
<el-select v-model="actionType" 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="请输入component_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>
<!-- 新建tag -->
<el-dialog
title="新建tag_type"
<div class="strack-detail-container">
<div class="title">页面列表</div>
<el-form ref="form" :model="searchParam" label-suffix=":" label-width="120px" label-position="right" style="width:100%;">
<el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
<el-col :span="15">
<el-form-item label="">
<el-input v-model="searchParam.menuCode" clearable placeholder="请输入要查找的埋点编码或名称" style="width:400px;margin-left: -74px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
<el-col :span="8">
<el-form-item label="所属页面">
<el-select v-model="searchParam.version" clearable placeholder="请选择所属页面" style="width:200px">
<el-option
v-for="(eItem,eIndex) in versionSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发布版本">
<el-select v-model="searchParam.version" clearable placeholder="请选择发布版本" style="width:200px">
<el-option
v-for="(eItem,eIndex) in versionSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="事件类型">
<el-select v-model="searchParam.smallModule" clearable placeholder="请选择事件类型" style="width:200px">
<el-option
v-for="(eItem,eIndex) in smallModuleSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="当前处理人">
<el-select v-model="searchParam.member" clearable placeholder="请选择当前处理人" style="width:200px">
<el-option
v-for="(eItem,eIndex) in memberSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发布时间">
<el-select v-model="searchParam.style" clearable placeholder="请选择发布时间" style="width:200px">
<el-option
v-for="(item,index) in styleSelect"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchParam.status" clearable placeholder="请选择状态" style="width:200px">
<el-option
v-for="(eItem,eIndex) in statusSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<el-table
class="search-table"
:data="tableData"
style="width: 100%"
:empty-text="tableText"
@row-click="tableRowClick">
<el-table-column prop="menuCode" label="事件编码" min-width="100" align="left"></el-table-column>
<el-table-column prop="menuName" label="事件名" min-width="140" align="left"></el-table-column>
<el-table-column prop="stepEndName" label="所属页面" min-width="100" align="left"></el-table-column>
<el-table-column prop="menuCode" label="事件类型" min-width="140" align="left"></el-table-column>
<el-table-column prop="menuName" label="发布版本" min-width="120" align="left"></el-table-column>
<el-table-column prop="menuName" label="发布时间" min-width="140" align="left"></el-table-column>
<el-table-column prop="img" label="图例" min-width="150" align="left">
<template slot-scope="scope">
<img :src="scope.row.img" />
</template>
</el-table-column>
<el-table-column prop="menuName" label="当前处理人" min-width="100" align="left"></el-table-column>
<el-table-column prop="menuName" label="状态" min-width="80" align="left"></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="visitData(scope.row)">指派</el-button>
<el-button type="primary" size="small" @click="editColumn(scope.row)">编辑</el-button>
<el-button type="primary" size="small" @click="downPage(scope.row)">下线</el-button>
<el-button type="primary" size="small" @click="createPoing(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows">
</el-pagination>
</div>
<!-- 流转 -->
<el-dialog
title="指派"
:visible.sync="dialogVisible"
width="30%">
<el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
<el-form ref="tagForm"
<el-form ref="changeForm"
:model="form"
label-width="150px"
label-suffix=":"
label-position="right"
size="mini">
<el-col :span="20">
<el-form-item label="状态流转" prop="changeStatus">
<el-select v-model="form.changeStatus" placeholder="请选择状态流转" style="width:200px">
<el-option
v-for="(eItem,eIndex) in statusSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="人员流转" prop="member">
<el-select v-model="form.member" placeholder="请选择人员流转" style="width:200px">
<el-option
v-for="(eItem,eIndex) in memberSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmChange">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="新建(编辑)menu"
:visible.sync="dialogVisible"
width="30%">
<el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
<el-form ref="menuForm"
:model="form"
label-width="150px"
label-suffix=":"
......@@ -120,148 +175,163 @@
:rules="rules"
size="mini">
<el-col :span="20">
<el-form-item label="新tag_type名称" prop="typeName">
<el-input v-model="form.typeName" placeholder="请输入新tag type的名称" style="width: 250px;"></el-input>
<el-form-item label="页面名">
<span>首页</span>
</el-form-item>
<el-form-item label="页面编码">
<span>00010001</span>
</el-form-item>
<el-form-item label="事件名">
<el-input v-model="form.menuName" placeholder="请输入事件名" style="width:200px"></el-input>
</el-form-item>
<el-form-item label="新type定义" prop="type">
<el-input v-model="form.type" placeholder="请输入新tag定义内容" style="width: 250px;"></el-input>
<el-form-item label="事件类型" prop="style">
<el-select v-model="form.style" clearable placeholder="请选择实现方式" style="width:200px">
<el-option
v-for="(eItem,eIndex) in styleSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发布版本" prop="bigModule">
<el-select v-model="form.bigModule" clearable placeholder="请选择模块大类" style="width:200px">
<el-option
v-for="(eItem,eIndex) in bigModuleSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上传图例" prop="location">
<el-upload
v-model="form.location"
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-item label="额外投递1" prop="bigModule">
<el-select v-model="form.bigModule" clearable placeholder="请选择额外投递1" style="width:200px">
<el-option
v-for="(eItem,eIndex) in bigModuleSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
<i class="el-icon-remove-outline"></i>
<i class="el-icon-circle-plus-outline"></i>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmCreate">确 定</el-button>
<el-button type="primary" @click="saveCreateAndEditMenu">确 定</el-button>
</span>
</el-dialog>
<!-- 下线页面 -->
<el-dialog
title="下线页面"
:visible.sync="downPageVisible"
width="30%">
<el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
<el-form ref="downForm"
:model="form"
label-width="150px"
label-suffix=":"
label-position="right"
:rules="downRules"
size="mini">
<el-col :span="20">
<el-form-item label="页面名">
<span>首页</span>
</el-form-item>
<el-form-item label="页面编码">
<span>00010001</span>
</el-form-item>
<el-form-item label="实现方式">
<span>首页</span>
</el-form-item>
<el-form-item label="归属模块">
<span>00010001</span>
</el-form-item>
<el-form-item label="下线版本" prop="bigModule">
<el-select v-model="form.bigModule" clearable placeholder="请选择下线版本" style="width:200px">
<el-option
v-for="(eItem,eIndex) in bigModuleSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下线时间" prop="bigModule">
<el-select v-model="form.bigModule" clearable placeholder="请选择下线时间" style="width:200px">
<el-option
v-for="(eItem,eIndex) in bigModuleSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveCreateAndEditMenu">确 定</el-button>
</span>
</el-dialog>
</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 {
dialogVisible: false,
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: '',
actionType: '',
tableData: [{}],
form: {
typeName: '',
type: ''
changeStatus: '',
member: ''
},
rules: {
typeName:[
{ required: true, message: '请输入新的tag_type名称', trigger: 'blur' }
],
type:[
{ required: true, message: '请输入新type定义', trigger: 'blur' }
],
}
statusSelect: [],
memberSelect: []
}
},
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,
},
});
this.search();
},
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;
search() {
},
changeTag1(val) {
if(!val) {
this.dialogVisible = true;
this.tagType1 = '';
}
// 流转
exchange() {
this.dialogVisible = true;
},
confirmCreate() {
this.$refs.form.validate((valid) => {
if(valid) {
}
})
// 确认流转
confirmChange() {
this.dialogVisible = false;
this.search();
},
// 编辑
editColumn(row) {
this.$router.push({path: 'create-point', query: {}})
}
}
}
</script>
<style lang="less">
.strack-list-contrainer {
</script>
<style lang="less" scoped>
.strack-detail-container {
.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-list.vue
浏览文件 @ 02d1b5f4
......@@ -237,13 +237,13 @@
<el-form-item label="事件名">
<el-input v-model="form.actionName" placeholder="请输入事件名" style="width:200px"></el-input>
</el-form-item>
<el-form-item label="事件类型" prop="style">
<el-form-item label="事件类型" prop="actionType">
<el-select v-model="form.actionType" clearable placeholder="请选择事件类型" style="width:200px">
<el-option
v-for="(eItem,eIndex) in actionTypeSelect"
v-for="(eItem,eIndex) in actionSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
:label="eItem.value"
:value="eItem.no">
</el-option>
</el-select>
</el-form-item>
......@@ -266,28 +266,31 @@
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="上传图例" prop="location">
<el-form-item label="上传图例" prop="actionPath">
<el-upload
v-model="form.actionPath"
class="avatar-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
:before-upload="uploadActionPath">
<img v-if="!form.actionPath" class="bg-img" src="../../../static/img/default.png">
<img v-if="form.actionPath" class="bg-img" :src="form.actionPath">
</el-upload>
</el-form-item>
<el-form-item label="额外投递1" prop="bigModule">
<el-select v-model="form.bigModule" clearable placeholder="请选择额外投递1" style="width:200px">
<el-option
v-for="(eItem,eIndex) in actionSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
<el-form-item label="额外投递1" prop="tagCodeList">
<div v-for="(item, index) in tagArray" :key="index">
<el-select v-model="form.tagCodeList" multiple clearable placeholder="请选择额外投递1" style="width:200px">
<el-option
v-for="(eItem,eIndex) in tagSelect"
:key="eIndex"
:label="eItem"
:value="eItem">
</el-option>
</el-select>
<i class="el-icon-remove-outline"></i>
<i class="el-icon-circle-plus-outline"></i>
</el-select>
</div>
</el-form-item>
</el-col>
</el-form>
......@@ -399,6 +402,7 @@ import { isEmptyUtils, openLoading, closeLoading } from '../../common/utils';
export default {
data() {
return {
tagArray: [{name: ''}],
startTime: '',
endTime: '',
rowId: 0,
......@@ -425,20 +429,19 @@ export default {
memberSelect: [],
statusSelect: [],
versionSelect: [],
actionSelect: [],
assignSelect: [],
assignstatusSelect: [],
actionTypeSelect: [],
actionSelect: [],
tagSelect: [],
tableData: [],
totalRows: 0,
tableText: '无匹配结果',
form: { // 新建埋点页面
menuCode: '',
menuName: '',
style: '',
bigModule: '',
smallModule: '',
location: ''
actionName: '',
actionType: '',
releaseVersion: '',
releaseTime: '',
actionPath: '',
},
pageForm: { // 新建（编辑）页面
imageUrl: '',
......@@ -464,23 +467,19 @@ export default {
offVersion: ''
},
rules: {
menuCode: [
{ required: true, message: '请输入menu_code', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
menuName: [
{ required: true, message: '请输入menu_name', trigger: 'blur' }
actionName: [
{ required: true, message: '请输入事件名', trigger: 'blur' },
],
style: [
{ required: true, message: '请选择实现方式', trigger: 'change' }
actionType: [
{ required: true, message: '请选择事件类型', trigger: 'blur' }
],
bigModule: [
{ required: true, message: '请选择模块大类', trigger: 'change' }
releaseTime: [
{ required: true, message: '请选择发布时间', trigger: 'change' }
],
smallModule: [
{ required: true, message: '请选择模块小类', trigger: 'change' }
releaseVersion: [
{ required: true, message: '请选择发布版本', trigger: 'change' }
],
location: [
actionPath: [
{ required: true, message: '请上传位置图片', trigger: 'change' }
]
},
......@@ -586,6 +585,15 @@ export default {
}
);
},
// 获取事件类型下拉数据
getActionList() {
this.getData(
"get", `/basic-data/constants/app/P251`, {},
res => {
this.actionSelect = res.data;
}
);
},
// 点击表格某一行
tableRowClick(row, column, event) {
console.log("=========", row)
......@@ -666,10 +674,13 @@ export default {
},
// 新建埋点
createPoing(row) {
this.getActionList();
this.dialogVisible = true;
if(this.$refs.menuForm) {
this.$refs.menuForm.resetFields();
}
this.form.pageName = row.pageName;
this.form.pageCode = row.pageCode;
},
// 保存新建埋点
saveCreateAndEditMenu() {
......@@ -723,6 +734,19 @@ export default {
});
return false;
},
// 上传埋点图片
uploadActionPath(file) {
let _this = this;
if (isEmptyUtils(file)) {
return;
}
_this.$message.info('开始上传');
doUpload(_this, file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
_this.form.actionPath = path.fullPath;
_this.$message.success('上传成功');
});
return false;
},
handleSizeChange(value) {
this.searchParam.pageSize = value;
this.searchList();
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或