zhuangxiuAdmin/src/views/Money/balance/index.vue

<script setup lang="tsx">
import { reactive, ref, watch, unref } from 'vue'
import { getMoneyLog } from '@/api/money'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { ContentWrap } from '@/components/ContentWrap'
import { FormSchema } from '@/components/Form'
import { Search } from '@/components/Search'
import { useSearch } from '@/hooks/web/useSearch'
import { searchTime } from '@/utils/searchTime'
import { searchMoney } from '@/api/money/types'
const { searchRegister, searchMethods } = useSearch()
const { setSchema } = searchMethods

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await getMoneyLog({
      ...searchParams.value,
      page: unref(currentPage) || 1,
      limit: unref(pageSize) || 10
    })
    if (types.value.length == 0) {
      types.value = res.data.types.list
    }
    return {
      list:
        res.data.data.data.map((ee) => {
          return ee
        }) || [],
      total: res.data.data.count || 0
    }
  }
})
const { dataList, loading, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: 'ID',
    align: 'center',
    width: 70
  },
  {
    field: 'nickname',
    label: '用户',
    minWidth: 100
  },
  {
    field: 'uid',
    label: '用户UID',
    align: 'center',
    headerAlign: 'center',
    minWidth: 80
  },
  {
    field: 'title',
    label: '类型',
    minWidth: 100
  },
  {
    field: 'number',
    label: '变动数量',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.pm > 0) {
          return (
            <>
              <div class={'color-green'}>+{row.number}</div>
            </>
          )
        } else {
          return (
            <>
              <div class={'color-red'}>-{row.number}</div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'balance',
    label: '变动后金额',
    minWidth: 100
  },
  {
    field: 'add_time',
    label: '时间',
    minWidth: 160
  },
  {
    field: 'mark',
    label: '备注',
    minWidth: 140
  },
  {
    field: 'status',
    label: '状态',
    width: 60,
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.status == 1) {
          return (
            <>
              <div class={'color-green'}>有效</div>
            </>
          )
        } else {
          return (
            <>
              <div class={'color-red'}>无效</div>
            </>
          )
        }
      }
    }
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'uid',
    label: 'uid',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入用户UID'
    }
  },
  {
    field: 'nickname',
    label: '用户昵称',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入用户昵称'
    }
  },
  {
    field: 'type',
    label: '类型',
    component: 'Select',
    componentProps: {
      placeholder: '请选择类型',
      options: []
    }
  },
  searchTime
])
const searchParams = ref<searchMoney>({
  uid: '',
  nickname: '',
  start_time: '',
  end_time: '',
  type: ''
})
const setSearchParams = (data: any) => {
  const search = searchParams.value
  search.uid = data.uid || ''
  console.log(data, 'data')
  search.nickname = data.nickname || ''
  if (data.time) {
    search.start_time = data.time[0] || ''
    search.end_time = data.time[1] || ''
  } else {
    search.start_time = ''
    search.end_time = ''
  }
  search.type = data.type || ''
  // searchParams.value = data
  getList()
}
const types = ref<any[]>([]) //查询类型
watch(
  () => types.value,
  (val) => {
    console.log(val, 'val')
    if (val) {
      setSchema([
        {
          field: 'type',
          path: 'componentProps.options',
          value: val.map((res) => {
            return {
              label: res.title,
              value: res.type
            }
          })
        }
      ])
      searchParams.value.type = ''
    }
  }
)
</script>

<template>
  <ContentWrap>
    <Search
      isCol
      :schema="searchSchema"
      @reset="setSearchParams"
      @search="setSearchParams"
      @register="searchRegister"
    />
    <div class="mb-10px"> </div>
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      stripe
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
  </ContentWrap>
</template>