chore: push latest changes

admin-vben/src/app/views/setting/components/pay-offlinepay.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-dialog v-model="showDialog" :title="t('updateOfflinepay')" width="550px" :destroy-on-close="true">
-        <el-form :model="formData" label-width="110px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading">
+    <Modal :class="'w-[550px]'" :title="t('updateOfflinepay')">
+        <BaseForm />
 
             <el-form-item :label="t('collectionName')" prop="config.collection_name">
                 <el-input v-model.trim="formData.config.collection_name" :placeholder="t('collectionNamePlaceholder')" class="input-width" show-word-limit clearable />
@@ -17,23 +17,22 @@
             <el-form-item :label="t('collectionDesc')" prop="config.collection_desc">
                 <el-input v-model.trim="formData.config.collection_desc" :placeholder="t('collectionDescPlaceholder')" class="input-width" type="textarea" rows="4" clearable />
             </el-form-item>
-        </el-form>
-
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
-                <el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ t('confirm') }}</el-button>
+                <el-button @click="cancel()">{{ t('cancel') }}</el-button>
+                <el-button type="primary" :loading="loading" @click="confirm()">{{ t('confirm') }}</el-button>
             </span>
         </template>
-    </el-dialog>
+    </Modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive } from 'vue'
 import { t } from '@/lang'
-import type { FormInstance } from 'element-plus'
+import { useVbenModal } from '@vben/common-ui'
+import { useVbenForm } from '@/_env/adapter/form'
 
-const showDialog = ref(false)
+const [Modal, modalApi] = useVbenModal()
 const loading = ref(true)
 
 /**
@@ -51,26 +50,24 @@ const initialFormData = {
     status: 0,
     is_default: 0
 }
-const formData: Record<string, any> = reactive({ ...initialFormData })
-
-const formRef = ref<FormInstance>()
-
-// 表单验证规则
-const formRules = computed(() => {
-    return {
-        'config.collection_name': [
-            { required: true, message: t('collectionNamePlaceholder'), trigger: 'blur' }
-        ],
-        'config.collection_bank': [
-            { required: true, message: t('collectionBankPlaceholder'), trigger: 'blur' }
-        ],
-        'config.collection_account': [
-            { required: true, message: t('collectionAccountPlaceholder'), trigger: 'blur' }
-        ],
-        'config.collection_desc': [
-            { required: true, message: t('collectionDescPlaceholder'), trigger: 'blur' }
-        ]
-    }
+const formModel: Record<string, any> = reactive({ ...initialFormData })
+const [BaseForm, formApi] = useVbenForm({
+  commonConfig: { componentProps: { class: 'w-full' } },
+  handleSubmit: async (values) => {
+    loading.value = true
+    const merged = { ...values }
+    emit('complete', merged)
+    loading.value = false
+    modalApi.close()
+  },
+  layout: 'horizontal',
+  schema: [
+    { component: 'Input', fieldName: 'config.collection_name', label: t('collectionName'), rules: [{ required: true }] },
+    { component: 'Input', fieldName: 'config.collection_bank', label: t('collectionBank'), rules: [{ required: true }] },
+    { component: 'Input', fieldName: 'config.collection_account', label: t('collectionAccount'), rules: [{ required: true }] },
+    { component: 'Textarea', fieldName: 'config.collection_desc', label: t('collectionDesc'), rules: [{ required: true }], componentProps: { rows: 4 } }
+  ],
+  wrapperClass: 'grid-cols-1'
 })
 
 const emit = defineEmits(['complete'])
@@ -79,33 +76,24 @@ const emit = defineEmits(['complete'])
  * 确认
  * @param formEl
  */
-const confirm = async (formEl: FormInstance | undefined) => {
-    if (loading.value || !formEl) return
-    await formEl.validate(async (valid) => {
-        if (valid) {
-            emit('complete', formData)
-            showDialog.value = false
-        }
-    })
-}
+const confirm = async () => { if (loading.value) return; formApi.submit() }
 
 const setFormData = async (data: any = null) => {
-    loading.value = true
-    Object.assign(formData, initialFormData)
-    if (data) {
-        Object.keys(formData).forEach((key: string) => {
-            if (data[key] != undefined) formData[key] = data[key]
-        })
-        formData.channel = data.redio_key.split('_')[0]
-        formData.status = Number(formData.status)
-    }
-    loading.value = false
+  loading.value = true
+  Object.assign(formModel, initialFormData)
+  if (data) {
+    Object.keys(formModel).forEach((key: string) => { if (data[key] != undefined) formModel[key] = data[key] })
+    formModel.channel = data.redio_key.split('_')[0]
+    formModel.status = Number(formModel.status)
+  }
+  formApi.setModel({ ...formModel })
+  loading.value = false
+  modalApi.open()
 }
 
-defineExpose({
-    showDialog,
-    setFormData
-})
+const cancel = () => { modalApi.close() }
+
+defineExpose({ setFormData })
 </script>
 
 <style lang="scss" scoped></style>