NG-FORM-IVIEW: создание открытого исходного кода самого мощного компонента динамической формы Vue + IView

NG-FORM-IVIEW

Онлайн-демонстрация: https://jjxliu306.github.io/ng-form-iview/dist

Адрес версии element-ui: https://gitee.com/jjxliu306/ng-form-element

Адрес версии element-plus: https://gitee.com/jjxliu306/ng-form-elementplus

Бэкенд-сервис

Функция анализа и проверки ngtool: https://gitee.com/jjxliu306/ngtool

Документация (постоянно обновляется)

https://www.ng-form.cn/

Интеграция

Пример интеграции на основе springboot + vue для разделения фронтенда и бэкенда:

Бэкенд springboot: https://gitee.com/jjxliu306/ng-server

Фронтенд vue: https://gitee.com/jjxliu306/ng-ui

Пример

Базовая форма:

Базовая форма

Проверка формы и динамическое отображение компонентов:

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

Динамическая таблица:

Динамическая таблица

Введение

Это дизайнер форм, созданный на основе Vue и IView. Он позволяет быстро создавать страницы форм с помощью перетаскивания, а также экспортировать формы в формате JSON или импортировать формы, созданные другими пользователями.

Отличия от других открытых форм

Каждый компонент можно динамически скрывать и отображать, и он предоставляет различные правила проверки, кроме «обязательного», включая поддержку выражений и регулярных выражений.
Можно настроить не выводить значения скрытых компонентов, чтобы уменьшить размер выходных данных.
Для выбора компонентов (радио, выбор, флажок) предоставляется функция вызова после выбора, которая поддерживает выражения. Выбор компонентов поддерживает функцию многоуровневой ассоциации.
Динамическая таблица предоставляет отдельное всплывающее окно для ввода и редактирования.
Поддерживаются различные макеты, такие как сетка и таблицы.
Поддержка режима предварительного просмотра формы, где все содержимое формы не является компонентом и отображается полностью.
При выборе компонентов (радио, выбор, флажок), соответствующие метки сохраняются отдельно для удобства отображения.

Компоненты

ng-form-design: дизайнер форм (на основе визуального управления для быстрого проектирования страниц форм и генерации конфигураций JSON или страниц).
ng-form-build: конструктор форм (создаёт страницу формы на основе конфигурации JSON, полученной из дизайнера форм, и отображает её после добавления свойства readonly для предварительного просмотра).

CDN для прямого использования

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-drag-formdesign</title> 
    <!-- Импорт стилей -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jjxliu306/vue-form-design@2.0.10/lib/vue-drag-formdesign.css">
    <!-- Импорт библиотеки компонентов -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jjxliu306/vue-form-design@2.0.10/lib/vue-drag-formdesign.umd.min.js"></script>
  </head> 
  <body>
    <div id="app"> 
      <vue-drag-formdesign ref="formDesign" > 
        <template  slot="formName">
          <span> vue-drag-formdesign 示例 </span>
        </template>
      </vue-drag-formdesign>  
    </div> 
    <script>
      new Vue({
        el: '#app',
        data: { 
        },
        mounted() { 
        },
        methods: {
         
        }
      })
    </script>
  </body>
</html>

Подробности см. в файле form-cdn.html в проекте.

Установка

npm install --save ng-form-iview

Ссылка

Импортируйте компонент:

// Импорт компонента
import NgFormIView  from 'ng-form-iview'
import 'ng-form-iview/lib/ng-form-iview.css'

Зарегистрируйте компонент:

// Регистрация компонента
Vue.use(NgFormIView)

Страница ссылки

<div id="app"> 
    <ng-form-design  />
</div>

API-описание

1. Дизайнер форм ng-form-design

Метод	Параметр	Описание
initModel	json	Инициализация динамического содержимого формы, параметр — это шаблон динамической формы JSON.
getModel	N/A	Возвращает текущую редактируемую информацию о динамической форме.

Свойство	Описание	Формат	Значение по умолчанию
customComponents	Конфигурация пользовательских компонентов, подробности см. в примере ниже.	array	N/A
config	Некоторые базовые настройки формы, в основном параметры HTTP, например, добавление параметров к заголовку в HTTP-запросе: `config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }`	object	N/A
clear	Отображать ли кнопку очистки на панели.	boolean	true
preview	Отображать ли кнопку предварительного просмотра на панели.	boolean	true
reder	Отображать ли кнопку рендеринга на панели.	boolean	true
imp	Отображать ли кнопку импорта на панели.	boolean	true
exp	Отображать ли кнопку экспорта на панели.	boolean	true
basic-item	Отображать или выбирать компоненты из списка базовых компонентов.	boolean/Array	true
personal-item	Отображение или выбор компонентов из списка индивидуальных компонентов.	boolean/Array	true
layout-item	Отображение или выбор компонентов из списка компонентов макета.	boolean/Array	true

Слот

Слот	Описание
drag	Слот левой панели компонентов, можно заполнить область содержимого на панели компонентов.
form-name	Текущее имя динамической формы.
control-button	Кнопки функций, если вам нужно настроить функциональные кнопки, вы можете сделать это здесь.

