rating
This commit is contained in:
zzc
0
src/views/rating/topicCommentRecord/index.vue
Normal file
0
src/views/rating/topicCommentRecord/index.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" @close="close">
|
||||
<el-form ref="form" label-width="100px" :model="form" :rules="rules">
|
||||
<el-form-item label="参与用户" prop="userId">
|
||||
<el-select v-model="form.userId" v-loadmore="loadMoreUsers" filterable placeholder="请选择参与评分的用户" style="width: 100%">
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.nickname || item.id" :value="item.id">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-image
|
||||
v-if="item.avatar"
|
||||
:src="getThumbUrl(item.avatar)"
|
||||
style="width: 24px; height: 24px; border-radius: 50%; margin-right: 10px"
|
||||
/>
|
||||
<span>{{ item.nickname || '未知用户' }}</span>
|
||||
<el-tag v-if="item.isRobot" size="mini" style="margin-left: 8px" type="info">机器人</el-tag>
|
||||
<el-tag v-else size="mini" style="margin-left: 8px" type="success">真人</el-tag>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="评价主题" prop="topicId">
|
||||
<el-select
|
||||
v-model="form.topicId"
|
||||
v-loadmore="loadMoreTopics"
|
||||
filterable
|
||||
placeholder="请选择评价主题"
|
||||
style="width: 100%"
|
||||
@change="handleTopicChange"
|
||||
>
|
||||
<el-option v-for="item in topicList" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="评价项" prop="itemId">
|
||||
<el-select
|
||||
v-model="form.itemId"
|
||||
v-loadmore="loadMoreItems"
|
||||
:disabled="!form.topicId"
|
||||
filterable
|
||||
placeholder="请先选择主题，再选择评价项"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-image
|
||||
v-if="item.avatarUrl"
|
||||
:src="getThumbUrl(item.avatarUrl)"
|
||||
style="width: 24px; height: 24px; border-radius: 50%; margin-right: 10px"
|
||||
/>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="评分" prop="scoreType">
|
||||
<el-radio-group v-model="form.scoreType">
|
||||
<el-radio :label="5">夯</el-radio>
|
||||
<el-radio :label="4">顶级</el-radio>
|
||||
<el-radio :label="3">人上人</el-radio>
|
||||
<el-radio :label="2">NPC</el-radio>
|
||||
<el-radio :label="1">拉</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button :loading="saving" type="primary" @click="save">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList as getUserList } from '@/api/system/user'
|
||||
import { getList as getTopicList } from '@/api/rating/topic'
|
||||
import { getList as getItemList } from '@/api/rating/topicItem'
|
||||
import { score } from '@/api/rating/topicOperate'
|
||||
import { getThumbUrl } from '@/utils/blessing'
|
||||
|
||||
export default {
|
||||
name: 'RecordRatingEdit',
|
||||
directives: {
|
||||
loadmore: {
|
||||
bind(el, binding) {
|
||||
setTimeout(() => {
|
||||
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
|
||||
if (SELECTWRAP_DOM) {
|
||||
SELECTWRAP_DOM.addEventListener('scroll', function () {
|
||||
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 2
|
||||
if (condition) {
|
||||
binding.value()
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 0)
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '立即评分',
|
||||
dialogFormVisible: false,
|
||||
saving: false,
|
||||
form: {
|
||||
userId: '',
|
||||
topicId: '',
|
||||
itemId: '',
|
||||
scoreType: '',
|
||||
},
|
||||
rules: {
|
||||
userId: [{ required: true, trigger: 'change', message: '请选择用户' }],
|
||||
topicId: [{ required: true, trigger: 'change', message: '请选择评价主题' }],
|
||||
itemId: [{ required: true, trigger: 'change', message: '请选择评价项' }],
|
||||
scoreType: [{ required: true, trigger: 'change', message: '请选择评分' }],
|
||||
},
|
||||
|
||||
// 用户列表
|
||||
userList: [],
|
||||
userQuery: { pageNo: 1, pageSize: 20 },
|
||||
userTotal: 0,
|
||||
fetchingUsers: false,
|
||||
|
||||
// 主题列表
|
||||
topicList: [],
|
||||
topicQuery: { pageNo: 1, pageSize: 20 },
|
||||
topicTotal: 0,
|
||||
fetchingTopics: false,
|
||||
|
||||
// 评价项列表
|
||||
itemList: [],
|
||||
itemQuery: { pageNo: 1, pageSize: 20, topicId: '' },
|
||||
itemTotal: 0,
|
||||
fetchingItems: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getThumbUrl,
|
||||
showEdit() {
|
||||
this.title = '立即评分'
|
||||
this.dialogFormVisible = true
|
||||
this.form = this.$options.data().form
|
||||
|
||||
// 重置列表数据
|
||||
this.userList = []
|
||||
this.userQuery.pageNo = 1
|
||||
this.userTotal = 0
|
||||
|
||||
this.topicList = []
|
||||
this.topicQuery.pageNo = 1
|
||||
this.topicTotal = 0
|
||||
|
||||
this.itemList = []
|
||||
this.itemQuery.pageNo = 1
|
||||
this.itemQuery.topicId = ''
|
||||
this.itemTotal = 0
|
||||
|
||||
// 初始化加载第一页数据
|
||||
this.fetchUserList()
|
||||
this.fetchTopicList()
|
||||
},
|
||||
close() {
|
||||
this.$refs['form'].resetFields()
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
|
||||
// -- 用户列表加载 --
|
||||
async fetchUserList() {
|
||||
if (this.fetchingUsers) return
|
||||
this.fetchingUsers = true
|
||||
try {
|
||||
const params = { pageNo: this.userQuery.pageNo, pageSize: this.userQuery.pageSize }
|
||||
const { data } = await getUserList(params)
|
||||
this.userList = this.userList.concat(data.list || [])
|
||||
this.userTotal = data.totalCount || 0
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.fetchingUsers = false
|
||||
}
|
||||
},
|
||||
loadMoreUsers() {
|
||||
if (this.userList.length >= this.userTotal || this.fetchingUsers) return
|
||||
this.userQuery.pageNo += 1
|
||||
this.fetchUserList()
|
||||
},
|
||||
|
||||
// -- Topic 列表加载 --
|
||||
async fetchTopicList() {
|
||||
if (this.fetchingTopics) return
|
||||
this.fetchingTopics = true
|
||||
try {
|
||||
const { data } = await getTopicList(this.topicQuery)
|
||||
this.topicList = this.topicList.concat(data.list || [])
|
||||
this.topicTotal = data.totalCount || 0
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.fetchingTopics = false
|
||||
}
|
||||
},
|
||||
loadMoreTopics() {
|
||||
if (this.topicList.length >= this.topicTotal || this.fetchingTopics) return
|
||||
this.topicQuery.pageNo += 1
|
||||
this.fetchTopicList()
|
||||
},
|
||||
|
||||
// -- Item 列表加载 --
|
||||
async fetchItemList() {
|
||||
if (this.fetchingItems || !this.itemQuery.topicId) return
|
||||
this.fetchingItems = true
|
||||
try {
|
||||
const { data } = await getItemList(this.itemQuery)
|
||||
this.itemList = this.itemList.concat(data.list || [])
|
||||
this.itemTotal = data.totalCount || 0
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.fetchingItems = false
|
||||
}
|
||||
},
|
||||
loadMoreItems() {
|
||||
if (this.itemList.length >= this.itemTotal || this.fetchingItems) return
|
||||
this.itemQuery.pageNo += 1
|
||||
this.fetchItemList()
|
||||
},
|
||||
|
||||
handleTopicChange(val) {
|
||||
this.form.itemId = ''
|
||||
this.itemList = []
|
||||
this.itemQuery.pageNo = 1
|
||||
this.itemTotal = 0
|
||||
|
||||
if (val) {
|
||||
this.itemQuery.topicId = val
|
||||
this.fetchItemList()
|
||||
} else {
|
||||
this.itemQuery.topicId = ''
|
||||
}
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$refs['form'].validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.saving = true
|
||||
try {
|
||||
const { msg } = await score(this.form)
|
||||
this.$baseMessage(msg || '评分成功', 'success')
|
||||
this.close()
|
||||
this.$emit('fetch-data')
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.saving = false
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -75,6 +75,9 @@
|
||||
<el-form-item>
|
||||
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="el-icon-edit" type="success" @click="handleRateNow">立即评分</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</vab-query-form-left-panel>
|
||||
</vab-query-form>
|
||||
@@ -146,6 +149,8 @@
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
|
||||
<record-rating-edit ref="ratingEdit" @fetch-data="fetchData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -156,9 +161,11 @@
|
||||
import { getList as getItemList } from '@/api/rating/topicItem'
|
||||
import { formatTime } from '@/utils'
|
||||
import { getThumbUrl } from '@/utils/blessing'
|
||||
import RecordRatingEdit from './components/RecordRatingEdit'
|
||||
|
||||
export default {
|
||||
name: 'RatingTopicRecordIndex',
|
||||
components: { RecordRatingEdit },
|
||||
directives: {
|
||||
loadmore: {
|
||||
bind(el, binding) {
|
||||
@@ -320,6 +327,9 @@
|
||||
},
|
||||
|
||||
// -- 列表数据加载 --
|
||||
handleRateNow() {
|
||||
this.$refs['ratingEdit'].showEdit()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.queryForm.pageSize = val
|
||||
this.fetchData()
|
||||
|
||||
Reference in New Issue
Block a user