下载安装 Node.js 16：https://nodejs.org

npm i -g yarn

git clone https://gitee.com/thinkgem/jeesite-vue.git

cd jeesite-vueyarn config set registry https://registry.npm.taobao.orgyarn install

yarn serve

yarn build

<template>  <!-- 弹出抽屉组件，如果想改为弹窗，Drawer 换为 Modal 即可快速替换 -->  <BasicDrawer    v-bind="$attrs"    -- 传递来自父组件的属性    :showFooter="true" -- 显示弹窗底部按钮组    :okAuth="'test:testData:edit'" -- 提交按钮权限，控制按钮是否显示    @register="registerDrawer"     -- 弹窗后的回调方法    @ok="handleSubmit" -- 提交按钮调用方法    width="60%"        -- 弹窗宽度，支持按比例  >    <!-- 弹窗标题 -->    <template #title>      <Icon :icon="getTitle.icon" class="pr-1 m-1" /> -- 图标      <span> {{ getTitle.value }} </span>  -- 标题名称    </template>    <!-- 表单组件 -->    <BasicForm @register="registerForm">      <!-- 定义表单控件插槽、个性化表单控件，如：这是一个表单子表插槽 -->      <template #testDataChildList>        <BasicTable          @register="registerTestDataChildTable"          @row-click="handleTestDataChildRowClick"        />        <!-- 子表新增按钮 -->        <a-button class="mt-2" @click="handleTestDataChildAdd">          <Icon icon="ant-design:plus-circle-outlined" /> {{ t('新增') }}        </a-button>      </template>    </BasicForm>  </BasicDrawer></template><script lang="ts">  export default defineComponent({    // 当前组件名称（与路由名一致，如果不一致会页面缓存失效）    name: 'ViewsTestTestDataForm',  });</script><script lang="ts" setup>  // 导入当前用到的对象，部分省略  import { defineComponent, ref, computed } from 'vue';  import { officeTreeData } from '/@/api/sys/office';  import { areaTreeData } from '/@/api/sys/area';  // 页面事件定义  const emit = defineEmits(['success', 'register']);  // 国际化方法调用，参数是国际化编码的根路径  const { t } = useI18n('test.testData');  // 消息弹窗方法  const { showMessage } = useMessage();  // 当前页面数据记录  const record = ref<Recordable>({});  // 当前页面标题定义，来自菜单管理定义  const getTitle = computed(() => ({    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',    value: record.value.isNewRecord ? t('新增数据') : t('编辑数据'),  }));  // 输入表单控件定义  const inputFormSchemas: FormSchema[] = [    {      label: t('单行文本'), // 控件前面的页签      field: 'testInput',  // 字段提交参数名      component: 'Input',  // 控件类型（可自定义，更多查看 componentMap.ts ）      componentProps: {    // 组件属性定义        maxlength: 200,      },      required: true,      // 表单验证，是否必填（快速定义）      rules: [             // 如果不只是必填，需要通过 rules 定义，举例：        { required: true },        { min: 4, max: 20, message: t('请输入长度在 4 到 20 个字符之间') },        { pattern: /^[\u0391-\uFFE5\w]+$/, message: t('不能输入特殊字符') },        {          validator(_rule, value) {             return new Promise((resolve, reject) => {              if (!value || value === '') return resolve();              // 远程验证，访问后台校验数据是否重复              checkTestInput(record.value.testInput || '', value)                .then((res) => (res ? resolve() : reject(t('数据已存在'))))                .catch((err) => reject(err.message || t('验证失败')));            });          },        },      ],      colProps: { lg: 24, md: 24 }, // 栅格布局（遵循 Ant Design 风格）    },    {      label: t('下拉框'),      field: 'testSelect',      component: 'Select',    // 选择框还有 RadioGroup、CheckboxGroup      componentProps: {        dictType: 'sys_menu_type', // 下拉框选项数据（支持直接指定字典类型）        allowClear: true,          // 启用空选项，可清空选择        mode: 'multiple',          // 下拉框模块，启用多选      },    },    {      label: t('日期选择'),      field: 'testDate',      component: 'DatePicker',      componentProps: {        format: 'YYYY-MM-DD',      // 日期选择        showTime: false,           // 关闭时间选择      },    },    {      label: t('日期时间'),      field: 'testDatetime',      component: 'DatePicker',      componentProps: {        format: 'YYYY-MM-DD HH:mm',    // 日期时间选择        showTime: { format: 'HH:mm' }, // 设置时间的格式      },    },    {      label: t('用户选择'),      field: 'testUser.userCode',      fieldLabel: 'testUser.userName', //【支持返回，如下拉框或树选择的节点名】      component: 'TreeSelect',         // 树选择控件      componentProps: {        api: officeTreeData,           // 数据源 API 定义，支持 ztree 格式        params: { isLoadUser: true, userIdPrefix: '' }, // API 参数        canSelectParent: false,        // 是否允许选择父级        allowClear: true,      },    },    {      label: t('子表数据'),      field: 'testDataChildList',      component: 'Input',      colProps: { lg: 24, md: 24 },      slot: 'testDataChildList',      // 指定插槽、个性化控件内容    },  ];  // 当前表单的参数定义  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({    labelWidth: 120,                  // 控件前面的标签宽度    schemas: inputFormSchemas,        // 控件定义列表    baseColProps: { lg: 12, md: 24 }, // 控件默认栅格布局方式（响应式）  });  // 当前表单子表格定义  const [registerTestDataChildTable, testDataChildTable] = useTable({    actionColumn: {  // 子表的操作列定义      width: 60,     // 操作列宽度      actions: (record: Recordable) => [        {          icon: 'ant-design:delete-outlined',          color: 'error',          popConfirm: { // 是否需要启用确认框            title: '是否确认删除',            confirm: handleTestDataChildDelete.bind(this, record),          },          auth: 'sys:empUser:edit',  // 按钮权限（可控制按钮是否显示）        },      ],    },    rowKey: 'id',     // 子表主键名    pagination: false,// 关闭分页    bordered: true,   // 开启表格边框    size: 'small',    // 单元格间距    inset: true,      // 是否内嵌（去除一些边距）  });  // 当前表单子表自动定义  async function setTestDataChildTableData(_res: Recordable) {    testDataChildTable.setColumns([      {        title: t('单行文本'),        dataIndex: 'testInput',        width: 230,        align: 'left',        editRow: true,          // 是否启用编辑        editComponent: 'Input', // 编辑控件（可自定义，更多查看 componentMap.ts ）        editRule: true,         // 控件验证（是否必填）      },      {        title: t('下拉框'),        dataIndex: 'testSelect',        width: 130,        align: 'left',        dictType: 'sys_menu_type',   // 指定字典类型，自动显示字典标签        editRow: true,        editComponent: 'Select',        editComponentProps: {        // 控件属性          dictType: 'sys_menu_type', // 下拉框的字段类型          allowClear: true,        },        editRule: false,      },      // 更多组件控件不举例了，同表单控件 ...    ]);    // 设定子表数据    testDataChildTable.setTableData(record.value.testDataChildList || []);  }  // 点击行，启用编辑  function handleTestDataChildRowClick(record: Recordable) {    record.onEdit?.(true, false);  }  // 添加编辑行，可指定初始数据  function handleTestDataChildAdd() {    testDataChildTable.insertTableDataRecord({      id: new Date().getTime(),      isNewRecord: true,      editable: true,    });  }  // 删除编辑行方法  function handleTestDataChildDelete(record: Recordable) {    testDataChildTable.deleteTableDataRecord(record);  }  // 获取子表数据（支持返回删除未提交的数据）  async function getTestDataChildList() {    let testDataChildListValid = true;    let testDataChildList: Recordable[] = [];    for (const record of testDataChildTable.getDataSource()) {      // 验证控件内容，并取消行的编辑状态（如果验证失败返回false）      if (!(await record.onEdit?.(false, true))) {        testDataChildListValid = false;      }      testDataChildList.push({        ...record,        id: !!record.isNewRecord ? '' : record.id,      });    }    for (const record of testDataChildTable.getDelDataSource()) {      if (!!record.isNewRecord) continue;      testDataChildList.push({        ...record,        status: '1',      });    }    // 子表验证事件，抛出异常消息    if (!testDataChildListValid) {      throw new Error('testDataChildList valid.');    }    return testDataChildList;  }  // 弹窗后的回调事件，进行一些表单数据初始化等操作  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {    resetFields(); // 重置表单数据    setDrawerProps({ loading: true }); // 显示加载框    const res = await testDataForm(data); // 查询表单数据    record.value = (res.testData || {}) as Recordable;    setFieldsValue(record.value);  // 设置字段值    setTestDataChildTableData(res);  // 设置子表数据（没有子表可不写）    setDrawerProps({ loading: false }); // 隐藏加载框  });  // 表单提交按钮方法  async function handleSubmit() {    try {      const data = await validate(); // 验证表单，并返回数据      setDrawerProps({ confirmLoading: true }); // 显示提交加载中      // 设置提交的参数（QueryString，后台 Controller 的 get 接受）      const params: any = {        isNewRecord: record.value.isNewRecord,        id: record.value.id,      };      // 获取并设置子表数据      data.testDataChildList = await getTestDataChildList();      // console.log('submit', params, data, record);      // 将数据提交给后台（如果失败跳转到 catch）      const res = await testDataSave(params, data);      showMessage(res.message); // 显示提交结果      setTimeout(closeDrawer);  // 隐藏抽屉弹窗      emit('success', data);    // 触发事件，列表数据刷新    } catch (error: any) {      if (error && error.errorFields) {        showMessage(t('您填写的信息有误，请根据提示修正。'));      }      console.log('error', error);