<template>
  <UView> // Базовый компонент страницы представления
    <UViewSearch> // Основной компонент поиска
      <UInputItem field="name" label="Название чая"/>
      <template #func>
        <UButton func='view' url='/product/list'>Поиск</UButton>&nbsp;
        <UButton func="add" url='/product/add'>Добавить</UButton>
      </template>
    </USearch> // Основной компонент таблицы
    <UViewTable :bordered="true" :columns="columns" :dataSource="dataSource" rowKey="id">
      <template #c_action="{record}">
        <UFuncTag func='edit' url='/product/edit'>Изменить</UFuncTag>
        <UFuncTag func="del" url='/product/del'>Удалить</UFuncTag>
      </template>
    </UTable>
    <UViewModal>// Основной компонент модального окна редактирования
      <UInputItem field="name" label="Название чая"/>
      <template #title="{model}">
        {{model.id ? 'Редактировать продукт' : 'Добавить продукт'}}
      </template>
      <template #footer>
        <UButton func='cancel'>Отменить</UButton>
        <UButton func='submit' url='/product/add'>Отправить</UButton>
        <UButton func='reset'>Сбросить</UButton>
      </template>
    </UFormModal>
  </UView>
</template>

<script>
export default {
  name: "Demo",
  setup() {
    let columns = [
      {field: 'name', title: 'Название продукта'},
      {field: 'type', title: 'Тип продукта'},
      {field: 'action', type:'action', title: 'Действие'},
    ]
    let dataSource = [
      {id: 1, name: 'Чистый осенний чай', type: 'Чистый тип'}
    ]
    return {columns, dataSource}
  }
}
</script>

<UView>
    <UViewSearch>
        <template #func={model}>
            <UButton func='add'>Добавить</UButton> // При нажатии действие по умолчанию: открыть диалоговое окно редактирования (UViewModal или UViewDrawer)
            <UButton func='query' url="/project/query">Поиск</UButton> // При нажатии действие по умолчанию: обновить список
            <UButton func='reset'>Сброс</UButton> // При нажатии действие по умолчанию: сбросить форму поиска и обновить список (связано с таблицей компонентов)
        </template>
    </UViewSearch>
    <UViewModal>
       <template #footer={model}>
          <UButton func='cancel'>Отмена</UButton> // При нажатии действие по умолчанию: закрыть текущий диалог редактирования, закрыть анимацию отправки и кнопку отправки (предотвратить повторную отправку) 
          // При нажатии действие по умолчанию: проверить, прошла ли форма проверку, затем отправить форму, запустить анимацию отправки формы и анимацию кнопки отправки (чтобы предотвратить многократную отправку) **UButton func='reset'>重置</UButton> // 点击默认动作：重置编辑表单**

При нажатии происходит сброс редактирования формы.

**<UView rowKey="id">**
    **<UViewTable>**
        **<template #c_action={record}>**
            **// 点击默认动действие: открыть редактирование, и получить и отобразить данные, соответствующие URL**
            **<UButton func='edit' :data="record" url="/project/edit">Редактировать</UButton>**

Происходит открытие окна редактирования и отображение данных, соответствующих URL.

            **// При нажатии происходит следующее: всплывает окно для подтверждения удаления, после подтверждения вызывается соответствующий интерфейс для удаления данных, в качестве параметра передаётся массив: [record[rowKey]]**
            **<UButton func='del' :data="record" url="/project/del">Удалить</UButton>**
        **</template>**
    **</UViewSearch>**
**</UView>**

Здесь при нажатии кнопки происходит удаление данных.

**##### UFuncTag**
**Функциональный тег: используется для операций с таблицами**

**<UView rowKey="id">**
    **<UViewTable>**
        **<template #c_action={record}>**
            **// Действие по умолчанию: открыть форму редактирования, и получить и отобразить данные, соответствующие URL; также происходит получение и рендеринг данных из URL, соответствующего URL**
            **<UButton func='edit' :data="record" url="/project/edit">Редактирование</UButton>**

Открытие формы редактирования и получение и отображение данных из соответствующего URL.

            **// Действие при нажатии: появляется окно подтверждения удаления; после подтверждения выполняется вызов интерфейса для удаления данных; в качестве параметра передаётся массив вида: [record[rowKey]]**
            **<UButton func='del' :data="record" url="/project/del">Удаление</UButton>**
        **</template>**
    **</UViewSearch>**
**</UView>**

Удаление данных после подтверждения.

