dingxin_toolbox_vue/src/views/group/index.vue

<script setup>
import {onBeforeMount, ref, computed} from 'vue';
import {get_group_data, get_group_func} from "@/apis/group.js";

// region 表格数据代码
const groupData = ref([])
// const tableData = ref([])
const dataSwitch = ref(false)
const update_time = ref('')

// 表头数据
const funcData = ref([])
const modelArray = ref([])
const groupFilter = ref([])
// const funcObj = ref({})


// 通过异步请求获取功能列表
async function get_func() {
  funcData.value = []
  await get_group_func().then(res => {
    console.log(res)
    funcData.value = [...res]
  }).catch(err => {
        console.log(err)
      }
  )
}


// 通过异步请求获取集团数据
async function get_data() {
  tableData.value = []
  await get_group_data().then(res => {
    console.log(res)
    if (res.status === 'success') {
      update_time.value = res.data.update_datetime
      groupData.value = [...res.data.groups_data]
      console.log(groupData.value)
    }
  }).catch(err => {
    console.log(err)
  })
}

// 处理表格数据
const tableData = computed(() => {
  const data = []
  groupData.value.forEach(item => {
    groupFilter.value.push({
      'text': item['group_info']['group_name'] + '(' + item['group_info']['group_code'] + ')',
      'value': item['group_info']['group_name'] + '(' + item['group_info']['group_code'] + ')'
    })
    let tempData = {
      'group_info': item['group_info']['group_name'] + '(' + item['group_info']['group_code'] + ')',
      'group_link': item['group_info']['group_address'],
      'cinema_count': item['group_info']['cinema_count'],
    }
    item['group_data'].forEach(data => {
      if (dataSwitch.value === false) {
        tempData[data['func_id']] = data['data_count']
        // tempData[data['func_id']] = {'data': data['data_count'], 'tips':data['data_lasttime']}
        // tempData[data['func_id'] + '_data'] = data['data_count']
        // tempData[data['func_id'] + '_tips'] = data['data_lasttime']
      } else {
        tempData[data['func_id']] = data['data_lasttime']
        // tempData[data['func_id']] = {'data': data['data_lasttime'], 'tips':data['data_count']}
        // tempData[data['func_id'] + '_data'] = data['data_lasttime']
        // tempData[data['func_id'] + '_tips'] = data['data_count']
      }
    })
    data.push(tempData)
  })
  console.log('tableData', data)
  return data
})

const tableHeader = computed(() => {
  let funcObj = {}
  funcData.value.forEach(item => {
    modelArray.value.push(item['func_model'])
    if (funcObj.hasOwnProperty(item['func_model'])) {
      funcObj[item['func_model']].push(item)
    } else {
      funcObj[item['func_model']] = [item]
    }
  })
  console.log('funcObj', funcObj)
  modelArray.value = [...new Set(modelArray.value)]
  console.log('modelArray', modelArray.value)
  return funcObj
})

const filterHandler = (value, row, column) => {
  const property = column['property']
  return row[property] === value
}


// 定义生命周期，在加载时获取一次表格数据
onBeforeMount(
    async () => {
      await get_func()
      await get_data()
    }
)


// endregion

</script>

<template>
  <el-row align="middle" justify="end">
    <el-col :span="2">
      <el-text>数据更新时间：</el-text>
    </el-col>
    <el-col :span="3">
      <el-text>{{ update_time }}</el-text>
    </el-col>
    <el-col :span="6">
      <el-switch v-model="dataSwitch" active-text="数据最后更新时间" inactive-text="数据总条数" @change="get_data"/>
    </el-col>
  </el-row>

  <el-table :data="tableData" max-height="700" :row-style="{ height: '60px' }"
            empty-text='数据生成中，请等待3分钟后刷新！'>
    <el-table-column prop="group_info" label="集团名称" min-width="200" fixed column-key="group_info" :filters="groupFilter" :filter-method="filterHandler"></el-table-column>
    <el-table-column prop="cinema_count" label="集团影院数" min-width="120" sortable></el-table-column>
    <el-table-column v-for="(func_array,model) in tableHeader" :label="model" align="center">
      <el-table-column v-for="func in func_array" :prop="func['id']" :label="func['func_name']"
                       align="center" min-width="120" sortable>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>


<style>
.el-text {
  white-space: pre-wrap; /* 或者使用 pre-line */
}

.el-table .cell {
  white-space: pre-line;
}
</style>