va_admin_frontend/src/modules/payment/views/components/business.vue

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

<script lang="ts" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { watch } from 'vue';
import { cityList } from '/@/cool/utils/city';
const { service } = useCool();
const emit = defineEmits(['close', 'submit']);
const props = defineProps({
	open: {
		type: Boolean,
		default: false
	},
	mchId: {
		type: String,
		default: ''
	},
	business: {
		type: Object,
		default: null
	}
});
watch(
	() => props.open,
	() => {
		if (props.open) {
			if (props.business) {
				Upsert.value?.edit(props.business);
			} else {
				Upsert.value?.add();
			}
		}
	}
);
// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: '企业名称',
			prop: 'name',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '类型',
			prop: 'type',
			component: {
				name: 'el-select',
				options: [
					{ label: '其他', value: 'OTHER' },
					{ label: '公共有限公司', value: 'PUBLIC_LIMITED_COMPANY' },
					{ label: '合伙企业', value: 'PARTNERSHIP' },
					{ label: '慈善机构', value: 'CHARITY' },
					{ label: '私营有限公司', value: 'PRIVATE_LIMITED_COMPANY' },
					{ label: '股份公司', value: 'JOINT_STOCK_COMPANY' },
					{ label: '独资经营企业', value: 'SOLE_TRADER' },
					{ label: '有限责任公司', value: 'LIMITED_LIABILITY' }
				],
				props: {}
			},
			value: [],
			required: true
		},
		{
			label: '国家代码',
			prop: 'country_code',
			component: {
				name: 'el-select',
				options: cityList,
				props: { clearable: true }
			},
			required: true
		},
		{
			label: '城市',
			prop: 'city',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '地址',
			prop: 'address_line',
			component: { name: 'el-input', props: { type: 'textarea', rows: 4 } },
			required: true
		},
		{
			label: '邮编',
			prop: 'post_code',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '邮箱',
			prop: 'email',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '电话',
			prop: 'phone_number',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '注册号',
			prop: 'registration_number',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '联系人',
			prop: 'contact',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '注册日期',
			prop: 'registration_date',
			component: {
				name: 'el-date-picker',
				props: { type: 'date', valueFormat: 'YYYY-MM-DD' }
			},
			required: true
		},
		{
			label: '合作伙伴文件编号',
			prop: 'partners_document_number',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '合作伙伴文件类型',
			prop: 'partners_document_type',
			component: {
				name: 'el-select',
				options: [
					{ label: '护照', value: 'PASSPORT' },
					{ label: '驾驶执照', value: 'DRIVINGLICENCE' },
					{ label: '身份证', value: 'IDCARD' }
				],
				props: {}
			},
			value: [],
			required: true
		},
		{
			label: '合作伙伴类型',
			prop: 'partners_kind',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '合作伙伴名称',
			prop: 'partners_name',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '合作伙伴百分比',
			prop: 'partners_percentage_share',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '合作伙伴地址国家',
			prop: 'partners_address_country',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '交易地址',
			prop: 'trading_address',
			component: { name: 'el-input', props: { type: 'textarea', rows: 4 } },
			required: true
		},
		{
			label: '交易城市',
			prop: 'trading_city',
			component: { name: 'el-input', props: { clearable: true } },
			required: true
		},
		{
			label: '交易国家',
			prop: 'trading_country',
			component: {
				name: 'el-select',
				options: cityList,
				props: { clearable: true }
			},
			required: true
		}
	],
	dialog: {
		title: '企业认证'
	},
	onClose: (data, done) => {
		emit('close', false);
		done();
	},
	async onSubmit(data, { done, close, next }) {
		emit('submit');
		next({
			...data,
			merchantId: props.mchId
		});
	}
});

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