<template>
<div class="small-user-wrapper">
<!-- 搜索 -->
<el-card class="box-card">
<div class="filter-container">
<el-form :model="searchInfo" label-width="120px">
<Row>
<Col :xs="24" :lg="6">
<el-form-item label="用户评价：">
<el-select v-model="searchInfo.recommend_type" style="width:100%;" placeholder="请选择用户评价状态" clearable>
<el-option label="好评" :value="1"></el-option>
<el-option label="差评" :value="2"></el-option>
</el-select>
</el-form-item>
</Col>
</Row>
<el-row type="flex" justify="end" style="margin-bottom:10px;align-items: center;">
<el-button type="primary" icon="el-icon-search" style="margin-right: 10px" @click="search">搜索</el-button>
<el-button type="dange" icon="el-icon-refresh" style="margin-right: 10px" @click="reset">重置</el-button>
<!-- <el-button type="primary" style="margin-right: 10px">导出</el-button> -->
<!-- <div class="screen" @click="more=!more">{{more?'收起':'更多'}}筛选<i :class="more?'el-icon-arrow-up':'el-icon-arrow-down'"></i></div> -->
</el-row>
</el-form>
</div>
</el-card>
<el-card class="box-card" style="margin-top:10px;">
<Row class="table-container">
<i-col :span="24">
<div v-loading="tableLoading">
<el-table :data="tableData" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
header-cell-class-name="table-th" :header-cell-style="{ textAlign: 'center' }">
<!-- <el-table-column prop="question_title" label="问题" /> -->
<el-table-column prop="recommend_type" label="用户评价">
<template slot-scope="{ row }">{{ row.recommend_type == 1 ? "好评" : "差评" }}</template>
</el-table-column>
<el-table-column prop="recommend_content" label="用户建议" />
<el-table-column prop="created_at" label="创建时间" />
<el-table-column label="操作" width="180px">
<template slot-scope="{row}">
<el-button type="primary" @click="showDetails(row.id)">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination v-show="total > 0" @size-change="handleSizeChange($event)"
@current-change="handleCurrentChange($event)" :current-page="page"
:page-sizes="[10, 20, 30, 40, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
:total="total" style="margin-top:10px;">
</el-pagination>
</div>
</i-col>
</Row>
</el-card>
<el-dialog :close-on-click-modal="false" title="详情" width="900px" top="10vh" :visible.sync="detailsVisible">
<ul>
<li>
<div class="bolder">用户信息：</div>
</li>
<li>
<div>姓名：</div>
<div>{{ detailsData.name || "匿名用户" }}</div>
</li>
<li v-if="detailsData.mobile">
<div>手机号：</div>
<div>{{ detailsData.mobile }}</div>
</li>
<li v-if="detailsData.company">
<div>公司：</div>
<div>{{ detailsData.company }}</div>
</li>
<li v-if="detailsData.position">
<div>职位：</div>
<div>{{ detailsData.position }}</div>
</li>
<li v-if="detailsData.email">
<div>邮箱：</div>
<div>{{ detailsData.email }}</div>
</li>
<li v-if="detailsData.recommend_type">
<div class="bolder">用户评价：</div>
<div>{{ detailsData.recommend_type == 1 ? "好评" : "差评" }}</div>
</li>
<li v-if="detailsData.recommend_content && detailsData.recommend_content.length > 0">
<div class="bolder">用户建议：</div>
<div>
<span class="label" v-for="(item, index) in detailsData.recommend_content" :key="index">{{ item }}</span>
</div>
</li>
<li v-if="detailsData.question_title">
<div class="bolder">搜索标题：</div>
<div>{{ detailsData.question_title }}</div>
</li>
<li v-if="detailsData.question_answer">
<div class="bolder">回答内容：</div>
<div>{{ detailsData.question_answer }}</div>
</li>
<li v-if="detailsData.library_result && detailsData.library_result.length > 0" style="flex-wrap: wrap;">
<div class="bolder" style="width: 100%; margin-bottom: 15px;">文件列表：</div>
<el-table :data="detailsData.library_result" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
header-cell-class-name="table-th" :header-cell-style="{ textAlign: 'center' }">
<el-table-column prop="title" label="名称" />
<el-table-column prop="file_type_str" label="类型"/>
</el-table>
</li>
</ul>
</el-dialog>
</div>
</template>
<script>
import { library } from '@/api/library';
import layoutMinix from '../../layout/components/mixins/layout';
export default {
mixins: [layoutMinix],
data() {
return {
// 搜索条件对象
searchInfo: {
recommend_type: ""
},
// 表格数据
tableData: [],
// 表格loading
tableLoading: false,
page: 1,
size: 10,
total: null,
// 详情显示和隐藏
detailsVisible: false,
// 详情数据
detailsData: {
name: "",
mobile: "",
company: "",
position: "",
email: "",
recommend_type: "",
recommend_content: [],
question_title: "",
question_answer: "",
library_result: []
}
};
},
mounted() {
this.getData();
},
methods: {
/**
* 搜索
*/
search() {
this.page = 1;
this.getData();
},
/**
* 重置搜索
*/
reset() {
this.page = 1;
Object.keys(this.searchInfo).forEach(key => {
this.searchInfo[key] = "";
})
this.getData();
},
/**
* 获取表格
*/
async getData() {
this.tableLoading = true;
let params = {
...this.searchInfo,
page: this.page,
size: this.size,
};
let res = await library.getUserSuggestionData(params);
if (res.code == 200) {
this.total = res.data.total;
this.tableData = res.data.data;
} else {
this.$Message.error(`获取数据失败`);
}
this.tableLoading = false;
},
/**
* 展示数量发生改变
*/
handleSizeChange(val) {
this.size = val;
this.getData();
},
/**
* 页数发生改变
*/
handleCurrentChange(val) {
this.page = val;
this.getData();
},
/**
* 查看详情
*/
async showDetails(id) {
let params = { id };
let res = await library.getUserSuggestionDetails(params);
if (res.code == 200) {
this.detailsData.recommend_type = res.data.recommend_type;
this.detailsData.recommend_content = res.data.recommend_content;
if (res.data.user) {
this.detailsData.name = res.data.user.name;
this.detailsData.mobile = res.data.user.mobile;
this.detailsData.company = res.data.user.company;
this.detailsData.position = res.data.user.position;
this.detailsData.email = res.data.user.email;
}
if (res.data.library_search) {
this.detailsData.question_title = res.data.library_search.question_title;
this.detailsData.question_answer = res.data.library_search.question_answer;
this.detailsData.library_result = res.data.library_search.library_result;
}
this.detailsVisible = true;
} else {
this.$Message.error(`获取数据失败`);
}
}
}
};
</script>
<style lang="scss" scoped>
.small-user-wrapper {
.ivu-btn>.ivu-icon {
line-height: 1;
font-size: 18px;
}
}
.ivu-form-item-required .ivu-form-item-label:before {
display: none;
}
.ivu-message{
z-index: 3000 !important;
}
ul {
li {
display: flex;
margin-bottom: 15px;
& > div:first-of-type {
margin-right: 10px;
width: 70px;
}
& > div:last-of-type {
flex: 1;
}
}
}
.bolder {
font-weight: bolder;
}
.label {
display: inline-block;
padding: 8px 15px;
margin-right: 10px;
background: #f6f6f8;
border-radius: 1px;
border: 1px solid #c4c8d1;
margin-bottom: 10px;
}
</style>