**##### Ошибочное подтверждение операции**
Иногда для предотвращения ошибочных действий при выполнении определённых функций перед нажатием на кнопку будет появляться окно подтверждения. В этом случае можно использовать атрибут confirm.

**<UButton func='demo' :data="record" url="/project/demo" confirm>Легко сделать ошибку</UButton>**

Подтверждение операции перед её выполнением.

**##### Связь с формой редактирования**
В основном используется при нажатии на функциональную кнопку для отображения соответствующей формы редактирования.

1. **Открыть другую форму редактирования**

**<UView rowKey="id">**
    **<UViewTable>**
        **<template #c_action={record}>**
            **// Действие по умолчанию: открытие формы редактирования с id = "modPwd"; также происходит установка модели формы: model[rowKey] = record[rowKey]**
            **<UButton func='edit:modPwd' :data="record">Изменить пароль</UButton>**
        **</template>**
    **</UViewSearch>**

    **// Форма изменения пароля**
    **<UFormModal id="modPwd" :rules="[пользовательские правила проверки]">**
       **<IvzPassword label="Пароль" field="password" />**

Форма для изменения пароля.

        **<template #footer={model}>**
            **<UButton func='cancel'>Отмена</UButton>**

Кнопка отмены.

            **// Действия по умолчанию: проверка формы, затем отправка формы; запуск анимации отправки формы; запуск анимации нажатия кнопки отправки (для предотвращения многократной отправки)**
            **<UButton func='submit' :url="model.id ? '/project/edit':'/project/add'">Отправить</UButton>**

Отправка формы.

            **<UButton func='reset'>Сброс</UButton>**

Сброс формы.

        **</tempalte>**
    **</USearch>**
**</UView>**

2. **Добавить дочернюю запись (формат дерева)**

**<UView rowKey="id">**
    **<UViewTable>**
        **<template #c_action={record}>**
            **// Открыть форму добавления, а также установить идентификатор формы: model[pid] = record[rowKey]**
            **<UButton func='add:child' :data="record">Добавить дочерний элемент меню</UButton>**
        **</template>**
    **</UViewSearch>**
**</UView>**

Добавление дочерней записи.

#### **Функциональные разрешения**
Функциональные разрешения используются для управления отображением соответствующих функций на странице.

**##### Директива v-auth**

**// Базовый способ использования**
**// Если строка разрешений существует, отображается кнопка**
**<AButton v-auth="'core:project:add'">Добавить</ABtton>**

Отображение кнопки при наличии строки разрешений.

**// Расширенный способ использования**
**// Параметр and: необходимо выполнить оба разрешения из массива**
**<AButton v-auth:and="['core:project:view', 'core:project:info']">Подробности</ABtton>**

Выполнение обоих разрешений из массива.

**// Параметр or: достаточно выполнить любое разрешение из массива**
**<AButton v-auth:or="['core:project:view', 'core:project:info']">Подробности</ABtton>**

Достаточно выполнить одно разрешение из массива.

**// Сокращённая запись параметра and**
**<AButton v-auth="['core:project:view', 'core:project:info']">Подробности</ABtton>**

Сокращённая запись выполнения обоих разрешений.

**// Способ записи параметра disabled (только отключает функцию, не удаляет кнопку); поддерживает компоненты UTag и UButton**
**<UTag v-auth:disabled="['core:project:view']">Подробности</UTag>**

Отключение функции.

**##### Использование URL для принятия решения о разрешении**
Способ управления разрешениями с помощью URL заключается в проверке наличия соответствующего компонента функциональной кнопки или UButton в ответе сервера.

**<UView auth>**
    **<UViewSearch>**
        **<template #func>**
            **<UButton func='add' url='/project/add'>Добавить</UButton>  // Отображается**
            **<UButton func='import' url='/project/import'>Импорт</UButton>  // Не отображается**
        **</template>**
    **</UViewSearch>**
    **<UViewTable>**
        **<template #c_action={record}>**
            **<UFuncTag func='edit' url='/project/edit' :data="record">Изменение</UFuncTag >  // Отображается**
            **<UFuncTag func='del' url='/project/del' :data="record">Удаление</UFuncTag >  // Не отображается**
        **</template>**
    **EndUViewSearch>**
**EndUView>**

Проверка наличия компонентов функциональных кнопок.

**##### URL для получения подробной информации**
Этот URL используется для получения данных для подробного просмотра, но параметры не указаны.

**<UFuncTag func='edit' url='/project/edit' :data="record">Модификация</UFuncTag>**

Получение данных для просмотра.

