初始化
This commit is contained in:
aixianling
263
packages/wechat/AppAsk/components/Detail.vue
Normal file
263
packages/wechat/AppAsk/components/Detail.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<ai-detail>
|
||||
<template slot="title">
|
||||
<ai-title title="随心问详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
|
||||
<template slot="rightBtn">
|
||||
<el-button
|
||||
@click="close"
|
||||
size="small"
|
||||
v-if="info.status !== '2'"
|
||||
icon="iconfont iconReject">
|
||||
关闭留言
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="info.status !== '2'"
|
||||
icon="iconfont iconRegister"
|
||||
@click="isShow = true">
|
||||
回复留言
|
||||
</el-button>
|
||||
</template>
|
||||
</ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<ai-wrapper
|
||||
label-width="56px">
|
||||
<ai-info-item label="标题" isLine>{{ info.title }}</ai-info-item>
|
||||
<ai-info-item label="提问状态">
|
||||
<span :style="{color: info.status === '0' ? '#F79300' : '#222'}">{{
|
||||
dict.getLabel('leaveMessageStatus', info.status)
|
||||
}}</span>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="提问编号">{{ info.msgCode }}</ai-info-item>
|
||||
<ai-info-item label="提问人">{{ info.leaveName }}</ai-info-item>
|
||||
<ai-info-item label="提问时间">{{ info.createTime }}</ai-info-item>
|
||||
<ai-info-item label="提问内容" isLine>{{ info.content }}</ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="沟通记录">
|
||||
<template #content>
|
||||
<div class="comments">
|
||||
<div class="comments-item" v-for="(item, index) in info.appLeaveMessageReplyList" :key="index"
|
||||
:class="[item.userType === '1' ? 'comments-item__replay' : '']">
|
||||
<div class="comments-item__body">
|
||||
<div class="comments-item__top">
|
||||
<img class="comments-item__avatar" v-if="item.headPortrait" :src="item.headPortrait">
|
||||
<span v-else>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
|
||||
<div class="comments-item__middle">
|
||||
<div class="comments-item__middle--top">
|
||||
<h2 v-if="item.userType === '0'">{{ item.createUserName }}</h2>
|
||||
<h3 v-if="item.userType === '1'">{{ item.createUnitName }}</h3>
|
||||
<h2 v-if="item.userType === '1'">回复</h2>
|
||||
</div>
|
||||
<p v-if="item.userType === '1'">操作员：{{ item.createUserName }}{{ item.createUserPhone }}</p>
|
||||
</div>
|
||||
<i class="comment-item__date">{{ item.createTime }}</i>
|
||||
</div>
|
||||
<div class="comments-item__content">
|
||||
<p>{{ item.content }}</p>
|
||||
<ai-uploader :instance="instance" :disabled="true" v-model="item.images"></ai-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="empty" class="no-data" style="height:160px;" v-if="!info.appLeaveMessageReplyList.length"></div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="800px"
|
||||
title="回复留言"
|
||||
@close="onClose"
|
||||
@onConfirm="confirm">
|
||||
<el-form label-width="90px" :model="form" ref="form">
|
||||
<el-form-item label="回复内容" prop="content" :rules="[{required: true, message: '请输入回复内容', trigger: 'blur'}]">
|
||||
<el-input :maxlength="500" show-word-limit type="textarea" :rows="5" v-model="form.content"
|
||||
placeholder="请输入回复内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片附件" prop="imgs">
|
||||
<ai-uploader :instance="instance" v-model="form.images" :limit="9"></ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'detail',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
info: {
|
||||
appLeaveMessageReplyList: []
|
||||
},
|
||||
form: {
|
||||
explain: '',
|
||||
images: []
|
||||
},
|
||||
imgs: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
created() {
|
||||
this.getInfo(this.params.id)
|
||||
},
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
this.instance.post(`/app/appleavemessage/queryDetailById?id=${id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.info = res.data
|
||||
this.info.appLeaveMessageReplyList = res.data.appLeaveMessageReplyList.map(item => {
|
||||
item.images = JSON.parse(item.images).map(e => ({
|
||||
...e,
|
||||
url: e.accessUrl || e.url || e?.file?.accessUrl
|
||||
}))
|
||||
return item
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onClose() {
|
||||
this.form.explain = ''
|
||||
},
|
||||
close() {
|
||||
this.$confirm('确定关闭该数据？').then(() => {
|
||||
this.instance.post(`/app/appleavemessage/addOrUpdate`, {
|
||||
id: this.params.id,
|
||||
status: 2
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('关闭成功！')
|
||||
this.cancel(true)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/appleavemessagereply/addOrUpdate`, {
|
||||
content: this.form.content,
|
||||
msgCode: this.info.msgCode,
|
||||
userType: '1',
|
||||
createUnitId: this.user.info.unitId,
|
||||
createUnitName: this.user.info.unitName,
|
||||
images: this.form.images.length ? JSON.stringify(this.form.images) : '[]'
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.isShow = false
|
||||
this.$message.success('回复成功')
|
||||
this.getInfo(this.params.id)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.comments {
|
||||
.comments-item__body, .comments-replay__item {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px 40px 10px 16px;
|
||||
}
|
||||
|
||||
.comments-item__replay {
|
||||
background: #F5F6F9;
|
||||
}
|
||||
|
||||
.comments-item__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.comments-item__middle {
|
||||
flex: 1;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.comments-item__middle--top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2, h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-right: 6px;
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 4px;
|
||||
color: #888888;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-item__date {
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.comments-item__avatar, span {
|
||||
flex-shrink: 1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: #2266FF;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-item__content {
|
||||
padding-left: 48px;
|
||||
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
line-height: 22px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-item__body {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
packages/wechat/AppAsk/components/List.vue
Normal file
168
packages/wechat/AppAsk/components/List.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<ai-list class="AppAsk">
|
||||
<template slot="title">
|
||||
<ai-title title="随心问" isShowBottomBorder></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<el-radio-group size="small" v-model="search.status" @change="search.current = 1, getList()">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in dict.getDict('leaveMessageStatus')"
|
||||
:key="index"
|
||||
:label="item.dictValue"
|
||||
size="small">
|
||||
{{ item.dictName }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="search.title"
|
||||
size="small"
|
||||
@keyup.enter.native="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="options" width="120px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span class="table-btn" title="详情" @click="toDetail(row.id)">详情</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="publicity" width="120px" fixed="right" label="是否公示" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-switch v-model="row.isPublic" active-value="1" @change="() => onSwitchChange(row.id, row.isPublic)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: 0,
|
||||
title: ''
|
||||
},
|
||||
currIndex: 0,
|
||||
total: 10,
|
||||
colConfigs: [
|
||||
{ prop: 'msgCode', label: '编号' },
|
||||
{ prop: 'title', label: '标题' },
|
||||
{ prop: 'type', label: '类型', align: 'center', formart: v => this.dict.getLabel('leaveMessageType', v) },
|
||||
{ prop: 'leaveName', label: '提问人', align: 'center' },
|
||||
{ prop: 'createTime', label: '提问时间' },
|
||||
{ prop: 'lastReplyTime', label: '最后回复时间' },
|
||||
{ slot: 'publicity', label: '是否公示' },
|
||||
{ slot: 'options', label: '操作' }
|
||||
],
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.dict.load(['leaveMessageType', 'leaveMessageStatus']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post(`/app/appleavemessage/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onSwitchChange (id) {
|
||||
this.instance.post(`/app/appleavemessage/public?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'detail',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
span {
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
&.ai-tabs__active {
|
||||
color: #222;
|
||||
border-bottom: 2px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AppAsk {
|
||||
.table-btn {
|
||||
margin-right: 16px;
|
||||
color: #2266FF;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user