13 changed files with 705 additions and 491 deletions
@ -0,0 +1 @@ |
|||||
|
registry=https://registry.npmmirror.com |
||||
@ -0,0 +1,43 @@ |
|||||
|
<template> |
||||
|
<div id="editorSection" @change="handleChange"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Editor from "tui-editor"; /* ES6 */ |
||||
|
import "tui-editor/dist/tui-editor.css"; // editor's ui |
||||
|
import "tui-editor/dist/tui-editor-contents.css"; // editor's content |
||||
|
import "codemirror/lib/codemirror.css"; // codemirror |
||||
|
import "highlight.js/styles/github.css"; // code block highlight |
||||
|
import { init } from "echarts/lib/echarts"; |
||||
|
|
||||
|
export default { |
||||
|
name: "mytuieditor", |
||||
|
mounted() { |
||||
|
this.initialize(); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.tuieditor = null; |
||||
|
delete this.tuieditor; |
||||
|
}, |
||||
|
methods: { |
||||
|
initialize() { |
||||
|
if (this.$el) { |
||||
|
this.tuieditor = new Editor({ |
||||
|
el: document.querySelector("#editorSection"), |
||||
|
initialEditType: "wysiwyg", |
||||
|
previewStyle: "vertical", |
||||
|
height: "300px" |
||||
|
}); |
||||
|
this.tuieditor.getHtml(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleChange(value){ |
||||
|
console.log('value: ', value); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,190 @@ |
|||||
|
<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-input |
||||
|
type="textarea" |
||||
|
:rows="2" |
||||
|
placeholder="请输入内容" |
||||
|
v-model="formLabelAlign.content"> |
||||
|
</el-input> |
||||
|
</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, |
||||
|
QUERY_DETAIL |
||||
|
} from '@/api/contentDetail'; |
||||
|
import Alert from "@/utils/alert"; |
||||
|
|
||||
|
export default { |
||||
|
name: "detailsOfDistribution", |
||||
|
components: { |
||||
|
// Editor, |
||||
|
}, |
||||
|
props: ['currList', 'showAdd', 'content'], |
||||
|
data() { |
||||
|
return { |
||||
|
labelPosition: 'right', |
||||
|
formLabelAlign: { |
||||
|
showPage: ['00', '0000'], |
||||
|
content: '' |
||||
|
}, |
||||
|
BASE_API, |
||||
|
tabList, |
||||
|
props: { |
||||
|
value: 'code', |
||||
|
label: 'title', |
||||
|
children: 'children' |
||||
|
}, |
||||
|
rules: { |
||||
|
showPage: [ |
||||
|
{ type: 'array', required: true, message: '请选择位置', trigger: 'change' } |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
if(this.currList && this.currList && !this.showAdd){ |
||||
|
const { detailId, showPage } = this.currList |
||||
|
this.getDetail() |
||||
|
this.formLabelAlign.detailId = detailId; |
||||
|
this.formLabelAlign.showPage.splice(0, 1, showPage.slice(0, 2)) |
||||
|
this.formLabelAlign.showPage.splice(1, 1, showPage) |
||||
|
}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 { detailId, showPage, content } = formName; |
||||
|
const params = { |
||||
|
detailId, |
||||
|
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 || '修改失败'); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 单个内容详情 |
||||
|
*/ |
||||
|
async getDetail(){ |
||||
|
try { |
||||
|
const { detailId, showPage } = this.currList |
||||
|
const params = { |
||||
|
detailId, |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
showPage |
||||
|
}; |
||||
|
await QUERY_DETAIL(params).then(res => { |
||||
|
if(res.code === 200){ |
||||
|
this.formLabelAlign.content = res.data.content |
||||
|
}else{ |
||||
|
Alert.fail(res.msg || '详情获取失败'); |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</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> |
||||
@ -0,0 +1,293 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<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%" |
||||
|
:expand-row-keys="keys" |
||||
|
:row-key="setKey" |
||||
|
@expand-change="getDetail" |
||||
|
> |
||||
|
<el-table-column type="expand"> |
||||
|
<template slot-scope="lists"> |
||||
|
<el-form label-position="left" inline class="demo-table-expand"> |
||||
|
<el-form-item> |
||||
|
<div v-if="content" v-html="content"></div> |
||||
|
<div v-else>暂无</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="位置" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="lists"> |
||||
|
{{ setCode(lists.row.showPage) }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="创建时间" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="lists"> |
||||
|
{{ $moment(lists.row.createdAt).format('YYYY-MM-DD HH:mm') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="修改时间" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="lists"> |
||||
|
{{ $moment(lists.row.updatedAt).format('YYYY-MM-DD HH:mm') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="最后修改人登录名" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="lists"> |
||||
|
{{ lists.row.modifyName }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
fixed="right" |
||||
|
label="操作" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="lists"> |
||||
|
<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.detailId)">确定</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="pageSize" |
||||
|
layout="prev, pager, next" |
||||
|
:total="count" |
||||
|
@current-change="currentChange" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog |
||||
|
width="600px" |
||||
|
:show-close="false" |
||||
|
:visible.sync="showModal"> |
||||
|
<add-or-edit ref="distribution" :show-add="showAdd" :currList="currList" :content="content" v-if="showModal" @close="close"></add-or-edit> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
const AddOrEdit = () => import('./addOrEdit.vue'); |
||||
|
import { |
||||
|
POST_QUERY_DETAIL, |
||||
|
QUERY_DETAIL, |
||||
|
DELETE_DETAIL |
||||
|
} from '@/api/contentDetail' |
||||
|
import Alert from "@/utils/alert"; |
||||
|
import {tabList} from '../../filters/code'; |
||||
|
|
||||
|
export default { |
||||
|
name: "index", |
||||
|
props: { |
||||
|
showPage: { |
||||
|
type: String, |
||||
|
default: "0000" |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
count: 0, |
||||
|
id: '', |
||||
|
showModal: false, |
||||
|
tabList, |
||||
|
lists: [], |
||||
|
currList: null, |
||||
|
pageSize: 10, |
||||
|
pageNum: 1, |
||||
|
visible: false, |
||||
|
showAdd: true, |
||||
|
content: '', |
||||
|
keys: [] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
components: { |
||||
|
AddOrEdit, |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 获取详情列表 |
||||
|
*/ |
||||
|
getList() { |
||||
|
const { pageNum, pageSize, showPage } = this; |
||||
|
const params = { |
||||
|
pageNum, |
||||
|
pageSize, |
||||
|
showPage |
||||
|
}; |
||||
|
POST_QUERY_DETAIL(params).then(res => { |
||||
|
if(res.code === 200){ |
||||
|
if(res.data.list && res.data.list.length){ |
||||
|
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 || '获取失败'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 分页 |
||||
|
*/ |
||||
|
currentChange(res) { |
||||
|
this.pageNum = res; |
||||
|
this.getList() |
||||
|
}, |
||||
|
|
||||
|
setKey(row){ |
||||
|
return row.detailId |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 单个内容详情 |
||||
|
*/ |
||||
|
async getDetail(row){ |
||||
|
try { |
||||
|
const { showPage } = this; |
||||
|
const params = { |
||||
|
detailId: row.detailId, |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
showPage |
||||
|
}; |
||||
|
await QUERY_DETAIL(params).then(res => { |
||||
|
if(res.code === 200){ |
||||
|
this.content = res.data.content |
||||
|
this.keys.forEach((key,index) =>{ |
||||
|
if(key === row.detailId){ |
||||
|
this.keys.splice(index, 1) |
||||
|
}else{ |
||||
|
this.keys.push(row.detailId) |
||||
|
} |
||||
|
}) |
||||
|
}else{ |
||||
|
Alert.fail(res.msg || '详情获取失败'); |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 设置显示位置 |
||||
|
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 && item.title ? item.title : '' |
||||
|
}, |
||||
|
|
||||
|
addModal(){ |
||||
|
this.showModal = true; |
||||
|
this.showAdd = true; |
||||
|
}, |
||||
|
|
||||
|
editModal(currList) { |
||||
|
this.showModal = true; |
||||
|
this.showAdd = false; |
||||
|
// this.id = id; |
||||
|
this.currList = currList |
||||
|
}, |
||||
|
|
||||
|
// 关闭弹窗 |
||||
|
close(type){ |
||||
|
this.showModal = false |
||||
|
if(type){ |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 删除 |
||||
|
*/ |
||||
|
deleteItem(detailId) { |
||||
|
const params = { |
||||
|
detailId |
||||
|
}; |
||||
|
DELETE_DETAIL(params).then((res) => { |
||||
|
if(res.code === 200){ |
||||
|
Alert.success('删除成功'); |
||||
|
this.getList() |
||||
|
}else{ |
||||
|
Alert.fail(res.msg || '删除失败'); |
||||
|
} |
||||
|
}); |
||||
|
this.visible = false |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.table { |
||||
|
background: #fff; |
||||
|
|
||||
|
.option-span { |
||||
|
color: #a90500; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -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> |
|
||||
@ -1,48 +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 label="其他链接" value="otherLink"></el-option> |
|
||||
<el-option label="漂浮窗" value="piaochuang"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="描述"> |
|
||||
<el-input v-model="formInline.description" placeholder="描述" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item style="padding-left:30px"> |
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'form-container', |
|
||||
props: ['label'], |
|
||||
data() { |
|
||||
return { |
|
||||
formInline: { |
|
||||
locationId: '', |
|
||||
description: '', |
|
||||
}, |
|
||||
locationId: '', |
|
||||
description: '', |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
onSubmit() { |
|
||||
this.$emit('submit', this.formInline) |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
.form-container { |
|
||||
padding: 20px; |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,259 +1,55 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div class="pa-4 white"> |
||||
<form-container @submit="submitForm"></form-container> |
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick(activeName)"> |
||||
<div class="table"> |
<el-tab-pane label="轮播图管理" name="IMAGE"> |
||||
<el-table :data="lists" style="width: 100%"> |
<banner :showPage="showPage" ref="banner" /> |
||||
<el-table-column prop="code" label="类型"> |
</el-tab-pane> |
||||
<template slot-scope="lists"> |
<el-tab-pane label="列表管理" name="NEWS"> |
||||
<span v-if="lists.row.code === 'piaochuang'">漂浮窗</span> |
<news :showPage="showPage" ref="news" /> |
||||
<span v-else-if="lists.row.code === 'otherLink'">其他链接</span> |
</el-tab-pane> |
||||
<span v-else>其他</span> |
</el-tabs> |
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="startTime" label="开始时间"> |
|
||||
<template slot-scope="lists"> |
|
||||
<span v-if="lists.row.startTime-0"> |
|
||||
{{ $moment(lists.row.startTime-0).format("YYYY-MM-DD HH:mm") }} |
|
||||
</span> |
|
||||
<span v-else> |
|
||||
暂无 |
|
||||
</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="endTime" label="结束时间"> |
|
||||
<template slot-scope="lists"> |
|
||||
<span v-if="lists.row.endTime-0"> |
|
||||
{{ $moment(lists.row.endTime-0).format("YYYY-MM-DD HH:mm") }} |
|
||||
</span> |
|
||||
<span v-else> |
|
||||
暂无 |
|
||||
</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="description" label="常量值"> |
|
||||
<template slot-scope="lists"> |
|
||||
<div v-for="(item,index) in getValue(lists.row.value)" :key="index"> |
|
||||
<div>{{ item.title }}</div> |
|
||||
<template v-if="Array.isArray(item.value)"> |
|
||||
<div v-for="(itemA,indexA) in item.value" :key="indexA"> |
|
||||
<span>{{ itemA }}</span> |
|
||||
<el-input :value="itemA" @blur="changeValue($event,item.title,lists.row,indexA)" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<div> |
|
||||
<span>{{ item.value }}</span> |
|
||||
<el-input :value="item.value" @blur="changeValue($event,item.title,lists.row)" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="description" label="描述"> |
|
||||
<template slot-scope="lists"> |
|
||||
<span> {{ lists.row.description }} </span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="modifyName" label="最后修改人登录名"> |
|
||||
<template slot-scope="lists"> |
|
||||
<span> {{ lists.row.modifyName }} </span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<div class="pagination"> |
|
||||
<el-pagination |
|
||||
background |
|
||||
:page-size="params.pageSize" |
|
||||
layout="prev, pager, next" |
|
||||
:total="dataList.total - 0" |
|
||||
@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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
const FormContainer = () => import('./form.vue'); |
import Banner from '@/components/Banner'; |
||||
const DetailsOfDistribution = () => import('./detailsOfDistribution.vue'); |
import News from '@/components/News'; |
||||
import { GET_LIST,UPDATE_DATA } from '@/api/otherPage'; |
|
||||
import Alert from "@/utils/alert"; |
|
||||
import {pageSize} from '../../config'; |
|
||||
|
|
||||
export default { |
export default { |
||||
name: "index", |
name: "index", |
||||
|
components: { |
||||
|
Banner, |
||||
|
News |
||||
|
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
count: 0, |
activeName: 'IMAGE', |
||||
id: '', |
showPage: '' |
||||
isEdit: false, |
|
||||
lists: [], |
|
||||
dataList: {}, |
|
||||
params: { |
|
||||
locationId: '', |
|
||||
description: '', |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
} |
|
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
created() { |
||||
this.getList() |
this.showPage = localStorage.getItem('code') |
||||
}, |
}, |
||||
components: { |
mounted() { |
||||
FormContainer, |
this.$nextTick(() => { |
||||
DetailsOfDistribution |
this.$refs.banner.getList() |
||||
|
}) |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
// 搜索查询按钮 |
handleClick(value) { |
||||
submitForm(res) { |
console.log('value: ', value); |
||||
this.params = { |
this.activeName =value |
||||
...this.params, |
if(value === 'IMAGE'){ |
||||
pageNum: 1, |
this.$refs.banner.getList() |
||||
description: res.description, |
|
||||
locationId: res.locationId, |
|
||||
}; |
|
||||
this.getList() |
|
||||
}, |
|
||||
// 获取数组 |
|
||||
async getList() { |
|
||||
await GET_LIST(this.params).then(res => { |
|
||||
const { code,msg,data } = res |
|
||||
if(code === 200) { |
|
||||
this.lists = data.list |
|
||||
this.dataList = data |
|
||||
} else { |
|
||||
Alert(msg) |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
// 将常量值JSON字符串解析 |
|
||||
getValue(value) { |
|
||||
const arr = JSON.parse(value) |
|
||||
let itemList = [] |
|
||||
if(Array.isArray(arr)) { |
|
||||
for(let i = 0; i < arr.length; i++) { |
|
||||
const item = arr[i] |
|
||||
for(let key in item) { |
|
||||
if(Array.isArray(item[key])) { |
|
||||
const obj = { |
|
||||
title: key, |
|
||||
value: item[key] |
|
||||
} |
|
||||
itemList.push(obj) |
|
||||
} else { |
|
||||
const obj = { |
|
||||
title: item.content, |
|
||||
value: item.url |
|
||||
} |
|
||||
itemList.push(obj) |
|
||||
break |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} else { |
|
||||
for(let key in arr) { |
|
||||
const obj = { |
|
||||
title: key, |
|
||||
value: arr[key] |
|
||||
} |
|
||||
itemList.push(obj) |
|
||||
} |
|
||||
} |
|
||||
console.log('itemList',itemList) |
|
||||
return itemList |
|
||||
}, |
|
||||
// 修改常量值,将其反转成JSON后提交 |
|
||||
changeValue(e,title,defaultValue,index) { |
|
||||
let dValue = JSON.parse(defaultValue.value); |
|
||||
if(Array.isArray(dValue)) { |
|
||||
for(let i = 0; i < dValue.length; i++) { |
|
||||
const item = dValue[i] |
|
||||
for(let key in item) { |
|
||||
if(Array.isArray(item[key]) && key === title) { |
|
||||
item[key][index] = e.target.value |
|
||||
} else { |
|
||||
if(item.content === title) { |
|
||||
item.url = e.target.value |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} else { |
|
||||
for(let key in dValue) { |
|
||||
if(key === title) { |
|
||||
dValue[key] = e.target.value |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
const params = { |
if(value === 'NEWS'){ |
||||
code: defaultValue.code, |
this.$refs.news.getList() |
||||
constantId: defaultValue.constantId, |
|
||||
value: JSON.stringify(dValue) |
|
||||
} |
} |
||||
this.updateData(params) |
|
||||
}, |
|
||||
// 常量修改 |
|
||||
async updateData(params) { |
|
||||
await UPDATE_DATA(params).then(res => { |
|
||||
const { code } = res |
|
||||
console.log('code: ', code); |
|
||||
if(code === 200) { |
|
||||
Alert.success('修改成功') |
|
||||
this.getList() |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 分页 |
|
||||
*/ |
|
||||
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; |
|
||||
}, |
}, |
||||
|
|
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
<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> |
</style> |
||||
|
|||||
Loading…
Reference in new issue