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