❤
npm
Sign UpSign In

@ti-cli/vue3-form-ant3
TypeScript icon, indicating that this package has built-in type declarations

1.1.5 • Public • Published

vue-form-create

基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 引入的方式。UI 库支持 ant-design-vue 。

支持功能

  • 动态数据源配置
  • 文件上传
  • 富文本编辑器
  • 生成 JSON
  • 生成代码
  • 扩展控件

1 安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

npm install vue3-form-ant3 --save
yarn add vue3-form-ant3

注意

  1. 不想在全局安装也可以在组件内直接使用相应的组件。

    import {
  AntDesignForm,
  AntGenerateForm,
} from 'vue3-form-ant3'

示例

npm 引入

import { createApp } from 'vue'
import antd from 'ant-design-vue'
import App from './App.vue'
import DesignForm from 'vue3-form-ant3'
import 'ant-design-vue/dist/antd.css'

createApp(App)
  .use(antd)
  .use(DesignForm)
  .mount('#app')

2 组件说明

表单设计器（AntdDesignForm）

示例

<template>
  <AntDesignForm ref="designForm" />
</template>

API

Props
参数 说明 类型 默认值
preview 设计器预览操作按钮 boolean true
generateCode 设计器生成代码按钮 boolean true
generateJson 设计器生成 Json 按钮 boolean true
uploadJson 设计器导入 JSON 按钮 boolean true
clearable 设计器清空按钮 boolean true
basicFields 设计器左侧基础字段配置 array -
advanceFields 设计器左侧高级字段配置 array -
extendConfig 扩展配置 array -
uploadConfig 上传配置 object -
remoteFalg 动态数据开关 array ['radio', 'checkbox', 'select']
extendConfig
export const extendConfig = [
  {
    source: 'extend', // 来源扩展
    label: '关联孪生体',
    type: 'releative',
    options: {
      defaultValue: '[]',
      width: '200px',
      placeholder: '请选择',
      clearable: false,
      disabled: false,
      twins: {
        twinClassCode: undefined,
        props: []
      }
    },
    model: '',
    key: ''
  }
]
uploadConfig
参数 说明 类型 默认值
action 上传地址 string null
headers 请求头 object -
data 携带数据 object -
方法

通过 ref 可以获取到实例并调用实例方法

方法名 说明 参数
getJson() 获取设计器配置的 JSON 数据 -
setJson(value) 设置设计器的配置信息 通过 getJson 获取的数据
clear() 清空设计器
getTemplate(type) 获取设计器生成的可以直接使用的代码 type 的类型为 'vue' 或 'html'
字段说明

基础字段（basicFields）

type 字段名
input 输入框
textarea 文本框
number 数字计数框
radio 单选框组
checkbox 多选框组
date 时间选择器
select 下拉选择框

高级字段（advanceFields）

type 字段名
uploadFile 文件上传
editor 富文本

扩展控件（extendConfig）

type 字段名
releative 关联孪生体
其它 ...

扩展控件示例

 <AntDesignForm :extendConfig="config" :uploadConfig="uploadConfig">
    <template v-slot:extendContent="{element,data,disable,onBack}">
      <div>
        <!-- 根据element.type可设置不同的扩展控件内容 -->
        <AssociatedTwins
                :disabled="disable"
                :model-value="data"
                :clearable="element.options.clearable"
                :width="element.options.width"
                :twins="element.options.twins"
                :placeholder="element.options.placeholder"
                :el-key="element.key"
                @onBack="(res)=>onBack(res)"
                v-if="element.type==='releative'"
      />
      </div>
    </template>
    <template v-slot:extendConfig="{data}">
      <div>
        <!--根据data.type可设置不同的扩展控件属性设置  -->
        <AssociatedConfig  :source="data" v-if="data.type==='releative'"/>     
    </div>
    </template>
  </AntDesignForm>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, toRefs, defineEmits, ref } from 'vue'
import AssociatedTwins from './extent/AssociatedTwins.vue' //扩展的关联孪生体内容
import AssociatedConfig from './extent/AssociatedConfig.vue'//扩展的关联孪生体的控制属性设置
// 扩展控件配置
const config = [
  {
    source: 'extend', // 来源扩展
    label: '关联孪生体',
    type: 'releative',
    options: {
      defaultValue: '[]',
      width: '200px',
      placeholder: '请选择',
      clearable: false,
      disabled: false,
      twins: {
        twinClassCode: undefined,
        props: []
      }
    },
    model: '',
    key: ''
  }
]
</script>

