明道云视图插件 实现更新字段内容 VUE3开发

<template>
  <div>
    <!-- 模拟展示数据的表格，假设每行有个“更新”按钮 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名称" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="updateRow(scope.row.id)">更新</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { config, api } from'mdye';

// 模拟从明道云获取的数据
const tableData = ref([]);
// 假设要更新的字段数据，实际使用时根据需求动态设置
const updatedFields = ref([
  {
    controlId: '目标字段的controlId', // 替换为实际要更新字段的controlId
    type: 2, // 字段类型，根据实际情况调整，例如2可能代表文本类型
    value: '更新后的内容', // 字段更新后的值
    controlName: '字段名称' // 字段名称，根据实际情况调整
  }
]);

// 初始化数据，模拟从明道云获取数据
onMounted(async () => {
  try {
    // 这里只是示例，实际需根据mdye.api的方法正确获取数据
    // 假设getFilterRows是获取数据的方法，需替换为实际方法
    const res = await api.getFilterRows({
      worksheetId: config.worksheetId,
      viewId: config.viewId,
      pageIndex: 1,
      pageSize: 10
    });
    tableData.value = res.data;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
});

const updateRow = async (rowId) => {
  console.log('updateRow 方法被调用，rowId:', rowId);
  try {
    // 确保参数中不包含不可克隆的数据类型
    const sanitizedUpdatedFields = updatedFields.value.map(field => {
      return {
        controlId: field.controlId,
        type: field.type,
        value: field.value,
        controlName: field.controlName
      };
    });

    const params = {
      appId: config.appId,
      worksheetId: config.worksheetId,
      rowId: rowId,
      newOldControl: sanitizedUpdatedFields
    };

    const result = await api.updateWorksheetRow(params);
    console.log('更新成功:', result);
    // 可以在此处添加更新成功后的逻辑，比如重新获取数据刷新表格
    await loadData();
  } catch (error) {
    console.error('更新失败:',