修改保存数据问题

src/components/VueFormMaking/components/GenerateForm.vue

@@ -1,18 +1,48 @@
 <template>
   <div>
-    <el-form ref="generateForm" label-suffix=":" :size="data.config.size" :model="models" :rules="rules"
-      :label-position="data.config.labelPosition" :label-width="150 + 'px'">
+    <el-form
+      ref="generateForm"
+      label-suffix=":"
+      :size="data.config.size"
+      :model="models"
+      :rules="rules"
+      :label-position="data.config.labelPosition"
+      :label-width="150 + 'px'"
+    >
       <template v-for="item in templateData">
         <template v-if="item.type == 'grid'">
-          <el-row :key="item.key" type="flex" :gutter="item.options.gutter ? item.options.gutter : 0"
-            :justify="item.options.justify" :align="item.options.align">
-            <el-col v-for="(col, colIndex) in item.columns" :key="colIndex" :span="col.span">
+          <el-row
+            :key="item.key"
+            type="flex"
+            :gutter="item.options.gutter ? item.options.gutter : 0"
+            :justify="item.options.justify"
+            :align="item.options.align"
+          >
+            <el-col
+              v-for="(col, colIndex) in item.columns"
+              :key="colIndex"
+              :span="col.span"
+            >
               <template v-for="citem in col.list">
-                <el-form-item v-if="citem.type == 'blank'" :key="citem.key" :label="citem.name" :prop="citem.model">
+                <el-form-item
+                  v-if="citem.type == 'blank'"
+                  :key="citem.key"
+                  :label="citem.name"
+                  :prop="citem.model"
+                >
                   <slot :name="citem.model" :model="models" />
                 </el-form-item>
-                <genetate-form-item v-else :key="citem.key" :preview="preview" :models.sync="models"
-                  :organ-list="itemOrganList" :remote="remote" :widget="citem" :data="data" :prop-value="citem.model" />
+                <genetate-form-item
+                  v-else
+                  :key="citem.key"
+                  :preview="preview"
+                  :models.sync="models"
+                  :organ-list="itemOrganList"
+                  :remote="remote"
+                  :widget="citem"
+                  :data="data"
+                  :prop-value="citem.model"
+                />
               </template>
             </el-col>
           </el-row>
@@ -26,30 +56,66 @@
         <!-- 子表单 -->
         <template v-else-if="item.type === 'subform' && !item.hidden">
           <!-- <span :key="item.key">{{ item.type }}{{ item.hidden }}---</span> -->
-          <el-form-item :key="item.key" :label-width="!item.options.labelWidthStatus ? '0px' : 150 + 'px'"
-            :label="!item.options.labelWidthStatus ? '' : item.name">
-            <el-table :data="models[item.model]" border style="width: 100%" :header-cell-style="{ padding: '5px 0' }"
-              size="mini" :class="!preview ? 'table-subform' : ''">
+          <el-form-item
+            :key="item.key"
+            :label-width="!item.options.labelWidthStatus ? '0px' : 150 + 'px'"
+            :label="!item.options.labelWidthStatus ? '' : item.name"
+          >
+            <el-table
+              :data="models[item.model]"
+              border
+              style="width: 100%"
+              :header-cell-style="{ padding: '5px 0' }"
+              size="mini"
+              :class="!preview ? 'table-subform' : ''"
+            >
               <el-table-column v-if="!preview" fixed width="50">
                 <template slot="header">
-                  <i style="font-size: 25px; color: #409eff; cursor: pointer" class="el-icon-circle-plus"
-                    @click="addSubformCol(item)" />
+                  <i
+                    style="font-size: 25px; color: #409eff; cursor: pointer"
+                    class="el-icon-circle-plus"
+                    @click="addSubformCol(item)"
+                  />
                 </template>
                 <template slot-scope="scope">
-                  <i style="font-size: 25px; color: red" class="el-icon-remove" v-if="models[item.model].length > 1"
-                    @click="delSubformCol(item, scope.$index)" />
+                  <i
+                    style="font-size: 25px; color: red"
+                    class="el-icon-remove"
+                    v-if="models[item.model].length > 1"
+                    @click="delSubformCol(item, scope.$index)"
+                  />
                 </template>
               </el-table-column>
               <template v-for="(c, i) in item.columns">
                 <div :key="i">
