JeecgBoot 2.4.6版本发布

ant-design-vue-jeecg/src/components/jeecg/JEditableTable.vue

@@ -1,5 +1,5 @@
 <!-- JEditableTable -->
-<!-- @version 1.6.1 -->
+<!-- @version 1.6.2 -->
 <!-- @author sjlei -->
 <template>
   <a-spin :spinning="loading">
@@ -11,7 +11,33 @@
       <a-col>
         <!-- 操作按钮 -->
         <div v-if="actionButton" class="action-button">
-          <a-button v-if="buttonPermission('add')" type="primary" icon="plus" @click="handleClickAdd" :disabled="disabled">新增</a-button>
+          <a-button-group v-if="buttonPermission('add')">
+            <a-button type="primary" icon="plus" @click="handleClickAdd" :disabled="disabled">新增</a-button>
+            <a-popover v-if="addButtonSettings" placement="right" overlayClassName="j-add-btn-settings">
+              <a-row slot="title">
+                <a-col :span="12">选项</a-col>
+                <a-col :span="12" style="text-align: right;">
+                  <a-tooltip title="保存为默认值">
+                    <a-button type="link" icon="save" size="small" style="position: relative;left:4px;" @click="onAddButtonSettingsSave"/>
+                  </a-tooltip>
+                </a-col>
+              </a-row>
+              <template slot="content">
+                <a-form-model layout="horizontal" :labelCol="{span:8}" :wrapperCol="{span:16}">
+                  <a-form-model-item label="添加行数">
+                    <a-input-number v-model="settings.addRowNum" :min="1"/>
+                  </a-form-model-item>
+                  <a-form-model-item label="添加位置">
+                    <a-input-number v-model="settings.addIndex" :min="0" :max="rows.length"/>
+                    <p style="font-size: 12px;color:#aaa;line-height: 14px;text-align: right;margin: 0;">0 = 最底部</p>
+                  </a-form-model-item>
+                  <a-divider style="margin: 8px 0;"/>
+                  <a-checkbox v-model="settings.addScrollToBottom">添加后滚动到底部</a-checkbox>
+                </a-form-model>
+              </template>
+              <a-button icon="setting" type="primary"></a-button>
+            </a-popover>
+          </a-button-group>
           <span class="gap"></span>
           <template v-if="selectedRowIds.length>0">
             <a-popconfirm
@@ -318,7 +344,7 @@
                             <a-tooltip v-else-if="file.status==='done'" title="上传完成">
                               <a-icon type="check-circle" style="color:#00DB00;"/>
                             </a-tooltip>
-                            <a-tooltip v-else title="上传失败">
+                            <a-tooltip v-else :title="file.message||'上传失败'">
                               <a-icon type="exclamation-circle" style="color:red;"/>
                             </a-tooltip>
                           </template>
@@ -409,9 +435,9 @@
                             <span style="margin-left:5px">{{ getEllipsisWord(file.name,5) }}</span>
                           </a-tooltip>
 
-                          <a-tooltip v-else :title="file.name">
-                            <a-icon type="paper-clip" style="color:red;"/>
-                            <span style="color:red;margin-left:5px">{{ getEllipsisWord(file.name,5) }}</span>
+                          <a-tooltip v-else :title="file.message||'上传失败'">
+                            <a-icon type="exclamation-circle" style="color:red;"/>
+                            <span style="margin-left:5px">{{ getEllipsisWord(file.name,5) }}</span>
                           </a-tooltip>
 
                           <template style="width: 30px">
@@ -464,20 +490,9 @@
                           <template v-else-if="uploadValues[id]['path']">
                             <img class="j-editable-image" :src="getCellImageView(id)" alt="无图片" @click="handleMoreOperation(id,'img',col)"/>
                           </template>
-                          <template v-else>
-                            <a-icon type="exclamation-circle" style="color: red;" @click="handleClickShowImageError(id)"/>
-                          </template>
-                          <template slot="addonBefore" style="width: 30px">
-                            <a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
-                              <a-icon type="loading"/>
-                            </a-tooltip>
-                            <a-tooltip v-else-if="file.status==='done'" title="上传完成">
-                              <a-icon type="check-circle" style="color:#00DB00;"/>
-                            </a-tooltip>
-                            <a-tooltip v-else title="上传失败">
-                              <a-icon type="exclamation-circle" style="color:red;"/>
-                            </a-tooltip>
-                          </template>
+                          <a-tooltip v-else :title="file.message||'上传失败'" @click="handleClickShowImageError(id)">
+                            <a-icon type="exclamation-circle" style="color:red;"/>
+                          </a-tooltip>
 
                           <template style="width: 30px">
                             <a-dropdown :trigger="['click']" placement="bottomRight" :getPopupContainer="getParentContainer" style="margin-left: 10px;">
@@ -738,6 +753,11 @@
         type: Boolean,
         default: false
       },
