Browse Source

添加轮播图

master
song 3 years ago
parent
commit
95ea2a5eec
  1. 152
      src/api/carousel.js
  2. 202
      src/components/Banner/detailsOfDistribution.vue
  3. 144
      src/components/Banner/index.vue
  4. 122
      src/filters/code.js
  5. 4
      src/styles/index.scss
  6. 118
      src/views/index/detailsOfDistribution.vue
  7. 60
      src/views/index/form.vue
  8. 4
      src/views/index/index.vue
  9. 118
      src/views/richText/detailsOfDistribution.vue
  10. 60
      src/views/richText/form.vue
  11. 267
      src/views/richText/index.vue

152
src/api/carousel.js

@ -12,7 +12,9 @@ export function POST_QUERY_CAROUSEL(params) {
url: `${carousel}/queryCarousel`,
method: 'post',
data:params
}).then(res => res.data.data)
}).then(res => {
return res.data
})
}
/**
@ -26,153 +28,23 @@ export function POST_DELETE_CAROUSEL(params) {
url: `${carousel}/deleteCarousel`,
method: 'post',
data:params
}).then(res => res.data.data)
}).then(res => {
return res.data
})
}
/**
* 设备分润 -- 分润详情
* 修改轮播图
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function DETAIL_EQUIPMENT_LIST(params) {
export function UPDATE_CAROUSEL(params) {
return request({
url: "/api/admin/deviceRoyalties/detail",
method: 'get',
params
}).then(res => res.data.data)
}
/**
* 设备分润 -- 分润总数
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function COUNT_EQUIPMENT_LIST(params) {
return request({
url: "/api/admin/deviceRoyalties/count",
method: 'get',
params
}).then(res => res.data.data)
}
/**
* 设备分润 -- 生效
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function ENABLE_EQUIPMENT_LIST(params) {
return request({
url: "/api/admin/deviceRoyalties/enable",
method: 'post',
params
}).then(res => res.data.data)
}
/**
* 设备分润 -- 失效
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function DISABLE_EQUIPMENT_LIST(params) {
return request({
url: "/api/admin/deviceRoyalties/disable",
method: 'post',
params
}).then(res => res.data.data)
}
/**
* 场地分润 -- 列表
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function GET_FIELD_LIST(params) {
return request({
url: "/api/admin/locationRoyalties",
method: 'get',
params
}).then(res => res.data.data)
}
/**
* 场地分润 -- 保存分润
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function POST_FIELD_LIST(params) {
return request({
url: "/api/admin/locationRoyalties",
url: `${carousel}/updateCarousel`,
method: 'post',
data:params
}).then(res => res.data.data)
}
/**
* 场地分润 -- 分润总数
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function COUNT_FIELD_LIST(params) {
return request({
url: "/api/admin/locationRoyalties/count",
method: 'get',
params
}).then(res => res.data.data)
}
/**
* 场地分润 -- 分润详情
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function DETAIL_FIELD_LIST(params) {
return request({
url: "/api/admin/locationRoyalties/detail",
method: 'get',
params
}).then(res => res.data.data)
}
/**
* 场地分润 -- 生效
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function ENABLE_FIELD_LIST(params) {
return request({
url: "/api/admin/locationRoyalties/enable",
method: 'get',
params
}).then(res => res.data.data)
}
/**
* 场地分润 -- 失效
* @param params
* @returns {Promise<T | never>}
* @constructor
*/
export function DISABLE_FIELD_LIST(params) {
return request({
url: "/api/admin/locationRoyalties/disable",
method: 'get',
params
}).then(res => res.data.data)
}).then(res => {
return res.data
})
}

202
src/components/Banner/detailsOfDistribution.vue

