目录代码整合

This commit is contained in:
aixianling
2022-05-10 20:02:37 +08:00
parent 71049f7f65
commit 036ee91533
324 changed files with 4 additions and 8321 deletions

View File

@@ -0,0 +1,248 @@
<template>
<ai-detail>
<template slot="title">
<ai-title :title="params.id ? '编辑居民议事' : '添加居民议事'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
</template>
<template slot="content">
<ai-card title="基本信息">
<template #content>
<el-form class="ai-form" :model="form" label-width="120px" ref="form">
<el-form-item label="主题" style="width: 100%;" prop="content" :rules="[{required: true, message: '请输入主题', trigger: 'blur'}]">
<el-input type="textarea" :rows="5" v-model="form.content" clearable placeholder="请输入主题..." :maxlength="500" show-word-limit></el-input>
</el-form-item>
<el-form-item prop="areaId" style="width: 100%;" label="发布地区" :rules="[{required: true, message: '请选择到村', trigger: 'change'}]">
<ai-area-select @fullname="v => form.areaName = v" clearable always-show :instance="instance" v-model="form.areaId" :disabled-level="disabledLevel"></ai-area-select>
</el-form-item>
<el-form-item label="议事截止时间" prop="discussDeadline" :rules="[{required: true, message: '请选择议事截止时间', trigger: 'change'}]">
<el-date-picker
v-model="form.discussDeadline"
type="datetime"
style="width: 100%;"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择议事截止时间">
</el-date-picker>
</el-form-item>
<el-form-item label="公示截止时间" prop="publicityDeadline">
<el-date-picker
v-model="form.publicityDeadline"
size="small"
style="width: 100%;"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择公示截止时间">
</el-date-picker>
</el-form-item>
<el-form-item label="议事类型" prop="type" :rules="[{required: true, message: '请选择议事类型', trigger: 'change'}]">
<el-radio-group v-model="form.type">
<el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('discussType')" :key="index">{{ item.dictName }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.type === '1'" class="vite-form__item" style="width: 100%;" label="投票选项" prop="voteItems" :rules="[{required: true, message: '请添加投票选项', trigger: 'change'}]">
<draggable
v-model="form.voteItems"
:animation="340"
group="select">
<el-form-item class="move-item" style="width: 100%" label-width="80px" :label="'选项' + (index + 1)" v-for="(item, index) in form.voteItems" :key="'选项' + (index + 1)">
<div class="form-flex">
<el-input show-word-limit style="width:400px" v-model="item.content" :maxlength="200" size="small" placeholder="请输入选项"></el-input>
<el-button type="danger" size="small" @click="removeVote(index)">删除</el-button>
</div>
</el-form-item>
</draggable>
<el-button type="primary" size="small" @click="addVote">添加选项</el-button>
</el-form-item>
<el-form-item v-if="form.type === '1'" label="是否匿名投票" prop="anonymous" :rules="[{required: true, message: '请选择是否匿名投票', trigger: 'change'}]">
<el-switch
v-model="form.anonymous"
active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item v-if="form.type === '1'" label="投票方式" prop="voteType" :rules="[{required: true, message: '请选择投票方式', trigger: 'change'}]">
<el-radio-group v-model="form.voteType">
<el-radio label="0">单选</el-radio>
<el-radio label="1">多选</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图片" style="width: 100%;" prop="images">
<ai-uploader
:instance="instance"
isShowTip
v-model="form.images"
:limit="9">
</ai-uploader>
</el-form-item>
</el-form>
</template>
</ai-card>
</template>
<template #footer>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confirm" :loading="isLoading">提交</el-button>
</template>
</ai-detail>
</template>
<script>
import draggable from 'vuedraggable'
import { mapState } from 'vuex'
export default {
name: 'Add',
props: {
instance: Function,
dict: Object,
params: Object
},
components: {
draggable
},
data () {
return {
info: {},
form: {
content: '',
areaId: '',
areaName: '',
anonymous: '0',
discussDeadline: '',
publicityDeadline: '',
type: '0',
voteType: '0',
voteItems: [],
anonymity: '1',
images: []
},
isLoading: false,
keys: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
id: ''
}
},
computed: {
...mapState(['user'])
},
created () {
this.form.areaId = this.user.info.areaId
this.form.areaName = this.user.info.areaName
this.disabledLevel = this.user.info.areaList.length
if (this.params && this.params.id) {
this.id = this.params.id
this.getInfo(this.params.id)
}
},
methods: {
getInfo (id) {
this.instance.post(`/app/appvillagediscuss/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
this.form = res.data
this.form.content = res.data.title
this.form.images = res.data.images ? JSON.parse(res.data.images) : []
}
})
},
addVote () {
if (this.form.voteItems > 7) {
return this.$message.error('选项不能大于7个')
}
this.form.voteItems.push({
content: ''
})
},
removeVote (index) {
this.form.voteItems.splice(index, 1)
},
confirm () {
this.$refs.form.validate((valid) => {
if (valid) {
const endTime = new Date(this.form.discussDeadline).getTime()
const endPublicityTime = this.form.publicityDeadline ? new Date(this.form.publicityDeadline).getTime() : 0
const nowTime = new Date().getTime()
if (endTime - nowTime < 0) {
return this.$message.error('议事截止时间不能早于当前时间')
}
if (endPublicityTime && endPublicityTime - endTime < 0) {
return this.$message.error('公示截止时间不能早于议事截止时间')
}
if (this.form.type === '1' && this.form.voteItems.length < 2) {
return this.$message.error('投票选项不能少于2')
}
if (this.form.type === '1') {
this.form.voteItems = this.form.voteItems.map((v, index) => {
return {
content: v.content,
item: this.keys[index]
}
})
for (let v of this.form.voteItems) {
if (!v.content) {
return this.$message.error(`请输入选项${v.item}的内容`)
}
}
}
this.isLoading = true
this.instance.post(`/app/appvillagediscuss/addOrUpdate`, {
...this.form,
createUserId: this.user.info.id,
createUserName: this.user.info.name,
images: this.form.images.length ? JSON.stringify(this.form.images) : '',
}).then(res => {
if (res.code == 0) {
this.$message.success('提交成功')
setTimeout(() => {
this.isLoading = false
this.cancel(true)
}, 300)
}
}).catch(() => {
this.isLoading = false
})
}
})
},
cancel (isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh
})
}
}
}
</script>
<style scoped lang="scss">
.move-item {
::v-deep .el-form-item__label {
cursor: move;
}
}
.vite-form__item {
.form-flex {
display: flex;
align-items: center;
.el-button {
margin-left: 20px;
}
::v-deep .el-form-item__content {
margin-left: 0!important;
}
}
}
</style>

View File

@@ -0,0 +1,278 @@
<template>
<ai-detail isHasSidebar>
<template slot="title">
<ai-title title="居民议事详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
</template>
<template slot="content">
<AiSidebar :tabTitle="tabList" v-model="currIndex" @change="onChange"></AiSidebar>
<ai-card title="议题信息" v-show="currIndex === 0">
<template #content>
<ai-wrapper>
<ai-info-item label="主题" :value="info.content" isLine></ai-info-item>
<ai-info-item label="发布地区" :value="info.areaName" isLine></ai-info-item>
<ai-info-item label="议事截止时间" :value="info.discussDeadline"></ai-info-item>
<ai-info-item label="公示截止时间" :value="info.publicityDeadline"></ai-info-item>
<ai-info-item label="议事类型" :value="dict.getLabel('discussType', info.type)" isLine></ai-info-item>
<ai-info-item label="是否匿名投票" v-if="info.type === '1'" :value="info.anonymous === '1' ? '是' : '否'"></ai-info-item>
<ai-info-item label="投票方式" v-if="info.type === '1'" :value="info.voteType === '0' ? '单选' : '多选'"></ai-info-item>
<ai-info-item label="图片" isLine>
<ai-uploader
:instance="instance"
disabled
v-model="info.images"
:limit="9">
</ai-uploader>
</ai-info-item>
</ai-wrapper>
</template>
</ai-card>
<ai-card title="意见征集" v-if="info.type === '0'" v-show="currIndex === 1">
<template #right>
<el-button type="primary" size="small" v-if="user.info.id === info.createUserId && info.status === '0'" @click="isShowAdd = true">发表意见</el-button>
</template>
<template #content>
<ai-table
class="detail-table__table"
:border="true"
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
:current.sync="search.current"
:size.sync="search.size"
:stripe="false"
@getList="getList">
</ai-table>
</template>
</ai-card>
<ai-card title="投票统计" v-show="currIndex === 1 && info.type === '1'">
<template #content>
<h2 class="detail-title">选项</h2>
<ai-wrapper>
<ai-info-item :label="item.item + ''" :value="item.content" isLine v-for="(item, index) in info.voteItems" :key="index"></ai-info-item>
</ai-wrapper>
<div class="chart" style="width: 800px; height: 240px; margin: 0 auto;"></div>
<ai-table
class="detail-table__table"
:border="true"
:tableData="tableData"
:col-configs="voteColConfigs"
:total="total"
:current.sync="search.current"
:size.sync="search.size"
:stripe="false"
@getList="getList">
</ai-table>
</template>
</ai-card>
<ai-dialog
:visible.sync="isShowAdd"
width="680px"
height="580px"
title="发表意见"
@close="onClose"
@onConfirm="onConfirm">
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
<el-form-item label="发表意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请发表你的观点和意见', trigger: 'blur' }]">
<el-input size="small" type="textarea" :rows="5" show-word-limit :maxlength="140" placeholder="请发表你的观点和意见" v-model="form.content"></el-input>
</el-form-item>
</el-form>
</ai-dialog>
</template>
</ai-detail>
</template>
<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
export default {
name: 'Detail',
props: {
instance: Function,
dict: Object,
params: Object
},
data () {
return {
info: {},
id: '',
search: {
current: 1,
size: 10
},
isShowAdd: false,
form: {
content: ''
},
total: 0,
currIndex: 0,
tableData: [],
colConfigs: [
{prop: 'content', label: '发言内容', align: 'center'},
{prop: 'suport', label: '获赞次数', align: 'center'},
{prop: 'createTime', label: '发言时间', align: 'center'},
{prop: 'createUserId', label: '发言身份', align: 'center', formart: v => v === this.info.createUserId ? '话事人' : '居民'}
],
type: '',
statistic: {},
tabList: ['议题信息', '意见征集']
}
},
computed: {
...mapState(['user']),
voteColConfigs () {
return [
{prop: 'createTime', label: '投票时间', align: 'center'},
{
prop: 'userName',
label: '发言人',
align: 'center',
render: (h, { row }) => {
return h('span', {}, this.info.anonymous === '1' ? '居民' : `${row.userName}${row.phone ? '-' + row.phone : ''}`)
}
},
{prop: 'item', label: '投票选项', align: 'center'}
]
}
},
created () {
this.getInfo(this.params.id)
},
methods: {
onChange (e) {
if (e === 1 && this.info.type === '1') {
this.$nextTick(() => {
this.initChart(this.statistic)
})
}
},
getInfo (id) {
this.instance.post(`/app/appvillagediscuss/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
this.info = res.data
this.info.images = res.data.images ? JSON.parse(res.data.images) : []
this.type = res.data.type
this.getList()
if (res.data.type === '1') {
this.statistic = res.data.statistic
this.tabList = ['议题信息', '投票表决']
}
}
})
},
getList() {
this.instance.post(`${this.type === '0' ? '/app/appvillagediscussmessage/list' : '/app/appvillagediscussvote/list'}`, null, {
params: {
discussId: this.params.id,
...this.search
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
initChart(data) {
this.chart = echarts.init(document.querySelector('.chart'))
const option = {
tooltip: {},
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
legend: {
right: '5%',
top: 'center',
orient: 'vertical',
formatter: function(name) {
let data = option.series[0].data
let total = 0
let tarValue = 0
for (let i = 0, l = data.length; i < l; i++) {
total += data[i].value
if (data[i].name == name) {
tarValue = data[i].value
}
}
let p = total === 0 ? 0 : (tarValue / total * 100).toFixed(0)
return name + '' + tarValue + '票' + ' ' + p + '%'
}
},
series: [
{
type: 'pie',
radius: '50%',
data: Object.keys(data).map(v => {
return {
value: data[v],
name: v
}
}),
label : {
normal : {
formatter: '{b}({d}%)',
textStyle : {
fontWeight : 'normal',
fontSize : 15
}
}
}
}
]
}
this.chart.setOption(option)
},
onConfirm () {
this.$refs.form.validate((valid) => {
if (valid) {
this.instance.post(`/app/appvillagediscussmessage/addOrUpdate`, {
...this.form,
discussId: this.params.id,
createUserId: this.user.info.name,
createUserName: this.user.info.id,
avatar: this.user.info.avatar
}).then(res => {
if (res.code === 0) {
this.$message.success('添加成功')
this.isShowAdd = false
this.search.current = 1
this.getList()
}
})
}
})
},
onClose () {
this.form.content = ''
},
cancel (isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh
})
}
}
}
</script>
<style scoped lang="scss">
.detail-title {
font-weight: normal;
font-size: 16px;
font-weight: 600;
}
</style>

