liebao-website/src/views/management/account/flowDetail.vue

<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import { getAccountFlow, getShopList } from '@/api'
import { message } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
let time = reactive({
  arr: [
    dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ]
})
let shopList = reactive({ arr: [{ id: 0, name: '' }] })
interface FormState {
  pageNum: Number
  pageSize: Number
  source: Number
  startTime?: String
  endTime?: String
  orderSn?: String
  cityName?: String
  shopId?: String
}
const params = reactive<FormState>({
  pageNum: 1,
  pageSize: 10,
  source: 2,
});
const pagination = reactive({
  total: 0,
  current: params.pageNum,
  pageSize: params.pageSize,
})
const columns = reactive([
  {
    title: '订单号',
    dataIndex: 'orderSn',
    align: 'center',
    key: '1'
  },
  {
    title: '城市',
    dataIndex: 'cityName',
    align: 'center',
    key: '1'
  },
  {
    title: '店铺名称',
    dataIndex: 'shopName',
    align: 'center',
    key: '1'
  },
  {
    title: '时间',
    dataIndex: 'createTime',
    align: 'center',
    key: '1'
  },
  {
    title: '收入(元)',
    dataIndex: 'amount',
    align: 'center',
    key: '1'
  },
  {
    title: '支出(元)',
    dataIndex: 'amount',
    align: 'center',
    key: '2'
  }
])
const data = reactive({ arr: [] })
const handleGetAccountFlow = () => {
  params.startTime = time.arr[0]
  params.endTime = time.arr[1]
  console.log('时间：', time.arr[0]);
  getAccountFlow(params).then((res: any) => {
    console.log('res', res);
    if (res.code === 200) {
      data.arr = res.data.data
      pagination.total = res.data.totalNums
    } else {
      message.error(res.msg)
    }
  })
}
handleGetAccountFlow()
const search = () => {
  pagination.current = 1
  params.pageNum = 1
  handleGetAccountFlow()
}
const handleTableChange = (e: any) => {
  pagination.current = e.current
  pagination.pageSize = e.pageSize
  params.pageNum = e.current
  params.pageSize = e.pageSize
  handleGetAccountFlow()
}
const handleGetShopList = () => {
  getShopList().then((res: any) => {
    if (res.code === 200) {
      shopList.arr = res.data
    } else {
      message.error(res.msg)
    }
  })
}
handleGetShopList()
onMounted(() => {

})
</script>
<template>
  <div class="text-20px text-[#222222] font-bold mb-30px">收支明细</div>
  <a-form :model="params" name="horizontal_login" layout="inline" autocomplete="off" class="mb-20px">
    <a-form-item label="订单号" name="orderSn">
      <a-input v-model:value="params.orderSn" placeholder="请输入要查询的订单号">
      </a-input>
    </a-form-item>
    <a-form-item label="城市" name="cityName">
      <a-input v-model:value="params.cityName" placeholder="请输入要查询的城市">
      </a-input>
    </a-form-item>
    <a-form-item label="店铺名称" name="shopName">
      <a-select v-model:value="params.shopId" style="width: 200px" placeholder="请选择要查询的店铺名称" allowClear>
        <a-select-option v-for="(v, i) in shopList.arr" :key="i" :value="v.id">{{ v.name }}</a-select-option>
      </a-select>
      <!-- <a-input v-model:value="params.shopId" placeholder="请选择要查询的店铺名称"> -->
      <!-- </a-input> -->
    </a-form-item>
    <a-form-item label="日期" name="time">
      <a-range-picker v-model:value="time.arr" valueFormat="YYYY-MM-DD" />
    </a-form-item>
    <a-form-item>
      <a-button class="ml-20px" type="primary" @click="search">查 询</a-button>
    </a-form-item>
  </a-form>
  <a-table :columns="columns" :data-source="data.arr" :pagination="pagination" bordered :scroll="true"
    @change="handleTableChange">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'amount' && column.key === '1'">
        <div>{{ record.type === 1 ? record.amount : '--' }}</div>
      </template>
      <template v-if="column.dataIndex === 'amount' && column.key === '2'">
        <div>{{ record.type === 2 ? record.amount : '--' }}</div>
      </template>
    </template>
  </a-table>

</template>
<style lang='scss' scoped>
</style>