TBA_GXPT/ruoyi-ui/src/views/standardization/bizDataShowConfig/show/index.vue

<template>
  <div class="biz-display-container">
    <div v-if="headerShow" class="biz-display-header">
      <slot name="header">
        {{ title }}
      </slot>
    </div>
    <div class="biz-display-body" :style="{ height: bodyHeight }">
      <template v-if="displayType === 'chart'">
        <gw-chart :option="data"></gw-chart>
      </template>
      <template v-if="displayType === 'list'">
        <biz-table
            :table-data="tableData"
            :columns="columns"
            :click-config="clickConfig"
            :pagination-config="paginationConfig"
            :current-page="currentPage"
            :total="total"
            @row-click="handleRowClick"
            @page-change="handlePageChange"
        />
      </template>
      <template v-if="displayType === 'table'">
        <gw-table-two :columnNumber="columnNumber" :data="data"></gw-table-two>
      </template>
      <template v-if="displayType === 'text'">
        <span v-html="data"></span>
      </template>
    </div>
  </div>
</template>

<script setup>
import GwChart from "@/components/chart/GwEchart.vue";
import {getChartOption, getFormListData, getText} from '@/utils/biz'
import GwTableTwo from "./GwTableTwo.vue";
import BizTable from "./BizTable.vue"; // 引入新组件
import bus from '@/utils/bus'
import {filterData} from "@/utils/data.js";
import {isDate, isNumber} from "@/utils/validate.js";
import {parseTime} from "@/utils/ruoyi.js";
import {getBizDataById} from "@/api/standardization/bizDataShowConfig.js";
import {getDataSetBizDataById} from "@/api/register/regCom.js";

defineExpose({
  loadData
})

const slots = useSlots();
const props = defineProps({
  config: {
    type: Object,
  },
  showTitle: {
    type: Boolean,
    default: false
  },
  source: {
    type: String,
    default: "BIZ_DATA_SHOW"
  },
});

const headerShow = computed(() => (!!title.value || slots.header) && props.showTitle)
const bodyHeight = computed(() => {
  if (headerShow.value) {
    return 'calc(100% - 1rem - 20px)'
  } else {
    return '100%'
  }
})

const data = ref(null)
const title = ref(null)
const displayType = ref(null)
const columnNumber = ref(1)
const columns = ref([])
const clickConfig = ref(null)
const paginationConfig = ref({})

// 分页相关数据
const tableData = ref([])
const currentPage = ref(1)
const total = ref(0)

function loadData(config) {
  if (!config) {
    return
  }
  config.value = config
  displayType.value = config.type || 'list'
  title.value = config.name

  // 解析渲染配置
  const renderingOptions = JSON.parse(config.renderingOptions || '{}')
  clickConfig.value = renderingOptions.clickAction || {type: 'none'}
  paginationConfig.value = renderingOptions.pagination || {enabled: false}

  switch (displayType.value) {
    case 'chart':
      nextTick(() => {
        getChartOption(config).then(r => data.value = r);
      })
      return;
    case 'list':
      columns.value = renderingOptions.columns
      // 加载表格数据（支持分页）
      loadTableData(config, 1)
      return;
    case 'table':
      columnNumber.value = renderingOptions.columnNumber
      return getFormListData(config).then(r => data.value = r);
    case 'text':
      return getText(config).then(r => data.value = r);
  }
}

// 加载表格数据（支持分页）
async function loadTableData(config, page = 1) {
  try {
    const params = {}
    if (paginationConfig.value.enabled) {
      params[paginationConfig.value.pageNumParam || 'pageNum'] = page
      params[paginationConfig.value.pageSizeParam || 'pageSize'] = paginationConfig.value.pageSize || 10
    }

    let res;
    switch (props.source) {
      case "DATA_SET":
        res = await getDataSetBizDataById(config.id, params)
        break
      case "BIZ_DATA_SHOW":
      default:
        res = await getBizDataById(config.id, params)
        break
    }

    if (res && res.data) {
      if (paginationConfig.value.enabled) {
        // 提取数据列表
        const dataList = getDataByPath(res.data, paginationConfig.value.dataListField)
        // 提取总数
        total.value = getDataByPath(res.data, paginationConfig.value.totalField || 'total') || 0

        tableData.value = Array.isArray(dataList) ? dataList : []
        currentPage.value = page
      } else {
        // 不分页情况
        tableData.value = Array.isArray(res.data) ? res.data : []
        total.value = tableData.value.length
      }
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    tableData.value = []
    total.value = 0
  }
}

// 根据路径获取数据
function getDataByPath(obj, path) {
  if (!obj || !path) return obj
  const paths = path.split('.')
  let result = obj
  for (const p of paths) {
    result = result[p]
    if (result === undefined) break
  }
  return result
}

// 处理行点击事件
function handleRowClick({row, column, event}) {
  if (!clickConfig.value || clickConfig.value.type === 'none') {
    return
  }

  if (clickConfig.value.type === 'map') {
    const latitude = row[clickConfig.value.latitudeField]
    const longitude = row[clickConfig.value.longitudeField]

    if (latitude && longitude) {
      // 跳转到地图页面，传递经纬度参数
      bus.emit('show-map-position', {latitude, longitude, highlight: true})
    }
  } else if (clickConfig.value.type === 'detail') {
    // 查看详情逻辑
    if (clickConfig.value.detailPath) {
      // 可以在这里实现跳转到详情页的逻辑
      console.log('跳转到详情页:', clickConfig.value.detailPath, row)
    }
  } else if (clickConfig.value.type === 'link') {
    // 跳转链接逻辑
    if (clickConfig.value.linkUrl) {
      window.open(clickConfig.value.linkUrl, clickConfig.value.linkTarget || '_blank')
    }
  }
}

// 处理分页变化
function handlePageChange(page) {
  // if (props.config && props.config.type === 'list') {
  if (displayType.value === 'list') {
    loadTableData(props.config, page)
  }
}

function getValueByKey(obj, key) {
  let value = filterData(obj, key);
  if (isNumber(value)) {
    value = value.toFixed(2)
  } else if (isDate(value)) {
    value = parseTime(new Date(value), '{m}-{d} {h}')
  }
  return value
}

watch(() => props.config, (config) => {
  if (config) {
    loadData(config)
  }
}, {immediate: true})
</script>

<style lang="scss" scoped>
.biz-display-container {
  width: 100%;
  height: 100%;

  .biz-display-header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    text-align: center;
    padding: 10px 0;
  }

  .biz-display-body {
    height: calc(100% - 1rem - 20px);
  }
}
</style>