186 lines
3.7 KiB
Vue
186 lines
3.7 KiB
Vue
<template>
|
|
<div class="container">
|
|
<a-table
|
|
:dataSource="dataSource"
|
|
:columns="columns"
|
|
:pagination="pagination"
|
|
:loading="loading"
|
|
@change="handleTableChange"
|
|
bordered
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.dataIndex === 'projectImage'">
|
|
<img :src="record.projectImage" style="width: 50px; height: 50px" />
|
|
</template>
|
|
<template v-if="column.key === 'action'">
|
|
<a-space :size="8">
|
|
|
|
<a-button
|
|
size="small"
|
|
danger
|
|
@click="settlementRecord(record)"
|
|
>
|
|
结算记录
|
|
</a-button>
|
|
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import type { TableProps } from 'ant-design-vue';
|
|
import myAxios from "../../api/myAxios.ts";
|
|
import router from "../../router";
|
|
|
|
interface PromoRecord {
|
|
id: number;
|
|
salespersonName: string;
|
|
salespersonPhone: string;
|
|
promoCodeInfoKey: string;
|
|
promoCodeLink: string;
|
|
projectName: string;
|
|
projectImage: string;
|
|
userId: number;
|
|
}
|
|
|
|
|
|
const columns = ref([
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'id',
|
|
key: 'id',
|
|
width: 20,
|
|
fixed: 'left',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '项目名称',
|
|
dataIndex: 'projectName',
|
|
key: 'projectName',
|
|
width: 20,
|
|
fixed: 'left',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '销售姓名',
|
|
dataIndex: 'salespersonName',
|
|
key: 'salespersonName',
|
|
width: 20,
|
|
fixed: 'left',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '联系电话',
|
|
dataIndex: 'salespersonPhone',
|
|
key: 'salespersonPhone',
|
|
width: 20,
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '优惠码',
|
|
dataIndex: 'promoCodeInfoKey',
|
|
key: 'promoCodeInfoKey',
|
|
width: 20,
|
|
align: 'center'
|
|
},
|
|
|
|
{
|
|
title: '项目图片',
|
|
dataIndex: 'projectImage',
|
|
key: 'projectImage',
|
|
width: 20,
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
fixed: 'right',
|
|
width: 70,
|
|
align: 'center'
|
|
|
|
}
|
|
]);
|
|
|
|
const dataSource = ref<PromoRecord[]>([]);
|
|
const loading = ref(false);
|
|
reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
sortField: 'id',
|
|
sortOrder: 'ascend',
|
|
id: '',
|
|
salespersonName: '',
|
|
salespersonPhone: '',
|
|
promoCodeInfoKey: '',
|
|
});
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
showSizeChanger: true,
|
|
showTotal: (total: number) => `共 ${total} 条`,
|
|
});
|
|
|
|
const fetchData = async () => {
|
|
const storedToken = localStorage.getItem('token');
|
|
try {
|
|
loading.value = true;
|
|
// 这里替换为你的实际API地址
|
|
const response:any = await myAxios.post('/promoCodeApply/page', {
|
|
// 直接传递请求参数
|
|
current: pagination.current,
|
|
pageSize: pagination.pageSize,
|
|
sortField: 'id',
|
|
sortOrder: 'ascend'
|
|
}, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': storedToken
|
|
}
|
|
});
|
|
console.log(response)
|
|
|
|
if (response.code === 1) {
|
|
dataSource.value = response.data.records;
|
|
// 确认total字段的位置
|
|
pagination.total = response.data.total
|
|
}
|
|
} catch (error) {
|
|
console.error('请求失败:', error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleTableChange: TableProps['onChange'] = (pag) => {
|
|
if (pag) {
|
|
pagination.current = pag.current!;
|
|
pagination.pageSize = pag.pageSize!;
|
|
}
|
|
fetchData();
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchData();
|
|
});
|
|
|
|
const settlementRecord=(id:string)=>{
|
|
router.push({
|
|
path:'/settlementRecord',
|
|
query:{
|
|
id:String(id)
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20px;
|
|
}
|
|
</style> |