1

src/api/jarvis/wps365.js

@@ -153,3 +153,27 @@ export function batchUpdateWPS365Cells(data) {
   })
 }
 
+// ==================== AirSheet相关 ====================
+
+/**
+ * 读取AirSheet工作表数据
+ */
+export function readWPS365AirSheetCells(params) {
+  return request({
+    url: '/jarvis/wps365/readAirSheetCells',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 更新AirSheet工作表数据
+ */
+export function updateWPS365AirSheetCells(data) {
+  return request({
+    url: '/jarvis/wps365/updateAirSheetCells',
+    method: 'post',
+    data
+  })
+}
+

src/views/jarvis/docSync/components/WPS365Config.vue

@@ -1,90 +1,166 @@
 <template>
   <div class="wps365-config">
-    <!-- 授权状态 -->
+    <div class="config-container">
-    <el-card class="auth-card" style="margin-bottom: 20px;">
+      <!-- 左侧：配置表单 -->
-      <div slot="header">
+      <div class="config-left">
-        <span><i class="el-icon-key"></i> 授权状态</span>
+        <!-- 授权状态 -->
-      </div>
+        <el-card class="config-section">
-      <div class="auth-status">
+          <div slot="header" class="section-header">
-        <el-tag v-if="isAuthorized" type="success" size="medium">
+            <i class="el-icon-key"></i>
-          <i class="el-icon-circle-check"></i> 已授权
+            <span>授权状态</span>
-        </el-tag>
+          </div>
-        <el-tag v-else type="danger" size="medium">
+          <div class="auth-status">
-          <i class="el-icon-circle-close"></i> 未授权
+            <el-tag v-if="isAuthorized" type="success" size="medium">
-        </el-tag>
+              <i class="el-icon-circle-check"></i> 已授权
-        <el-button
+            </el-tag>
-          v-if="!isAuthorized"
+            <el-tag v-else type="danger" size="medium">
-          type="primary"
+              <i class="el-icon-circle-close"></i> 未授权
-          size="small"
+            </el-tag>
-          icon="el-icon-unlock"
+            <el-button
-          @click="handleAuthorize"
+              v-if="!isAuthorized"
-          style="margin-left: 10px;"
+              type="primary"
-        >
+              size="small"
-          立即授权
+              icon="el-icon-unlock"
-        </el-button>
+              @click="handleAuthorize"
-        <el-button
+              style="margin-left: 10px;"
-          v-else
+            >
-          type="info"
+              立即授权
-          size="small"
+            </el-button>
-          icon="el-icon-refresh"
+            <el-button
-          @click="handleRefreshAuth"
+              v-else
-          style="margin-left: 10px;"
+              type="info"
-        >
+              size="small"
-          刷新状态
+              icon="el-icon-refresh"
-        </el-button>
+              @click="handleRefreshAuth"
-      </div>
+              style="margin-left: 10px;"
-      <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-button>
-          <el-descriptions-item label="Token状态">
+          </div>
-            <el-tag v-if="tokenInfo.isValid" type="success" size="small">有效</el-tag>
+          <div v-if="isAuthorized && tokenInfo" class="token-info" style="margin-top: 15px;">
-            <el-tag v-else type="warning" size="small">已过期</el-tag>
+            <el-descriptions :column="2" border size="small">
-          </el-descriptions-item>
+              <el-descriptions-item label="用户ID">{{ tokenInfo.userId || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="有效期" v-if="tokenInfo.expiresIn">
+              <el-descriptions-item label="Token状态">
-            {{ Math.floor(tokenInfo.expiresIn / 60) }} 分钟
+                <el-tag v-if="tokenInfo.isValid" type="success" size="small">有效</el-tag>
-          </el-descriptions-item>
+                <el-tag v-else type="warning" size="small">已过期</el-tag>
-        </el-descriptions>
+              </el-descriptions-item>
-        <el-button
+              <el-descriptions-item label="有效期" v-if="tokenInfo.expiresIn">
-          type="primary"
+                {{ Math.floor(tokenInfo.expiresIn / 60) }} 分钟
-          size="small"
+              </el-descriptions-item>
-          icon="el-icon-video-play"
+            </el-descriptions>
-          @click="testApi"
+          </div>
-          style="margin-top: 10px;"
+        </el-card>
-        >
-          测试API调用
-        </el-button>
-      </div>
-    </el-card>
 
-    <!-- 使用说明 -->
+        <!-- 文档配置表单 -->
-    <el-card>
+        <el-card class="config-section">
-      <div slot="header">
+          <div slot="header" class="section-header">
-        <span><i class="el-icon-info"></i> 使用说明</span>
+            <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="usage-info">
+
-        <el-alert
+      <!-- 右侧：状态信息 -->
-          title="配置步骤"
+      <div class="config-right">
-          type="info"
+        <!-- 配置状态提示 -->
-          :closable="false"
+        <el-card class="status-card-wrapper">
-          show-icon>
+          <div class="status-card" :class="config.isConfigured ? 'success' : 'warning'">
-          <ol style="margin: 10px 0; padding-left: 20px;">
+            <div class="status-icon" :class="config.isConfigured ? 'success' : 'warning'">
-            <li>在WPS365开放平台注册应用并获取AppID和AppKey</li>
+              <i :class="config.isConfigured ? 'el-icon-success' : 'el-icon-warning'"></i>
-            <li>配置回调地址：<code>https://jarvis.van333.cn/wps365-callback</code></li>
+            </div>
-            <li>在权限管理中添加 <code>kso.file.readwrite</code> 权限（支持在线表格操作）</li>
+            <div class="status-text">
-            <li>点击"立即授权"完成用户授权</li>
+              <div class="status-title">{{ config.isConfigured ? '配置完成' : '配置未完成' }}</div>
-            <li>授权成功后即可使用API读取和编辑在线表格</li>
+              <div class="status-desc">{{ config.hint || (config.isConfigured ? 'H-TF订单将自动写入WPS365在线表格' : '请完成配置') }}</div>
-          </ol>
+            </div>
-        </el-alert>
+          </div>
-        <div style="margin-top: 15px;">
+        </el-card>
-          <el-link type="primary" href="https://open.wps.cn/" target="_blank" icon="el-icon-link">
+
-            WPS365开放平台
+        <!-- 快速帮助 -->
-          </el-link>
+        <el-card class="help-card-wrapper">
-          <el-link type="primary" href="/doc/WPS365集成使用说明.md" target="_blank" icon="el-icon-document" style="margin-left: 20px;">
+          <div slot="header" class="card-header">
-            查看详细文档
+            <i class="el-icon-question"></i>
-          </el-link>
+            <span>配置说明</span>
-        </div>
+          </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>
-    </el-card>
+    </div>
   </div>
 </template>
 
@@ -92,8 +168,8 @@
 import {
   getWPS365AuthUrl,
   getWPS365TokenStatus,
-  getWPS365UserInfo,
+  readWPS365AirSheetCells,
-  getWPS365FileList
+  updateWPS365AirSheetCells
 } from '@/api/jarvis/wps365'
 
 export default {
@@ -101,50 +177,77 @@ export default {
   data() {
     return {
       isAuthorized: false,
-      userInfo: null,
+      userId: null,
-      userId: null, // 从token状态中获取
+      tokenInfo: 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 {
-        // 不传userId，让后端自动查找token
         const response = await getWPS365TokenStatus(this.userId)
         if (response.code === 200) {
           this.isAuthorized = response.data.hasToken && response.data.isValid
           this.tokenInfo = response.data
-          // 如果找到了token，更新userId
           if (response.data.userId) {
             this.userId = response.data.userId
           }
-          if (this.isAuthorized) {
-            this.loadUserInfo()
-          }
         }
       } catch (error) {
         console.error('检查授权状态失败', error)
       }
     },
 
-    /** 加载用户信息 */
+    /** 加载配置 */
-    async loadUserInfo() {
+    async loadConfig() {
       try {
-        const response = await getWPS365UserInfo(this.userId)
+        // TODO: 从后端加载配置
-        if (response.code === 200) {
+        // 暂时从localStorage读取
-          this.userInfo = response.data
+        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)
+        console.error('加载配置失败', error)
       }
     },
 
@@ -166,15 +269,12 @@ export default {
 
           this.$message.success('授权页面已打开，请在新窗口中完成授权')
 
-          // 监听授权完成消息
           const messageHandler = (event) => {
             if (event.data && event.data.type === 'wps365_oauth_callback') {
               window.removeEventListener('message', messageHandler)
-              // 如果回调消息包含userId，更新它
               if (event.data.userId) {
                 this.userId = event.data.userId
               }
-              // 延迟一下再刷新，确保后端已保存token
               setTimeout(() => {
                 this.checkAuthStatus()
                 this.$message.success('授权完成')
@@ -183,7 +283,6 @@ export default {
           }
           window.addEventListener('message', messageHandler)
 
-          // 3秒后刷新配置状态（作为备用，防止消息监听失败）
           setTimeout(() => {
             this.checkAuthStatus()
           }, 3000)
@@ -199,32 +298,138 @@ export default {
       this.$message.success('授权状态已刷新')
     },
 
-    /** 测试API调用 */
+    /** 测试读取 */
-    async testApi() {
+    async handleTestRead() {
       if (!this.isAuthorized || !this.userId) {
         this.$message.warning('请先完成授权')
         return
       }
-      
+      if (!this.form.fileId) {
-      this.$message.info('正在测试API调用...')
+        this.$message.warning('请输入文件ID')
+        return
+      }
+
+      this.$message.info('正在测试读取...')
       try {
-        // 测试获取文件列表API
+        const response = await readWPS365AirSheetCells({
-        const response = await getWPS365FileList({
           userId: this.userId,
-          page: 1,
+          worksheetId: this.form.fileId,
-          pageSize: 10
+          range: 'A1:B5'
         })
-        
         if (response.code === 200) {
-          this.$message.success('API调用成功！授权有效。')
+          this.$message.success('读取成功！文件ID正确。')
-          console.log('API响应:', response.data)
+          console.log('读取结果:', response.data)
         } else {
-          this.$message.warning('API调用返回错误: ' + (response.msg || '未知错误'))
+          this.$message.warning('读取失败: ' + (response.msg || '未知错误'))
         }
       } catch (error) {
-        this.$message.error('API调用失败: ' + (error.msg || error.message))
+        this.$message.error('读取失败: ' + (error.msg || error.message))
-        console.error('API调用错误:', error)
+        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,
+            worksheetId: this.form.fileId,
+            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,
+            worksheetId: this.form.fileId,
+            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(() => {})
     }
   }
 }
@@ -235,34 +440,121 @@ export default {
   padding: 0;
 }
 
-.auth-card {
+.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;
 }
 
-.user-info {
+.token-info {
   margin-top: 15px;
 }
 
-.usage-info {
+.status-card-wrapper {
-  line-height: 1.8;
+  margin-bottom: 20px;
 }
 
-.usage-info ol {
+.status-card {
-  margin: 10px 0;
+  display: flex;
-  padding-left: 20px;
+  align-items: center;
+  padding: 15px;
+  border-radius: 4px;
 }
 
-.usage-info code {
+.status-card.success {
-  background: #f5f5f5;
+  background-color: #f0f9ff;
-  padding: 2px 6px;
+  border: 1px solid #b3d8ff;
-  border-radius: 3px;
+}
-  font-family: 'Courier New', monospace;
+
-  color: #e83e8c;
+.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>
-