#### **Компоненты представления**
Компоненты представления используются для организации компонентов представления и должны использоваться в качестве верхнего компонента страницы .vue. Внутри этого контейнера можно выполнять операции связывания для всех интерактивных компонентов представления. Например, нажатие кнопки поиска в компоненте поиска приведёт к запуску запроса таблицы.

**##### Компонент UView**

**<template>**
   **<UView>**
       **...**
   **</UView>**
**endtemplate>**
**script>...</script>**

Контейнер для компонентов представления.

**Указание уникального ключа функции**

**<UView rowKey="id">...**
**endUView>**

Ключ используется для определения таблицы, редактирования и добавления дочерних записей. Поддержка всех свойств компонентов AForm и AModal.

Поддержка всех свойств компонентов UViewDrawer и ADrawerl.
Добавление свойства span в качестве сокращённой формы для labelCol и wrapperCol компонента AForm, формат [6, 18].
Относится к компонентам редактирования, которые могут быть связаны с другими страницами.

**UViewTable**

Поддерживает все свойства компонента ATable.

**UFormModal**

Поддерживает все свойства компонентов AForm и AModal.
Добавление нового свойства primary для обозначения того, что компонент является интерактивным.

**UFormDrawer**

Поддерживает все свойства компонентов AForm и ADrawerl.
Добавление нового свойства primary для объявления компонента интерактивным.

### Расширение компонентов antd

#### Улучшение компонента ATable

Компонент antd ATable может быть сложным для понимания без изучения и практики. Многие функции требуют самостоятельной реализации, такие как одиночный и двойной щелчок, таблицы и множественный выбор. Без опыта использования он может показаться неудобным в использовании. Поэтому был разработан компонент UTable для улучшения ATable. UTable поддерживает большинство свойств ATable, но есть некоторые различия:

* **Неподдерживаемые свойства:**
    * rowSelection — это свойство ATable используется для описания множественного выбора в таблице. В UTable оно помещается непосредственно в свойство columns. Пример:
        ```
        const columns = [
            // Поддерживает большинство свойств rowSelection
            // type не поддерживается, по умолчанию: checkbox, radio не поддерживается
            {type: 'selection', title: 'Множественный выбор'},
            {field: 'name', title: 'Название меню', align: 'left'}
        ]
        // Методы onChange, onSelect, onSelectAll, onSelectInvert будут напрямую использоваться на компоненте UTable
        <UTable ref="tableRef" @selectChange="xx" @select="xx" @selectAll="xx" @selectInvert="xx"></UTable>
        * selectedRowKeys не поддерживается. Вместо этого предоставляется метод.
        * Другие свойства полностью поддерживаются.

    * **Пользовательский слот столбцов:**
        * Столбцы в ATable не поддерживают customRender, вместо этого используется слот. Это позволяет настраивать столбец.
        * Пример:
            * ```
            const columns = [
                {field: 'name', title: 'Название меню', align: 'left'},
                {field: 'user.name', title: 'Имя пользователя', align: 'left'}
            ]
            ```
            * Шаблоны имеют префикс c_ + имя поля = c_name. Если формат a.b, то '.' заменяется на '_', например: c_a_b.
            * Пример использования слотов:
                * ```
                <UTable rowKey="id">
                    <template #c_name="{record}">
                        <a>{{record.name}}</a>
                    </template>
                    <template #c_user_name="{record}">
                        <a>{{record.user.name}}</a>
                    </template>
                </UTable>
                ```

    * **Словари и URL:**
        * Можно преобразовать значение в метку, например, для пола. В базе данных хранится значение «man», а в таблице отображается «мужчина».
        * Существует два способа:
            * Использование локальных переменных sex:
                * ```
                const sex = [
                    {label: 'Мужчина', value: 'man'}, {label: 'Женщина', value: 'woman'}
                ]
                const columns = [
                    {field: 'sex', title: 'Пол', options: sex}
                ]
                ```
            * С использованием словаря, который должен возвращать массив в формате options:
                * ```
                const columns = [
                    {field: 'sex', title: 'Пол', dict: 'sex'}
                ]
                ```
            * Через URL, который должен возвращать массив в формате options:
                * ```
                const columns = [
                    {field: 'sex', title: 'Пол', url: '/core/getSex'}
                ]
                ```

    * **Форматирование даты:**
        * Если столбец является датой, он будет автоматически отформатирован в указанный формат. Можно использовать стандартный формат или настроить свой собственный.
        * Пример с использованием типа date:
            * ```
            const columns = [
                {field: 'createTime', title: 'Время создания', type: 'date'}
            ]
            ```
        * По умолчанию используются форматы {datetime: 'YYYY-MM-DD HH:mm:ss', date: 'YYYY-MM-DD', month: 'MM', week: 'E', time: 'HH:mm:ss'}.
        * При использовании picker можно указать конкретный тип, иначе по умолчанию используется datetime.
            * Пример:
                * ```
                const columns = [
                    {field: 'createTime', title: 'Время создания', type: 'date', picker: 'month'}
                ]
                ```

    * **Операционные столбцы:**
        * UTable поддерживает два способа определения операционных столбцов:
            * Первый способ — использование списка функций:
                * ```
                // Использование type="action" для объявления этого столбца операционным
                const columns = [
                    {field: 'action', title: 'Операция', type: 'action', funMetas: [
                            {field:'Edit', 'Редактировать', props: {onClick: (row) => {}}}, {field:'Del', 'Удалить', props: {onClick: (row) => {}}}
                        ]
                    }
                ]
                ```
            * Второй способ — использование пользовательского слота:
                * ```
                // template
                <template #c_action={record, column}>
                    <a-button>Редактировать</a-button>
                    <a-button>Изменить</a-button>
                </template>

                // js
                const columns = [
                    {field: 'action', title: 'Операция', type: 'action'}
                ]
                ```

    * **Формат данных:**
        * Помимо пользовательских слотов и форматирования дат, UTable также поддерживает пользовательское форматирование данных.
        * Пример:
            * ```
            const columns = [
                {field: 'createTime', title: 'Время создания', formatter: ({value, record, column}) => value}
            ]
            ```

### Установка руководства

1. Установите Node версии 12.0.0 или выше.
2. Клонируйте проект или используйте IDE для импорта.
3. Установите зависимости package.json.
4. Запустите среду разработки.
5. Соберите пакет для официальной среды.

### Инструкция по использованию

1. Сначала загрузите и настройте серверную часть.
2. Настройте адрес прокси-сервера в файле vite.config.js. ```
<UButton func='cancel'>取消</UButton> // 点击默认动作：关�зе текущий редактор, закрыть анимацию отправки, закрыть кнопку отправки.
<UButton func='submit' :url="model.id ? '/project/edit':'/project/add'">отправить</UButton>
<UButton func='reset'>сбросить</UButton>  // 点击默认动действие: сбросить редактор формы.

