<template>
|
<div class="tokentool_box">
|
<My-bread
|
:list="[
|
`${$t('operatManage.operatManage')}`,
|
`${$t('operatManage.tokentool')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<div class="inquire">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane
|
:label="$t('operatManage.tokentoolObj.first')"
|
name="first"
|
>
|
<div class="herder_box">
|
{{ $t("operatManage.operationLogObj.queryRegion") }}
|
</div>
|
<el-form ref="formData1" :model="serviceform" :inline="true">
|
<el-form-item
|
:label="$t('operatManage.tokentoolObj.serviceid')"
|
prop="name"
|
>
|
<el-input
|
style="width: 200px"
|
v-model="serviceform.serviceId"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label="$t('operatManage.tokentoolObj.serviceName')"
|
prop="region"
|
>
|
<el-input
|
style="width: 200px"
|
v-model="serviceform.serviceId"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" @click="onSubmit">{{
|
$t("operatManage.tokentoolObj.excelTemplate")
|
}}</el-button>
|
<el-button size="small" @click="onSubmit">{{
|
$t("operatManage.tokentoolObj.uploadExcel")
|
}}</el-button>
|
</el-form-item>
|
<br />
|
<el-form-item
|
:label="$t('operatManage.tokentoolObj.serviceToken')"
|
prop="region"
|
>
|
<el-input
|
style="width: 200px"
|
v-model="serviceform.serviceToken"
|
:disabled="true"
|
:title="$t('operatManage.tokentoolObj.pleaseInput')"
|
:placeholder="$t('operatManage.tokentoolObj.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
icon="el-icon-document-copy"
|
size="small"
|
@click="oncopy"
|
>{{ $t("operatManage.tokentoolObj.copy") }}</el-button
|
>
|
</el-form-item>
|
<!-- 查询 清空 -->
|
<el-form-item>
|
<el-button icon="el-icon-search" @click="onSubmit">{{
|
$t("common.iquery")
|
}}</el-button>
|
<el-button icon="el-icon-delete" @click="onEmpty('formData1')">{{
|
$t("common.empty")
|
}}</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table :data="tableData" stripe style="width: 100%">
|
<el-table-column
|
width="120"
|
type="index"
|
:label="$t('operatManage.tokentoolObj.serialnumber')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.serviceName')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.serviceAddress')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.porstServiceAddress')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.serviceid')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.sourcesystem')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.pubicnot')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.suffixID')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.goonlinenot')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.primaryKey')"
|
/>
|
<el-table-column
|
fixed="right"
|
:label="$t('operatManage.tokentoolObj.operation')"
|
width="300"
|
>
|
<template #default>
|
<!-- <el-button type="primary" size="small">修改</el-button> -->
|
|
<el-button type="danger" size="small">{{
|
$t("common.delete")
|
}}</el-button>
|
<el-button type="warning" size="small">{{
|
$t("common.update")
|
}}</el-button>
|
<el-button type="primary" size="small">{{
|
$t("operatManage.tokentoolObj.applyToken")
|
}}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane
|
:label="$t('operatManage.tokentoolObj.second')"
|
name="second"
|
>
|
<div class="herder_box">
|
{{ $t("operatManage.operationLogObj.queryRegion") }}
|
</div>
|
|
<el-form ref="formData1" :model="tokenform" :inline="true">
|
<el-form-item
|
:label="$t('operatManage.tokentoolObj.serviceid')"
|
prop="name"
|
>
|
<el-input
|
style="width: 200px"
|
v-model="tokenform.tokenId"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label="$t('operatManage.tokentoolObj.tokenName')"
|
prop="region"
|
>
|
<el-input
|
style="width: 200px"
|
v-model="tokenform.tokenName"
|
:placeholder="$t('common.pleaseInput')"
|
/>
|
</el-form-item>
|
|
<el-form-item
|
:label="$t('operatManage.tokentoolObj.tokenStatus')"
|
prop="region"
|
>
|
<el-select
|
v-model="tokenform.region"
|
:placeholder="$t('common.choose')"
|
>
|
<el-option
|
:label="$t('operatManage.tokentoolObj.tokenAll')"
|
value="1"
|
/>
|
<el-option
|
:label="$t('operatManage.tokentoolObj.tokeNormal')"
|
value="2"
|
/>
|
<el-option
|
:label="$t('operatManage.tokentoolObj.tokenInvalid')"
|
value="3"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<!-- 查询 清空 -->
|
<el-form-item>
|
<el-button icon="el-icon-search" @click="onSubmit">{{
|
$t("common.iquery")
|
}}</el-button>
|
<el-button icon="el-icon-delete" @click="onEmpty('formData1')">{{
|
$t("common.empty")
|
}}</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table :data="tableData1" stripe style="width: 100%">
|
<el-table-column
|
width="120"
|
type="index"
|
:label="$t('operatManage.tokentoolObj.serialnumber')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.serviceName')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.applysystem')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.applicantIP')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.applicationtime')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.applytime')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.tokenstring')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.resourcetoken')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.tokeninformation')"
|
/>
|
<el-table-column
|
prop="creationtime"
|
:label="$t('operatManage.tokentoolObj.tokenStatus')"
|
/>
|
<el-table-column
|
fixed="right"
|
:label="$t('operatManage.tokentoolObj.autorenew')"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
:label="$t('operatManage.tokentoolObj.operation')"
|
width="200"
|
>
|
<template #default>
|
<el-button type="danger" size="small">{{
|
$t("operatManage.tokentoolObj.tokenInvalid")
|
}}</el-button>
|
<el-button type="warning" size="small">{{
|
$t("operatManage.tokentoolObj.tokenRenewal")
|
}}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
<div style="margin-top: 40px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="9"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
|
data() {
|
return {
|
currentPage4: 1,
|
activeName: 'first',
|
serviceform: {
|
serviceId: "",
|
serviceName: "",
|
serviceToken: "",
|
},
|
tokenform: {
|
tokenId: "",
|
tokenName: "",
|
tokenStatus: ""
|
},
|
tableData: [{}],
|
tableData1: [{}]
|
};
|
},
|
methods: {
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
onSubmit() {
|
console.log("submit!");
|
},
|
onEmpty(formData1) {
|
this.$refs[formData1].resetFields()//重置表单数据
|
}
|
},
|
created() { },
|
};
|
</script>
|
<style scoped>
|
/deep/ .el-table__fixed-right {
|
height: 100% !important;
|
}
|
</style>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
|
.tokentool_box {
|
background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.inquire {
|
padding: 10px;
|
margin-top: 20px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
margin-bottom: 20px;
|
.herder_box {
|
padding: 10px;
|
border-bottom: 1px solid #ccc;
|
margin-bottom: 20px;
|
font-size: 14px;
|
}
|
}
|
}
|
</style>
|