@ -1,118 +1,146 @@
<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>
<div class="container">
<div class="title">修改轮播图</div>
<el-form :model="formLabelAlign" ref="formLabelAlign" label-width="100px" class="demo-ruleForm">
<el-form-item label="图片:">
<el-upload
class="avatar-uploader"
:action="`${BASE_API}/file/upload`"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="formLabelAlign.url" :src="formLabelAlign.url" class="avatar w-full">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="位置:">
<el-cascader
v-model="formLabelAlign.showPage"
:props="props"
:options="tabList"
@change="handleChange">
</el-cascader>
</el-form-item>
<el-form-item label="状态:">
<el-radio-group v-model="formLabelAlign.recStatus" @change="changeStatus">
<el-radio :label="0">正常</el-radio>
<el-radio :label="1">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateCarousel(formLabelAlign)">确定</el-button>
<el-button @click="$emit('close')">取消</el-button>
</el-form-item>
</el-form>
</el-col>
<el-button @click="addObj">添加分润对象</el-button>
</el-row>
</div>
</template>
<script>
import {GET_ACCOUNT_LIST} from '@/api/privilegeManagement'
import {DETAIL_FIELD_LIST} from '@/api/distribution'
import {BASE_API} from '../../config';
import {tabList} from '../../filters/code';
import {
UPDATE_CAROUSEL,
} from '@/api/carousel';
import Alert from "@/utils/alert";
export default {
name: "detailsOfDistribution",
props: ['currId'],
props: ['currList'],
data() {
return {
lists: [],
accounts: []
}
labelPosition: 'right',
formLabelAlign: {
url: '',
showPage: ['00', '0000'],
recStatus: ''
},
BASE_API,
tabList,
props: {
value: 'code',
label: 'title',
children: 'children'
},
watch: {
currId() {
}
},
mounted() {
this.getAccounts();
this.getDetail();
if(!this.currList) return
const { url, showPage, recStatus } = this.currList
this.formLabelAlign.url = url;
this.formLabelAlign.showPage[0] = showPage.slice(0, 2);
this.formLabelAlign.showPage[1] = showPage;
this.formLabelAlign.recStatus = recStatus;
},
methods: {
getDetail() {
let params = {
id: this.currId
};
DETAIL_FIELD_LIST(params).then(res => {
this.lists = res
})
},
/**
* 添加分润对象
* 上传预览图
* @param {*} res
* @param {*} file
*/
addObj() {
let obj = {
userId: '',
rate: ''
};
this.lists.push(obj)
handleAvatarSuccess(res) {
if (res.data && res.data.path) {
this.formLabelAlign.url = res.data.path;
}
},
beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg';
// if (!isJPG) {
// ElMessage.error(' JPG !');
// }
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
ElMessage.error('上传头像图片大小不能超过 2MB!');
}
return isLt2M;
},
//
handleChange(value) {
console.log(value);
this.formLabelAlign.showPage = value
},
//
changeStatus(value){
console.log('value: ', value);
this.formLabelAlign.recStatus = value;
},
/**
* 删除分润对象
* 修改轮播图
*/
deleteObj(idx) {
let lists = [];
this.lists.map((item, index) => {
if (idx != index) {
lists.push(item)
async updateCarousel(formName){
console.log('formName: ', formName);
const { url, showPage, recStatus } = formName;
const { id } = this.currList;
const params = {
id,
url,
showPage: showPage[1],
recStatus
};
await UPDATE_CAROUSEL(params).then((res) => {
if(res.code === 200){
Alert.success('修改成功');
this.$emit('close', true)
}else{
Alert.fail(res.msg || '修改失败');
}
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 lang="scss" scoped>
.title{
width: 100%;
margin-bottom: 30px;
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>

144
src/components/Banner/index.vue

@ -1,5 +1,11 @@
<template>
<div>
<el-button
type="primary"
icon="el-icon-plus"
style="margin-bottom: 15px;">
添加
</el-button>
<div class="table">
<el-table
:data="lists"
@ -21,7 +27,8 @@
<el-table-column
prop="name"
label="位置"
align="center">
align="center"
width="250">
<template slot-scope="lists">
{{ setCode(lists.row.showPage) }}
</template>
@ -29,25 +36,24 @@
<el-table-column
prop="name"
label="状态"
align="center">
align="center"
width="250">
<template slot-scope="lists">
<el-tag v-if="lists.row.recStatus === 0">正常</el-tag>
<el-tag v-if="lists.row.recStatus === 1" type="info">禁用</el-tag>
<el-tag v-if="lists.row.recStatus === 2" type="danger">删除</el-tag>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
>
width="250">
<template slot-scope="lists">
<el-button
type="primary"
icon="el-icon-edit"
style="margin-right: 15px;"
@click="editModal(lists.row.id)"
@click="editModal(lists.row)"
size="mini">
编辑
</el-button>
@ -79,15 +85,12 @@
</div>
</div>
<!-- 编辑弹框 -->
<el-dialog
width="400px"
width="600px"
: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>
<details-of-distribution ref="distribution" :currList="currList" v-if="isEdit" @close="close"></details-of-distribution>
</el-dialog>
</div>
</template>
@ -119,6 +122,7 @@
isEdit: false,
tabList,
lists: [],
currList: null,
pageSize: 10,
pageNum: 1,
visible: false,
@ -148,10 +152,14 @@
showPage
};
POST_QUERY_CAROUSEL(params).then(res => {
this.lists = res.list
this.pageNum = res.pageNum
this.pageSize = res.pageSize
this.count = res.size
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 || '获取失败');
}
});
},
@ -170,13 +178,24 @@
//
setCode(showPage){
const item = this.tabList.find((item) => item.code == 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
},
editModal(id) {
editModal(currList) {
this.isEdit = true;
this.id = id;
// this.id = id;
this.currList = currList
},
/**
@ -186,84 +205,23 @@
const params = {
id
};
// POST_DELETE_CAROUSEL(params).then(() => {
// this.getList()
// });
POST_DELETE_CAROUSEL(params).then((res) => {
if(res.code === 200){
Alert.success('删除成功');
this.getList()
}else{
Alert.fail(res.msg || '删除失败');
}
});
this.visible = false
},
/**
* 已发布
* @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("");
// });
},
/**
* 已暂停或者待发布
* @constructor
*/
PAUSEDANDPENDING(id) {
let 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;
}
}
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;
}
}
//
close(type){
this.isEdit = false
if(type){
this.getList()
}
// POST_FIELD_LIST(params).then(res => {
// Alert.success("");
// that.isEdit = false;
// that.getList();
// });
}
}
}

122
src/filters/code.js

@ -1,9 +1,19 @@
export const tabList = [
{
title: '首页',
code: '00',
children: [
{
title: '首页',
code: '0000',
}
]
},
// 公司概况
{
title: '公司概况',
code: '01',
children: [
{
title: '公司简介',
code: '0101',
@ -24,7 +34,13 @@ export const tabList = [
title: '联系方式',
code: '0105',
},
]
},
// 新闻中心
{
title: '新闻中心',
code: '02',
children: [
{
title: '集团新闻',
code: '0201',
@ -65,7 +81,13 @@ export const tabList = [
title: '现场风采',
code: '0210',
},
]
},
// 党的建设
{
title: '党的建设',
code: '03',
children: [
{
title: '中心组学习',
code: '0301',
@ -90,7 +112,13 @@ export const tabList = [
title: '党风廉政',
code: '0306',
},
]
},
// 安全生产
{
title: '安全生产',
code: '04',
children: [
{
title: '安全会议',
code: '0401',
@ -111,7 +139,13 @@ export const tabList = [
title: '曝光台',
code: '0405',
},
],
},
// 通知公告
{
title: '通知公告',
code: '05',
children: [
{
title: '通知',
code: '0501',
@ -132,7 +166,13 @@ export const tabList = [
title: '浮窗',
code: '0505',
},
],
},
// 信息公开
{
title: '信息公开',
code: '06',
children: [
{
title: '基本信息',
code: '0601',
@ -153,36 +193,48 @@ export const tabList = [
title: '关于信息公开',
code: '0605',
},
// 审批事项
{
title: '公务用车',
code: '',
},
{
title: '领导干部外出报备',
code: '',
},
{
title: '疫情防控',
code: '',
},
{
title: '用印申请',
code: '',
},
{
title: '业务招待事项',
code: '',
},
{
title: '会议室使用',
code: '',
},
{
title: '办公用品领用',
code: '',
],
},
// 审批事项
// {
// title: '审批事项',
// code: '07',
// children: [
// {
// title: '公务用车',
// code: '',
// },
// {
// title: '领导干部外出报备',
// code: '',
// },
// {
// title: '疫情防控',
// code: '',
// },
// {
// title: '用印申请',
// code: '',
// },
// {
// title: '业务招待事项',
// code: '',
// },
// {
// title: '会议室使用',
// code: '',
// },
// {
// title: '办公用品领用',
// code: '',
// },
// ],
// },
// 制度资料
{
title: '制度资料',
code: '08',
children: [
{
title: '集团公司制度',
code: '0801',
@ -215,7 +267,13 @@ export const tabList = [
title: '科技创新',
code: '0808',
},
],
},
// 部门首页
{
title: '部门首页',
code: '09',
children: [
{
title: '总经理工作部',
code: '0901',
@ -280,7 +338,13 @@ export const tabList = [
title: '电气专业',
code: '0916',
},
],
},
// 其他
{
title: '其他',
code: '99',
children: [
{
title: '光荣榜',
code: '9902',
@ -289,4 +353,6 @@ export const tabList = [
title: '今天我出境',
code: '9903',
},
],
},
]

4
src/styles/index.scss

@ -259,3 +259,7 @@ h1, h2, h3 {
.el-date-editor .el-range-separator {
width: 7%;
}
.w-full{
width: 100%;
}

118
src/views/index/detailsOfDistribution.vue

@ -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>

60
src/views/index/form.vue

@ -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>

4
src/views/index/index.vue

@ -4,9 +4,9 @@
<el-tab-pane label="轮播图管理" name="IMAGE">
<banner :showPage="showPage" />
</el-tab-pane>
<el-tab-pane label="详情页管理" name="DETAIL">
<!-- <el-tab-pane label="详情页管理" name="DETAIL">
<detail />
</el-tab-pane>
</el-tab-pane> -->
</el-tabs>
</div>
</template>

118
src/views/richText/detailsOfDistribution.vue

@ -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>

60
src/views/richText/form.vue

@ -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>

267
src/views/richText/index.vue

@ -1,269 +1,40 @@
<template>
<div>
<form-container @submit="submitForm" @resetForm="resetForm"></form-container>
<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="">
</template>
</el-table-column>
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="locationName"
label="场地地址">
</el-table-column>
<el-table-column
prop="users"
label="分润人数">
</el-table-column>
<el-table-column
prop="stateText"
label="状态">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<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>
</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"
>
</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>
</el-dialog>
<div class="pa-4 white">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick(activeName)">
<el-tab-pane label="轮播图管理" name="IMAGE">
<banner :showPage="showPage" />
</el-tab-pane>
<el-tab-pane label="详情页管理" name="DETAIL">
<detail />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
const FormContainer = () => import('./form.vue');
const DetailsOfDistribution = () => import('./detailsOfDistribution.vue');
import {
GET_FIELD_LIST,
POST_FIELD_LIST,
ENABLE_FIELD_LIST,
DISABLE_FIELD_LIST,
COUNT_FIELD_LIST
} from '@/api/distribution'
import Alert from "@/utils/alert";
import {pageSize} from '../../config';
import Banner from '@/components/Banner';
import Detail from '@/components/Detail';
export default {
name: "index",
components: {
Banner,
Detail
},
data() {
return {
count: 0,
id: '',
isEdit: false,
lists: [],
params: {
from: 0,
size: pageSize,
locationId: ''
}
activeName: 'IMAGE',
showPage: '0000'
}
},
mounted() {
this.getList()
},
components: {
FormContainer,
DetailsOfDistribution
},
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
});
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.getList()
},
editModal(id) {
this.isEdit = true;
this.id = id;
handleClick() {
console.log('切换tab');
},
/**
* 状态操作
*/
suspensionOfRelease(id, enabled) {
if (enabled) {
this.PUBLISHED(id)
} else {
this.PAUSEDANDPENDING(id)
}
},
/**
* 已发布
* @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("已失效");
});
},
/**
* 已暂停或者待发布
* @constructor
*/
PAUSEDANDPENDING(id) {
let 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;
}
}
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();
});
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table {
margin-top: 20px;
padding: 30px;
background: #fff;
.option-span {
color: #a90500;
cursor: pointer;
}
}
.pagination {
margin-top: 20px;
}
</style>

Loading…
Cancel
Save