极客观点
项目管理
HarmonyOS
<template>
<!-- <div class="dialog"> -->
<!-- 控制弹窗显示/隐藏 -->
<el-dialog v-model="props.visible" v-if="props.visible">
<div class="dialog_content">
<div class="dialog_content_title"> {{ props.title }}</div>
<div class="main">
<div class="join-detail">
<div class="table-wrap">
<el-table v-if="tableData" ref="tableRef" :data="tableData" height="100%" class="custom-table" stripe>
<el-table-column :label="areaTitleName" prop="areaName" fixed width="130">
</el-table-column>
</el-table>
<el-table v-else ref="tableRef" id="tableRef" :data="tableData" height="100%" class="custom-table" stripe> <el-table-column label="计划场次" prop="planSession" sortable="planSession" align="center">
<template #default="scope">
<span class="area-span">
<span
:class="data.areaHistoryList[data.areaHistoryIndex].level == 'cq' && !data.areaHistoryList[data.areaHistoryIndex].rankType ? '' : 'area-name'"
@click="showConversion(scope.row, '1')">{{ scope.row.planSession ?? '--' }}</span>
</span>
</template>
</el-table-column>
<el-table-column label="执行场次" prop="executeSession" sortable="executeSession" align="center">
<template #default="scope">
<span class="area-span">
<span
:class="data.areaHistoryList[data.areaHistoryIndex].level == 'cq' && !data.areaHistoryList[data.areaHistoryIndex].rankType ? '' : 'area-name'"
@click="showConversion(scope.row, '2')">{{ scope.row.executeSession ?? '--' }}</span>
</span>
</template>
</el-table-column>
<el-table-column label="有效场次" prop="validSession" sortable="validSession" align="center">
<template #default="scope">
<span class="area-span">
<span
:class="data.areaHistoryList[data.areaHistoryIndex].level == 'cq' && !data.areaHistoryList[data.areaHistoryIndex].rankType ? '' : 'area-name'"
@click="showConversion(scope.row, '3')">{{ scope.row.validSession ?? '--' }}</span>
</span>
</template>
</el-table-column>
<el-table-column v-for="(item, index) in tableColumnList" :key="index" :prop="item.prop"
:label="item.label" :width="item.width" :sortable="item.sortable" align="center">
<template #default="scope">
<div class="hb">
<span>{{ scope.row[item.prop] || '--' }}</span>
<!-- 滑动条 -->
<img v-if="item.isArrow && comFun.formatRate(scope.row[item.prop]) > 0"
src="@/assets/images/leader-board/up.png" alt="">
<img v-if="item.isArrow && comFun.formatRate(scope.row[item.prop]) < 0"
src="@/assets/images/leader-board/down.png" alt="">
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="page">
<el-pagination size="small" layout="prev, pager, next" :total="50" />
</div>
</div>
</div>
</div>
</el-dialog>
------------------------------------------------------------------------
<script lang="ts" setup>
import { onMounted, ref, defineProps, getCurrentInstance, toRaw } from 'vue';
import Api from "@/assets/Apis/api.js";
import type { dataTypeStore } from '@/stores/business_develop/dataType';
import { useUserStore } from "@/stores/strongfd-board/user-strongfd"
import { reactive } from "vue";
import * as options from './tableOptions.js'
import { result } from 'lodash';
//定义了组件接受的属性
const props = defineProps(
{
title: {
type: String,
default: ''
},
sessionType: {
type: String,
default: ''
},
planObj: {
type: Object,
default: {}
},
visible: {
type: Boolean,
default: false,
}
})
const { proxy } = getCurrentInstance()
const tableColumnList = ref([])
const curSortObj = ref({
asc: null,
field: '' //存储当前排序的字段名
})
//存储和显示表格的数据
const tableData = ref([
])
const tableRef = ref(null)
const data = reactive({
areaHistoryList: [0], //用于存储区域历史记录
areaHistoryIndex: 0, //录当前区域历史记录的索引位置。
})
// 确保 areaHistoryIndex 不为 undefined
if (data.areaHistoryIndex === undefined) {
data.areaHistoryIndex = 0;
}
const pageNum = ref(1)
const user = useUserStore()
const fetchData = () => {
const { dateType, date, level, code } = user.userState
const { rankType } = data.areaHistoryList[data.areaHistoryIndex]
const params = {
rankType: rankType ? rankType : '',
// endDate: endDate,
// beginDate: beginDate,
pageNum: pageNum.value,
dateType,
areaLevel: level,
areaCode: code,
wjdhType: 'community',
orderBy: curSortObj.value['field'],
asc: curSortObj.value['asc'],
}
if (user.userState.dateType == 'C') {
params.beginDate = date[0]
params.endDate = date[1]
} else {
params.dateStr = date
}
//区域编码传递参数
proxy.$post(Api.lightSecond.dataList, params).then(res => {
tableData.value = res.result.list;
//2：查看是否有返回至，以及哪些返回值
console.log( tableData.value)
});
};
//监听fetchData
proxy.$watch(() => user.userState, fetchData, { deep: true });
const showPlanListDialog = ref(false)
const sessionType = ref('1')
const planName = ref('')
const planObj = ref({})
// 展示场次
const showConversion = (item, type) => {
debugger
const { dateType, date, level, code } = user.userState
if(level == 'cq' && !rankType){
return
}else{
planObj.value = item
sessionType.value = type
planName.value = item.areaName + (type == '1' ? '计划场次': type == '2' ? '执行场次' : '有效场次')
showPlanListDialog.value = true
}
}
onMounted(() => {
const init = () => {
tableData.value = []
}
fetchData();
tableColumnList.value = options.marketingTransfer
data.areaHistoryList.push({
level: user.userState.level,
code: user.userState.code,
name: user.userState.name
})
});
</script>这是我运行出来的图
这是我想要的图
希望从接口拿到的数据成功的渲染在表格上面
