1
This commit is contained in:
van
444
src/views/jarvis/docSync/components/KdocsCloudConfig.vue
Normal file
444
src/views/jarvis/docSync/components/KdocsCloudConfig.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<div class="kdocs-config">
|
||||
<div class="config-container">
|
||||
<div class="config-left">
|
||||
<el-card class="config-section">
|
||||
<div slot="header" class="section-header">
|
||||
<i class="el-icon-key"></i>
|
||||
<span>授权状态</span>
|
||||
</div>
|
||||
<div class="auth-status">
|
||||
<el-tag v-if="isAuthorized" type="success" size="medium">
|
||||
<i class="el-icon-circle-check"></i> 已授权
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger" size="medium">
|
||||
<i class="el-icon-circle-close"></i> 未授权
|
||||
</el-tag>
|
||||
<el-button
|
||||
v-if="!isAuthorized"
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-unlock"
|
||||
@click="handleAuthorize"
|
||||
style="margin-left: 10px;"
|
||||
>立即授权</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="info"
|
||||
size="small"
|
||||
icon="el-icon-refresh"
|
||||
@click="handleRefreshAuth"
|
||||
style="margin-left: 10px;"
|
||||
>刷新状态</el-button>
|
||||
</div>
|
||||
<div v-if="isAuthorized && tokenInfo" class="token-info" style="margin-top: 15px;">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="用户ID">{{ tokenInfo.userId || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Token状态">
|
||||
<el-tag v-if="tokenInfo.isValid" type="success" size="small">有效</el-tag>
|
||||
<el-tag v-else type="warning" size="small">已过期</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="tokenInfo.expiresIn" label="有效期">
|
||||
{{ Math.floor(tokenInfo.expiresIn / 60) }} 分钟
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="config-section">
|
||||
<div slot="header" class="section-header">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>H-TF订单自动写入配置</span>
|
||||
<el-tag v-if="config.isConfigured" type="success" size="mini" style="margin-left: 10px;">已配置</el-tag>
|
||||
<el-tag v-else type="warning" size="mini" style="margin-left: 10px;">未配置</el-tag>
|
||||
</div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
|
||||
<el-form-item label="file_token" prop="fileId">
|
||||
<el-input
|
||||
v-model="form.fileId"
|
||||
placeholder="个人云文档列表接口返回的 file_token（文档 open_id）"
|
||||
clearable
|
||||
>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
:disabled="!form.fileId || !isAuthorized"
|
||||
@click="handleTestRead"
|
||||
>测试读取</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作表 sheet_idx">
|
||||
<el-input-number v-model="form.sheetIdx" :min="0" controls-position="right" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表头行号" prop="headerRow">
|
||||
<el-input-number v-model="form.headerRow" :min="1" controls-position="right" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="起始行号" prop="startRow">
|
||||
<el-input-number v-model="form.startRow" :min="1" controls-position="right" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="saveLoading" icon="el-icon-check" @click="handleSave">保存配置</el-button>
|
||||
<el-button :loading="testLoading" icon="el-icon-setting" @click="handleTest">测试配置</el-button>
|
||||
<el-button type="danger" plain :loading="clearLoading" icon="el-icon-delete" @click="handleClear">清除配置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="config-right">
|
||||
<el-card class="status-card-wrapper">
|
||||
<div class="status-card" :class="config.isConfigured ? 'success' : 'warning'">
|
||||
<div class="status-icon" :class="config.isConfigured ? 'success' : 'warning'">
|
||||
<i :class="config.isConfigured ? 'el-icon-success' : 'el-icon-warning'"></i>
|
||||
</div>
|
||||
<div class="status-text">
|
||||
<div class="status-title">{{ config.isConfigured ? '配置完成' : '配置未完成' }}</div>
|
||||
<div class="status-desc">
|
||||
{{ config.hint || (config.isConfigured ? 'H-TF订单将写入金山文档在线表格（工作表）' : '请完成配置') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="help-card-wrapper">
|
||||
<div slot="header" class="card-header">
|
||||
<i class="el-icon-question"></i>
|
||||
<span>说明</span>
|
||||
</div>
|
||||
<div class="help-content">
|
||||
<div class="help-item"><i class="el-icon-check"></i><span>file_token 来自「在线表格管理」文件列表或开放平台文档列表</span></div>
|
||||
<div class="help-item"><i class="el-icon-check"></i><span>工作表读写使用 KSheet 单元格接口，sheet_idx 与后台 sheet 一致</span></div>
|
||||
<div class="help-item"><i class="el-icon-check"></i><span>数据表（db）需改用数据表记录类 API，本页为工作表（et）场景</span></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getKdocsAuthUrl,
|
||||
getKdocsTokenStatus,
|
||||
readKdocsCells,
|
||||
updateKdocsCells
|
||||
} from '@/api/jarvis/kdocs'
|
||||
|
||||
const LS_KEY = 'kdocs_auto_write_config'
|
||||
|
||||
export default {
|
||||
name: 'KdocsCloudConfig',
|
||||
data() {
|
||||
return {
|
||||
isAuthorized: false,
|
||||
userId: 'default_user',
|
||||
tokenInfo: null,
|
||||
config: { isConfigured: false, hint: '' },
|
||||
form: {
|
||||
fileId: '',
|
||||
sheetIdx: 0,
|
||||
headerRow: 2,
|
||||
startRow: 3
|
||||
},
|
||||
rules: {
|
||||
fileId: [{ required: true, message: '请输入 file_token', trigger: 'blur' }],
|
||||
headerRow: [
|
||||
{ required: true, message: '请输入表头行号', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, message: '表头行号必须大于0', trigger: 'blur' }
|
||||
],
|
||||
startRow: [
|
||||
{ required: true, message: '请输入数据起始行', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, message: '数据起始行必须大于0', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
saveLoading: false,
|
||||
testLoading: false,
|
||||
clearLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.checkAuthStatus()
|
||||
this.loadConfig()
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.checkAuthStatus()
|
||||
this.loadConfig()
|
||||
},
|
||||
async checkAuthStatus() {
|
||||
try {
|
||||
const response = await getKdocsTokenStatus(this.userId)
|
||||
if (response.code === 200) {
|
||||
this.isAuthorized = response.data.hasToken && response.data.isValid
|
||||
this.tokenInfo = response.data
|
||||
if (response.data.userId) {
|
||||
this.userId = response.data.userId
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
loadConfig() {
|
||||
try {
|
||||
const raw = localStorage.getItem(LS_KEY)
|
||||
if (raw) {
|
||||
const c = JSON.parse(raw)
|
||||
this.form.fileId = c.fileId || ''
|
||||
this.form.sheetIdx = c.sheetIdx != null ? c.sheetIdx : 0
|
||||
this.form.headerRow = c.headerRow || 2
|
||||
this.form.startRow = c.startRow || 3
|
||||
this.config.isConfigured = !!c.fileId
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
extractValues(payload) {
|
||||
if (!payload) return []
|
||||
if (Array.isArray(payload.values)) return payload.values
|
||||
if (payload.data && Array.isArray(payload.data.values)) return payload.data.values
|
||||
return []
|
||||
},
|
||||
async handleAuthorize() {
|
||||
try {
|
||||
const response = await getKdocsAuthUrl()
|
||||
if (response.code === 200) {
|
||||
const w = 600
|
||||
const h = 700
|
||||
window.open(
|
||||
response.data,
|
||||
'KdocsAuth',
|
||||
`width=${w},height=${h},left=${(screen.width - w) / 2},top=${(screen.height - h) / 2},resizable=yes,scrollbars=yes`
|
||||
)
|
||||
this.$message.success('请在弹出窗口完成授权')
|
||||
const handler = (event) => {
|
||||
if (event.data && event.data.type === 'kdocs_oauth_callback') {
|
||||
window.removeEventListener('message', handler)
|
||||
if (event.data.userId) {
|
||||
this.userId = event.data.userId
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.checkAuthStatus()
|
||||
this.$message.success('授权完成')
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
window.addEventListener('message', handler)
|
||||
setTimeout(() => this.checkAuthStatus(), 3000)
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error(e.msg || e.message || '获取授权地址失败')
|
||||
}
|
||||
},
|
||||
async handleRefreshAuth() {
|
||||
await this.checkAuthStatus()
|
||||
this.$message.success('已刷新')
|
||||
},
|
||||
async handleTestRead() {
|
||||
if (!this.isAuthorized) {
|
||||
this.$message.warning('请先授权')
|
||||
return
|
||||
}
|
||||
if (!this.form.fileId) {
|
||||
this.$message.warning('请输入 file_token')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await readKdocsCells({
|
||||
userId: this.userId,
|
||||
fileToken: this.form.fileId,
|
||||
sheetIdx: this.form.sheetIdx,
|
||||
range: 'A1:B5'
|
||||
})
|
||||
if (response.code === 200) {
|
||||
this.$message.success('读取成功')
|
||||
console.log('read', response.data)
|
||||
} else {
|
||||
this.$message.warning(response.msg || '读取失败')
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error(e.msg || e.message || '读取失败')
|
||||
}
|
||||
},
|
||||
handleSave() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (!this.isAuthorized) {
|
||||
this.$message.warning('请先授权')
|
||||
return
|
||||
}
|
||||
this.saveLoading = true
|
||||
try {
|
||||
localStorage.setItem(
|
||||
LS_KEY,
|
||||
JSON.stringify({
|
||||
fileId: this.form.fileId,
|
||||
sheetIdx: this.form.sheetIdx,
|
||||
headerRow: this.form.headerRow,
|
||||
startRow: this.form.startRow
|
||||
})
|
||||
)
|
||||
this.config.isConfigured = true
|
||||
this.config.hint = '将使用金山文档 KSheet 写入工作表'
|
||||
this.$message.success('已保存')
|
||||
} finally {
|
||||
this.saveLoading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleTest() {
|
||||
if (!this.isAuthorized) {
|
||||
this.$message.warning('请先授权')
|
||||
return
|
||||
}
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
this.testLoading = true
|
||||
try {
|
||||
const readRes = await readKdocsCells({
|
||||
userId: this.userId,
|
||||
fileToken: this.form.fileId,
|
||||
sheetIdx: this.form.sheetIdx,
|
||||
range: 'A1:B5'
|
||||
})
|
||||
if (readRes.code !== 200) {
|
||||
this.$message.error(readRes.msg || '读失败')
|
||||
return
|
||||
}
|
||||
const testRange = `A${this.form.startRow}:B${this.form.startRow}`
|
||||
const writeRes = await updateKdocsCells({
|
||||
userId: this.userId,
|
||||
fileToken: this.form.fileId,
|
||||
sheetIdx: this.form.sheetIdx,
|
||||
range: testRange,
|
||||
values: [['测试1', '测试2']]
|
||||
})
|
||||
if (writeRes.code === 200) {
|
||||
this.$message.success('读写测试成功')
|
||||
} else {
|
||||
this.$message.warning(writeRes.msg || '写失败')
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error(e.msg || e.message || '测试失败')
|
||||
} finally {
|
||||
this.testLoading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClear() {
|
||||
this.$confirm('确定清除本地配置？', '提示', { type: 'warning' })
|
||||
.then(() => {
|
||||
localStorage.removeItem(LS_KEY)
|
||||
this.form.fileId = ''
|
||||
this.form.sheetIdx = 0
|
||||
this.form.headerRow = 2
|
||||
this.form.startRow = 3
|
||||
this.config.isConfigured = false
|
||||
this.config.hint = ''
|
||||
this.$message.success('已清除')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.kdocs-config {
|
||||
padding: 0;
|
||||
}
|
||||
.config-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.config-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.config-right {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.config-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.auth-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.status-card-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.status-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.status-card.success {
|
||||
background-color: #f0f9ff;
|
||||
border: 1px solid #b3d8ff;
|
||||
}
|
||||
.status-card.warning {
|
||||
background-color: #fef0f0;
|
||||
border: 1px solid #fbc4c4;
|
||||
}
|
||||
.status-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.status-icon.success {
|
||||
background-color: #67c23a;
|
||||
color: white;
|
||||
}
|
||||
.status-icon.warning {
|
||||
background-color: #e6a23c;
|
||||
color: white;
|
||||
}
|
||||
.status-text {
|
||||
flex: 1;
|
||||
}
|
||||
.status-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.status-desc {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.help-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
.help-item i {
|
||||
color: #67c23a;
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,563 +0,0 @@
|
||||
<template>
|
||||
<div class="wps365-config">
|
||||
<div class="config-container">
|
||||
<!-- 左侧：配置表单 -->
|
||||
<div class="config-left">
|
||||
<!-- 授权状态 -->
|
||||
<el-card class="config-section">
|
||||
<div slot="header" class="section-header">
|
||||
<i class="el-icon-key"></i>
|
||||
<span>授权状态</span>
|
||||
</div>
|
||||
<div class="auth-status">
|
||||
<el-tag v-if="isAuthorized" type="success" size="medium">
|
||||
<i class="el-icon-circle-check"></i> 已授权
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger" size="medium">
|
||||
<i class="el-icon-circle-close"></i> 未授权
|
||||
</el-tag>
|
||||
<el-button
|
||||
v-if="!isAuthorized"
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-unlock"
|
||||
@click="handleAuthorize"
|
||||
style="margin-left: 10px;"
|
||||
>
|
||||
立即授权
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="info"
|
||||
size="small"
|
||||
icon="el-icon-refresh"
|
||||
@click="handleRefreshAuth"
|
||||
style="margin-left: 10px;"
|
||||
>
|
||||
刷新状态
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="isAuthorized && tokenInfo" class="token-info" style="margin-top: 15px;">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="用户ID">{{ tokenInfo.userId || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Token状态">
|
||||
<el-tag v-if="tokenInfo.isValid" type="success" size="small">有效</el-tag>
|
||||
<el-tag v-else type="warning" size="small">已过期</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="有效期" v-if="tokenInfo.expiresIn">
|
||||
{{ Math.floor(tokenInfo.expiresIn / 60) }} 分钟
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 文档配置表单 -->
|
||||
<el-card class="config-section">
|
||||
<div slot="header" class="section-header">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>H-TF订单自动写入配置</span>
|
||||
<el-tag v-if="config.isConfigured" type="success" size="mini" style="margin-left: 10px;">
|
||||
<i class="el-icon-success"></i> 已配置
|
||||
</el-tag>
|
||||
<el-tag v-else type="warning" size="mini" style="margin-left: 10px;">
|
||||
<i class="el-icon-warning"></i> 未配置
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
|
||||
<el-form-item label="文件ID" prop="fileId">
|
||||
<el-input
|
||||
v-model="form.fileId"
|
||||
placeholder="例如：VbHZwButmh（从WPS365在线表格URL中获取）"
|
||||
clearable
|
||||
>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
@click="handleTestRead"
|
||||
:disabled="!form.fileId || !isAuthorized"
|
||||
>
|
||||
测试读取
|
||||
</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表头行号" prop="headerRow">
|
||||
<el-input-number
|
||||
v-model="form.headerRow"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="起始行号" prop="startRow">
|
||||
<el-input-number
|
||||
v-model="form.startRow"
|
||||
:min="1"
|
||||
controls-position="right"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSave" :loading="saveLoading" icon="el-icon-check">
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button @click="handleTest" :loading="testLoading" icon="el-icon-setting">
|
||||
测试配置
|
||||
</el-button>
|
||||
<el-button @click="handleClear" :loading="clearLoading" type="danger" plain icon="el-icon-delete">
|
||||
清除配置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：状态信息 -->
|
||||
<div class="config-right">
|
||||
<!-- 配置状态提示 -->
|
||||
<el-card class="status-card-wrapper">
|
||||
<div class="status-card" :class="config.isConfigured ? 'success' : 'warning'">
|
||||
<div class="status-icon" :class="config.isConfigured ? 'success' : 'warning'">
|
||||
<i :class="config.isConfigured ? 'el-icon-success' : 'el-icon-warning'"></i>
|
||||
</div>
|
||||
<div class="status-text">
|
||||
<div class="status-title">{{ config.isConfigured ? '配置完成' : '配置未完成' }}</div>
|
||||
<div class="status-desc">{{ config.hint || (config.isConfigured ? 'H-TF订单将自动写入WPS365在线表格' : '请完成配置') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 快速帮助 -->
|
||||
<el-card class="help-card-wrapper">
|
||||
<div slot="header" class="card-header">
|
||||
<i class="el-icon-question"></i>
|
||||
<span>配置说明</span>
|
||||
</div>
|
||||
<div class="help-content">
|
||||
<div class="help-item">
|
||||
<i class="el-icon-check"></i>
|
||||
<span>文件ID从WPS365在线表格URL中获取</span>
|
||||
</div>
|
||||
<div class="help-item">
|
||||
<i class="el-icon-check"></i>
|
||||
<span>点击"测试读取"验证文件ID是否正确</span>
|
||||
</div>
|
||||
<div class="help-item">
|
||||
<i class="el-icon-check"></i>
|
||||
<span>表头行号默认为第2行</span>
|
||||
</div>
|
||||
<div class="help-item">
|
||||
<i class="el-icon-check"></i>
|
||||
<span>数据起始行默认为第3行</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getWPS365AuthUrl,
|
||||
getWPS365TokenStatus,
|
||||
readWPS365AirSheetCells,
|
||||
updateWPS365AirSheetCells
|
||||
} from '@/api/jarvis/wps365'
|
||||
|
||||
export default {
|
||||
name: 'WPS365Config',
|
||||
data() {
|
||||
return {
|
||||
isAuthorized: false,
|
||||
userId: null,
|
||||
tokenInfo: null,
|
||||
config: {
|
||||
isConfigured: false,
|
||||
hint: ''
|
||||
},
|
||||
form: {
|
||||
fileId: '',
|
||||
headerRow: 2,
|
||||
startRow: 3
|
||||
},
|
||||
rules: {
|
||||
fileId: [
|
||||
{ required: true, message: '请输入文件ID', trigger: 'blur' }
|
||||
],
|
||||
headerRow: [
|
||||
{ required: true, message: '请输入表头行号', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, message: '表头行号必须大于0', trigger: 'blur' }
|
||||
],
|
||||
startRow: [
|
||||
{ required: true, message: '请输入数据起始行', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, message: '数据起始行必须大于0', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
saveLoading: false,
|
||||
testLoading: false,
|
||||
clearLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.checkAuthStatus()
|
||||
this.loadConfig()
|
||||
},
|
||||
methods: {
|
||||
/** 刷新配置 */
|
||||
refresh() {
|
||||
this.checkAuthStatus()
|
||||
this.loadConfig()
|
||||
},
|
||||
|
||||
/** 检查授权状态 */
|
||||
async checkAuthStatus() {
|
||||
try {
|
||||
const response = await getWPS365TokenStatus(this.userId)
|
||||
if (response.code === 200) {
|
||||
this.isAuthorized = response.data.hasToken && response.data.isValid
|
||||
this.tokenInfo = response.data
|
||||
if (response.data.userId) {
|
||||
this.userId = response.data.userId
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查授权状态失败', error)
|
||||
}
|
||||
},
|
||||
|
||||
/** 加载配置 */
|
||||
async loadConfig() {
|
||||
try {
|
||||
// TODO: 从后端加载配置
|
||||
// 暂时从localStorage读取
|
||||
const savedConfig = localStorage.getItem('wps365_auto_write_config')
|
||||
if (savedConfig) {
|
||||
const config = JSON.parse(savedConfig)
|
||||
this.form.fileId = config.fileId || ''
|
||||
this.form.headerRow = config.headerRow || 2
|
||||
this.form.startRow = config.startRow || 3
|
||||
this.config.isConfigured = !!(config.fileId)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载配置失败', error)
|
||||
}
|
||||
},
|
||||
|
||||
/** 处理授权 */
|
||||
async handleAuthorize() {
|
||||
try {
|
||||
const response = await getWPS365AuthUrl()
|
||||
if (response.code === 200) {
|
||||
const width = 600
|
||||
const height = 700
|
||||
const left = (window.screen.width - width) / 2
|
||||
const top = (window.screen.height - height) / 2
|
||||
|
||||
window.open(
|
||||
response.data,
|
||||
'WPS365授权',
|
||||
`width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
|
||||
)
|
||||
|
||||
this.$message.success('授权页面已打开，请在新窗口中完成授权')
|
||||
|
||||
const messageHandler = (event) => {
|
||||
if (event.data && event.data.type === 'wps365_oauth_callback') {
|
||||
window.removeEventListener('message', messageHandler)
|
||||
if (event.data.userId) {
|
||||
this.userId = event.data.userId
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.checkAuthStatus()
|
||||
this.$message.success('授权完成')
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
window.addEventListener('message', messageHandler)
|
||||
|
||||
setTimeout(() => {
|
||||
this.checkAuthStatus()
|
||||
}, 3000)
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('获取授权URL失败：' + (error.msg || error.message))
|
||||
}
|
||||
},
|
||||
|
||||
/** 刷新授权状态 */
|
||||
async handleRefreshAuth() {
|
||||
await this.checkAuthStatus()
|
||||
this.$message.success('授权状态已刷新')
|
||||
},
|
||||
|
||||
/** 测试读取 */
|
||||
async handleTestRead() {
|
||||
if (!this.isAuthorized || !this.userId) {
|
||||
this.$message.warning('请先完成授权')
|
||||
return
|
||||
}
|
||||
if (!this.form.fileId) {
|
||||
this.$message.warning('请输入文件ID')
|
||||
return
|
||||
}
|
||||
|
||||
this.$message.info('正在测试读取...')
|
||||
try {
|
||||
const response = await readWPS365AirSheetCells({
|
||||
userId: this.userId,
|
||||
fileId: this.form.fileId,
|
||||
worksheetId: '0', // AirSheet中worksheetId通常是整数，0表示第一个工作表
|
||||
range: 'A1:B5'
|
||||
})
|
||||
if (response.code === 200) {
|
||||
this.$message.success('读取成功！文件ID正确。')
|
||||
console.log('读取结果:', response.data)
|
||||
} else {
|
||||
this.$message.warning('读取失败: ' + (response.msg || '未知错误'))
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('读取失败: ' + (error.msg || error.message))
|
||||
console.error('读取错误:', error)
|
||||
}
|
||||
},
|
||||
|
||||
/** 保存配置 */
|
||||
async handleSave() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
if (!this.isAuthorized) {
|
||||
this.$message.warning('请先完成授权')
|
||||
return
|
||||
}
|
||||
|
||||
this.saveLoading = true
|
||||
try {
|
||||
// TODO: 保存到后端
|
||||
// 暂时保存到localStorage
|
||||
const config = {
|
||||
fileId: this.form.fileId,
|
||||
headerRow: this.form.headerRow,
|
||||
startRow: this.form.startRow
|
||||
}
|
||||
localStorage.setItem('wps365_auto_write_config', JSON.stringify(config))
|
||||
this.config.isConfigured = true
|
||||
this.config.hint = 'H-TF订单将自动写入WPS365在线表格'
|
||||
this.$message.success('配置保存成功')
|
||||
} catch (error) {
|
||||
this.$message.error('保存配置失败: ' + (error.msg || error.message))
|
||||
} finally {
|
||||
this.saveLoading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 测试配置 */
|
||||
async handleTest() {
|
||||
if (!this.isAuthorized || !this.userId) {
|
||||
this.$message.warning('请先完成授权')
|
||||
return
|
||||
}
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.testLoading = true
|
||||
try {
|
||||
// 测试读取
|
||||
const readResponse = await readWPS365AirSheetCells({
|
||||
userId: this.userId,
|
||||
fileId: this.form.fileId,
|
||||
worksheetId: '0', // AirSheet中worksheetId通常是整数，0表示第一个工作表
|
||||
range: 'A1:B5'
|
||||
})
|
||||
if (readResponse.code !== 200) {
|
||||
this.$message.error('读取测试失败: ' + (readResponse.msg || '未知错误'))
|
||||
return
|
||||
}
|
||||
|
||||
// 测试写入（写入测试数据）
|
||||
const testRange = `A${this.form.startRow}:B${this.form.startRow}`
|
||||
const testValues = [['测试数据1', '测试数据2']]
|
||||
const writeResponse = await updateWPS365AirSheetCells({
|
||||
userId: this.userId,
|
||||
fileId: this.form.fileId,
|
||||
worksheetId: '0', // AirSheet中worksheetId通常是整数，0表示第一个工作表
|
||||
range: testRange,
|
||||
values: testValues
|
||||
})
|
||||
if (writeResponse.code === 200) {
|
||||
this.$message.success('配置测试成功！读写功能正常。')
|
||||
} else {
|
||||
this.$message.warning('写入测试失败: ' + (writeResponse.msg || '未知错误'))
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('配置测试失败: ' + (error.msg || error.message))
|
||||
console.error('测试错误:', error)
|
||||
} finally {
|
||||
this.testLoading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 清除配置 */
|
||||
async handleClear() {
|
||||
this.$confirm('确定要清除配置吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.clearLoading = true
|
||||
try {
|
||||
// TODO: 清除后端配置
|
||||
localStorage.removeItem('wps365_auto_write_config')
|
||||
this.form.fileId = ''
|
||||
this.form.headerRow = 2
|
||||
this.form.startRow = 3
|
||||
this.config.isConfigured = false
|
||||
this.config.hint = ''
|
||||
this.$message.success('配置已清除')
|
||||
} catch (error) {
|
||||
this.$message.error('清除配置失败: ' + (error.msg || error.message))
|
||||
} finally {
|
||||
this.clearLoading = false
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wps365-config {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.config-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.config-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.config-right {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.auth-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.token-info {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.status-card-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.status-card.success {
|
||||
background-color: #f0f9ff;
|
||||
border: 1px solid #b3d8ff;
|
||||
}
|
||||
|
||||
.status-card.warning {
|
||||
background-color: #fef0f0;
|
||||
border: 1px solid #fbc4c4;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.status-icon.success {
|
||||
background-color: #67c23a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-icon.warning {
|
||||
background-color: #e6a23c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.help-card-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.help-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.help-item i {
|
||||
color: #67c23a;
|
||||
}
|
||||
</style>
|
||||
@@ -16,11 +16,11 @@
|
||||
<TencentDocConfig ref="tendocConfig" />
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="WPS365" name="wps365">
|
||||
<el-tab-pane label="金山文档" name="kdocs">
|
||||
<span slot="label">
|
||||
<i class="el-icon-document-copy"></i> WPS365
|
||||
<i class="el-icon-document-copy"></i> 金山文档
|
||||
</span>
|
||||
<WPS365Config ref="wps365Config" />
|
||||
<KdocsCloudConfig ref="kdocsConfig" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
@@ -29,13 +29,13 @@
|
||||
|
||||
<script>
|
||||
import TencentDocConfig from './components/TencentDocConfig'
|
||||
import WPS365Config from './components/WPS365Config'
|
||||
import KdocsCloudConfig from './components/KdocsCloudConfig'
|
||||
|
||||
export default {
|
||||
name: 'DocSync',
|
||||
components: {
|
||||
TencentDocConfig,
|
||||
WPS365Config
|
||||
KdocsCloudConfig
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -48,8 +48,8 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
if (tab.name === 'tendoc' && this.$refs.tendocConfig) {
|
||||
this.$refs.tendocConfig.refresh()
|
||||
} else if (tab.name === 'wps365' && this.$refs.wps365Config) {
|
||||
this.$refs.wps365Config.refresh()
|
||||
} else if (tab.name === 'kdocs' && this.$refs.kdocsConfig) {
|
||||
this.$refs.kdocsConfig.refresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user