表单生成器（AntdGenerateForm）

示例

<template>
  <AntGenerateForm ref="generateForm" />
</template>

API

Props
参数 说明 类型 默认值
data 表单 json 配置数据（从表单设计器获取的 json） object -
value 表单数据（从表单生成器获取的 value） object -
disabled 是否禁用 boolean false
uploadConfig 上传配置 object -
方法

通过 ref 可以获取到实例并调用实例方法

方法名 说明 参数
getData() 获取表单数据（返回 Promise） -
reset() 重置表单数据 通过 getJson 获取的数据

3 功能说明

动态数据

单选框，多选框，下拉选择框-等选择项需要通过数据生成，这时可以分别配置动态数据。

示例

<template>
    <AntDesignForm :remoteFalg="remoteFalg" >
      <!-- 扩展单选框，下拉框，多选框的动态数据扩展 -->
    <template v-slot:extendRemote="{data}">
      <!-- 这里可以结合是否配置了单选框，下拉框，多选框动态数据以及data.type: 'radio', 'checkbox', 'select',来分别扩展各自的动态数据  -->
      <Remote :source="data"/>
    </template>
  </AntDesignForm>
</template>
<script lang="ts" setup>
import Remote from './extend/remote.vue'
const remoteFalg = ['radio', 'checkbox', 'select']
</script>
<style scoped>
</style>

remote.vue

<template>
 <div class="remote">
  <a-tree-select  tree-default-expand-all allow-clear :fieldNames="replaceFields" style="width: 100%" @change="changeRemote" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :tree-data="treeData" placeholder="动态选择数据源">
  </a-tree-select>
  <div class="sel_list" v-if="data.options.options.length>0">
   <div v-if="
            data.type === 'radio' ||
            (data.type === 'select' && !data.options.multiple)
          ">
    <a-radio-group v-model:value="data.options.defaultValue">
          <div v-for="item in data.options.options" :key="item.value"><a-radio :value="item.value" >{{ data.options.showLabel?item.label:item.value }}</a-radio></div>
    </a-radio-group>
   </div>
   <div v-if="
            data.type === 'checkbox' ||
            (data.type === 'select' && data.options.multiple)
          ">
    <a-checkbox-group v-model:value="data.options.defaultValue">
          <div v-for="item in data.options.options" :key="item.value"><a-checkbox :value="item.value" >{{ data.options.showLabel?item.label:item.value }}</a-checkbox></div>
    </a-checkbox-group>
   </div>
  </div>
 </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
// 接受来自父组件的传参
const props = defineProps({
  source: {
    type: Object
  }
})
const data = ref<any>(props.source)
const replaceFields = ref({
  children: 'children',
  label: 'name',
  value: 'code'
})
// 从接口获取
const treeData = ref([
  {
    name: '测试',
    code: 'code1',
    disabled: true,
    children: [
      {
        name: '测试1',
        code: 'code2',
        disabled: false,
        children: []
      },
      {
        name: '测试2',
        code: 'code3',
        disabled: false,
        children: []
      }
    ]
  }
])
// 从接口获取
const dataList = ref([
  {
    code: 'A',
    name: 'A1'
  },
  {
    code: 'B',
    name: 'B1'
  },
  {
    code: 'C',
    name: 'C1'
  }
])
// 动态数据源改变
const changeRemote = (value:any, label:any, extra:any) => {
  // 根据value查询设置dataList并赋值给data.value.options.options
  data.value.options.options = dataList.value.map((item:any) => {
    return {
      value: item.code,
      label: item.name
    }
  })
}
</script>

<style lang="scss" scoped>
.remote {
 width: 100%;
  .sel_list{
    margin-top: 10px;
    div{
      margin:4px 0;
    }
  }
}
</style>

Readme

Keywords

Package Sidebar

Install

npm i @ti-cli/vue3-form-ant3

Repository

git+https://gitee.com/ssllhgmw/vue3-form.git

Homepage

gitee.com/ssllhgmw/vue3-form.git

Weekly Downloads

2

Version

1.1.5

License

MIT

Unpacked Size

9.34 MB

Total Files

9

Last publish

Collaborators

  • hasaiki
Try on RunKit
Report malware