<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>OCR服务配置</span>
|
</div>
|
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="阿里云OCR配置" name="ali">
|
<el-alert
|
title="阿里云OCR配置说明"
|
type="info"
|
:closable="false"
|
style="margin-bottom: 20px"
|
>
|
<div>
|
配置阿里云OCR服务的AccessKey信息。配置后重启应用生效。<br/>
|
<strong>注意：</strong>请妥善保管AccessKey，避免泄露
|
</div>
|
</el-alert>
|
|
<el-form
|
:model="aliForm"
|
:rules="rules"
|
ref="aliForm"
|
label-width="120px"
|
style="max-width: 600px;"
|
>
|
<el-form-item label="AccessKey ID" prop="accessKeyId">
|
<el-input
|
v-model="aliForm.accessKeyId"
|
placeholder="请输入阿里云AccessKey ID"
|
show-password
|
:disabled="!canEditAli"
|
/>
|
</el-form-item>
|
|
<el-form-item label="AccessKey Secret" prop="accessKeySecret">
|
<el-input
|
v-model="aliForm.accessKeySecret"
|
placeholder="请输入阿里云AccessKey Secret"
|
show-password
|
:disabled="!canEditAli"
|
/>
|
</el-form-item>
|
|
<el-form-item label="OCR服务端点">
|
<el-input
|
v-model="aliOcrEndpoint"
|
:disabled="true"
|
placeholder="阿里云OCR服务端点"
|
/>
|
<div style="margin-top: 5px; color: #909399; font-size: 12px;">
|
默认端点：{{ aliOcrEndpoint }}
|
</div>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
v-if="!canEditAli"
|
type="primary"
|
@click="handleEditAli"
|
>
|
<i class="el-icon-edit"></i> 编辑配置
|
</el-button>
|
<el-button
|
v-if="canEditAli"
|
type="success"
|
@click="handleSaveAli"
|
>
|
<i class="el-icon-check"></i> 保存配置
|
</el-button>
|
<el-button
|
v-if="canEditAli"
|
@click="handleCancelAli"
|
>
|
<i class="el-icon-close"></i> 取消
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
|
<el-tab-pane label="百度OCR配置" name="baidu">
|
<el-alert
|
title="百度OCR配置说明"
|
type="info"
|
:closable="false"
|
style="margin-bottom: 20px"
|
>
|
<div>
|
配置百度AI开放平台OCR服务的AppID、API Key和Secret Key信息。<br/>
|
<strong>注意：</strong>请妥善保管密钥信息，避免泄露
|
</div>
|
</el-alert>
|
|
<el-form
|
:model="baiduForm"
|
:rules="baiduRules"
|
ref="baiduForm"
|
label-width="120px"
|
style="max-width: 600px;"
|
>
|
<el-form-item label="App ID" prop="appId">
|
<el-input
|
v-model="baiduForm.appId"
|
placeholder="请输入百度OCR App ID"
|
:disabled="!canEditBaidu"
|
/>
|
</el-form-item>
|
|
<el-form-item label="API Key" prop="apiKey">
|
<el-input
|
v-model="baiduForm.apiKey"
|
placeholder="请输入百度OCR API Key"
|
show-password
|
:disabled="!canEditBaidu"
|
/>
|
</el-form-item>
|
|
<el-form-item label="Secret Key" prop="secretKey">
|
<el-input
|
v-model="baiduForm.secretKey"
|
placeholder="请输入百度OCR Secret Key"
|
show-password
|
:disabled="!canEditBaidu"
|
/>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
v-if="!canEditBaidu"
|
type="primary"
|
@click="handleEditBaidu"
|
>
|
<i class="el-icon-edit"></i> 编辑配置
|
</el-button>
|
<el-button
|
v-if="canEditBaidu"
|
type="success"
|
@click="handleSaveBaidu"
|
>
|
<i class="el-icon-check"></i> 保存配置
|
</el-button>
|
<el-button
|
v-if="canEditBaidu"
|
@click="handleCancelBaidu"
|
>
|
<i class="el-icon-close"></i> 取消
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "OCRConfig",
|
data() {
|
return {
|
activeTab: 'ali',
|
// 阿里云OCR配置
|
canEditAli: false,
|
aliForm: {
|
accessKeyId: '',
|
accessKeySecret: ''
|
},
|
aliOcrEndpoint: 'ocr-api.cn-hangzhou.aliyuncs.com',
|
// 百度OCR配置
|
canEditBaidu: false,
|
baiduForm: {
|
appId: '',
|
apiKey: '',
|
secretKey: ''
|
},
|
rules: {
|
accessKeyId: [
|
{ required: true, message: '请输入AccessKey ID', trigger: 'blur' },
|
{ min: 10, max: 64, message: '长度在10到64个字符', trigger: 'blur' }
|
],
|
accessKeySecret: [
|
{ required: true, message: '请输入AccessKey Secret', trigger: 'blur' },
|
{ min: 10, max: 64, message: '长度在10到64个字符', trigger: 'blur' }
|
]
|
},
|
baiduRules: {
|
appId: [
|
{ required: true, message: '请输入App ID', trigger: 'blur' },
|
{ min: 5, max: 32, message: '长度在5到32个字符', trigger: 'blur' }
|
],
|
apiKey: [
|
{ required: true, message: '请输入API Key', trigger: 'blur' },
|
{ min: 10, max: 64, message: '长度在10到64个字符', trigger: 'blur' }
|
],
|
secretKey: [
|
{ required: true, message: '请输入Secret Key', trigger: 'blur' },
|
{ min: 10, max: 64, message: '长度在10到64个字符', trigger: 'blur' }
|
]
|
}
|
};
|
},
|
methods: {
|
/** 编辑阿里云OCR配置 */
|
handleEditAli() {
|
this.canEditAli = true;
|
},
|
|
/** 保存阿里云OCR配置 */
|
handleSaveAli() {
|
this.$refs.aliForm.validate(valid => {
|
if (valid) {
|
this.$confirm('保存阿里云OCR配置后需要重启应用才能生效，是否继续？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
// 这里应该调用后端API保存配置
|
this.$modal.msgSuccess('阿里云OCR配置保存成功，请重启应用使配置生效');
|
this.canEditAli = false;
|
});
|
}
|
});
|
},
|
|
/** 取消阿里云OCR编辑 */
|
handleCancelAli() {
|
this.canEditAli = false;
|
// 恢复原始值（这里应该从后端获取）
|
this.aliForm = {
|
accessKeyId: '',
|
accessKeySecret: ''
|
};
|
},
|
|
/** 编辑百度OCR配置 */
|
handleEditBaidu() {
|
this.canEditBaidu = true;
|
},
|
|
/** 保存百度OCR配置 */
|
handleSaveBaidu() {
|
this.$refs.baiduForm.validate(valid => {
|
if (valid) {
|
this.$confirm('保存百度OCR配置后需要重启应用才能生效，是否继续？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
// 这里应该调用后端API保存配置
|
this.$modal.msgSuccess('百度OCR配置保存成功，请重启应用使配置生效');
|
this.canEditBaidu = false;
|
});
|
}
|
});
|
},
|
|
/** 取消百度OCR编辑 */
|
handleCancelBaidu() {
|
this.canEditBaidu = false;
|
// 恢复原始值（这里应该从后端获取）
|
this.baiduForm = {
|
appId: '',
|
apiKey: '',
|
secretKey: ''
|
};
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.box-card {
|
margin-bottom: 20px;
|
}
|
</style>
|
