JeecgBoot 2.4.2 积木报表版本发布，基于SpringBoot的低代码平台

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

@@ -11,13 +11,13 @@
       <a-col>
         <!-- 操作按钮 -->
         <div v-if="actionButton" class="action-button">
-          <a-button type="primary" icon="plus" @click="handleClickAdd" :disabled="disabled">新增</a-button>
+          <a-button v-if="buttonPermission('add')" type="primary" icon="plus" @click="handleClickAdd" :disabled="disabled">新增</a-button>
           <span class="gap"></span>
           <template v-if="selectedRowIds.length>0">
             <a-popconfirm
               :title="`确定要删除这 ${selectedRowIds.length} 项吗?`"
               @confirm="handleConfirmDelete">
-              <a-button type="primary" icon="minus" :disabled="disabled">删除</a-button>
+              <a-button v-if="buttonPermission('batch_delete')" type="primary" icon="minus" :disabled="disabled">删除</a-button>
               <span class="gap"></span>
             </a-popconfirm>
             <template v-if="showClearSelectButton">
@@ -59,7 +59,7 @@
               v-show="col.type !== formTypes.hidden"
               class="td"
               :key="col.key"
-              :style="buildTdStyle(col,true)">
+              :style="buildTdStyle(col)">
 
               <span>{{ col.title }}</span>
             </div>
@@ -188,6 +188,7 @@
                           :getPopupContainer="getParentContainer"
                           :placeholder="replaceProps(col, col.placeholder)"
                           :filterOption="(i,o)=>handleSelectFilterOption(i,o,col)"
+                          :maxTagCount="1"
                           @change="(v)=>handleChangeSelectCommon(v,id,row,col)"
                           @search="(v)=>handleSearchSelect(v,id,row,col)"
                           @blur="(v)=>handleBlurSearch(v,id,row,col)"
@@ -201,6 +202,55 @@
                         >{{ getSelectTranslateText(selectValues[id], row, col) }}</span>
                       </a-tooltip>
                     </template>
+
+                    <!-- 部门选择 -->
+                    <template v-else-if="col.type === formTypes.sel_depart">
+                      <a-tooltip v-bind="buildTooltipProps(row, col, id)">
+                        <j-select-depart
+                          v-if="isEditRow(row, col)"
+                          :id="id"
+                          :key="i"
+                          v-bind="buildProps(row,col)"
+                          style="width: 100%;"
+                          :value="departCompValues[id]"
+                          :placeholder="replaceProps(col, col.placeholder)"
+                          :trigger-change="true"
+                          :multi="true"
+                          @change="(v)=>handleChangeDepartCommon(v,id,row,col)"
+                        />
+                        <span
+                          v-else
+                          class="j-td-span no-edit"
+                          :class="{disabled: buildProps(row,col).disabled}"
+                          @click="handleEditRow(row, col)"
+                        >{{ departCompValues[id] }}</span>
+                      </a-tooltip>
+                    </template>
+
+                    <!-- 用户选择 -->
+                    <template v-else-if="col.type === formTypes.sel_user">
+                      <a-tooltip v-bind="buildTooltipProps(row, col, id)">
+                        <j-select-user-by-dep
+                          v-if="isEditRow(row, col)"
+                          :id="id"
+                          :key="i"
+                          v-bind="buildProps(row,col)"
+                          style="width: 100%;"
+                          :value="userCompValues[id]"
+                          :placeholder="replaceProps(col, col.placeholder)"
+                          :trigger-change="true"
+                          :multi="true"
+                          @change="(v)=>handleChangeUserCommon(v,id,row,col)"
+                        />
+                        <span
+                          v-else
+                          class="j-td-span no-edit"
+                          :class="{disabled: buildProps(row,col).disabled}"
+                          @click="handleEditRow(row, col)"
+                        >{{ userCompValues[id] }}</span>
+                      </a-tooltip>
+                    </template>
+
                     <!-- date -->
                     <template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
                       <a-tooltip v-bind="buildTooltipProps(row, col, id)">
@@ -628,6 +678,7 @@
   import { getFileAccessHttpUrl } from '@/api/manage';
   import JInputPop from '@/components/jeecg/minipop/JInputPop'
   import JFilePop from '@/components/jeecg/minipop/JFilePop'
+  import { getNoAuthCols } from "@/utils/authFilter"
 
   // 行高，需要在实例加载完成前用到
   let rowHeight = 61
@@ -704,6 +755,11 @@
         type: Boolean,
         default: true
       },
