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'">
        <el-table :data="data" height="100%" stripe
                  @row-click="handleRowClick">
          <el-table-column v-for="column in columns" :key="column.key" :label="column.value"
                           :prop="column.key">
            <template #default="scope">

              {{ getValueByKey(scope.row, column.key) }}
            </template>
          </el-table-column>
        </el-table>
      </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, getTableData, getText} from '@/utils/biz'
import GwTableTwo from "./GwTableTwo.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";

defineExpose({
  loadData
})

const slots = useSlots();
const props = defineProps({
  config: {
    type: Object,
  },
  showTitle: {
    type: Boolean,
    default: true
  },
});

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)

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

  // 解析点击配置
  const renderingOptions = JSON.parse(config.renderingOptions || '{}')
  clickConfig.value = renderingOptions.clickAction || {type: 'none'}

  switch (config.type) {
    case 'chart':
      nextTick(() => {
        getChartOption(config).then(r => data.value = r);
      })
      return;
    case 'list':
      columns.value = renderingOptions.columns
      debugger
      return getTableData(config).then(r => data.value = r);
    case 'table':
      columnNumber.value = renderingOptions.columnNumber
      return getFormListData(config).then(r => data.value = r);
    case 'text':
      return getText(config).then(r => data.value = r);
  }
}

// 处理行点击事件
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})
    }
  }
}

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>