+      // 是否显示添加按钮选项
+      addButtonSettings: {
+        type: Boolean,
+        default: false
+      },
       // 是否显示行号
       rowNumber: {
         type: Boolean,
@@ -866,7 +886,16 @@
         lastPushTimeMap: new Map(),
         number:0,
         //不显示的按钮编码
-        excludeCode:[]
+        excludeCode:[],
+        // 选项配置
+        settings: {
+          // 添加行数
+          addRowNum: 1,
+          // 添加位置（下标），0 = 最底部
+          addIndex: 0,
+          // 添加后滚动到底部
+          addScrollToBottom: false,
+        },
       }
     },
     created() {
@@ -881,6 +910,7 @@
           event.stopPropagation()
         }
       }
+      this.getSavedAddButtonSettings()
     },
     // 计算属性
     computed: {
@@ -1412,22 +1442,18 @@
         let tbody = this.getElement('tbody')
         let offsetHeight = tbody.offsetHeight
         let realScrollTop = tbody.scrollTop + offsetHeight
-        if (forceScrollToBottom === false) {
-          // 只有滚动条在底部的时候才自动滚动
-          if (!((tbody.scrollHeight - realScrollTop) <= 10)) {
-            return
-          }
+        if (forceScrollToBottom) {
+          this.$nextTick(() => {
+            this.resetScrollTop(this.$refs.scrollView.scrollHeight)
+          })
         }
-        this.$nextTick(() => {
-          tbody.scrollTop = tbody.scrollHeight
-        })
       },
       /**
        * 在指定位置添加一行
        * @param insertIndex 添加位置下标
        * @param num 添加的行数，默认1
        */
-      insert(insertIndex, num = 1) {
+      insert(insertIndex, num = 1, forceScrollToBottom = false) {
         if (this.checkTooFastClick('insert', 1500)) {
           return
         }
@@ -1455,6 +1481,12 @@
           num, insertIndex,
           target: this
         })
+        // 设置滚动条位置
+        if (forceScrollToBottom) {
+          this.$nextTick(() => {
+            this.resetScrollTop(this.$refs.scrollView.scrollHeight)
+          })
+        }
       },
       /** 删除被选中的行 */
       removeSelectedRows() {
@@ -2095,7 +2127,12 @@
 
       },
       handleClickAdd() {
-        this.add()
+        let {addRowNum, addIndex, addScrollToBottom} = this.settings
+        if (addIndex <= 0) {
+          this.add(addRowNum, addScrollToBottom)
+        } else {
+          this.insert(addIndex, addRowNum, addScrollToBottom)
+        }
       },
       handleConfirmDelete() {
         this.removeSelectedRows()
@@ -2353,7 +2390,21 @@
           value['responseName'] = file.response[column.responseName]
         }
         if (file.status === 'done') {
-          value['path'] = file.response[column.responseName]
+          if (typeof file.response.success === 'boolean') {
+            // 如果文件上传，被拦截器拦下，还会返回最外层的status = done
+            // 但是内部的success会返回false并携带异常信息
+            // 整个上传操作还是失败的
+            // https://github.com/zhangdaiscott/jeecg-boot/issues/2691
+            if (file.response.success) {
+              value['path'] = file.response[column.responseName]
+            } else {
+              value['status'] = 'error'
+              value['message'] = file.response.message || '未知错误'
+            }
+          } else {
+            // 考虑到如果设置action上传路径为非jeecg-boot后台，可能不会返回 success 属性的情况，就默认为成功
+            value['path'] = file.response[column.responseName]
+          }
         } else if (file.status === 'error') {
           value['message'] = file.response.message || '未知错误'
         }
@@ -2415,6 +2466,25 @@
           })
         }
       },
+
+      /** 添加按钮设置保存为默认值 */
+      onAddButtonSettingsSave() {
+        let obj = {
+          addRowNum: this.settings.addRowNum,
+          addIndex: this.settings.addIndex,
+          addScrollToBottom: this.settings.addScrollToBottom,
+        }
+        this.$ls.set('jet-add-btn-settings', obj)
+        this.$message.success('保存成功')
+      },
+      /** 获取保存的添加按钮默认值 */
+      getSavedAddButtonSettings() {
+        let obj= this.$ls.get('jet-add-btn-settings')
+        if (obj) {
+          Object.assign(this.settings, obj)
+        }
+      },
+
       /** 记录用到数据绑定的组件的值 */
       bindValuesChange(value, id, key) {
         this.$set(this[key], id, value)
@@ -3280,3 +3350,19 @@
   }
 
 </style>
+<style lang="less">
+// 新增按钮配置气泡的样式
+.j-add-btn-settings {
+  width: 240px;
+
+  .ant-form {
+    .ant-form-item {
+      margin-bottom: 0;
+
+      .ant-input-number {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>