chore(release): v1.1.0 unify DI(strategy), AI equivalence service, config domain refactor, docker alias; health checks and schedules

admin-vben/apps/web-antd/src/views/setting/payment/modules/payment-edit.vue

@@ -0,0 +1,191 @@
+<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>