【接口看板+store+job+inventory】表格多选及权限按钮优化开发

PC/InterFace.Dash/src/components/tablePagination/index.vue

@@ -67,6 +67,7 @@
         :firstFixed="true"
         :cellStyle = "cellStyle"
         :showOverflowTooltip="showOverflowTooltip"
+        :selectionColumnHandle="selectionColumnHandle"
       >
         <template>
           <slot></slot>
@@ -98,13 +99,6 @@ export default {
     rowDrop
   },
   props: {
-    // 不使用权限的按钮
-    noUsePermissionBtn:{
-      type: Array,
-      default: () => {
-        return ['refresh','field','filterForDetail','export','filter']//刷新，字段设置，明细查询，导出，筛选
-      }
-    },
     rowMaxHeight:{
       type:String,
       default:'calc(90vh - 280px)'
@@ -237,6 +231,11 @@ export default {
     rowSource:{
       type:String,
       default:'list_api'
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data () {
@@ -305,13 +304,17 @@ export default {
     })
   },
   methods: {
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.tablePaginationTableRef.clearTableSelection();
+    },
     initButttondata(){
       let _list = []
       this.currenButtonData.forEach(item=>{
         if(item.permission){
           _list.push(item)
         }else{
-          if(this.noUsePermissionBtn.indexOf(item.name) < 0){
+          if(!item.isNoPermission){
             let _scope = item.clientScope || localStorage.getItem('appClientScope')
             item.permission =  [_scope + '.' +this.$route.name+'.'+(item.permissionName || item.name)]
           }else{

PC/InterFace.Dash/src/components/umyTable/index.vue

@@ -18,7 +18,13 @@
     header-row-class-name="uTableHeader"
   >
     <!-- :tree-props="treeProps" 与 “height”  不能共存， 此组件暂不支持tree的格式-->
-    <u-table-column v-if="selectionTable" fixed="left" type="selection" :reserve-selection="true" />
+    <u-table-column 
+      v-if="selectionTable" 
+      fixed="left" 
+      type="selection" 
+      :reserve-selection="true" 
+      :selectable="selectionHandle"
+    />
     <u-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" />
     <template v-for="(item, index) in TableSize">
     <u-table-column
@@ -130,7 +136,7 @@
     <u-table-column
       v-if="buttonOperationList_left"
       :fixed="'left'"
-      width="auto"
+      :width="operationLeftColumnWidth()"
       min-width="120px"
       :align="'center'"
       :header-align="'center'"
@@ -144,6 +150,7 @@
           :key="indexButton"
           type="text"
           size="mini"
+          :style="{color:itemButton.color || '#409EFF'}"
           @click="buttonOperationClick_left(scope.row, itemButton, indexButton)"
         >{{itemButton.label}}</el-button>
       </template>
@@ -250,7 +257,7 @@ export default {
     // table是否有border
     tableBorder: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     // 是否为第一个浮动，如果是，则item中的fixed无效（应用场景：主列表，因为用户排序不定元素为第一项）
     firstFixed: {
@@ -332,6 +339,11 @@ export default {
       default: () => {
         return 280;
       }
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -398,6 +410,19 @@ export default {
     this.setTableHeightHandle()
   },
   methods: {
+    // 多选列处理
+    selectionHandle(row,index){
+      return this.selectionColumnHandle(row,index)
+    },
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.multipleTable.clearSelection();
+    },
+    // 左侧操作列宽度适应
+    operationLeftColumnWidth(){
+      if(this.buttonOperationList_left.length == 1){return 120}
+      else{return this.buttonOperationList_left.length * 100}
+    },
     // 重新渲染表格
     doFreshLayout(){
       if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {

PC/InterFace.Dash/src/utils/defaultButtons.js

@@ -39,6 +39,7 @@ export function defaultExportBtn(option) {
         label: i18n.t('btns.export'),
         name: "export",
         size: "mini",
+        isNoPermission:true
     })
 }
 
@@ -69,7 +70,8 @@ export function defaultFieldSettingBtn(option,source) {
         name: "field",
         size: "mini",
         float: 'right',
-        class: "rowDropNotHideItem"
+        class: "rowDropNotHideItem",
+        isNoPermission:true
     })
 }
 
@@ -80,7 +82,8 @@ export function defaultFreshBtn(option) {
         label: i18n.t('btns.fresh'),
         name: "refresh",
         size: "mini",
-        float: 'right'
+        float: 'right',
+        isNoPermission:true
     })
 }
 
@@ -92,7 +95,8 @@ export function defaultFilterBtn(option) {
         label: i18n.t('btns.filter'),
         name: "filter",
         size: "mini",
-        float: 'left'
+        float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -105,6 +109,7 @@ export function defaultFilterForDetailBtn(option) {
         name: "filterForDetail",
         size: "mini",
         float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -126,5 +131,6 @@ function __defaultBtnOption(option,specific){
         permission:option && option.permission ? option.permission : null,
         clientScope:option && option.clientScope ? option.clientScope : null,
         permissionName:option && option.permissionName ? option.permissionName : specific.permissionName,
+        isNoPermission:option && option.isNoPermission ? option.isNoPermission : specific.isNoPermission
     }
 }

PC/UI.WinIn.FasterZ.Inventory/src/components/tablePagination/index.vue

@@ -62,6 +62,7 @@
         :firstFixed="true"
         :cellStyle = "cellStyle"
         :showOverflowTooltip="showOverflowTooltip"
+        :selectionColumnHandle="selectionColumnHandle"
       >
         <template>
           <slot></slot>
@@ -93,13 +94,6 @@ export default {
     rowDrop
   },
   props: {
-    // 不使用权限的按钮
-    noUsePermissionBtn:{
-      type: Array,
-      default: () => {
-        return ['refresh','field','filterForDetail','export','filter']//刷新，字段设置，明细查询，导出，筛选
-      }
-    },
     rowMaxHeight:{
       type:String,
       default:'calc(90vh - 280px)'
@@ -232,6 +226,11 @@ export default {
     rowSource:{
       type:String,
       default:'list_api'
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data () {
@@ -300,13 +299,17 @@ export default {
     })
   },
   methods: {
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.tablePaginationTableRef.clearTableSelection();
+    },
     initButttondata(){
       let _list = []
       this.currenButtonData.forEach(item=>{
         if(item.permission){
           _list.push(item)
         }else{
-          if(this.noUsePermissionBtn.indexOf(item.name) < 0){
+          if(!item.isNoPermission){
             let _scope = item.clientScope || localStorage.getItem('appClientScope')
             item.permission =  [_scope + '.' +this.$route.name+'.'+(item.permissionName || item.name)]
           }else{

PC/UI.WinIn.FasterZ.Inventory/src/components/umyTable/index.vue

@@ -18,7 +18,13 @@
     header-row-class-name="uTableHeader"
   >
     <!-- :tree-props="treeProps" 与 “height”  不能共存， 此组件暂不支持tree的格式-->
-    <u-table-column v-if="selectionTable" fixed="left" type="selection" :reserve-selection="true" />
+    <u-table-column 
+      v-if="selectionTable" 
+      fixed="left" 
+      type="selection" 
+      :reserve-selection="true" 
+      :selectable="selectionHandle"
+    />
     <u-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" />
     <template v-for="(item, index) in TableSize">
     <u-table-column
@@ -130,7 +136,7 @@
     <u-table-column
       v-if="buttonOperationList_left"
       :fixed="'left'"
-      width="auto"
+      :width="operationLeftColumnWidth()"
       min-width="120px"
       :align="'center'"
       :header-align="'center'"
@@ -144,6 +150,7 @@
           :key="indexButton"
           type="text"
           size="mini"
+          :style="{color:itemButton.color || '#409EFF'}"
           @click="buttonOperationClick_left(scope.row, itemButton, indexButton)"
         >{{itemButton.label}}</el-button>
       </template>
@@ -250,7 +257,7 @@ export default {
     // table是否有border
     tableBorder: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     // 是否为第一个浮动，如果是，则item中的fixed无效（应用场景：主列表，因为用户排序不定元素为第一项）
     firstFixed: {
@@ -332,6 +339,11 @@ export default {
       default: () => {
         return 280;
       }
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -398,6 +410,19 @@ export default {
     this.setTableHeightHandle()
   },
   methods: {
+    // 多选列处理
+    selectionHandle(row,index){
+      return this.selectionColumnHandle(row,index)
+    },
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.multipleTable.clearSelection();
+    },
+    // 左侧操作列宽度适应
+    operationLeftColumnWidth(){
+      if(this.buttonOperationList_left.length == 1){return 120}
+      else{return this.buttonOperationList_left.length * 100}
+    },
     // 重新渲染表格
     doFreshLayout(){
       if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
@@ -414,7 +439,7 @@ export default {
         this.$refs.multipleTable.$forceUpdate()
       });
     },
-    // 获取表格高度 误删 业务当中有用
+    // 获取表格高度 勿删 业务当中有用
     getTableHeight(){
       return this.uTableHeight
     },

PC/UI.WinIn.FasterZ.Inventory/src/utils/defaultButtons.js

@@ -39,6 +39,7 @@ export function defaultExportBtn(option) {
         label: i18n.t('btns.export'),
         name: "export",
         size: "mini",
+        isNoPermission:true
     })
 }
 
@@ -69,7 +70,8 @@ export function defaultFieldSettingBtn(option,source) {
         name: "field",
         size: "mini",
         float: 'right',
-        class: "rowDropNotHideItem"
+        class: "rowDropNotHideItem",
+        isNoPermission:true
     })
 }
 
@@ -80,7 +82,8 @@ export function defaultFreshBtn(option) {
         label: i18n.t('btns.fresh'),
         name: "refresh",
         size: "mini",
-        float: 'right'
+        float: 'right',
+        isNoPermission:true
     })
 }
 
@@ -92,7 +95,8 @@ export function defaultFilterBtn(option) {
         label: i18n.t('btns.filter'),
         name: "filter",
         size: "mini",
-        float: 'left'
+        float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -105,6 +109,7 @@ export function defaultFilterForDetailBtn(option) {
         name: "filterForDetail",
         size: "mini",
         float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -126,5 +131,6 @@ function __defaultBtnOption(option,specific){
         permission:option && option.permission ? option.permission : null,
         clientScope:option && option.clientScope ? option.clientScope : null,
         permissionName:option && option.permissionName ? option.permissionName : specific.permissionName,
+        isNoPermission:option && option.isNoPermission ? option.isNoPermission : specific.isNoPermission
     }
 }

PC/UI.WinIn.FasterZ.Job/src/components/tablePagination/index.vue

@@ -62,6 +62,7 @@
         :firstFixed="true"
         :cellStyle = "cellStyle"
         :showOverflowTooltip="showOverflowTooltip"
+        :selectionColumnHandle="selectionColumnHandle"
       >
         <template>
           <slot></slot>
@@ -93,13 +94,6 @@ export default {
     rowDrop
   },
   props: {
-    // 不使用权限的按钮
-    noUsePermissionBtn:{
-      type: Array,
-      default: () => {
-        return ['refresh','field','filterForDetail','export','filter']//刷新，字段设置，明细查询，导出，筛选
-      }
-    },
     rowMaxHeight:{
       type:String,
       default:'calc(90vh - 280px)'
@@ -232,6 +226,11 @@ export default {
     rowSource:{
       type:String,
       default:'list_api'
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data () {
@@ -300,13 +299,17 @@ export default {
     })
   },
   methods: {
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.tablePaginationTableRef.clearTableSelection();
+    },
     initButttondata(){
       let _list = []
       this.currenButtonData.forEach(item=>{
         if(item.permission){
           _list.push(item)
         }else{
-          if(this.noUsePermissionBtn.indexOf(item.name) < 0){
+          if(!item.isNoPermission){
             let _scope = item.clientScope || localStorage.getItem('appClientScope')
             item.permission =  [_scope + '.' +this.$route.name+'.'+(item.permissionName || item.name)]
           }else{

PC/UI.WinIn.FasterZ.Job/src/components/umyTable/index.vue

@@ -18,7 +18,13 @@
     header-row-class-name="uTableHeader"
   >
     <!-- :tree-props="treeProps" 与 “height”  不能共存， 此组件暂不支持tree的格式-->
-    <u-table-column v-if="selectionTable" fixed="left" type="selection" :reserve-selection="true" />
+    <u-table-column 
+      v-if="selectionTable" 
+      fixed="left" 
+      type="selection" 
+      :reserve-selection="true" 
+      :selectable="selectionHandle"
+    />
     <u-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" />
     <template v-for="(item, index) in TableSize">
     <u-table-column
@@ -130,7 +136,7 @@
     <u-table-column
       v-if="buttonOperationList_left"
       :fixed="'left'"
-      width="auto"
+      :width="operationLeftColumnWidth()"
       min-width="120px"
       :align="'center'"
       :header-align="'center'"
@@ -144,6 +150,7 @@
           :key="indexButton"
           type="text"
           size="mini"
+          :style="{color:itemButton.color || '#409EFF'}"
           @click="buttonOperationClick_left(scope.row, itemButton, indexButton)"
         >{{itemButton.label}}</el-button>
       </template>
@@ -250,7 +257,7 @@ export default {
     // table是否有border
     tableBorder: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     // 是否为第一个浮动，如果是，则item中的fixed无效（应用场景：主列表，因为用户排序不定元素为第一项）
     firstFixed: {
@@ -332,6 +339,11 @@ export default {
       default: () => {
         return 280;
       }
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -398,6 +410,19 @@ export default {
     this.setTableHeightHandle()
   },
   methods: {
+    // 多选列处理
+    selectionHandle(row,index){
+      return this.selectionColumnHandle(row,index)
+    },
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.multipleTable.clearSelection();
+    },
+    // 左侧操作列宽度适应
+    operationLeftColumnWidth(){
+      if(this.buttonOperationList_left.length == 1){return 120}
+      else{return this.buttonOperationList_left.length * 100}
+    },
     // 重新渲染表格
     doFreshLayout(){
       if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
@@ -414,7 +439,7 @@ export default {
         this.$refs.multipleTable.$forceUpdate()
       });
     },
-    // 获取表格高度 误删 业务当中有用
+    // 获取表格高度 勿删 业务当中有用
     getTableHeight(){
       return this.uTableHeight
     },

PC/UI.WinIn.FasterZ.Job/src/utils/defaultButtons.js

@@ -39,6 +39,7 @@ export function defaultExportBtn(option) {
         label: i18n.t('btns.export'),
         name: "export",
         size: "mini",
+        isNoPermission:true
     })
 }
 
@@ -69,7 +70,8 @@ export function defaultFieldSettingBtn(option,source) {
         name: "field",
         size: "mini",
         float: 'right',
-        class: "rowDropNotHideItem"
+        class: "rowDropNotHideItem",
+        isNoPermission:true
     })
 }
 
@@ -80,7 +82,8 @@ export function defaultFreshBtn(option) {
         label: i18n.t('btns.fresh'),
         name: "refresh",
         size: "mini",
-        float: 'right'
+        float: 'right',
+        isNoPermission:true
     })
 }
 
@@ -92,7 +95,8 @@ export function defaultFilterBtn(option) {
         label: i18n.t('btns.filter'),
         name: "filter",
         size: "mini",
-        float: 'left'
+        float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -105,6 +109,7 @@ export function defaultFilterForDetailBtn(option) {
         name: "filterForDetail",
         size: "mini",
         float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -126,5 +131,6 @@ function __defaultBtnOption(option,specific){
         permission:option && option.permission ? option.permission : null,
         clientScope:option && option.clientScope ? option.clientScope : null,
         permissionName:option && option.permissionName ? option.permissionName : specific.permissionName,
+        isNoPermission:option && option.isNoPermission ? option.isNoPermission : specific.isNoPermission
     }
 }

PC/UI.WinIn.FasterZ.Store/src/components/tablePagination/index.vue

@@ -62,6 +62,7 @@
         :firstFixed="true"
         :cellStyle = "cellStyle"
         :showOverflowTooltip="showOverflowTooltip"
+        :selectionColumnHandle="selectionColumnHandle"
       >
         <template>
           <slot></slot>
@@ -93,13 +94,6 @@ export default {
     rowDrop
   },
   props: {
-    // 不使用权限的按钮
-    noUsePermissionBtn:{
-      type: Array,
-      default: () => {
-        return ['refresh','field','filterForDetail','export','filter']//刷新，字段设置，明细查询，导出，筛选
-      }
-    },
     rowMaxHeight:{
       type:String,
       default:'calc(90vh - 280px)'
@@ -232,6 +226,11 @@ export default {
     rowSource:{
       type:String,
       default:'list_api'
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data () {
@@ -300,13 +299,17 @@ export default {
     })
   },
   methods: {
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.tablePaginationTableRef.clearTableSelection();
+    },
     initButttondata(){
       let _list = []
       this.currenButtonData.forEach(item=>{
         if(item.permission){
           _list.push(item)
         }else{
-          if(this.noUsePermissionBtn.indexOf(item.name) < 0){
+          if(!item.isNoPermission){
             let _scope = item.clientScope || localStorage.getItem('appClientScope')
             item.permission =  [_scope + '.' +this.$route.name+'.'+(item.permissionName || item.name)]
           }else{

PC/UI.WinIn.FasterZ.Store/src/components/umyTable/index.vue

@@ -18,7 +18,13 @@
     header-row-class-name="uTableHeader"
   >
     <!-- :tree-props="treeProps" 与 “height”  不能共存， 此组件暂不支持tree的格式-->
-    <u-table-column v-if="selectionTable" fixed="left" type="selection" :reserve-selection="true" />
+    <u-table-column 
+      v-if="selectionTable" 
+      fixed="left" 
+      type="selection" 
+      :reserve-selection="true" 
+      :selectable="selectionHandle"
+    />
     <u-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" />
     <template v-for="(item, index) in TableSize">
     <u-table-column
@@ -130,7 +136,7 @@
     <u-table-column
       v-if="buttonOperationList_left"
       :fixed="'left'"
-      width="auto"
+      :width="operationLeftColumnWidth()"
       min-width="120px"
       :align="'center'"
       :header-align="'center'"
@@ -144,6 +150,7 @@
           :key="indexButton"
           type="text"
           size="mini"
+          :style="{color:itemButton.color || '#409EFF'}"
           @click="buttonOperationClick_left(scope.row, itemButton, indexButton)"
         >{{itemButton.label}}</el-button>
       </template>
@@ -250,7 +257,7 @@ export default {
     // table是否有border
     tableBorder: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     // 是否为第一个浮动，如果是，则item中的fixed无效（应用场景：主列表，因为用户排序不定元素为第一项）
     firstFixed: {
@@ -332,6 +339,11 @@ export default {
       default: () => {
         return 280;
       }
+    },
+    // 多选列处理
+    selectionColumnHandle:{
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -398,6 +410,19 @@ export default {
     this.setTableHeightHandle()
   },
   methods: {
+    // 多选列处理
+    selectionHandle(row,index){
+      return this.selectionColumnHandle(row,index)
+    },
+    // 清除已选(外部使用，勿删)
+    clearTableSelection(){
+      this.$refs.multipleTable.clearSelection();
+    },
+    // 左侧操作列宽度适应
+    operationLeftColumnWidth(){
+      if(this.buttonOperationList_left.length == 1){return 120}
+      else{return this.buttonOperationList_left.length * 100}
+    },
     // 重新渲染表格
     doFreshLayout(){
       if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
@@ -414,7 +439,7 @@ export default {
         this.$refs.multipleTable.$forceUpdate()
       });
     },
-    // 获取表格高度 误删 业务当中有用
+    // 获取表格高度 勿删 业务当中有用
     getTableHeight(){
       return this.uTableHeight
     },

PC/UI.WinIn.FasterZ.Store/src/utils/defaultButtons.js

@@ -39,6 +39,7 @@ export function defaultExportBtn(option) {
         label: i18n.t('btns.export'),
         name: "export",
         size: "mini",
+        isNoPermission:true
     })
 }
 
@@ -69,7 +70,8 @@ export function defaultFieldSettingBtn(option,source) {
         name: "field",
         size: "mini",
         float: 'right',
-        class: "rowDropNotHideItem"
+        class: "rowDropNotHideItem",
+        isNoPermission:true
     })
 }
 
@@ -80,7 +82,8 @@ export function defaultFreshBtn(option) {
         label: i18n.t('btns.fresh'),
         name: "refresh",
         size: "mini",
-        float: 'right'
+        float: 'right',
+        isNoPermission:true
     })
 }
 
@@ -92,7 +95,8 @@ export function defaultFilterBtn(option) {
         label: i18n.t('btns.filter'),
         name: "filter",
         size: "mini",
-        float: 'left'
+        float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -105,6 +109,7 @@ export function defaultFilterForDetailBtn(option) {
         name: "filterForDetail",
         size: "mini",
         float: 'left',
+        isNoPermission:true
     })
 }
 
@@ -126,5 +131,6 @@ function __defaultBtnOption(option,specific){
         permission:option && option.permission ? option.permission : null,
         clientScope:option && option.clientScope ? option.clientScope : null,
         permissionName:option && option.permissionName ? option.permissionName : specific.permissionName,
+        isNoPermission:option && option.isNoPermission ? option.isNoPermission : specific.isNoPermission
     }
 }