<template>
<app-container>
<canvas id="myCanvas" v-show="isdy" :width="883" :height="590" :style="{backgroundImage:'url('+bgUrl+')'}" class="myCanvas"/>
<search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData(false)" @clear="clearInput">
<!--一般查询条件-->
<search-item>
<el-input v-model.trim="listQuery.listCode" size="small" placeholder="申请单号" @change="fetchData(false)" />
</search-item>
<search-item>
<el-input v-model.trim="listQuery.visitorKeywords" size="small" placeholder="访客姓名/身份证/联系方式" @change="fetchData(false)" />
</search-item>
<search-item>
<el-input v-model.trim="listQuery.staffKeywords" size="small" placeholder="员工姓名/身份证/联系方式" @change="fetchData(false)" />
</search-item>
<search-item>
<el-select v-model="listQuery.applicationType" size="small" style="width: 120px" placeholder="申请类型" clearable @change="fetchData(false)">
<el-option
v-for="item in applicationTypeList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</search-item>
<search-item>
<el-select v-model="listQuery.applicationStatus" size="small" placeholder="申请状态" style="width: 120px" clearable @change="fetchData(false)">
<el-option
v-for="item in applicationStatusList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</search-item>
<search-item>
<el-select v-model="listQuery.visitReason" size="small" style="width: 120px" placeholder="访问目的" clearable @change="fetchData(false)">
<el-option
v-for="item in reasonList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</search-item>
<search-item>
<el-select v-model="listQuery.position" size="small" placeholder="访问区域" clearable @change="fetchData(false)">
<el-option
v-for="item in areaList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</search-item>
<search-item>
<el-date-picker
v-model="timeRange"
type="daterange"
range-separator="至"
value-format="yyyy-MM-dd"
start-placeholder="起始日期"
end-placeholder="终止日期"
size="small"
@change="fetchData(false)"
/>
</search-item>
</search-area>
<normal-table
:data="list"
:head="tableOption.head"
:query="listQuery"
:total="total"
:columns="columns"
:list-loading="listLoading"
:options="tableOption.options"
:tools-option="tableOption.toolsOption"
size="small"
@change="changePage"
@selectionChange="handleSelectionChange"
>
<template slot="btns">
<download-template :filename="filename" />
<el-upload
:limit="1"
:show-file-list="false"
:http-request="uploadFile"
:file-list="fileList"
action="string"
style="float:right; margin:0 3px;"
accept=".xls,.xlsx"
>
<el-button slot="trigger" size="small" icon="el-icon-folder-add">
批量导入
</el-button>
</el-upload>
<el-button size="small" class="edit_btn" icon="el-icon-edit" @click="add()">
添加
</el-button>
<el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()">
删除
</el-button>
<el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
导出
</el-button>
</template>
<template slot="columns">
<el-table-column label="操作" align="center" width="120">
<template slot-scope="scope">
<el-button type="text" size="small" @click.stop="detail(scope.row)">
详情
</el-button>
<el-button type="text" size="small" v-if="scope.row.applicationType === '0'" @click.stop="edit(scope.row)">
编辑
</el-button>
<el-button type="text" size="small" v-else @click.stop="dayin(scope.row)">
打印
</el-button>
<el-button type="text" size="small" @click.stop="del(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</template>
</normal-table>
<edit-application v-show="dialogFormVisible" ref="editApplication" @watchChild="fetchData" @dayin="dayin($event)" />
</app-container>
</template>
<script>
import NormalTable from '@/components/NormalTable'
import AppContainer from '@/components/layout/AppContainer'
import SearchArea from '@/components/SearchArea/SearchArea'
import SearchItem from '@/components/SearchArea/SearchItem'
import { getApplicationListPage, delApplication, batchDelApplication, batchImportApplication } from '@/api/visitor'
import { getDictByCode } from '@/api/system/dict'
import EditApplication from './editApplication'
import DownloadTemplate from '@/components/DownloadTemplate/index'
import { getApplicationExport } from '@/api/visitor';
import html2canvas from 'html2canvas';
import moment from 'moment'
export default {
name: 'ApplicationList',
components: { EditApplication, SearchItem, SearchArea, AppContainer, NormalTable, DownloadTemplate },
data() {
return {
bgUrl: require('../../assets/images/list.png'), // 背景图片
filename: 'VisitorApplyTemp.xlsx',
fileList: [],
isdy: false,
listQuery: {
listCode: '',
applicationType: '',
visitorKeywords: '',
staffKeywords: '',
visitReason: '',
position: '',
applicationStatus: '',
startTime: '',
endTime: '',
offset: 1,
limit: 20
}, // 筛选条件
columns: [
{
text: '申请单号',
value: 'listCode',
align: 'center'
},
{
text: '申请类型',
value: 'applicationTypeName',
align: 'center'
},
{
text: '访客姓名',
value: 'visitorName',
align: 'center',
width: 100
},
{
text: '访客身份证号',
value: 'IDcardm',
align: 'center'
},
{
text: '访客联系方式',
value: 'visitorPhone',
align: 'center'
},
{
text: '访问目的',
value: 'visitReason',
align: 'center',
width: 100
},
{
text: '访问区域',
value: 'visitPositionName',
align: 'center'
},
{
text: '进入时间',
value: 'inTime',
align: 'center'
},
{
text: '离开时间',
value: 'outTime',
align: 'center'
},
{
text: '申请者工号',
value: 'staffCode',
align: 'center'
},
{
text: '申请者姓名',
value: 'staffName',
align: 'center',
width: 100
},
{
text: '申请者联系方式',
value: 'staffPhone',
align: 'center'
},
{
text: '备注',
value: 'remarks',
align: 'center'
},
{
text: '状态',
value: 'statusName',
align: 'center',
width: 80
}
], // 显示列
dialogFormVisible: false, // 是否显示编辑框
timeRange: [], // 时间范围
multipleSelection: [], // 多选选中项
list: [], // 列表数据
reasonList: [],
areaList: [],
applicationStatusList: [],
applicationTypeList: [],
total: 0, // 数据总数
listLoading: true, // 列表加载动画
tableOption: {
head: {
show: true, // 是否需要标题栏，
text: '数据列表' // 标题名称
},
options: {
needIndex: true // 是否需要序号列
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false, // 是否需要刷新按钮
needCheckBox: true
}
} // 表格属性
}
},
watch: {
timeRange(val) {
if (val && val.length > 0) {
this.listQuery.startTime = val[0]
this.listQuery.endTime = val[1]
} else {
this.listQuery.startTime = ''
this.listQuery.endTime = ''
}
}
},
created() {
this.fetchOptions()
this.fetchData()
},
methods: {
exportFile() {
const loading = this.$loading({
lock: true,
text: '数据处理中,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
getApplicationExport(this.listQuery).then(res => {
loading.close() // 关闭加载动画
console.log('download===', res)
const blob = new Blob([res.data])
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接
downloadElement.href = href
downloadElement.download = `申请列表.xlsx` // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放blob对象
}).catch((res) => {
loading.close()
this.$message.error(res.message)
})
},
uploadFile(param) {
// 判断文件大小是否符合要求
const _file = param.file
const isLt5M = _file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('请上传5M以下的excel文件')
return false
}
// 全屏加载动画
const loading = this.$loading({
lock: true,
text: '导入中,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// 发起导入请求
batchImportApplication(_file).then(res => {
loading.close() // 关闭加载动画
if (res.code === 200) {
this.$message.success('导入成功')
this.fetchData(false)
} else {
this.$message.error(res.message)
}
}).catch(() => {
loading.close() // 关闭加载动画
})
this.fileList = []
},
fetchOptions() {
getDictByCode('visitReason').then(response => {
if (response.code === 200) {
this.reasonList = response.data
}
})
getDictByCode('devicePosition').then(response => {
if (response.code === 200) {
this.areaList = response.data
}
})
getDictByCode('applicationType').then(response => {
if (response.code === 200) {
this.applicationTypeList = response.data
}
})
getDictByCode('applicationStatus').then(response => {
if (response.code === 200) {
this.applicationStatusList = response.data
}
})
},
encrypIdCardNo(idCard) {
if (idCard.length > 6) {
return idCard.substr(0, 6) + '********' + idCard.substr(14)
} else if (idCard) {
return idCard
} else {
return ''
}
},
fetchData(isNowPage = true) {
this.listLoading = true
if (!isNowPage) { // 是否显示当前页，否则跳转第一页
this.listQuery.offset = 1
}
getApplicationListPage(this.listQuery).then(response => {
if (response.code === 200) {
this.list = response.data.rows.map(item => {
item.IDcardm = this.encrypIdCardNo(item.idCard)
item.statusName = item.status === '1' ? '通过' : '拒绝'
return item
})
this.total = parseInt(response.data.total)
this.listLoading = false
}
})
// const that = this
// setTimeout(function() {
// that.list = [
// { id: '', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area: '0', areaName: '一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1', remarks: '' },
// { id: '', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area: '0', areaName: '一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1', remarks: '' },
// { id: '', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area: '0', areaName: '一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1', remarks: '' },
// { id: '', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area: '0', areaName: '一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1', remarks: '' },
// { id: '', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area: '0', areaName: '一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1', remarks: '' },
// { id: '', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area: '0', areaName: '一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1', remarks: '' },
// { id: '', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area: '0', areaName: '一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1', remarks: '' }
// ]
// that.list = that.list.map(item => {
// item.IDcardm = that.encrypIdCardNo(item.IDcard)
// item.statusName = item.status === '1' ? '通过' : '拒绝'
// return item
// })
// that.total = 200
// that.listLoading = false
// }, 100)
},
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
changePage(val) {
if (val && val.size) {
this.listQuery.limit = val.size
}
if (val && val.page) {
this.listQuery.offset = val.page
}
this.fetchData()
},
batchDel() {
const ids = this.multipleSelection.map(item => item.id)
if (ids.length === 0) {
this.$message.warning('请至少选择一行')
return
}
this.$confirm(
'确定要删除所选数据吗？',
'确认操作',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
batchDelApplication(ids).then(response => {
if (response.code === 200) {
this.$message.success('删除成功')
this.fetchData()
}
})
})
},
// 打开详情对话框
detail(row) {
this.$refs.editApplication.initDialog('detail', row)
},
// 新增区域
add() {
this.dialogFormVisible = true
this.$refs.editApplication.initDialog('create')
},
// 编辑区域信息
edit(row) {
this.dialogFormVisible = true
this.$refs.editApplication.initDialog('update', row)
},
// 打印
dayin(row) {
this.isdy = true
const ele = document.getElementById('myCanvas')
// eslint-disable-next-line no-self-assign
ele.width = ele.width
const ctx = ele.getContext('2d')
console.log(ctx)
// 添加水印
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.imageSmoothingQuality = 'high'
ctx.font = '17px Microsoft Yahei'
ctx.fillStyle = 'rgb(0,0,0)'
ctx.fillText(row.listCode, 340, 155)
ctx.fillText(row.visitorName, 340, 210)
ctx.fillText(row.visitorPhone, 340, 265)
ctx.fillText(row.staffName, 340, 320)
ctx.fillText(row.staffPhone, 340, 375)
ctx.fillText(row.applicationTypeName, 740, 155)
ctx.fillText(row.IDcard, 740, 210)
ctx.fillText(row.inTime, 740, 265)
ctx.fillText(row.staffCode, 740, 320)
ctx.fillText(row.remarks, 740, 375)
ctx.fillText(moment().format('YYYY-MM-DD HH:mm:ss'), 770, 540)
setTimeout(() => {
html2canvas(ele).then((canvas) => {
const imgUrl = canvas.toDataURL('image/png')
const tempLink = document.createElement('a') // 创建一个a标签
tempLink.style.display = 'none'
tempLink.href = imgUrl
tempLink.setAttribute('download', row.visitorName + '.png') // 给a标签添加下载属性
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink) // 将a标签添加到body当中
tempLink.click() // 启动下载
document.body.removeChild(tempLink) // 下载完毕删除a标签
window.URL.revokeObjectURL(imgUrl)
this.isdy = false
})
}, 1000)
},
del(row) {
this.$confirm(
'确定要删除该条数据吗？',
'确认操作',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delApplication(row.id).then(response => {
if (response.code === 200) {
this.$message.success('删除成功')
this.fetchData()
}
})
})
},
handleSelectionChange(val) {
this.multipleSelection = val
},
clearInput() {
this.listQuery = {
listCode: '',
applicationType: '',
visitorKeywords: '',
staffKeywords: '',
visitReason: '',
position: '',
applicationStatus: '',
startTime: '',
endTime: '',
offset: 1,
limit: 20
}
this.timeRange = []
this.fetchData()
}
}
}
</script>
<style scoped>
.myCanvas{
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
width: 883px;
height: 590px;
position: absolute;
z-index: 9999999;
top: 15%;
left: 25%;
}
</style>
