<template>
|
<div class="container">
|
<div class="searchBox">
|
<div>时间:</div>
|
<el-date-picker
|
v-model="timePicker"
|
class="margOut"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
/>
|
<div>
|
<el-button
|
type="primary"
|
@click="handleSearch"
|
>
|
查询
|
</el-button>
|
<el-button
|
type="primary"
|
@click="()=>isVisible = true"
|
>
|
生成报告
|
</el-button>
|
</div>
|
</div>
|
<div>
|
<el-row :gutter="24">
|
<el-col :span="10">
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
@row-click="rowClick"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
align="center"
|
width="100"
|
/>
|
<el-table-column
|
prop="reportTime"
|
align="center"
|
label="时间"
|
width="180"
|
/>
|
<el-table-column
|
prop="reportContent"
|
align="center"
|
label="内容"
|
>
|
<template slot-scope="scope">
|
<div
|
style="
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
"
|
v-html="scope.row.reportContent"
|
/>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
<el-col
|
:span="14"
|
style="position: relative;"
|
>
|
<el-input
|
id="myText"
|
v-model="reportContent"
|
readonly
|
class="wordContent"
|
type="textarea"
|
resize="none"
|
/>
|
|
<div
|
v-if="filesList.length > 0"
|
class="fileBox"
|
>
|
<el-row
|
type="flex"
|
align="middle"
|
>
|
<el-col :span="18">
|
<div
|
v-for="item in filesList"
|
:key="item.fileId"
|
>
|
<el-button
|
type="text"
|
@click="handleExport(item)"
|
>
|
{{ item.fileName }}
|
</el-button>
|
</div>
|
</el-col>
|
<el-col
|
:span="6"
|
style="text-align: center;"
|
>
|
<div>
|
<el-button
|
type="text"
|
@click="copyText"
|
>
|
复制
|
</el-button>
|
</div>
|
<el-button
|
type="text"
|
@click="()=>resetFileVisible = true"
|
>
|
重新上传
|
</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="pagina">
|
<el-pagination
|
background
|
:current-page="pagination.currentPage"
|
:page-sizes="pagination.pageSizes"
|
:page-size="pagination.pageSize"
|
:total="pagination.totalCount"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<diaLog
|
v-if="isVisible"
|
:dialog-visible.sync="isVisible"
|
:title="`报告生成`"
|
:width="`500px`"
|
@dialogSubmit="dialogSubmit"
|
>
|
<template #body>
|
<div>
|
<el-form
|
label-width="80px"
|
:model="formInline"
|
>
|
<div style="width: 400px">
|
<el-form-item label="日期:">
|
<el-date-picker
|
v-model="formInline.time"
|
style="width: 100%"
|
type="date"
|
placeholder="选择日期"
|
/>
|
</el-form-item>
|
<el-form-item label="字典:">
|
<el-input
|
v-model="formInline.code"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
<p style="text-align: center;color: red">
|
提示：生成时间较长，请耐心等待!
|
</p>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
</diaLog>
|
<diaLog
|
v-if="resetFileVisible"
|
:dialog-visible.sync="resetFileVisible"
|
:title="`重新上传`"
|
:width="`500px`"
|
@dialogSubmit="handleResetFile"
|
>
|
<template #body>
|
<div>
|
<div
|
v-for="(item,index) in filesList"
|
:key="item.fileId"
|
class="resetFileBox"
|
>
|
<span>
|
{{ item.fileName }}
|
</span>
|
<el-upload
|
class="upload-demo"
|
:action="uploadUrl"
|
accept=".xls,.xlsx"
|
:show-file-list="false"
|
:data="{sysCode}"
|
:on-success="handleUploadSuccess"
|
:headers="{ token: token }"
|
>
|
<el-button
|
type="text"
|
@click="updataFileid(index)"
|
>
|
点击上传
|
</el-button>
|
</el-upload>
|
</div>
|
</div>
|
</template>
|
</diaLog>
|
</div>
|
</template>
|
|
<script>
|
import _ from 'lodash'
|
import requestObj from '@/utils/request'
|
import { getToken } from '@/utils/auth'
|
import diaLog from '@/components/formTypeComponets/dialog/index.vue'
|
import dayjs from 'dayjs'
|
export default {
|
components: {
|
diaLog
|
},
|
data () {
|
return {
|
upFileList: [],
|
sysCode: '1250301',
|
token: getToken(),
|
isVisible: false,
|
resetFileVisible: false,
|
filesList: [],
|
reportContent: '',
|
formInline: {
|
code: '',
|
time: new Date()
|
},
|
pagination: {
|
currentPage: 1,
|
// 总条数，根据接口获取数据长度(注意：这里不能为空)
|
totalCount: 0,
|
// 个数选择器（可修改）
|
pageSizes: [10, 30, 60, 100],
|
// 默认每页显示的条数（可修改）
|
pageSize: 10
|
},
|
timePicker: [],
|
tableData: [],
|
clickId: '',
|
selectFileIndex: null
|
}
|
},
|
computed: {
|
uploadUrl () {
|
return `${requestObj.baseUrl}/file/upload`
|
},
|
exportUrl () {
|
return `${requestObj.baseUrl}/file/preview/`
|
}
|
},
|
watch: {
|
resetFileVisible (newValue, oldValue) {
|
if (newValue) { this.upFileList = _.cloneDeep(this.filesList) }
|
}
|
},
|
created () {
|
this.handleSearch()
|
},
|
methods: {
|
handleExport (item) {
|
this.$request({
|
url: `file/preview/${item.fileId}`,
|
method: 'get',
|
responseType: 'blob',
|
}).then(res => {
|
this.getOutExcel(`${item.fileName}.xlsx`, res)
|
})
|
},
|
getOutExcel (fileName, res) {
|
const blob = new Blob([res], { type: 'application/x-xls' })
|
if (window.navigator.msSaveOrOpenBlob) {
|
// 兼容 IE & EDGE
|
navigator.msSaveBlob(blob, fileName)
|
} else {
|
var link = document.createElement('a')
|
// 兼容不同浏览器的URL对象
|
const url = window.URL || window.webkitURL || window.moxURL
|
// 创建下载链接
|
link.href = url.createObjectURL(blob)
|
// 命名下载名称
|
link.download = fileName
|
// 点击触发下载
|
link.click()
|
// 下载完成进行释放
|
url.revokeObjectURL(link.href)
|
}
|
},
|
updataFileid (index) {
|
this.selectFileIndex = index
|
},
|
// 图片上传成功
|
handleUploadSuccess (response, file, fileList) {
|
this.upFileList[this.selectFileIndex] = response.data
|
console.log('this.upFileList', this.upFileList)
|
},
|
handleResetFile (item) {
|
this.$request({
|
url: '/cityReptiles/fileUpload',
|
method: 'post',
|
data: {
|
list: this.upFileList,
|
id: this.clickId
|
}
|
}).then((res) => {
|
this.$message({
|
message: '上传成功',
|
type: 'success'
|
})
|
})
|
.catch(err => {
|
console.log(err)
|
this.$message.error('操作失败')
|
})
|
},
|
copyText () {
|
const textToCopy = document.getElementById('myText').value
|
this.copyToClipboard(textToCopy)
|
},
|
async copyToClipboard (text) {
|
try {
|
await navigator.clipboard.writeText(text)
|
this.$message({
|
message: '内容已成功复制到剪贴板',
|
type: 'success'
|
})
|
} catch (err) {
|
console.error('复制失败:', err)
|
}
|
},
|
rowClick (val) {
|
this.reportContent = val.reportContent
|
this.filesList = val.list
|
this.clickId = val.id
|
},
|
dialogSubmit () {
|
const loading = this.$loading({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
this.$request({
|
url: '/cityReptiles/report',
|
method: 'get',
|
params: {
|
code: this.formInline.code,
|
time: dayjs(this.formInline.time).format('YYYY-MM-DD')
|
}
|
}).then((res) => {
|
console.log('res', res)
|
this.handleSearch()
|
loading.close()
|
})
|
.catch(err => {
|
loading.close()
|
console.log(err)
|
this.$message.error('操作失败')
|
})
|
},
|
handleSearch () {
|
this.$request({
|
url: '/cityReptiles/page',
|
method: 'post',
|
data: {
|
'page': this.pagination,
|
startTime: this.timePicker && this.timePicker.length > 0 ? dayjs(this.timePicker[0]).format('YYYY-MM-DD') : '',
|
endTime: this.timePicker && this.timePicker.length > 0 ? dayjs(this.timePicker[1]).format('YYYY-MM-DD') : ''
|
}
|
}).then((res) => {
|
this.tableData = res.data.list
|
this.pagination.totalCount = res.data.page.totalNum
|
this.reportContent = res.data.list.length > 0 ? res.data.list[0].reportContent : ''
|
this.filesList = res.data.list.length > 0 ? res.data.list[0].list : ''
|
this.clickId = res.data.list.length > 0 ? res.data.list[0].id : ''
|
})
|
.catch(err => {
|
console.log(err)
|
this.$message.error('操作失败')
|
})
|
},
|
// 分页
|
// 每页显示的条数
|
handleSizeChange (val) {
|
// 改变每页显示的条数
|
this.pagination.pageSize = val
|
// 注意：在改变每页显示的条数时，要将页码显示到第一页
|
this.pagination.currentPage = 1
|
this.handleSearch()
|
},
|
// 显示第几页
|
handleCurrentChange (val) {
|
// 改变默认的页数
|
this.pagination.currentPage = val
|
this.handleSearch()
|
// console.log(val)
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container{
|
overflow-y:auto;
|
overflow-x:hidden;
|
height: 100%;
|
padding: 10px;
|
.searchBox{
|
display: flex;
|
// font-size: 18px;
|
align-items: center;
|
.margOut{
|
margin: 0 10px;
|
}
|
margin-bottom: 20px;
|
}
|
}
|
/deep/.wordContent{
|
.el-textarea__inner{
|
font-size: 14px;
|
height: 600px;
|
}
|
}
|
.fileBox{
|
width: 100%;
|
position: absolute;
|
}
|
.copy{
|
padding: 0;
|
margin-right: 20px;
|
text-align: right;
|
}
|
.resetFileBox{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10px;
|
}
|
</style>
|
