<template>
|
<el-main>
|
<el-row>
|
<el-col :span="24">
|
<el-form :inline="true" class="el-InputForm">
|
<!-- <el-form-item :label="$t('log.accessMethod')">
|
<el-select v-model="searchForm.type" :placeholder="$t('common.placeholderSelect')" clearable>
|
<el-option :label="$t('voucher.password')" value="400"></el-option>
|
<el-option :label="$t('voucher.card')" value="200"></el-option>
|
<el-option :label="$t('voucher.face')" value="300"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="通行结果">
|
<el-select v-model="searchItem.result" placeholder="请选择通行结果" clearable>
|
<el-option label="成功" value="1"></el-option>
|
<el-option label="失败" value="0"></el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item :label="$t('person.name')" label-width="80px">
|
<el-input v-model="searchForm.name" :placeholder="$t('person.placeholderName')" clearable></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('log.passingTime')" label-width="100px">
|
<el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :range-separator="$t('common.to')"
|
:start-placeholder="$t('common.startTime')" :end-placeholder="$t('common.endTime')">
|
</el-date-picker>
|
</el-form-item>
|
<div style="position: absolute; right: 25px; bottom: 25px;">
|
<el-button type="info" size="medium" icon="el-icon-search" @click="search()"
|
style="margin-left:10px;border:none;">{{ $t('common.query') }}</el-button>
|
<el-button type="warning" size="medium" icon="el-icon-refresh-right" @click="doReset()">{{
|
$t('common.reset')
|
}}</el-button>
|
</div>
|
</el-form>
|
<el-col :span="24" style="margin:20px 0">
|
<el-button type="danger" size="mini" style="font-size:12px;" icon="el-icon-delete" @click="batchDelete()">{{
|
$t('common.batchDelete') }}</el-button>
|
</el-col>
|
</el-col>
|
</el-row>
|
|
<el-col :span="24">
|
<Table :table-label="tableHeader" v-loading="isSubmitLoading" :table-data="tableData" :table-option="tableOption"
|
:table-selection="tableSelection" @onHandleSelectionChange="handleSelectionChange"></Table>
|
<pagination ref="page" :total="total" @pageChange="pageChange"></pagination>
|
|
</el-col>
|
|
<!-- 通行图片预览 -->
|
<el-dialog :visible.sync="dialogTableVisible" width="30%">
|
<div class="imgDiv"><img :src="urlImg" alt=""></div>
|
</el-dialog>
|
</el-main>
|
</template>
|
|
<script>
|
import Pagination from "@/components/table/pagination.vue"
|
import Table from "@/components/table/tableList.vue"
|
import { removeEmptyValues, resetObjectValues, parseTime } from '@/utils/index.js'
|
export default {
|
name: 'Record',
|
components: { Table, Pagination },
|
data () {
|
return {
|
tableHeader: [
|
{ label: this.$t('person.userId'), list: "userId", overflowShow: 'hidden' },
|
{
|
type: "html",
|
label: this.$t('person.name'),
|
code: (row) => {
|
return row.name ? row.name : '-'
|
}
|
},
|
{
|
label: this.$t('log.passingTime'),
|
type: "html",
|
overflowShow: 'hidden',
|
code: (row) => {
|
return parseTime(row.timeStamp * 1000)
|
}
|
},
|
{
|
type: "html",
|
label: this.$t('log.accessMethod'),
|
code: (row) => {
|
if (row.type == 200) {
|
return this.$t('voucher.card')
|
} else if (row.type == 300) {
|
return this.$t('voucher.face')
|
} else if (row.type == 400) {
|
return this.$t('voucher.password')
|
} else if (row.type == 500) {
|
return this.$t('voucher.finger')
|
} else if (row.type == 100 || row.type == 101 || row.type == 103 || row.type == 104) {
|
return this.$t('voucher.code')
|
}
|
}
|
},
|
{
|
type: "html",
|
label: this.$t('log.accessPass'),
|
overflowShow: 'hidden',
|
code: (row) => {
|
return row.type == 300 ? '-' : row.code
|
}
|
},
|
{
|
type: "html",
|
label: this.$t('log.accessResult'),
|
code: (row) => {
|
if (row.result === 1) {
|
return `<span style="color:#ff5722;font-weight:600">${this.$t('common.failure')}</span>`
|
} else if (row.result === 0) {
|
return `<span style="color:#1fab89;font-weight:600">${this.$t('common.success')}</span>`
|
}
|
}
|
},
|
],
|
tableSelection: {
|
key: true,
|
type: "selection",
|
detaile: false,
|
},
|
tableOption: {
|
label: this.$t('common.operation'),
|
width: "180px",
|
value: 0,
|
options: [
|
{
|
label: this.$t('common.delete'),
|
key: 0,
|
type: "text",
|
State: true,
|
method: (row) => {
|
this.handleDelete(row.id)
|
},
|
},
|
{
|
label: this.$t('log.viewPhotos'),
|
key: 0,
|
type: "text",
|
State: true,
|
show: (row) => {
|
return row.type == 300
|
},
|
method: (row) => {
|
this.getPhoto(row.code)
|
},
|
},
|
]
|
},
|
tableData: [],
|
isSubmitLoading: false,
|
dialogTableVisible: false,
|
urlImg: "",
|
total: 0,
|
pageSize: 20,
|
currentPage: 0,
|
searchForm: {
|
name: ''
|
},
|
time: [],
|
selectIdList: [],
|
};
|
},
|
created () {
|
this.fetchData()
|
},
|
mounted () { },
|
methods: {
|
|
search () {
|
let that = this
|
that.currentPage = 0;
|
that.$refs.page.Page(1);
|
that.fetchData();
|
},
|
|
pageChange (item) {
|
this.pageSize = item.limit;
|
this.currentPage = item.page - 1;
|
this.fetchData();
|
},
|
|
handleSelectionChange (vals) {
|
this.selectIdList = [];
|
vals.map(v => {
|
this.selectIdList.push(v.id);
|
});
|
},
|
|
// 获取通行记录
|
async fetchData () {
|
let searchForm = removeEmptyValues({ ...this.searchForm })
|
if (this.time.length) {
|
searchForm.startTime = new Date(this.time[0]).getTime() / 1000
|
searchForm.endTime = new Date(this.time[1]).getTime() / 1000
|
}
|
searchForm.page = this.currentPage
|
searchForm.size = this.pageSize
|
searchForm.flag = false
|
try {
|
const res = await this.$http.post('/getRecord', { data: searchForm })
|
if (res.code === 200) {
|
this.tableData = res.data.content
|
this.total = res.data.total
|
} else {
|
this.$message.error(res.message)
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
},
|
|
handleDelete (id) {
|
let that = this
|
this.$confirm(
|
this.$t('common.deleteTips'),
|
this.$t('common.tips'),
|
{
|
confirmButtonText: this.$t('common.confirm'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
}
|
).then(async () => {
|
try {
|
const res = await that.$http.post("delRecord", { data: { recordId: [id] } })
|
if (res.code == 200) {
|
that.$message.success(this.$t('common.deleteSuccess'))
|
that.fetchData()
|
} else {
|
that.$message.error(res.message)
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
}).catch(() => { })
|
},
|
|
batchDelete () {
|
let that = this
|
if (this.selectIdList.length <= 0) {
|
this.$message.warning(this.$t('common.placeholderSelect'));
|
return;
|
}
|
this.$confirm(this.$t('common.deleteTips'),
|
this.$t('common.tips'),
|
{
|
confirmButtonText: this.$t('common.confirm'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
})
|
.then(async () => {
|
that.isSubmitLoading = true;
|
const res = await this.$http.post("delRecord", { data: { recordId: this.selectIdList }});
|
that.isSubmitLoading = false;
|
if (res.code == 200) {
|
that.$message.success(this.$t('common.deleteSuccess'))
|
that.fetchData()
|
} else {
|
that.$message.error(res.message)
|
}
|
})
|
.catch(() => {
|
return false;
|
});
|
},
|
|
doReset () {
|
resetObjectValues(this.searchForm)
|
this.time = []
|
this.fetchData()
|
},
|
|
async getPhoto (code) {
|
try {
|
const res = await this.$http.post('/getRecordMsg', { data: code })
|
if (res.code == 200) {
|
console.log(res);
|
this.urlImg = 'data:image/png;base64,' + res.data
|
this.dialogTableVisible = true
|
} else {
|
this.$message.error(res.message)
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
},
|
|
// 图片查看
|
handleCellClick (e, column) {
|
if (JSON.parse(e.extra).pic && column.label === "通行照片") {
|
this.dialogTableVisible = true
|
let imgUrl = JSON.parse(e.extra).pic
|
this.urlImg = imgUrl.split('&imageView')[0]
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.el-main {
|
.imgDiv {
|
width: 100%;
|
text-align: center;
|
|
img {
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
