明道云视图插件 显示指定字段表格 VUE3开发

<template>
  <div>
    <table>
      <thead>
        <tr>
          <!-- 根据选择的字段动态生成表头，显示字段名称 -->
          <th v-for="field in selectedFields" :key="field">
            {{ getFieldName(field) }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in recentRecords" :key="index">
          <!-- 根据选择的字段动态显示数据 -->
          <td v-for="field in selectedFields" :key="`${index}-${field}`">
            {{ item[field] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

// 用于存储最近十条数据
const recentRecords = ref([]);
// 用于存储选择的显示字段
const selectedFields = ref(env.showFields || []);
// 用于存储字段ID到名称的映射
const fieldNameMap = ref({});

// 获取字段名称的函数
const getFieldName = (fieldId) => {
    return fieldNameMap.value[fieldId] || fieldId;
};

// 获取最近十条数据的函数
const fetchRecentRecords = async () => {
    try {
        const { worksheetId, viewId } = config;
        const res = await api.getFilterRows({
            worksheetId,
            viewId,
            pageIndex: 1,
            pageSize: 10,
            sortId: '创建时间字段的controlId', // 根据实际的创建时间字段ID修改
            isAsc: false // 降序排列，以获取最近的数据
        });
        recentRecords.value = res.data;
    } catch (error) {
        console.error('获取数据失败:', error);
    }
};

onMounted(() => {
    // 初始化字段ID到名称的映射
    config.controls.forEach(control => {
        fieldNameMap.value[control.controlId] = control.controlName;
    });
    fetchRecentRecords();
});
</script>

<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
</style>