191 lines
3.9 KiB
Vue
191 lines
3.9 KiB
Vue
<template>
|
|
<VbenDrawer
|
|
v-model="visible"
|
|
:title="drawerTitle"
|
|
:width="600"
|
|
@cancel="handleCancel"
|
|
>
|
|
<VbenForm
|
|
:schema="formSchema"
|
|
:model="formModel"
|
|
:rules="formRules"
|
|
label-width="100px"
|
|
@submit="handleSubmit"
|
|
>
|
|
<template #form-footer>
|
|
<VbenSpace>
|
|
<VbenButton @click="handleCancel">取消</VbenButton>
|
|
<VbenButton type="primary" native-type="submit">确定</VbenButton>
|
|
</VbenSpace>
|
|
</template>
|
|
</VbenForm>
|
|
</VbenDrawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch, nextTick } from 'vue';
|
|
import { VbenButton, VbenDrawer, VbenForm, VbenMessage, VbenSpace } from '@vben/common-ui';
|
|
|
|
import { createPayment, updatePayment } from '#/api/core/payment';
|
|
|
|
import type { PaymentItem } from '../data';
|
|
import { paymentTypeOptions, statusOptions } from '../data';
|
|
|
|
interface Props {
|
|
modelValue: boolean;
|
|
data?: PaymentItem | null;
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: boolean): void;
|
|
(e: 'reload'): void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: false,
|
|
data: null,
|
|
});
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val),
|
|
});
|
|
|
|
const drawerTitle = computed(() => (props.data ? '编辑支付方式' : '新增支付方式'));
|
|
|
|
const formModel = ref({
|
|
site_id: 0,
|
|
payment_type: 'wechat',
|
|
payment_name: '',
|
|
payment_code: '',
|
|
icon: '',
|
|
sort: 0,
|
|
status: 1,
|
|
});
|
|
|
|
const formSchema = [
|
|
{
|
|
fieldName: 'site_id',
|
|
label: '站点ID',
|
|
component: 'InputNumber',
|
|
componentProps: {
|
|
placeholder: '请输入站点ID',
|
|
min: 0,
|
|
},
|
|
},
|
|
{
|
|
fieldName: 'payment_type',
|
|
label: '支付类型',
|
|
component: 'Select',
|
|
componentProps: {
|
|
placeholder: '请选择支付类型',
|
|
options: paymentTypeOptions,
|
|
},
|
|
},
|
|
{
|
|
fieldName: 'payment_name',
|
|
label: '支付名称',
|
|
component: 'Input',
|
|
componentProps: {
|
|
placeholder: '请输入支付名称',
|
|
maxlength: 50,
|
|
},
|
|
},
|
|
{
|
|
fieldName: 'payment_code',
|
|
label: '支付编码',
|
|
component: 'Input',
|
|
componentProps: {
|
|
placeholder: '请输入支付编码',
|
|
maxlength: 30,
|
|
},
|
|
},
|
|
{
|
|
fieldName: 'icon',
|
|
label: '图标',
|
|
component: 'Input',
|
|
componentProps: {
|
|
placeholder: '请输入图标URL',
|
|
maxlength: 255,
|
|
},
|
|
},
|
|
{
|
|
fieldName: 'sort',
|
|
label: '排序',
|
|
component: 'InputNumber',
|
|
componentProps: {
|
|
placeholder: '请输入排序',
|
|
min: 0,
|
|
max: 999,
|
|
},
|
|
},
|
|
{
|
|
fieldName: 'status',
|
|
label: '状态',
|
|
component: 'RadioGroup',
|
|
componentProps: {
|
|
options: statusOptions,
|
|
},
|
|
},
|
|
];
|
|
|
|
const formRules = {
|
|
site_id: 'required',
|
|
payment_type: 'required',
|
|
payment_name: 'required|max:50',
|
|
payment_code: 'required|max:30',
|
|
icon: 'max:255',
|
|
sort: 'required',
|
|
status: 'required',
|
|
};
|
|
|
|
watch(
|
|
() => props.data,
|
|
(val) => {
|
|
if (val) {
|
|
formModel.value = {
|
|
site_id: val.site_id,
|
|
payment_type: val.payment_type,
|
|
payment_name: val.payment_name,
|
|
payment_code: val.payment_code,
|
|
icon: val.icon,
|
|
sort: val.sort,
|
|
status: val.status,
|
|
};
|
|
} else {
|
|
formModel.value = {
|
|
site_id: 0,
|
|
payment_type: 'wechat',
|
|
payment_name: '',
|
|
payment_code: '',
|
|
icon: '',
|
|
sort: 0,
|
|
status: 1,
|
|
};
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
async function handleSubmit() {
|
|
try {
|
|
if (props.data) {
|
|
await updatePayment(props.data.id, formModel.value);
|
|
VbenMessage.success('更新成功');
|
|
} else {
|
|
await createPayment(formModel.value);
|
|
VbenMessage.success('创建成功');
|
|
}
|
|
handleCancel();
|
|
emit('reload');
|
|
} catch (error) {
|
|
VbenMessage.error('操作失败');
|
|
}
|
|
}
|
|
|
|
function handleCancel() {
|
|
visible.value = false;
|
|
}
|
|
</script> |