Files
fe-manage/src/views/evaluation/evaluationUpload.vue

2095 lines
65 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="evaluationUpload">
<div class="headers">
<div class="headers_item">
<div class="headers_item_btn" v-if="uploadAdmin('Upload-admin')" @click="bgupload">
<div class="btnText">报告上传</div>
</div>
</div>
<!-- <div class="headers_item">
<span class="headers_item_text">发布状态</span>
<a-select
v-model:value="searchParam.status"
style="width: 270px;"
placeholder="请选择状态"
:options="searchStatusVal"
allowClear
></a-select>
</div> -->
<div style="display: flex;">
<div class="headers_item">
<a-input
v-model:value="searchParam.createName"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入测评名称"
allowClear
showSearch
>
</a-input>
</div>
<div class="headers_item btn" @click="serchList">
<div class="headers_item_btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="headers_item_btn btn2" @click="serchListNo">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
</div>
<div class="content">
<a-table
:columns="columns"
:data-source="tableData"
:loading="tableLoading"
:scroll="{ x: '1000' }"
:pagination="false"
>
<template #operation="{ record, column }">
<a-space>
<a-button v-if="trueFalse(record.permission,1)" type="link" @click="bgcheck(record)">
<a-tooltip>
<template #title>查看</template>
<span class="check"></span>
</a-tooltip>
</a-button>
<a-button type="link" @click="bgupload1(record)" v-if="trueFalse(record.permission,2)||trueFalse(record.permission,4)">
<a-tooltip>
<template #title>上传</template>
<span class="upload"></span>
</a-tooltip>
</a-button>
<a-button v-if="trueFalse(record.permission,5)" type="link" @click="downloadAll(record)">
<a-tooltip>
<template #title>下载</template>
<span class="download"></span>
</a-tooltip>
</a-button>
<a-dropdown :getPopupContainer="(triggerNode)=> triggerNode.parentNode" :trigger="['click']">
<a class="ant-dropdown-link" @click.prevent>
更多
<DownOutlined />
</a>
<template #overlay>
<a-menu>
<a-menu-item v-if="trueFalse(record.permission,4)" key="0">
<a-button type="link" class="btn_item" @click="openEdit(record)">
<span class="release"></span>
编辑
</a-button>
</a-menu-item>
<a-menu-item key="1">
<a-button type="link" class="btn_item" @click="authorityItem(record)">
<span class="authority"></span>
权限设置
</a-button>
</a-menu-item>
<a-menu-item key="2" v-if="trueFalse(record.permission,6)">
<a-button type="link" class="btn_item" @click="deleteItem(record)">
<span class="delete"></span>
删除
</a-button>
</a-menu-item>
<a-menu-item key="3" v-if="trueFalse(record.permission,3)">
<a-button type="link" class="btn_item" @click="emptyItem(record)">
<span class="empty"></span>
清空
</a-button>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-space>
</template>
</a-table>
<div class="tableBox">
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
:showSizeChanger="true"
:showQuickJumper="false"
:hideOnSinglePage="true"
:pageSize="searchParam.pageSize"
:current="searchParam.pageNo"
:total="tableDataTotal"
class="pagination"
@change="changePagination"
/>
</div>
</div>
</div>
<!-- 上传 -->
<a-modal
v-model:visible="bg_check"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_exit"
>
<div class="selectonlineface" :style="{ display: bg_check ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div class="bg_main_header_icon"></div>
<div>测评报告{{formData.id&&btShow?'编辑':'上传'}}</div>
<div class="bg_main_header_close" @click="of_exit"></div>
</div>
<div class="bg_body">
<div class="bg_body_bt" v-if="btShow">
<div class="bg_body_bttext">
<div class="bg_body_btimg">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span>测评标题</span>
</div>
<div class="bg_body_input">
<a-input
v-model:value="formData.evaluationName"
show-count
:maxlength="60"
placeholder="请输入测评标题(限60个字以内)" />
</div>
</div>
<div class="bg_body_bt" v-if="btShow">
<div class="bg_body_bttext">测评封面图片</div>
<div class="bg_body_input" style="display: flex;">
<a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
:headers="headers"
:before-upload="beforeUpload">
<img class="i_upload_img" v-if="formData.cover" :src="formData.cover" alt="avatar" />
<div class="i_upload" v-else>
<div class="addimg">
<div class="heng"></div>
<div class="shu"></div>
</div>
</div>
</a-upload>
<div>
高宽比为16:9800*450<br/>
png或jpg图片<br/>
不要大于2M
</div>
</div>
</div>
<div class="bg_body_bt" v-if="btShowEdit">
<div class="bg_body_bttext">上传说明</div>
<div class="bg_body_input">
<span style="color: #999ba3">
1仅支持1个zip压缩包和pdf报告上传<br/>
2单个附件命名规则测评名称+姓名+工号名称中间用英文输入法-连接例如大五职业性格测评-李玉冰-00004409.pdf
</span>
</div>
</div>
<div class="bg_body_bt" v-if="btShowEdit">
<div class="bg_body_bttext">
<div class="bg_body_btimg">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span>报告上传</span>
</div>
<div class="bg_body_input">
<a-upload
name="file"
v-model:file-list="files"
:headers="headers"
:show-upload-list="false"
:before-upload="beforeUpload3"
@change="handleChange"
action="/activityApi/evaluation/import"
:data="uploadParameters"
ref="uploadRef"
>
<div class="upload_box">
<span>选择文件</span>
</div>
</a-upload>
</div>
</div>
<div class="bg_body_bt" v-if="btShowEdit" style="justify-content: flex-start;">
<div class="mbl_items12">
<div
class="i12_box1"
v-for="(item, index) in uploadList"
style="align-items: flex-end"
:key="index"
>
<!-- <div class="file_img"></div> -->
<div class="file_detail">
<div class="file_name">
<span style="color: #6f6f6f;width:200px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
{{ item.name }}
</span>
</div>
<div class="file_updata">
<div class="updatabox">
<div
:class="`${{uploading: 'updatacolor3', done: 'updatacolor' ,error: 'updatacolor2'}[item.status] || 'updatacolor'}`"
:style="{width:`${item.status==='uploading'?parseInt(item.percent):100}%`}"></div>
<div v-if="item.status"
style="right:-62px;"
:class="`${{uploading: 'updataxq1', done: 'updataxq' ,error: 'updataxq2'}[item.status] || 'updataxq'}`">
{{ {uploading: '正在上传', done: '上传完成', error: '上传失败'}[item.status] || '' }}
</div>
</div>
<div class="upjd" v-if="item.percent">
<span style="margin: auto 5px">{{ item.status === 'uploading' ? parseInt(item.percent) : 100 }}%</span>
</div>
</div>
</div>
<div class="file_operation" @click="delUploadList(index)" style="color: #4ea6ff;cursor: pointer">
删除
</div>
</div>
</div>
</div>
<div class="bg_body_bt" v-if="btShow">
<div class="bg_body_bttext">备注</div>
<div class="bg_body_input">
<a-textarea placeholder="请输入备注(限200个字以内)" style="width: 334px;height: 88px;" v-model:value="formData.remarks" showCount :maxlength="200" />
</div>
</div>
<div class="bg_footer">
<div class="btn btn6" @click="of_exit">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
:loading="uploadDownLoad"
@click="formData.id&&btShow?showUpload():reportUpload()"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 修改测评名称 -->
<!-- <a-modal
v-model:visible="bg_edit"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_edit"
>
<div class="selectonlineface" :style="{ display: bg_edit ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div>修改测评名称</div>
<div class="bg_main_header_close" @click="of_edit"></div>
</div>
<div class="bg_body">
<div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
<div class="bg_body_bttext" style="margin-top: 5px;">测评名称</div>
<div class="bg_body_input">
<NameInput
ref="nameRef"
placeholder="请输入测评标题(限60个字以内)"
v-model:value="formData.evaluationName"
v-model:validated="formData.validated"
:id="formData.id"
:maxlength="60"
show-count
></NameInput>
</div>
</div>
<div class="bg_footer">
<div class="btn btn6" @click="of_edit">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
@click="editUpdata"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal> -->
<!-- 权限 -->
<a-modal
v-model:visible="bg_setting"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_setting"
>
<div class="selectonlineface" style="width: 1000px;" :style="{ display: bg_setting ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div>分配普通管理员</div>
<div class="bg_main_header_close" @click="of_setting"></div>
</div>
<div class="headers">
<div class="headers_item">
<span class="headers_item_text">状态</span>
<a-select
v-model:value="searchParam.status2"
style="width: 270px;"
placeholder="请选择状态"
:options="searchStatusVal2"
allowClear
></a-select>
</div>
<div class="headers_item">
<a-input
v-model:value="searchParam.createNames"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="工号/姓名"
allowClear
showSearch
>
</a-input>
</div>
<div class="headers_item btn">
<div class="headers_item_btn btn1" @click="searchSaveList">
<div class="btnText">搜索</div>
</div>
<div class="headers_item_btn btn2" v-if="uploadAdmin('Upload-admin')" @click="addAuths">
<div class="btnText">添加</div>
</div>
</div>
</div>
<div class="content" style="padding: 10px 35px;">
<a-table
:columns="columns2"
:data-source="tableData1"
:loading="tableLoadingAut"
:scroll="{ x: '1000' }"
:pagination="pagination"
>
<template #action="{ record, column }">
<a-space>
<a-button type="link" v-if="uploadAdmin('Upload-admin')" @click="textEnableAdd2(record)" :disabled="record.status==0">
<span :class="{text_color:record.status==0?'text_color':''}">启用</span>
</a-button>
<a-button type="link" v-if="uploadAdmin('Upload-admin')" @click="textDisabled(record)" :disabled="record.status==1">
<span :class="record.status==1?'text_color':''">禁用</span>
</a-button>
<a-button type="link" v-if="uploadAdmin('Upload-admin')" @click="textDelete(record)">
<span class="download">删除</span>
</a-button>
<a-button type="link" v-if="uploadAdmin('Upload-admin')" @click="updateAuthority(record)">
<span class="download">修改权限</span>
</a-button>
</a-space>
</template>
</a-table>
</div>
<div class="bg_body">
<div class="bg_footer" style="margin-left: 288px;">
<div class="btn btn6" @click="of_setting">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
@click="settingUp"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 上传结果 -->
<a-modal
v-model:visible="bg_results"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_results"
>
<div class="selectonlineface" style="width: 510px;" :style="{ display: bg_results ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div class="bg_main_header_close" @click="of_results"></div>
</div>
<div class="bg_body">
<div>上传结果</div>
<div style="margin: 25px 0 0 24px;">上传的测评报告总文件数{{totalNumber.totalEntries}}成功{{totalNumber.successfulEntries}}失败{{totalNumber.failedEntries}}<br/>上传结果<span @click="failedDownload" style="color: #4ea6ff;cursor: pointer;">请下载</span>查看</div>
<div class="bg_footer" style="margin-left: 90px;">
<div class="btn btn6" @click="of_results">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
@click="resultsUp"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 修改备注 -->
<!-- <a-modal
v-model:visible="bg_remarks"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_remarks"
>
<div class="selectonlineface" :style="{ display: bg_remarks ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div>修改备注</div>
<div class="bg_main_header_close" @click="of_remarks"></div>
</div>
<div class="bg_body">
<div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
<div class="bg_body_bttext" style="margin-top: 5px;">备注</div>
<div class="bg_body_input">
<a-textarea style="width: 334px;height: 88px;" v-model:value="formData.remarks" showCount :maxlength="200" />
</div>
</div>
<div class="bg_footer">
<div class="btn btn6" @click="of_remarks">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
@click="remarksUpdata"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal> -->
<!-- 添加权限设置 -->
<a-modal
v-model:visible="bg_addsetting"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_addsetting"
>
<div class="selectonlineface" style="width: 1000px;" :style="{ display: bg_addsetting ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div>添加普通管理员</div>
<div class="bg_main_header_close" @click="of_addsetting"></div>
</div>
<div class="headers">
<div class="headers_item">
<a-input
v-model:value="searchParam.createName"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="工号/姓名"
allowClear
showSearch
>
</a-input>
</div>
<div class="headers_item btn">
<div class="headers_item_btn btn1" @click="searchSave">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="headers_item_btn btn2" @click="removeSave">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="content" style="padding: 10px 35px;">
<a-table
:columns="columnsAdd"
:data-source="tableDataAdd"
:loading="tableLoadingAdd"
:scroll="{ x: 1000,y: 500 }"
:pagination="paginationAdd"
>
<template #addAuthority="{ record, column }">
<a-space>
<a-button type="link" @click="powerSetting(record)">
<span>权限配置</span>
</a-button>
<a-button type="link" :disabled="record.statusList == 0" @click="textEnableAdd(record)">
<span>启用</span>
</a-button>
<a-button type="link" @click="textDeleteAdd(record,index)">
<span class="download">删除</span>
</a-button>
</a-space>
</template>
</a-table>
</div>
<div class="bg_body">
<div class="bg_footer" style="margin-left: 288px;">
<div class="btn btn6" @click="of_addsetting">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
@click="addSettingUp"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 修改权限设置 -->
<a-modal
v-model:visible="bg_power"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_power"
>
<div class="selectonlineface" style="width: 524px" :style="{ display: bg_power ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div>权限配置</div>
<div class="bg_main_header_close" @click="of_power"></div>
</div>
<div class="bg_body">
<div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
<a-checkbox-group v-model:value="checkclick">
<a-row>
<a-col :span="8" style="margin-left:120px">
<a-checkbox value="1">查看</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="2">上传</a-checkbox>
</a-col>
<a-col :span="8" style="margin-left:120px">
<a-checkbox value="3">清空</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="4">编辑</a-checkbox>
</a-col>
<a-col :span="8" style="margin-left:120px">
<a-checkbox value="5">下载</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="6">删除</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
</div>
<div class="bg_footer" style="margin-left:106px">
<div class="btn btn6" @click="of_power">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
@click="powerTrue"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal>
<a-modal
v-model:visible="bg_power2"
:footer="null"
closable="false"
style="margin-top: 400px"
@cancel="of_power"
>
<div class="selectonlineface" style="width: 524px" :style="{ display: bg_power2 ? 'block' : 'none' }">
<div class="bg_headers"></div>
<div class="bg_main">
<div class="bg_main_header">
<div>权限配置</div>
<div class="bg_main_header_close" @click="of_power"></div>
</div>
<div class="bg_body">
<div class="bg_body_bt" style="align-items: flex-start;" v-if="btShow">
<a-checkbox-group v-model:value="checkclick">
<a-row>
<a-col :span="8" style="margin-left:120px">
<a-checkbox value="1">查看</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="2">上传</a-checkbox>
</a-col>
<a-col :span="8" style="margin-left:120px">
<a-checkbox value="3">清空</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="4">编辑</a-checkbox>
</a-col>
<a-col :span="8" style="margin-left:120px">
<a-checkbox value="5">下载</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="6">删除</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
</div>
<div class="bg_footer" style="margin-left:106px">
<div class="btn btn6" @click="of_power">
<div class="btnText">取消</div>
</div>
<a-button
class="btn btn6"
@click="powerTrue"
>
确定
</a-button>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- <div class="aeLoading" style="z-index:999999" :style="{ display: uploadDownLoad ? 'flex' : 'none' }">
<a-spin :spinning="uploadDownLoad" tip="" />
</div> -->
</template>
<script>
import { reactive, toRefs, ref, watch,computed,onMounted } from "vue";
import { DownOutlined } from '@ant-design/icons-vue';
import {getCookieForName} from "@/api/method";
import { useRouter } from "vue-router";
import dialog from "@/utils/dialog";
import NameInput from "@/components/project/NameInput";
import {boeRequest} from "@/api/request";
import {
list,
importList,
save,
uploadImage,
adminList,
saveEvaluationDetail,
updateStatus,
deleteList,
clear,
savePermission,
saveLists,
deleteId,
downloadError
} from "@/api/evaluation";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import {timeoutUpload} from "@/api/configPublic";
// import md5 from 'js-md5';
export default {
name: 'evaluationUpload',
components:{
DownOutlined,
NameInput,
},
setup() {
const store = useStore();
const userInfo = computed(() => store.state.userInfo);
const router = useRouter();
const state = reactive({
uploadTypes: true,
saveNotUpload: true,
stateUpload: true,
uploadParameters: {},
uploadList: [],
isRegularAdministrator: '',
loadNewDown:false,
totalNumber: {},
sussessIds: [],
failedId: '',
uploadDownLoad: false,
uploadDownId: null,
loadData: false,
saveList: [],
powerStatus:{},
saveListPid: '',
idValue: null,
uploadStatus: true,
uploadId: '',
uploadName: '',
serchName: '',
bg_power: false,
bg_power2: false,
tableLoading: false,
tableLoadingAdd: false,
tableLoadingAut: false,
total: 0,
totalAdd: 0,
params: {
pageNo: 1,
pageSize: 100,
},
paramsAdd: {
pageNo: 1,
pageSize: 10,
},
tableDataTotal: 0,
searchParam:{
pageNo: 1,
pageSize: 10,
status: 0,
status2: null,
},
errorMessage: '',
formData: {
evaluationName: '',
validated: 0,
id: '',
cover: '',
remarks: '',
},
bg_check: false,
btShow: true,
btShowEdit: true,
bg_edit: false,
bg_setting: false,
bg_addsetting: false,
bg_results: false,
bg_remarks: false,
checkclick: [],
permissionId:'',
filesList:[],
tableData:[],
tableData1:[],
tableDataAdd:[]
})
// const searchStatusVal = ref([
// { value: 0, label: "全部" },
// { value: 1, label: "草稿" },
// { value: 2, label: "更新待发布" },
// { value: 3, label: "已发布" },
// ]);
onMounted(()=>{
timeoutUpload(1000*60*5)
state.tableLoading = true
listData()
})
const uploadAdmin = (admin)=>{
const aaa = userInfo.value.roleList.map((item)=>item.roleCode)
if (admin){
return aaa.some(t => t == admin)
}
}
const trueFalse = (per,i) => {
if (per) {
return (per + "").split(",").some(t => t== i);
}
}
//搜索
const serchList = () => {
state.tableLoading = true
state.serchName = state.searchParam.createName
state.searchParam.pageNo = 1
listData()
}
const serchListNo = () => {
state.searchParam.createName = ''
state.searchParam.pageNo = 1
serchList()
}
const listData = async () => {
await list({
evaluationName: state.serchName,
pageNo: state.searchParam.pageNo,
pageSize: state.searchParam.pageSize,
workNum:userInfo.value.userNo
}).then((res) => {
state.isRegularAdministrator = res.data.isRegularAdministrator
state.tableData = res.data.pageList.records
state.tableDataTotal = res.data.pageList.total
state.tableLoading = false
const operationColumn = {
title: "操作",
width: "20%",
dataIndex: "id",
key: "id",
align: "right",
slots: { customRender: "operation" },
};
if (!addedOperationColumn && state.isRegularAdministrator == '0') {
columns.value.push(operationColumn);
addedOperationColumn = true;
}
});
}
//分配权限
const searchStatusVal2 = ref([
{ value: null, label: "全部" },
{ value: 0, label: "启用" },
{ value: 1, label: "禁用" },
]);
const pagination = computed(() => ({
total: state.total,
showSizeChanger: true,
showQuickJumper: false,
current: state.params.pageNo,
pageSize: state.params.pageSize,
onChange: changePaginations,
}))
const changePaginations = (page,pageSize) => {
state.params.pageNo = page
state.params.pageSize = pageSize
saveListItem()
}
watch(()=>state.params.pageSize,()=>{
state.params.pageNo = 1
saveListItem()
})
// 添加权限
const paginationAdd = computed(() => ({
total: state.totalAdd,
showSizeChanger: true,
showQuickJumper: false,
current: state.paramsAdd.pageNo,
pageSize: state.paramsAdd.pageSize,
onChange: changePaginationsAdd,
}))
const changePaginationsAdd = (page,pageSize) => {
state.paramsAdd.pageNo = page
state.paramsAdd.pageSize = pageSize
searchSave()
}
let addedOperationColumn = false;
const columns = ref([
{
title: "ID",
dataIndex: "id",
key: "id",
className: "h",
ellipsis: true,
align: "center",
width: 100,
},
{
title: "测评名称",
dataIndex: "evaluationName",
key: "evaluationName",
className: "h",
ellipsis: true,
align: "center",
width: 100,
},
{
title: "备注",
dataIndex: "remarks",
key: "remarks",
className: "h",
ellipsis: true,
align: "center",
width: 100,
},
{
title: "报告总量",
dataIndex: "reportReleaseNums",
key: "reportReleaseNums",
className: "h",
ellipsis: true,
align: "center",
width: 60,
},
{
title: "上传日期",
dataIndex: "uploadTime",
key: "uploadTime",
className: "h",
align: "center",
ellipsis: true,
width: 100,
}
])
const columns2 = ref([
{
title: "姓名",
dataIndex: "name",
key: "name",
className: "h",
align: "center",
ellipsis: true,
width: 100,
},
{
title: "工号",
dataIndex: "workNum",
key: "workNum",
className: "h",
ellipsis: true,
align: "center",
width: 100,
},
{
title: "组织部门",
dataIndex: "organizationalDepartment",
key: "organizationalDepartment",
className: "h",
ellipsis: true,
align: "center",
width: 150,
customRender: ({ text }) => {
return text ? text : "";
},
},
{
title: "添加时间",
dataIndex: "createTime",
key: "createTime",
className: "h",
align: "center",
ellipsis: true,
width: 200,
},
{
title: "权限",
dataIndex: "permission",
key: "permission",
className: "h",
align: "center",
ellipsis: true,
width: 200,
customRender: ({ text }) => {
if(text == null){
return ""
}
const permissions = text.split(',').map(Number);
const displayTexts = [];
for (const permission of permissions) {
switch (permission) {
case 1:
displayTexts.push("查看");
break;
case 2:
displayTexts.push("上传");
break;
case 3:
displayTexts.push("清空");
break;
case 4:
displayTexts.push("编辑");
break;
case 5:
displayTexts.push("下载");
break;
case 6:
displayTexts.push("删除");
break;
}
}
return displayTexts.join(", ");
},
},
{
title: "状态",
dataIndex: "status",
key: "status",
className: "h",
ellipsis: true,
align: "center",
width: 100,
customRender: (value) =>{
if(value.record.status == 0){
return "启用"
}else{
return "禁用"
}
}
},
{
title: "操作",
width: 200,
dataIndex: "id",
key: "id",
fixed: 'right',
align: "center",
slots: { customRender: "action" },
},
])
const columnsAdd = ref([
{
title: "姓名",
dataIndex: "realName",
key: "realName",
className: "h",
ellipsis: true,
align: "center",
width: 50,
},
{
title: "工号",
dataIndex: "departId",
key: "departId",
className: "h",
ellipsis: true,
align: "center",
width: 100,
},
{
title: "组织部门",
dataIndex: "departName",
key: "departName",
className: "h",
ellipsis: true,
align: "center",
width: 100,
},
{
title: "添加时间",
dataIndex: "createTime",
key: "createTime",
className: "h",
ellipsis: true,
align: "center",
width: 100,
},
{
title: "操作",
width: "20%",
fixed: 'right',
dataIndex: "id",
key: "id",
align: "center",
slots: { customRender: "addAuthority" },
},
])
const textDisabled = async (record) => {
await updateStatus({status:1,id:record.id}).then((res)=>{
if(res.code === 200){
message.success('禁用成功')
saveListItem()
listData()
}
})
}
const textDelete = (record) => {
dialog({
content: '是否删除?',
ok: () => {
deleteId({id:record.id}).then((res)=>{
if(res.code === 200){
message.success('删除成功')
saveListItem()
listData()
}
})
}
})
}
const updateAuthority = (record) => {
state.bg_power = true
state.permissionId = record.id
if(record.permission){
state.checkclick = record.permission.split(',')
}
}
const bgcheck = (record) =>{
router.push({
path:'/evadown',
query:{id:record.id,name:record.evaluationName,permission:trueFalse(record.permission,5),deleteIds:trueFalse(record.permission,3)||trueFalse(record.permission,6)}
})
}
watch(() => state.searchParam.pageSize, () => {
state.tableLoading = true
state.searchParam.pageNo = 1
listData()
})
const changePagination = (page,pageSize) => {
state.tableLoading = true
state.searchParam.pageNo = page;
state.searchParam.pageSize = pageSize;
listData()
};
//报告上传
const bgupload = () => {
state.loadNewDown = false
state.uploadDownId = null
state.uploadId = ''
state.uploadList = []
state.btShow = true
state.bg_check = true;
state.formData = {}
}
const bgupload1 = (record) => {
state.loadNewDown = true
state.uploadList = []
state.uploadDownId =record.id
state.btShowEdit = trueFalse(record.permission,2)
state.uploadId = record.id
state.uploadName = userInfo.value.realName
state.formData = {...record}
state.uploadStatus = false
state.bg_check = true;
state.btShow = trueFalse(record.permission,4)
}
const downloadAll = async (record) => {
if(record.reportReleaseNums == 0){
message.info('请先上传报告')
return
}
window.open(`/activityApi/evaluation/download?id=${record.id}`);
}
const of_exit = () => {
state.bg_check = false;
state.errorMessage = ''
state.saveNotUpload = true
state.failedId = ''
state.sussessIds = null
state.uploadName = ''
state.loadData = false
state.uploadStatus = true
state.btShow = true
state.btShowEdit = true
}
// 上传结果
const of_results = () => {
state.totalNumber = {}
state.bg_results = false
}
const resultsUp = () => {
state.totalNumber = {}
state.bg_results = false
}
const failedDownload = () => {
if(state.totalNumber.successId==''){
state.totalNumber.successId = null
}
const successId = state.totalNumber.successId==null?'':state.totalNumber.successId
const failedId = state.totalNumber.failedId==null?'':state.totalNumber.failedId
const middle = state.totalNumber.successId==null?'':','
const ids = successId+middle+failedId
window.open(`/activityApi/evaluation/download-failed?ids=${ids}`)
}
const reportUpload = async () => {
if(!state.formData.evaluationName){
message.error('请输入测评标题名称')
return
}
if(state.failedId){
message.error('上传报告含有错误报告,请检查后重新上传')
return
}
state.tableLoading = true
state.uploadDownLoad = true
if( !state.loadData&&state.loadNewDown){
// 保存上传文件
await boeRequest('/activityApi/evaluation/detail/saveEvaluationDetail post',{
id:state.uploadId,
successIds:state.sussessIds?state.sussessIds.split(','):null
}).then((res)=>{
state.uploadDownLoad = false
state.saveNotUpload = false
// if(res.code == 200){
// state.bg_check = false
// return
// }
// if(res.data.code == -1){
// message.error('保存失败')
// }
})
}
if(state.uploadStatus||state.btShow){
await boeRequest('/activityApi/evaluation/save post',{
id: state.uploadDownId,
createId:userInfo.value.userId,
createName:userInfo.value.realName,
prefix:'',
remarks:state.formData.remarks,
evaluationName:state.formData.evaluationName,
workNum: userInfo.value.userNo,
imagePath:state.formData.cover,
successIds:state.saveNotUpload?state.sussessIds?state.sussessIds.split(','):null:null
}).then((res)=>{
if(res.code == 200){
state.uploadDownLoad = false
state.bg_check = false
}
})
}
of_exit()
listData()
}
const showUpload = () => {
reportUpload()
// of_exit()
}
//上传图片
const headers = { token: getCookieForName("token") };
const beforeUpload = (file) => {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png"
if (!isJpgOrPng) {
message.error("仅支持jpg、png格式!");
return false;
}
let isLt1M = file.size < 2000000;
if (!isLt1M) {
message.error("图片大小超过2MB!");
return false;
}
const formData = new FormData();
formData.append("file", file);
uploadImage(formData).then((res) => {
if (res.status === 200) {
state.formData.cover = res.data.split('Path:')[1];
}
});
return false;
};
const beforeUpload3 = async (file) => {
state.uploadTypes = true
if(file.type === "application/pdf"){
const pattern = /^([0-9\u4e00-\u9fa5\a-z\A-Z]+-){2}[0-9\u4e00-\u9fa5\a-z\A-Z]+\.\w*$/;
if (!pattern.test(file.name)) {
message.error('上传文件名称格式不对')
state.stateUpload = false
return false
}
}
const isJpgOrPng =
file.type === "application/x-zip-compressed" ||
file.type === "application/pdf" ||
file.type === "application/zip"
if (!isJpgOrPng) {
message.error("仅支持zip、pdf格式!");
state.stateUpload = false
return false;
}
let isLt1M = file.size < 1024000000;
if (!isLt1M) {
message.error("文件大小超过1GB!");
return false;
}
state.uploadDownLoad = true
const formData = {
// file: file,
uploadName: userInfo.value.realName,
createId: userInfo.value.userId,
createName: userInfo.value.realName
}
if(state.uploadId){
formData.pid= state.uploadId
}
state.uploadParameters = formData
// 计算文件MD5值
// const fileReader = new FileReader();
// const calculateMD5 = new Promise((resolve, reject) => {
// fileReader.onload = (event) => {
// console.log(event.target.result,'result');
// resolve(md5(event.target.result));
// };
// fileReader.onerror = (error) => {
// reject(error);
// };
// });
// fileReader.readAsArrayBuffer(file);
// try {
// const md5Hash = await calculateMD5;
// console.log(`File MD5: ${md5Hash}`);
// formData.md5Upload = md5Hash;
// boeRequest('/activityApi/evaluation/import post formData', formData).then((res) => {
// if (res.code === 200) {
// if (state.stateType == "application/pdf") {
// state.downloadUrl = res.data.map(item => item.downloadUrl);
// state.valueAll = res.data;
// state.totalNumber.importTrue = [];
// } else {
// state.downloadUrl = res.data.evaluationDetailList.map(item => item.downloadUrl);
// state.totalNumber = res.data;
// state.totalNumber.importTrue = res.data.failedIds;
// state.valueAll = res.data.evaluationDetailList;
// }
// state.uploadDownLoad = false;
// }
// });
// } catch (error) {
// console.error('Failed to calculate MD5:', error);
// message.error('无法计算文件MD5请重试');
// return false;
// }
}
const handleChange = ({file, fileList,event}) => {
if(!state.uploadTypes){
return
}
if(file.response && file.response.code === 200){
state.totalNumber = file.response.data
state.sussessIds = file.response.data?.successId
state.failedId = file.response.data.failedId
state.bg_results = true
state.uploadDownLoad = false
}
if(state.stateUpload){
state.uploadList = fileList.slice(-1)
}
state.stateUpload = true
};
const uploadRef = ref()
const delUploadList = (i) => {
state.uploadTypes = false
state.uploadDownLoad = false
state.sussessIds = null
state.failedId = ''
state.uploadList = []
}
const deleteItem = (record) => {
dialog({
content: '请您确认是否要删除测评?',
ok: () => {
deleteList({id:record.id}).then((res)=>{
if(res.code === 200 ){
message.success('删除成功')
listData()
}
})
}
})
}
const emptyItem = (record) => {
dialog({
content: '请您确认是否要清空全部报告?',
ok: () => {
clear({
createId:userInfo.value.userId,
id:record.id
}).then((res)=>{
message.success('清空成功')
listData()
})
}
})
}
// 编辑
const openEdit = (record) => {
state.loadNewDown = true
state.uploadDownId =record.id
state.bg_check = true
state.btShow = true
state.btShowEdit = false
state.loadData = true
state.formData = {...record}
}
//权限列表
const saveListItem = async () => {
state.tableLoadingAut = true
await boeRequest('/activityApi/permission/list post',{
pid:state.saveListPid,
nameOrWorkNum:state.searchParam.createNames,
status:state.searchParam.status2,
pageNo: state.params.pageNo,
pageSize: state.params.pageSize
}).then((res)=>{
if(res.code === 200){
state.tableData1 = res.data.records
state.total = res.data.total
state.tableLoadingAut = false
}
})
}
// 权限
const authorityItem = async (record) => {
state.saveListPid = record.id
state.bg_setting = true
saveListItem()
}
const of_setting = () => {
state.params.pageNo = 1
state.bg_setting = false
}
const settingUp = () => {
state.bg_setting = false
listData()
}
//添加权限
const addAuths = () => {
state.bg_addsetting = true
state.formData[0].checkbox = ['1','5']
}
//搜索权限列表
const searchSaveList = () => {
state.params.pageNo = 1
saveListItem()
}
const of_addsetting = () => {
state.bg_addsetting = false
state.searchParam.createName = ''
state.tableDataAdd = []
state.saveList = []
}
//搜索权限
const searchSave = async () => {
state.tableLoadingAdd = true
await boeRequest('/activityApi/permission/adminList post',{
keyword:state.searchParam.createName,
pageNo: state.paramsAdd.pageNo,
pageSize: state.paramsAdd.pageSize,
}).then((res)=>{
if(res.code === 200){
state.tableDataAdd = res.data
state.tableLoadingAdd = false
state.tableDataAdd.forEach(item => {
state.tableData1.find(itemData => {
if(itemData.workNum === item.userNo){
item.createTime = itemData.createTime
}
})
})
}
})
}
const removeSave = () => {
state.searchParam.createName = ''
state.tableDataAdd = []
}
//添加权限确定
const addSettingUp = async () => {
await savePermission({userList:state.saveList,pid:state.saveListPid})
saveListItem()
of_addsetting()
listData()
}
const powerSetting = async (record) => {
state.powerStatus = (record)
state.bg_power2 = true
}
const of_power = () => {
state.bg_power = false
state.bg_power2 = false
state.powerStatus = {}
state.permissionId = ''
state.checkclick = []
}
const powerTrue = async () => {
state.powerStatus.permission = state.checkclick.join(",")
if(state.permissionId){
await updateStatus({id:state.permissionId,permission:state.checkclick.join(",")}).then((res)=>{
saveListItem()
})
}
listData()
of_power()
}
const textEnableAdd2 = async (record) => {
await updateStatus({status:0,id:record.id}).then((res)=>{
if(res.code === 200){
message.success('启用成功')
listData()
saveListItem()
}
})
}
const textEnableAdd = async (record) => {
record.statusList = 0
if(state.powerStatus.id === record.id){
state.powerStatus.permissionStatus = 0
state.saveList.push(state.powerStatus)
}else{
record.permissionStatus = 0
state.saveList.push(record)
}
}
const textDeleteAdd = (record,index) => {
dialog({
content: '是否删除?',
ok: () => {
state.tableDataAdd.splice(index,1)
}
})
}
return {
...toRefs(state),
userInfo,
listData,
addAuths,
searchSaveList,
of_addsetting,
searchSave,
removeSave,
addSettingUp,
textEnableAdd,
textEnableAdd2,
powerSetting,
of_power,
powerTrue,
textDeleteAdd,
searchStatusVal2,
serchList,
serchListNo,
trueFalse,
uploadAdmin,
columns,
columnsAdd,
columns2,
bgupload,
of_exit,
reportUpload,
showUpload,
of_results,
resultsUp,
failedDownload,
of_setting,
settingUp,
// of_edit,
// editUpdata,
// createft,
bgupload1,
downloadAll,
headers,
beforeUpload,
beforeUpload3,
handleChange,
delUploadList,
uploadRef,
bgcheck,
deleteItem,
emptyItem,
// editName,
// openRemarks,
// of_remarks,
// remarksUpdata,
openEdit,
authorityItem,
saveListItem,
changePagination,
changePaginations,
changePaginationsAdd,
pagination,
paginationAdd,
textDisabled,
textDelete,
updateAuthority,
// textEnable,
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .ant-dropdown{
left: 120px !important;
}
.evaluationUpload{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.headers{
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.btn{
display: flex;
}
.headers_item{
margin-right: 20px;
margin-bottom: 20px;
.headers_item_text{
margin-right: 15px;
}
.headers_item_btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset0.png");
}
}
::v-deep .ant-select {
border-radius: 5px;
width: 100%;
height: 40px;
.ant-select-selector {
border-radius: 8px;
width: 100%;
height: 40px;
}
.ant-select-selection-placeholder{
line-height: 40px;
}
.ant-select-selection-item{
line-height: 40px;
}
}
}
}
.content{
padding: 10px 35px;
.check{
width: 19px;
height: 20px;
background: url("../../assets/images/evaluation/check.png") no-repeat;
background-size: 100%;
}
.upload{
width: 19px;
height: 20px;
background: url("../../assets/images/evaluation/upload.png") no-repeat;
background-size: 100%;
}
.download{
width: 19px;
height: 20px;
background: url("../../assets/images/evaluation/download.png") no-repeat;
background-size: 100%;
}
.tableBox {
padding-bottom: 20px;
margin: 20px 38px 30px;
::v-deep .ant-select-dropdown{
display: inline-block;
}
::v-deep .ant-select-selection-item{
margin-left: 3px;
}
::v-deep .ant-pagination-options-size-changer.ant-select{
width: 84px;
}
.pa {
width: 100%;
display: flex;
justify-content: right;
}
}
}
}
.selectonlineface{
z-index: 999;
width: 679px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
top: -100%;
transform: translate(-50%, -50%);
.bg_headers {
position: absolute;
width: 100%;
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.bg_main {
width: 100%;
position: relative;
.bg_main_header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.bg_main_header_icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/evaluation/uploads.png);
background-size: 100% 100%;
}
.bg_main_header_close {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.text_color{
color:#d9d9d9;
}
.bg_body {
width: 80%;
margin: 3px auto;
.bg_body_bt {
display: flex;
align-items: center;
justify-content: end;
margin: 14px auto;
.bg_body_bttext {
width: 110px;
display: flex;
justify-content: end;
margin-right: 20px;
.bg_body_btimg{
width: 10px;
height: 10px;
margin-top: -3px;
margin-right: 6px;
background-size: 100% 100%;
}
}
.mbl_items12 {
width: 334px;
margin-left: 128px;
.item_text{
width: 300px;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
}
.i12_box1 {
display: flex;
align-items: center;
padding: 10px 0px 17px 21px;
border: 1px solid #eff4fc;
border-radius: 8px;
margin-bottom: 10px;
.file_img {
width: 27px;
height: 32px;
background-image: url(@/assets/images/coursewareManage/imgs.png);
margin-right: 22px;
img {
width: 100%;
height: 100%;
}
}
.file_detail {
width: 250px;
margin-right: 21px;
.file_updata {
display: flex;
align-items: center;
.updatabox {
position: relative;
width: 230px;
height: 5px;
background-color: rgba(192, 192, 192, 0.25);
border-radius: 3px;
.updatacolor {
position: absolute;
left: 0;
width: 100%;
height: 5px;
background-color: #57c887;
border-radius: 3px;
}
.updatacolor2 {
position: absolute;
left: 0;
width: 80%;
height: 5px;
background-color: #ff7474;
border-radius: 3px;
}
.updatacolor3 {
position: absolute;
left: 0;
width: 60%;
height: 5px;
background-color: #4ea6ff;
border-radius: 3px;
}
.updataxq1{
margin-top: 7px;
}
.updataxq {
position: absolute;
right: 2px;
top: -30px;
color: #57c887;
}
.updataxq2 {
position: absolute;
right: 2px;
top: -30px;
color: #ff7474;
}
.updataxq3 {
position: absolute;
right: 2px;
top: -30px;
color: #4ea6ff;
}
}
}
}
.file_operation {
display: flex;
.fobox {
margin-right: 5px;
cursor: pointer;
}
}
}
}
}
.bg_body_input {
flex: 1;
position: relative;
.ant-upload-picture-card-wrapper{
width: 200px;
margin-right: 18px;
}
.i_upload_img {
width: 200px;
height: 112px;
}
::v-deep .ant-upload.ant-upload-select-picture-card{
width: 200px;
height: 112px;
}
.i_upload {
width: 200px;
height: 112px;
text-align: center;
align-items: center;
cursor: pointer;
.addimg {
position: relative;
.heng {
position: absolute;
top: 59px;
left: 71px;
width: 60px;
border: 1px solid #d9d9d9;
}
.shu {
position: absolute;
top: 30px;
left: 100px;
height: 60px;
border: 1px solid #d9d9d9;
}
}
}
.upload_box{
border: 1px solid #d9d9d9;
padding: 2px 5px;
background-color: #d9d9d9;
border-radius: 2px;
cursor: pointer;
}
.error-message{
color: red;
font-size: 11px;
margin-top: 2px;
margin-bottom: 0;
}
}
.bg_footer {
width: 100%;
margin-left: 174px;
margin-top: 25px;
margin-bottom: 20px;
display: flex;
.btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn5 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn6 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
.headers{
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.btn{
display: flex;
}
.headers_item{
margin-right: 20px;
margin-bottom: 20px;
.headers_item_text{
margin-right: 15px;
}
.headers_item_btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset0.png");
}
}
::v-deep .ant-select {
border-radius: 5px;
width: 100%;
height: 40px;
.ant-select-selector {
border-radius: 8px;
width: 100%;
height: 40px;
}
.ant-select-selection-placeholder{
line-height: 40px;
}
.ant-select-selection-item{
line-height: 40px;
}
}
}
}
}
}
.btn_item{
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
.release{
width: 15px;
height: 16px;
background: url("../../assets/images/evaluation/release.png") no-repeat;
background-size: 100%;
margin-right: 2px;
}
.authority{
width: 15px;
height: 16px;
background: url("../../assets/images/evaluation/authority.png") no-repeat;
background-size: 100%;
margin-right: 2px;
}
.edit{
width: 15px;
height: 16px;
background: url("../../assets/images/evaluation/edit.png") no-repeat;
background-size: 100%;
margin-right: 2px;
}
.delete{
width: 15px;
height: 16px;
background: url("../../assets/images/evaluation/delete.png") no-repeat;
background-size: 100%;
margin-right: 2px;
}
.empty{
width: 15px;
height: 16px;
background: url("../../assets/images/evaluation/empty.png") no-repeat;
background-size: 100%;
margin-right: 2px;
}
}
</style>