Примеры слотов

 <ng-form-design >
        <template slot="controlButton" >
            <el-button   type="text" size="medium"  @click="initDemo(1)">Пример 1</el-button>
            <el-button   type="text" size="medium"  @click="initDemo(2)">Пример 2</el-button>
            <el-button   type="text" size="medium"  @click="initDemo(3)">Пример 3</el-code>
        </template>
        <template  slot="formName">
            <span>
``` **vue-drag-formdesign 示例**

**2. 表单查看/填报组件 ng-form-build**

*Методы:*
| Метод | Параметр | Описание |
|---|---|---|
| reset | N/A |  Перезагрузка динамической формы |
| validator| N/A|  Проверка текущего содержимого формы в соответствии с установленными правилами, возвращает Promise|
| getData | N/A | Получение данных текущей формы после проверки, возвращает Promise | 

*Свойства:*

| Свойство | Описание | Формат | Значение по умолчанию |
|---|---|---|---|
| formTemplate | Шаблон формы | json | Нет |
| models | Заполненные данные формы | json | Нет |
| disabled | Отключено | boolean | false |
| renderPreview | Текущий режим — предварительный просмотр | boolean | false |
| config| Некоторые базовые настройки формы, в основном параметры HTTP, например, добавление параметров к заголовку в HTTP-запросе: config: {  httpConfig: (config)=>{  config.headers['aaaa'] = 'bbbb' return config   } }| object |  N/A  |
| customComponents |  Конфигурация пользовательских компонентов, конкретный формат см. в примере пользовательского компонента ниже | array | N/A  |  

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

<template>
  <div id="app"> 
     <ng-form-build  :formTemplate="formTemplate" :models="models"/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      models: {} ,
      formTemplate: {}
    }
  },
  created() {
    this.formTemplate = require('./data/basic.json')
  }
}
</script>


**3. Пример пользовательского компонента**

3.1 Пользовательский компонент (показывает изображение на основе предоставленного адреса)

3.2 Определение конфигурации свойств пользовательского компонента (впоследствии будет прикреплено к панели атрибутов панели отрисовки формы)

<template>
  <!-- Конфигурация свойств пользовательского компонента -->  
  <el-form v-show="selectItem.key" size="mini" :disabled="disabled">
    <!-- TCustom   start-->
      <template v-if="selectItem.type == 'customT'"> 
            <!-- Метка переключателя -->
          <el-form-item   label="Стиль изображения">
              <el-input type="textarea" placeholder="Пожалуйста, введите" v-model="selectItem.options.style" /> 
          </el-form-item>
      </template> 
      <!-- TCustom  end -->
  </el-form> 
</template>
<script>
export default {
  props: {
      selectItem: { // Выбранный компонент
        type: Object,
        required: true
      },
      disabled: { // Отключено
        type: Boolean,
        default: false
      }
  } 
}
</script>

3.3 Настройка в панели динамического рисования формы

<template>
  <div id="app">
    <ng-form-design ref="formDesign" :custom-components="customComponents" > 
      <!-- Конфигурация пользовательских свойств -->
      <template slot="custom-properties" slot-scope="{selectItem}">
        <Properties :selectItem="selectItem"/>
      </template> 
      <template  slot="formName">
        <span> vue-drag-formdesign пример </span>
      </template>
    </ng-form-design>   
  </div>
</template> 
<script>
// Ссылка на пользовательские компоненты и компоненты для изменения информации о пользовательских компонентах
import CustomT from './components/TCustom'
import Properties from './components/properties'
export default {
  name: 'App',
  components: {CustomT , Properties},
  data(){
    return {  
      // Список пользовательских компонентов
      customComponents: [
        { 
          type: 'customT' ,
          label: "Пользовательский показ изображения", // Текст заголовка 
          component: CustomT ,
          options: {
            style: 'width:100px;height:100px'
          },
          model: "customT",
          key: "customT",
          rules: [
            {
              required: false,
              message: "Обязательное поле"
            }
          ]
        },
      ]
    }
  } ,  
  methods: { 
  }
}
</script>

Общение

Нажмите на ссылку, чтобы присоединиться к группе qq для обсуждения, вы можете напрямую задавать вопросы и сообщать об ошибках. [Группа общения: 152592057]

OSCHINA-MIRROR/jjxliu306-ng-form-iview

Бэкенд-сервис

Документация (постоянно обновляется)

Интеграция

Пример

Введение

Отличия от других открытых форм

Компоненты

CDN для прямого использования

Установка

Ссылка

Страница ссылки

API-описание

1. Дизайнер форм ng-form-design

Слот

Примеры слотов

Общение

Комментарии ( 0 )

Введение

Обновления (1)

Участники

Недавние действия

OSCHINA-MIRROR/jjxliu306-ng-form-iview .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Бэкенд-сервис

Документация (постоянно обновляется)

Интеграция

Пример

Введение

Отличия от других открытых форм

Компоненты

CDN для прямого использования

Установка

Ссылка

Страница ссылки

API-описание

1. Дизайнер форм ng-form-design

Слот

Примеры слотов

Общение

Комментарии ( 0 )

Введение

Обновления (1)

Участники

Недавние действия

OSCHINA-MIRROR/jjxliu306-ng-form-iview