import { defineComponent, PropType } from "vue";
export default defineComponent({
name: "LiTable",
props: {
data: {
type: Array as PropType<any[]>,
required: true
},
maxHeight: {
type: Number as PropType<number>,
required: true
},
columns: {
type: Array as PropType<{ prop: string; label: string; sortable?: boolean; minWidth?: number }[]>,
required: true
},
fixed: {
type: Boolean as PropType<boolean>,
default: true
}
},
setup(props) {
return () => (
<el-table data={props.data} style="width: 100%" max-height={props.maxHeight}>
{props.columns.map((item, index) => (
<el-table-column
fixed={props.fixed && index == 0 ? true : false}
prop={item.prop}
label={item.label}
sortable={item.sortable ?? false}
minWidth={item.minWidth ?? 120}
/>
))}
</el-table>
);
}
});
使用
import { BusinessOverview, LiTableOption } from "@/api/interface";
import { GetBusinessOverview } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import LiTable from "../../components/LiTable";
declare type param = {
dataTimeRange: string;
};
export declare type LiTableOption = {
data: any[];
maxHeight: number;
columns: { prop: string; label: string; sortable?: boolean; minWidth?: number }[];
fixed?: boolean;
};
export default defineComponent({
name: "Overview",
setup(): () => JSX.Element {
/* data */
let param = reactive<param>({
dataTimeRange: formatDate(0, "end", "yyyy-MM-dd")
});
let tableOption = reactive<LiTableOption>({
data: [],
maxHeight: 480,
columns: [
{
prop: "name",
label: "餐段"
},
{
prop: "orderCount",
label: "订单量"
},
{
prop: "total",
label: "营业额"
},
{
prop: "sumAmount",
label: "营业收入"
}
]
});
let dataReport = ref<BusinessOverview | null>();
let coreData = ref<
{
text: string;
value: any;
}[][]
>([]);
let consumeArray = ref<
{
text: string;
value: any;
}[][]
>([]);
/* methods */
const GetPageData: () => void = async () => {
dataReport.value = (await GetBusinessOverview(param)).data;
tableOption.data = dataReport.value.marketList;
coreData.value = [
[
{
text: `营业收入(元)`,
value: dataReport.value.sumAllAmount.toFixed(2)
},
{
text: `较上周营业收入`,
value: dataReport.value.compareSumAllAmount.toFixed(2)
}
],
[
{
text: `营业额(元)`,
value: dataReport.value.sumAmount.toFixed(2)
},
{
text: `较上周营业额`,
value: dataReport.value.compareSumAmount.toFixed(2)
}
],
[
{
text: `优惠金额(元)`,
value: dataReport.value.discountAmount.toFixed(2)
},
{
text: `较上周优惠金额`,
value: dataReport.value.compareDiscount.toFixed(2)
}
],
[
{
text: `订单量(单)`,
value: dataReport.value.orderCount.toFixed(2)
},
{
text: `较上周订单数`,
value: dataReport.value.compareOrderCount.toFixed(2)
}
]
];
consumeArray.value = dataReport.value.consumeIndex.map(l => [
{
text: l.title,
value: l.value
},
{
text: "较上周",
value: parseFloat(l.compareValue.split(" ")[1]).toFixed(2)
}
]);
};
const search: () => void = async () => {
await GetPageData();
};
async function reset(): Promise<void> {
param.dataTimeRange = formatDate(0, "end", "yyyy-MM-dd");
await GetPageData();
}
/* life circle */
onMounted(async function (): Promise<void> {
await GetPageData();
});
/* html */
return () => (
<div class="overview-container">
<div style="margin-bottom: 10px" class="card table-box">
<el-form inline={true} model={param} style="padding-top: 20px">
<el-form-item label="日期:">
<el-date-picker
v-model={param.dataTimeRange}
type="date"
start-placeholder="开始时间"
end-placeholder="结束时间"
clearable={false}
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon={Search} onClick={search}>
搜索
</el-button>
<el-button icon={Delete} onClick={reset}>
重置
</el-button>
</el-form-item>
</el-form>
</div>
<div
// class="mb10"
style={{
display: "flex",
justifyContent: "space-between"
}}
>
{coreData.value.map(l => (
<div
style={{
width: "24.5%"
}}
>
{l.map(o => (
<div
class="card"
style={{
borderRadius: `4px`,
height: "200px",
marginBottom: "10px",
display: `flex`,
flexDirection: `column`,
alignItems: `center`,
justifyContent: `center`
}}
>
<div
style={{
fontSize: `27px`,
fontWeight: `bold`
}}
>
{o.text}
</div>
<div
style={{
marginTop: `15px`,
fontSize: `22px`,
color: `#fdc31d`
}}
>
{o.value}
</div>
</div>
))}
</div>
))}
</div>
<div class="card mb10">
<LiTable data={tableOption.data} columns={tableOption.columns} maxHeight={tableOption.maxHeight} />
</div>
</div>
);
}
});
效果图