<UView rowKey="id">
    <UViewTable>
        <template #c_action={record}>
            // 点击 по умолчанию действие: открыть редактор с id = "modPwd" и установить модель [rowKey] = запись [rowKey].
            <UButton func='edit:modPwd' :data="record">изменить пароль</UButton> 
        </template>
    </UViewSearch>
    // редактор изменения пароля
    <UFormModal id="modPwd" :rules="[пользовательские правила проверки]">
       <IvzPassword label="пароль" field="password" />
       <template #footer={model}>
          <UButton func='cancel'>отмена</UButton> // действие по умолчанию: закрыть текущий редактор, закрыть отправку анимации, закрыть кнопку отправки (предотвратить многократную отправку).
          // действие по умолчанию: проверка формы, затем отправка формы, запуск отправки анимации формы, запуск анимации кнопки отправки (предотвращение многократной отправки).
          <UButton func='submit' :url="model.id ? '/project/edit':'/project/add'">отправка</UButton> 
          <UButton func='reset'>сброс</UButton> // действие по умолчанию: сброс редактора формы.
       </tempalte>
    </USearch>
</UView>

<UView rowKey="id">
    <UViewTable>
        <template #c_action={record}>
            // открыть новый редактор и установить родительский идентификатор модели [pid] = запись [rowKey].
            <UButton func='add:child' :data="record">добавить дочерний пункт меню</UButton> 
        </template>
    </UViewSearch>
</UView>

// базовый способ использования
// если есть строка разрешений, она будет отображаться.
<AButton v-auth="'core:project:add'">добавить</ABtton>

// продвинутый способ использования
// параметр and, оба разрешения в массиве должны быть удовлетворены.
<AButton v-auth:and="['core:project:view', 'core:project:info']">подробности</ABtton>
// или параметр, только одно из разрешений в массиве должно быть удовлетворено.
<AButton v-auth:or="['core:project:view', 'core:project:info']">подробности</ABtton>
// и сокращение
<AButton v-auth="['core:project:view', 'core:project:info']">подробности</ABtton>
// disabled написание (только отключает функцию, не удаляет кнопку функции), поддержка значений UTag и UButton компонентов.
<UTag v-auth:disabled="['core:project:view']">подробности</UTag>

