Skip to content

C
company_app
提交 ff349cea 作者: 毛细亚
操作

🐞 fix: 优化技能库组件样式和交互

上级 66956199
正在显示 包含 866 行增加 和 622 行删除
src/views/components/skill/crossLibrary.vue
<template>
<div class="skillLibrary">
<div v-loading="loading" class="rowFlex skillBox">
<!-- 标签 -->
<el-collapse-transition>
<div v-if="groupList.length > 0" class="tagList columnFlex">
<div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false" :class="groupActive == item.value ? 'tagItemActiveText' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
<div class="rowFlex columnCenter spaceBetween tagItemGroup" @click="groupFilter(item, index)">
<div class="rowFlex columnCenter">
<i class="el-icon-rank icon" style="cursor: move"></i>
<div class="skillLibrary">
<div v-loading="loading" class="rowFlex skillBox">
<!-- 标签 -->
<el-collapse-transition>
<div v-if="groupList.length > 0" class="tagList columnFlex">
<div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false"
:class="groupActive == item.value ? 'tagItemActiveText' : ''"
@dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
<div class="rowFlex columnCenter spaceBetween tagItemGroup" @click="groupFilter(item, index)">
<div class="rowFlex columnCenter">
<el-tooltip effect="dark" placement="top" :content="item.name" v-if="item.name.length >= 6">
<p class="text hidden">{{ item.name }}</p>
</div>
<i class="el-icon-caret-right rotageIcon" :class="groupActive == item.value ? 'rotage' : ''"></i>
</el-tooltip>
<p v-else class="text hidden">{{ item.name }}</p>
</div>
<!-- 二级分组 -->
<div v-if="item.child.length > 0 && groupActive == item.value" class="childGroup">
<div v-for="child in item.child" :key="child._id" class="childGroupText" :class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
<p class="text hidden">{{ child.name }}</p>
</div>
<i class="el-icon-caret-right rotageIcon" :class="groupActive == item.value ? 'rotage' : ''"></i>
</div>
<!-- 二级分组 -->
<div v-if="item.child.length > 0 && groupActive == item.value" class="childGroup">
<div v-for="child in item.child" :key="child._id" class="childGroupText"
:class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
<p class="text hidden">{{ child.name }}</p>
</div>
</div>
</div>
<div v-else class="noContent rowFlex allCenter">
<noContent/>
</div>
</el-collapse-transition>
<!-- 话术 -->
<div class="libraryListContent">
<div class="inputContent">
<el-input v-model="requestData.title" placeholder="请输入话术内容" class="input-with-select">
<el-button slot="append" icon="el-icon-search" @click="contentSearch"></el-button>
</el-input>
</div>
<div ref="skillLibrary" v-loading="skillLoading" @scroll="paperScroll" class="scrollList">
<div v-for="(items, indexs) in groupDataList" :key="indexs" class="answerContent">
<div class="question"><span class="title">Q:</span>{{ items.question }}</div>
<div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem" style="width: 100%">
<!-- <span class="question">{{ answerIndex + 1 }}: {{ answer }}</span> -->
<div v-if="answer.msgtype == 'text'" class="answerText rowFlex spaceBetween">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
<p v-if="answer.msgtype == 'text'" class="rowFlex textAnswer flex1">
{{ answer.text.content || '' }}
</p>
<i class="el-icon-document-copy copyIcon rowFlex" @click="sendMessageEdit(answer, items._id)"></i>
</div>
<div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
<el-image style="max-width: 200px" :src="answer.image.picurl" @click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]" > </el-image>
</div>
</div>
<div v-else class="noContent rowFlex allCenter">
<noContent />
</div>
</el-collapse-transition>
<!-- 话术 -->
<div class="libraryListContent">
<div class="inputContent">
<el-input v-model="requestData.title" placeholder="请输入话术内容" class="input-with-select">
<el-button slot="append" icon="el-icon-search" @click="contentSearch"></el-button>
</el-input>
</div>
<div ref="skillLibrary" v-loading="skillLoading" @scroll="paperScroll" class="scrollList">
<div v-for="(items, indexs) in groupDataList" :key="indexs" class="answerContent">
<div class="question"><span class="title">Q:</span>{{ items.question }}</div>
<div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem"
style="width: 100%">
<!-- <span class="question">{{ answerIndex + 1 }}: {{ answer }}</span> -->
<div v-if="answer.msgtype == 'text'" class="answerText rowFlex spaceBetween">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
<p v-if="answer.msgtype == 'text'" class="rowFlex textAnswer flex1">
{{ answer.text.content || '' }}
</p>
<i class="el-icon-document-copy copyIcon rowFlex" @click="sendMessageEdit(answer, items._id)"></i>
</div>
<div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
<el-image style="max-width: 200px" :src="answer.image.picurl"
@click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]"> </el-image>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote,
import { cross_corp_robot_knowledge_group_index, cross_corp_robot_knowledge_group_getList} from '@/api/skill'
import { mapState, mapMutations, mapActions } from 'vuex'
import { throttle, debounce, copyToClipboard,sendChatMessage } from '@/utils/index'
import noContent from '@/components/noContent.vue'
export default {
name: 'skillLibrary',
components: {
noContent
},
props: {
activeName: {
default: '',
type: String
}
},
data() {
return {
collapseActive: '',
groupActive: '0',
groupActiveChild: '0',
activeGroup: {},
groupList: [],
groupLastList: [],
groupDataList: [],
groupLastDataList: [],
pageInfo: {
</div>
</template>
<script>
// procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote,
import { cross_corp_robot_knowledge_group_index, cross_corp_robot_knowledge_group_getList } from '@/api/skill'
import { mapState, mapMutations, mapActions } from 'vuex'
import { throttle, debounce, copyToClipboard, sendChatMessage } from '@/utils/index'
import noContent from '@/components/noContent.vue'
export default {
name: 'skillLibrary',
components: {
noContent
},
props: {
activeName: {
default: '',
type: String
}
},
data() {
return {
collapseActive: '',
groupActive: '0',
groupActiveChild: '0',
activeGroup: {},
groupList: [],
groupLastList: [],
groupDataList: [],
groupLastDataList: [],
pageInfo: {
page: 1,
page_size: 20,
total: 0
},
skillLoading: false,
loading: false,
requestData: {
title: '',
first_group_id: '',
second_group_id: ''
},
sortType: '',
sortID: {
_id: '',
before_id: '',
after_id: ''
},
filterText: {},
dragging: null,
orderList: [
{ label: '知识库', type: 'library' },
{ label: '个人话术', type: 'personal' },
{ label: '企业话术', type: 'company' }
]
}
},
computed: {
...mapState('game', ['accountSelect', 'chatUserInfo']),
},
watch: {
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '') {
this.pageInfo = {
page: 1,
page_size: 20,
total: 0
},
skillLoading: false,
loading: false,
requestData: {
title: '',
first_group_id: '',
second_group_id: ''
},
sortType: '',
sortID: {
_id: '',
before_id: '',
after_id: ''
},
filterText: {},
dragging: null,
orderList: [
{ label: '知识库', type: 'library' },
{ label: '个人话术', type: 'personal' },
{ label: '企业话术', type: 'company' }
]
}
}
},
computed: {
...mapState('game', ['accountSelect','chatUserInfo']),
activeName(newVal, oldVal) {
if (newVal == 'library' && newVal != oldVal) {
this.resizeSelect()
this.requestLibraryData()
}
}
},
mounted() {
this.requestLibraryData()
},
methods: {
sendMessage: throttle(function (item, id) {
console.log(item, id)
// this.skillQuote(id, item.length)
}, 500),
handleDragStart(e, item, index) {
this.sortID._id = item._id
this.dragging = item
},
watch: {
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '') {
this.pageInfo = {
page: 1,
page_size: 20,
total: 0
}
paperScroll: debounce(function () {
const el = this.$refs.skillLibrary
if (el.offsetHeight + el.scrollTop + 10 >= el.scrollHeight) {
console.log('下一页')
this.pageInfo.page++
this.searchTable()
}
}, 500),
skillQuote(id, num) {
const data = {
type: this.activeName,
procedure_id: id,
quote_count: num || 1
}
skillQuote(data).then((res) => {
console.log(res)
})
},
sortSkill() {
procedureSort(this.sortID).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
}
},
activeName(newVal, oldVal) {
if (newVal == 'library' && newVal != oldVal) {
this.resizeSelect()
this.requestLibraryData()
})
},
sortSkillGroup() {
procedureGroupSort(this.sortID).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
}
})
},
// 发送语音的时候 先编辑再发送
sendMessageEdit(item, id) {
// 复制内容到粘贴板
if (item && item.text && item.text.content) {
copyToClipboard(
item.text.content,
(message) => this.$message.success(message),
(message) => this.$message.error(message)
)
}
this.sendChatMessage(item.text.content || '', 'text')
},
mounted() {
this.requestLibraryData()
sendMessageImage(item) {
console.log(item, 'item')
this.sendChatMessage(item.image.picurl || '', 'image')
},
methods: {
sendMessage: throttle(function(item, id) {
console.log(item, id)
// this.skillQuote(id, item.length)
}, 500),
handleDragStart(e, item, index) {
this.sortID._id = item._id
this.dragging = item
},
paperScroll:debounce(function(){
const el = this.$refs.skillLibrary
if (el.offsetHeight + el.scrollTop + 10 >= el.scrollHeight) {
console.log('下一页')
this.pageInfo.page++
this.searchTable()
}
},500),
skillQuote(id, num) {
const data = {
type: this.activeName,
procedure_id: id,
quote_count: num || 1
}
skillQuote(data).then((res) => {
console.log(res)
})
},
sortSkill() {
procedureSort(this.sortID).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
}
})
},
sortSkillGroup() {
procedureGroupSort(this.sortID).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
}
})
},
// 发送语音的时候 先编辑再发送
sendMessageEdit(item, id) {
// 复制内容到粘贴板
if (item && item.text && item.text.content) {
copyToClipboard(
item.text.content,
(message) => this.$message.success(message),
(message) => this.$message.error(message)
)
}
this.sendChatMessage(item.text.content || '', 'text')
},
sendMessageImage(item){
console.log(item, 'item')
this.sendChatMessage(item.image.picurl || '', 'image')
},
contentSearch() {
this.pageInfo = {
page: 1,
page_size: 20,
total: 0
}
this.searchTable('msg')
},
// 知识库话术
requestLibraryData() {
console.log(this.chatUserInfo, 'chatUserInfo')
this.loading = true
const data = {
page: 1,
page_size: 100,
userid: this.chatUserInfo.userid
}
cross_corp_robot_knowledge_group_index(data).then((res) => {
this.loading = false
if (res.data.data) {
res.data.data.unshift({
name: '全部分组',
value: '',
child: []
})
this.groupList = res.data.data.map((item, index) => {
item.label = item.name
item.value = item._id
return item
})
this.groupLastList = this.groupList
this.groupFilter(this.groupList[0])
} else {
this.groupList = []
this.groupLastList = []
}
})
},
groupFilter(item, index) {
if (!item._id) {
this.requestData.second_group_id = ''
this.activeGroup = {}
contentSearch() {
this.pageInfo = {
page: 1,
page_size: 20,
total: 0
}
this.searchTable('msg')
},
// 知识库话术
requestLibraryData() {
console.log(this.chatUserInfo, 'chatUserInfo')
this.loading = true
const data = {
page: 1,
page_size: 100,
userid: this.chatUserInfo.userid
}
cross_corp_robot_knowledge_group_index(data).then((res) => {
this.loading = false
if (res.data.data) {
res.data.data.unshift({
name: '全部分组',
value: '',
child: []
})
this.groupList = res.data.data.map((item, index) => {
item.label = item.name
item.value = item._id
return item
})
this.groupLastList = this.groupList
this.groupFilter(this.groupList[0])
} else {
this.groupList = []
this.groupLastList = []
}
this.groupActive = item.value
item.child && item.child[0] ? ((this.activeGroup = item.child[0]), (this.groupActiveChild = item.child[0]._id)) : ''
this.searchTable()
},
groupFilterChild(child) {
this.groupActiveChild = 0
this.activeGroup = child
this.groupActiveChild = child._id
this.searchTable()
this.$forceUpdate()
},
// 搜索结果
async searchTable(msg) {
this.skillLoading = true
this.requestData.second_group_id = this.activeGroup._id || ''
this.requestData.title = this.requestData.title.trim()
const data = { ...this.requestData, ...this.pageInfo, log_scan: msg ? 1 : 0, userid: this.chatUserInfo.userid }
cross_corp_robot_knowledge_group_getList(data).then((res) => {
this.skillLoading = false
this.pageInfo.page === 1 ? this.groupDataList = res.data.data : this.groupDataList = this.groupDataList.concat(res.data.data)
this.groupLastDataList = this.groupDataList
})
},
handleChange() {},
// 重置select
resizeSelect() {
this.groupActive = '0'
this.isResize = true
this.groupDataList = []
this.requestData.content = ''
this.pageInfo.page = 1
setTimeout(() => {
this.isResize = false
}, 2000)
},
sendChatMessage(content, type){
sendChatMessage(content, type)
},
}
})
},
groupFilter(item, index) {
if (!item._id) {
this.requestData.second_group_id = ''
this.activeGroup = {}
}
this.groupActive = item.value
item.child && item.child[0] ? ((this.activeGroup = item.child[0]), (this.groupActiveChild = item.child[0]._id)) : ''
this.searchTable()
},
groupFilterChild(child) {
this.groupActiveChild = 0
this.activeGroup = child
this.groupActiveChild = child._id
this.searchTable()
this.$forceUpdate()
},
// 搜索结果
async searchTable(msg) {
this.skillLoading = true
this.requestData.second_group_id = this.activeGroup._id || ''
this.requestData.title = this.requestData.title.trim()
const data = { ...this.requestData, ...this.pageInfo, log_scan: msg ? 1 : 0, userid: this.chatUserInfo.userid }
cross_corp_robot_knowledge_group_getList(data).then((res) => {
this.skillLoading = false
this.pageInfo.page === 1 ? this.groupDataList = res.data.data : this.groupDataList = this.groupDataList.concat(res.data.data)
this.groupLastDataList = this.groupDataList
})
},
handleChange() { },
// 重置select
resizeSelect() {
this.groupActive = '0'
this.isResize = true
this.groupDataList = []
this.requestData.content = ''
this.pageInfo.page = 1
setTimeout(() => {
this.isResize = false
}, 2000)
},
sendChatMessage(content, type) {
sendChatMessage(content, type)
},
}
</script>
<style lang="scss" scoped>
.skillLibrary {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
.noContent {
font-size: 200px;
}
</script>
<style lang="scss" scoped>
.skillLibrary {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
.noContent {
font-size: 200px;
}
.contentItemTitle {
position: absolute;
left: 10px;
z-index: 10;
cursor: pointer;
max-width: 45%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 这里是超出几行省略 */
overflow: hidden;
}
.titleFixed {
position: absolute;
right: 0px;
top: 10px;
margin-left: 15px;
margin-right: 25px;
z-index: 10;
.num {
width: auto;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
margin-right: 10px;
}
.contentItemTitle {
position: absolute;
left: 10px;
z-index: 10;
cursor: pointer;
max-width: 45%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;
.button {
width: 50px;
height: 24px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.15);
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding: 0;
}
.titleFixed {
position: absolute;
right: 0px;
top: 10px;
margin-left: 15px;
margin-right: 25px;
z-index: 10;
.num {
width: auto;
}
.contentItem {
position: relative;
margin-bottom: 5px;
cursor: move;
.contentItemDetails {
width: 100%;
height: auto;
margin: 20px 0;
padding-left: 10px;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
margin-right: 10px;
color: #333333;
max-width: calc(100% - 60px);
word-wrap: break-word;
line-height: 18px;
}
.button {
.sendButton {
width: 50px;
height: 24px;
border-radius: 4px;
......@@ -322,297 +370,316 @@
color: #333333;
padding: 0;
}
}
.contentItem {
position: relative;
margin-bottom: 5px;
cursor: move;
.contentItemDetails {
width: 100%;
height: auto;
margin: 20px 0;
padding-left: 10px;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
max-width: calc(100% - 60px);
word-wrap: break-word;
line-height: 18px;
}
.sendButton {
width: 50px;
height: 24px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.15);
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding: 0;
}
.image {
max-width: 25%;
border-radius: 5px;
}
}
}
.item {
width: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 5px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: move;
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
.image {
max-width: 25%;
border-radius: 5px;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.tags {
width: 300px;
margin-left: 10px;
.tagsItem {
width: 300px;
}
.tag {
height: 22px;
line-height: 22px;
padding: 0 8px;
background: #ffffff;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-right: 10px;
margin-bottom: 10px;
}
}
}
.item:hover .icon {
display: block;
}
}
::v-deep .el-tabs--border-card .is-active {
border: none !important;
}
::v-deep .is-active {
border: none;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
.inputContent {
width: 100%;
margin-bottom: 20px;
margin-left: 20px;
::v-deep .el-input {
width: 90%;
}
}
.skillBox {
.item {
width: 100%;
height: calc(100% - 20px);
}
.tagList {
width: 200px;
height: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 5px 0;
transition: all 0.5s;
position: relative;
border-right: 1px solid #e0e0e0;
.tagItem {
width: 100px;
height: auto;
background: #fff;
border-radius: 4px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-bottom: 6px;
cursor: pointer;
.text {
max-width: 90px;
margin-left: 5px;
}
.tagItemGroup {
height: 36px;
padding-right: 10px;
}
padding-left: 10px;
cursor: move;
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.iconFont {
font-size: 20px;
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 20px;
cursor: pointer;
.upIcon {
transform: rotate(90deg);
top: 12px;
}
.tags {
width: 300px;
margin-left: 10px;
.tagsItem {
width: 300px;
}
.tag {
height: 22px;
line-height: 22px;
padding: 0 8px;
background: #ffffff;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-right: 10px;
margin-bottom: 10px;
}
}
.tagItemActive {
color: #409EFF !important;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
background: #e4fff1;
}
.item:hover .icon {
display: block;
}
}
::v-deep .el-tabs--border-card .is-active {
border: none !important;
}
::v-deep .is-active {
border: none;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
.inputContent {
width: 100%;
margin-bottom: 20px;
margin-left: 20px;
::v-deep .el-input {
width: 90%;
}
}
.skillBox {
width: 100%;
height: calc(100% - 20px);
}
.tagList {
width: 200px;
height: 100%;
position: relative;
border-right: 1px solid #e0e0e0;
.tagItem {
width: 100px;
height: auto;
background: #fff;
border-radius: 4px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-bottom: 6px;
cursor: pointer;
.text {
max-width: 90px;
margin-left: 5px;
}
.tagItemActiveText {
color: #409EFF;
.tagItemGroup {
height: 36px;
padding-right: 10px;
}
}
.libraryListContent{
width: 100%;
height: 100%;
}
.rotageIcon {
.iconFont {
font-size: 20px;
color: #999999;
position: absolute;
right: 0;
top: 20px;
cursor: pointer;
transition: all 0.5s;
transform: rotate(0deg);
font-size: 12px;
.upIcon {
transform: rotate(90deg);
}
}
.tagItemActive {
color: #409EFF !important;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
background: #e4fff1;
}
.tagItemActiveText {
color: #409EFF;
}
.rotage {
transform: rotate(90deg);
}
.libraryListContent {
width: 100%;
height: 100%;
}
.rotageIcon {
cursor: pointer;
transition: all 0.5s;
transform: rotate(0deg);
font-size: 12px;
}
.rotage {
transform: rotate(90deg);
}
.childGroup {
p {
margin-left: 15px !important;
}
.childGroup {
p {
margin-left: 15px !important;
.childGroupText {
height: 36px;
line-height: 36px;
color: #333333;
}
}
.scrollList {
width: 100%;
height: 100%;
padding-left: 20px;
.answerContent {
width: 100%;
background: #f7f8fa;
border-radius: 5px;
border: 1px solid #e5e6eb;
padding: 10px;
margin-bottom: 20px;
.title {
width: 30px;
font-size: 14px;
font-weight: 500;
margin-right: 10px;
}
.childGroupText {
height: 36px;
line-height: 36px;
.answerItem {
margin-bottom: 10px;
}
.question {
font-weight: 500;
font-size: 14px;
color: #333333;
line-height: 20px;
text-align: left;
margin-bottom: 10px;
}
}
.scrollList {
width: 100%;
height: 100%;
padding-left: 20px;
.answerContent {
.answerText {
width: 100%;
background: #f7f8fa;
border-radius: 5px;
border: 1px solid #e5e6eb;
padding: 10px;
margin-bottom: 20px;
.title {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #333333;
text-align: justify;
font-style: normal;
.answerTextTitle {
width: 30px;
font-size: 14px;
font-size: 16px;
font-weight: 500;
margin-right: 10px;
}
.answerItem {
margin-bottom: 10px;
}
.question {
font-weight: 500;
font-size: 14px;
color: #333333;
line-height: 20px;
text-align: left;
margin-bottom: 10px;
.textAnswer {
word-wrap: break-word;
font-size: 13px;
}
.answerText {
width: 100%;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #333333;
text-align: justify;
font-style: normal;
.answerTextTitle {
width: 30px;
font-size: 16px;
font-weight: 500;
}
.textAnswer {
word-wrap: break-word;
font-size: 13px;
}
.copyIcon {
width: 20px;
color: #409EFF;
font-size: 16px;
position: relative;
top: 2px;
cursor: pointer;
margin-left: 10px;
}
.copyIcon {
width: 20px;
color: #409EFF;
font-size: 16px;
position: relative;
top: 2px;
cursor: pointer;
margin-left: 10px;
}
}
}
.scrollList::-webkit-scrollbar {display:none}
.container {
// margin-top: -20px;
}
::v-deep .el-tabs,
.el-tabs__content,
.el-tab-pane {
width: 100%;
height: 100%;
}
::v-deep .el-tabs__content {
width: 100%;
height: calc(100% - 50px);
}
::v-deep .el-tab-pane {
width: 100%;
height: 100%;
}
.scrollList {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.draggable {
position: relative;
transition: all 0.3s;
.icon {
position: absolute;
left: 10px;
top: 15px;
z-index: 10;
}
}
.textAnswer {
word-wrap: break-word;
display: inline;
}
.img_drop {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.36);
}
.scrollList::-webkit-scrollbar {
display: none
}
.container {
// margin-top: -20px;
}
::v-deep .el-tabs,
.el-tabs__content,
.el-tab-pane {
width: 100%;
height: 100%;
}
::v-deep .el-tabs__content {
width: 100%;
height: calc(100% - 50px);
}
::v-deep .el-tab-pane {
width: 100%;
height: 100%;
}
.scrollList {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.draggable {
position: relative;
transition: all 0.3s;
.icon {
position: absolute;
left: 0;
top: 0;
}
.skillLibrary::-webkit-scrollbar {display:none}
::v-deep .el-icon-circle-close {
color: #fff;
left: 10px;
top: 15px;
z-index: 10;
}
</style>
\ No newline at end of file
}
.textAnswer {
word-wrap: break-word;
display: inline;
}
.img_drop {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.36);
position: absolute;
left: 0;
top: 0;
}
.skillLibrary::-webkit-scrollbar {
display: none
}
::v-deep .el-icon-circle-close {
color: #fff;
}
</style>
\ No newline at end of file
src/views/components/skill/skillCompany.vue
......@@ -9,9 +9,15 @@
<!-- 标签 -->
<el-collapse-transition>
<div v-if="groupList.length > 0" class="tagList columnFlex">
<div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter" :draggable="activeName == 'personal' ? true : false" :class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
<i class="el-icon-rank icon" style="cursor: move"></i>
<p class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
<div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter"
:draggable="activeName == 'personal' ? true : false"
:class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)"
@dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')"
@dragend="handleDragEnd($event, item, 'group')">
<el-tooltip effect="dark" placement="top" :content="item.group_name" v-if="item.group_name.length >= 6">
<p class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
</el-tooltip>
<p v-else class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
</div>
</div>
<div v-else>暂无话术内容</div>
......@@ -20,26 +26,34 @@
<div v-loading="skillLoading" class="scrollList">
<el-collapse v-model="collapseActive" @change="handleChange">
<transition-group v-if="groupDataList.length > 0" tag="div" class="container">
<div v-for="(items, indexs) in groupDataList" :key="indexs" :draggable="activeName == 'personal' ? true : false" class="draggable" @dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)" @dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
<div v-for="(items, indexs) in groupDataList" :key="indexs"
:draggable="activeName == 'personal' ? true : false" class="draggable"
@dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)"
@dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
<el-popover placement="top" width="300" trigger="hover">
<p>{{ items.title }}</p>
<div slot="reference" class="contentItemTitle allCenter" :style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
<div slot="reference" class="contentItemTitle allCenter"
:style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
</el-popover>
<div class="rowFlex titleFixed columnCenter">
<div class="num">{{items.message && items.message.attachments && items.message.attachments.length > 1 ? `+${items.message.attachments.length - 1}条` : '' }}</div>
<div class="num">{{ items.message && items.message.attachments && items.message.attachments.length > 1 ?
`+${items.message.attachments.length - 1}条` : '' }}</div>
</div>
<el-collapse-item title="" :name="items._id" class="contentItem">
<div v-for="(i, j) in items.message.attachments" :key="j">
<div>
<div v-if="i.msgtype == 'text'" class="contentItemDetails rowFlex spaceBetween columnCenter">
<div class="text">{{ i.text.content }}</div>
<el-button class="sendButton rowFlex allCenter" @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
<el-button class="sendButton rowFlex allCenter"
@click.stop="sendMessageEdit(i, items._id)">发送</el-button>
</div>
<div v-if="i.msgtype == 'image'" class="contentItemDetails rowFlex spaceBetween columnCenter">
<el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]" fit="contain"></el-image>
<el-button class="sendButton rowFlex allCenter" @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
<el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]"
fit="contain"></el-image>
<el-button class="sendButton rowFlex allCenter"
@click.stop="sendMessageEdit(i, items._id)">发送</el-button>
</div>
</div>
</div>
......@@ -56,7 +70,7 @@
import { procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote } from '@/api/skill'
import { mapState, mapMutations, mapActions } from 'vuex'
import { throttle, copyToClipboard } from '@/utils/index'
import {getMediaId} from '@/api/works'
import { getMediaId } from '@/api/works'
export default {
name: 'skillCompany',
components: {},
......@@ -215,7 +229,7 @@ export default {
// 发送语音的时候 先编辑再发送
sendMessageEdit(item, id) {
// 复制内容到粘贴板
if(item.msgtype == 'text'){
if (item.msgtype == 'text') {
if (item && item.text && item.text.content) {
// copyToClipboard(
// item.text.content,
......@@ -224,15 +238,15 @@ export default {
// )
this.sendChatMessage(item.text.content)
}
}else if(item.msgtype == 'image' && item.image.picurl){
} else if (item.msgtype == 'image' && item.image.picurl) {
this.sendMessageImage(item)
}
},
async sendMessageImage(item, id){
async sendMessageImage(item, id) {
// 发送图片作为链接消息
if (item.image && item.image.picurl) {
const res = await getMediaId({url: item.image.picurl})
if(res.status_code == 1){
const res = await getMediaId({ url: item.image.picurl })
if (res.status_code == 1) {
this.sendImageAsMedia(res.data.media_id)
}
} else {
......@@ -240,7 +254,7 @@ export default {
this.$message.error('图片链接不存在，无法发送')
}
},
// 发送图片作为链接消息
sendImageAsMedia(media_id) {
this.$ww.sendChatMessage({
......@@ -258,9 +272,9 @@ export default {
}
})
},
// 发送文本消息
sendChatMessage(text){
sendChatMessage(text) {
this.$ww.sendChatMessage({
msgtype: 'text',
text: {
......@@ -335,7 +349,7 @@ export default {
this.groupLastDataList = this.groupDataList
})
},
handleChange() {},
handleChange() { },
// 重置select
resizeSelect() {
this.groupActive = '0'
......@@ -360,6 +374,7 @@ export default {
width: 100%;
height: 100%;
background: #fff;
.detailsTitle {
width: 100%;
padding: 0 10px;
......@@ -370,15 +385,18 @@ export default {
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.content {
width: 100%;
padding: 10px;
height: 100%;
background: red;
.contentItemTitle {
position: absolute;
left: 10px;
......@@ -389,9 +407,11 @@ export default {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
-webkit-line-clamp: 2;
/* 这里是超出几行省略 */
overflow: hidden;
}
.titleFixed {
position: absolute;
right: 0px;
......@@ -399,6 +419,7 @@ export default {
margin-left: 15px;
margin-right: 25px;
z-index: 10;
.num {
width: auto;
font-size: 14px;
......@@ -407,6 +428,7 @@ export default {
color: #409EFF;
margin-right: 10px;
}
.button {
width: 50px;
height: 24px;
......@@ -430,6 +452,7 @@ export default {
height: auto;
margin: 20px 0;
padding-left: 10px;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -439,6 +462,7 @@ export default {
line-height: 18px;
max-width: calc(100% - 60px);
}
.sendButton {
width: 50px;
height: 24px;
......@@ -450,12 +474,14 @@ export default {
color: #333333;
padding: 0;
}
.image {
max-width: 25%;
border-radius: 5px;
}
}
}
.item {
width: 100%;
height: auto;
......@@ -467,33 +493,40 @@ export default {
position: relative;
padding-left: 10px;
cursor: move;
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.tags {
width:250px;
width: 250px;
margin-left: 10px;
.tagsItem {
width: 250px;
}
.tag {
height: 22px;
line-height: 22px;
......@@ -510,34 +543,42 @@ export default {
}
}
}
.item:hover .icon {
display: block;
}
}
::v-deep .el-tabs--border-card .is-active {
border: none !important;
}
::v-deep .is-active {
border: none;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
.inputContent {
width: 100%;
::v-deep .el-input {
width: 80%;
}
}
.skillBox {
width: 100%;
height: 100%;
overflow: auto;
margin-top: 20px;
}
.tagList {
width: 150px;
height: 100%;
position: relative;
border-right: 1px solid #e0e0e0;
.tagItem {
width: 100px;
height: 36px;
......@@ -550,11 +591,12 @@ export default {
padding-left: 10px;
margin-bottom: 6px;
cursor: pointer;
.text {
max-width: 100px;
margin-left: 10px;
}
}
.iconFont {
font-size: 20px;
color: #999999;
......@@ -562,10 +604,12 @@ export default {
right: 0;
top: 20px;
cursor: pointer;
.upIcon {
transform: rotate(90deg);
}
}
.tagItemActive {
color: #409EFF;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -573,35 +617,43 @@ export default {
background: #e4fff1;
}
}
.scrollList {
width: 100%;
height: 100%;
}
.container {
// margin-top: -20px;
}
::v-deep .el-tabs,
.el-tabs__content,
.el-tab-pane {
width: 100%;
height: 100%;
}
::v-deep .el-tabs__content {
width: 100%;
height: calc(100% - 50px);
}
::v-deep .el-tab-pane {
width: 100%;
height: 100%;
}
.scrollList {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.draggable {
position: relative;
transition: all 0.3s;
.icon {
position: absolute;
left: 10px;
......@@ -609,10 +661,12 @@ export default {
z-index: 10;
}
}
::v-deep .el-icon-circle-close {
color: #fff;
}
}
.skillTab {
width: 100%;
height: calc(100% - 60px);
......
src/views/components/skill/skillLibrary.vue
......@@ -4,24 +4,30 @@
<!-- 标签 -->
<el-collapse-transition>
<div v-if="groupList.length > 0" class="tagList columnFlex">
<div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false" :class="groupActive == item.value ? 'tagItemActiveText' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
<div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false"
:class="groupActive == item.value ? 'tagItemActiveText' : ''"
@dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
<div class="rowFlex columnCenter spaceBetween tagItemGroup" @click="groupFilter(item, index)">
<div class="rowFlex columnCenter">
<i class="el-icon-rank icon" style="cursor: move"></i>
<p class="text hidden">{{ item.name }}</p>
<el-tooltip effect="dark" placement="top" :content="item.name" v-if="item.name.length >= 6">
<p class="text hidden" @click="groupFilter(item, index)">{{ item.name }}</p>
</el-tooltip>
<p v-else class="text hidden" @click="groupFilter(item, index)">{{ item.name }}</p>
</div>
<i class="el-icon-caret-right rotageIcon" :class="groupActive == item.value ? 'rotage' : ''"></i>
</div>
<!-- 二级分组 -->
<div v-if="item.child.length > 0 && groupActive == item.value" class="childGroup">
<div v-for="child in item.child" :key="child._id" class="childGroupText" :class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
<div v-for="child in item.child" :key="child._id" class="childGroupText"
:class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
<p class="text hidden">{{ child.name }}</p>
</div>
</div>
</div>
</div>
<div v-else class="noContent rowFlex allCenter">
<noContent/>
<noContent />
</div>
</el-collapse-transition>
<!-- 话术 -->
......@@ -34,7 +40,8 @@
<div ref="skillLibrary" v-loading="skillLoading" @scroll="paperScroll" class="scrollList">
<div v-for="(items, indexs) in groupDataList" :key="indexs" class="answerContent">
<div class="question"><span class="title">Q:</span>{{ items.name }}</div>
<div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem" style="width: 100%">
<div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem"
style="width: 100%">
<!-- <span class="question">{{ answerIndex + 1 }}: {{ answer }}</span> -->
<div v-if="answer.msgtype == 'text'" class="answerText rowFlex spaceBetween">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
......@@ -45,7 +52,8 @@
</div>
<div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
<el-image style="max-width: 200px" :src="answer.image.picurl" @click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]" > </el-image>
<el-image style="max-width: 200px" :src="answer.image.picurl"
@click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]"> </el-image>
</div>
</div>
</div>
......@@ -59,7 +67,7 @@
// procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote,
import { groupList, libraryIndex, logClickTime } from '@/api/skill'
import { mapState, mapMutations, mapActions } from 'vuex'
import { throttle, debounce, copyToClipboard,sendChatMessage } from '@/utils/index'
import { throttle, debounce, copyToClipboard, sendChatMessage } from '@/utils/index'
import noContent from '@/components/noContent.vue'
export default {
name: 'skillLibrary',
......@@ -110,7 +118,7 @@ export default {
}
},
computed: {
...mapState('game', ['accountSelect','chatUserInfo']),
...mapState('game', ['accountSelect', 'chatUserInfo']),
},
watch: {
accountSelect(newVal, oldVal) {
......@@ -133,22 +141,22 @@ export default {
this.requestLibraryData()
},
methods: {
sendMessage: throttle(function(item, id) {
sendMessage: throttle(function (item, id) {
console.log(item, id)
// this.skillQuote(id, item.length)
// this.skillQuote(id, item.length)
}, 500),
handleDragStart(e, item, index) {
this.sortID._id = item._id
this.dragging = item
},
paperScroll:debounce(function(){
paperScroll: debounce(function () {
const el = this.$refs.skillLibrary
if (el.offsetHeight + el.scrollTop + 10 >= el.scrollHeight) {
console.log('下一页')
this.pageInfo.page++
this.searchTable()
}
},500),
}, 500),
skillQuote(id, num) {
const data = {
type: this.activeName,
......@@ -186,7 +194,7 @@ export default {
this.sendChatMessage(item.text.content || '', 'text')
},
sendMessageImage(item){
sendMessageImage(item) {
console.log(item, 'item')
this.sendChatMessage(item.image.picurl || '', 'image')
},
......@@ -256,7 +264,7 @@ export default {
this.groupLastDataList = this.groupDataList
})
},
handleChange() {},
handleChange() { },
// 重置select
resizeSelect() {
this.groupActive = '0'
......@@ -268,7 +276,7 @@ export default {
this.isResize = false
}, 2000)
},
sendChatMessage(content, type){
sendChatMessage(content, type) {
sendChatMessage(content, type)
},
}
......@@ -280,9 +288,11 @@ export default {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
.noContent {
font-size: 200px;
}
.contentItemTitle {
position: absolute;
left: 10px;
......@@ -293,9 +303,11 @@ export default {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
-webkit-line-clamp: 2;
/* 这里是超出几行省略 */
overflow: hidden;
}
.titleFixed {
position: absolute;
right: 0px;
......@@ -303,6 +315,7 @@ export default {
margin-left: 15px;
margin-right: 25px;
z-index: 10;
.num {
width: auto;
font-size: 14px;
......@@ -311,6 +324,7 @@ export default {
color: #409EFF;
margin-right: 10px;
}
.button {
width: 50px;
height: 24px;
......@@ -334,6 +348,7 @@ export default {
height: auto;
margin: 20px 0;
padding-left: 10px;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -343,6 +358,7 @@ export default {
word-wrap: break-word;
line-height: 18px;
}
.sendButton {
width: 50px;
height: 24px;
......@@ -354,12 +370,14 @@ export default {
color: #333333;
padding: 0;
}
.image {
max-width: 25%;
border-radius: 5px;
}
}
}
.item {
width: 100%;
height: auto;
......@@ -371,33 +389,40 @@ export default {
position: relative;
padding-left: 10px;
cursor: move;
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.tags {
width: 300px;
margin-left: 10px;
.tagsItem {
width: 300px;
}
.tag {
height: 22px;
line-height: 22px;
......@@ -414,30 +439,37 @@ export default {
}
}
}
.item:hover .icon {
display: block;
}
}
::v-deep .el-tabs--border-card .is-active {
border: none !important;
}
::v-deep .is-active {
border: none;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
.inputContent {
width: 100%;
margin-bottom: 20px;
margin-left: 20px;
::v-deep .el-input {
width: 90%;
}
}
.skillBox {
width: 100%;
height: calc(100% - 20px);
}
.tagList {
width: 200px;
height: 100%;
......@@ -455,15 +487,18 @@ export default {
color: #333333;
margin-bottom: 6px;
cursor: pointer;
.text {
max-width: 90px;
margin-left: 5px;
}
.tagItemGroup {
height: 36px;
padding-right: 10px;
}
}
.iconFont {
font-size: 20px;
color: #999999;
......@@ -471,47 +506,57 @@ export default {
right: 0;
top: 20px;
cursor: pointer;
.upIcon {
transform: rotate(90deg);
}
}
.tagItemActive {
color: #409EFF !important;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
background: #e4fff1;
}
.tagItemActiveText {
color: #409EFF;
}
}
.libraryListContent{
.libraryListContent {
width: 100%;
height: 100%;
}
.rotageIcon {
cursor: pointer;
transition: all 0.5s;
transform: rotate(0deg);
font-size: 12px;
}
.rotage {
transform: rotate(90deg);
}
.childGroup {
p {
margin-left: 15px !important;
}
.childGroupText {
height: 36px;
line-height: 36px;
color: #333333;
}
}
.scrollList {
width: 100%;
height: 100%;
padding-left: 20px;
.answerContent {
width: 100%;
background: #f7f8fa;
......@@ -519,15 +564,18 @@ export default {
border: 1px solid #e5e6eb;
padding: 10px;
margin-bottom: 20px;
.title {
width: 30px;
font-size: 14px;
font-weight: 500;
margin-right: 10px;
}
.answerItem {
margin-bottom: 10px;
}
.question {
font-weight: 500;
font-size: 14px;
......@@ -536,6 +584,7 @@ export default {
text-align: left;
margin-bottom: 10px;
}
.answerText {
width: 100%;
font-family: PingFangSC, PingFang SC;
......@@ -544,15 +593,18 @@ export default {
color: #333333;
text-align: justify;
font-style: normal;
.answerTextTitle {
width: 30px;
font-size: 16px;
font-weight: 500;
}
.textAnswer {
word-wrap: break-word;
font-size: 13px;
}
.copyIcon {
width: 20px;
color: #409EFF;
......@@ -565,32 +617,42 @@ export default {
}
}
}
.scrollList::-webkit-scrollbar {display:none}
.scrollList::-webkit-scrollbar {
display: none
}
.container {
// margin-top: -20px;
}
::v-deep .el-tabs,
.el-tabs__content,
.el-tab-pane {
width: 100%;
height: 100%;
}
::v-deep .el-tabs__content {
width: 100%;
height: calc(100% - 50px);
}
::v-deep .el-tab-pane {
width: 100%;
height: 100%;
}
.scrollList {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.draggable {
position: relative;
transition: all 0.3s;
.icon {
position: absolute;
left: 10px;
......@@ -598,10 +660,12 @@ export default {
z-index: 10;
}
}
.textAnswer {
word-wrap: break-word;
display: inline;
}
.img_drop {
width: 200px;
height: 200px;
......@@ -610,7 +674,11 @@ export default {
left: 0;
top: 0;
}
.skillLibrary::-webkit-scrollbar {display:none}
.skillLibrary::-webkit-scrollbar {
display: none
}
::v-deep .el-icon-circle-close {
color: #fff;
}
......
src/views/components/skill/skillPersonal.vue
......@@ -9,9 +9,15 @@
<!-- 标签 -->
<el-collapse-transition>
<div v-if="groupList.length > 0" class="tagList columnFlex">
<div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter" :draggable="activeName == 'personal' ? true : false" :class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
<i class="el-icon-rank icon" v-if="activeName == 'personal'" style="cursor: move"></i>
<p class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
<div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter"
:draggable="activeName == 'personal' ? true : false"
:class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)"
@dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')"
@dragend="handleDragEnd($event, item, 'group')">
<el-tooltip effect="dark" placement="top" :content="item.group_name" v-if="item.group_name.length >= 6">
<p class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
</el-tooltip>
<p v-else class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
</div>
</div>
<div v-else>暂无话术内容</div>
......@@ -20,14 +26,19 @@
<div v-loading="skillLoading" class="scrollList">
<el-collapse v-model="collapseActive" @change="handleChange">
<transition-group v-if="groupDataList.length > 0" tag="div" class="container">
<div v-for="(items, indexs) in groupDataList" :key="indexs" :draggable="activeName == 'personal' ? true : false" class="draggable" @dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)" @dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
<div v-for="(items, indexs) in groupDataList" :key="indexs"
:draggable="activeName == 'personal' ? true : false" class="draggable"
@dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)"
@dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
<el-popover placement="top" width="300" trigger="hover">
<p>{{ items.title }}</p>
<div slot="reference" class="contentItemTitle allCenter" :style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
<div slot="reference" class="contentItemTitle allCenter"
:style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
</el-popover>
<div class="rowFlex titleFixed columnCenter">
<div class="num">{{ items.message.attachments.length > 1 ? `+${items.message.attachments.length - 1}条` : '' }}</div>
<div class="num">{{ items.message.attachments.length > 1 ? `+${items.message.attachments.length - 1}条` :
'' }}</div>
<!-- <el-button class="button rowFlex allCenter" @click.stop="sendMessage(items.message.attachments, items._id)">发送</el-button> -->
</div>
<el-collapse-item title="" :name="items._id" class="contentItem">
......@@ -35,11 +46,14 @@
<div>
<div v-if="i.msgtype == 'text'" class="contentItemDetails rowFlex spaceBetween columnCenter">
<div class="text">{{ i.text.content }}</div>
<el-button class="sendButton rowFlex allCenter" @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
<el-button class="sendButton rowFlex allCenter"
@click.stop="sendMessageEdit(i, items._id)">发送</el-button>
</div>
<div v-if="i.msgtype == 'image'" class="contentItemDetails rowFlex spaceBetween columnCenter">
<el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]" fit="contain"></el-image>
<el-button class="sendButton rowFlex allCenter" @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
<el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]"
fit="contain"></el-image>
<el-button class="sendButton rowFlex allCenter"
@click.stop="sendMessageEdit(i, items._id)">发送</el-button>
</div>
</div>
</div>
......@@ -54,7 +68,7 @@
</template>
<script>
import { procedure_group, procedureList, procedureSort, procedureGroupSort } from '@/api/skill'
import {getMediaId} from '@/api/works'
import { getMediaId } from '@/api/works'
import { mapState, mapMutations, mapActions } from 'vuex'
import { debounce, copyToClipboard } from '@/utils/index'
export default {
......@@ -103,7 +117,7 @@ export default {
},
computed: {
...mapState('game', ['accountSelect']),
...mapState('user', ['userid','external_userid']),
...mapState('user', ['userid', 'external_userid']),
},
watch: {
accountSelect(newVal, oldVal) {
......@@ -127,14 +141,14 @@ export default {
},
methods: {
// ...mapMutations('common', ['set_sendSkillMessage', 'set_isEditSkill']),
sendMessage: debounce(function(item, id) {
sendMessage: debounce(function (item, id) {
console.log(item, id, 'sendMessage')
}, 500),
// 发送语音的时候 先编辑再发送
sendMessageEdit(item, id) {
// 发送语音的时候 先编辑再发送
sendMessageEdit(item, id) {
console.log(item)
// 复制内容到粘贴板
if(item.msgtype == 'text'){
if (item.msgtype == 'text') {
if (item && item.text && item.text.content) {
// copyToClipboard(
// item.text.content,
......@@ -143,15 +157,15 @@ export default {
// )
this.sendChatMessage(item.text.content)
}
}else if(item.msgtype == 'image' && item.image.picurl){
} else if (item.msgtype == 'image' && item.image.picurl) {
this.sendMessageImage(item)
}
},
async sendMessageImage(item, id){
async sendMessageImage(item, id) {
// 发送图片作为链接消息
if (item.image && item.image.picurl) {
const res = await getMediaId({url: item.image.picurl})
if(res.status_code == 1){
const res = await getMediaId({ url: item.image.picurl })
if (res.status_code == 1) {
this.sendImageAsMedia(res.data.media_id)
}
} else {
......@@ -176,9 +190,9 @@ export default {
}
})
},
// 发送文本消息
sendChatMessage(text){
sendChatMessage(text) {
this.$ww.sendChatMessage({
msgtype: 'text',
text: {
......@@ -270,7 +284,7 @@ export default {
this.groupDataList = newItems
}
},
contentSearch() {
this.pageInfo = {
page: 1,
......@@ -332,7 +346,7 @@ export default {
this.groupLastDataList = this.groupDataList
})
},
handleChange() {},
handleChange() { },
// 重置select
resizeSelect() {
this.groupActive = '0'
......@@ -357,6 +371,7 @@ export default {
width: 100%;
height: 100%;
background: #fff;
.detailsTitle {
width: 100%;
padding: 0 10px;
......@@ -367,15 +382,18 @@ export default {
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.content {
width: 100%;
padding: 10px;
height: 100%;
background: red;
.contentItemTitle {
position: absolute;
left: 10px;
......@@ -386,9 +404,11 @@ export default {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
-webkit-line-clamp: 2;
/* 这里是超出几行省略 */
overflow: hidden;
}
.titleFixed {
position: absolute;
right: 0px;
......@@ -396,6 +416,7 @@ export default {
margin-left: 15px;
margin-right: 25px;
z-index: 10;
.num {
width: auto;
font-size: 14px;
......@@ -404,6 +425,7 @@ export default {
color: #409EFF;
margin-right: 10px;
}
.button {
width: 50px;
height: 24px;
......@@ -427,6 +449,7 @@ export default {
height: auto;
margin: 20px 0;
padding-left: 10px;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -436,6 +459,7 @@ export default {
line-height: 18px;
max-width: calc(100% - 60px);
}
.sendButton {
width: 50px;
height: 24px;
......@@ -447,12 +471,14 @@ export default {
color: #333333;
padding: 0;
}
.image {
max-width: 25%;
border-radius: 5px;
}
}
}
.item {
width: 100%;
height: auto;
......@@ -464,33 +490,40 @@ export default {
position: relative;
padding-left: 10px;
cursor: move;
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: 10px;
}
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.tags {
width:260px;
width: 260px;
margin-left: 10px;
.tagsItem {
width: 260px;
}
.tag {
height: 22px;
line-height: 22px;
......@@ -507,34 +540,42 @@ export default {
}
}
}
.item:hover .icon {
display: block;
}
}
::v-deep .el-tabs--border-card .is-active {
border: none !important;
}
::v-deep .is-active {
border: none;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
.inputContent {
width: 100%;
::v-deep .el-input {
width: 80%;
}
}
.skillBox {
width: 100%;
height: 100%;
overflow: auto;
margin-top: 20px;
}
.tagList {
width: 140px;
height: 100%;
position: relative;
border-right: 1px solid #e0e0e0;
.tagItem {
width: 100px;
height: 36px;
......@@ -547,11 +588,12 @@ export default {
padding-left: 10px;
margin-bottom: 6px;
cursor: pointer;
.text {
max-width: 90px;
margin-left: 10px;
}
}
.iconFont {
font-size: 20px;
color: #999999;
......@@ -559,10 +601,12 @@ export default {
right: 0;
top: 20px;
cursor: pointer;
.upIcon {
transform: rotate(90deg);
}
}
.tagItemActive {
color: #409EFF;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -570,35 +614,43 @@ export default {
background: #e4fff1;
}
}
.scrollList {
width: 100%;
height: 100%;
}
.container {
// margin-top: -20px;
}
::v-deep .el-tabs,
.el-tabs__content,
.el-tab-pane {
width: 100%;
height: 100%;
}
::v-deep .el-tabs__content {
width: 100%;
height: calc(100% - 50px);
}
::v-deep .el-tab-pane {
width: 100%;
height: 100%;
}
.scrollList {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.draggable {
position: relative;
transition: all 0.3s;
.icon {
position: absolute;
left: 10px;
......@@ -606,27 +658,29 @@ export default {
z-index: 10;
}
}
::v-deep .el-icon-circle-close {
color: #fff;
}
}
.skillTab {
width: 100%;
height: calc(100% - 60px);
.inputContent {
width: 100%;
padding: 0 15px;
margin-bottom: 15px;
::v-deep .el-input {
width: 100%;
.el-input__inner {
border-radius: 4px;
height: 36px !important;
}
.el-input-group__append {
background-color: #3491FA;
border-color: #3491FA;
......@@ -640,11 +694,12 @@ export default {
.tagList {
.tagItem {
transition: all 0.3s ease;
&:hover {
background-color: #f5f7fa;
}
}
.tagItemActive {
color: #3491FA !important;
background: #E8F7FF !important;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论