feat: 发布1.2.1版本

lisiyizu · Sep 17, 2021 · ebcfca0 · ebcfca0
1 parent e6d4cf7
commit ebcfca0
Show file tree

Hide file tree

Showing 17 changed files with 230 additions and 200 deletions.
diff --git a/src/packages/components/el-checkbox/index.js b/src/packages/components/el-checkbox/index.js
@@ -1,4 +1,4 @@
-import { createElementBySlot, createTipComponent } from '../utils'
+import { createElementBySlot, createTipComponent, getOptionList } from '../utils'
 
 export default function(createElement, value, data) {
   const vm = this
@@ -9,12 +9,13 @@ export default function(createElement, value, data) {
     attrs = {},
     props = {},
     style = {},
-    items = [],
     name = '',
     keys = null,
     render = { before: null, after: null }
   } = data
 
+  const items = getOptionList(data)
+
   data.checkAll = data.checkAll || []
   data.checkAllDisabled = data.checkAllDisabled || false
   if (!this.inline) style.width = ''

diff --git a/src/packages/components/el-radio/index.js b/src/packages/components/el-radio/index.js
@@ -1,15 +1,16 @@
-import { createElementBySlot, createTipComponent } from '../utils'
+import { createElementBySlot, createTipComponent, getOptionList } from '../utils'
 
 export default function(createElement, value, data) {
   const {
     on = {},
     attrs = {},
     props = {},
     style = {},
-    items = [],
     keys = null
   } = data
 
+  const items = getOptionList(data)
+
   if (!this.inline) style.width = ''
 
   const nodes = [

diff --git a/src/packages/components/el-select/index.js b/src/packages/components/el-select/index.js
@@ -1,16 +1,17 @@
-import { createElementBySlot, createTipComponent } from '../utils'
+import { createElementBySlot, createTipComponent, getOptionList } from '../utils'
 
 export default function(createElement, value, data) {
   const {
     on = {},
     attrs = {},
     props = {},
     style = {},
-    items = [],
     keys = null,
     scopedSlots = null
   } = data
 
+  const items = getOptionList(data)
+
   const nodes = [
     createElementBySlot.call(this, createElement, data, 'before'),
     createElement(

diff --git a/src/packages/components/index.js b/src/packages/components/index.js
@@ -183,8 +183,8 @@ export const Component = (createElement, vm, key, item) => {
   if (vifBool) {
     vm.validiteFieldSet.delete(name)
   } else if (!COMPFLEX_COMPONENTS.includes(item.tag)) {
-    // 修复联动 vif = false，清空数值
-    eval(`formValues.${name} = item.default || ''`)
+    // 修复联动 vif = false，清空重置组件（注意：el-input-number 组件默认值0，需要单独处理);
+    eval(`formValues.${name} = item.default || (item.tag === 'el-input-number' ? item.props.min || 0 : '')`)
     vm.validiteFieldSet.add(name)
     vm.$refs[vm.refName] && vm.$refs[vm.refName].clearValidate(key)
   } else if (COMPFLEX_COMPONENTS.includes(item.tag)) {

diff --git a/src/packages/components/object/index.js b/src/packages/components/object/index.js
@@ -21,16 +21,13 @@ export default function(createElement, value, data) {
     }
     this.$set(data.components[key], '$item', eval(`model.${data.name}`))
     const componentDataCopy = deepClone(data.components[key])
-    // 联动清除子组件的验证，array/table 做数组清空
-    if (!componentDataCopy.vif) {
-      // 复杂组件的情况
-      if (componentDataCopy.isInput) {
-        componentDataCopy.vif = data.vifBool
-      }
-      // 子组件不包含验证表达式
-      if (!componentDataCopy.requiredExpression && componentDataCopy.isInput && typeof data.vif === 'string') {
-        componentDataCopy.required = data.vifBool
-      }
+    // 复杂组件的情况
+    if (typeof componentDataCopy.vif !== 'string') {
+      componentDataCopy.vif = data.vifBool
+    }
+    // 子组件不包含验证表达式
+    if (!componentDataCopy.requiredExpression && componentDataCopy.hasOwnProperty('required') && componentDataCopy.isInput && typeof data.vif === 'string') {
+      componentDataCopy.required = data.vifBool
     }
     return Component(createElement, this, `${data.name}.${key}`, componentDataCopy)
   })

diff --git a/src/packages/components/utils.js b/src/packages/components/utils.js
@@ -199,8 +199,8 @@ const genUnique = function() {
 
 // 创建操作按钮
 const createActionButtons = function({ h, action, component, scope }) {
-  const { formValues } = this;
-  const $model = formValues;
+  const { formValues } = this
+  const $model = formValues
   return action.buttons.map(item => {
     const ifBool = item.if ? eval(item.if) : true
     const disabledBool = item.disabled ? eval(item.disabled) : false
@@ -231,16 +231,16 @@ const createActionButtons = function({ h, action, component, scope }) {
 
 // array/table 新增操作
 const addRow = function(data, formValues) {
-  if(data.on && data.on.add) {
+  if (data.on && data.on.add) {
     eval(
       `formValues.${data.name}.push(JSON.parse(JSON.stringify(data.keys)))`
     )
-    const list = eval(`formValues.${data.name}`);
+    const list = eval(`formValues.${data.name}`)
     data.on.add({
-      row: list[list.length-1],
-      $index: list.length-1,
+      row: list[list.length - 1],
+      $index: list.length - 1,
       $length: list.length
-    });
+    })
   } else {
     eval(
       `formValues.${data.name}.push(JSON.parse(JSON.stringify(data.keys)))`
@@ -250,44 +250,54 @@ const addRow = function(data, formValues) {
 
 // array 删除操作
 const delRowForArray = function(data, formValues, item, index) {
-  if(data.on && typeof data.on.delete === 'function') {
+  if (data.on && typeof data.on.delete === 'function') {
     data.on.delete({
       row: item,
       $index: index,
       $length: formValues.length
     }, done => {
-      if(done) {
-        eval(`(formValues.${data.name}).splice(${index}, 1)`);
+      if (done) {
+        eval(`(formValues.${data.name}).splice(${index}, 1)`)
       }
     })
   } else {
-    eval(`(formValues.${data.name}).splice(${index}, 1)`);
+    eval(`(formValues.${data.name}).splice(${index}, 1)`)
   }
 }
 
 // table 删除行操作
 const delRowForTable = function(data, scope, formValues) {
-  if(data.on && typeof data.on.delete === 'function') {
+  if (data.on && typeof data.on.delete === 'function') {
     data.on.delete(scope, done => {
-      if(done) {
+      if (done) {
         eval(`formValues.${data.name}.splice(scope.$index, 1)`)
       }
-    });
+    })
   } else {
     eval(`formValues.${data.name}.splice(scope.$index, 1)`)
   }
 }
 
 // data transform base64
-const utoa = function (data) {
+const utoa = function(data) {
   return btoa(unescape(encodeURIComponent(data)))
 }
 
 // base64 transform data
-const atou = function (base64) {
+const atou = function(base64) {
   return decodeURIComponent(escape(atob(base64)))
 }
 
+// 获取(el-select/el-radio/el-checkbox)数据
+const getOptionList = function(data) {
+  return Array.isArray(data.items) ? data.items.map(item => {
+    return (typeof item === 'string') ? { label: item, value: item } : item
+  }) : typeof data.items === 'object' ? Object.keys(data.items).reduce((prev, next) => {
+    prev.push({ label: data.items[next], value: next })
+    return prev
+  }, []) : []
+}
+
 export {
   isEqual,
   isEmpty,
@@ -305,5 +315,6 @@ export {
   CUSTOM_TAGS,
   addRow,
   delRowForArray,
-  delRowForTable
+  delRowForTable,
+  getOptionList
 }
diff --git a/src/packages/index.vue b/src/packages/index.vue
@@ -216,9 +216,7 @@ export default {
       }, {})
       this.schemaValues = JSON.parse(JSON.stringify(values))
       this.formValues = { ...values, ...customData }
-      this.$nextTick(() => {
-        this.$emit('input', { ...this.formValues, ...this.model })
-      })
+      this.$emit('input', { ...this.formValues, ...this.model })
     },
     /**
 		 *  label/title/slot 模版字符串
@@ -311,17 +309,12 @@ export default {
       component.label = component.label || ''
       component.style = component.style || {}
       component.slot = component.slot || {}
+      component.items = component.items || []
       component.props = component.props || {}
       component.attrs = component.attrs || {}
       component.rules = component.rules || (component.required ? { required: true, message: '必填' } : null)
       // 监听config表达式的情况
       this.watchConfigExp(component, watchConfigExp)
-      if (component.items) {
-        const list = JSON.parse(JSON.stringify(component.items))
-        component.items = list.map(item => {
-          return (typeof item === 'string') ? { label: item, value: item } : item
-        })
-      }
       switch (component.tag) {
         case 'p':
         case 'a':
@@ -499,9 +492,7 @@ export default {
 		 * @description: 设置默认值
 		*/
     setDefaultValue(item) {
-      if (!isEmpty(item.initValue)) {
-        return item.initValue
-      } else if (!isEmpty(item.default)) {
+      if (!isEmpty(item.default)) {
         return item.default
       } else {
         return ''
@@ -591,10 +582,6 @@ export default {
         this.validiteFieldSet.clear()
         // 表单重置
         this.$refs[this.refName].resetFields()
-        // 解决 array/table 设置minLimit后 无法重置的bug
-        this.$nextTick(() => {
-          Object.assign(this.formValues, this.schemaValues)
-        })
       } catch (ex) {
         // 重置数组复杂对象会报以下的一个错误，暂时可以忽略，目前发现并不影响操作
         // Error: please transfer a valid prop path to form item!

diff --git a/vuepressdocs/.vuepress/components/example/base/demo1.vue b/vuepressdocs/.vuepress/components/example/base/demo1.vue
@@ -1,4 +1,4 @@
-<template>
+  <template>
   <div>
     <p>{{ model }}</p>
     <el-form-schema
@@ -87,14 +87,8 @@ export default {
         select3: {
           tag: "el-select",
           label: "下拉框3（bool）",
-          default: true,
-          items:  [{
-            label: "是", 
-            value: true
-          },{
-            label:"否",
-            value: false
-          }]
+          default: "A",
+          items:  []
         },
         checkbox: {
           tag: "el-checkbox",
@@ -197,6 +191,11 @@ export default {
       });
       return { foo, bar };
     }
+  },
+  mounted() {
+    setTimeout(()=> { 
+      this.schema.select3.items = ["A", "B", "C"];
+    }, 5000)
   }
 };
 </script>
diff --git a/vuepressdocs/.vuepress/components/example/base/demo2.vue b/vuepressdocs/.vuepress/components/example/base/demo2.vue
@@ -30,15 +30,16 @@ export default {
         input: {
           tag: Input,
           required: true,
-          attrs: { placeholder: "自定义组件" },
-          slot: {
-            after: {
-              tag: 'el-checkbox',
-              vmodel: 'sel',
-              vif: '$model.input',
-              items: ["A", "B", "C"]
-            }
-          }
+          inline: true,
+          label: "自定义组件",
+          attrs: { placeholder: "自定义组件" }
+        },
+        sel: {
+          tag: 'el-checkbox',
+          vif: '$model.input',
+          inline: true,
+          items: ["A", "B", "C"],
+          style: { marginLeft: "10px" }
         },
         cascader: {
           tag: "el-cascader",

diff --git a/vuepressdocs/.vuepress/components/example/base/demo3.vue b/vuepressdocs/.vuepress/components/example/base/demo3.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <p>{{ model }}</p>
+    <el-form-schema
+      :schema="schema"
+      v-model="model"
+      label-width="150px"
+    >
+    </el-form-schema>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        sel: {
+          tag: 'el-select',
+          label: "下拉框",
+          items: []
+        },
+        radio: {
+          tag: 'el-radio',
+          label: "单选框",
+          items: []
+        },
+        checkbox: {
+          tag: 'el-checkbox',
+          label: "复选框",
+          items: []
+        },
+      },
+      model: {}
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      // 第一种赋值
+      this.schema.sel.items = [{ 
+        label:"测试", 
+        value: 1 
+      }];
+      // 第二种赋值：对象数组
+      this.schema.radio.items = [
+        "A", 
+        "B", 
+        "C"
+      ];
+      // 第三种赋值：字符串数组
+      this.schema.checkbox.items = {
+         0: "测试1", 
+         1: '测试2' 
+      };
+    }, 3000);
+  }
+};
+</script>