fix:处理字段新增时候，导出字段不更新的问题

src/business/platform/data/templatebuilder/right-aside/components/export-column.vue

@@ -1,23 +1,26 @@
 <template>
-  <el-dialog
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    title="设置导出字段"
-    width="70%"
-    height="100%"
-    class="edit-dialog"
-    top="5vh"
-    append-to-body
-    @close="closeDialog"
-  >
+  <el-dialog :visible.sync="dialogVisible"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             title="设置导出字段"
+             width="70%"
+             height="100%"
+             class="edit-dialog"
+             top="5vh"
+             append-to-body
+             @close="closeDialog">
     <div style="margin:0 0 20px 0;">
       <span>导出时选择字段：</span>
-      <el-radio v-model="exportColumns.select_field" label="Y">是</el-radio>
-      <el-radio v-model="exportColumns.select_field" label="N">否</el-radio>
+      <el-radio v-model="exportColumns.select_field"
+                label="Y">是</el-radio>
+      <el-radio v-model="exportColumns.select_field"
+                label="N">否</el-radio>
       <span style="margin-left:30px">导出数据形式
-        <el-tooltip class="item" effect="light" placement="bottom">
-          <div slot="content" style="line-height:1.5;">
+        <el-tooltip class="item"
+                    effect="light"
+                    placement="bottom">
+          <div slot="content"
+               style="line-height:1.5;">
             数据库元数据:数据库存什么数据就导出什么数据；<br>
             界面形式数据:界面展示格式是什么样就导出；<br>
             例：用户选择器在数据库保存的是json格式数据，<br>
@@ -28,66 +31,60 @@
         </el-tooltip>
         ：
       </span>
-      <el-radio v-model="exportColumns.export_type" label="db">数据库元数据形式</el-radio>
-      <el-radio v-model="exportColumns.export_type" label="page">界面形式数据</el-radio>
+      <el-radio v-model="exportColumns.export_type"
+                label="db">数据库元数据形式</el-radio>
+      <el-radio v-model="exportColumns.export_type"
+                label="page">界面形式数据</el-radio>
     </div>
     <div>
-      <el-table
-        max-height="500px"
-        :data="exportColumns.fields"
-        style="width: 100%"
-        border
-      >
-        <el-table-column
-          width="240"
-          align="center"
-          prop="label"
-          label="字段"
-        />
-        <el-table-column
-          prop="rights"
-        >
+      <el-table max-height="500px"
+                :data="exportColumns.fields"
+                style="width: 100%"
+                border>
+        <el-table-column width="240"
+                         align="center"
+                         prop="label"
+                         label="字段" />
+        <el-table-column prop="rights">
           <template slot="header">
             <span style="margin-right:40px;">权限</span>
-            <el-button size="mini" @click="setFieldsRigths('all')">所有人</el-button>
-            <el-button size="mini" @click="setFieldsRigths('none')">无</el-button>
-            <el-button size="mini" @click="setFieldsRigths('editor')">编辑</el-button>
+            <el-button size="mini"
+                       @click="setFieldsRigths('all')">所有人</el-button>
+            <el-button size="mini"
+                       @click="setFieldsRigths('none')">无</el-button>
+            <el-button size="mini"
+                       @click="setFieldsRigths('editor')">编辑</el-button>
           </template>
           <template v-slot="scope">
-            <rights-label :value="scope.row.rights" :item="scope.row" @remove="handleDeleteTag" />
+            <rights-label :value="scope.row.rights"
+                          :item="scope.row"
+                          @remove="handleDeleteTag" />
           </template>
         </el-table-column>
         <el-table-column>
           <template v-slot="scope">
             <div style="display:inline-block;float:right;">
-              <el-button
-                icon="el-icon-edit"
-                size="mini"
-                @click="handleEdit(scope.$index, scope.row)"
-              />
-              <el-button
-                icon="el-icon-refresh"
-                size="mini"
-                @click="handleRefresh(scope.$index)"
-              />
+              <el-button icon="el-icon-edit"
+                         size="mini"
+                         @click="handleEdit(scope.$index, scope.row)" />
+              <el-button icon="el-icon-refresh"
+                         size="mini"
+                         @click="handleRefresh(scope.$index)" />
             </div>
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <div slot="footer" class="el-dialog--center">
-      <ibps-toolbar
-        :actions="toolbars"
-        @action-event="handleActionEvent"
-      />
+    <div slot="footer"
+         class="el-dialog--center">
+      <ibps-toolbar :actions="toolbars"
+                    @action-event="handleActionEvent" />
     </div>
-    <rights-config
-      :visible="dialogRightsVisible"
-      :data="rightsTypeList"
-      title="导出字段授权"
-      @callback="handleRightsConfirm"
-      @close="visible => dialogRightsVisible = visible"
-    />
+    <rights-config :visible="dialogRightsVisible"
+                   :data="rightsTypeList"
+                   title="导出字段授权"
+                   @callback="handleRightsConfirm"
+                   @close="visible => dialogRightsVisible = visible" />
   </el-dialog>
 </template>
 <script>
@@ -108,11 +105,11 @@ export default {
     },
     data: { // 模版
       type: Object,
-      default: () => {}
+      default: () => { }
     },
     template: { // 模版
       type: Object,
-      default: () => {}
+      default: () => { }
     },
     fields: { // 字段
       type: Array,
@@ -120,7 +117,7 @@ export default {
     },
     defaultValue: { // 默认值
       type: Object,
-      default: () => {}
+      default: () => { }
     }
   },
   data() {
@@ -159,20 +156,22 @@ export default {
   },
   watch: {
     visible: {
-      handler: function(val, oldVal) {
+      handler: function (val, oldVal) {
         this.dialogVisible = this.visible
       },
       immediate: true
     },
     data: {
-      handler: function(val, oldVal) {
+      handler: function (val, oldVal) {
         const arr = this.datasets.filter(d => d.parentId !== '0')
         if (!val) return
         // 当未设置导出字段或已设置导出字段但是字段数量与数据集字段不等时（说明表中有新增字段），重新获取导出字段
         if (this.$utils.isEmpty(val.export_columns)) {
           this.exportColumns.fields = this.initFormData(this.datasets)
         } else if (val.export_columns.fields && (val.export_columns.fields.length !== arr.length)) {
-          this.exportColumns.fields = this.initFormData(this.datasets)
+          // 导出字段跟当前字段数量的差异
+          const diff = arr.filter(v => this.exportColumns.fields.every(val => val.name !== v.name))
+          this.exportColumns.fields.concat(this.initFormData(diff))
         } else {
           this.exportColumns = val.export_columns
         }