ZhangBin
/
datang-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

详情页

master
song 4 years ago
parent
366620c351
commit
83ad4bb7e2
10 changed files with 409 additions and 432 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/api/contentDetail.js
  2. 2
      src/components/Banner/addOrEdit.vue
  3. 60
      src/components/Banner/form.vue
  4. 27
      src/components/Banner/index.vue
  5. 162
      src/components/Detail/addOrEdit.vue
  6. 118
      src/components/Detail/detailsOfDistribution.vue
  7. 3
      src/components/Detail/editor.vue
  8. 60
      src/components/Detail/form.vue
  9. 341
      src/components/Detail/index.vue
  10. 2
      src/views/richText/index.vue

66
src/api/contentDetail.js
View File

@ -0,0 +1,66 @@
import request from '@/utils/request'
const contentDetail = '/back/contentDetail'
/**
* 查询内容详情列表
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function POST_QUERY_DETAIL(params) {
return request({
url: `${contentDetail}/list`,
method: 'post',
data:params
}).then(res => {
return res.data
})
}
/**
* 删除内容详情
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function DELETE_DETAIL(params) {
return request({
url: `${contentDetail}/delete`,
method: 'post',
data:params
}).then(res => {
return res.data
})
}
/**
* 添加内容详情
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function ADD_DETAIL(params) {
return request({
url: `${contentDetail}/add`,
method: 'post',
data:params
}).then(res => {
return res.data
})
}
/**
* 修改内容详情
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function UPDATE_DETAIL(params) {
return request({
url: `${contentDetail}/update`,
method: 'post',
data:params
}).then(res => {
return res.data
})
}

2
src/components/Banner/detailsOfDistribution.vue → src/components/Banner/addOrEdit.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<div class="title">修改轮播图</div> <div class="title">{{ showAdd ? '添加' : '修改' }}轮播图</div>
<el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm"> <el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
<el-form-item label="图片：" prop="url"> <el-form-item label="图片：" prop="url">
<el-upload <el-upload

60
src/components/Banner/form.vue
View File

@ -1,60 +0,0 @@
<template>
<div class="form-container">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="场地">
<el-select v-model="formInline.locationId" value="" placeholder="场地">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in locationId" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item style="padding-left:30px">
<el-button type="default" @click="resetForm1('formInline')">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {GET_LOCATIONS} from '@/api/common'
export default {
name: 'form-container',
props: ['label'],
data() {
return {
formInline: {
locationId: ''
},
locationId: ''
}
},
mounted() {
this.getLocationId();
},
methods: {
getLocationId() {
GET_LOCATIONS().then(res => {
this.locationId = res
})
},
onSubmit() {
this.$emit('submit', this.formInline)
},
resetForm1() {
this.formInline = {
name: ''
};
this.$emit('resetForm');
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.form-container {
padding: 20px;
background: #fff;
}
</style>

27
src/components/Banner/index.vue
View File

@ -14,9 +14,12 @@
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="id" prop="id"
label="序号" label="轮播图id"
type="index" align="center"
align="center"> width="250">
<template slot-scope="lists">
{{ lists.row.id }}
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="name" prop="name"
@ -64,7 +67,7 @@
placement="top" placement="top"
width="160" width="160"
:value="visible"> :value="visible">
<p>这是一段内容这是一段内容确定删除吗？</p> <p>确定删除吗？</p>
<div style="text-align: right; margin: 0"> <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button> <el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="danger" size="mini" plain @click="deleteItem(lists.row.id)">确定</el-button> <el-button type="danger" size="mini" plain @click="deleteItem(lists.row.id)">确定</el-button>
@ -92,21 +95,19 @@
width="600px" width="600px"
:show-close="false" :show-close="false"
:visible.sync="showModal"> :visible.sync="showModal">
<details-of-distribution ref="distribution" :show-add="showAdd" :currList="currList" v-if="showModal" @close="close"></details-of-distribution> <add-or-edit ref="distribution" :show-add="showAdd" :currList="currList" v-if="showModal" @close="close"></add-or-edit>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
const DetailsOfDistribution = () => import('./detailsOfDistribution.vue'); const AddOrEdit = () => import('./addOrEdit.vue');
import Banner from '@/components/Banner';
import { import {
POST_QUERY_CAROUSEL, POST_QUERY_CAROUSEL,
POST_DELETE_CAROUSEL POST_DELETE_CAROUSEL
} from '@/api/carousel' } from '@/api/carousel'
import Alert from "@/utils/alert"; import Alert from "@/utils/alert";
import {pageSize} from '../../config';
import {tabList} from '../../filters/code'; import {tabList} from '../../filters/code';
export default { export default {
@ -129,19 +130,13 @@
pageNum: 1, pageNum: 1,
visible: false, visible: false,
showAdd: true, showAdd: true,
params: {
from: 0,
size: pageSize,
locationId: ''
}
} }
}, },
mounted() { mounted() {
this.getList() this.getList()
}, },
components: { components: {
DetailsOfDistribution, AddOrEdit,
Banner
}, },
methods: { methods: {
/** /**
@ -192,7 +187,7 @@
} }
} }
} }
return item.title return item && item.title ? item.title : ''
}, },
addModal(){ addModal(){

162
src/components/Detail/addOrEdit.vue
View File

@ -0,0 +1,162 @@
<template>
<div class="container">
<div class="title">{{ showAdd ? '添加' : '修改' }}详情</div>
<el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
<el-form-item label="位置：" prop="showPage">
<el-cascader
v-model="formLabelAlign.showPage"
:props="props"
:options="tabList"
@change="handleChange">
</el-cascader>
</el-form-item>
<el-form-item label="正文：" prop="content">
<editor />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit(formLabelAlign)">确定</el-button>
<el-button @click="$emit('close')">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Editor from './editor.vue';
import {BASE_API} from '../../config';
import {tabList} from '../../filters/code';
import {
ADD_DETAIL,
UPDATE_DETAIL,
} from '@/api/carousel';
import Alert from "@/utils/alert";
export default {
name: "detailsOfDistribution",
components: {
Editor,
},
props: ['currList', 'showAdd'],
data() {
return {
labelPosition: 'right',
formLabelAlign: {
showPage: ['00', '0000'],
content: 0
},
BASE_API,
tabList,
props: {
value: 'code',
label: 'title',
children: 'children'
},
rules: {
showPage: [
{ type: 'array', required: true, message: '请选择位置', trigger: 'change' }
],
content: [
{ required: true, message: '请选择状态', trigger: 'change' }
],
}
}
},
mounted() {
if(this.currList && this.currList && !this.showAdd){
const { id, showPage, content } = this.currList
this.formLabelAlign.id = id;
this.formLabelAlign.showPage.splice(0, 1, showPage.slice(0, 2))
this.formLabelAlign.showPage.splice(1, 1, showPage)
this.formLabelAlign.content = content;
}else{
const code = localStorage.getItem('code')
if(!code) return
this.formLabelAlign.showPage.splice(0, 1, code.slice(0, 2))
this.formLabelAlign.showPage.splice(1, 1, code)
}
},
methods: {
// 位置选择
handleChange(value) {
this.formLabelAlign.showPage = value
},
submit(formName) {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
if(this.showAdd){
this.addCarousel(formName)
}else{
this.updateCarousel(formName)
}
} else {
console.log('error submit!!');
return false;
}
});
},
/**
* 添加轮播图
*/
async addCarousel(formName){
const { showPage, content } = formName;
const params = {
showPage: showPage[1],
content
};
await ADD_DETAIL(params).then((res) => {
if(res.code === 200){
Alert.success('添加成功');
this.$emit('close', true)
}else{
Alert.fail(res.msg || '添加失败');
}
})
},
/**
* 修改轮播图
*/
async updateCarousel(formName){
const { id, showPage, content } = formName;
const params = {
id,
showPage: showPage[1],
content
};
await UPDATE_DETAIL(params).then((res) => {
if(res.code === 200){
Alert.success('修改成功');
this.$emit('close', true)
}else{
Alert.fail(res.msg || '修改失败');
}
})
}
}
}
</script>
<style lang="scss" scoped>
.title{
width: 100%;
margin-bottom: 30px;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.avatar-uploader-icon {
display: inline-block;
border: 1px dashed #d9d9d9;
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
</style>

118
src/components/Detail/detailsOfDistribution.vue
View File

@ -1,118 +0,0 @@
<template>
<el-row>
<el-col :span="24" style="margin-bottom: 10px;">
<div class="grid-content bg-purple-dark">
<el-col :span="12">
<div class="grid-content bg-purple">分润对象:</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">分润比例:</div>
</el-col>
</div>
</el-col>
<el-col :span="24" v-for="(item,index) in lists" style="margin-bottom: 10px;">
<el-form :inline="true" class="demo-form-inline">
<div class="grid-content bg-purple-dark">
<el-row :gutter="15">
<el-col :span="10">
<div class="grid-content bg-purple">
<el-select v-model="item.userId" :value="item.userId" placeholder="选择分润对象">
<el-option v-for="opi in accounts" :label="opi.name" :value="opi.id"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-input placeholder="" @input="limitMax(item.rate,index)" v-model="item.rate" max="100" min="1"></el-input>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-purple-light">
<el-button type="danger" @click="deleteObj(index)" icon="el-icon-delete"></el-button>
</div>
</el-col>
</el-row>
</div>
</el-form>
</el-col>
<el-button @click="addObj">添加分润对象</el-button>
</el-row>
</template>
<script>
import {GET_ACCOUNT_LIST} from '@/api/privilegeManagement'
import {DETAIL_FIELD_LIST} from '@/api/distribution'
import Alert from "@/utils/alert";
export default {
name: "detailsOfDistribution",
props: ['currId'],
data() {
return {
lists: [],
accounts: []
}
},
watch: {
currId() {
}
},
mounted() {
this.getAccounts();
this.getDetail();
},
methods: {
getDetail() {
let params = {
id: this.currId
};
DETAIL_FIELD_LIST(params).then(res => {
this.lists = res
})
},
/**
* 添加分润对象
*/
addObj() {
let obj = {
userId: '',
rate: ''
};
this.lists.push(obj)
},
/**
* 删除分润对象
*/
deleteObj(idx) {
let lists = [];
this.lists.map((item, index) => {
if (idx != index) {
lists.push(item)
}
return item;
});
this.lists = lists
},
getAccounts() {
GET_ACCOUNT_LIST().then(res => {
this.accounts = res;
})
},
limitMax(val, idx) {
if (val >= 100 || val <= 0) {
Alert.fail('值不能大于100,小于0');
val = ''
}
this.lists[idx].rate = val;
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

3
src/components/Detail/editor.vue
View File

@ -0,0 +1,3 @@
<template>
<div>55565</div>
</template>

60
src/components/Detail/form.vue
View File

@ -1,60 +0,0 @@
<template>
<div class="form-container">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="场地">
<el-select v-model="formInline.locationId" value="" placeholder="场地">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in locationId" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item style="padding-left:30px">
<el-button type="default" @click="resetForm1('formInline')">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {GET_LOCATIONS} from '@/api/common'
export default {
name: 'form-container',
props: ['label'],
data() {
return {
formInline: {
locationId: ''
},
locationId: ''
}
},
mounted() {
this.getLocationId();
},
methods: {
getLocationId() {
GET_LOCATIONS().then(res => {
this.locationId = res
})
},
onSubmit() {
this.$emit('submit', this.formInline)
},
resetForm1() {
this.formInline = {
name: ''
};
this.$emit('resetForm');
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.form-container {
padding: 20px;
background: #fff;
}
</style>

341
src/components/Detail/index.vue
View File

@ -1,253 +1,242 @@
<template> <template>
<div> <div>
<form-container @submit="submitForm" @resetForm="resetForm"></form-container> <el-button
type="primary"
icon="el-icon-plus"
style="margin-bottom: 15px;"
@click="addModal"
>
添加
</el-button>
<div class="table"> <div class="table">
<el-table <el-table
:data="lists" :data="lists"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column type="expand">
prop="name" <template slot-scope="props">
label="场地图片"> <el-form label-position="left" inline class="demo-table-expand">
<template slot-scope="lists"> <el-form-item label="商品名称">
<img :src="lists.row.image" width="70" height="70" alt=""> 商品名称
<!-- <span>{{ props.row.name }}</span> -->
</el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="name" prop="id"
label="名称"> label="序号"
type="index"
align="center">
</el-table-column>
<el-table-column
prop="name"
label="位置"
align="center"
width="250">
<template slot-scope="lists">
{{ setCode(lists.row.showPage) }}
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="locationName" prop="name"
label="场地地址"> label="创建时间"
align="center"
width="250">
<template slot-scope="lists">
{{ setCode(lists.row.createdAt) }}
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="users" prop="name"
label="分润人数"> label="修改时间"
align="center"
width="250">
<template slot-scope="lists">
{{ setCode(lists.row.updatedAt) }}
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="stateText" prop="name"
label="状态"> label="最后修改人登录名"
align="center"
width="250">
<template slot-scope="lists">
{{ setCode(lists.row.modifyName) }}
</template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
fixed="right" fixed="right"
label="操作" label="操作"
> align="center"
width="250">
<template slot-scope="lists"> <template slot-scope="lists">
<span <el-button
type="text" type="primary"
size="small" icon="el-icon-edit"
class="option-span" style="margin-right: 15px;"
@click="suspensionOfRelease(lists.row.id,lists.row.enabled)" @click="editModal(lists.row)"
> size="mini">
<span>{{lists.row.enabled==true?"暂停":"发布"}}</span> 编辑
</span> </el-button>
<span
type="text" <el-popover
size="small" placement="top"
style="margin: 0 5px;" width="160"
class="option-span" :value="visible">
@click="editModal(lists.row.id)" <p>确定删除吗？</p>
> <div style="text-align: right; margin: 0">
<span>编辑</span> <el-button size="mini" type="text" @click="visible = false">取消</el-button>
</span> <el-button type="danger" size="mini" plain @click="deleteItem(lists.row.id)">确定</el-button>
</div>
<el-button slot="reference" @click="visible = true" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
</el-popover>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
background background
:page-size="params.size" :page-size="pageSize"
layout="prev, pager, next" layout="prev, pager, next"
:total="count" :total="count"
@current-change="currentChange" @current-change="currentChange"
> >
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
<el-dialog <el-dialog
width="400px" width="600px"
:show-close="false" :show-close="false"
:visible.sync="isEdit"> :visible.sync="showModal">
<details-of-distribution ref="distribution" :currId="id" v-if="isEdit"></details-of-distribution> <add-or-edit ref="distribution" :show-add="showAdd" :currList="currList" v-if="showModal" @close="close"></add-or-edit>
<div slot="footer" class="dialog-footer">
<el-button @click="isEdit = false">取消</el-button>
<el-button type="primary" @click="determine('ruleForm')">确定</el-button>
</div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
const FormContainer = () => import('./form.vue'); const AddOrEdit = () => import('./addOrEdit.vue');
const DetailsOfDistribution = () => import('./detailsOfDistribution.vue');
import Banner from '@/components/Banner';
import { import {
GET_FIELD_LIST, POST_QUERY_DETAIL,
POST_FIELD_LIST, DELETE_DETAIL
ENABLE_FIELD_LIST, } from '@/api/contentDetail'
DISABLE_FIELD_LIST,
COUNT_FIELD_LIST
} from '@/api/distribution'
import Alert from "@/utils/alert"; import Alert from "@/utils/alert";
import {pageSize} from '../../config'; import {tabList} from '../../filters/code';
export default { export default {
name: "index", name: "index",
props: {
showPage: {
type: String,
default: "0000"
}
},
data() { data() {
return { return {
count: 0, count: 0,
id: '', id: '',
isEdit: false, showModal: false,
tabList,
lists: [], lists: [],
params: { currList: null,
from: 0, pageSize: 10,
size: pageSize, pageNum: 1,
locationId: '' visible: false,
} showAdd: true,
} }
}, },
mounted() { mounted() {
this.getList() this.getList()
}, },
components: { components: {
FormContainer, AddOrEdit,
DetailsOfDistribution,
Banner
}, },
methods: { methods: {
submitForm(res) { /**
this.params = { * 获取轮播图列表
...this.params, */
locationId: res.locationId,
};
this.getList()
},
resetForm() {
this.params = {
from: 0,
size: pageSize,
locationId: ''
};
this.getList()
},
getList() { getList() {
GET_FIELD_LIST(this.params).then(res => { const { pageNum, pageSize, showPage } = this;
res.map((item) => { const params = {
item.stateText = item.enabled ? '生效中' : '失效中'; pageNum,
item.locationName = item.province + item.city + item.district + item.name; pageSize,
return item showPage
}); };
this.lists = res POST_QUERY_DETAIL(params).then(res => {
if(res.code === 200){
this.lists = res.data.list
this.pageNum = res.data.pageNum
this.pageSize = res.data.pageSize
this.count = res.data.size
}else{
Alert.fail(res.msg || '获取失败');
}
}); });
COUNT_FIELD_LIST(this.params).then(res => {
this.count = res
})
}, },
/** /**
* 分页 * 分页
*/ */
currentChange(res) { currentChange(res) {
this.params = { this.pageNum = res;
...this.params,
from: parseInt(res - 1) * this.params.size,
size: pageSize,
};
this.getList() this.getList()
}, },
editModal(id) { // 设置显示位置
this.isEdit = true; setCode(showPage){
this.id = id; let item = null
for (let i = 0; i < this.tabList.length; i++) {
const list = this.tabList[i];
for (let j = 0; j < list.children.length; j++) {
const curItem = list.children[j];
if(curItem.code == showPage){
item = curItem
break;
}
}
}
return item.title
}, },
/** addModal(){
* 状态操作 this.showModal = true;
*/ this.showAdd = true;
suspensionOfRelease(id, enabled) {
if (enabled) {
this.PUBLISHED(id)
} else {
this.PAUSEDANDPENDING(id)
}
}, },
/**
* 已发布 editModal(currList) {
* @constructor this.showModal = true;
*/ this.showAdd = false;
PUBLISHED(id) { // this.id = id;
let params = { this.currList = currList
id },
};
DISABLE_FIELD_LIST(params).then((res) => { // 关闭弹窗
let lists = []; close(type){
this.lists.map((item) => { this.showModal = false
if (item.id == id) { if(type){
item.stateText = '失效中'; this.getList()
item.enabled = false; }
}
lists.push(item);
return item;
});
this.lists = lists;
Alert.success("已失效");
});
}, },
/** /**
* 已暂停或者待发布 * 删除
* @constructor
*/ */
PAUSEDANDPENDING(id) { deleteItem(id) {
let params = { const params = {
id id
}; };
ENABLE_FIELD_LIST(params).then((res) => { DELETE_DETAIL(params).then((res) => {
let lists = []; if(res.code === 200){
this.lists.map((item) => { Alert.success('删除成功');
if (item.id == id) { this.getList()
item.stateText = '生效中'; }else{
item.enabled = true; Alert.fail(res.msg || '删除失败');
}
lists.push(item);
return item;
});
this.lists = lists;
Alert.success("已生效");
});
},
determine() {
let that = this;
let child = this.$refs.distribution.lists;
let params = {
id: this.id,
items: child
};
for (let index in child) {
if (!child[index].rate || !child[index].userId) {
Alert.fail("值不能为空");
return false;
} }
}
for (let i = 0; i < child.length; i++) {
for (let j = i + 1; j < child.length; j++) {
if (child[i].userId == child[j].userId) {
Alert.fail("分润对象不能一样");
return false;
}
}
}
POST_FIELD_LIST(params).then(res => {
Alert.success("添加成功");
that.isEdit = false;
that.getList();
}); });
} this.visible = false
},
} }
} }
</script> </script>

2
src/views/richText/index.vue
View File

@ -5,7 +5,7 @@
<banner :showPage="showPage" /> <banner :showPage="showPage" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="详情页管理" name="DETAIL"> <el-tab-pane label="详情页管理" name="DETAIL">
<detail /> <detail :showPage="showPage" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>

Write Preview
Loading…
Cancel
Save