[update] 问答库联调

This commit is contained in:
lideqin
2023-09-28 17:00:31 +08:00
parent d2bfae1c78
commit 279b120d7b
7 changed files with 315 additions and 119 deletions
+1 -1
View File
@@ -130,7 +130,7 @@ const getWorkGroupTreeList = (params) => getAction('/sys/lawsWorkingGroup/list',
const getEnterpriseLevelMapList = (params) => getAction('/sys/lawsGrade/list', params)
// 车型项目下拉数据
const getCarTypeProjectList = (params) => getAction('/projectLibrary/lawsProjectLibrary/list', params)
const getCarTypeProjectList = (params) => getAction('/projectLibrary/lawsProjectLibrary/queryList', params)
export {
addRole,
+17
View File
@@ -0,0 +1,17 @@
import { getAction, postAction } from './manage'
// 问答库详情-根据id获取问题信息
const getQuizById = (params) => getAction('/laws/library/lawsProblemLibrary/queryById', params)
// 问答库回答-回答
const answerQuiz = (params) => postAction('/laws/library/lawsProblemLibrary/addAnswer', params)
// 问答库回答-设置置顶
const setOrCancelTop = (params) => getAction('/laws/library/lawsProblemLibrary/isTop', params)
// 回答库详情-删除回答
const deleteAnswer = (params) => postAction('/laws/library/lawsProblemLibrary/deleteAnswer', params)
export {
getQuizById,
answerQuiz,
setOrCancelTop,
deleteAnswer
}
+2 -1
View File
@@ -18,6 +18,7 @@ module.exports = {
cancelTop: 'untop',
setTop: 'Set To Top',
answerQuestion: 'reply to a question',
word: 'word'
word: 'word',
pleaseEnterAnswerDesc: '请输入回答描述'
}
}
+2 -1
View File
@@ -18,6 +18,7 @@ module.exports = {
cancelTop: '取消置顶',
setTop: '设置为置顶',
answerQuestion: '回复问题',
word: '字'
word: '字',
pleaseEnterAnswerDesc: '请输入回答描述'
}
}
@@ -4,29 +4,33 @@
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<!-- 分类 -->
<a-col :span="6">
<a-form-item :label="$t('businessSupport.questionAnswer.classify')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
:placeholder="$t('pleaseEnter')+$t('businessSupport.questionAnswer.classify')"
dict-code="esp_project_status"
v-model="queryParam.classify">
dict-code="problem_library_type"
v-model="queryParam.type">
</j-dict-select-tag>
</a-form-item>
</a-col>
<!-- 标准号 -->
<a-col :span="6">
<a-form-item :label="$t('standardNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('pleaseEnter')+$t('standardNumber')" v-model="queryParam.standardNo"></a-input>
<j-input :placeholder="$t('pleaseEnter')+$t('standardNumber')" v-model="queryParam.standardNumber"></j-input>
</a-form-item>
</a-col>
<!-- 标准名称 -->
<a-col :span="6">
<a-form-item :label="$t('standardName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('pleaseEnter')+$t('standardName')" v-model="queryParam.standardName"></a-input>
<j-input :placeholder="$t('pleaseEnter')+$t('standardName')" v-model="queryParam.standardName"></j-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<!-- 标题 -->
<a-col :span="6">
<a-form-item :label="$t('title')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('pleaseEnter')+$t('title')" v-model="queryParam.title"></a-input>
<j-input :placeholder="$t('pleaseEnter')+$t('title')" v-model="queryParam.title"></j-input>
</a-form-item>
</a-col>
</template>
@@ -76,7 +80,7 @@
<!-- 操作栏 -->
<div slot="action" slot-scope="{record}" class="action-span-cell">
<!-- 是自己的提问 -->
<template v-if="record.createBy === userInfo.id">
<template v-if="record.userId === userInfo.id">
<a @click="handleDetail(record)"
class="table-ope-btn"
v-has="'businessSupport:questionAnswer:detail'">
@@ -100,7 +104,7 @@
</div>
</j-table>
</div>
<quiz-modal ref="quizModal"></quiz-modal>
<quiz-modal ref="quizModal" @ok="modalFormOk"></quiz-modal>
</a-card>
</template>
@@ -123,6 +127,11 @@ export default {
components: { QuizModal, JTable },
data () {
return {
/* 排序参数 */
isorter: {
column: 'quizTime',
order: 'desc'
},
labelCol: {
span: 4
},
@@ -130,56 +139,49 @@ export default {
span: 14
},
columns: [
{
{ // 分类
title: this.$t('businessSupport.questionAnswer.classify'),
align: 'center',
width: 180,
dataIndex: 'classify_dictText',
dataIndex: 'type_dictText',
scopedSlots: { customRender: 'text' }
},
{
{ // 标准编号
title: this.$t('standardNumber'),
align: 'center',
width: 180,
dataIndex: 'standardNumber',
scopedSlots: { customRender: 'text' }
},
{
{ // 标准名称
title: this.$t('standardName'),
align: 'center',
width: 180,
dataIndex: 'standardName',
scopedSlots: { customRender: 'text' }
},
{
{ // 标题
title: this.$t('title'),
align: 'center',
width: 180,
dataIndex: 'titleSlot',
dataIndex: 'title',
scopedSlots: { customRender: 'text' }
},
{
{ // 项目
title: this.$t('project'),
align: 'center',
width: 180,
dataIndex: 'project',
dataIndex: 'project_dictText',
scopedSlots: { customRender: 'text' }
},
{
{ // 问题描述
title: this.$t('businessSupport.questionAnswer.questionDesc'),
align: 'center',
width: 180,
dataIndex: 'questionDesc',
dataIndex: 'problemDescription',
scopedSlots: { customRender: 'text' }
},
{
title: this.$t('businessSupport.questionAnswer.attach'),
align: 'center',
width: 180,
dataIndex: 'attach',
scopedSlots: { customRender: 'attach' }
},
{
{ // 提问时间
title: this.$t('businessSupport.questionAnswer.quizTime'),
align: 'center',
width: 180,
@@ -195,16 +197,10 @@ export default {
}
],
url: {
list: '',
delete: ''
list: '/laws/library/lawsProblemLibrary/page',
delete: '/laws/library/lawsProblemLibrary/deleteProblem'
},
userInfo: {},
dataSource: [
{
id: 1,
// createBy: 'e9ca23d68d884d4ebb19d07889727dae'
}
]
userInfo: {}
}
},
mounted () {
@@ -11,11 +11,12 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row :gutter="24">
<!-- 分类 -->
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.classify')">
<a-select :placeholder="$t('pleaseSelect') + $t('businessSupport.questionAnswer.classify')"
allowClear
v-decorator.trim="[ 'level', validatorRules.level]">
v-decorator.trim="[ 'type', validatorRules.type]">
<a-select-option :value="null" :key="-1">请选择</a-select-option>
<a-select-option value="1">国内标准</a-select-option>
<a-select-option value="2">海外标准</a-select-option>
@@ -24,29 +25,33 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('level'))">
<!-- 标准编号 -->
<a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('type'))">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
<standard-selection
v-decorator.trim="[ 'standardNumber', validatorRules.standardNumber]"
:placeholder="$t('pleaseEnterOrSelect') + $t('standardNumber')"
:source="form.getFieldValue('level')"
:source="form.getFieldValue('type')"
:disabledSourceSearch="true"
@nameChange="standardNameChange"
/>
</a-form-item>
</a-col>
<a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('level'))">
<!-- 标准名称 -->
<a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('type'))">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardName')">
<a-input disabled :placeholder="$t('pleaseEnter') + $t('standardName')"
v-decorator.trim="[ 'standardName', validatorRules.standardName]"/>
</a-form-item>
</a-col>
<!-- 标题 -->
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('title')">
<a-input v-decorator.trim="[ 'title', validatorRules.title]"
:placeholder="$t('pleaseEnter') + $t('title')"/>
</a-form-item>
</a-col>
<!-- 项目 -->
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('project')">
<a-select :placeholder="$t('pleaseSelect') + $t('project')"
@@ -57,6 +62,7 @@
</a-select>
</a-form-item>
</a-col>
<!-- 提问时间 -->
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.quizTime')">
<a-date-picker
@@ -67,14 +73,16 @@
></a-date-picker>
</a-form-item>
</a-col>
<!-- 问题描述 -->
<a-col :span="24">
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.questionDesc')">
<a-textarea
v-decorator.trim="[ 'questionDesc', validatorRules.questionDesc]"
v-decorator.trim="[ 'problemDescription', validatorRules.problemDescription]"
:placeholder="$t('pleaseEnter')+$t('businessSupport.questionAnswer.questionDesc')"
:maxLength="500"
:rows="4" />
<j-upload v-decorator.trim="[ 'attach', validatorRules.attach]"
<j-upload v-decorator.trim="[ 'file', validatorRules.file]"
returnId
isDownload>
</j-upload>
</a-form-item>
@@ -156,13 +164,13 @@ export default {
],
validateTrigger: 'change'
},
questionDesc: {
problemDescription: {
rules: [
{ required: true, message: this.$t('pleaseEnter') + this.$t('businessSupport.questionAnswer.questionDesc') }
],
validateTrigger: 'blur'
},
attach: {
file: {
rules: [
{ required: false, message: this.$t('pleaseSelect') + this.$t('businessSupport.questionAnswer.attach') }
],
@@ -170,7 +178,7 @@ export default {
}
},
url: {
quiz: ''
quiz: '/laws/library/lawsProblemLibrary/addProblem'
},
projectList: [] // 项目下拉框数据
}
@@ -2,7 +2,8 @@
<div class="detail-page">
<div class="detail-page-title">{{ model.title }}</div>
<div class="detail-page-second-title">
{{ $t('businessSupport.questionAnswer.poster') + '' + model.orgCodeTxt + ' ' + model.poster }}
<!-- todo: 发帖人部门没有返回 -->
{{ $t('businessSupport.questionAnswer.poster') + '' + model.orgCode_dictText + ' ' + model.userId_dictText }}
</div>
<div class="detail-page-part">
<div class="detail-page-part-form">
@@ -14,59 +15,81 @@
<!-- 项目 -->
<div class="detail-page-part-form-item-large">
<label>{{ $t('project') }}</label>
<span>{{ model.project || global.emptyLine }}</span>
<span>{{ model.project_dictText || global.emptyLine }}</span>
</div>
<!-- 附件 -->
<!-- 附件 -->
<div class="detail-page-part-form-item-large-file">
<label>{{ $t('businessSupport.questionAnswer.attach') }}</label>
<span>{{ model.attach || global.emptyLine }}</span>
<template v-if="fileList && fileList.length > 0">
<div class="file-box">
<div class="file-list-file" v-for="file in fileList" :key="file.id">
<div class="file-list-file-info">
<a-icon type="link" />
<div class="file-list-file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
</div>
<!-- 下载-->
<a-button type="link" icon="download" class="file-btn" @click="handleDownload(file)">
{{ $t('download') }}
</a-button>
<!-- 无水印下载-->
<!--<a-button type="link" v-has="btnPermission.unwatermarkedDownload" class="file-btn">-->
<!-- <i class="iconfont icon-water-drop-slash"></i>-->
<!-- {{ $t('unwatermarkedDownload') }}-->
<!--</a-button>-->
</div>
</div>
</template>
<span v-else>{{ global.emptyLine }}</span>
</div>
</div>
</div>
<!-- 问题描述部分 -->
<div class="question-desc-wrapper">
<p class="question-desc">{{ model.questionDesc }}</p>
<p class="question-desc">{{ model.problemDescription }}</p>
<p class="right-bottom-p">
<span class="time-span">{{ model.quizTime }}</span>
<span class="right-bottom-p-span">{{ answerArr.length + $t('businessSupport.questionAnswer.answerNum')}}</span>
</p>
</div>
<!-- 历史回答数据 -->
<div v-for="(item, index) in answerArr" :key="index" class="answer-wrapper">
<div class="left-user-info">
<a-avatar shape="square" :size="56" :src="getAvatarView(item.avatar)" icon="user"/>
<p>{{ item.realname }}</p>
<p>{{ item.orgCodeTxt }}</p>
<template v-if="answerArr && answerArr.length > 0">
<div v-for="(item, index) in answerArr" :key="index" class="answer-wrapper">
<div class="left-user-info">
<a-avatar shape="square" :size="56" :src="getAvatarView(item.avatar)" icon="user"/>
<p class="left-user-name">{{ item.name }}</p>
<p>{{ item.departName }}</p>
</div>
<div class="right-answer-wrapper">
<!-- 是否是置顶 -->
<p v-if="item.isTop" class="top-p">{{ $t('businessSupport.questionAnswer.top') }}</p>
<!-- 回答描述 -->
<p :class="!item.isTop ? 'no-top-desc' : ''">{{ item.answerDescription }}</p>
<p class="right-bottom-p">
<span>{{ item.createTime }}</span>
<!-- 置顶评论的操作按钮 -->
<template v-if="item.isTop">
<!-- 取消置顶 -->
<a class="right-bottom-p-a" @click="setOrCancelTop(item.id)">{{ $t('businessSupport.questionAnswer.cancelTop') }}</a>
<!-- 删除 : 发帖人评论人有置顶权限的用户可以删除 ?? -->
<a v-if="userInfo.id === model.userId || userInfo.id === item.userId" class="right-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>
</template>
<!-- 非置顶评论 -->
<template v-else>
<!-- 设置为置顶 -->
<a class="right-bottom-p-a" @click="setOrCancelTop(item.id)">{{ $t('businessSupport.questionAnswer.setTop') }}</a>
<!-- 删除 : 发帖人评论人有置顶权限的用户可以删除,置顶的评论不允许删除取消置顶后允许删除 ?? -->
<a v-if="userInfo.id === model.userId || userInfo.id === item.userId" class="right-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>
</template>
</p>
</div>
</div>
<div class="right-answer-wrapper">
<!-- 是否是置顶 -->
<p v-if="item.isTop" class="top-p">{{ $t('businessSupport.questionAnswer.top') }}</p>
<!-- 回答描述 -->
<p :class="!item.isTop ? 'no-top-desc' : ''">{{ item.answerDesc }}</p>
<p class="right-bottom-p">
<span>{{ item.answerTime }}</span>
<!-- 置顶评论的操作按钮 -->
<template v-if="item.isTop">
<!-- 取消置顶 -->
<a class="right-bottom-p-a">{{ $t('businessSupport.questionAnswer.cancelTop') }}</a>
<!-- 删除 : 发帖人评论人有置顶权限的用户可以删除 ?? -->
<a class="right-bottom-p-a">{{ $t('delete') }}</a>
</template>
<!-- 非置顶评论 -->
<template v-else>
<!-- 设置为置顶 -->
<a class="right-bottom-p-a">{{ $t('businessSupport.questionAnswer.setTop') }}</a>
<!-- 删除 : 发帖人评论人有置顶权限的用户可以删除,置顶的评论不允许删除取消置顶后允许删除 ?? -->
<a class="right-bottom-p-a">{{ $t('delete') }}</a>
</template>
</p>
</div>
</div>
</template>
<!-- 回答区域 -->
<div v-if="canAnswer === 1" class="answer-wrapper">
<div class="left-user-info">
<a-avatar shape="square" :size="56" :src="getAvatarView(currentUser.avatar)" icon="user"/>
<p>{{ currentUser.realname }}</p>
<p class="left-user-name">{{ currentUser.realname }}</p>
<p>{{ currentUser.orgCodeTxt }}</p>
</div>
<div class="right-answer-form-wrapper">
@@ -76,71 +99,169 @@
<a-button class="submit-btn" type="primary" @click="submit">{{ $t('submit') }}</a-button>
</div>
</div>
<!-- 图片预览容器 -->
<div id="images">
<div class="image" v-viewer="{movable: false}">
<img v-show="image" :src="imageUrl">
</div>
</div>
</div>
</template>
<script>
import { USER_INFO } from '@/store/mutation-types'
import { USER_INFO, ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
import { getFileAccessHttpUrl } from '@/api/manage'
import { getQuizById, answerQuiz, setOrCancelTop, deleteAnswer } from '@/api/businessSupport'
import { getFileInfo } from '@/api/api'
import { previewPdf } from '@/utils/previewPdf'
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
const FILE_TYPE_PDF = 'pdf'
const Base64 = require('js-base64').Base64
export default {
name: 'AnswerPage',
data () {
return {
model: {
title: '问题问题',
orgCodeTxt: '车型技术部',
poster: '超级管理员',
standardNumber: 'GB 7528-2020',
standardName: '机动车运行安全',
project: '机动车运行安全',
attach: '机动车运行安全.jpg',
questionDesc: '问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述' +
'问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述' +
'问题描述问题描述问题描述问题描述',
quizTime: '2023-07-04 14:39',
answerNum: 2
},
answerArr: [
{
avatar: '',
realname: '李某某',
orgCodeTxt: '标准法规部',
isTop: true,
answerDesc: '回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述',
answerTime: '2023-07-04 16:38'
},
{
avatar: '',
realname: '李某某',
orgCodeTxt: '标准法规部',
isTop: false,
answerDesc: '回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述',
answerTime: '2023-07-04 16:38'
}
],
model: {},
answerArr: [],
fileList: [],
currentUser: {
avatar: '',
realname: '',
orgCodeTxt: ''
},
answerDesc: '',
canAnswer: false
canAnswer: false,
userInfo: {},
image: false,
imageUrl: ''
}
},
mounted () {
this.initData(this.$route.query.id)
const userInfo = Vue.ls.get(USER_INFO)
this.userInfo = userInfo
this.currentUser = Object.assign({}, userInfo)
this.canAnswer = Number(this.$route.query.canAnswer)
},
methods: {
// 初始化获取数据信息
initData (id) {
getQuizById({ id: id }).then(res => {
if (res.success) {
this.model = Object.assign({}, res.result)
if (this.model.file) {
const fileList = this.model.file.split(',')
const fileInfoList = []
fileList.forEach(async id => {
const fileInfo = await this.getFileInfo(id)
if (fileInfo) {
fileInfoList.push(fileInfo)
}
})
this.fileList = fileInfoList
}
this.answerArr = this.model.answerList
}
})
},
// 获取头像
getAvatarView (avatar) {
return getFileAccessHttpUrl(avatar)
},
getFileInfo (fileId) {
return new Promise(resolve => {
let fileInfo
getFileInfo({ id: fileId }).then(res => {
if (res.success) {
fileInfo = res.result
}
}).finally(() => {
resolve(fileInfo)
})
})
},
handlePreview (file) {
if (!file || !file.url) {
return
}
// 截取文件后缀名
const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
// 判断是否为可预览格式的文件
if (!canPreview) {
this.$message.loading('该文件类型不支持预览,正在为您准备下载...').then(() => {
this.handleDownload(file)
})
return
}
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
// 图片预览,使用自己添加的组件
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
this.imageUrl = getFileAccessHttpUrl(file.id)
// 获取viewer实例
const viewer = this.$el.querySelector('.image').$viewer
// 调用show方法进行显示预览图
viewer.show()
// this.$refs.imagePreviewModal.open(file)
return
}
// pdf预览
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
const url = previewPdf(file.id)
console.log(url)
window.open(url)
return
}
// 其余可预览文件仍使用KKFile进行预览
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
window.open(url)
},
handleDownload (file) {
// 下载文件
downloadFile(`/laws/standard/common/downloadWithWaterMark/${file.id}`, file.fileName)
},
submit () {
if (!this.answerDesc) {
this.$message.warning(this.$t('businessSupport.questionAnswer.pleaseEnterAnswerDesc'))
return
}
const param = {}
param.problemId = this.model.id
param.answerDescription = this.answerDesc
answerQuiz(param).then(res => {
if (res.success) {
this.$message.success(res.message)
this.initData(this.model.id)
this.answerDesc = ''
} else {
this.$message.warning(res.message)
}
})
},
// 设置或取消置顶
setOrCancelTop (answerId) {
setOrCancelTop({ id: answerId }).then(res => {
if (res.success) {
this.$message.success(res.message)
this.initData(this.model.id)
} else {
this.$message.warning(res.message)
}
})
},
// 删除回答
deleteAnswer (answerId) {
deleteAnswer({ id: answerId }).then(res => {
if (res.success) {
this.$message.success(res.message)
this.initData(this.model.id)
} else {
this.$message.warning(res.message)
}
})
}
}
}
@@ -221,6 +342,10 @@ export default {
background: rgb(247, 248, 250);
padding: 20px 0 5px 0;
}
.left-user-name {
margin-top: 18px;
margin-bottom: 8px;
}
.right-answer-wrapper {
width: 100%;
padding: 20px 10px 20px 10px;
@@ -262,4 +387,52 @@ export default {
margin-left: 8px;
}
}
.file-box {
flex: 1;
width: 0;
}
.file-list {
&-file {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
&-file:last-child {
margin-bottom: 0;
}
&-file-info {
display: flex;
align-items: center;
color: @primary-color;
cursor: pointer;
flex: 1;
width: 0;
}
&-file-info > .anticon {
margin-right: 8px;
}
&-file-name {
white-space: nowrap;
overflow: hidden;
flex: 1;
width: 0;
text-overflow: ellipsis;
}
&-file-operate {
.ant-btn > .anticon + span, .ant-btn > .iconfont + span {
margin-left: 10px;
}
.ant-btn:first-child {
margin-left: 15px;
}
}
}
</style>