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

详情页

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

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

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

Write Preview
Loading…
Cancel
Save