1.0.2 • Published 3 years ago
bm-customform-draw v1.0.2
bm-customform-draw
用于本末项目的自定义表单渲染组件, 该组件依赖element-ui form组件和表单配置信息接口, 可以实现表单的自定义配置
安装
npm install bm-customform-draw -simport Vue from 'vue'
import bmCustomFormDraw from 'bm-customform-draw'
Vue.use(bmCustomFormDraw)<template>
<div>
<bm-custom-form-draw v-if="ShowForm"
:formData="formData"
:customFormOptions="customFormOptions"></bm-custom-form-draw>
</div>
</template>
<script>
export default {
data () {
return {
ShowForm: false,
formData: {
"formDataList": [
{
"name": "Layout",
"label": "栅格布局",
"makeStyle": {
"active": false
},
"style": {
"hideLabel": true
},
"setting": {
"gutter": 20,
"col": 2,
"colList": [
{
"fieldId": "sname",
"name": "Input",
"label": "前置组件",
"placeholder": "请输入",
"value": "",
"maxlength": "50",
"showWordLimit": true,
"rule": "",
"filter": "keepChinese",
"isHaveUnit": false,
"unitName": "",
"rules": {
"required": {
"required": true,
"message": "不能为空",
"trigger": "blur"
}
},
"makeStyle": {
"active": false
},
"setting": {
"isHavePrefixIcon": false,
"isHaveSuffixIcon": false,
"prefixIcon": "",
"suffixIcon": "",
"isHavePrefixComponent": true,
"isHaveSuffixComponent": false
},
"field": "sname"
},
{
"fieldId": "unit",
"name": "Input",
"label": "带单位",
"placeholder": "请输入",
"value": "",
"maxlength": "100",
"showWordLimit": true,
"rule": "",
"filter": "keepInt",
"isHaveUnit": true,
"unitName": "万元",
"rules": {
"required": {
"required": true,
"message": "不能为空",
"trigger": "blur"
}
},
"makeStyle": {
"active": false
},
"setting": {
"isHavePrefixIcon": false,
"isHaveSuffixIcon": false,
"prefixIcon": "",
"suffixIcon": "",
"isHavePrefixComponent": false,
"isHaveSuffixComponent": false
},
"field": "unit"
}
]
},
"fieldId": "Layout_1618366277360",
"field": ""
},
{
"name": "Layout",
"label": "栅格布局",
"makeStyle": {
"active": false
},
"style": {
"hideLabel": true
},
"setting": {
"gutter": 20,
"col": 2,
"colList": [
{
"fieldId": "tel",
"name": "Input",
"label": "手机号",
"placeholder": "请输入",
"value": "",
"maxlength": "11",
"showWordLimit": true,
"rule": "mobilePhone",
"filter": "",
"isHaveUnit": false,
"unitName": "",
"rules": {
"required": {
"required": true,
"message": "不能为空",
"trigger": "blur"
}
},
"makeStyle": {
"active": false
},
"setting": {
"isHavePrefixIcon": false,
"isHaveSuffixIcon": false,
"prefixIcon": "",
"suffixIcon": "",
"isHavePrefixComponent": false,
"isHaveSuffixComponent": false
},
"field": "tel"
},
{
"fieldId": "phone",
"name": "Input",
"label": "座机",
"placeholder": "请输入",
"value": "",
"maxlength": "",
"showWordLimit": false,
"rule": "phone",
"filter": "",
"isHaveUnit": false,
"unitName": "",
"rules": {
"required": {
"required": true,
"message": "不能为空",
"trigger": "blur"
}
},
"makeStyle": {
"active": false
},
"setting": {
"isHavePrefixIcon": false,
"isHaveSuffixIcon": false,
"prefixIcon": "",
"suffixIcon": "",
"isHavePrefixComponent": false,
"isHaveSuffixComponent": false
},
"field": "phone"
}
]
},
"fieldId": "Layout_1618366379723",
"field": ""
},
{
"name": "Layout",
"label": "栅格布局",
"makeStyle": {
"active": false
},
"style": {
"hideLabel": true
},
"setting": {
"gutter": 20,
"col": 2,
"colList": [
{
"fieldId": "radio",
"name": "Radio",
"field": "radio",
"label": "单选框",
"multiple": false,
"placeholder": "请选择",
"value": "",
"selections": [
{
"label": "选项一",
"value": "1"
},
{
"label": "选项二",
"value": "2"
}
],
"makeStyle": {
"active": false
},
"setting": {
"isRemote": false,
"remoteUrl": "",
"remoteDataPath": "",
"remoteDataProps": {
"label": "label",
"value": "value"
}
}
},
{
"fieldId": "checkbox",
"name": "Checkbox",
"field": "checkbox",
"label": "多选框",
"multiple": true,
"placeholder": "请选择",
"value": [],
"selections": [
{
"label": "选项一",
"value": "1"
},
{
"label": "选项二",
"value": "2"
}
],
"makeStyle": {
"active": false
},
"setting": {
"isRemote": false,
"remoteUrl": "",
"remoteDataPath": "",
"remoteDataProps": {
"label": "label",
"value": "value"
}
}
}
]
},
"fieldId": "Layout_1618366483557",
"field": ""
},
{
"name": "Layout",
"label": "栅格布局",
"makeStyle": {
"active": false
},
"style": {
"hideLabel": true
},
"setting": {
"gutter": 20,
"col": 2,
"colList": [
{
"fieldId": "select",
"name": "Select",
"field": "select",
"label": "下拉框",
"multiple": false,
"placeholder": "请选择",
"value": "",
"selections": [
{
"label": "选项一",
"value": "1"
},
{
"label": "选项二",
"value": "2"
}
],
"makeStyle": {
"active": false
},
"setting": {
"isRemote": false,
"remoteUrl": "",
"remoteDataPath": "",
"remoteDataProps": {
"label": "label",
"value": "value"
}
}
},
{
"fieldId": "timeChose",
"name": "TimePicker",
"field": "timeChose",
"label": "时间选择",
"multiple": false,
"placeholder": "请选择时间",
"value": "",
"selections": "unset",
"rules": {
"required": {
"required": true,
"message": "不能为空",
"trigger": "blur"
}
},
"makeStyle": {
"active": true
},
"setting": {
"selectableRange": "00:00:00-23:59:59",
"format": "HH:mm:ss",
"prefixIcon": "el-icon-time"
}
}
]
},
"fieldId": "Layout_1618366528959",
"field": ""
},
{
"name": "Layout",
"label": "栅格布局",
"makeStyle": {
"active": false
},
"style": {
"hideLabel": true
},
"setting": {
"gutter": 20,
"col": 2,
"colList": [
{
"fieldId": "dateRange",
"name": "DatePickerMultiple",
"field": "dateRange",
"label": "日期范围",
"multiple": true,
"placeholder": "请选择日期",
"value": [],
"selections": "unset",
"makeStyle": {
"active": false
},
"setting": {
"format": "yyyy-MM-dd",
"startPlaceholder": "开始日期",
"endPlaceholder": "结束日期",
"rangeSeparator": "至",
"prefixIcon": "el-icon-date",
"valueFormat": "yyyy-MM-dd",
"type": "daterange"
}
},
{
"fieldId": "address",
"name": "address",
"field": "address",
"label": "地址选择",
"multiple": true,
"placeholder": "",
"value": {
"province": {
"name": "北京市",
"value": "110000"
},
"city": {
"name": "市辖区",
"parent": "110000",
"value": "110100"
},
"area": {
"name": "东城区",
"parent": "110100",
"value": "110101"
},
"detail": ""
},
"makeStyle": {
"active": true
}
}
]
},
"fieldId": "Layout_1618366562512",
"field": ""
}
],
"formStyle": {
"hideLabel": false,
"labelWidth": "85px",
"labelPosition": "right",
"showRequiredAsterisk": true,
"showVerificationMessage": true,
"size": "medium",
"labelSuffix": ":"
},
"model": {
"sname": "",
"unit": "",
"tel": "",
"phone": "",
"radio": "c1",
"checkbox": [
"c1"
],
"select": "c1",
"timeChose": "",
"dateRange": [],
"address": {
"province": {
"name": "北京市",
"value": "110000"
},
"city": {
"name": "市辖区",
"value": "110100",
"parent": "110000"
},
"area": {
"name": "东城区",
"value": "110101",
"parent": "110100"
},
"detail": ""
}
}
},
customFormOptions: {}
}
}
methods: {
initcustomFormOptions() {
// 此函数用于初始化表单的修改参数, 须放在自定义表单请求接口回调内
let _this = this
this.customFormOptions = {
sname: {
component_prepend: require("./component"),
component_prepend_change: (keyName, val) => {
// console.log(keyName)
// console.log(val)
_this.jsonCode.model[keyName] = val
},
component_suffix: require("./componentSuffix"),
component_suffix_change: (keyName) => {
console.log(keyName, "search");
},
change: (val) => {
// console.log(val)
},
},
select: {
options: [
{ label: "自定义选项一", value: "c1" },
{ label: "自定义选项二", value: "c2" },
],
disabled: (val) => {
if (_this.jsonCode.model.tel.length > 0) return false;
return true;
},
change: (val) => {
// console.log(val)
},
},
checkbox: {
options: [
{ label: "多选1", value: "c1" },
{ label: "多选2", value: "c2" },
],
change: (val) => {
// console.log(val)
},
},
radio: {
options: [
{ label: "单选1", value: "c1" },
{ label: "单选2", value: "c2" },
],
change: (val) => {
// console.log(val)
},
},
timeChose: {
change: (val) => {
// console.log(val)
},
},
dateRange: {
change: (val) => {
// console.log(val)
},
},
address: {
change: (val) => {
// console.log(val)
},
},
cascader: {
options: [],
change: (val) => {
// console.log(val)
},
},
};
// this.jsonCode.model.company = 'c1'
}
},
computed: {
...mapState("customForm", {
formData: (state) => state.formData,
})
},
created() {
axios.post('http://172.16.3.164:3000/form/getFormJson').then(res => {
// 服务端的自定义表单配置数据
let jsonCode = res.data.data.formData[0].jsonCode
// 递交至store保存
this.SET_FORMDATA({
key: 'projectInfo',
data: this.jsonCode
})
// 添加当前表单个性化业务的参数
this.initcustomFormOptions()
// 渲染表单
this.ShowForm = true
})
}
}
</script>使用指南
formData: 从服务端获取的自定义表单配置数据, 该数据必须以store形式存在, 否则不会触发表单的渲染
customFormOptions: 该参数是对自定义表单进行业务修改, 通过配置表单keyName对象的属性, 可以达到每个自定义表单各自不同的业务