# Проверка
node -v
# Настройка китайского источника
npm config set registry https://registry.npmmirror.com

npm i -g pnpm
# Проверка
pnpm -v
# Настройка китайского источника
pnpm config set registry https://registry.npmmirror.com

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

pnpm install

pnpm dev

pnpm preview

pnpm build

### Если вы используете VSCode, рекомендуется установить следующие расширения:

* [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) — Расширение для UnoCSS
* [Iconify](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) — Расширение для иконок Iconify
* [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) — Расширение для i18n
* [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) — Обязательное расширение для разработки Vue3 (Vetur отключено)
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) — Расширение для проверки синтаксиса скриптов
* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) — Расширение для форматирования кода
* [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) — Расширение для форматирования CSS
* [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) — Расширение для подсветки .env файлов## Часто задаваемые вопросы
* Поддержка браузеров в версии Vue: поддерживается всеми современными браузерами, Vue 3 больше не поддерживает IE.
* Почему используется выезжающее меню как компонент формы: благодаря большому пространству выезжающего меню можно отображать больше информации, а также обеспечивать более удобное взаимодействие.
* Как изменить выезжающее меню на модальное окно: замените Drawer на Modal в страницах list и form, в версии V5.6 добавлены коды для генерации маршрутизируемых форм и модальных окон.
* Что делать, если не удается открыть инструмент генерации кода? Проверьте конфигурацию прокси в .env.development, параметр VITE_PROXY последний аргумент (сохранение заголовка Host), для локального сервера 127.0.0.1 установите значение false, для удаленного сервера — true.

## Скриншоты программы<img src="https://oscimg.oschina.net/oscnet/up-db83c334daab05d89a0930d8497816da6a4.png"/>
<img src="https://oscimg.oschina.net/oscnet/up-685134ad2a721e0a7818efe4201d476e332.png"/>
<img src="https://oscimg.oschina.net/oscnet/up-3ac1f31bdb399431cd0f6af479acc7f2e58.png"/>
<img src="https://oscimg.oschina.net/oscnet/up-6a4c84696b589ba2a3bd034c2b9026b40e1.png"/>
<img src="https://oscimg.oschina.net/oscnet/up-b85f44704e4a8c1e3a50f1c10e7e413341a.png"/>
<img src="https://oscimg.oschina.net/oscnet/up-f03d07d58b351e1f2fc9931ea2dba550429.png"/>
<img src="https://oscimg.oschina.net/oscnet/up-a36a005290cb95bc625e0933c867edc7e6f.png"/>

## Приложения

### Вид формы```html
<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="i-ant-design:plus-circle-outlined" /> {{ t('Добавить') }}
        </a-button>
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<!-- script name: имя текущего компонента (соответствует имени маршрута, если имена не совпадают, кэширование страницы будет недействительным) -->
<script lang="ts" setup name="ViewsTestTestDataForm">
```  // Импорт используемых объектов, часть опущена
   import { ref, unref, computed } from 'vue';
   import { officeTreeData } from '/@/api/sys/office';  // Определение событий страницы
   const emit = defineEmits(['success', 'register']);
    // Вызов метода международной локализации, параметр — это корневой путь кодировки локализации
   const { t } = useI18n('test.testData');
    // Метод отображения сообщений
   const { showMessage } = useMessage();
    // Метаданные маршрута
   const { meta } = unref(router.currentRoute);
    // Запись данных текущей страницы
   const record = ref<Recordable>({});
    // Определение заголовка текущей страницы, основано на определении меню управления
   const getTitle = computed(() => ({
     icon: 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) {
                 reject(new Error(t('Поле обязательно')));
               } else {
                 resolve();
               }
             });
           },
         },
       ],
     },
   ];```markdown
value || value === '' return resolve();
               // Дистанционная проверка, запрос к серверу для проверки уникальности данных
               checkTestInput(record.value.testInput || '', value)
                 .then((res) => (res ? resolve() : reject(t('Данные уже существуют'))))
                 .catch((err) => reject(err.message || t('Проверка не удалась')));
             });
           },
           trigger: 'blur', // Если используется дистанционная проверка, можно уменьшить частоту запросов
         },
       ],
       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.',```markdown
userName', //【поддерживает возврат, например, для выпадающего списка или выбора узла из дерева】
``````md
// Определение параметров текущей формы
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  labelWidth: 120,                  // Ширина меток перед элементами управления
  schemas: inputFormSchemas,        // Список определений элементов управления
  baseColProps: { lg: 12, md: 24 }, // Базовые свойства колонок (адаптивная сетка)
});

