va_admin_frontend/src/modules/payment/views/channel.vue

<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />

			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索关键字" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table"> </cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" name="payment-channel" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { ref } from 'vue';

const { service } = useCool();
const currencyList = ref<any[]>([]);

// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: '渠道名称',
			prop: 'name',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '渠道代码',
			prop: 'code',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '渠道描述',
			prop: 'description',
			component: { name: 'el-input', props: { type: 'textarea', rows: 4 } }
		},
		{
			label: 'key',
			prop: 'apiKey',
			component: { name: 'el-input', props: { clearable: true } }
		},
		{
			label: 'secret',
			prop: 'apiSecret',
			component: { name: 'el-input', props: { clearable: true } }
		},
		{
			label: 'url',
			prop: 'apiUrl',
			component: { name: 'el-input', props: { clearable: true } }
		},

		{
			label: '是否启用',
			prop: 'isEnabled',
			flex: false,
			component: { name: 'cl-switch' },
			required: true
		},
		{
			label: '支持的货币',
			prop: 'supportedCurrencies',
			hook: {
				bind: ['split', 'number']
			},
			component: {
				name: 'el-select',

				props: { multiple: true, options: currencyList }
			},
			required: true
		}
	],
	async onOpen() {
		const currencyList = await service.payment.currency.list();
		Upsert.value?.setOptions(
			'supportedCurrencies',
			currencyList.map(v => ({ label: v.name, value: v.id }))
		);
		// Upsert.value?.setForm(
		// 	'supportedCurrencies',
		// 	data && data.length > 0 ? data.currencies.split(',') : []
		// );
	}
});
// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: '渠道名称', prop: 'name' },
		{ label: '渠道代码', prop: 'code' },
		{ label: '渠道描述', prop: 'description', showOverflowTooltip: true },
		{ label: '是否启用', prop: 'isEnabled', component: { name: 'cl-switch' } },
		{ type: 'op', buttons: ['edit', 'delete'] }
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.payment.channel
	},
	app => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>