Merge remote-tracking branch 'origin/master'

flowable-engine-web/src/views/admin/layout/FormDesign.vue

@@ -87,32 +87,38 @@
     </el-aside>
     <w-dialog clickClose closeFree width="800px" :showFooter="false" :border="false" title="表单预览"
               v-model="viewFormVisible">
+      <el-radio-group v-model="formPreviewModel" @change="formPreviewModelChange">
+        <el-radio-button label="E">编辑</el-radio-button>
+        <el-radio-button label="R">查看</el-radio-button>
+      </el-radio-group>
       <!--todo 表单渲染-->
-      <form-render ref="form" :forms="forms" v-model="formData"/>
+      <form-render-view v-if="viewFormVisibleRender" ref="form" :form-items="forms" v-model="formData" :is-preview="true" :model="formPreviewModel"/>
     </w-dialog>
   </el-container>
 </template>
 <!--动态表单编辑器-->
 <script>
 import draggable from "vuedraggable";
-import FormRender from '@/views/common/form/FormRender'
+import FormRenderView from '@/views/common/form/FormRenderView'
 import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'
 import FormComponentConfig from '@/views/common/form/FormComponentConfig'
 import {baseComponents} from '@/views/common/form/ComponentsConfigExport'
 
 export default {
   name: "FormDesign",
-  components: {draggable, FormComponentConfig, FormDesignRender, FormRender},
+  components: {draggable, FormComponentConfig, FormDesignRender, FormRenderView},
   data() {
     return {
       formData: {},
       libSelect: 0,
       viewFormVisible: false,
+      viewFormVisibleRender: true,
       isStart: false,
-      showMobile: true,
+      showMobile: false,
       baseComponents,
       select: null,
       drag: false,
+      formPreviewModel:"R",
     }
   },
   computed: {
@@ -132,6 +138,16 @@ export default {
     }
   },
   methods: {
+    formPreviewModelChange(){
+      // 卸载
+      this.viewFormVisibleRender= false
+      // 建议加上 nextTick 微任务
+      // 否则在同一事件内同时将tableShow设置false和true有可能导致组件渲染失败
+      this.$nextTick(function(){
+        // 加载
+        this.viewFormVisibleRender= true
+      })
+    },
     copy(node, index) {
       this.form.splice(index + 1, 0, Object.assign({}, node))
     },

flowable-engine-web/src/views/common/form/FormRender.vue

@@ -79,7 +79,7 @@ export default {
           this.loadFormConfig(item.props.items)
         }else {
           if (!item.perm){
-            this.$set(item, 'perm', null)
+            this.$set(item, 'perm', 'E')
           }
           this.$set(this._value, item.id, this.value[item.id])
           if(item.props.required){

flowable-engine-web/src/views/common/form/FormRenderView.vue

@@ -15,7 +15,7 @@
 import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'
 
 export default {
-  name: "FormViewRender",
+  name: "FormRenderView",
   components: {FormDesignRender},
   props: {
     formItems: {
@@ -29,6 +29,18 @@ export default {
       default: () => {
         return {}
       }
+    },
+    model:{
+      type: String,
+      default:() => {
+        return "R"
+      }
+    },
+    isPreview:{
+      type: Boolean,
+      default:() => {
+        return false
+      }
     }
   },
   data() {
@@ -51,13 +63,15 @@ export default {
   },
   methods: {
     loadFormConfig(formItems) {
-      console.log(formItems)
       formItems.forEach(item => {
         if (item.name === 'SpanLayout') {
           this.loadFormConfig(item.props.items)
         } else {
           this.$set(this._value, item.id, this.value[item.id])
-          if (item.props.required) {
+          if (this.isPreview){
+            this.$set(item, 'perm', this.model)
+          }
+          if (item.props.required && this.model === "E") {
             this.$set(this.rules, item.id, [{
               type: item.valueType === 'Array' ? 'array' : undefined,
               required: true,
@@ -68,8 +82,6 @@ export default {
       })
     }
   }
-
-
 }
 </script>