{
  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: 'i-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 { errorFields: [{ name: ['testDataChildList'] }] };
    }
    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 }); // Скрытие загрузки
   });```markdown
   // Метод кнопки отправки формы
   async function handleSubmit() {
     try {
       const data = await validate(); // Валидация формы и возврат данных
       setDrawerProps({ confirmLoading: true }); // Отображение загрузки отправки
       // Установка параметров отправки (QueryString, контроллер backend принимает 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);
     } finally {
      setDrawerProps({ confirmLoading: false }); // Скрытие загрузки отправки
    }
  }
</script>
```### Списочный вид``````html
<template>
  <div>
    <!-- Table component -->
    <BasicTable @register="registerTable">
      <!-- Table header template -->
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span>{{ getTitle.value }}</span>
      </template>
      <!-- Template for buttons on the right side of the table, where v-auth is used for access control -->
      <template #toolbar>
        <a-button type="primary" @click="handleForm({})" v-auth="'test:testData:edit'">
          <Icon icon="i-fluent:add-12-filled" />{{ t('Добавить') }}
        </a-button>
      </template>
      <!-- Template for the first column -->
      <template #firstColumn="{ record }">
        <a @click="handleForm({ id: record.id })">{{ record.testInput }}</a>
      </template>
    </BasicTable>
    <!-- Popup form input window when clicking on a row in the table -->
    <InputForm @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<!-- Script name: current component name (matches route name if they do not match, page caching will be ineffective) -->
<script lang="ts" setup name="ViewsTestTestDataList">
  // Import used objects, part omitted
  import InputForm from './form.vue';

  // Call localization method, parameter - root localization path
  const { t } = useI18n('test.testData');

  // Method to display messages
  const { showMessage } = useMessage();

  // Route metadata
  const { meta } = unref(router.currentRoute);
