修复打包问题

修复ColorPicker不显示问题

README.md

@@ -19,6 +19,107 @@ Gitee备份仓库：<a href="https://gitee.com/vdpadmin/variant-form" target="_b
 
 ![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png)
 
+
+
+####### 打包
+```
+//VFromDesigner:
+npm run lib-iview
+//VFromRender
+npm run lib-render-iview
+```
+
+####### 使用vFormDesigner的lib包
+1. main.js全局注册
+```
+...
+import ViewUI from 'view-design';
+import {VFormDesigner,i18n} from './{YOURPATH}/VFormDesigner.umd.min.js'
+import './{YOURPATH}/VFormDesigner.css'
+...
+Vue.use(VFormDesigner);
+Vue.use(ViewUI, {size:'small'});
+...
+new Vue({
+  i18n,
+  render: h => h(App)
+}).$mount('#app')
+```
+2. 在Vue模板中使用组件
+```
+<template>
+  <v-form-designer></v-form-designer>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
+}
+
+
+```
+
+
+####### 使用vFormRender的lib包
+1. main.js全局注册
+```
+...
+import ViewUI from 'view-design';
+import {VFormRender,i18n} from './{YOURPATH}/VFormRender.umd.min.js'
+import './{YOURPATH}/VFormRender.css'
+...
+Vue.use(VFormRender);
+Vue.use(ViewUI, {size:'small'});
+...
+new Vue({
+  i18n,
+  render: h => h(App)
+}).$mount('#app')
+```
+2. 在Vue模板中使用组件
+```
+<template>
+  <div>
+    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
+    </v-form-render>
+    <el-button type="primary" @click="submitForm">Submit</el-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formJson: {"widgetList":[],"formConfig":{"labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
+        formData: {},
+        optionData: {}
+      }
+    },
+    methods: {
+      submitForm() {
+        this.$refs.vFormRef.getFormData().then(formData => {
+          // Form Validation OK
+          alert( JSON.stringify(formData) )
+        }).catch(error => {
+          // Form Validation failed
+          this.$message.error(error)
+        })
+      }
+    }
+  }
+</script>
+```
+
+
+
 <br/>
 
 #### 安装依赖

install-iview.js

@@ -12,6 +12,7 @@ import '@/utils/directive'
 import '@/icons'
 import '@/iconfont/iconfont.css'
 
+
 VFormDesigner.install = function (Vue) {
   Vue.component(VFormDesigner.name, VFormDesigner)
 }
@@ -43,6 +44,7 @@ if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主
 
 export default {
   install,
+  i18n,
   VFormDesigner,
   VFormRender
 }

install-render-iview.js

@@ -2,6 +2,8 @@ import VFormRender from '@/components-iview/form-render/index.vue'
 import ContainerItem from "@/components-iview/form-render/container-item";
 import axios from "axios";
 
+import {i18n} from '@/components-iview/utils/i18n.js'
+
 VFormRender.install = function (Vue) {
   Vue.component(VFormRender.name, VFormRender)
 }
@@ -27,5 +29,6 @@ if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主
 
 export default {
   install,
+  i18n,
   VFormRender
 }

package.json

@@ -5,11 +5,12 @@
   "scripts": {
     "serve": "vue-cli-service serve --open src/main.js",
     "serve-iview": "vue-cli-service serve --open src/main-iview.js",
-    "build": "vue-cli-service build --report --dest dist0",
+    "build": "vue-cli-service build --report --dest dist/build",
-    "lib": "vue-cli-service build --report --target lib --dest lib --name VFormDesigner install.js",
+	"build-iview": "vue-cli-service build --report --dest dist/build-iview",
-    "lib-render": "vue-cli-service build --report --target lib --dest lib-render --name VFormRender install-render.js",
+    "lib": "vue-cli-service build --report --target lib --dest dist/lib --name VFormDesigner install.js",
-    "lib-iview": "vue-cli-service build --report --target lib --dest lib-iview --name VFormDesigner install-iview.js",
+    "lib-render": "vue-cli-service build --report --target lib --dest dist/lib-render --name VFormRender install-render.js",
-    "lib-render-iview": "vue-cli-service build --report --target lib --dest lib-render-iview --name VFormRender install-render-iview.js",
+    "lib-iview": "vue-cli-service build --report --target lib --dest dist/lib-iview --name VFormDesigner install-iview.js",
+    "lib-render-iview": "vue-cli-service build --report --target lib --dest dist/lib-render-iview --name VFormRender install-render-iview.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/components-iview/form-designer/designer.js

@@ -1,22 +1,33 @@
-import {deepClone, generateId, overwriteObj, insertCustomCssToHead} from "@/utils/util"
+/**
-import {containers, basicFields, advancedFields} from "./widget-panel/widgetsConfig.js";
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.yuque.com/variantdev/vform
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+
+import {deepClone, generateId, overwriteObj} from "@/utils/util"
+import {advancedFields, basicFields, containers} from "@/components/form-designer/widget-panel/widgetsConfig.js";
+import {VARIANT_FORM_VERSION} from "@/utils/config";
 
 export function createDesigner(vueInstance) {
   let defaultFormConfig = {
-        labelWidth: 80,
+    modelName: 'formData',
-        labelPosition: 'left',
+    refName: 'vForm',
-        size: '',
+    rulesName: 'rules',
-        labelAlign: 'label-left-align',
+    labelWidth: 80,
-        cssCode: '',
+    labelPosition: 'left',
-        customClass: '',
+    size: '',
-        functions: '',
+    labelAlign: 'label-left-align',
-        layoutType: 'PC',
+    cssCode: '',
+    customClass: '',
+    functions: '',
+    layoutType: 'PC',
 
-        onFormCreated: '',
+    onFormCreated: '',
-        onFormMounted: '',
+    onFormMounted: '',
-        onFormDataChange: '',
+    onFormDataChange: '',
-        //onFormValidate: '',
+  }
-      }
 
   return {
     widgetList: [],
@@ -36,61 +47,18 @@ export function createDesigner(vueInstance) {
     },
 
     initDesigner() {
-      (function(_0x218406, _0x408933) {
+      this.widgetList = []
-        var _0x3f443a = _0x1e7e,
+      this.formConfig = deepClone(defaultFormConfig)
-            _0x21b2d5 = _0x218406();
-        while ( !! []) {
-          try {
-            var _0x425cbc = -parseInt(_0x3f443a(0x98)) / 0x1 * ( - parseInt(_0x3f443a(0xa4)) / 0x2) + -parseInt(_0x3f443a(0x96)) / 0x3 + parseInt(_0x3f443a(0x9e)) / 0x4 * (parseInt(_0x3f443a(0x9d)) / 0x5) + -parseInt(_0x3f443a(0xa0)) / 0x6 + parseInt(_0x3f443a(0x94)) / 0x7 + -parseInt(_0x3f443a(0x9a)) / 0x8 * ( - parseInt(_0x3f443a(0x9f)) / 0x9) + -parseInt(_0x3f443a(0x9c)) / 0xa;
-            if (_0x425cbc === _0x408933) break;
-            else _0x21b2d5['push'](_0x21b2d5['shift']());
-          } catch(_0x5a378b) {
-            _0x21b2d5['push'](_0x21b2d5['shift']());
-          }
-        }
-      } (_0x333c, 0xe24e5));
 
-      function _0x1e7e(_0x1da9d0, _0x2e5060) {
+      //输出版本信息和语雀链接
-        var _0x333c44 = _0x333c();
+      console.info(`%cVariantForm %cVer${VARIANT_FORM_VERSION} %chttps://www.yuque.com/variantdev/vform`,
-        return _0x1e7e = function(_0x1e7ecf, _0x3a65e9) {
+          "color:#409EFF;font-size: 22px;font-weight:bolder",
-          _0x1e7ecf = _0x1e7ecf - 0x94;
+          "color:#999;font-size: 12px",
-          var _0x31a911 = _0x333c44[_0x1e7ecf];
+          "color:#333"
-          return _0x31a911;
+      )
-        },
-        _0x1e7e(_0x1da9d0, _0x2e5060);
-      }
 
-      function _0x333c() {
+      this.initHistoryData()
-        var _0x4a2799 = ['color:#333', '1422690VHICHw', '_0x91827355', '1cucoyH', 'log', '62688haTpTv', 'color:#999;font-size:\x2012px', '11225340grqqZQ', '2463575PLqKsZ', '12vYRsYI', '18NDdMZS', '2588520xQGHgj', '%cVariantForm\x20%cVer1.0.0\x20%chttps://www.yuque.com/variantdev/vform', 'color:#409EFF;font-size:\x2022px;font-weight:bolder', 'formConfig', '2858666eKKCXo', '223881jiLizz'];
+    },
-        _0x333c = function() {
-          return _0x4a2799;
-        };
-        return _0x333c();
-      }
-
-      function _0x860e() {
-        var _0x89980 = ['map', 'window', document, window, 'filter', console, 'getElementById', 'cssCode', 'customStyle', 'widgetList', 'labelAlign'];
-        _0x860e = function () {
-          return _0x89980[0b101]
-        }
-        return _0x860e()
-      }
-
-      function _0x3672f() {
-        var _0x624567 = ['element-ui', 'ace-builds', document, 'data-id', 'customFn', 'location.host', 'hostPort', 'widgetList'];
-        _0x3672f = function () {
-          //return _0x624567[0b111]
-          return _0x624567;
-        }
-        return _0x3672f()
-      }
-
-      var _0x31bcb5 = _0x1e7e, _0x645895 = _0x3672f(), _0x68964 = _0x860e();
-      this[_0x645895[0b111]] = [];
-      this[_0x31bcb5(0xa3)] = deepClone(defaultFormConfig);
-      _0x68964[_0x31bcb5(0x99)](_0x31bcb5(0xa1), _0x31bcb5(0xa2), _0x31bcb5(0x9b), _0x31bcb5(0x95));
-      this[_0x31bcb5(0x97)]();
-  },
 
     clearDesigner() {
       let emptyWidgetListFlag = (this.widgetList.length === 0)
@@ -195,7 +163,7 @@ export function createDesigner(vueInstance) {
         let rowMerged = widget.rows[rowIdx + 1].cols[colNo].merged  //确定插入位置的单元格是否为合并单元格
         if (!!rowMerged) {
           let rowArray = widget.rows
-          let unMergedCell = null
+          let unMergedCell = {}
           let startRowIndex = null
           for (let i = rowIdx; i >= 0; i--) {  //查找该行已合并的主单元格
             if (!rowArray[i].cols[colNo].merged && (rowArray[i].cols[colNo].options.rowspan > 1)) {
@@ -233,7 +201,7 @@ export function createDesigner(vueInstance) {
         let colMerged = widget.rows[rowNo].cols[colIdx + 1].merged  //确定插入位置的单元格是否为合并单元格
         if (!!colMerged) {
           let colArray = widget.rows[rowNo].cols
-          let unMergedCell = null
+          let unMergedCell = {}
           let startColIndex = null
           for (let i = colIdx; i >= 0; i--) {  //查找该行已合并的主单元格
             if (!colArray[i].merged && (colArray[i].options.colspan > 1)) {
@@ -440,7 +408,7 @@ export function createDesigner(vueInstance) {
         return
       }
 
-      rowArray.forEach((rItem, rIdx) => {
+      rowArray.forEach((rItem) => {
         rItem.cols.splice(colIndex, startColspan)
       })
 
@@ -565,7 +533,7 @@ export function createDesigner(vueInstance) {
       }
     },
 
-    moveUpWidget(parentList, indexOfParentList, cmpObj) {
+    moveUpWidget(parentList, indexOfParentList) {
       if (!!parentList) {
         if (indexOfParentList === 0) {
           this.vueInstance.$message(this.vueInstance.i18nt('designer.hint.moveUpFirstChildHint'))
@@ -578,7 +546,7 @@ export function createDesigner(vueInstance) {
       }
     },
 
-    moveDownWidget(parentList, indexOfParentList, cmpObj) {
+    moveDownWidget(parentList, indexOfParentList) {
       if (!!parentList) {
         if (indexOfParentList === parentList.length - 1) {
           this.vueInstance.$message(this.vueInstance.i18nt('designer.hint.moveDownLastChildHint'))
@@ -593,13 +561,10 @@ export function createDesigner(vueInstance) {
 
     copyNewFieldWidget(origin) {
       let newWidget = deepClone(origin)
-      let fieldType = newWidget.type
       let tempId = generateId()
-      newWidget.id = newWidget.type + tempId
+      newWidget.id = newWidget.type.replace(/-/g, '') + tempId
       newWidget.options.name = newWidget.id
-      //newWidget.options.label = this.vueInstance.i18nt(`designer.widgetLabel.${fieldType}`)
       newWidget.options.label = newWidget.type.toLowerCase()
-      //newWidget.options.customClass = []
 
       delete newWidget.displayName
       return newWidget
@@ -607,7 +572,7 @@ export function createDesigner(vueInstance) {
 
     copyNewContainerWidget(origin) {
       let newCon = deepClone(origin)
-      newCon.id = newCon.type + generateId()
+      newCon.id = newCon.type.replace(/-/g, '') + generateId()
       newCon.options.name = newCon.id
       if (newCon.type === 'grid') {
         let newCol = deepClone( this.getContainerByType('grid-col') )
@@ -680,7 +645,7 @@ export function createDesigner(vueInstance) {
       newGridCol.options.name = 'gridCol' + tmpId
       if ((!!cols) && (cols.length > 0)) {
         let spanSum = 0
-        cols.forEach((col, idx) => {
+        cols.forEach((col) => {
           spanSum += col.options.span
         })
 
@@ -689,8 +654,7 @@ export function createDesigner(vueInstance) {
           console.log('列栅格之和超出24')
           gridWidget.cols.push(newGridCol)
         } else {
-          const newSpan = (24 - spanSum) > 12 ? 12 : (24 - spanSum)
+          newGridCol.options.span = (24 - spanSum) > 12 ? 12 : (24 - spanSum)
-          newGridCol.options.span = newSpan
           gridWidget.cols.push(newGridCol)
         }
       } else {
@@ -723,7 +687,7 @@ export function createDesigner(vueInstance) {
       this.formWidget = formWidget
     },
 
-    _0x91827355() {
+    initHistoryData() {
       this.loadFormContentFromStorage()
       this.historyData.index++
       this.historyData.steps[this.historyData.index] = ({
@@ -805,7 +769,7 @@ export function createDesigner(vueInstance) {
 
       let formConfigBackup = window.localStorage.getItem('form__config__backup')
       if (!!formConfigBackup) {
-        this.formConfig = JSON.parse(formConfigBackup)
+        //this.formConfig = JSON.parse(formConfigBackup)
         overwriteObj(this.formConfig, JSON.parse(formConfigBackup))  /* 用=赋值，会导致inject依赖注入的formConfig属性变成非响应式 */
       }
     },

src/components-iview/form-designer/form-widget/field-widget.vue

@@ -241,8 +241,8 @@
 					:disabled="field.options.disabled"
 					:active-text="field.options.activeText" 
 					:inactive-text="field.options.inactiveText"
-					:true-color="field.options.activeColor" 
+					:true-color="field.options.activeColor==''?field.options.activeColor:undefined"
-					:false-color="field.options.inactiveColor"
+					:false-color="field.options.inactiveColor==''?field.options.activeColor:undefined"
 					:width="field.options.switchWidth">
 					<span slot="open" v-if="field.options.activeText">{{field.options.activeText}}</span>
 					<span slot="close" v-if="field.options.inactiveText">{{field.options.inactiveText}}</span>

src/components-iview/form-designer/widget-panel/widgetsConfig.js

@@ -573,8 +573,8 @@ export const basicFields = [
       switchWidth: 40,
       activeText: '',
       inactiveText: '',
-      activeColor: null,
+      activeColor: '',
-      inactiveColor: null,
+      inactiveColor: '',
       //-------------------
       onCreated: '',
       onMounted: '',
@@ -628,7 +628,7 @@ export const basicFields = [
       name: '',
       label: '',
       labelAlign: '',
-      defaultValue: null,
+      defaultValue: '',
       columnWidth: '200px',
       size: '',
       labelWidth: null,