Files
dvcp_v2_webapp/packages/wechat/AppAsk/components/List.vue
yanran200730 a6dafbff38 28368
2022-03-22 14:37:11 +08:00

169 lines
4.3 KiB
Vue

<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"
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="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>