-                  <el-table-column v-for="v in c.list" :key="v.key" :prop="v.model" :label="v.name" min-width="250">
+                  <el-table-column
+                    v-for="v in c.list"
+                    :key="v.key"
+                    :prop="v.model"
+                    :label="v.name"
+                    min-width="250"
+                  >
                     <template slot-scope="scope">
-                      <genetate-form-item :prop-value="item.model + '.' + scope.$index + '.' + v.model
-                        " :parent-form="item.model + scope.$index" :preview="preview" :models.sync="models" :widget="v"
-                        :remote="remote" :data="data" :disabled="disabled" :fileCheck="!!fileCheckList[item.model]"
-                        :is-label="false" :organ-list="itemOrganList" :cooperation-list="cooperationList"
-                        :subform-index="scope.$index" :subform-model="item.model" @relationFormChange="formChange"
-                        @fileCheckRequired="fileCheckRequired" />
+                      <genetate-form-item
+                        :prop-value="
+                          item.model + '.' + scope.$index + '.' + v.model
+                        "
+                        :parent-form="item.model + scope.$index"
+                        :preview="preview"
+                        :models.sync="models"
+                        :widget="v"
+                        :remote="remote"
+                        :data="data"
+                        :disabled="disabled"
+                        :fileCheck="!!fileCheckList[item.model]"
+                        :is-label="false"
+                        :organ-list="itemOrganList"
+                        :cooperation-list="cooperationList"
+                        :subform-index="scope.$index"
+                        :subform-model="item.model"
+                        @relationFormChange="formChange"
+                        @fileCheckRequired="fileCheckRequired"
+                      />
                     </template>
                   </el-table-column>
                 </div>
@@ -59,9 +125,19 @@
         </template>
 
         <template v-else>
-          <genetate-form-item :key="item.key" :prop-value="item.model" :preview="preview" :models.sync="models"
-            :widget="item" :remote="remote" :data="data" :organ-list="itemOrganList" :disabled="disabled"
-            @relationFormChange="formChange" @fileCheckRequired="fileCheckRequired" />
+          <genetate-form-item
+            :key="item.key"
+            :prop-value="item.model"
+            :preview="preview"
+            :models.sync="models"
+            :widget="item"
+            :remote="remote"
+            :data="data"
+            :organ-list="itemOrganList"
+            :disabled="disabled"
+            @relationFormChange="formChange"
+            @fileCheckRequired="fileCheckRequired"
+          />
         </template>
       </template>
     </el-form>
