明道云视图插件，实现分页，获取关联记录，单选，指定字段显示到表格

<template>
  <div class="app-con">
    <div class="brand">
      <div class="logo">
        <img :src="icon" />
        <div class="bg"></div>
      </div>
      <div class="hello">{{ title }}</div>

      <div style="width: 800px;height: auto;">
        <div class="records-count">
        当前视图共条
        <b>{{ typeof count === "undefined" ? "?" : count }}</b> 记录{{ total }}
      </div>
<!--emelent-plus表格-->
<el-table :data="currentPageData" border style="width: 100%; margin: 50px auto;" @row-click="openDetailinfo">
  <el-table-column
        v-for="field in selectedFields"
        :key="field"
        :prop="field"
        :label="getFieldName(field)" 
        :width="180"
        
        >
        <template #default="scope">
          <span>{{ getDisplayValue(scope.row[field], field) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button @click="openDetailinfo(scope.row)">查看详情</el-button>
        </template>
      </el-table-column> -->
  </el-table>
<!-- 表格 -->


<el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    />

  <div style="margin: 50px;"></div>

  
        <el-button color="#626aef" :dark="isDark" @click="addNewRecord">新建记录</el-button>
        <el-button color="#626aef" :dark="isDark" @click="openNewRecord">打开记录</el-button>
        <el-button color="#626aef" :dark="isDark" @click="selectNewRecord">选择记录</el-button>
        <el-button color="#626aef" :dark="isDark" @click="selectUser">选择人员</el-button>

<!---最近十条数据STAT-->
<div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <!-- 根据选择的字段动态生成表头 -->
          <th v-for="field in selectedFields" :key="field">{{ getFieldName(field) }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in recentRecords" :key="index" @click="openDetailPage(item)">
      
          <td>{{ index + 1 }}</td>
          <!-- 根据选择的字段动态显示数据 -->
          <td v-for="field in selectedFields" :key="`${index}-${field}`">{{ item[field] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
<!--最近十条数据END-->

</div>





   


     
   
    </div>
    <div class="playground">
      <div class="con">
        <div class="block">
          <div class="header">env 映射信息</div>
          <div class="content env">
            {{ JSON.stringify(env, null, 2) }}
          </div>
        </div>
        <div class="block">
          <div class="header">config 视图信息</div>
          <div class="content variables">
            {{ JSON.stringify({ appId, worksheetId, viewId }, null, 2) }}
          </div>
        </div>
        <CallMdFunctionVue :addLog="addLog" />
        <Logs :logs="logs" />
      </div>
    </div>
  </div>
</template>

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


import CallMdFunctionVue from "./components/CallMdFunction.vue";
import Logs from "./components/Logs.vue";
import icon from "./icon.svg";

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'




function reset() {
  value1.value0 = Date.now() + 1000 * 60 * 60 * 24 * 2
}

const activeNames = ref(['1'])

const color1 = ref('#409EFF')
const color2 = ref()

const num = ref(1)
const handleChange = (value) => {
  console.log(value)
}
//新建记录
function addNewRecord() {
  utils
    .openNewRecord({
      worksheetId,
    })
    .then((row) => {
      addLog("创建成功，新纪录 id 是" + row.rowid);
    });
}
//打开记录
function openNewRecord() {
  utils
    .selectRecord({
      relateSheetId: worksheetId,
    })
    .then((records) => {
      utils
        .openRecordInfo({
          appId,
          worksheetId,
          recordId: records[0].rowid,
        })
        .then((updatedRow) => {
          console.log({ updatedRow });
          addLog("已打开记录 ");
        });
    });
}
//选择记录
function selectNewRecord() {
  utils
    .selectRecord({
      relateSheetId: worksheetId,
      multiple: true,
    })
    .then((records) => {
      addLog("已选择记录 " + records.map((r) => r.rowid));
    });
}
//选择人员
async function selectUser() {
  addLog("打开选择人员弹窗");
  const users = await utils.selectUsers();
  console.log(users);
  addLog("已选择人员 " + users.map((u) => u.fullname));
}

const active = ref(0)

const next = () => {
  if (active.value++ > 2) active.value = 0
}

const { appId, worksheetId, viewId } = config;
const value = ref(new Date());
const { getFilterRowsTotalNum } = api;
const title = ref("Hello Vue!");
const count = ref(undefined);
const logs = ref([]);
onMounted(() => {
  addLog("hello world!");
  loadRecords();
});
async function loadRecords() {
  addLog("正在获取记录数量...");
  count.value = await getFilterRowsTotalNum({ worksheetId, viewId });
  addLog(`当前视图共${count.value}条记录`);
}
async function addLog(content) {
  const time = new Date();
  logs.value.push({
    time,
    timeStr: `[${[time.getHours(), time.getMinutes(), time.getSeconds()]
      .map((num) => String(num).padStart(2, 0))
      .join(":")}]`,
    content,
  });
}

// 用于存储最近十条数据
const recentRecords = ref([]);
// 用于存储选择的显示字段
const selectedFields = ref(env.showFields || []);
// 用于存储字段ID到名称的映射
const fieldNameMap = ref({});
// 当前页码
const currentPage = ref(1);
// 每页显示的数据条数
const pageSize = ref(1);
// 数据总条数
const total = ref(0);
// 当前页的数据
const currentPageData = ref([]);
// 获取字段名称的函数
const getFieldName = (fieldId) => {
    return fieldNameMap.value[fieldId] || fieldId;
};

// 判断是否为关联子表
const isSubTable = (field) => {
  // 这里需要根据实际情况判断，例如检查字段配置信息
  // console.log('field',config.controls[3].options  )
  // 假设 config.controls 包含了字段的信息，可以根据该信息判断
  const control = config.controls.find(c => c.controlId === field);
  return control && control.type === 29; // 请将 '关联子表类型' 替换为实际的关联子表类型标识
};
// 判断是否为单选字段
const isSingleSelect = (field) => {
  const control = config.controls.find(c => c.controlId === field);
  // 请根据实际情况修改以下判断条件，这里假设单选字段的类型是 11
  return control && control.type === 11; 
};
// 获取显示值
const getDisplayValue = (value, field) => {
  if (isSubTable(field)) {
    console.log('运行到这里了',JSON.parse(value))  
    // 对于关联子表，根据子表数据结构和显示需求处理
    if (Array.isArray(JSON.parse(value)) && JSON.parse(value).length > 0) {
      
      let displayValue = '';
      for (const subRecord of JSON.parse(value)) {
        // 假设子表数据中的元素有一个名为 'name' 的属性用于显示
        if (subRecord.name) {
          displayValue += subRecord.name + ', ';
        }
      }
      // 去除最后的逗号和空格
      return displayValue.slice(0, -2); 
    }
    return '';
  } else if (isSingleSelect(field)) {
    // 对于单选字段，根据其数据结构提取显示值，根据实际情况修改以下逻辑
    // console.log('运行到这里了00single0',typeof value)
    // console.log('运行到这里了，单选项', value)
    if (typeof value === 'string' && value!== null) {

      let data = config.controls[3].options;
      for(let i=0; i<data.length; i++){
        if(value.slice(2, -2) === data[i].key){
          let value = data[i].value;
          return value;
        }

      }
      
    }
    return '';
  } else {
    // 对于普通字段，直接返回值
    return value;
  }
};
// 获取数据的函数
const fetchData = async (page = 1, size = 10) => {
  try {
    const { worksheetId, viewId } = config;
    const res = await api.getFilterRows({
      worksheetId,
      viewId,
      pageIndex: page,
      pageSize: size,
      sortId: '创建时间字段的controlId', // 根据实际的创建时间字段ID修改
      isAsc: false // 降序排列，以获取最近的数据
    });
    recentRecords.value = res.data;
    total.value = res.count;
    currentPageData.value = res.data;
    console.log('获取数据成功:', res);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 获取config中的信息，实际使用时请从mdye.config获取
const useConfig = () => {
  // 这里假设config是从mdye.config获取的对象
  const config = {
    worksheetId,
    viewId
  };
  return config;
};

// 处理页码变化的函数
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  fetchData(newPage, pageSize.value);
};

onMounted(() => {
  // 初始化字段ID到名称的映射
  const controlMap = {};
  config.controls.forEach(control => {
    controlMap[control.controlId] = control.controlName;
  });
  fieldNameMap.value = controlMap;
  fetchData();
});
// 打开详情页的函数
const openDetailPage = (item) => {
  // 假设 item 包含唯一标识记录的字段 recordId，根据实际情况修改
  const recordId = item.rowid;
  console.log('打开详情页', recordId);
  // 调用 openRecordInfo 打开详情信息，参考文档 https://help.mingdao.com/extensions/developer/view/#openrecordinfoparams
  utils.openRecordInfo({
    appId,
    worksheetId,
    viewId,
    recordId:recordId
  });
};

// 打开详情页的函数
const openDetailinfo = (item) => {
  // 获取 row.id，假设 item 中存储的是 row 对象，根据实际情况修改
  const rowId = item.rowid;
  // 调用 openRecordInfo 打开详情信息，参考文档 https://help.mingdao.com/extensions/developer/view/#openrecordinfoparams
  utils.openRecordInfo({
    appId,
    worksheetId,
    viewId,
    recordId: rowId
  });
};
</script>

<style scoped>

</style>