3 changed files with 307 additions and 0 deletions
-
19src/api/weixin/index.js
-
12src/views/weChatMiniProgram/baseSetting.vue
-
276src/views/weChatMiniProgram/feedback.vue
@ -0,0 +1,19 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
// import qs from 'qs'
|
||||
|
|
||||
|
// 回复读者留言
|
||||
|
// {
|
||||
|
// "id": 0,
|
||||
|
// "reply": "回复"
|
||||
|
// }
|
||||
|
export function FetchReplyReaderMessage(parameter) { |
||||
|
return request({ |
||||
|
url: 'api/weixin/replyReaderMessage', |
||||
|
method: 'post', |
||||
|
data: parameter |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
FetchReplyReaderMessage |
||||
|
} |
||||
@ -0,0 +1,276 @@ |
|||||
|
<template> |
||||
|
<div class="app-container row-container"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<div class="head-search" style="align-items: center;"> |
||||
|
<el-input |
||||
|
v-model="keyWord" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入关键词" |
||||
|
style="width: 280px;" |
||||
|
class="input-prepend filter-item" |
||||
|
@clear="crud.toQuery" |
||||
|
@keyup.enter.native="crud.toQuery" |
||||
|
> |
||||
|
<el-select slot="prepend" v-model="optionVal" style="width: 100px" @change="searchChange"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-input> |
||||
|
<el-select v-model="query.isReply" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery"> |
||||
|
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
||||
|
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> |
||||
|
</el-select> |
||||
|
<rrOperation> |
||||
|
<template v-slot:right> |
||||
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> |
||||
|
</template> |
||||
|
</rrOperation> |
||||
|
</div> |
||||
|
<crudOperation :permission="permission" /> |
||||
|
</div> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
|
||||
|
<el-dialog |
||||
|
title="读者留言" |
||||
|
:visible.sync="replyVisible" |
||||
|
width="800px" |
||||
|
append-to-body |
||||
|
:close-on-click-modal="false" |
||||
|
:before-close="clearReplyFormValidate" |
||||
|
> |
||||
|
<ul class="message-info-box" style="margin-bottom: 20px; padding: 15px; background: #f7f8fa; border-radius: 4px; line-height: 30px;"> |
||||
|
<li> |
||||
|
<span style="color: #0c0e1e; width: 80px; display: inline-block;">读者证号：</span> |
||||
|
<span>{{ replyForm.readCardNo }}</span> |
||||
|
</li> |
||||
|
<li> |
||||
|
<span style="color: #0c0e1e; width: 80px; display: inline-block;">读者昵称：</span> |
||||
|
<span>{{ replyForm.readName }}</span> |
||||
|
</li> |
||||
|
<li> |
||||
|
<span style="color: #0c0e1e; width: 80px; display: inline-block;">联系方式：</span> |
||||
|
<span>{{ replyForm.phone }}</span> |
||||
|
</li> |
||||
|
<li> |
||||
|
<span style="color: #0c0e1e; width: 80px; display: inline-block;">留言主题：</span> |
||||
|
<span>{{ replyForm.title }}</span> |
||||
|
</li> |
||||
|
<li> |
||||
|
<span style="color: #0c0e1e; width: 80px; display: inline-block;">留言时间：</span> |
||||
|
<span>{{ replyForm.suggestionTime | parseTime }}</span> |
||||
|
</li> |
||||
|
<li style="border-top: 1px dashed #e4e7ed;"> |
||||
|
<span style="color: #0c0e1e; width: 80px; display: inline-block; vertical-align: top;">留言内容：</span> |
||||
|
<span style="width: calc(100% - 85px); display: inline-block;"> |
||||
|
{{ replyForm.suggestion }} |
||||
|
</span> |
||||
|
</li> |
||||
|
<li v-if="replyForm.reply" style="border-top: 1px dashed #e4e7ed; margin-top: 15px; padding-top: 10px;"> |
||||
|
<span style="color: #0c0e1e; width: 80px; display: inline-block; vertical-align: top;">回复内容：</span> |
||||
|
<span style="width: calc(100% - 85px); display: inline-block;"> |
||||
|
{{ replyForm.reply }} |
||||
|
</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<el-form v-if="!replyForm.reply" ref="replyForm" :model="replyForm" :rules="replyRules" size="small"> |
||||
|
<el-form-item label="回复内容" prop="reply"> |
||||
|
<el-input |
||||
|
v-model="replyForm.reply" |
||||
|
type="textarea" |
||||
|
rows="5" |
||||
|
placeholder="请输入回复内容" |
||||
|
style="width: 762px;" |
||||
|
:readonly="!!replyForm.reply" |
||||
|
:style="{ backgroundColor: replyForm.reply ? '#f5f7fa' : '#fff' }" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="clearReplyFormValidate">关 闭</el-button> |
||||
|
<el-button |
||||
|
v-if="!replyForm.reply" |
||||
|
type="primary" |
||||
|
:loading="replyLoading" |
||||
|
@click="submitReply" |
||||
|
> |
||||
|
提 交 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 表格 --> |
||||
|
<el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 330px)" :data="crud.data" @row-dblclick="onRowDblclick" @selection-change="crud.selectionChangeHandler"> |
||||
|
<el-table-column prop="readCardNo" label="读者证号" /> |
||||
|
<el-table-column prop="readName" label="读者昵称" /> |
||||
|
<el-table-column prop="phone" label="联系方式" /> |
||||
|
<el-table-column prop="title" label="留言主题" /> |
||||
|
<el-table-column :show-overflow-tooltip="true" prop="suggestionTime" label="留言日期"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.suggestionTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="100" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
v-if="!scope.row.reply" |
||||
|
type="text" |
||||
|
@click="handleReply(scope.row)" |
||||
|
> |
||||
|
回复 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<pagination v-if="crud.data.length !== 0" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudWeixin, { FetchReplyReaderMessage } from '@/api/weixin/index' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Column', |
||||
|
components: { pagination, crudOperation, rrOperation }, |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
title: '留言', |
||||
|
url: 'api/weixin/initReaderMessage', |
||||
|
crudMethod: { ...crudWeixin }, |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
reset: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(function() { |
||||
|
return Object.assign({ libcode: this.user.fonds.fondsNo }) |
||||
|
}), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
keyWord: '', |
||||
|
optionVal: 'readCardNo', |
||||
|
options: [ |
||||
|
{ value: 'readCardNo', label: '读者证号' }, |
||||
|
{ value: 'readName', label: '读者昵称' }, |
||||
|
{ value: 'title', label: '留言主题' } |
||||
|
], |
||||
|
replyVisible: false, |
||||
|
replyLoading: false, |
||||
|
replyForm: { |
||||
|
id: null, |
||||
|
reply: '' |
||||
|
}, |
||||
|
replyRules: { |
||||
|
reply: [{ required: true, message: '请输入回复内容', trigger: 'blur' }] |
||||
|
}, |
||||
|
permission: { |
||||
|
add: [], |
||||
|
edit: [], |
||||
|
del: [] |
||||
|
}, |
||||
|
enabledTypeOptions: [ |
||||
|
{ key: '1', display_name: '已回复' }, |
||||
|
{ key: '0', display_name: '未回复' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi', |
||||
|
'user' |
||||
|
]) |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.libcode = this.user.fonds.fondsNo |
||||
|
if (this.keyWord && this.optionVal) { |
||||
|
this.crud.query[this.optionVal] = this.keyWord |
||||
|
} else { |
||||
|
delete this.crud.query[this.optionVal] |
||||
|
} |
||||
|
}, |
||||
|
resetQuery() { |
||||
|
this.keyWord = '' |
||||
|
this.crud.query[this.optionVal] = this.keyWord |
||||
|
this.crud.query.isReply = null |
||||
|
this.crud.toQuery() |
||||
|
}, |
||||
|
searchChange(val) { |
||||
|
if (val) { |
||||
|
this.keyWord = '' |
||||
|
this.options.forEach(option => { |
||||
|
if (option.value !== val) { |
||||
|
this.crud.query[option.value] = null |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
handleReply(row) { |
||||
|
this.replyForm = { ...row } |
||||
|
this.replyVisible = true |
||||
|
}, |
||||
|
onRowDblclick(row) { |
||||
|
this.replyForm = { ...row } |
||||
|
this.replyVisible = true |
||||
|
}, |
||||
|
async submitReply() { |
||||
|
if (this.replyForm.reply) return |
||||
|
await this.$refs.replyForm.validate() |
||||
|
this.replyLoading = true |
||||
|
try { |
||||
|
const params = { |
||||
|
id: this.replyForm.id, |
||||
|
reply: this.replyForm.reply |
||||
|
} |
||||
|
await FetchReplyReaderMessage(params) |
||||
|
this.$message.success('回复成功') |
||||
|
this.replyVisible = false |
||||
|
this.crud.refresh() |
||||
|
} catch (error) { |
||||
|
this.$message.error('回复失败') |
||||
|
console.error(error) |
||||
|
} finally { |
||||
|
this.replyLoading = false |
||||
|
} |
||||
|
}, |
||||
|
// 清空回复表单验证 |
||||
|
clearReplyFormValidate() { |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.replyForm) { |
||||
|
this.$refs.replyForm.clearValidate() |
||||
|
} |
||||
|
this.replyVisible = false |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .input-prepend .el-input__inner{ |
||||
|
padding-left: 110px; |
||||
|
} |
||||
|
::v-deep .el-dialog__footer{ |
||||
|
padding: 0 0 20px 0 !important; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue