场景：点击按钮控制统计页面是否展示，展开之后展示统计数据的柱状图，并支持按搜索条件搜索，刷新柱状图
先补充下v-if和v-show知识：可以直接看'--------------''下面内容
v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除。
v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染
v-show 由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法
-------------------------------------------------------------------------------------------------------------------------
也就是说：当你使用v-if的时候，v-if=true也就触发了组件的生命周期，当你想刷新组件内容的时候，必须要销毁这个周期，在重新创建，也就是先false在true
v-show的话只是进行了隐藏，display：none
这是子页面echarts：
<template>
<a-card :body-style="{ padding: '10px' }" :head-style="{ padding: '0 10px' }" title="收入分析图" :bordered="false"
class="card-border-radius">
<div class="chart-item-container">
<a-skeleton animation v-if="loading">
<a-skeleton-line :rows="4" />
</a-skeleton>
<template v-else>
<div ref="payOrderAcctChart" class="chart-item"></div>
</template>
</div>
</a-card>
</template>
<script lang="ts">
import useEcharts from '@/hooks/useEcharts'
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRefs, reactive } from 'vue'
import { dispose, graphic } from 'echarts/core'
//日期数组
var months = ref([])
export default defineComponent({
name: 'payOrderAcctChart',
props: {
dayValue: Array
},
setup(props) {
const loading = ref(false)
const payOrderAcctChart = ref<HTMLDivElement | null>(null)
const data = toRefs(props)
var dayAcct = data.dayValue.value
console.log(dayAcct?.map(o => { return [o.crtDay].toString() }), '123-------------------')
months = dayAcct?.map(o => { return [o.crtDay].toString() })
const init = () => {
const option = {
color: ['rgba(64, 58, 255)'],
legend: {
icon: 'rect',
itemWidth: 30, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 24, // 设置间距
data: ['实际收入金额', '支付失败金额', '退款金额'],
textStyle: {
//文字样式
color: '#00000',
fontSize: '12'
},
right: '30%'
},
grid: {
top: '10%',
left: '2%',
right: '2%',
bottom: '5%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: months,
axisLabel: {
interval: 0 //设置间隔为0
}
},
yAxis: {
type: 'value',
max: 3000,
},
dataZoom: {
show: true, // 为true 滚动条出现
realtime: true,
type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
height: 25, // 表示滚动条的高度，也就是粗细
start: 0, // 表示默认展示20%～80%这一段。
end: months.length >6?14:Math.floor(100 / (months.length / 6)),
bottom: -15
},
series: [
{
name: '实际收入金额',
type: 'bar',
barWidth: '20%',
data: dayAcct?.map(o => { return ([o.dayRecepitAcct].toString()/100).toFixed(2) })
},
{
name: '支付失败金额',
type: 'bar',
barWidth: '20%',
data: dayAcct?.map(o => { return ([o.dayFailAcct].toString()/100).toFixed(2) })
},
{
name: '退款金额',
type: 'bar',
barWidth: '20%',
data: dayAcct?.map(o => { return ([o.dayRefundAcct].toString()/100).toFixed(2) })
}
],
color: ['#3c5fff', '#e53e3b', '#d1dca9']
}
setTimeout(() => {
loading.value = false
setTimeout(() => {
nextTick(() => useEcharts(payOrderAcctChart.value as HTMLDivElement).setOption(option))
}, 100)
}, 100)
}
const updateChart = () => {
useEcharts(payOrderAcctChart.value as HTMLDivElement).resize()
}
onMounted(init)
onBeforeUnmount(() => {
dispose(payOrderAcctChart.value as HTMLDivElement)
// clearInterval(interval)
})
return {
loading,
payOrderAcctChart,
updateChart,
}
},
})
</script>
<style lang="less" scoped>
.chart-item-container {
width: 100%;
.chart-item {
height: 38vh;
}
}
</style>
父页面引用和操作：
<div v-if="show">
<a-row>
<a-col :span="6">
<div class="acctStyle">
<a-card title="总金额" hoverable>
<span class="fontSize" style="color: #0c94ee">{{ ((dataAcct.totalAcct) / 100).toFixed(2) }}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card class="fontSize" title="实际收入" hoverable>
<!-- <span v-if="(dataAcct.recepitAcct/100).toFixed(2)=='NaN'">---</span> -->
<span>{{ (dataAcct.recepitAcct / 100).toFixed(2) }}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card class="fontSize" title="退款金额" hoverable>
<!-- <span v-if="(dataAcct.refundAcct/100).toFixed(2)=='NaN'">---</span> -->
<span style="color: rgba(234,178,12,0.85)">{{ (dataAcct.refundAcct / 100).toFixed(2) }}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="支付失败" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ (dataAcct.failAcct / 100).toFixed(2)
}}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="总订单数" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.totalCount }}</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="成功订单数" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.totalSuccCount }}</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="失败订单数" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.failCount }}</span>
</a-card>
</div>
</a-col>
<a-col :span="18">
<div style="margin:20px" v-if="flushData">
<a-space direction="vertical" style="width: 100%">
<PayOrderAcctChart ref="payOrderAcctChart" :dayValue="dayIncomeDetail" />
</a-space>
<a-space direction="vertical" style="width: 100%;padding-top: 20px;">
<PayOrderCountChart ref="payOrderCountChart" :dayValue="dayIncomeDetail" />
</a-space>
</div>
</a-col>
</a-row>
</div>import { post, get } from '@/api/http'
import { getMerchantList, searchProveniceCityList, getOrderPage, getOrderStatis } from '@/api/url'
import { usePagination, useRowKey, useRowSelection, useTable, useTableColumn } from '@/hooks/table'
import { FormItem } from '@/types/components'
import { before } from 'lodash'
import { onBeforeMount, onBeforeUnmount, h, onMounted, ref, reactive, computed, watch, onBeforeUpdate, onActivated } from 'vue'
import PayOrderAcctChart from './chart/PayOrderAcctChart.vue'
import PayOrderCountChart from './chart/PayOrderCountChart.vue' function onSearch() {
pagination.setPage(1)
onSearchByPage()
flushData.value = false
setTimeout(() => { // 此处采用了定时器，并没有采用网上比较常见的nextTick
flushData.value = true // 设置为true，重新挂载dom
}, 500)
}<template>
<div class="main-container">
<TableBody ref="tableBody">
<template #header>
<TableHeader :show-filter="true" title="支付订单" @search="onSearch" @reset-search="onResetSearch">
<template #search-content>
<a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 4, xxl: 6 }" :colGap="12" :rowGap="16"
class="grid-demo-grid">
<a-grid-item>
<a-cascader :options="provinceCity" v-model="companyValueId"
:style="{ height: '30px', marginRight: '28px' }" placeholder="省市选择" allow-clear />
</a-grid-item>
<a-grid-item v-for="item of conditionItems" :key="item.key" :label="item.label">
<template v-if="item.render">
<FormRender :render="item.render" :formItem="item" />
</template>
<template v-else>
<template v-if="item.type === 'input'">
<div class="frame">
<a-input @focus="download(item.key)" @blur="unfocused(item.key, item.value.value)"
@clear="empty(item.key)" v-model="item.value.value" allow-clear />
<label v-if="item.key == 'ordId'"
:class="[{ 'focusBlur': changeIndex == 1 }, { 'focusBlurTwo': changeIndex == 2 }]">{{
item.placeholder
}}</label>
<label v-if="item.key == 'shopId'"
:class="[{ 'focusBlur': changeIndex1 == 1 }, { 'focusBlurTwo': changeIndex1 == 2 }]">{{
item.placeholder
}}</label>
<label v-if="item.key == 'pfMerchantId'"
:class="[{ 'focusBlur': changeIndex2 == 1 }, { 'focusBlurTwo': changeIndex2 == 2 }]">{{
item.placeholder
}}</label>
</div>
</template>
<template v-if="item.type === 'select'">
<a-select v-model="item.value.value" :placeholder="item.placeholder" allow-clear>
<a-option v-for="optionItem of item.optionItems" :key="optionItem.value"
:value="optionItem.value">
{{ optionItem.label }}
</a-option>
</a-select>
</template>
<template v-if="item.type === 'date'">
<a-range-picker v-model="item.value.value" format="YYYYMMDD" />
</template>
<template v-if="item.type === 'check-group'">
<a-checkbox-group v-model="item.value.value">
<a-checkbox v-for="it of item.optionItems" :value="it.value" :key="it.value">
{{ item.label }}
</a-checkbox>
</a-checkbox-group>
</template>
</template>
</a-grid-item>
<a-grid-item>
<a-range-picker @change="onChangeDate" v-model="dateValue" format="YYYYMMDD" />
</a-grid-item>
</a-grid>
</template>
</TableHeader>
</template>
<template #middle>
<div class="class1">
<div class="left">
<a-button style="background: #2691ff26!important; color: #1965ff;" @click="openC">
<icon-bar-chart />数据统计
</a-button>
<div class="right">
<span style="width: 105px;">自动刷新：{{ time }}</span>
<a-switch v-model="timeValue" checked-value="yes" unchecked-value="no" @change="stop"></a-switch>
<a-tooltip content="数据导出">
<a-button class="btn1">
<icon-download :size="20" />
</a-button>
</a-tooltip>
<!-- <a-popover content="列编辑">
<a-button class="btn1"><icon-pen-fill :size="20" /></a-button>
</a-popover> -->
</div>
</div>
<div v-if="show">
<a-row>
<a-col :span="6">
<div class="acctStyle">
<a-card title="总金额" hoverable>
<span class="fontSize" style="color: #0c94ee">{{ ((dataAcct.totalAcct) / 100).toFixed(2) }}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card class="fontSize" title="实际收入" hoverable>
<!-- <span v-if="(dataAcct.recepitAcct/100).toFixed(2)=='NaN'">---</span> -->
<span>{{ (dataAcct.recepitAcct / 100).toFixed(2) }}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card class="fontSize" title="退款金额" hoverable>
<!-- <span v-if="(dataAcct.refundAcct/100).toFixed(2)=='NaN'">---</span> -->
<span style="color: rgba(234,178,12,0.85)">{{ (dataAcct.refundAcct / 100).toFixed(2) }}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="支付失败" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ (dataAcct.failAcct / 100).toFixed(2)
}}元</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="总订单数" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.totalCount }}</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="成功订单数" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.totalSuccCount }}</span>
</a-card>
</div>
<div class="acctStyle">
<a-card title="失败订单数" hoverable>
<span :style="{ color: '#1D2129' }" class="fontSize">{{ dataAcct.failCount }}</span>
</a-card>
</div>
</a-col>
<a-col :span="18">
<div style="margin:20px" v-if="flushData">
<a-space direction="vertical" style="width: 100%">
<PayOrderAcctChart ref="payOrderAcctChart" :dayValue="dayIncomeDetail" />
</a-space>
<a-space direction="vertical" style="width: 100%;padding-top: 20px;">
<PayOrderCountChart ref="payOrderCountChart" :dayValue="dayIncomeDetail" />
</a-space>
</div>
</a-col>
</a-row>
</div>
</div>
</template>
<template #default>
<a-table :loading="tableLoading" :data="dataList" :columns="tableColumns" :pagination="false" :scroll="scroll"
@selection-change="onSelectionChange">
<!-- :row-selection="{ selectedRowKeys }"//选择框-->
<!-- :row-key="pfMerchantId" -->
<template #columns>
<a-table-column v-for="item of tableColumns" :key="item.key" :align="item.align" :title="item.title"
:width="item.width" :data-index="item.key" :fixed="item.fixed" :ellipsis="item.ellipsis"
:tooltip="item.tooltip">
<template v-if="item.key === 'billAcct'" #cell="{ record }">
<p>{{ (record.billAcct / 100).toFixed(2) }}</p>
</template>
<template v-if="item.key === 'cancelAcct'" #cell="{ record }">
<p>{{ (record.cancelAcct / 100).toFixed(2) }}</p>
</template>
<!-- <template v-if="item.key === 'userId'" #cell="{ record }">
<p>{{(record.cancelAcct/100).toFixed(2)}}</p>
</template> -->
<template v-else-if="item.key === 'channelId'" #cell="{ record }">
<span v-if="record.channelId === 'SFT_PAY'">盛付通</span>
</template>
<template v-else-if="item.key === 'payChannel'" #cell="{ record }">
<a-tag color="green" v-if="record.payChannel === '60'">微信</a-tag>
<a-tag color="blue" v-else-if="record.payChannel === '70'">支付宝</a-tag>
<a-tag color="red" v-else-if="record.payChannel === '40'">云闪付</a-tag>
</template>
<template v-else-if="item.key === 'state'" #cell="{ record }">
<a-tag color="blue" v-if="record.state === '10A'">成功</a-tag>
<a-tooltip v-else-if="record.state === '10F'" :content="record.respMsg">
<a-tag color="red">失败</a-tag>
</a-tooltip>
<a-tag color="green" v-else-if="record.state === '10E'">不明确</a-tag>
</template>
<template v-else-if="item.key === 'actions'" #cell="{ record }">
<a-button type="text" @click="handleClick(record)"><span style="color: #1890ff;">详情</span></a-button>
</template>
</a-table-column>
<a-drawer :visible="visible" width="55%" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
<template #title>
<div style="color: blue;">详情</div>
</template>
<div style="font-size: 18px;">
<b>订单信息</b>
<div style="font-size: 14px;margin:3px 0px 3px 0px;">
<div style="padding: 6px;">
<a-row class="detalis">
<a-col :span="12">
<div>订单流水号：{{ drawerData.fromFlowId }}</div>
</a-col>
<a-col :span="12">
<div>订单编号：{{ drawerData.orderId }}</div>
</a-col>
</a-row>
<a-row class="detalis">
<a-col :span="12">
<div>订单号：{{ drawerData.fromOrderId }}</div>
</a-col>
<a-col :span="12">
<div>订单创建时间：{{ drawerData.crtDate }}</div>
</a-col>
</a-row>
<a-row class="detalis">
<a-col :span="12">
<div>支付金额(元）：{{ (drawerData.billAcct / 100).toFixed(2) }}</div>
</a-col>
<a-col :span="12">
<div>退款金额（元）：{{ (drawerData.cancelAcct / 100).toFixed(2) }}</div>
</a-col>
</a-row>
<a-row class="detalis">
<a-col :span="12">
<div>支付方式：
<a-tag color="green" v-if="drawerData.payChannel === '60'">微信</a-tag>
<a-tag color="blue" v-else-if="drawerData.payChannel === '70'">支付宝</a-tag>
<a-tag color="red" v-else-if="drawerData.payChannel === '40'">云闪付</a-tag>
</div>
</a-col>
<a-col :span="12">
<div>状态：
<a-tag color="blue" v-if="drawerData.state === '10A'">成功</a-tag>
<a-tag color="red" v-else-if="drawerData.state === '10F'">失败</a-tag>
<a-tag color="green" v-else-if="drawerData.state === '10E'">不明确</a-tag>
</div>
</a-col>
</a-row>
<!-- <p>创建日期：{{drawerData.crtDay}}</p> -->
</div>
</div>
<b>商户信息</b>
<div style="font-size: 14px;margin:3px 0px 3px 0px;">
<div style="padding: 6px;">
<a-row class="detalis">
<a-col :span="12">
<div>平台商户号：{{ drawerData.pfMerchantId }}</div>
</a-col>
<a-col :span="12">
<div>公司编码：{{ drawerData.companyId }}</div>
</a-col>
</a-row>
<a-row class="detalis">
<a-col :span="12">
<div>店铺名称：{{ drawerData.pfMerchantName }}</div>
</a-col>
<a-col :span="12">
<div>店铺编号：{{ drawerData.shopId }}</div>
</a-col>
</a-row>
<a-row class="detalis">
<a-col :span="12">
<div>用户标识：{{ drawerData.userId }}</div>
</a-col>
<a-col :span="12">
<div>通道类型：<span v-if="drawerData.channelId === 'SFT_PAY'">盛付通</span></div>
</a-col>
</a-row>
<a-row class="detalis">
<a-col :span="12">
<div>返回信息：{{ drawerData.respMsg }}</div>
</a-col>
<a-col :span="12">
<div>返回码：{{ drawerData.respCode }}</div>
</a-col>
</a-row>
</div>
</div>
</div>
</a-drawer>
</template>
</a-table>
</template>
<template #footer>
<TableFooter :pagination="pagination" />
</template>
</TableBody>
</div>
</template>
<script lang="ts">
import { post, get } from '@/api/http'
import { getMerchantList, searchProveniceCityList, getOrderPage, getOrderStatis } from '@/api/url'
import { usePagination, useRowKey, useRowSelection, useTable, useTableColumn } from '@/hooks/table'
import { FormItem } from '@/types/components'
import { before } from 'lodash'
import { onBeforeMount, onBeforeUnmount, h, onMounted, ref, reactive, computed, watch, onBeforeUpdate, onActivated } from 'vue'
import PayOrderAcctChart from './chart/PayOrderAcctChart.vue'
import PayOrderCountChart from './chart/PayOrderCountChart.vue'
const conditionItems: Array<FormItem> = [
{
key: 'ordId',
label: '订单流水号',
placeholder: '请输入订单流水号或订单号',
type: 'input',
value: ref(''),
reset: function () {
this.value.value = ''
},
},
{
key: 'shopId',
label: '店铺编号',
placeholder: '请输入店铺编号',
type: 'input',
value: ref(''),
reset: function () {
this.value.value = ''
},
},
{
key: 'pfMerchantId',
label: '平台商户号',
placeholder: '请输入平台商户号',
type: 'input',
value: ref(''),
reset: function () {
this.value.value = ''
},
},
{
key: 'payChannel',
label: '支付方式',
placeholder: '请选择支付方式',
type: 'select',
value: ref(),
optionItems: [
{
label: '微信',
value: '60',
},
{
label: '支付宝',
value: '70',
},
{
label: '云闪付',
value: '40',
},
],
reset: function () {
this.value.value = undefined
},
},
{
key: 'state',
label: '订单状态',
placeholder: '请选择订单状态',
type: 'select',
value: ref(),
optionItems: [
{
label: '成功',
value: '10A',
},
{
label: '失败',
value: '10F',
},
{
label: '不明确/退款时',
value: '10E',
},
],
reset: function () {
this.value.value = undefined
},
},
]
interface Acct {
totalAcct: any
recepitAcct: any
refundAcct: any
failAcct: any
totalCount: any
totalSuccCount: any
failCount: any
incomeDetail: any
}
const dataAcct = reactive<Acct>({
totalAcct: '',
recepitAcct: '',
refundAcct: '',
failAcct: '',
totalCount: '',
totalSuccCount: '',
failCount: '',
incomeDetail: []
})
export default {
name: 'TableWithSearch',
components: {
PayOrderAcctChart,
PayOrderCountChart,
},
setup() {
const selectedKeys = ref([])
const rowSelection = {
type: 'checkbox',
showCheckedAll: true,
}
const searchForm = ref()
const pagination = usePagination(onSearchByPage)
const { selectedRowKeys, onSelectionChange } = useRowSelection()
const table = useTable()
const rowKey = useRowKey('id')
const provinceCity = reactive([])
const companyValueId = ref('')
const payOrderAcctChart = ref<InstanceType<typeof PayOrderAcctChart>>()
const payOrderCountChart = ref<InstanceType<typeof PayOrderCountChart>>()
const tableColumns = useTableColumn([
{
title: '订单流水号',
key: 'fromFlowId',
dataIndex: 'fromFlowId',
fixed: 'left',
width: 200,
},
{
title: '订单号',
key: 'fromOrderId',
dataIndex: 'fromOrderId',
width: 340,
fixed: 'left',
},
{
title: '支付金额(元)',
key: 'billAcct',
dataIndex: 'billAcct',
},
{
title: '退款金额(元)',
key: 'cancelAcct',
dataIndex: 'cancelAcct',
},
{
title: '公司编码',
key: 'companyId',
dataIndex: 'companyId',
},
{
title: '店铺名称',
key: 'pfMerchantName',
dataIndex: 'pfMerchantName',
width: 260,
},
{
title: '店铺编号',
key: 'shopId',
dataIndex: 'shopId',
},
{
title: '平台商户号',
key: 'pfMerchantId',
dataIndex: 'pfMerchantId',
},
{
title: '用户标识',
key: 'userId',
dataIndex: 'userId',
ellipsis: true,
tooltip: true,
width: 280,
},
{
title: '通道类型',
key: 'channelId',
dataIndex: 'channelId',
},
{
title: '支付方式',
key: 'payChannel',
dataIndex: 'payChannel',
},
{
title: '订单状态',
key: 'state',
dataIndex: 'state',
},
{
title: '创建时间',
key: 'crtDate',
dataIndex: 'crtDate',
width: 200,
},
{
title: '操作',
key: 'actions',
fixed: 'right',
width: 140,
dataIndex: 'actions',
},
])
const dataList = reactive([])
const scroll = {
x: 2600,
y: 600,
}
function doRefresh() {
const param = {
current: pagination.page,
size: pagination.pageSize,
}
get({
url: getOrderPage,
data: { sign: param },
header: { auth: true },
})
.then((res) => {
const resData = {
data: res.data.records,
}
dataList.value = resData.data
table.handleSuccess(resData)
pagination.setTotalSize(res.data.total || 10)
})
.catch(console.log)
}
function getProveniceAndCity() {
get({
url: searchProveniceCityList,
data: {},
header: { auth: true },
})
.then((res) => {
const resData = res.data
for (let k = 0; k < resData.length; k++) {
if (resData[k].cityList.length > 0) {
let singleIncomeInfo = {
label: resData[k].provinceName,
value: resData[k].provinceCode,
children: [],
}
provinceCity.push(singleIncomeInfo)
for (let i = 0; i < resData[k].cityList.length; i++) {
let countyTown = {
label: resData[k].cityList[i].companyDesc,
value: resData[k].cityList[i].companyId,
}
provinceCity[k].children.push(countyTown)
}
} else {
let singleIncomeInfo = {
label: resData[k].provinceName,
value: resData[k].companyId,
}
provinceCity.push(singleIncomeInfo)
}
}
})
.catch(console.log)
return provinceCity
}
onMounted(getProveniceAndCity)
//日期参数
const dateValue = ref([])
const dateValueParem = [
{
key: 'beginDate',
value: ref('')
},
{
key: 'endDate',
value: ref('')
},
]
function onChangeDate(dateString) {
if (dateString && dateString != []) {
dateValueParem[0].value.value = dateString[0];
dateValueParem[1].value.value = dateString[1];
dateValue.value = dateString
}
}
function onSearch() {
pagination.setPage(1)
onSearchByPage()
flushData.value = false
setTimeout(() => { // 此处采用了定时器，并没有采用网上比较常见的nextTick
flushData.value = true // 设置为true，重新挂载dom
}, 500)
}
//页码
function onSearchByPage() {
const param = {
current: pagination.page,
size: pagination.pageSize,
}
if (companyValueId.value != '') {
param['companyId'] = companyValueId.value
}
conditionItems.reduce((pre, cur) => {
if (cur.value.value !== '') {
param[cur.key] = cur.value.value
}
}, {})
dateValueParem.reduce((pre, cur) => {
if (cur.value.value !== '') {
param[cur.key] = cur.value.value
}
}, {})
get({
url: getOrderPage,
data: { sign: param },
header: { auth: true },
})
.then((res) => {
const resData = {
data: res.data.records,
}
table.handleSuccess(resData)
pagination.setTotalSize(res.data.total || 10)
})
.catch(console.log)
get({
url: getOrderStatis,
data: { sign: param },
header: { auth: true },
})
.then((res) => {
const resData = {
data: res.data
}
dataAcct.totalAcct = resData.data.totalAcct
dataAcct.recepitAcct = resData.data.recepitAcct
dataAcct.refundAcct = resData.data.failAcct
dataAcct.failAcct = resData.data.totalAcct
dataAcct.totalCount = resData.data.totalCount
dataAcct.totalSuccCount = resData.data.totalSuccCount
dataAcct.failCount = resData.data.failCount
dataAcct.incomeDetail = resData.data.incomeDetail
dayIncomeDetail.value = dataAcct.incomeDetail
})
.catch(console.log)
}
function onResetSearch() {
conditionItems.forEach((it) => {
it.reset ? it.reset() : (it.value.value = '')
empty(it.key)
})
//清楚省市为空
companyValueId.value = ''
//清除日期为空
dateValue.value = []
dateValueParem.forEach((it) => {
it.value.value = ''
})
doRefresh()
}
//数据统计展开
const show = ref(false)
//刷新数据
const flushData = ref(false)
function openC() {
show.value = !show.value
flushData.value = !flushData.value
onSearchCount()
}
//数据统计
const dayIncomeDetail = ref([])
function onSearchCount() {
const param = {
ordType: "1",
}
if (companyValueId.value != '') {
param['companyId'] = companyValueId.value
}
conditionItems.reduce((pre, cur) => {
if (cur.value.value !== '') {
param[cur.key] = cur.value.value
}
}, {})
dateValueParem.reduce((pre, cur) => {
if (cur.value.value !== '') {
param[cur.key] = cur.value.value
}
}, {})
get({
url: getOrderStatis,
data: { sign: param },
header: { auth: true },
})
.then((res) => {
const resData = {
data: res.data
}
dataAcct.totalAcct = resData.data.totalAcct
dataAcct.recepitAcct = resData.data.recepitAcct
dataAcct.refundAcct = resData.data.failAcct
dataAcct.failAcct = resData.data.totalAcct
dataAcct.totalCount = resData.data.totalCount
dataAcct.totalSuccCount = resData.data.totalSuccCount
dataAcct.failCount = resData.data.failCount
dataAcct.incomeDetail = resData.data.incomeDetail
dayIncomeDetail.value = dataAcct.incomeDetail
})
.catch(console.log)
}
onBeforeMount(onSearchCount)
//倒计时
const timeValue = ref('yes')
const time = ref(200);
let timeRun = setInterval(countDown, 1000)
function stop() {
if (timeValue.value == 'yes') {
timeRun = setInterval(countDown, 1000)
} else {
clearInterval(timeRun)
}
}
function countDown() {
if (time.value === 0) {
doRefresh()
onSearchCount()
time.value = 200;
return;
} else {
time.value--;
}
}
onBeforeUnmount(() => {//销毁
clearInterval(timeRun)
})
//详情遮罩
const visible = ref(false);
let drawerData = ref<object>({})
const handleClick = (item: object) => {
drawerData.value = item
visible.value = true;
};
const handleOk = () => {
visible.value = false;
};
const handleCancel = () => {
visible.value = false;
}
onMounted(doRefresh)
//placeholder文字上滑
const changeIndex = ref(0)
const changeIndex1 = ref(0)
const changeIndex2 = ref(0)
function download(key) {
if (key == 'ordId') {
changeIndex.value = 1; //获取焦点等于1，展示第二套样式，文字提示平移到input框上面
} else if (key == 'shopId') {
changeIndex1.value = 1;
} else if (key == 'pfMerchantId') {
changeIndex2.value = 1;
}
}
function inputText(key) {
if (key == 'ordId') {
changeIndex.value = 1;
} else if (key == 'shopId') {
changeIndex1.value = 1;
} else if (key == 'pfMerchantId') {
changeIndex2.value = 1;
}
//changeIndex.value = 1; //当input值改变时，展示第二套样式，文字提示平移到input框上面
}
function empty(key) {
if (key == 'ordId') {
changeIndex.value = 0; //点击清空展示默认的样式
} else if (key == 'shopId') {
changeIndex1.value = 0;
} else if (key == 'pfMerchantId') {
changeIndex2.value = 0;
}
}
function unfocused(key, value) {
if (key == 'ordId') {
if (value != "") {
changeIndex.value = 2; //如果框中有值,展示第三套样式
} else if (value == "") {
changeIndex.value = 0; //失焦等于 0,展示默认样式
}
} else if (key == 'shopId') {
if (value != "") {
changeIndex1.value = 2; //如果框中有值,展示第三套样式
} else if (value == "") {
changeIndex1.value = 0; //失焦等于 0,展示默认样式
}
} else if (key == 'pfMerchantId') {
if (value != "") {
changeIndex2.value = 2; //如果框中有值,展示第三套样式
} else if (value == "") {
changeIndex2.value = 0; //失焦等于 0,展示默认样式
}
}
}
return {
changeIndex,
changeIndex1,
changeIndex2,
download,
inputText,
empty,
unfocused,
onChangeDate,
dateValue,
...table,
rowKey,
pagination,
searchForm,
tableColumns,
conditionItems,
onSearch,
onSearchByPage,
onResetSearch,
selectedRowKeys,
onSelectionChange,
provinceCity,
companyValueId,
scroll,
rowSelection,
selectedKeys,
openC,
onSearchCount,
show,
dataAcct,
payOrderAcctChart,
payOrderCountChart,
dayIncomeDetail,
timeValue,
stop,
time,
visible,
handleClick,
handleOk,
handleCancel,
drawerData,
flushData
}
},
}
</script>
<style lang="less" scoped>
.avatar-container {
position: relative;
width: 30px;
height: 30px;
margin: 0 auto;
vertical-align: middle;
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.avatar-vip {
border: 2px solid #cece1e;
}
.vip {
position: absolute;
top: 0;
right: -9px;
width: 15px;
transform: rotate(60deg);
}
}
.gender-container {
.gender-icon {
width: 20px;
}
}
.class1 {
margin: 0px auto 20px;
}
.left {
margin-left: auto;
}
.right {
float: right;
display: flex;
align-items: center;
}
.btn1 {
background-color: transparent;
border: 0px;
}
.fontSize {
font-size: 26px;
white-space: nowrap;
}
.countStyle {
// height: 160px;
margin: 10px;
background-color: rgb(245, 245, 245);
}
.acctStyle {
margin: 20px;
height: 122px;
}
.detalis {
padding-top: 6px;
padding-bottom: 6px;
}
.grid-demo-grid .demo-item,
.grid-demo-grid .demo-suffix {
height: 48px;
line-height: 48px;
color: var(--color-white);
text-align: center;
}
.grid-demo-grid .demo-item:nth-child(2n) {
background-color: rgba(var(--arcoblue-6), 0.9);
}
.grid-demo-grid .demo-item:nth-child(2n + 1) {
background-color: var(--color-primary-light-4);
}
.frame {
/* 宽高大家可根据自己需求进行调整，调整完后下面的样式也要进行微调 */
width: 100%;
height: 40px;
/* 父元素设置相对定位，这样子元素设置绝对定位后就会在父元素的左上角*/
position: relative;
}
.frame label {
/* 默认情况下的样式 */
position: absolute;
top: 0;
left: 3%;
padding: 0px 7px;
display: inline-block;
margin-top: -1.4%;
color: #9e9e9e;
font-size: 14px;
pointer-events: none;
height: 40px;
display: flex;
align-items: center;
transition: all 0.3s;
/*平移上方时，添加一个过渡效果让其没有那么的不自然，我这边设置了0.3秒执行完这个上移的操作 */
}
/* 获取焦点后的第一种样式 */
.frame .focusBlur {
position: absolute;
font-size: 12px;
top: -16%;
height: 16px;
color: rgb(64, 158, 255);
background-color: white;
}
/* 如果框中有值顶部文字颜色展示为黑色，第二种样式 */
.frame .focusBlurTwo {
position: absolute;
font-size: 12px;
top: -16%;
height: 16px;
background-color: white;
}
</style>
代码做备份，有时间格式化整理下，简单记录
3897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