@@ -152,21 +228,21 @@ export default {
         });
       } else {
         // 如果有缓存数据，则给subform动态添加表单校验
-        let subform = {}
+        let subform = {};
         // 判断是否有数据 - 可能存在多个子表单
         for (let i in this.value) {
-          const index = i.indexOf('subform')
+          const index = i.indexOf("subform");
           if (index > -1) {
             // subform.push(this.value[index])
-            subform[i] = this.value[i] || []
+            subform[i] = this.value[i] || [];
           }
         }
 
         for (let i in subform) {
           // 判断是否有数据
           if (subform[i].length > 0) {
-            const subIndex = subform[i].length
-            let selectItem = ''
+            const subIndex = subform[i].length;
+            let selectItem = "";
             tempData.forEach(async (item) => {
               if (item.type === "subform" && item.model == i) {
                 // await this.addRule(item);
@@ -177,13 +253,12 @@ export default {
 
             if (selectItem) {
               for (let j = 0; j < subIndex; j++) {
-                this.addRule(selectItem, j)
+                this.addRule(selectItem, j);
               }
             }
           }
         }
       }
-
     } else {
       let tempData = this.templateData;
       let hiddenFormList = this.getSelectValueObject(tempData);
@@ -223,9 +298,7 @@ export default {
           if (this.rules[item.model] === undefined) {
             this.rules[item.model] = [];
           }
-          if (
-            this.rules[item.model][index] === undefined
-          ) {
+          if (this.rules[item.model][index] === undefined) {
             this.rules[item.model][index] = {};
           }
           this.rules[item.model][index][l.model] = [
@@ -251,7 +324,7 @@ export default {
           if (l.options !== null && l.options !== undefined) {
             subformFields[l.model] =
               l.options.defaultValue !== undefined &&
-                l.options.defaultValue !== null
+              l.options.defaultValue !== null
                 ? l.options.defaultValue
                 : "";
           } else {
@@ -436,8 +509,8 @@ export default {
                 genList[i].options.defaultType === "String"
                   ? ""
                   : genList[i].options.defaultType === "Object"
-                    ? {}
-                    : []
+                  ? {}
+                  : []
               );
             }
             if (genList[i].type === "subform") {

src/components/VueFormMaking/components/GenerateFormItem.vue

@@ -1,16 +1,27 @@
 <template>
-  <el-form-item v-if="showStatus && hidden" :label-width="isLabel === false || !widget.options.labelWidthStatus ? '0px' : 150 + 'px'
-    " :label="isLabel === false ||
-    widget.type === 'divider' ||
-    !widget.options.labelWidthStatus
-    ? ''
-    : widget.name
-    " :key="propValue" :prop="propValue" :class="[parentForm, widget.type == 'text' && 'dataModelText']"
-    :style="subformIndex !== undefined ? { 'margin-bottom': '0' } : {}">
+  <el-form-item
+    v-if="showStatus && hidden"
+    :label-width="
+      isLabel === false || !widget.options.labelWidthStatus ? '0px' : 150 + 'px'
+    "
+    :label="
+      isLabel === false ||
+      widget.type === 'divider' ||
+      !widget.options.labelWidthStatus
+        ? ''
+        : widget.name
+    "
+    :key="propValue"
+    :prop="propValue"
+    :class="[parentForm, widget.type == 'text' && 'dataModelText']"
+    :style="subformIndex !== undefined ? { 'margin-bottom': '0' } : {}"
+  >
     <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 }" />
+        <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" />
@@ -20,18 +31,47 @@
       </template>
 
       <template v-else-if="widget.type == 'file'">
-        <div v-for="(uploadUrlItem, uploadUrlIndex) of dataModel" :key="uploadUrlIndex">
+        <div
+          v-for="(uploadUrlItem, uploadUrlIndex) of dataModel"
+          :key="uploadUrlIndex"
+        >
           <i style="color: #909399" class="el-icon-document" />
           <span>{{ uploadUrlItem.name || uploadUrlItem.url }}</span>
-          <el-button round size="mini" @click="onDownload(uploadUrlItem, 'download')">下载</el-button>
-          <el-button round type="primary" @click="onDownload(uploadUrlItem)" v-if="checkFileSuffix(uploadUrlItem.url) &&
-            !isCheckImage(uploadUrlItem.url)
-            " size="mini">预览</el-button>
-          <div v-if="isCheckImage(uploadUrlItem.url)" style="display: inline-flex; position: relative">
-            <el-button style="position: absolute; left: 0; top: 0" round type="primary" @click="onDownload(uploadUrlItem)"
-              v-if="checkFileSuffix(uploadUrlItem.url)" size="mini">预览</el-button>
-            <el-image style="width: 56px; height: 28px; opacity: 0" :src="uploadUrlItem.url"
-              :preview-src-list="[uploadUrlItem.url]">
+          <el-button
+            round
+            size="mini"
+            @click="onDownload(uploadUrlItem, 'download')"
+            >下载</el-button
+          >
+          <el-button
+            round
+            type="primary"
+            @click="onDownload(uploadUrlItem)"
+            v-if="
+              checkFileSuffix(uploadUrlItem.url) &&
+              !isCheckImage(uploadUrlItem.url)
+            "
+            size="mini"
+            >预览</el-button
+          >
+          <div
+            v-if="isCheckImage(uploadUrlItem.url)"
+            style="display: inline-flex; position: relative"
+          >
+            <el-button
+              style="position: absolute; left: 0; top: 0"
+              round
+              type="primary"
+              @click="onDownload(uploadUrlItem)"
+              v-if="checkFileSuffix(uploadUrlItem.url)"
+              size="mini"
+              >预览</el-button
+            >
+            <el-image
+              style="width: 56px; height: 28px; opacity: 0"
+              :src="uploadUrlItem.url"
+              :preview-src-list="[uploadUrlItem.url]"
+            >
             </el-image>
           </div>
           <!-- <a :href="uploadUrlItem.url" target="_blank">{{ uploadUrlItem.name || uploadUrlItem.url }}</a> -->
@@ -39,34 +79,61 @@
       </template>
 
       <template v-else-if="widget.type == 'imgupload'">
-        <fm-upload v-model="dataModel" :style="{ width: widget.options.width }" :width="widget.options.size.width"
-          :height="widget.options.size.height" :preview="preview" />
+        <fm-upload
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :width="widget.options.size.width"
+          :height="widget.options.size.height"
+          :preview="preview"
+        />
       </template>
       <template v-else-if="widget.type == 'rate'">
-        <el-rate v-model="dataModel" :max="widget.options.max" :disabled="true" :allow-half="widget.options.allowHalf" />
+        <el-rate
+          v-model="dataModel"
+          :max="widget.options.max"
+          :disabled="true"
+          :allow-half="widget.options.allowHalf"
+        />
       </template>
       <template v-else-if="widget.type === 'divider'">
-        <el-divider :direction="widget.options.direction" :content-position="widget.options.content_position">
-          <span :style="{
-            'font-size': widget.options.font_size,
-            'font-family': widget.options.font_family,
-            'font-weight': widget.options.font_weight,
-            color: widget.options.font_color,
-          }">
+        <el-divider
+          :direction="widget.options.direction"
+          :content-position="widget.options.content_position"
+        >
+          <span
+            :style="{
+              'font-size': widget.options.font_size,
+              'font-family': widget.options.font_family,
+              'font-weight': widget.options.font_weight,
+              color: widget.options.font_color,
+            }"
+          >
             {{ widget.options.defaultValue }}
           </span>
         </el-divider>
       </template>
-      <template v-else-if="widget.type === 'input' && widget.options.showPassword">
-        <input :value="dataModel" type="password" style="border: none; background-color: #ffffff; color: #303133"
-          disabled="disabled" />
+      <template
+        v-else-if="widget.type === 'input' && widget.options.showPassword"
+      >
+        <input
+          :value="dataModel"
+          type="password"
+          style="border: none; background-color: #ffffff; color: #303133"
+          disabled="disabled"
+        />
       </template>
       <template v-else-if="widget.type === 'cascader'">
-        <el-cascader v-model="dataModel" class="preview-cascader-class" :disabled="true"
-          :show-all-levels="widget.options.showAllLevels" :options="widget.options.remote
-            ? widget.options.remoteOptions
-            : widget.options.options
-            " />
+        <el-cascader
+          v-model="dataModel"
+          class="preview-cascader-class"
+          :disabled="true"
+          :show-all-levels="widget.options.showAllLevels"
+          :options="
+            widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options
+          "
+        />
       </template>
       <template v-else-if="widget.type === 'textarea'">
         <span v-html="dataFormatBr(dataModel)"></span>
@@ -87,34 +154,68 @@
     </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'
-          " v-model="dataModel" :type="widget.options.dataType" @input="onInputChangeNumber($event)"
-          :placeholder="widget.options.placeholder" :style="{ width: widget.options.width }"
-          :disabled="widget.options.disabled" :show-password="widget.options.showPassword" />
-        <el-input v-else v-model="dataModel" :type="widget.options.dataType" :disabled="widget.options.disabled"
-          :placeholder="widget.options.placeholder" :style="{ width: widget.options.width }"
-          :show-password="widget.options.showPassword" />
+        <el-input
+          v-if="
+            widget.options.dataType === 'number' ||
+            widget.options.dataType === 'integer' ||
+            widget.options.dataType === 'float'
+          "
+          v-model="dataModel"
+          :type="widget.options.dataType"
+          @input="onInputChangeNumber($event)"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :disabled="widget.options.disabled"
+          :show-password="widget.options.showPassword"
+        />
+        <el-input
+          v-else
+          v-model="dataModel"
+          :type="widget.options.dataType"
+          :disabled="widget.options.disabled"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :show-password="widget.options.showPassword"
+        />
       </template>
 
       <template v-if="widget.type === 'textarea'">
-        <el-input v-model="dataModel" type="textarea" :rows="5" :disabled="widget.options.disabled"
-          :placeholder="widget.options.placeholder" :style="{ width: widget.options.width }" />
+        <el-input
+          v-model="dataModel"
+          type="textarea"
+          :rows="5"
+          :disabled="widget.options.disabled"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+        />
       </template>
 
       <template v-if="widget.type === 'number'">
-        <el-input-number v-model="dataModel" :style="{ width: widget.options.width }" :step="widget.options.step"
-          controls-position="right" :disabled="widget.options.disabled" />
+        <el-input-number
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :step="widget.options.step"
+          controls-position="right"
+          :disabled="widget.options.disabled"
+        />
       </template>
 
       <template v-if="widget.type === 'radio'">
-        <el-radio-group v-model="dataModel" :style="{ width: widget.options.width }" :disabled="widget.options.disabled">
-          <el-radio v-for="(item, index) in widget.options.remote
+        <el-radio-group
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :disabled="widget.options.disabled"
+        >
+          <el-radio
+            v-for="(item, index) in widget.options.remote
               ? widget.options.remoteOptions
-              : widget.options.options" :key="index" :style="{
-      display: widget.options.inline ? 'inline-block' : 'block',
-    }" :label="item.value">
+              : widget.options.options"
+            :key="index"
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block',
+            }"
+            :label="item.value"
+          >
             <template v-if="widget.options.remote">{{ item.label }}</template>
             <template v-else>{{
               widget.options.showLabel ? item.label : item.value
@@ -124,13 +225,21 @@
       </template>
 
       <template v-if="widget.type === 'checkbox'">
-        <el-checkbox-group v-model="dataModel" :style="{ width: widget.options.width }"
-          :disabled="widget.options.disabled">
-          <el-checkbox v-for="(item, index) in widget.options.remote
+        <el-checkbox-group
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :disabled="widget.options.disabled"
+        >
+          <el-checkbox
+            v-for="(item, index) in widget.options.remote
               ? widget.options.remoteOptions
-              : widget.options.options" :key="index" :style="{
-      display: widget.options.inline ? 'inline-block' : 'block',
-    }" :label="item.value">
+              : widget.options.options"
+            :key="index"
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block',
+            }"
+            :label="item.value"
+          >
             <template v-if="widget.options.remote">{{ item.label }}</template>
             <template v-else>{{
               widget.options.showLabel ? item.label : item.value
@@ -140,56 +249,122 @@
       </template>
 
       <template v-if="widget.type === 'time'">
-        <el-time-picker v-model="dataModel" :is-range="widget.options.isRange" :placeholder="widget.options.placeholder"
-          :start-placeholder="widget.options.startPlaceholder" :end-placeholder="widget.options.endPlaceholder"
-          :readonly="widget.options.readonly" :disabled="widget.options.disabled" :editable="widget.options.editable"
-          :clearable="widget.options.clearable" :arrow-control="widget.options.arrowControl"
-          :value-format="widget.options.format" :style="{ width: widget.options.width }" />
+        <el-time-picker
+          v-model="dataModel"
+          :is-range="widget.options.isRange"
+          :placeholder="widget.options.placeholder"
+          :start-placeholder="widget.options.startPlaceholder"
+          :end-placeholder="widget.options.endPlaceholder"
+          :readonly="widget.options.readonly"
+          :disabled="widget.options.disabled"
+          :editable="widget.options.editable"
+          :clearable="widget.options.clearable"
+          :arrow-control="widget.options.arrowControl"
+          :value-format="widget.options.format"
+          :style="{ width: widget.options.width }"
+        />
       </template>
 
       <template v-if="widget.type == 'date'">
-        <el-date-picker v-model="dataModel" :type="widget.options.type" :placeholder="widget.options.placeholder"
-          :start-placeholder="widget.options.startPlaceholder" :end-placeholder="widget.options.endPlaceholder"
-          :readonly="widget.options.readonly" :disabled="widget.options.disabled" :editable="widget.options.editable"
-          :clearable="widget.options.clearable" :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format
-            " :format="widget.options.format" :style="{ width: widget.options.width }" />
+        <el-date-picker
+          v-model="dataModel"
+          :type="widget.options.type"
+          :placeholder="widget.options.placeholder"
+          :start-placeholder="widget.options.startPlaceholder"
+          :end-placeholder="widget.options.endPlaceholder"
+          :readonly="widget.options.readonly"
+          :disabled="widget.options.disabled"
+          :editable="widget.options.editable"
+          :clearable="widget.options.clearable"
+          :value-format="
+            widget.options.timestamp ? 'timestamp' : widget.options.format
+          "
+          :format="widget.options.format"
+          :style="{ width: widget.options.width }"
+        />
       </template>
 
       <template v-if="widget.type == 'rate'">
-        <el-rate v-model="dataModel" :max="widget.options.max" :disabled="widget.options.disabled"
-          :allow-half="widget.options.allowHalf" />
+        <el-rate
+          v-model="dataModel"
+          :max="widget.options.max"
+          :disabled="widget.options.disabled"
+          :allow-half="widget.options.allowHalf"
+        />
       </template>
 
       <template v-if="widget.type === 'color'">
-        <el-color-picker v-model="dataModel" :disabled="widget.options.disabled" :show-alpha="widget.options.showAlpha" />
+        <el-color-picker
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :show-alpha="widget.options.showAlpha"
+        />
       </template>
 
       <template v-if="widget.type === 'select'">
-        <el-select v-model="dataModel" :disabled="widget.options.disabled" :multiple="widget.options.multiple"
-          :clearable="widget.options.clearable" :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }" filterable @change="onChangeSelect">
-          <el-option v-for="item in widget.options.remote
-            ? widget.options.remoteOptions
-            : widget.options.options" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote
-    ? item.label
-    : item.value
-    " />
+        <el-select
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :multiple="widget.options.multiple"
+          :clearable="widget.options.clearable"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          filterable
+          @change="onChangeSelect"
+        >
+          <el-option
+            v-for="item in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="item.value"
+            :value="item.value"
+            :label="
+              widget.options.showLabel || widget.options.remote
+                ? item.label
+                : item.value
+            "
+          />
         </el-select>
       </template>
 
       <template v-if="widget.type === 'organ'">
-        <el-select v-model="dataModel" :disabled="widget.options.disabled" :multiple="widget.options.multiple" clearable
-          filterable :placeholder="widget.options.placeholder" :style="{ width: widget.options.width }"
-          :name="widget.model">
-          <el-option v-for="item in organList" :key="item.id" :value="item.id" :label="item.name" />
+        <el-select
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :multiple="widget.options.multiple"
+          clearable
+          filterable
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :name="widget.model"
+        >
+          <el-option
+            v-for="item in organList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
         </el-select>
       </template>
 
       <template v-if="widget.type === 'school'">
-        <el-select v-model="dataModel" :disabled="widget.options.disabled" :multiple="widget.options.multiple" clearable
-          :placeholder="widget.options.placeholder" :style="{ width: widget.options.width }" filterable
-          :loading="selectLoading" @visible-change="onGetSchoolList">
-          <el-option v-for="item in cooperationList" :key="item.id" :value="item.id" :label="item.name" />
+        <el-select
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :multiple="widget.options.multiple"
+          clearable
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          filterable
+          :loading="selectLoading"
+          @visible-change="onGetSchoolList"
+        >
+          <el-option
+            v-for="item in cooperationList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
         </el-select>
       </template>
 
@@ -198,55 +373,96 @@
       </template>
 
       <template v-if="widget.type == 'slider'">
-        <el-slider v-model="dataModel" :min="widget.options.min" :max="widget.options.max"
-          :disabled="widget.options.disabled" :step="widget.options.step" :show-input="widget.options.showInput"
-          :range="widget.options.range" :style="{ width: widget.options.width }" />
+        <el-slider
+          v-model="dataModel"
+          :min="widget.options.min"
+          :max="widget.options.max"
+          :disabled="widget.options.disabled"
+          :step="widget.options.step"
+          :show-input="widget.options.showInput"
+          :range="widget.options.range"
+          :style="{ width: widget.options.width }"
+        />
       </template>
 
       <template v-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" />
+        <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-if="widget.type == 'file'">
-        <FileUpload :element="widget" :data-model="dataModel" @fileList="fileList" />
+        <FileUpload
+          :element="widget"
+          :data-model="dataModel"
+          @fileList="fileList"
+        />
       </template>
 
       <template v-if="widget.type === 'editor'">
-        <vue-editor v-model="dataModel" :disabled="widget.options.disabled" :style="{ width: widget.options.width }" />
+        <vue-editor
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :style="{ width: widget.options.width }"
+        />
       </template>
 
       <template v-if="widget.type === 'cascader'">
-        <el-cascader v-model="dataModel" :disabled="widget.options.disabled"
-          :show-all-levels="widget.options.showAllLevels" :clearable="widget.options.clearable"
-          :placeholder="widget.options.placeholder" :style="{ width: widget.options.width }" :options="widget.options.remote
-            ? widget.options.remoteOptions
-            : widget.options.options
-            " />
+        <el-cascader
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :show-all-levels="widget.options.showAllLevels"
+          :clearable="widget.options.clearable"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :options="
+            widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options
+          "
+        />
       </template>
 
       <template v-if="widget.type === 'text'">
         <!-- color: widget.options.font_color, -->
-        <span :style="{
-          'font-size': widget.options.font_size,
-          'font-family': widget.options.font_family,
-          'font-weight': widget.options.font_weight,
-        }" class="dataModelText">
+        <span
+          :style="{
+            'font-size': widget.options.font_size,
+            'font-family': widget.options.font_family,
+            'font-weight': widget.options.font_weight,
+          }"
+          class="dataModelText"
+        >
           {{ widget.options.defaultValue }}
         </span>
       </template>
 
       <template v-if="widget.type === 'divider'">
-        <el-divider :direction="widget.options.direction" :content-position="widget.options.content_position">
-          <span :style="{
-            'font-size': widget.options.font_size,
-            'font-family': widget.options.font_family,
-            'font-weight': widget.options.font_weight,
-            color: widget.options.font_color,
-          }">
+        <el-divider
+          :direction="widget.options.direction"
+          :content-position="widget.options.content_position"
+        >
+          <span
+            :style="{
+              'font-size': widget.options.font_size,
+              'font-family': widget.options.font_family,
+              'font-weight': widget.options.font_weight,
+              color: widget.options.font_color,
+            }"
+          >
             {{ widget.options.defaultValue }}
           </span>
         </el-divider>
@@ -299,8 +515,8 @@ export default {
         this.subformIndex === undefined
           ? this.models[this.widget.model]
           : this.models[this.subformModel][this.subformIndex][
-          this.widget.model
-          ],
+              this.widget.model
+            ],
       dataModelStr: null,
       tableData: [],
       cooperationList: [],
@@ -317,24 +533,33 @@ export default {
   watch: {
     dataModel: {
       deep: true,
+      immediate: true,
       handler(newValue) {
-        // console.log(newValue, 'model', this.widget.model)
+        // console.log(
+        //   newValue,
+        //   "model",
+        //   this.widget.model,
+        //   this.subformIndex,
+        //   JSON.parse(JSON.stringify(this.models))
+        // );
         if (newValue !== undefined && newValue !== null) {
           if (this.subformIndex !== undefined) {
-            this.models[this.subformModel][this.subformIndex][
-              this.widget.model
-            ] = newValue;
+            // this.models[this.subformModel][this.subformIndex][
+            //   this.widget.model
+            // ] = newValue;
             this.$emit("update:models", {
               ...this.models,
               [this.subformModel]: this.models[this.subformModel],
             });
+            this.$forceUpdate();
             // this.$emit('input-change', val, this.widget.model, this.subformIndex)
           } else {
-            this.models[this.widget.model] = newValue;
+            // this.models[this.widget.model] = newValue;
             this.$emit("update:models", {
               ...this.models,
               [this.widget.model]: newValue,
             });
+            this.$forceUpdate();
             // this.$emit('input-change', val, this.widget.model)
           }
         }
@@ -342,9 +567,18 @@ export default {
     },
     models: {
       deep: true,
+      immediate: true,
       async handler(val) {
         // console.log(val, 'show')
-        // console.log(this.widget, "12121", this.dataModel, this.subformIndex, ' subformIndex', this.models, this.subformModel);
+        // console.log(
+        //   this.widget,
+        //   "12121",
+        //   this.dataModel,
+        //   this.subformIndex,
+        //   " subformIndex",
+        //   this.models,
+        //   this.subformModel
+        // );
         if (val.status === undefined && val.status === null) {
           if (this.subformIndex === undefined) {
             this.dataModel = val[this.widget.model];
@@ -440,8 +674,6 @@ export default {
       // console.log(true, "false");
       this.onChangeSelect();
     }
-
-
   },
   methods: {
     isCheckImage(file) {
@@ -616,7 +848,7 @@ export default {
       if (this.subformModel) {
         organId =
           this.models[this.subformModel][this.subformIndex][
-          this.widget.options.displayRelation
+            this.widget.options.displayRelation
           ];
       } else {
         organId = this.models[this.widget.options.displayRelation];
@@ -726,7 +958,7 @@ export default {
 </script>
 
 <style>
-.previewEditorDiv>p {
+.previewEditorDiv > p {
   margin: 0;
 }
 
@@ -736,7 +968,11 @@ export default {
   color: #303133;
 }
 
-.preview-cascader-class .el-input.is-disabled .el-input__suffix .el-input__suffix-inner .el-input__icon.el-icon-arrow-down:before {
+.preview-cascader-class
+  .el-input.is-disabled
+  .el-input__suffix
+  .el-input__suffix-inner
+  .el-input__icon.el-icon-arrow-down:before {
   content: "";
 }