+      authPre: {
+        type: String,
+        required: false,
+        default: ''
+      },
     },
     data() {
       return {
@@ -749,6 +805,10 @@
         uploadValues: {},
         //popup信息
         popupValues: {},
+        //部门组件信息
+        departCompValues:{},
+        //用户组件信息
+        userCompValues: {},
 
         radioValues: {},
         metaCheckboxValues: {},
@@ -775,6 +835,8 @@
         // 上次push数据的事件，用于判断是否点击过快
         lastPushTimeMap: new Map(),
         number:0,
+        //不显示的按钮编码
+        excludeCode:[]
       }
     },
     created() {
@@ -883,6 +945,8 @@
       columns: {
         immediate: true,
         handler(columns) {
+          //列改变的时候重新设置按钮权限信息
+          this.loadExcludeCode()
           // 兼容IE
           this.getElementPromise('tbody').then(() => {
             columns.forEach(column => {
@@ -964,41 +1028,46 @@
         this.visibleTrEls = []
         // 判断是否是首次进入该方法，如果是就不清空行，防止删除了预添加的数据
         if (!this.isFirst) {
-          // inputValues：用来存储input表单的值
-          // 数组里的每项都是一个对象，对象里每个key都是input的rowKey，值就是input的值，其中有个id的字段来区分
-          // 示例：
-          // [{
-          //    id: "_jet-4sp0iu-15541771111770"
-          //    dbDefaultVal: "aaa",
-          //    dbFieldName: "bbb",
-          //    dbFieldTxt: "ccc",
-          //    dbLength: 32
-          // }]
-          this.inputValues = []
-          this.rows = []
-          this.deleteIds = []
-          this.selectValues = {}
-          this.checkboxValues = {}
-          this.jdateValues = {}
-          this.jInputPopValues = {}
-          this.slotValues = {}
-          this.selectedRowIds = []
-          this.tooltips = {}
-          this.notPassedIds = []
-          this.uploadValues = []
-          this.popupValues = []
-          this.radioValues = []
-          this.multiSelectValues = []
-          this.searchSelectValues = []
-          this.scrollTop = 0
-          this.$nextTick(() => {
-            this.getElement('tbody').scrollTop = 0
-          })
+         this.clearRow();
         } else {
           this.isFirst = false
         }
       },
-
+      /**清空行*/
+      clearRow(){
+        // inputValues：用来存储input表单的值
+        // 数组里的每项都是一个对象，对象里每个key都是input的rowKey，值就是input的值，其中有个id的字段来区分
+        // 示例：
+        // [{
+        //    id: "_jet-4sp0iu-15541771111770"
+        //    dbDefaultVal: "aaa",
+        //    dbFieldName: "bbb",
+        //    dbFieldTxt: "ccc",
+        //    dbLength: 32
+        // }]
+        this.inputValues = []
+        this.rows = []
+        this.deleteIds = []
+        this.selectValues = {}
+        this.checkboxValues = {}
+        this.jdateValues = {}
+        this.jInputPopValues = {}
+        this.departCompValues = {}
+        this.userCompValues = {}
+        this.slotValues = {}
+        this.selectedRowIds = []
+        this.tooltips = {}
+        this.notPassedIds = []
+        this.uploadValues = []
+        this.popupValues = []
+        this.radioValues = []
+        this.multiSelectValues = []
+        this.searchSelectValues = []
+        this.scrollTop = 0
+        this.$nextTick(() => {
+          this.getElement('tbody').scrollTop = 0
+        })
+      },
       /** 同步滚动条状态 */
       syncScrollBar(scrollLeft) {
         // this.style.tbody.left = `${scrollLeft}px`
@@ -1058,6 +1127,8 @@
         let checkboxValues = { ...this.checkboxValues }
         let selectValues = { ...this.selectValues }
         let jdateValues = { ...this.jdateValues }
+        let departCompValues = { ...this.departCompValues }
+        let userCompValues = { ...this.userCompValues }
         let jInputPopValues = { ...this.jInputPopValues }
         let slotValues = { ...this.slotValues }
         let uploadValues = { ...this.uploadValues }
@@ -1144,6 +1215,10 @@
 
             } else if (column.type === FormTypes.popup) {
               popupValues[inputId] = sourceValue
+            } else if (column.type === FormTypes.sel_depart) {
+              departCompValues[inputId] = sourceValue
+            } else if (column.type === FormTypes.sel_user) {
+              userCompValues[inputId] = sourceValue
             } else if (column.type === FormTypes.input_pop) {
               jInputPopValues[inputId] = sourceValue
             } else if (column.type === FormTypes.radio) {
@@ -1225,6 +1300,8 @@
         this.checkboxValues = checkboxValues
         this.selectValues = selectValues
         this.jdateValues = jdateValues
+        this.departCompValues = departCompValues
+        this.userCompValues = userCompValues
         this.jInputPopValues = jInputPopValues
         this.slotValues = slotValues
         this.uploadValues = uploadValues
@@ -1440,6 +1517,12 @@
             } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
               value[column.key] = this.jdateValues[inputId]
 
+            } else if (column.type === FormTypes.sel_depart) {
+              value[column.key] = this.departCompValues[inputId]
+
+            } else if (column.type === FormTypes.sel_user) {
+              value[column.key] = this.userCompValues[inputId]
+
             } else if (column.type === FormTypes.input_pop) {
               value[column.key] = this.jInputPopValues[inputId]
 
@@ -1579,6 +1662,8 @@
           selectValues: this.selectValues,
           checkboxValues: this.checkboxValues,
           jdateValues: this.jdateValues,
+          departCompValues: this.departCompValues,
+          userCompValues: this.userCompValues,
           jInputPopValues: this.jInputPopValues,
           slotValues: this.slotValues,
           uploadValues: this.uploadValues,
@@ -1633,6 +1718,10 @@
                       edited = true
                     } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
                       edited = this.setOneValue(this.jdateValues, modelKey, newValue)
+                    } else if (column.type === FormTypes.sel_depart) {
+                      edited = this.setOneValue(this.departCompValues, modelKey, newValue)
+                    } else if (column.type === FormTypes.sel_user) {
+                      edited = this.setOneValue(this.userCompValues, modelKey, newValue)
                     } else if (column.type === FormTypes.input_pop) {
                       edited = this.setOneValue(this.jInputPopValues, modelKey, newValue)
                     } else if (column.type === FormTypes.slot) {
@@ -1809,7 +1898,7 @@
 
               // 兼容 online 的规则
               let foo = [
-                { title: '6到16位数字', value: 'n6-16', pattern: /^\d{6,18}$/ },
+                { title: '6到16位数字', value: 'n6-16', pattern: /^\d{6,16}$/ },
                 { title: '6到16位任意字符', value: '*6-16', pattern: /^.{6,16}$/ },
                 { title: '6到18位字母', value: 's6-18', pattern: /^[a-z|A-Z]{6,18}$/ },
                 { title: '网址', value: 'url', pattern: /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/ },
@@ -2183,6 +2272,20 @@
           this.elemValueChange(FormTypes.date, row, column, value)
         }
       },
+      //部门组件值改变
+      handleChangeDepartCommon(value, id, row, column){
+        this.departCompValues = this.bindValuesChange(value, id, 'departCompValues')
+        this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
+        // 触发valueChange 事件
+        this.elemValueChange(FormTypes.sel_depart, row, column, value)
+      },
+      //用户组件值改变
+      handleChangeUserCommon(value, id, row, column){
+        this.userCompValues = this.bindValuesChange(value, id, 'userCompValues')
+        this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
+        // 触发valueChange 事件
+        this.elemValueChange(FormTypes.sel_user, row, column, value)
+      },
       handleChangeJInputPopCommon(value, id, row, column){
         this.jInputPopValues = this.bindValuesChange(value, id, 'jInputPopValues')
         // 做单个表单验证
@@ -2462,7 +2565,7 @@
         }
       },
       /** view辅助方法：构建 td style */
-      buildTdStyle(col,isTitle) {
+      buildTdStyle(col) {
         const isEmptyWidth = (column) => (column.type === FormTypes.hidden || column.width === '0px' || column.width === '0' || column.width === 0)
 
         let style = {}
@@ -2475,13 +2578,15 @@
           style['width'] = '120px'
         }
         //update-begin-author:lvdandan date:20201116 for:LOWCOD-984 默认风格功能测试附表样式问题 日期时间控件长度太大
-        //是否为标题，如果是时间控件设为200，时间控件的标题设为240 时间
+        //如果是时间控件设为200px
         if(col.type === FormTypes.datetime){
-          if(true === isTitle){
-            style['width'] = '240px'
-          }else{
-            style['width'] = '200px'
-          }
+          style['width'] = '200px'
+        }
+        if(col.type === FormTypes.sel_user && !col.width){
+          style['width'] = '220px'
+        }
+        if(col.type === FormTypes.sel_depart && !col.width){
+          style['width'] = '160px'
         }
         //update-end-author:lvdandan date:20201116 for:LOWCOD-984 默认风格功能测试附表样式问题 日期时间控件长度太大
 
@@ -2718,15 +2823,35 @@
       removeEventListener() {
         window.removeEventListener('mouseup', this.handleMouseup)
       },
-
       /* --------------------------- 2020年5月18日 默认span模式 ------------------------------ */
 
+      //获取没有授权的按钮编码
+      loadExcludeCode(){
+        if(!this.authPre || this.authPre.length==0){
+          this.excludeCode = []
+        }else{
+          let pre = this.authPre
+          if(!pre.endsWith(':')){
+            pre += ':'
+          }
+          this.excludeCode = getNoAuthCols(pre)
+        }
+      },
+      //判断button是否显示
+      buttonPermission(code){
+        if(!this.excludeCode || this.excludeCode.length==0){
+          return true
+        }else{
+          return this.excludeCode.indexOf(code)<0
+        }
+      }
 
     },
     beforeDestroy() {
       this.removeEventListener()
       this.destroyCleanGroupRequest = true
-    },
+    }
+
   }
 </script>