</script>
```  // Определение заголовка текущей страницы, берется из менеджера меню
   const getTitle = {
     icon: meta.icon || 'ant-design:book-outlined',
     value: meta.title || t('Data Management'),
   };
 </script>
 ```markdown
 // Определение формы поиска для таблицы
 const searchForm: FormProps = {
   baseColProps: { lg: 6, md: 8 }, // Грид-расположение формы
   labelWidth: 90,                 // Ширина меток формы
   schemas: [
     {
       label: t('Однострочное текстовое поле'), // Метка формы
       field: 'testInput',                   // Имя поля для отправки данных
       component: 'Input',                   // Тип компонента формы
     },
     {
       label: t('Выпадающий список'),
       field: 'testSelect',
       component: 'Select',                  // Компонент выбора (также поддерживаются RadioGroup, CheckboxGroup)
       componentProps: {
         dictType: 'sys_menu_type',          // Тип словаря для определения значений выпадающего списка
         allowClear: true,                   // Разрешить очистку значения
         mode: 'multiple',                   // Установить режим множественного выбора
       },
     },
     // Дополнительные компоненты, которые не показаны здесь, аналогичны предыдущему разделу с формой
   ],
 };
 ```markdown
 // Определение столбцов таблицы
 const tableColumns: BasicColumn[] = [
   {
     title: t('Однострочное текстовое поле'),    // Заголовок столбца
     dataIndex: 'testInput', // Имя свойства столбца
     key: 'a.test_input',    // Имя поля для сортировки
     sorter: true,           // Возможность сортировки по нажатию на заголовок
     width: 230,             // Ширина столбца
     align: 'left',          // Выравнивание столбца
   },
 ];    // Индивидуальный столбец, можно определить слоты (например, стиль, добавление контролов и т. д.)
     slot: 'firstColumn',
   },
   {
     title: t('Выпадающий список'),
     dataIndex: 'testSelect',
     key: 'a.test_select',
     sorter: true,
     width: 130,
     align: 'center',
     dictType: 'sys_menu_type', // Тип словаря, быстрое отображение меток словаря
   },
 ];// Определение операционных столбцов таблицы
const actionColumn: BasicColumn = {
  width: 160, // Ширина операционного столбца
  actions: (record: Recordable) => [
    {
      icon: 'i-clarity:note-edit-line',
      title: t('Редактировать данные'),
      onClick: handleForm.bind(this, { id: record.id }),
      // Управление правами доступа, указание строки с правами
      auth: 'test:testData:edit',
    },
    {
      icon: 'i-ant-design:stop-outlined',
      color: 'error',
      title: t('Отключить данные'),
      // Отображение диалогового окна подтверждения
      popConfirm: {
        title: t('Подтвердите отключение данных'),
        confirm: handleDisable.bind(this, { id: record.id }),
      },
      // Управление правами доступа, указание строки с правами
      auth: 'test:testData:edit',
      // Управление отображением кнопки (различие: show - показывать или скрывать; ifShow - показывать или удалять)
      show: () => record.status === '0',
      ifShow: () => record.status === '0',
    },
  ],
  // Определение дополнительных действий в выпадающем меню операционного столбца
  dropDownActions: (record: Recordable) => [
    {
      icon: 'i-ant-design:reload-outlined',
      label: t('Сброс пароля'),
      onClick: handleResetpwd.bind(this, { userCode: record.userCode }),
      auth: 'sys:empUser:resetpwd',
    },
  ],
};// Определение модального окна, вызываемого при клике на первый столбец или кнопку "Редактировать"
const [registerDrawer, { openDrawer }] = useDrawer();
``````markdown
// Определение таблицы
const [registerTable, { reload }] = useTable({
    api: testDataListData,     // API для данных таблицы
    beforeFetch: (params) => {
        return params;         // Изменение параметров перед отправкой API
    },
    columns: tableColumns,     // Колонки таблицы
    actionColumn: actionColumn, // Кнопки действий
    formConfig: searchForm,    // Конфигурация формы поиска
    showTableSetting: true,    // Отображение кнопки настроек в верхнем правом углу
    useSearchForm: true,       // Отображение формы поиска
    canResize: true,           // Возможность изменения размера таблицы
});
```## Условия лицензионного соглашения```1. Распространяется на условиях лицензии Apache License Version 2.0 и может использоваться в коммерческих проектах, но необходимо соблюдать следующие дополнительные условия.
2. Нельзя использовать данное программное обеспечение для действий, вредящих национальной безопасности, чести и интересам страны, а также для целей, противоречащих законодательству.
3. При использовании данного программного обеспечения, которое интегрировано с множеством открытых источников, необходимо соблюдать условия использования этих открытых источников.
4. В расширенном коде (модифицированном и производном от исходного кода) должны присутствовать условия лицензии, авторские права и другие требования первоначального автора (уважайте авторство первоначального автора, не удаляйте или не изменяйте информацию `Copyright` и `@author` в файлах).
5. Проекты, основанные на данном программном обеспечении, могут использовать JeeSite5 только как серверное приложение, все остальные случаи не могут быть коммерческими и не допускают вторичного распространения или открытия исходного кода.
6.Если вы используете некоторые части или функции данного программного обеспечения в качестве примера, сохраните авторские права и имя автора в исходных файлах, и укажите источник вашего программного обеспечения на видном месте, например: "Это программное обеспечение основано на платформе быстрой разработки JeeSite Vue" и приложите ссылку: http://jeesite.com

7. Любые юридические споры или ответственность, возникшие в результате использования данного программного обеспечения, не относятся к нашей компании.

8. Если вы улучшили данное программное обеспечение, мы будем рады принять ваш вклад и двигаться вместе вперед.

9. В этом проекте заявлены авторские права, пожалуйста, уважайте открытый исходный код, спасибо за чтение.## Поддержка и обслуживание

* Данное программное обеспечение предоставляется бесплатно, но мы предлагаем соответствующие платные услуги, потому что:
* Без финансовой поддержки сложно развиваться, особенно для хорошего продукта. Если JeeSite помог вам, пожалуйста, поддержите нас. Ваша поддержка позволит нам делать больше для общества и открывать больше ресурсов для сообщества. Пожалуйста, дайте нам мотивацию, мы очень благодарны нашим друзьям, которые уже поддерживают нас!
* **Связаться с нами**: посетите страницу поддержки и обслуживания по адресу: <http://s.jeesite.com>

## Дополнительные функции в профессиональной версии

1. Бесплатное переключение между тремя стилями страницы "Темы".
2. Управление бизнес-процессами, проектирование процессов, управление процессами.
3. Управление файлами, быстрое загрузка файлов, предварительный просмотр файлов.
4. Расширенные сворачиваемые формы и персонализированное локальное хранение данных.
5. Персонализированное локальное хранение параметров настройки таблиц.
6. Функции управления арендаторами, переключение арендаторов.
7. Динамическое изменение размера шрифта страницы.
8. Правый клик на вкладках, открытие в новом окне.
9. Отправка уведомлений, напоминания.
10. Интернационализация и локализация языка.
11. Быстрое обновление до Monorepo скриптом.
12. Дополнительные функции см. документацию.