Skip to content

X
x-training-admin
提交 8833913d authored 作者: 王诒正's avatar 王诒正
浏览文件
操作

案例删除与跳转页面的优化

上级 44726df4
隐藏空白字符变更
内嵌 并排
正在显示 包含 284 行增加 和 10 行删除
src/api/cases.js
浏览文件 @ 8833913d
......@@ -21,6 +21,6 @@ export function caseUpdate(id, data) {
}
// 删除案例背景
export function caseDelete(id, params) {
export function caseDelete(id, params = {}) {
return httpRequest.delete(`/api/opera/v1/operations/${id}/case`, { params })
}
src/api/common.js 0 → 100644
浏览文件 @ 8833913d
import httpRequest from '@/utils/axios'
// 文件上传
export function uploadFile(data) {
return httpRequest.post('/api/opera/v1/file/upload', data)
}
src/app.vue
浏览文件 @ 8833913d
<template>
<div id="app">
<router-view />
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'app',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
src/pages/yhfq/albj/add.vue 0 → 100644
浏览文件 @ 8833913d
<template>
<div>
<div>
<el-card class="box-card">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/yhfq/albj' }">案例背景</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/yhfq/albj/detail' }">案例背景</el-breadcrumb-item>
</el-breadcrumb>
</el-card>
</div>
<div>
<el-card class="box-card">
<el-form size="mini" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="ruleForm">
<el-form-item label="案例名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="图片" prop="poster_url">
<el-upload
action="/api/opera/v1/file/upload"
list-type="picture-card"
name="file"
:limit="1"
:multiple="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="uploadSuccess"
:on-error="uploadError"
:data="{ type: 'image' }"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="visible">
<el-input :v-model="ruleForm.poster_url">
<img width="100%" v-if="ruleForm.poster_url" :src="ruleForm.poster_url" alt="">
</el-input>
</el-dialog>
</el-form-item>
<el-form-item label="姓名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="公司" prop="company">
<el-input v-model="ruleForm.company"></el-input>
</el-form-item>
<el-form-item label="公司详情" prop="company_detail">
<el-input type="textarea" v-model="ruleForm.company_detail"></el-input>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-input v-model="ruleForm.department"></el-input>
</el-form-item>
<el-form-item label="部门详情" prop="department_detail">
<el-input type="textarea" v-model="ruleForm.department_detail"></el-input>
</el-form-item>
<el-form-item label="职位" prop="position">
<el-input v-model="ruleForm.position"></el-input>
</el-form-item>
<el-form-item label="职位详情" prop="position_detail">
<el-input type="textarea" v-model="ruleForm.position_detail"></el-input>
</el-form-item>
<el-form-item label="营销产品" prop="product">
<el-input v-model="ruleForm.product"></el-input>
</el-form-item>
<el-form-item label="营销产品详情" prop="product_detail">
<el-input type="textarea" v-model="ruleForm.product_detail"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
import * as api from '@/api/cases'
export default {
name: 'add',
mounted() {
this.ruleForm.level = this.$route.params.level
},
data() {
return {
ruleForm: {
name: '',
username: '',
company: '',
companyDetail: '',
department: '',
department_detail: '',
position: '',
position_detail: '',
product: '',
product_detail: '',
poster_url: '',
is_sort: 0,
level: 0
},
visible: false,
rules: {
name: [
{ required: true, message: '请输入案例名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
username: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
company: [
{ required: true, message: '请输入公司', trigger: 'blur' },
{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
],
company_detail: [
{ required: true, message: '请输入公司详情', trigger: 'blur' }
],
department: [
{ required: true, message: '请输入部门', trigger: 'blur' },
{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
],
department_detail: [
{ required: false, message: '请输入部门详情', trigger: 'blur' }
],
position: [
{ required: true, message: '请输入职位', trigger: 'blur' },
{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
],
position_detail: [
{ required: true, message: '请输入职位详情', trigger: 'blur' }
],
product: [
{ required: true, message: '请输入营销产品', trigger: 'blur' },
{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
],
product_detail: [
{ required: true, message: '请输入营销产品详情', trigger: 'blur' }
],
poster_url: [
{ required: true, message: '请输入营销产品详情', trigger: 'blur' }
]
}
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePictureCardPreview(file) {
this.ruleForm.poster_url = file.url
this.visible = true
},
uploadSuccess(response, file, fileList) {
console.log('文件上传成功')
console.log(response, file, fileList)
if (response.code === 0) {
var data = response.data
var imageInfo = data[0]
this.ruleForm.poster_url = imageInfo.url
this.visible = false
} else {
console.log('文件上传失败')
this.$message.error('文件上传失败')
}
},
uploadError(err, file, fileList) {
console.log('文件上传失败')
console.log(err)
this.$message.error('文件上传失败')
},
onSubmit() {
console.log(this.ruleForm)
api
.caseCreate(this.ruleForm)
.then(res => {
if (res.code === 0) {
this.$message.success('创建成功')
this.$router.push({
name: 'case-list',
params: {
level: this.ruleForm.level
}
})
return true
} else {
this.$message.error(res.message)
return false
}
})
.catch(error => {
console.log(error)
this.$message.error('创建失败')
return false
})
}
}
}
</script>
<style>
</style>
src/pages/yhfq/albj/detail.vue
浏览文件 @ 8833913d
......@@ -4,7 +4,7 @@
<el-card class="box-card">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/yhfq/albj' }">案例背景</el-breadcrumb-item>
<el-breadcrumb-item :to="{ name: 'case-list', params: { level: this.level } }">案例背景</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/yhfq/albj/detail' }">案例背景</el-breadcrumb-item>
</el-breadcrumb>
</el-card>
......@@ -47,12 +47,14 @@ export default {
this.companyDetail = data.company_detail
this.productDetail = data.product_detail
this.positionDetail = data.position_detail
this.level = data.level.toString()
},
data() {
return {
companyDetail: '',
productDetail: '',
positionDetail: ''
positionDetail: '',
level: ''
}
}
}
......
src/pages/yhfq/albj/index.vue
浏览文件 @ 8833913d
......@@ -14,7 +14,9 @@
<div>
<el-card class="box-card">
<el-row>
<el-button size="mini" icon="el-icon-plus" type="success">添加</el-button>
<el-button size="mini" icon="el-icon-plus" type="success">
<router-link :to="{ name: 'case-add', params: { level: activeName } }"> 添加 </router-link>
</el-button>
</el-row>
</el-card>
<el-card class="box-card">
......@@ -80,7 +82,9 @@
<div>
<el-card class="box-card">
<el-row>
<el-button size="mini" icon="el-icon-plus" type="success">添加</el-button>
<el-button size="mini" icon="el-icon-plus" type="success">
<router-link :to="{ name: 'case-add', params: { level: activeName } }"> 添加 </router-link>
</el-button>
</el-row>
</el-card>
<el-card class="box-card">
......@@ -131,8 +135,8 @@
label="操作">
<template slot-scope="scope">
<el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
<el-option :value="{ tag: 'reach', row: scope.row }" label="触达方案"></el-option>
<el-option :value="{ tag: 'group', row: scope.row }" label="用户群"></el-option>
<el-option :value="{ tag: 'reach', row: scope.row }" label="触达方案"></el-option>
<el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
<el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
</el-select>
......@@ -151,10 +155,20 @@
import * as api from '@/api/cases'
export default {
mounted() {
var level = this.$route.params.level
if (level !== undefined) {
this.activeName = level
}
api.caseList({ level: parseInt(this.activeName) }).then(res => {
console.log(res)
if (res.code === 0) {
this.tableData1 = res.data
if (this.activeName === '1') {
this.tableData1 = res.data
} else if (this.activeName === '2') {
this.tableData2 = res.data
} else {
this.tableData3 = res.data
}
}
}).catch(error => {
console.log(error)
......@@ -169,6 +183,7 @@ export default {
tableData3: []
}
},
inject: ['reload'],
methods: {
handleClick(tab, event) {
api.caseList({ level: parseInt(this.activeName) }).then(res => {
......@@ -192,10 +207,36 @@ export default {
name: 'case-detail',
params: opera.row
})
break
return true
case 'delete':
this.$confirm('确认删除？', '提示')
.then(_ => {
this.deleteCase(opera.row.id, opera.row.level.toString())
this.activeName = opera.row.level.toString()
return true
})
.catch(_ => {
return false
})
break
}
},
deleteCase(id, level) {
api.caseDelete(id).then(res => {
if (res.code === 0) {
this.$message.success(res.message)
this.activeName = level
this.reload()
return true
} else {
this.$message.error(res.message)
return false
}
}).catch(error => {
console.log(error)
this.$message.error('删除失败')
return false
})
}
}
}
......
src/router/routes.js
浏览文件 @ 8833913d
......@@ -4,8 +4,9 @@ import Layout from '@/components/layout'
const userGroup = [
/* 首页 */
{ path: '/yhfq', redirect: '/yhfq/albj' },
{ path: '/yhfq/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
{ path: '/yhfq/albj', name: 'case-list', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
{ path: '/yhfq/albj/detail', name: 'case-detail', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj/detail') },
{ path: '/yhfq/albj/add', name: 'case-add', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj/add') },
{ path: '/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
{ path: '/yhfq/alfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/alfx') },
{ path: '/yhfq/yhqfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/yhqfx') }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论