1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
<div>
<div style="display: flex;align-items: center;justify-content: space-between;">
<div>
<a-input-search v-model:value="value" placeholder="请输入商品名" style="width: 200px;margin-left: 20px;"
@search="onSearch" />
<!-- <a-space direction="vertical">
<a-select v-model:value="value1" :size="size" style="width: 200px;margin-left: 20px;" :options="options"></a-select>
</a-space> -->
</div>
<div>
<a-button type="primary" block>新建支付项</a-button>
</div>
</div>
<div style="margin-top: 10px;">
<a-table :dataSource="dataSource" :columns="columns">
<template #bodyCell="{ column,record }">
<div v-if="column.key == 'tags'">
<a-button type="primary" @click="onEdit">编辑</a-button>
<a-button type="primary" style="margin-left: 20px;">支付链接</a-button>
<a-button type="primary" style="margin-left: 20px;">统计</a-button>
<a-button type="primary" style="margin-left: 20px;">删除</a-button>
</div>
</template>
</a-table>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, defineExpose,onMounted} from 'vue';
import type { SelectProps } from 'ant-design-vue';
import {getUid} from '@/utils/userInfo'
import {onSelectGoods} from '@/api/index'
const popupScroll = () => {
console.log('popupScroll');
};
const value = ref<string>('');
const optionss = ref<Array<Object>>([])
const onSearch = (searchValue: string) => {
console.log('use value', searchValue);
console.log('or use this.value', value.value);
};
const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
]
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title: '操作',
dataIndex: 'tags',
key: 'tags',
},
]
const onEdit = (e:any)=>{
console.log(e);
}
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
size: ref<SelectProps['size']>('middle'),
value1: ref('a1'),
options,
value,
onSearch,
dataSource,
columns,
onEdit,
optionss
})
</script>
<style lang="less" scoped>
</style>