Skip to content

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

页面编辑

上级 b8290d3f
隐藏空白字符变更
内嵌 并排
正在显示 包含 559 行增加 和 147 行删除
src/router/index.js
浏览文件 @ 602d3009
...@@ -46,6 +46,14 @@ export default new Router({ ...@@ -46,6 +46,14 @@ export default new Router({
{ // 页面埋点管理 { // 页面埋点管理
path: '/strack-list', path: '/strack-list',
component: resolve => require(['../views/strack-data/strack-list.vue'], resolve) 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 0 → 100644
浏览文件 @ 602d3009
<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 0 → 100644
浏览文件 @ 602d3009
<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
src/views/strack-data/strack-list.vue
浏览文件 @ 602d3009
<template> <template>
<div class="strack-list-contrainer"> <div class="strack-list-contrainer">
<div class="title">编辑页面埋点</div> <div class="title">页面埋点管理</div>
<el-form ref="form" label-width="120px" :model="form"> <el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
<el-form-item label="menu_code"> <el-form ref="form" :model="searchParam" label-suffix=":" label-width="120px" label-position="right" style="width:100%;">
<el-input disabled v-model="form.menuCode" style="width: 30%;"></el-input> <el-col :span="7">
</el-form-item> <el-form-item label="menu_code">
<el-form-item label="menu_name"> <el-input v-model="searchParam.menuCode" placeholder="请选择menu_code" style="width:200px"></el-input>
<el-input disabled v-model="form.menuName" style="width: 30%;"></el-input> </el-form-item>
</el-form-item> <el-form-item label="最后修改日期">
<el-form-item label="action_code"> <el-date-picker
<el-input disabled v-model="form.actionCode" style="width: 30%;"></el-input> type="date"
</el-form-item> placeholder="请选择最后修改日期"
<el-form-item label="action_name"> v-model="searchParam.modifyDate"
<el-input v-model="form.actionName" style="width: 30%;"></el-input> style="width: 200px;"
</el-form-item> value-format="yyyy-MM-dd">
<el-form-item label="下一个负责人"> </el-date-picker>
<el-select v-model="form.member" placeholder="请下一个负责人" style="width:30%;"> </el-form-item>
<el-option <el-form-item label="模块大类">
v-for="(eItem,eIndex) in memberSelect" <el-select v-model="searchParam.bigModule" placeholder="请选择模块大类" style="width:200px">
:key="eIndex" <el-option
:label="eItem" v-for="(eItem,eIndex) in bigModuleSelect"
:value="eItem"> :key="eIndex"
</el-option> :label="eItem"
</el-select> :value="eItem">
</el-form-item> </el-option>
<el-form-item label="Tag_type"> </el-select>
<el-select v-model="tagType1" @click="changeTag1" style="width:10%;"> </el-form-item>
<el-option </el-col>
v-for="(eItem,eIndex) in tagSelect" <el-col :span="7">
:key="eIndex" <el-form-item label="action_code">
:label="eItem.label" <el-input v-model="searchParam.actionCode" placeholder="请选择action_code" style="width:200px"></el-input>
:value="eItem.value"> </el-form-item>
</el-option> <el-form-item label="实现方式">
</el-select> <el-select v-model="searchParam.style" placeholder="请选择实现方式" style="width:200px">
<el-input v-model="tag1" placeholder="请输入第一个Tag" clearable style="width:20%;"></el-input> <el-option
</el-form-item> v-for="(eItem,eIndex) in styleSelect"
<el-form-item label="Tag_type"> :key="eIndex"
<el-select v-model="tagType2" style="width:10%;"> :label="eItem"
<el-option :value="eItem">
v-for="(eItem,eIndex) in tagSelect" </el-option>
:key="eIndex" </el-select>
:label="eItem.label" </el-form-item>
:value="eItem.value"> <el-form-item label="模块小类">
</el-option> <el-select v-model="searchParam.smallModule" placeholder="请选择模块小类" style="width:200px">
</el-select> <el-option
<el-input v-model="tag2" placeholder="请输入第二个Tag" clearable style="width:20%;"></el-input> v-for="(eItem,eIndex) in smallModuleSelect"
</el-form-item> :key="eIndex"
<el-form-item label="Tag_type"> :label="eItem"
<el-select v-model="tagType3" style="width:10%;"> :value="eItem">
<el-option </el-option>
v-for="(eItem,eIndex) in tagSelect" </el-select>
:key="eIndex" </el-form-item>
:label="eItem.label" </el-col>
:value="eItem.value"> <el-col :span="7">
</el-option> <el-form-item label="当前处理人">
</el-select> <el-select v-model="searchParam.member" placeholder="请选择当前处理人" style="width:200px">
<el-input v-model="tag3" placeholder="请输入第三个Tag" clearable style="width:20%;"></el-input> <el-option
</el-form-item> v-for="(eItem,eIndex) in memberSelect"
<el-form-item label="Tag_type"> :key="eIndex"
<el-select v-model="tagType4" style="width:10%;"> :label="eItem"
<el-option :value="eItem">
v-for="(eItem,eIndex) in tagSelect" </el-option>
:key="eIndex" </el-select>
:label="eItem.label" </el-form-item>
:value="eItem.value"> <el-form-item label="上线版本">
</el-option> <el-select v-model="searchParam.version" placeholder="请选择上线版本" style="width:200px">
</el-select> <el-option
<el-input v-model="tag4" placeholder="请输入第四个Tag" clearable style="width:20%;"></el-input> v-for="(eItem,eIndex) in versionSelect"
</el-form-item> :key="eIndex"
<el-form-item label="Tag_type"> :label="eItem"
<el-select v-model="tagType5" style="width:10%;"> :value="eItem">
<el-option </el-option>
v-for="(eItem,eIndex) in tagSelect" </el-select>
:key="eIndex" </el-form-item>
:label="eItem.label" <el-form-item label="状态">
:value="eItem.value"> <el-select v-model="searchParam.status" placeholder="请选择状态" style="width:200px">
</el-option> <el-option
</el-select> v-for="(eItem,eIndex) in statusSelect"
<el-input v-model="tag5" placeholder="请输入第五个Tag" clearable style="width:20%;"></el-input> :key="eIndex"
</el-form-item> :label="eItem"
<el-form-item label="上传涂鸦图片:" prop="filePath"> :value="eItem">
<el-upload </el-option>
v-model="form.filePath" </el-select>
class="avatar-uploader" </el-form-item>
action="#" </el-col>
:show-file-list="false" <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
:before-upload="beforeAvatarUpload"> <el-button type="default" size="small" @click="search(1)">搜索</el-button>
<img v-if="!imageUrl" class="bg-img" src="../../../static/img/default.png"> <el-button type="primary" size="small" @click="createMenu">新建menu</el-button>
<img v-if="imageUrl" class="bg-img" :src="imageUrl"> </el-col>
</el-upload> </el-form>
</el-form-item> </el-row>
</el-form> <!-- 表格 -->
<div id="tui-image-editor"></div> <el-table
class="search-table"
:data="tableData"
style="width: 100%"
:empty-text="tableText">
<el-table-column prop="menuCode" label="menu_code" min-width="140" align="center"></el-table-column>
<el-table-column prop="menuName" label="menu_name" 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="menuCode" label="模块大类" min-width="140" align="center"></el-table-column>
<el-table-column prop="menuName" label="模块小类" 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 label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editColumn(scope.row)">编辑</el-button>
<el-button type="primary" size="small" @click="createPoing(scope.row)">新建页面埋点</el-button>
<el-button type="primary" size="small" @click="visitData(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>
<!-- 新建menu -->
<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=":"
label-position="right"
:rules="rules"
size="mini">
<el-col :span="20">
<el-form-item label="menu_code" prop="menuCode">
<el-input v-model="form.menuCode" placeholder="请选择menu_code" style="width:200px"></el-input>
</el-form-item>
<el-form-item label="menu_name" prop="menuName">
<el-input v-model="form.menuName" placeholder="请选择action_code" style="width:200px"></el-input>
</el-form-item>
<el-form-item label="实现方式" prop="style">
<el-select v-model="form.style" 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" 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="smallModule">
<el-select v-model="form.smallModule" 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="位置" 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-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> </div>
</template> </template>
<script> <script>
import ImageEditor from 'tui-image-editor';
import FileSaver from 'file-saver';
import { doUpload, getFilePath } from "../../common/qiniuUtil"; import { doUpload, getFilePath } from "../../common/qiniuUtil";
import { isEmptyUtils, openLoading, closeLoading,messageBox } from '../../common/utils'; import { isEmptyUtils, openLoading, closeLoading,messageBox } from '../../common/utils';
export default { export default {
data() { data() {
return { return {
imageUrl: '', labelPosition: 'right',
form: { dialogVisible: false,
searchParam: {
menuCode: '', menuCode: '',
menuName: '',
actionCode: '', actionCode: '',
actionName: '', modifyDate: '',
style: '',
bigModule: '',
smallModule: '',
member: '', member: '',
filePath: '' version: '',
}, status: '',
memberSelect: [], pageNo: 1,
tagSelect: [{ pageSize: 15
label: '新建new_tag_type', },
value: 0 smallModuleSelect: [],
},{ styleSelect: [],
label: '课程ID', bigModuleSelect: [],
value: '001' memberSelect: [],
}], statusSelect: [],
tagType1: '', versionSelect: [],
tag1: '', tableData: [{
tagType2: '', 'menuCode': '001'
tag2: '', }],
tagType3: '', totalRows: 0,
tag3: '', tableText: '你输入错咯，找不到结果啦',
tagType4: '', form: {
tag4: '', menuCode: '',
tagType5: '', menuName: '',
tag5: '', style: '',
bigModule: '',
smallModule: '',
location: ''
},
imageUrl: '',
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' }
],
style: [
{ required: true, message: '请选择实现方式', trigger: 'change' }
],
bigModule: [
{ required: true, message: '请选择模块大类', trigger: 'change' }
],
smallModule: [
{ required: true, message: '请选择模块小类', trigger: 'change' }
],
location: [
{ required: true, message: '请上传位置图片', trigger: 'change' }
]
}
} }
}, },
mounted() { 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: { methods: {
search(param) {
if(param) this.searchParam.pageNo = 1;
},
// 新建menu
createMenu() {
this.dialogVisible = true;
this.$refs.menuForm.resetFields();
},
// 编辑
editColumn(row) {
this.dialogVisible = true;
},
// 新建页面埋点
createPoing(row) {
this.$router.push({path: 'create-point', query: {}})
},
// 查看详情
visitData(row) {
this.$router.push({path: 'strack-detail', query: {}})
},
// 上传menu图片
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
let _this = this; let _this = this;
if (isEmptyUtils(file)) { if (isEmptyUtils(file)) {
return; return;
} }
_this.$message.info('开始上传'); _this.$message.info('开始上传');
doUpload(_this, file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) { doUpload(_this, file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
_this.imageUrl = path.fullPath; _this.imageUrl = path.fullPath;
_this.form.filePath = path.fullPath _this.form.location = path.fullPath
_this.$message.success('上传成功'); _this.$message.success('上传成功');
}); });
return false; return false;
}, },
changeTag1(val) { // 保存新建/编辑menu
if(!val) { saveCreateAndEditMenu() {
this.$refs.menuForm.validate((valid) => {
} if (valid) {
}
}
});
},
handleSizeChange(value) {
this.searchParam.pageSize = value;
this.search();
},
handleCurrentChange(value) {
this.searchParam.pageNo = value;
this.search();
}
} }
} }
</script> </script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或