// используйте атрибут auth для управления переключателем проверки прав доступа.
// например, возвращаемые функции меню включают добавление (/project/add), редактирование (/project/edit), поиск (/project/query)
<UView auth>
    <UViewSearch>
        <template #func>
            <UButton func='add' url='/project/add'>добавить</UButton> // показать
            <UButton func='import' url='/project/import'>импорт</UButton> // не показывать
        </template>
    </UViewSearch>
    <UViewTable>
        <template #c_action={record}>
            <UFuncTag func='edit' url='/project/edit' :data="record">изменение</UFuncTag > // показать
            <UFuncTag func='del' url='/project/del' :data="record">удаление</UFuncTag > // не показать
        </template>
    </UViewSearch>
</UView>

<UFuncTag func='edit' url='/project/edit' :data="record">изменение</UFuncTag >

const columns = [
 // Поддерживает большинство свойств rowSelection
 //  type не поддерживается по умолчанию: checkbox, не поддерживает radio
  {type: 'selection', title: 'Множественный выбор'},
  {field: 'name', title: 'Название меню', align: 'left'}
]
// onChange, onSelect, onSelectAll, onSelectInvert методы будут напрямую поддерживаться на компоненте UTable.
<UTable ref="tableRef" @selectChange="xx" @select="xx" @selectAll="xx" @selectInvert="xx"></UTable>
// selectedRowKeys не поддерживается, предоставляется через метод.
this.$refs['tableRef'].getSelectedRowKeys();

// Столбец columns не поддерживает customRender, предоставляется через слот.
// Отображение пользовательского столбца с помощью слота.
const columns = [
  {field: 'name', title: 'Название меню', align: 'left'},
  {field: 'user.name', title: 'Имя пользователя', align: 'left'}
]

// Имя слота соответствует правилам: префикс c_ + поле = c_name
// Если формат a.b, то '.' заменяется на '_', т. е. c_a_b
<UTable rowKey="id">
    <template #c_name="{record}">
        <a>{{record.name}}</a>
    </template>
    <template #c_user_name="{record}">
        <a>{{record.user.name}}</a>
    </template>
</UTable>

// Через локальную переменную sex
const sex = [
    {label: 'Мужчина', value: 'man'},{label: 'Женщина', value: 'woman'}
]
const columns = [
    {field: 'sex', title: 'Пол', options: sex}
]
// Через словарь, предоставленный словарь типа sex, должен возвращать массив опций того же формата.
const columns = [
    {field: 'sex', title: 'Пол', dict: 'sex'}
]
// Через URL, предоставленный URL должен возвращать массив опций того же формата.
const columns = [
    {field: 'sex', title: 'Пол', url: '/core/getSex'}
]

// Указание type='date'
const columns = [
    {field: 'createTime', title: 'Время создания', type: 'date'}
]
// Стандартный формат {datetime: 'ГГГГ-ММ-ДД ЧЧ:мм:сс', дата: 'ГГГГ-ММ-ДД', месяц: 'ММ', неделя: 'E', время: 'ЧЧ:мм:сс'}
// Использование picker для указания конкретного типа, по умолчанию используется datetime.
const columns = [
    {field: 'createTime', title: 'Время создания', type: 'date', picker: 'month'}
]

// Использование type="action" для обозначения этого столбца как операционного.
const columns = [
    {field: 'action', title: 'Действие', type: 'action', funMetas: [
            {field:'Edit', 'Редактировать',props: {onClick: (row) => {}}， {field:'Del', 'Удалить', props: {onClick: (row) => {}}}
        ]
    }
]

// template
<template #c_action={record, column}>
    <a-button>Редактировать</a-button>
    <a-button>Изменить</a-button>
</template>

// js
const columns = [
    {field: 'action', title: 'Операция', type: 'action'}
]

const columns = [
    {field: 'createTime', title: 'Время создания', formatter: ({value,record,column}) => value}
] ### Установка

4. **Запуск в среде разработки:**

    vite dev

5. **Сборка для рабочей среды:**

    vite build

### Использование

1. Пожалуйста, скачайте и настройте серверную часть.
2. Настройте адрес прокси-сервера для серверной части:

Также можно использовать онлайн-адрес:

2. 
[Учебное пособие по использованию vite4](https://cn.vitejs.dev/).
1. Если у вас возникли проблемы при использовании, вы можете отправить запрос на включение изменений (pr) или сообщить об ошибке.