DZ-MXWPP-WEB/apps/web-ele/src/views/system-manage/role-manage/form.vue

<script lang="ts" setup>
import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenForm, z } from '#/adapter/form';
import { getCustomerDetailApi } from '#/api/customer-manage';

const data = ref();

const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));

const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    labelWidth: 120,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    // { title: '用户名称', field: 'usersname' },
    // { title: '用户性质', field: 'usersnature' },
    // { title: '用户证件号码', field: 'usersidcardnumber' },
    // { title: '用户开户银行名称', field: 'usersbankname' },
    // { title: '用户开户银行账号', field: 'usersbanknumber' },
    // { title: '用户手机号', field: 'usersphone' },
    // { title: '用户邮箱', field: 'usersemail' },
    // { title: '用户地址', field: 'usersaddress' },
    // { title: '用户联系手机号', field: 'userscontactphone' },
    // { title: '用户联系邮箱', field: 'userscontactemail' },
    // { title: '用户联系地址', field: 'userscontactaddress' },
    {
      component: 'Input',
      fieldName: 'usersname',
      label: '用户名称',
      componentProps: {
        placeholder: '请输入用户名称',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户名称' }),
    },
    {
      component: 'Input',
      fieldName: 'usersnature',
      label: '用户性质',
      componentProps: {
        placeholder: '请输入用户性质',
        allowClear: true,
      },
      rules: z.number().min(1, { message: '请输入用户性质' }),
    },
    {
      component: 'Input',
      fieldName: 'usersidcardnumber',
      label: '用户证件号码',
      componentProps: {
        placeholder: '请输入用户证件号码',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户证件号码' }),
    },
    {
      component: 'Input',
      fieldName: 'usersbankname',
      label: '用户开户银行名称',
      componentProps: {
        placeholder: '请输入用户开户银行名称',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
    },
    {
      component: 'Input',
      fieldName: 'usersbanknumber',
      label: '用户开户银行账号',
      componentProps: {
        placeholder: '请输入用户开户银行账号',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户开户银行账号' }),
    },
    {
      component: 'Input',
      fieldName: 'usersphone',
      label: '用户手机号',
      componentProps: {
        placeholder: '请输入用户手机号',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户手机号' }),
    },
    {
      component: 'Input',
      fieldName: 'usersemail',
      label: '用户邮箱',
      componentProps: {
        placeholder: '请输入用户邮箱',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户邮箱' }),
    },
    {
      component: 'Input',
      fieldName: 'usersaddress',
      label: '用户地址',
      componentProps: {
        placeholder: '请输入用户地址',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户地址' }),
    },
    {
      component: 'Input',
      fieldName: 'userscontactphone',
      label: '用户联系手机号',
      componentProps: {
        placeholder: '请输入用户联系手机号',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户联系手机号' }),
    },
    {
      component: 'Input',
      fieldName: 'userscontactemail',
      label: '用户联系邮箱',
      componentProps: {
        placeholder: '请输入用户联系邮箱',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户联系邮箱' }),
    },
    {
      component: 'Input',
      fieldName: 'userscontactaddress',
      label: '用户联系地址',
      componentProps: {
        placeholder: '请输入用户联系地址',
        allowClear: true,
      },
      rules: z.string().min(1, { message: '请输入用户联系地址' }),
    },
  ],
});

const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  async onConfirm() {
    // 校验输入的数据
    const validate = await baseFormApi.validate();
    if (!validate.valid) {
      return;
    }

    modalApi.close();
    // const values = await baseFormApi.getValues();

    // console.log(Object.keys(values));
  },
  async onOpenChange(isOpen) {
    if (isOpen) {
      data.value = modalApi.getData();

      if (data.value.create) {
        return;
      }

      try {
        modalApi.setState({ loading: true });
        const detailData = await getCustomerDetailApi({
          usersid: data.value.row.usersid,
        });

        baseFormApi.setValues(detailData);
      } catch {
        // console.log(error);
      }

      modalApi.setState({ loading: false });
    }
  },
});
</script>

<template>
  <Modal :title="getTitle">
    <BaseForm />
  </Modal>
</template>