添加表单数据展示

src/components/VueFormMaking/components/GenerateForm.vue

@@ -28,6 +28,7 @@
                 <genetate-form-item
                   v-else
                   :key="citem.key"
+                  :preview="preview"
                   :models.sync="models"
                   :remote="remote"
                   :rules="rules"
@@ -49,6 +50,7 @@
         <template v-else>
           <genetate-form-item
             :key="item.key"
+            :preview="preview"
             :models.sync="models"
             :rules="rules"
             :widget="item"
@@ -73,7 +75,7 @@ export default {
     GenetateFormItem
   },
   /* eslint-disable */
-  props: ['data', 'remote', 'value', 'insite', 'disabled'],
+  props: ['data', 'remote', 'value', 'insite', 'disabled', 'preview'],
   data() {
     return {
       models: {},

src/components/VueFormMaking/components/GenerateFormItem.vue

@@ -4,6 +4,52 @@
     :label="widget.type==='divider' || widget.options.labelWidthStatus?'':widget.name"
     :prop="widget.model"
   >
+    <template v-if="preview">
+      <template v-if="widget.type == 'color'">
+        <div style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px" :style="{'background-color': dataModel}" />
+      </template>
+      <template v-else-if="widget.type=='switch'">
+        <el-switch
+          v-model="dataModel"
+          :disabled="true"
+        />
+      </template>
+      <template v-else-if="widget.type == 'editor'">
+        <div class="previewEditorDiv" v-html="dataModel" />
+      </template>
+      <template v-else-if="widget.type=='imgupload'">
+        <fm-upload
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :style="{'width': widget.options.width}"
+          :width="widget.options.size.width"
+          :height="widget.options.size.height"
+          :token="widget.options.token"
+          :domain="widget.options.domain"
+          :multiple="widget.options.multiple"
+          :length="widget.options.length"
+          :is-qiniu="widget.options.isQiniu"
+          :is-delete="widget.options.isDelete"
+          :min="widget.options.min"
+          :is-edit="widget.options.isEdit"
+          :action="widget.options.action"
+        />
+      </template>
+      <template v-else-if="widget.type =='rate'">
+        <el-rate
+          v-model="dataModel"
+          :max="widget.options.max"
+          :disabled="true"
+          :allow-half="widget.options.allowHalf"
+        />
+      </template>
+      <template v-else>
+        <div>
+          {{ dataModel }}
+        </div>
+      </template>
+    </template>
+    <template v-else>
       <template v-if="widget.type == 'input'">
         <el-input
           v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
@@ -234,6 +280,7 @@
           </span>
         </el-divider>
       </template>
+    </template>
 
   </el-form-item>
 </template>
@@ -246,7 +293,7 @@ export default {
     FmUpload
   },
   /* eslint-disable */
-  props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled'],
+  props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled', 'preview'],
   data() {
     return {
       widgetLabelWidth: '',
@@ -273,6 +320,7 @@ export default {
     }
   },
   created() {
+    console.log(this.preview)
     if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
       this.remote[this.widget.options.remoteFunc]((data) => {
         this.widget.options.remoteOptions = data.map(item => {
@@ -310,3 +358,9 @@ export default {
   }
 }
 </script>
+
+<style>
+  .previewEditorDiv > p {
+    margin: 0;
+  }
+</style>

src/views/process/list/handle.vue

@@ -58,6 +58,7 @@
           v-for="(tplItem, tplIndex) in processStructureValue.tpls"
           :key="tplIndex"
           :ref="'generateForm-'+tplItem.id"
+          :preview="true"
           :remote="remoteFunc"
           :value="tplItem.form_data"
           :data="tplItem.form_structure"