foreign-admin-ui/src/views/order/position/index.vue

83 lines
2.4 KiB
Vue

<template>
<div class="position-stat table_form-container">
<!-- 搜索 -->
<PositionStatSearch
:buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
@reset="handleReset">
<!-- <template #button="{ form }">-->
<!-- <el-button type="primary" @click="handleExport()">-->
<!-- 导出-->
<!-- </el-button>-->
<!-- </template>-->
</PositionStatSearch>
<!-- 表格 -->
<PositionStatTable :table-data="orderPositionStore.positionOrderList" :columns="tableColumnsOptions"
:loading="loading" row-key="id" />
</div>
</template>
<script setup lang="ts">
defineOptions({
name: 'Position',
})
// 组件
import PositionStatSearch from '@/components/common/Search.vue'
import PositionStatTable from '@/components/common/Table.vue'
import { checkAccountIdIsSonForUser } from '@/api/modules/user.ts'
// 配置以及表单验证
import { search, tableColumns } from './options'
import { useTransactionStore } from '@/stores/modules/transaction.ts'
import { useOrderPositionStore } from '@/stores/modules/orderPosition.ts'
import { usePageLoading } from '@/composables/useLoading'
// 按钮 loading
const { loading, startLoading, stopLoading } = usePageLoading()
// 导出表格
import { exportToExcel } from '@/utils/exportToExcel'
const transactionStore = useTransactionStore()
const orderPositionStore = useOrderPositionStore()
/**
* @description: 定义搜索数据
*/
const searchOptions = ref(search)
const searchForm = ref({
account_id: '',
})
/**
* @description: 定义表格数据
*/
const tableTree = ref([])
const tableColumnsOptions = ref(tableColumns)
/**
* @description: 定义搜索方法
*/
const handleSearch = async () => {
try {
startLoading()
const data = await checkAccountIdIsSonForUser({ account_id: searchForm.value.account_id })
if (!data.flag) {
return ElMessage.warning('请输入下级ID')
}
transactionStore.getPositionList(searchForm.value.account_id)
} finally { stopLoading() }
}
const handleReset = () => {
console.log('重置搜索')
}
const handleExport = () => {
exportToExcel({
tableData: tableTree.value,
columns: tableColumnsOptions.value,
title: '导出资金明细',
defaultFileNamePrefix: '资金明细',
})
}
onMounted(() => {
transactionStore.initMarketConditionsMQTT()
})
</script>