zhaoxingchang.sd
11 months ago
parent
6fb4a7c010
commit
8c0b1c5cfa
@ -0,0 +1,151 @@ |
||||
<template> |
||||
<div> |
||||
<el-dialog title="预览文件" :visible.sync="popShow" @close="clearPreview"> |
||||
<vue-office-docx :src="docxUrl" v-if="isWord"/> |
||||
<vue-office-excel style="min-height: 500px;width: 100%" :src="excelUrl" v-if="isExcel" /> |
||||
<vue-office-pdf style="height: 100%;" :src="pdfUrl" v-if="isPDF" /> |
||||
<el-image alt="双击放大图片" v-if="isImage" style="height: 100%; width: 100%" :initial-view-opener="true" :preview-src-list="[imageUrl]" :src="imageUrl" /> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button type="primary" @click="popShow = false && clearPreview()">取 消</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
//引入相关样式 |
||||
import '@vue-office/docx/lib/index.css' |
||||
import '@vue-office/excel/lib/index.css' |
||||
|
||||
//引入VueOffice组件 |
||||
import VueOfficeExcel from '@vue-office/excel' |
||||
import VueOfficePdf from '@vue-office/pdf' |
||||
import VueOfficeDocx from '@vue-office/docx'; |
||||
import axios from 'axios'; |
||||
|
||||
export default { |
||||
name: 'FilePreviewer', |
||||
components: { |
||||
VueOfficeDocx, |
||||
VueOfficeExcel, |
||||
VueOfficePdf |
||||
}, |
||||
props: { |
||||
byUuid: { |
||||
type: String, |
||||
required: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
docxUrl:null, |
||||
excelUrl:null, |
||||
imageUrl: null, |
||||
pdfUrl:null, |
||||
isPDF: false, |
||||
isImage: false, |
||||
isWord: false, |
||||
isExcel: false, |
||||
wordContent: '', |
||||
excelContent: '', |
||||
popShow: false, |
||||
loading: false |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.$refs.pdfContainer = document.getElementById('pdfContainer'); |
||||
}); |
||||
}, |
||||
methods: { |
||||
async previewFile() { |
||||
if (!this.byUuid) { |
||||
this.$message.error('文件不存在'); |
||||
return; |
||||
} |
||||
|
||||
this.loading = true; |
||||
this.clearPreview(); |
||||
|
||||
try { |
||||
const response = await axios.post('/fileManage/getImage', { uuid: this.byUuid }, { |
||||
responseType: 'blob' |
||||
}); |
||||
|
||||
const blob = response.data; |
||||
const mimeType = response.headers['content-type']; |
||||
switch (mimeType) { |
||||
case 'application/pdf': |
||||
this.isPDF = true; |
||||
this.pdfUrl = URL.createObjectURL(blob); |
||||
; |
||||
break; |
||||
case 'image/png': |
||||
case 'image/jpeg': |
||||
case 'image/gif': |
||||
case 'image/bmp': |
||||
case 'image/tiff': |
||||
this.isImage = true; |
||||
this.imageUrl = URL.createObjectURL(blob); |
||||
break; |
||||
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': |
||||
case 'application/vnd.ms-word.document.macroEnabled.12': // docx 文件类型 |
||||
case 'application/msword': // .doc 文件类型 |
||||
this.isWord = true; |
||||
this.docxUrl = URL.createObjectURL(blob); |
||||
; |
||||
break; |
||||
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': |
||||
this.isExcel = true; |
||||
this.excelUrl = URL.createObjectURL(blob); |
||||
break; |
||||
default: |
||||
this.isErr = true; |
||||
console.log('Unsupported file type:', mimeType); |
||||
this.loading = false; |
||||
return; |
||||
} |
||||
this.popShow = true; |
||||
this.loading = false; |
||||
} catch (error) { |
||||
console.error('Error fetching file:', error); |
||||
this.loading = false; |
||||
} |
||||
}, |
||||
clearPreview() { |
||||
this.isPDF = false; |
||||
this.isImage = false; |
||||
this.isWord = false; |
||||
this.isExcel = false; |
||||
this.wordContent = ''; |
||||
this.excelContent = ''; |
||||
this.imageUrl = ''; |
||||
if (this.$refs.pdfContainer) { |
||||
this.$refs.pdfContainer.innerHTML = ''; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
#pdfContainer { |
||||
width: 100%; |
||||
height: 100%; |
||||
border: 1px solid #ccc; |
||||
} |
||||
|
||||
|
||||
.loading { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
font-size: 18px; |
||||
color: #333; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,683 @@ |
||||
<template> |
||||
<div id="blackList"> |
||||
<div class="rules_form"> |
||||
<el-form :inline="true" :model="formInline" class="serchWrap"> |
||||
<el-form-item label="关键字:"> |
||||
<el-input v-model="formInline.keyWord" placeholder="请输入" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="附件类型:"> |
||||
<el-select clearable filterable multiple v-model="formInline.fileType" placeholder="请选择"> |
||||
<el-option v-for="item in insertFileTypeList" :key="item.id" :label="item.fileName" :value="item.fileName"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="添加时间:"> |
||||
<el-date-picker |
||||
class="elpicker" |
||||
:clearable="false" |
||||
v-model="formInline.time" |
||||
:default-value="getDefaultDateRange()" |
||||
value-format="yyyy-MM-dd" |
||||
size="small" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" size="medium" icon="el-icon-search" @click="findAll(1)">查询</el-button> |
||||
<el-button type="primary" size="medium" @click="resetBtn">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div |
||||
class="btnBox" |
||||
style="width: 100%; height: 53px; border-top: 1.2px dashed #d9d9d9" |
||||
> |
||||
<div |
||||
style=" |
||||
float: left; |
||||
height: 35px; |
||||
width: auto; |
||||
margin-top: 16px; |
||||
vertical-align: middle; |
||||
text-align: justify; |
||||
box-sizing: border-box; |
||||
" |
||||
> |
||||
<span |
||||
style=" |
||||
width: 3px; |
||||
height: 40%; |
||||
background-color: #229fff; |
||||
display: inline-block; |
||||
border-box: box-sizing; |
||||
vertical-align: middle; |
||||
" |
||||
></span> |
||||
<span |
||||
style=" |
||||
font-size: 14px; |
||||
color: #333333; |
||||
margin-left: 5px; |
||||
vertical-align: middle; |
||||
" |
||||
>附件上传</span |
||||
> |
||||
|
||||
|
||||
</div> |
||||
|
||||
<div style="float: right; margin: 10px 0px 5px 10px"> |
||||
<el-button type="primary" size="medium" @click="upFileBtn">附件上传</el-button> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="rules_table tableSection"> |
||||
<el-table |
||||
stripe |
||||
v-loading="loading" |
||||
:data="tableData" |
||||
:height="maxHeight" |
||||
row-class-name="rowDisabledClass" |
||||
@selection-change="handleSelectionChange" |
||||
border |
||||
style="width: 100%" |
||||
> |
||||
<!-- <el-table-column :selectable="selectable" type="selection" width="55"></el-table-column>--> |
||||
<el-table-column label="序号" type="index" width="70" align="center"></el-table-column> |
||||
<el-table-column prop="fileType" label="附件类型"></el-table-column> |
||||
<el-table-column prop="fileNum" label="附件编号"></el-table-column> |
||||
<el-table-column prop="fileName" label="附件名称"></el-table-column> |
||||
<el-table-column prop="addTime" label="添加时间"></el-table-column> |
||||
<el-table-column |
||||
label="操作" |
||||
fixed="right" |
||||
align="center" |
||||
width="170" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<button |
||||
class="cellBtn" |
||||
@click="previewBtn(scope.row)" |
||||
> |
||||
预览 |
||||
</button> |
||||
<button |
||||
class="cellBtn" |
||||
@click="dowBtn(scope.row)" |
||||
> |
||||
下载 |
||||
</button> |
||||
<button |
||||
class="cellBtn" |
||||
@click="deleteBtn(scope.row)" |
||||
> |
||||
删除 |
||||
</button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="rules_footer"> |
||||
<el-pagination |
||||
background |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="currentPage" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
:page-size="pageRow" |
||||
layout="total, prev, pager, next, sizes, jumper" |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
<el-dialog |
||||
title="附件上传" |
||||
class="parseWinStyle scanDialogClass" |
||||
width="500px" |
||||
:visible.sync="showModal" |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
> |
||||
<el-form |
||||
class="importFileForm" |
||||
ref="importFile" |
||||
:model="importFile" |
||||
:rules="importFileRules" |
||||
label-width="90px" |
||||
> |
||||
<el-form-item label="附件类型:"> |
||||
<el-select clearable v-model="importFile.fileType" placeholder="请选择"> |
||||
<el-option v-for="item in insertFileTypeList" :key="item.id" :label="item.fileName" :value="item.fileName"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="附件上传" prop="fileList"> |
||||
<el-upload |
||||
action="" |
||||
ref="uploadFile" |
||||
:auto-upload="false" |
||||
:on-change="fileChange" |
||||
:on-remove="fileRemove" |
||||
:file-list="importFile.fileList" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
> |
||||
<el-button class="btn-cancel importBtn" |
||||
><i class="el-icon-upload2" style="font-size: 16px;"></i> |
||||
上传文件</el-button |
||||
> |
||||
<span v-if="importFile.fileList.length === 0">未选取文件</span> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="medium" class="btn-cancel" @click="cancelSave" :loading="tipModaSureBtnloading" |
||||
>取消</el-button |
||||
> |
||||
<el-button |
||||
size="medium" type="primary" |
||||
class="btn-confirm" |
||||
:disabled="disabledImport" |
||||
:loading="tipModaSureBtnloading" |
||||
@click="importFileConfirm" |
||||
><i class="el-icon-loading" v-if="disabledImport"></i>确认</el-button |
||||
> |
||||
</span> |
||||
|
||||
</el-dialog> |
||||
<filePreviewer :byUuid="RowUuid" ref="filePreviewerRef"></filePreviewer> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import api from '@/api/invoice'; |
||||
import filePreviewer from './filePreviewer.vue'; |
||||
import axios from "axios"; |
||||
export default { |
||||
name: 'blackList', |
||||
components: {filePreviewer}, |
||||
data() { |
||||
return { |
||||
showModal:false, |
||||
tipModaSureBtnloading:false, |
||||
disabledImport: false, //上传防重复点击 |
||||
disabledDownload:false, |
||||
showTipModal:false, |
||||
importFile: { |
||||
fileType:'', |
||||
fileList: [] //文件导入 |
||||
}, |
||||
errorTip:false, |
||||
importFileRules: { |
||||
fileList: [ |
||||
{ required: true, message: "请选择导入文件", trigger: "change" } |
||||
] |
||||
}, |
||||
RowUuid:'', |
||||
formInline: { |
||||
keyWord:'', |
||||
time: this.getDefaultDateRange(), |
||||
fileType: [], |
||||
|
||||
}, |
||||
xmmcList:[], |
||||
scopeList:[], |
||||
insertFileTypeList:[], |
||||
/*表格*/ |
||||
tableData: [], |
||||
maxHeight: 700, |
||||
loading: true, |
||||
/*新增框*/ |
||||
addWin: false, |
||||
addTitle: '新增', |
||||
addForm: { |
||||
id:'', |
||||
goodsId:'', |
||||
goodsName:'', |
||||
gjz:'' |
||||
}, |
||||
multipleSelection:[], |
||||
/*分页*/ |
||||
currentPage: 1, |
||||
pageRow: 10, |
||||
total: 0, |
||||
/*其他*/ |
||||
token: ',', |
||||
printData:[], |
||||
userdata:{ |
||||
user:{} |
||||
}, |
||||
numMap:{ |
||||
totalJshj:'', |
||||
totalSe:'', |
||||
totalJe:'' |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
if (this.$route.query.data) { |
||||
localStorage.setItem("bx_token", this.$route.query.data); |
||||
} |
||||
|
||||
this.token = localStorage.getItem("bx_token"); |
||||
this.getfindEum() |
||||
}, |
||||
watch: {}, |
||||
mounted() { |
||||
this.findAll(1) |
||||
this.maxTableHeight(); |
||||
}, |
||||
computed: { |
||||
}, |
||||
methods: { |
||||
getDefaultDateRange() { |
||||
const today = new Date(); |
||||
const threeMonthsAgo = new Date(today.getTime() - 3 * 30 * 24 * 60 * 60 * 1000); // 大约90天前 |
||||
const formattedStart = this.formatDate(threeMonthsAgo); |
||||
const formattedEnd = this.formatDate(today); |
||||
return [formattedStart, formattedEnd]; |
||||
}, |
||||
formatDate(date) { |
||||
const year = date.getFullYear(); |
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
||||
const day = String(date.getDate()).padStart(2, '0'); |
||||
return `${year}-${month}-${day}`; |
||||
}, |
||||
resetBtn(){ |
||||
Object.keys(this.formInline).forEach(key => { |
||||
this.formInline[key] = ''; |
||||
}); |
||||
this.formInline.time = this.getDefaultDateRange(); |
||||
this.findAll(1) |
||||
}, |
||||
findAll(page) { |
||||
this.currentPage = page; |
||||
let userId = ''; |
||||
if (this.userdata.user && this.userdata.user.userId) { |
||||
userId = this.userdata.user.userId; |
||||
} |
||||
const params = { |
||||
keyWord: this.formInline.keyWord, |
||||
fileType: this.formInline.fileType.length > 0 ? this.formInline.fileType : [], |
||||
addTimeEnd: this.formInline.time.length > 0 ? this.formInline.time[1] + ' ' + '23:59:59' : '', |
||||
addTimeStart: this.formInline.time.length > 0 ? this.formInline.time[0] + ' ' + '00:00:00' : '', |
||||
pageSize: this.pageRow, |
||||
pageNum:page |
||||
}; |
||||
this.loading = true; |
||||
const header = { |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
'token': this.token |
||||
} |
||||
}; |
||||
api.fileManagelistApi(params, header).then(res => { |
||||
if (res.status === 200) { |
||||
this.tableData = res.data.dataObj.list; |
||||
this.total = res.data.dataObj.total |
||||
} |
||||
}).finally(()=>{ |
||||
this.loading = false; |
||||
}) |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
resetForm(form) { |
||||
console.log(form) |
||||
// this.$refs[form].resetFields() |
||||
}, |
||||
deleteBtn(row){ |
||||
this.$confirm('删除后将不可恢复，确认删除？', '提示', { |
||||
type: 'warning', |
||||
center: true |
||||
}).then(()=>{ |
||||
let data = { |
||||
uuid: row.uuid, |
||||
filePath:row.filePath |
||||
} |
||||
api.filedeleteFileApi(data).then(res=>{ |
||||
if(res.data.code === '0000'){ |
||||
this.$message.success('删除成功') |
||||
this.findAll(1) |
||||
}else{ |
||||
this.$message.error(res.data.message) |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
|
||||
}, |
||||
dowBtn(row) { |
||||
try { |
||||
axios.post('/fileManage/getImage', { uuid: row.uuid }, { |
||||
responseType: 'blob' |
||||
}).then(response => { |
||||
const blob = new Blob([response.data], { type: 'application/octet-stream' }); |
||||
const url = window.URL.createObjectURL(blob); |
||||
const a = document.createElement('a'); |
||||
a.href = url; |
||||
a.download = row.fileName; // 可以根据需要设置文件名 |
||||
a.click(); |
||||
this.$notify({ |
||||
title: '成功', |
||||
message: '文件下载成功', |
||||
type: 'success', |
||||
duration:2000 |
||||
}); |
||||
window.URL.revokeObjectURL(url); // 清理 |
||||
}).catch(error => { |
||||
console.error(error); |
||||
this.$message.error('文件下载失败') |
||||
}); |
||||
} catch (error) { |
||||
console.error(error); |
||||
} |
||||
}, |
||||
previewBtn(row){ |
||||
this.RowUuid = row.uuid |
||||
setTimeout(()=>{ |
||||
this.$refs.filePreviewerRef.previewFile() |
||||
},10) |
||||
}, |
||||
maxTableHeight() { |
||||
this.$nextTick(() => { |
||||
let self = this; |
||||
// let height = window.isMainPage ? 330 : 280; |
||||
let height = parseInt(document.querySelector('.serchWrap').offsetHeight) + parseInt(document.querySelector('.btnBox').offsetHeight) + (window.isMainPage ? 155 : 100); |
||||
self.maxHeight = document.documentElement.clientHeight - height; |
||||
self.maxHeight = self.maxHeight < 300 ? 300 : self.maxHeight; |
||||
window.onresize = function () { |
||||
height = parseInt(document.querySelector('.serchWrap').offsetHeight) + parseInt(document.querySelector('.btnBox').offsetHeight) + (window.isMainPage ? 155 : 100); |
||||
self.maxHeight = document.documentElement.clientHeight - height; |
||||
self.maxHeight = self.maxHeight < 300 ? 300 : self.maxHeight; |
||||
} |
||||
}) |
||||
}, |
||||
upFileBtn(){ |
||||
this.showModal=true; |
||||
}, |
||||
getfindEum(){ |
||||
const header = { |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
'token': this.token |
||||
} |
||||
}; |
||||
api.fileTypeListApi({}, header).then((res)=>{ |
||||
if(res.data.code == '0000'){ |
||||
this.insertFileTypeList = res.data.data; |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
//复选框禁用 |
||||
selectable(row,rowIndex) { |
||||
// if (row.bxstatus == "4") { |
||||
// return true; //不禁用 |
||||
// }else { |
||||
// return false; //禁用 |
||||
// } |
||||
}, |
||||
/*分页*/ |
||||
handleSizeChange(val) { |
||||
console.log(`每页 ${val} 条`); |
||||
this.pageRow = val; |
||||
this.findAll(1) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
console.log(`当前页: ${val}`); |
||||
this.findAll(val) |
||||
}, |
||||
//导入基础信息-添加文件 |
||||
fileChange(file, fileList) { |
||||
this.importFile.fileList = fileList; |
||||
this.$refs.importFile.clearValidate(); |
||||
}, |
||||
//导入基础信息-删除文件 |
||||
fileRemove(file, fileList) { |
||||
this.importFile.fileList = []; |
||||
}, |
||||
//导入基础信息-文件超出个数限制时的钩子 |
||||
handleExceed() { |
||||
this.$message.warning("一次只可导入一个文件"); |
||||
}, |
||||
//导入基础信息-确定-上传文件格式校验 |
||||
importFileVerify() { |
||||
const file = this.importFile.fileList[0]; |
||||
const fileFormat = file.name.substring(file.name.lastIndexOf(".") + 1); |
||||
const allowedExtensions = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx']; |
||||
const extension = allowedExtensions.includes(fileFormat); |
||||
if (!extension) { |
||||
throw new Error("上传文件只能是图片（.jpg, .jpeg, .png）、PDF、Word 或 Excel 格式!"); |
||||
} |
||||
}, |
||||
//导入基础信息-确定 |
||||
importFileConfirm() { |
||||
|
||||
this.$refs["importFile"].validate(valid => { |
||||
if (valid) { |
||||
try { |
||||
this.importFileVerify(); |
||||
this.importFileRequest(); |
||||
} catch (e) { |
||||
this.$message.warning(e.message); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
//导入基础信息-确定-调接口 |
||||
importFileRequest() { |
||||
this.disabledDownload = true; |
||||
const file = this.importFile.fileList[0].raw; |
||||
console.log(this.importFile.fileList) |
||||
let formData = new FormData(); |
||||
formData.append("file", file); |
||||
formData.append("fileType", this.importFile.fileType); |
||||
api.fileManageuploadApi(formData, { |
||||
headers: { |
||||
'Content-Type': 'multipart/form-data' |
||||
} |
||||
}) |
||||
.then(r => { |
||||
console.log(r) |
||||
if(r.data.code == '0000'){ |
||||
this.tipModaSureBtnloading = false |
||||
this.$message.success(r.data.message); |
||||
this.findAll(1) |
||||
this.showModal = false |
||||
}else { |
||||
this.$message.error(r.data.message); |
||||
} |
||||
}) |
||||
}, |
||||
cancelSave() { |
||||
this.$confirm('是否放弃操作？', '提示', { |
||||
type: 'warning', |
||||
center: true |
||||
}).then(() => { |
||||
this.showModal = false; |
||||
}).catch(() => { |
||||
}); |
||||
}, |
||||
tipModaSureBtn(){ |
||||
this.showTipModal = false |
||||
this.showModal = false |
||||
} |
||||
|
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.rulesView { |
||||
padding: 20px; |
||||
} |
||||
|
||||
.fakeCircle { |
||||
display: inline-block; |
||||
width: 8px; |
||||
height: 8px; |
||||
border-radius: 50%; |
||||
vertical-align: middle; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.rules_footer { |
||||
// position: fixed; |
||||
// bottom: 40px; |
||||
// right: 20px; |
||||
margin-top: 20px; |
||||
text-align: right; |
||||
} |
||||
|
||||
/deep/ .el-input--suffix .el-input__inner { |
||||
padding-right: 30px; |
||||
height: auto; |
||||
} |
||||
|
||||
.tableSection { |
||||
/*position: absolute;*/ |
||||
width: 100%; |
||||
margin: 0 auto; |
||||
// height: 750px; |
||||
/*top: 80px;*/ |
||||
/*bottom: 100px;*/ |
||||
} |
||||
|
||||
.addLabel { |
||||
line-height: 40px; |
||||
font-size: 18px; |
||||
font-weight: 400; |
||||
display: inline-block; |
||||
width: 5.5em; |
||||
float: left; |
||||
} |
||||
.rules_form /deep/ .el-input .el-input__inner { |
||||
width: 200px; |
||||
height: 36px; |
||||
} |
||||
.fakeLine { |
||||
width: 100%; |
||||
border-top: 1px solid #dedede; |
||||
} |
||||
|
||||
/deep/ .el-dialog__body { |
||||
padding: 0; |
||||
} |
||||
|
||||
/deep/ .el-table__empty-block { |
||||
min-height: 60px; |
||||
text-align: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
display: -webkit-box; |
||||
display: -ms-flexbox; |
||||
display: flex !important; |
||||
-webkit-box-pack: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
-webkit-box-align: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
} |
||||
.uploadFile { |
||||
position: relative; |
||||
font-size: 14px; |
||||
margin: 0px 10px; |
||||
width: 144px !important; |
||||
height: 36px; |
||||
text-align: center; |
||||
line-height: 36px; |
||||
overflow: hidden; |
||||
padding: 0 !important; |
||||
box-sizing: border-box; |
||||
|
||||
.imgUpload { |
||||
width: 15px; |
||||
height: 15px; |
||||
margin: 10px -5px 0px 15px; |
||||
float: left |
||||
} |
||||
|
||||
} |
||||
.addFile { |
||||
height: 0; |
||||
width: 0; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
border: 1px solid #1169ee; |
||||
opacity: 0; |
||||
cursor: pointer; |
||||
-moz-user-select: none; /*火狐*/ |
||||
-webkit-user-select: none; /*webkit浏览器*/ |
||||
-ms-user-select: none; /*IE10*/ |
||||
-khtml-user-select: none; /*早期浏览器*/ |
||||
user-select: none; |
||||
display: none; |
||||
} |
||||
table { |
||||
width: 190mm; /* 表格宽度 */ |
||||
height: 277mm; /* 表格高度 */ |
||||
font-size: 12px; /* 字体大小 */ |
||||
line-height: 1.5; /* 行高 */ |
||||
border-collapse: collapse; |
||||
page-break-inside: avoid; /* 避免表格内部分页 */ |
||||
} |
||||
|
||||
th, td { |
||||
border: 1px solid #ddd; |
||||
padding: 8px; |
||||
text-align: left; |
||||
} |
||||
|
||||
th { |
||||
background-color: #f2f2f2; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
tr:nth-child(even) { |
||||
background-color: #f2f2f2; |
||||
} |
||||
|
||||
tr:hover { |
||||
background-color: #ddd; |
||||
} |
||||
//@page{ |
||||
// size: auto A4 landscape; |
||||
// margin: 5m; |
||||
//} |
||||
</style> |
||||
<style lang="scss"> |
||||
#blackList { |
||||
padding: 20px; |
||||
.el-button--medium { |
||||
padding: 10px; |
||||
} |
||||
} |
||||
.rules_add{ |
||||
//position: relative; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
//justify-content: flex-end; |
||||
.rules_add-txt{ |
||||
line-height: 40px; |
||||
//position: absolute; |
||||
//top: 20px; |
||||
} |
||||
.rules_add-btn{ |
||||
margin: 10px 0; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
//left: 0; |
||||
} |
||||
} |
||||
.importFileForm{ |
||||
margin-left: 30px; |
||||
margin-top: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,712 @@ |
||||
<template> |
||||
<div id="blackList"> |
||||
<div class="rules_form"> |
||||
<el-form :inline="true" :model="formInline" class="serchWrap"> |
||||
<el-form-item label="关键字:"> |
||||
<el-input v-model="formInline.keyWord" placeholder="请输入" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="附件类型:"> |
||||
<el-select clearable filterable multiple v-model="formInline.fileType" placeholder="请选择"> |
||||
<el-option v-for="item in insertFileTypeList" :key="item.id" :label="item.fileName" :value="item.fileName"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="添加时间:"> |
||||
<el-date-picker |
||||
class="elpicker" |
||||
:clearable="false" |
||||
v-model="formInline.time" |
||||
:default-value="getDefaultDateRange()" |
||||
value-format="yyyy-MM-dd" |
||||
size="small" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="占用流水号:"> |
||||
<el-input v-model="formInline.ddlsh" placeholder="请输入" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" size="medium" icon="el-icon-search" @click="findAll(1)">查询</el-button> |
||||
<el-button type="primary" size="medium" @click="resetBtn">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div |
||||
class="btnBox" |
||||
style="width: 100%; height: 53px; border-top: 1.2px dashed #d9d9d9" |
||||
> |
||||
<div |
||||
style=" |
||||
float: left; |
||||
height: 35px; |
||||
width: auto; |
||||
margin-top: 16px; |
||||
vertical-align: middle; |
||||
text-align: justify; |
||||
box-sizing: border-box; |
||||
" |
||||
> |
||||
<span |
||||
style=" |
||||
width: 3px; |
||||
height: 40%; |
||||
background-color: #229fff; |
||||
display: inline-block; |
||||
border-box: box-sizing; |
||||
vertical-align: middle; |
||||
" |
||||
></span> |
||||
<span |
||||
style=" |
||||
font-size: 14px; |
||||
color: #333333; |
||||
margin-left: 5px; |
||||
vertical-align: middle; |
||||
" |
||||
>附件管理</span |
||||
> |
||||
|
||||
|
||||
</div> |
||||
|
||||
<div style="float: right; margin: 10px 0px 5px 10px"> |
||||
<el-button type="primary" size="medium" @click="fileConfigBtn">附件类型配置</el-button> |
||||
<el-button type="primary" size="medium" @click="fileDeriveBtn">导出</el-button> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="rules_table tableSection"> |
||||
<el-table |
||||
stripe |
||||
v-loading="loading" |
||||
:data="tableData" |
||||
:height="maxHeight" |
||||
row-class-name="rowDisabledClass" |
||||
@selection-change="handleSelectionChange" |
||||
border |
||||
style="width: 100%" |
||||
> |
||||
<!-- <el-table-column :selectable="selectable" type="selection" width="55"></el-table-column>--> |
||||
<el-table-column label="序号" type="index" width="70" align="center"></el-table-column> |
||||
<el-table-column prop="fileType" label="附件类型"></el-table-column> |
||||
<el-table-column prop="fileNum" label="附件编号"></el-table-column> |
||||
<el-table-column prop="fileName" label="附件名称"></el-table-column> |
||||
<el-table-column prop="addTime" label="添加时间"></el-table-column> |
||||
<el-table-column prop="ddlsh" label="占用流水号"></el-table-column> |
||||
<el-table-column |
||||
label="操作" |
||||
fixed="right" |
||||
align="center" |
||||
width="170" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<button |
||||
class="cellBtn" |
||||
@click="previewBtn(scope.row)" |
||||
> |
||||
预览 |
||||
</button> |
||||
<button |
||||
class="cellBtn" |
||||
@click="dowBtn(scope.row)" |
||||
> |
||||
下载 |
||||
</button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="rules_footer"> |
||||
<el-pagination |
||||
background |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="currentPage" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
:page-size="pageRow" |
||||
layout="total, prev, pager, next, sizes, jumper" |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
<el-dialog title="新增" :visible.sync="showModal" width="500px" > |
||||
<el-form style="margin: 20px 50px 0px 20px" :model="importFile" :rules="fileRules" ref="fileTypeRef" label-width="120px" class="demo-ruleForm"> |
||||
<el-form-item label="附件类型名称:" prop="fileTypeName"> |
||||
<el-input v-model="importFile.fileTypeName" placeholder="请输入" clearable></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="showModal = false">取 消</el-button> |
||||
<el-button type="primary" @click="verifyBtn()">确 认</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="附件类型配置" :visible.sync="pzshowModal" width="500px" > |
||||
<el-table |
||||
stripe |
||||
:data="insertFileTypeList" |
||||
row-class-name="rowDisabledClass" |
||||
border |
||||
style="width: 450px;height:90%;margin-left: 25px;" |
||||
> |
||||
<el-table-column label="序号" type="index" width="70" align="center"></el-table-column> |
||||
<el-table-column prop="fileName" label="附件类型"> |
||||
<template slot-scope="scope"> |
||||
<el-input v-if="scope.row.inpuShow" v-model="scope.row.fileName" placeholder="请输入" clearable></el-input> |
||||
<div v-else >{{scope.row.fileName}}</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="操作" |
||||
fixed="right" |
||||
align="center" |
||||
width="170" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<button |
||||
v-if="!scope.row.inpuShow" |
||||
class="cellBtn" |
||||
@click="lxBtn(scope.row,scope.$index)" |
||||
> |
||||
编辑 |
||||
</button> |
||||
<button v-if="scope.row.inpuShow" |
||||
class="cellBtn" |
||||
@click="lxSaveBtn(scope.row,scope.$index)" |
||||
> |
||||
保存 |
||||
</button> |
||||
<button v-if="scope.row.inpuShow" |
||||
class="cellBtn" |
||||
@click="getfindEum()" |
||||
> |
||||
取消 |
||||
</button> |
||||
<button |
||||
v-if="!scope.row.inpuShow" |
||||
class="cellBtn" |
||||
@click="lxdowBtn(scope.row)" |
||||
> |
||||
删除 |
||||
</button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button type="primary" @click="addFileTypeBtn()">新 增</el-button> |
||||
<el-button @click="pzshowModal = false">退 出</el-button> |
||||
|
||||
</span> |
||||
</template> |
||||
|
||||
</el-dialog> |
||||
<filePreviewer :byUuid="RowUuid" ref="filePreviewerRef"></filePreviewer> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import api from '@/api/invoice'; |
||||
import filePreviewer from './attachmentUpload/filePreviewer.vue'; |
||||
import axios from "axios"; |
||||
export default { |
||||
name: 'blackList', |
||||
components: {filePreviewer}, |
||||
data() { |
||||
return { |
||||
pzshowModal:false, |
||||
showModal:false, |
||||
tipModaSureBtnloading:false, |
||||
disabledImport: false, //上传防重复点击 |
||||
disabledDownload:false, |
||||
showTipModal:false, |
||||
importFile: { |
||||
fileTypeName:void 0, |
||||
}, |
||||
|
||||
errorTip:false, |
||||
fileRules: { |
||||
fileTypeName: [ |
||||
{ required: true, message: "请输入名称", trigger: "change" } |
||||
] |
||||
}, |
||||
RowUuid:'', |
||||
formInline: { |
||||
keyWord:'', |
||||
time: this.getDefaultDateRange(), |
||||
fileType: [], |
||||
ddlsh:'' |
||||
}, |
||||
xmmcList:[], |
||||
scopeList:[], |
||||
insertFileTypeList:[], |
||||
/*表格*/ |
||||
tableData: [], |
||||
maxHeight: 700, |
||||
loading: true, |
||||
/*新增框*/ |
||||
addWin: false, |
||||
addTitle: '新增', |
||||
addForm: { |
||||
id:'', |
||||
goodsId:'', |
||||
goodsName:'', |
||||
gjz:'' |
||||
}, |
||||
multipleSelection:[], |
||||
/*分页*/ |
||||
currentPage: 1, |
||||
pageRow: 10, |
||||
total: 0, |
||||
/*其他*/ |
||||
token: ',', |
||||
printData:[], |
||||
userdata:{ |
||||
user:{} |
||||
}, |
||||
numMap:{ |
||||
totalJshj:'', |
||||
totalSe:'', |
||||
totalJe:'' |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
if (this.$route.query.data) { |
||||
localStorage.setItem("bx_token", this.$route.query.data); |
||||
} |
||||
|
||||
this.token = localStorage.getItem("bx_token"); |
||||
this.getfindEum() |
||||
}, |
||||
watch: {}, |
||||
mounted() { |
||||
this.findAll(1) |
||||
this.maxTableHeight(); |
||||
}, |
||||
computed: { |
||||
}, |
||||
methods: { |
||||
getDefaultDateRange() { |
||||
const today = new Date(); |
||||
const threeMonthsAgo = new Date(today.getTime() - 3 * 30 * 24 * 60 * 60 * 1000); // 大约90天前 |
||||
const formattedStart = this.formatDate(threeMonthsAgo); |
||||
const formattedEnd = this.formatDate(today); |
||||
return [formattedStart, formattedEnd]; |
||||
}, |
||||
formatDate(date) { |
||||
const year = date.getFullYear(); |
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
||||
const day = String(date.getDate()).padStart(2, '0'); |
||||
return `${year}-${month}-${day}`; |
||||
}, |
||||
resetBtn(){ |
||||
Object.keys(this.formInline).forEach(key => { |
||||
this.formInline[key] = ''; |
||||
}); |
||||
this.formInline.time = this.getDefaultDateRange(); |
||||
this.findAll(1) |
||||
}, |
||||
findAll(page) { |
||||
this.currentPage = page; |
||||
let userId = ''; |
||||
if (this.userdata.user && this.userdata.user.userId) { |
||||
userId = this.userdata.user.userId; |
||||
} |
||||
const params = { |
||||
keyWord: this.formInline.keyWord, |
||||
ddlsh:this.formInline.ddlsh, |
||||
fileType: this.formInline.fileType.length > 0 ? this.formInline.fileType : [], |
||||
addTimeEnd: this.formInline.time.length > 0 ? this.formInline.time[1] + ' ' + '23:59:59' : '', |
||||
addTimeStart: this.formInline.time.length > 0 ? this.formInline.time[0] + ' ' + '00:00:00' : '', |
||||
pageSize: this.pageRow, |
||||
pageNum:page |
||||
}; |
||||
this.loading = true; |
||||
const header = { |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
'token': this.token |
||||
} |
||||
}; |
||||
api.fileManagelistApi(params, header).then(res => { |
||||
if (res.status === 200) { |
||||
this.tableData = res.data.dataObj.list; |
||||
this.total = res.data.dataObj.total |
||||
} |
||||
}).finally(()=>{ |
||||
this.loading = false; |
||||
}) |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
dowBtn(row) { |
||||
try { |
||||
axios.post('/fileManage/getImage', { uuid: row.uuid }, { |
||||
responseType: 'blob' |
||||
}).then(response => { |
||||
const blob = new Blob([response.data], { type: 'application/octet-stream' }); |
||||
const url = window.URL.createObjectURL(blob); |
||||
const a = document.createElement('a'); |
||||
a.href = url; |
||||
a.download = row.fileName; // 可以根据需要设置文件名 |
||||
a.click(); |
||||
window.URL.revokeObjectURL(url); // 清理 |
||||
}).catch(error => { |
||||
console.error(error); |
||||
}); |
||||
} catch (error) { |
||||
console.error(error); |
||||
} |
||||
}, |
||||
previewBtn(row){ |
||||
this.RowUuid = row.uuid |
||||
setTimeout(()=>{ |
||||
this.$refs.filePreviewerRef.previewFile() |
||||
},10) |
||||
}, |
||||
maxTableHeight() { |
||||
this.$nextTick(() => { |
||||
let self = this; |
||||
// let height = window.isMainPage ? 330 : 280; |
||||
let height = parseInt(document.querySelector('.serchWrap').offsetHeight) + parseInt(document.querySelector('.btnBox').offsetHeight) + (window.isMainPage ? 155 : 100); |
||||
self.maxHeight = document.documentElement.clientHeight - height; |
||||
self.maxHeight = self.maxHeight < 300 ? 300 : self.maxHeight; |
||||
window.onresize = function () { |
||||
height = parseInt(document.querySelector('.serchWrap').offsetHeight) + parseInt(document.querySelector('.btnBox').offsetHeight) + (window.isMainPage ? 155 : 100); |
||||
self.maxHeight = document.documentElement.clientHeight - height; |
||||
self.maxHeight = self.maxHeight < 300 ? 300 : self.maxHeight; |
||||
} |
||||
}) |
||||
}, |
||||
getfindEum(){ |
||||
const header = { |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
'token': this.token |
||||
} |
||||
}; |
||||
api.fileTypeListApi({}, header).then((res)=>{ |
||||
if(res.data.code == '0000'){ |
||||
|
||||
if(res.data.data.length > 0){ |
||||
res.data.data.map((item)=>{ |
||||
item.inpuShow = false |
||||
}) |
||||
} |
||||
this.insertFileTypeList = res.data.data ; |
||||
} |
||||
}) |
||||
}, |
||||
getCurrentDate() { |
||||
const now = new Date(); |
||||
const year = now.getFullYear(); |
||||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要加1，并且补零 |
||||
const day = String(now.getDate()).padStart(2, '0'); // 当日日期补零 |
||||
return `${year}${month}${day}` |
||||
}, |
||||
fileDeriveBtn(){ |
||||
try { |
||||
this.loading = true; |
||||
const params = { |
||||
keyWord: this.formInline.keyWord, |
||||
ddlsh:this.formInline.ddlsh, |
||||
fileType: this.formInline.fileType.length > 0 ? this.formInline.fileType : [], |
||||
addTimeEnd: this.formInline.time.length > 0 ? this.formInline.time[1] + ' ' + '23:59:59' : '', |
||||
addTimeStart: this.formInline.time.length > 0 ? this.formInline.time[0] + ' ' + '00:00:00' : '', |
||||
pageSize: this.pageRow, |
||||
pageNum:this.currentPage |
||||
}; |
||||
axios.post('/fileManage/exportMyFile', params, { |
||||
responseType: 'blob' |
||||
}).then(response => { |
||||
const blob = new Blob([response.data], { type: 'application/octet-stream' }); |
||||
const url = window.URL.createObjectURL(blob); |
||||
const a = document.createElement('a'); |
||||
a.href = url; |
||||
let fileName = this.getCurrentDate() + '附件列表.xlsx'; |
||||
a.download = fileName; // 可以根据需要设置文件名 |
||||
a.click(); |
||||
this.$notify({ |
||||
title: '成功', |
||||
message: '文件导出成功', |
||||
type: 'success', |
||||
duration:2000 |
||||
}); |
||||
window.URL.revokeObjectURL(url); // 清理 |
||||
}).catch(error => { |
||||
console.error(error); |
||||
this.$message.error('文件导出失败') |
||||
}).finally(()=>{ |
||||
this.loading = false; |
||||
}) |
||||
} catch (error) { |
||||
console.error(error); |
||||
} |
||||
}, |
||||
lxdowBtn(row){ |
||||
this.$confirm('删除后将不可恢复，确认删除？', '提示', { |
||||
type: 'warning', |
||||
center: true |
||||
}).then(()=>{ |
||||
let data = { |
||||
id: row.id, |
||||
} |
||||
api.deleteFileTypeApi(data).then(res=>{ |
||||
if(res.data.code === '0000'){ |
||||
this.$message.success('删除成功') |
||||
this.getfindEum() |
||||
}else{ |
||||
this.$message.error(res.data.message) |
||||
} |
||||
}) |
||||
}) |
||||
}, |
||||
lxBtn(row,index){ |
||||
this.$nextTick((item)=>{ |
||||
this.insertFileTypeList[index].inpuShow = true; |
||||
}) |
||||
}, |
||||
lxSaveBtn(row,index){ |
||||
if(!row.fileName){ |
||||
this.$message.error('请输入文件类型名称') |
||||
return |
||||
} |
||||
let data = { |
||||
id: row.id, |
||||
fileTypeName: row.fileName |
||||
} |
||||
api.updateFileTypeApi(data).then(res=>{ |
||||
if(res.data.code === '0000'){ |
||||
this.$message.success('修改成功') |
||||
this.getfindEum() |
||||
}else{ |
||||
this.$message.error(res.data.message) |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
fileConfigBtn(){ |
||||
this.pzshowModal = true; |
||||
}, |
||||
addFileTypeBtn(){ |
||||
this.showModal = true |
||||
this.importFile.fileTypeName = void 0; |
||||
this.$refs.fileTypeRef.resetFields(); |
||||
}, |
||||
verifyBtn(){ |
||||
this.$refs.fileTypeRef.validate((valid) => { |
||||
if (valid) { |
||||
api.insertFileTypeApi({fileTypeName: this.importFile.fileTypeName}).then((res)=>{ |
||||
if(res.data.code == '0000'){ |
||||
this.$message.success('添加成功') |
||||
this.showModal = false |
||||
this.getfindEum() |
||||
this.findAll(1) |
||||
}else{ |
||||
this.$message.error(res.data.message) |
||||
} |
||||
}) |
||||
} else { |
||||
console.log('error submit!!'); |
||||
return false; |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
/*分页*/ |
||||
handleSizeChange(val) { |
||||
console.log(`每页 ${val} 条`); |
||||
this.pageRow = val; |
||||
this.findAll(1) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
console.log(`当前页: ${val}`); |
||||
this.findAll(val) |
||||
}, |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.rulesView { |
||||
padding: 20px; |
||||
} |
||||
|
||||
.fakeCircle { |
||||
display: inline-block; |
||||
width: 8px; |
||||
height: 8px; |
||||
border-radius: 50%; |
||||
vertical-align: middle; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.rules_footer { |
||||
// position: fixed; |
||||
// bottom: 40px; |
||||
// right: 20px; |
||||
margin-top: 20px; |
||||
text-align: right; |
||||
} |
||||
|
||||
/deep/ .el-input--suffix .el-input__inner { |
||||
padding-right: 30px; |
||||
height: auto; |
||||
} |
||||
|
||||
.tableSection { |
||||
/*position: absolute;*/ |
||||
width: 100%; |
||||
margin: 0 auto; |
||||
// height: 750px; |
||||
/*top: 80px;*/ |
||||
/*bottom: 100px;*/ |
||||
} |
||||
|
||||
.addLabel { |
||||
line-height: 40px; |
||||
font-size: 18px; |
||||
font-weight: 400; |
||||
display: inline-block; |
||||
width: 5.5em; |
||||
float: left; |
||||
} |
||||
.rules_form /deep/ .el-input .el-input__inner { |
||||
width: 200px; |
||||
height: 36px; |
||||
} |
||||
.fakeLine { |
||||
width: 100%; |
||||
border-top: 1px solid #dedede; |
||||
} |
||||
|
||||
/deep/ .el-dialog__body { |
||||
padding: 0; |
||||
} |
||||
|
||||
/deep/ .el-table__empty-block { |
||||
min-height: 60px; |
||||
text-align: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
display: -webkit-box; |
||||
display: -ms-flexbox; |
||||
display: flex !important; |
||||
-webkit-box-pack: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
-webkit-box-align: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
} |
||||
.uploadFile { |
||||
position: relative; |
||||
font-size: 14px; |
||||
margin: 0px 10px; |
||||
width: 144px !important; |
||||
height: 36px; |
||||
text-align: center; |
||||
line-height: 36px; |
||||
overflow: hidden; |
||||
padding: 0 !important; |
||||
box-sizing: border-box; |
||||
|
||||
.imgUpload { |
||||
width: 15px; |
||||
height: 15px; |
||||
margin: 10px -5px 0px 15px; |
||||
float: left |
||||
} |
||||
|
||||
} |
||||
.addFile { |
||||
height: 0; |
||||
width: 0; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
border: 1px solid #1169ee; |
||||
opacity: 0; |
||||
cursor: pointer; |
||||
-moz-user-select: none; /*火狐*/ |
||||
-webkit-user-select: none; /*webkit浏览器*/ |
||||
-ms-user-select: none; /*IE10*/ |
||||
-khtml-user-select: none; /*早期浏览器*/ |
||||
user-select: none; |
||||
display: none; |
||||
} |
||||
table { |
||||
width: 190mm; /* 表格宽度 */ |
||||
height: 277mm; /* 表格高度 */ |
||||
font-size: 12px; /* 字体大小 */ |
||||
line-height: 1.5; /* 行高 */ |
||||
border-collapse: collapse; |
||||
page-break-inside: avoid; /* 避免表格内部分页 */ |
||||
} |
||||
|
||||
th, td { |
||||
border: 1px solid #ddd; |
||||
padding: 8px; |
||||
text-align: left; |
||||
} |
||||
|
||||
th { |
||||
background-color: #f2f2f2; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
tr:nth-child(even) { |
||||
background-color: #f2f2f2; |
||||
} |
||||
|
||||
tr:hover { |
||||
background-color: #ddd; |
||||
} |
||||
//@page{ |
||||
// size: auto A4 landscape; |
||||
// margin: 5m; |
||||
//} |
||||
</style> |
||||
<style lang="scss"> |
||||
#blackList { |
||||
padding: 20px; |
||||
.el-button--medium { |
||||
padding: 10px; |
||||
} |
||||
} |
||||
.rules_add{ |
||||
//position: relative; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
//justify-content: flex-end; |
||||
.rules_add-txt{ |
||||
line-height: 40px; |
||||
//position: absolute; |
||||
//top: 20px; |
||||
} |
||||
.rules_add-btn{ |
||||
margin: 10px 0; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
//left: 0; |
||||
} |
||||
} |
||||
.importFileForm{ |
||||
margin-left: 30px; |
||||
margin-top: 20px; |
||||
} |
||||
.fileTypeSavecss{ |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
margin-bottom: 20px; |
||||
margin-top: 10px; |
||||
margin-right: 25px; |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue