From a7dcab5e9ce42fdb1ff99e94350a6fd7b897e29e Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Tue, 2 Nov 2021 11:12:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=B9=E5=99=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9C=AA=E5=BA=94=E7=94=A8=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=9A=84bug=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 .../container-widget/container-wrapper.vue    |  8 +++++-
 .../setting-panel/form-setting.vue            | 25 ++++++++++++++-----
 .../form-designer/toolbar-panel/index.vue     |  6 +++--
 .../container-item/container-item-wrapper.vue | 13 ++++++++--
 .../form-render/container-item/grid-item.vue  |  2 +-
 .../container-item/sub-form-item.vue          |  2 +-
 .../form-render/container-item/tab-item.vue   |  2 +-
 .../form-render/container-item/table-item.vue |  2 +-
 src/extension/samples/card/card-item.vue      |  2 +-
 src/extension/samples/card/card-widget.vue    | 19 +++++++++++++-
 src/utils/config.js                           |  2 +-
 12 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 2085820..33f0375 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "variant-form",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open src/main.js",
diff --git a/src/components/form-designer/form-widget/container-widget/container-wrapper.vue b/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
index 9fc3bfd..36c773c 100644
--- a/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
+++ b/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <div class="container-wrapper">
+  <div class="container-wrapper" :class="[customClass]">
     <slot></slot>
 
     <div class="container-action" v-if="designer.selectedId === widget.id && !widget.internal">
@@ -50,6 +50,12 @@
       indexOfParentList: Number,
       designer: Object,
     },
+    computed: {
+      customClass() {
+        return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
+      },
+
+    }
   }
 </script>
 
diff --git a/src/components/form-designer/setting-panel/form-setting.vue b/src/components/form-designer/setting-panel/form-setting.vue
index b32bf7a..9c146f8 100644
--- a/src/components/form-designer/setting-panel/form-setting.vue
+++ b/src/components/form-designer/setting-panel/form-setting.vue
@@ -168,6 +168,15 @@
 
       }
     },
+    created() {
+      //导入表单JSON后需要重新加载自定义CSS样式！！！
+      this.designer.handleEvent('form-json-imported', () => {
+        this.formCssCode = this.formConfig.cssCode
+        insertCustomCssToHead(this.formCssCode)
+        this.extractCssClass()
+        this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
+      })
+    },
     mounted() {
       /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
          此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
@@ -187,8 +196,8 @@
       extractCssClass() {
         let regExp = /\..*{/g
         let result = this.formCssCode.match(regExp)
-        //this.cssClassList.length = 0
-        this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
+        let cssNameArray = []
+
         if (!!result && result.length > 0) {
           result.forEach((rItem) => {
             let classArray = rItem.split(',')  //切分逗号分割的多个class
@@ -198,26 +207,30 @@
                 if (caItem.indexOf('.', 1) !== -1) {  //查找第二个.位置
                   let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1))  //仅截取第一、二个.号之间的class
                   if (!!newClass) {
-                    this.cssClassList.push(newClass.trim())
+                    cssNameArray.push(newClass.trim())
                   }
                 } else if (caItem.indexOf(' ') !== -1) {  //查找第一个空格位置
                   let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' '))  //仅截取第一、二个.号之间的class
                   if (!!newClass) {
-                    this.cssClassList.push(newClass.trim())
+                    cssNameArray.push(newClass.trim())
                   }
                 } else {
                   if (caItem.indexOf('{') !== -1) {  //查找第一个{位置
                     let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'))
-                    this.cssClassList.push( newClass.trim() )
+                    cssNameArray.push( newClass.trim() )
                   } else {
                     let newClass = caItem.substring(caItem.indexOf('.') + 1)
-                    this.cssClassList.push( newClass.trim() )
+                    cssNameArray.push( newClass.trim() )
                   }
                 }
               })
             }
           })
         }
+
+        //this.cssClassList.length = 0
+        this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
+        this.cssClassList = Array.from( new Set(cssNameArray) )  //数组去重
       },
 
       saveFormCss() {
diff --git a/src/components/form-designer/toolbar-panel/index.vue b/src/components/form-designer/toolbar-panel/index.vue
index e81ecf0..2e0474c 100644
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@@ -6,9 +6,9 @@
       <el-button type="text" :disabled="redoDisabled" :title="i18nt('designer.toolbar.redoHint')" @click="redoHistory">
         <svg-icon icon-class="redo" /></el-button>
       <el-button-group style="margin-left: 20px">
-        <el-button :type="layoutType === 'PC' ? 'primary': ''" @click="changeLayoutType('PC')">
+        <el-button :type="layoutType === 'PC' ? 'info': ''" @click="changeLayoutType('PC')">
           {{i18nt('designer.toolbar.pcLayout')}}</el-button>
-        <el-button :type="layoutType === 'H5' ? 'primary': ''" @click="changeLayoutType('H5')">
+        <el-button :type="layoutType === 'H5' ? 'info': ''" @click="changeLayoutType('H5')">
           {{i18nt('designer.toolbar.mobileLayout')}}</el-button>
       </el-button-group>
     </div>
@@ -278,6 +278,8 @@
           this.$message.success(this.i18nt('designer.hint.importJsonSuccess'))
 
           this.designer.emitHistoryChange()
+
+          this.designer.emitEvent('form-json-imported', [])
         } catch(ex) {
           this.$message.error(ex + '')
         }
diff --git a/src/components/form-render/container-item/container-item-wrapper.vue b/src/components/form-render/container-item/container-item-wrapper.vue
index b42f7ea..24529ce 100644
--- a/src/components/form-render/container-item/container-item-wrapper.vue
+++ b/src/components/form-render/container-item/container-item-wrapper.vue
@@ -9,14 +9,23 @@
 -->
 
 <template>
-  <div class="container-wrapper">
+  <div class="container-wrapper" :class="[customClass]">
     <slot></slot>
   </div>
 </template>
 
 <script>
   export default {
-    name: "container-item-wrapper"
+    name: "container-item-wrapper",
+    props: {
+      widget: Object,
+    },
+    computed: {
+      customClass() {
+        return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
+      },
+
+    }
   }
 </script>
 
diff --git a/src/components/form-render/container-item/grid-item.vue b/src/components/form-render/container-item/grid-item.vue
index 12d26bd..8879206 100644
--- a/src/components/form-render/container-item/grid-item.vue
+++ b/src/components/form-render/container-item/grid-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
             :class="[customClass]"
diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue
index 18247ad..52d202c 100644
--- a/src/components/form-render/container-item/sub-form-item.vue
+++ b/src/components/form-render/container-item/sub-form-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <div :key="widget.id" class="sub-form-container"
          v-show="!widget.options.hidden">
diff --git a/src/components/form-render/container-item/tab-item.vue b/src/components/form-render/container-item/tab-item.vue
index feace4c..c502016 100644
--- a/src/components/form-render/container-item/tab-item.vue
+++ b/src/components/form-render/container-item/tab-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <div :key="widget.id" class="tab-container"
          v-show="!widget.options.hidden">
diff --git a/src/components/form-render/container-item/table-item.vue b/src/components/form-render/container-item/table-item.vue
index a0ad45b..fa0e7de 100644
--- a/src/components/form-render/container-item/table-item.vue
+++ b/src/components/form-render/container-item/table-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <div :key="widget.id" class="table-container"
          v-show="!widget.options.hidden">
diff --git a/src/extension/samples/card/card-item.vue b/src/extension/samples/card/card-item.vue
index 7039320..3e9d159 100644
--- a/src/extension/samples/card/card-item.vue
+++ b/src/extension/samples/card/card-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
     <el-card :key="widget.id" class="card-container" :class="[customClass]"
              :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
              :ref="widget.id" v-show="!widget.options.hidden">
diff --git a/src/extension/samples/card/card-widget.vue b/src/extension/samples/card/card-widget.vue
index 186d620..e45e310 100644
--- a/src/extension/samples/card/card-widget.vue
+++ b/src/extension/samples/card/card-widget.vue
@@ -4,7 +4,10 @@
     <el-card :key="widget.id" class="card-container" @click.native.stop="selectWidget(widget)"
              :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
              :class="[selected ? 'selected' : '', customClass]">
-      <div slot="header"><span>{{widget.options.label}}</span></div>
+      <div slot="header" class="clear-fix">
+        <span>{{widget.options.label}}</span>
+        <i class="el-icon-arrow-up float-right"></i>
+      </div>
       <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
                  handle=".drag-handler"
                  @add="(evt) => onContainerDragAdd(evt, widget.widgetList)"
@@ -80,4 +83,18 @@
   ::v-deep .el-card__header {
     padding: 10px 12px;
   }
+
+  .clear-fix:before, .clear-fix:after {
+    display: table;
+    content: "";
+  }
+
+  .clear-fix:after {
+    clear: both;
+  }
+
+  .float-right {
+    float: right;
+  }
+
 </style>
diff --git a/src/utils/config.js b/src/utils/config.js
index 6721e92..8b4076b 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '2.1.2'
+export const VARIANT_FORM_VERSION = '2.1.3'
 
 export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'