BoundLink-Plate-UI/src/views/table-demo/components/AddOrEditDrawer.vue

<template>
  <bs-drawer
    :width="drawerOptions.width"
    :title="drawerOptions.title"
    :drawer-extra-props="drawerOptions.drawerExtraProps"
    :visible="drawerOptions.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <bs-form
      :form-fields="formOptions.formFields"
      :form-data="formOptions.formData"
      :form-extra-props="formOptions.formExtraProps"
      :footer-render="() => null"
      :form-id="formOptions.formId"
      ref="bsFormRef"
    ></bs-form>
  </bs-drawer>
</template>

<script setup lang="jsx">
  import BsDrawer, { useBsDrawer } from '/@/components/BsUi/Drawer/index.js';
  import BsForm, { useBsForm } from '/@/components/BsUi/Form/index.js';
  import { h, ref } from 'vue';
  import { useBsTable } from '/@/components/BsUi/index.js';
  import { BorderOuterOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';

  const bsFormRef = ref(null);

  const {
    setDrawerPropsValue: setDVal,
    drawerOptions,
    getDrawerPropsValue: getDVal,
  } = useBsDrawer({
    drawerOptions: {
      width: '500px',
      title: '标题',
      visible: false,
      drawerExtraProps: {
        destroyOnClose: true,
      },
    },
  });

  const { formOptions, setFormPropsValue: setFVal } = useBsForm({
    formOptions: {
      formFields: [
        {
          id: '1',
          label: '输入框',
          component: 'a-input',
          componentProps: {
            placeholder: '请输入',
          },
          field: 'name',
          sort: '1',
          visible: '1',
          required: '1',
          formItemExtraProps: {
            rules: [
              {
                validator: (_, value) => {
                  // return Promise.reject(new Error('报错'));
                  return Promise.resolve();
                },
              },
            ],
          },
        },
        {
          id: '2',
          label: '表格选择器',
          component: 'bs-table-selector',
          componentProps: {
            multiple: '1',
            placeholder: '请选择',
            labelField: 'name',
            valueField: 'id',
            tableOptions: {
              gridOptions: {
                loading: false,
                columns: [
                  {
                    field: 'id',
                    title: 'ID',
                  },
                  {
                    field: 'name',
                    title: '名字',
                  },
                ],
                rowKey: 'id',
                data: [],
              },
              async request() {
                return {
                  list: Array.from({ length: 10 })
                    .fill(0)
                    .map((v, idx) => ({
                      id: idx,
                      name: 'name' + idx,
                    })),
                  total: 10,
                };
              },
            },
            modalOptions: {
              title: '表格选择器',
            },
          },
          field: 'name1',
          sort: '2',
          visible: '1',
          required: '1',
          formItemExtraProps: {
            rules: [
              {
                validator: (_, value) => {
                  // return Promise.reject(new Error('报错'));
                  return Promise.resolve();
                },
              },
            ],
          },
        },
      ],
      formData: {
        name: '韩晓辉',
        name1: [
          {
            id: 1,
            name: 'name1',
          },
        ],
        // name1: {
        //   id: 1,
        //   name: 'name1',
        // },
      },
      formId: 'formId',
      formExtraProps: {},
    },
  });

  const closeDrawer = () => {
    setDVal('visible', false);
  };

  const handleOk = async (setLoading) => {
    setLoading(true);
    bsFormRef.value
      .handlerFormValidator()
      .then((res) => {
        closeDrawer();
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const handleCancel = async () => {
    closeDrawer();
  };

  const handleClose = async () => {
    setDVal('visible', false);
  };

  const showDrawer = ({ type, row }) => {
    setDVal('visible', true);

    if (type === 'add') {
      setDVal('title', '新增标题');
      setFVal('formData', {
        name: undefined,
        name1: undefined,
      });
    } else {
      setDVal('title', '编辑标题');
      setFVal('formData', {
        name: '王宗帅',
      });
    }
  };

  defineExpose({
    showDrawer,
  });
</script>