zhongan-ui

介绍

• 封装ant-design-vue 的form表单, 配置参数即可便捷的在页面展示表单。

• 内部需要使用ant-design-vue组件库，故项目中使用此包需要在antd组件库，全局完整注册组件，注册所有icon组件。如使用中写法

环境

• Vu3^3.2.13
• ant-design-vue^3.2.9

使用

npm i ant-design-vue
npm i zhongan-ui

// main.js文件
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import * as Icons from "@ant-design/icons-vue"
import ZhongAnUI from 'zhongan-ui'

const app = createApp(App)
app.use(Antd)
app.use(ZhongAnUI)
for (const i in Icons) {
  app.component(i, Icons[i])
}

案例

​ 直接使用za-form, 配置formSrting对象

// xxx.vue文件
<template>
  <za-form :formSetting="data.formSetting"/>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    const data = reactive({
      formSetting: {
        layout: "span",
        gutter: 20,
        attributes:{
          model: {},
		},
        formItems: [
          {
            type: 'input',
            span: 6,
            allowClear: true,
            placeholder: '请输入文件标识',
          },
          {
            type: 'select',
            span: 6,
            placeholder: '请输入分发方',
            showSearch: true,
            allowClear: true,
            filterOption: false,
            options: []
          }，
          {
            type: 'button',
            label: '重置',
            span: 2,
          },
        ]
      }
    })
    return {
      data
    }
  }

}
</script>

API

formSetting

• 支持所有antd组件库form属性、方法及事件，以下buttons和formItems是新增的可配置项。

• 配置layout可配置布局格式，layout属性值除了antd自带的horizontal、vertical、inline，还可配置值为span和flex。span和flex布局对应antd的栅格布局中span和flex

• 兼容antd组件库中所有form方法

• 设置formSetting，如设置事件、属性

   formSetting: {
       layout: "grid",
       gutter: 20,
       attributes:{
            autocomplete: 'off',
  	}
      events:{
          onFinish: handleFinish,
    }
      formItems: [....]
   }

| 参数 | 说明 | 试例 | | :--------: | :----------------------------------------: | :--------------------: | | layout | 'horizontal'、'vertical'、'inline'、‘grid' | 不设置时，同antd默认值 | | gutter | 当layout为'grid'时，用于设置间距 | { gutter： 24 } | | attributes | a-form表单属性 | | | events | a-form表单事件 | | | formItems | a-form-item的配置 | |

formSetting.formItems

• formItems是数组， 数组每一项为对象，type值必填

• 配置按钮时，设置type为button。 按钮中的文字配置label

   {
       type: 'button',
       attributes: {
       	label: '重置',
          icon: <sync-outlined />,
        },
       events: {
         	onClick: handleResetForm
       }
  }

• 兼容antd组件input、select、button等表单项配置

| 参数 | 说明 | 试例 | | :----------: | :----------------------------------------------------------: | :------------------------------------------------: | | type（必填） | 类型，如input, select、button等,必须是在antd 中存在的 | { type: 'select' } | | isShow | 是否显示，默认值为true，为false时不显示 | { isShow: false } | | flex | grid布局下生效 | { layout: 'grid', formItems: [{...., flex： 6 }] } | | span | grid布局下生效 | { layout: 'grid', formItems: [{...., span： 6 }] } | | 事件 | 对应antd中事件，注册事件以驼峰名称 | { onSearch: ()=> {do somethings} } | | attributes | 属性， 如type为input,则可配置a-input的所有属性 | | | events | 事件 | |

获取数据

​ 前提： formItem中想要获取的数据，设置name属性

​ 1、如果有设置model，则可直接获取

// xxx.vue文件
<template>
  <za-form :formSetting="data.formSetting"/>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    const data = reactive({
      formSetting: {
        attributes:{
          model: {},
		}，
      formItems: [
          {
            type: 'input',
            name: 'fileName',
            attributes: {
              allowClear: true,
              placeholder: '输入文件名称',
            }
          }
		]
      }
    })

  function getData() {
      console.log(data.formSetting.attributes.model.fileName )
  }

​

​ 2、通过ref获取组件的model属性

// xxx.vue文件
<template>
  <za-form :formSetting="data.formSetting" ref="formRef"/>
</template>
<script>
import { reactive,ref } from 'vue'
export default {
	setup() {
    	const formRef = ref(null)
        const data = reactive({
      		formSetting: {
                ......
            }
  		function getData() {
            formRef.value.model
      		console.log(formRef.value.model )
  		}
		return {
          data
          formRef
	  	}
  }

​

​ 3、ant-design中方法，如事件onFinsh，通过ref调用valida方法等

注意点

• 配置formSetting时，注意变量作用域，否则报错未声明就已使用
• formItems里每一项的type必填，不填，当前项不显示
• 配置项数据绑定的是响应式的，数据改变页面不会生效重新渲染。需要直接设置具体配置

​ 以select获取下拉项数据为例

错误代码

mport { reactive, computed } from 'vue'
const data = reactive({
	selectData: []
    formSetting: {
        formItems: [
            {
                type: 'select',
                name: 'status',
                showSearch: true,
                onSearch: val => handleSearch(val)
                options: computed(()=>{
                	return data.selectData.map(item => {
                		return {
                		...item,
                		...{ lable: item.xx, value: item.xx }
                		}
					})
				})
            }
        ]
    }
})
function handleSearch(val) {
	const dataList = xxx 发请求获取
	data.selectData = dataList
}

正确代码

const data = reactive({
	selectData: []
    formSetting: {
        formItems: [
            {
                ...
                onSearch: val => handleSearch(val)
                options: []
            }
        ]
    }
})
function handleSearch(val) {
	const dataList = xxx 发请求获取
	data.formSetting.formItems[下标].options = dataList
}