<template>
|
<el-main>
|
<el-row>
|
<el-col :span="24">
|
<el-form :inline="true" class="el-InputForm">
|
<el-form-item :label="$t('security.keyId')" label-width="80px">
|
<el-input v-model="searchForm.securityId" :placeholder="$t('common.placeholder')" clearable></el-input>
|
</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="primary" style="border:none;" size='mini' icon="el-icon-plus" @click="doAdd">{{
|
$t('security.newKey') }}</el-button>
|
<el-button type="danger" size="mini" style="font-size:12px;" icon="el-icon-delete" @click="batchDelete()">{{
|
$t('security.clearKey') }}</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>
|
<pagination ref="page" :total="total" @pageChange="pageChange"></pagination>
|
</el-col>
|
|
<add ref="add" @operation-success="fetchData"></add>
|
</el-main>
|
</template>
|
|
<script>
|
import Pagination from "@/components/table/pagination.vue"
|
import Table from "@/components/table/tableList.vue"
|
import Add from "./add.vue"
|
import { removeEmptyValues, resetObjectValues, parseTime } from '@/utils/index.js'
|
export default {
|
name: 'Record',
|
components: { Table, Pagination, Add },
|
data () {
|
return {
|
tableHeader: [
|
{ label: this.$t('security.keyId'), list: "securityId", overflowShow: 'hidden' },
|
{ label: this.$t('security.keyType'), list: "type", overflowShow: 'hidden' },
|
{ label: this.$t('security.keyEncoding'), list: "key", overflowShow: 'hidden' },
|
{ label: this.$t('security.keyValue'), list: "value", overflowShow: 'hidden' },
|
{
|
label: this.$t('security.startTime'),
|
type: "html",
|
overflowShow: 'hidden',
|
code: (row) => {
|
return parseTime(row.startTime * 1000)
|
}
|
},
|
{
|
label: this.$t('security.expirationTime'),
|
type: "html",
|
overflowShow: 'hidden',
|
code: (row) => {
|
return parseTime(row.endTime * 1000)
|
}
|
}
|
],
|
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.securityId)
|
},
|
},
|
{
|
label: this.$t('common.detail'),
|
key: 0,
|
type: "text",
|
State: true,
|
method: (row) => {
|
this.$refs.add.open("detail", { ...row })
|
},
|
},
|
]
|
},
|
tableData: [],
|
isSubmitLoading: false,
|
total: 0,
|
pageSize: 20,
|
currentPage: 0,
|
searchForm: {
|
securityId: ''
|
},
|
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();
|
},
|
|
// 获取密钥
|
async fetchData () {
|
let searchForm = removeEmptyValues({ ...this.searchForm })
|
searchForm.page = this.currentPage
|
searchForm.size = this.pageSize
|
try {
|
const res = await this.$http.post('/getSecurity', { 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)
|
}
|
},
|
|
doAdd () {
|
this.$refs.add.open('add')
|
},
|
|
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("/delSecurity", { data: [id] })
|
if (res.code == 200) {
|
that.$message.success(this.$t('common.deleteSuccess'))
|
that.fetchData()
|
} else {
|
if (res.data && res.data[0]) {
|
that.$message.error(res.data[0].errmsg)
|
}
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
}).catch(() => { })
|
},
|
|
batchDelete () {
|
let that = this
|
this.$confirm(this.$t('common.clearTips'),
|
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("/clearSecurity", { data: {} });
|
that.isSubmitLoading = false;
|
if (res.code == 200) {
|
that.$message.success(this.$t('common.clearSuccess'))
|
that.fetchData()
|
} else {
|
that.$message.error(res.message)
|
}
|
})
|
.catch(() => {
|
return false;
|
});
|
},
|
|
doReset () {
|
resetObjectValues(this.searchForm)
|
this.time = []
|
this.fetchData()
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.el-main {
|
.imgDiv {
|
width: 100%;
|
text-align: center;
|
|
img {
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
