目录代码整合
This commit is contained in:
aixianling
254
packages/publicity/AppVillageInfo/components/Add.vue
Normal file
254
packages/publicity/AppVillageInfo/components/Add.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<ai-detail showFooter class="add-detail">
|
||||
<template slot="title">
|
||||
<ai-title :title="params.id ? '编辑村务公开' : '添加村务公开'" :isShowBack="true" @onBackClick="onBack"
|
||||
:isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-card title="基础信息">
|
||||
<template #content>
|
||||
<el-form :model="form" label-width="120px" ref="form">
|
||||
<el-form-item label="类型" prop="type" :rules="[{required: true, message: '请选择类型', trigger: 'change'}]">
|
||||
<el-select size="small" placeholder="请选择" v-model="form.type" style="width: 240px;" clearable>
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict('villInfoType')" :key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
|
||||
<el-input type="textarea" :rows="2" v-model="form.title" clearable placeholder="请输入..." maxlength="100"
|
||||
show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布地区" prop="areaId" :rules="[{required: true, message: '请选择发布地区'}]">
|
||||
<ai-area-get v-model="form.areaId" :instance="instance" :root="areaId"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="正文" prop="content" :rules="[{required: true, message: '请输入正文', trigger: 'blur'}]">
|
||||
<ai-editor v-model="form.content" :instance="instance"/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="缩略图" prop="thumbUrl" :rules="[{required: true, message: '请上次缩略图', trigger: 'change'}]">-->
|
||||
<!-- <ai-uploader-->
|
||||
<!-- :isShowTip="true"-->
|
||||
<!-- :instance="instance"-->
|
||||
<!-- v-model="form.thumbUrl"-->
|
||||
<!-- :limit="1"-->
|
||||
<!-- :cropOps="cropOps"-->
|
||||
<!-- is-crop>-->
|
||||
<!-- <template slot="tips">最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png<br/>格式图片比例：1.6：1</template>-->
|
||||
<!-- </ai-uploader>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="附件">
|
||||
<ai-uploader
|
||||
:isShowTip="true"
|
||||
:instance="instance"
|
||||
v-model="fileList"
|
||||
fileType="file"
|
||||
:limit="9">
|
||||
<template slot="tips">最多上传9个附件,单个文件最大10MB<br/>支持.doc、.docx、.xls、.ppt、.pptx、.pdf、.txt、.jpg、.png格式
|
||||
</template>
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
<template slot="footer" class="footer">
|
||||
<el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="onSubmit(1)">保存</el-button>
|
||||
<el-button type="primary" size="small" v-if="!params.id" @click="onSubmit(2)">保存并发布</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
areaId: String
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
title: '',
|
||||
type: '',
|
||||
content: '',
|
||||
fileIds: [],
|
||||
thumbUrl: []
|
||||
},
|
||||
fileList: [],
|
||||
isDetail: true,
|
||||
cropOps: {
|
||||
width: "336px",
|
||||
height: "210px"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.params && this.params.id) {
|
||||
this.getInfo()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBack() {
|
||||
this.cancel()
|
||||
},
|
||||
|
||||
getInfo() {
|
||||
this.instance.post(`/app/appvillageinfo/queryDetailById?id=${this.params.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = {
|
||||
...res.data
|
||||
}
|
||||
this.form.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : []
|
||||
this.fileList = res.data.files || []
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onSubmit(index) {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.id) {
|
||||
if (index == 2) {
|
||||
this.form.status = 1
|
||||
} else {
|
||||
this.form.status = 0
|
||||
}
|
||||
}
|
||||
this.instance.post(`/app/appvillageinfo/addOrUpdate`, {
|
||||
...this.form,
|
||||
fileIds: this.fileList.map(v => v.id),
|
||||
thumbUrl: this.form.thumbUrl.length ? JSON.stringify([{
|
||||
url: this.form.thumbUrl[0].url
|
||||
}]) : ''
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success(`${this.params.id ? '编辑成功' : '提交成功'}`)
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 800)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-detail {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #F2F4F6 !important;
|
||||
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
|
||||
.search-input {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1111;
|
||||
width: 220px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
margin-left: 140px !important;
|
||||
}
|
||||
|
||||
.add-detail__form {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-input {
|
||||
width: 328px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-form {
|
||||
&:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-form__item, .add-detail__form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 90px 0 50px;
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__footer {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
::v-deep .ai-detail {
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__content--active {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.ai-detail__content--wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aibar {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.add-form {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-wrapper {
|
||||
align-items: inherit !important;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
el-form {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
packages/publicity/AppVillageInfo/components/Comments.vue
Normal file
130
packages/publicity/AppVillageInfo/components/Comments.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<ai-list class="comments" :isTabs="true">
|
||||
<template slot="content">
|
||||
<div class="ai-table">
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
<el-table-column prop="type" slot="options" label="评论明细">
|
||||
<div slot-scope="scope">
|
||||
<el-row type="flex" justify="space-between">
|
||||
<p class="comment_p">来自《{{ scope.row.title }}》</p>
|
||||
<span title="删除" style="cursor: pointer;color: #26f;user-select: none;" @click="remove(scope.row.id)">删除</span>
|
||||
</el-row>
|
||||
<div style="display: flex;">
|
||||
<b slot="label">回复内容:</b>
|
||||
<ai-audio single-play v-if="scope.row.audioFile" :src="scope.row.audioFile"/>
|
||||
<div v-html="scope.row.content" style="white-space: pre-wrap;"></div>
|
||||
</div>
|
||||
<p style="float:left;padding-right:8px;"><span style="font-weight:bold;padding-right:8px;">回复人:</span>{{ scope.row.createUser }}
|
||||
</p>
|
||||
<p style="float:left;">{{ scope.row.createDate }}</p>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'JoinEvent',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
areaId: String,
|
||||
permissions: Function
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
colConfigs() {
|
||||
return [
|
||||
{ slot: 'options' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: ''
|
||||
},
|
||||
total: 0,
|
||||
ids: [],
|
||||
tableData: [],
|
||||
orderDetail: {}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList () {
|
||||
this.instance.post(`/app/appvillageinfocomment/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
areaId: this.areaId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
remove (id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appvillageinfocomment/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.join-event {
|
||||
::v-deep th {
|
||||
font-weight: bold!important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-btn {
|
||||
margin-right: 16px;
|
||||
font-size: 14px;
|
||||
color: #2266FF;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:last-child:hover {
|
||||
color: #f46;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
78
packages/publicity/AppVillageInfo/components/Detail.vue
Normal file
78
packages/publicity/AppVillageInfo/components/Detail.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<ai-detail class="event-detail">
|
||||
<template #title>
|
||||
<ai-title title="村务公开详情" :isShowBack="true" @onBackClick="onBack" isShowBottomBorder>
|
||||
</ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-card :title="info.title" titlePosition="center">
|
||||
<template #title>
|
||||
<h2>{{ info.title }}</h2>
|
||||
<p class="subTitle">{{ info.createDate }} {{ info.unitName || '-' }}</p>
|
||||
</template>
|
||||
<template #content>
|
||||
<img class="cover" :src="info.thumbUrl[0].url" v-if="info.thumbUrl && info.thumbUrl.length">
|
||||
<ai-article :value="info.content"></ai-article>
|
||||
<ai-file-list v-if="info.files && info.files.length" :fileList="info.files" :fileOps="{name: 'fileName', size: 'postfix'}"></ai-file-list>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'detail',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
params: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
info: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.getInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo () {
|
||||
this.instance.post(`/app/appvillageinfo/queryDetailById?id=${this.params.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
if (res.data.thumbUrl) {
|
||||
this.info.thumbUrl = JSON.parse(res.data.thumbUrl)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onBack () {
|
||||
this.$emit('change', {
|
||||
type: 'list'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cover {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 140px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
226
packages/publicity/AppVillageInfo/components/Event.vue
Normal file
226
packages/publicity/AppVillageInfo/components/Event.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<ai-list class="join-event" :isTabs="true">
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<el-button v-if="permissions('app_appvillageinfo_edit')" icon="iconfont iconAdd" type="primary" size="small" @click="add">添加</el-button>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
placeholder="请输入标题"
|
||||
size="small"
|
||||
clearable
|
||||
v-model="search.title"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
@clear="search.current = 1, search.title = '', getList()"
|
||||
suffix-icon="iconfont iconSearch" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<div class="ai-table">
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
<el-table-column slot="options" label="操作" align="center" width="250" fixed="right">
|
||||
<template slot-scope="{ row }" class="fs-14">
|
||||
<div class="table-options">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="publish(row)"
|
||||
:title="row.status === '1' ? '取消发布' : '发布'"
|
||||
:disabled="!permissions('app_appvillageinfo_edit')">
|
||||
{{ row.status === '1' ? '取消发布' : '发布' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
title="详情"
|
||||
@click="toDetail(row.id)"
|
||||
:disabled="!permissions('app_appvillageinfo_detail')">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
title="编辑"
|
||||
@click="toAdd(row.id)"
|
||||
:disabled="!permissions('app_appvillageinfo_edit')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="remove(row.id)"
|
||||
type="text"
|
||||
title="删除"
|
||||
:disabled="!permissions('app_appvillageinfo_edit')">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ReportEvent',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
areaId: String,
|
||||
permissions: Function
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: 'type', label: '类型', formart: v => this.dict.getLabel('villInfoType', v) },
|
||||
{ prop: 'title', label: '标题', align: 'left' },
|
||||
{ prop: 'status', label: '发布状态', align: 'center', formart: v => this.dict.getLabel('villInfoStatus', v) },
|
||||
{ prop: 'createDate', label: '发布时间', dateFormat: 'YYYY-MM-DD', align: 'center' },
|
||||
{ prop: 'createUser', label: '发布人', align: 'center' },
|
||||
{ prop: 'areaName', label: '来源地区', align: 'center' },
|
||||
{ slot: 'options', label: '操作' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
title: ''
|
||||
},
|
||||
total: 0,
|
||||
ids: [],
|
||||
tableData: [],
|
||||
orderDetail: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.dict.load('villInfoType', 'villInfoStatus', 'villInfoCommentStatus').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList () {
|
||||
this.instance.post(`/app/appvillageinfo/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
areaId: this.areaId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
publish (params) {
|
||||
this.$confirm(`是否${params.status === '1' ? '取消发布' : '发布'}该条数据?`).then(() => {
|
||||
this.instance.post(`/app/appvillageinfo/updateCountYardstatus`, {
|
||||
id: params.id,
|
||||
status: params.status === '1' ? 0 : 1
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(`${params.status === '1' ? '取消发布' : '发布'}成功！`)
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
toAdd (id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
add () {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toEdit (id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
type: 'ReportAdd',
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'detail',
|
||||
params: {
|
||||
type: 'eventDetail',
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
remove (id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appvillageinfo/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.join-event {
|
||||
::v-deep th {
|
||||
font-weight: bold!important;
|
||||
}
|
||||
::v-deep .table-options{
|
||||
span{
|
||||
font-size: 14px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-btn {
|
||||
margin-right: 16px;
|
||||
font-size: 14px;
|
||||
color: #2266FF;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:last-child:hover {
|
||||
color: #f46;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user