Skip to content

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

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

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