View File

@@ -0,0 +1,174 @@
<template>
<ai-list class="notice">
<template slot="title">
<ai-title title="居民议事" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance" @change="search.current = 1, getList()"></ai-title>
</template>
<template slot="content">
<ai-search-bar class="search-bar">
<template #left>
<ai-select placeholder="请选择议事类型" v-model="search.type" clearable @change="search.current = 1, getList()" :selectList="dict.getDict('discussType')"></ai-select>
<ai-select placeholder="请选择发布状态" v-model="search.status" clearable @change="search.current = 1, getList()" :selectList="dict.getDict('discussStatus')"></ai-select>
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">发起议事</el-button>
</template>
<template #right>
<el-input
v-model="search.title"
class="search-input"
size="small"
v-throttle="() => {search.current=1,getList()}"
placeholder="请输入议事主题"
clearable
@clear="search.current = 1, search.title = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column slot="tags" label="标签">
<template slot-scope="{ row }">
<div class="table-tags">
<el-tag type="info" v-for="(item, index) in row.tags" size="small" :key="index">{{ item }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
<el-button type="text" title="取消公示" @click="changeStatus(row)" :disabled="row.status !== '1'">结束公示</el-button>
<el-button type="text" @click="remove(row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'List',
props: {
instance: Function,
dict: Object
},
data() {
return {
search: {
current: 1,
size: 10,
status: '',
type: '',
title: '',
areaId: ''
},
currIndex: -1,
areaList: [],
total: 10,
colConfigs: [
{ prop: 'content', label: '议事主题', align: 'left', width: '200px' },
{ prop: 'type', label: '议事类型', align: 'center', formart: v => this.dict.getLabel('discussType', v) },
{ prop: 'createUserName', label: '话事人', align: 'center' },
{ prop: 'msgCountTotal', label: '观点数量', align: 'center', formart: v => v === 0 ? '-' : v },
{ prop: 'voteCount', label: '投票数量', align: 'center', formart: v => v === 0 ? '-' : v },
{ prop: 'status', label: '发布状态', align: 'center', formart: v => this.dict.getLabel('discussStatus', v) },
{ prop: 'createTime', label: '发布时间', align: 'center' },
{ slot: 'options', label: '操作', align: 'center' }
],
areaName: '',
unitName: '',
tableData: []
}
},
computed: {
...mapState(['user'])
},
created () {
this.search.areaId = this.user.info.areaId
this.dict.load(['discussType', 'discussStatus']).then(() => {
this.getList()
})
},
methods: {
getList() {
this.instance.post(`/app/appvillagediscuss/listUp`, null, {
params: {
type: 0,
...this.search
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records.map(v => {
return {
...v,
content: v.content || v.title
}
})
this.total = res.data.total
}
})
},
changeStatus (item) {
this.$confirm('是否要结束公示', {type: 'warning'}).then(() => {
this.instance.post('/app/appvillagediscuss/finishPublic', {
status: '2',
id: item.id
}).then(res => {
if (res && res.code == 0) {
this.$message.success('结束公示成功')
this.getList()
}
})
})
},
remove(id) {
this.$confirm('确定删除该数据?').then(() => {
this.instance.post(`/app/appvillagediscuss/delete?ids=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功!')
this.getList()
}
})
})
},
toDetail (id) {
this.$emit('change', {
type: 'Detail',
params: {
id: id || ''
}
})
},
toAdd(id) {
this.$emit('change', {
type: 'Add',
params: {
id: id || ''
}
})
}
}
}
</script>
<style lang="scss" scoped>
.notice {
}
</style>