@lambo-design/schema-paging-table 1.0.0-beta.5 → 1.0.0-beta.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/schema-paging-table",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.51",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,10 +10,18 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/shared": "^1.0.0-beta.93",
-    "@lambo-design/core": "^4.7.1-beta.103",
-    "@lambo-design/paging-table": "^1.0.0-beta.69",
-    "@lambo-design/schema-form": "^1.0.0-beta.25"
+    "standard-version": "^9.5.0",
+    "@lambo-design/core": "^4.7.1-beta.146",
+    "@lambo-design/shared": "^1.0.0-beta.222",
+    "@lambo-design/paging-table": "^1.0.0-beta.86",
+    "@lambo-design/schema-form": "^1.0.0-beta.73"
   },
-  "scripts": {}
+  "scripts": {
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
 }

package/src/index.vue

@@ -1,368 +1,620 @@
-<template>
-  <LamboPagingTable
-    ref="schemaPagingTable"
-    :dataUrl="dataUrl"
-    :columns="tableColumn"
-    :searchParams="tableSearchParams"
-    :transformResponse="transformResponse"
-    @on-row-click="onRowClick"
-    @on-selection-change="onSelectionChange"
-    @on-select="onSelect"
-    @on-select-cancel="onSelectCancel"
-    @on-select-all="onSelectAll"
-    @on-select-all-cancel="onSelectAllCancel">
-    <div slot="search">
-      <LamboSchemaForm
-        ref="lamboSchemaForm"
-        v-model="queryForm"
-        :form-type="'search'"
-        :fieldList="formFields"
-        :labelWidth="100"
-        :customComponents="customComponents"
-        :customValidates="customValidates"
-        @doSearch="doSearch" @reset="onReset"/>
-      <div v-if="rowName" class="tags">
-        <Tag v-for="item in selectTags" :key="item.key" :name="item.key" closable @on-close="tagClose">
-          {{ item.value }}
-        </Tag>
-      </div>
-    </div>
-    <div slot="buttons">
-      <Button
-        v-if="spreadButton.length > 0"
-        v-for="(item,index) in spreadButton"
-        type="primary"
-        :ghost="true"
-        :icon="item.icon"
-        v-permission="item.permission"
-        :key="index"
-        @click="doClick(item)"
-        style="margin-right: 5px">
-        {{ item.name }}
-      </Button>
-      <Dropdown v-if="dropDownButton.length > 0">
-        <Button type="primary" :ghost="true" icon="md-more">
-          更多操作
-          <Icon type="ios-arrow-down"></Icon>
-        </Button>
-        <DropdownMenu slot="list">
-          <DropdownItem
-            v-for="(item,index) in dropDownButton"
-            v-permission="item.permission"
-            :key="index"
-          >
-            <Icon :type="item.icon" style="margin-right: 5px"></Icon>
-            <span @click="doClick(item)">{{ item.name }}</span>
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </div>
-  </LamboPagingTable>
-</template>
-<script>
-import ajax from '@lambo-design/shared/utils/ajax'
-import { operateBtn, operateHref } from '@lambo-design/shared/utils/assist'
-import LamboPagingTable from '@lambo-design/paging-table'
-// import LamboSchemaForm from '@lambo-design/schema-form'
-// const LamboSchemaForm = ()=> import('@lambo-design/schema-form')
-export default {
-  name:"schema-paging-table",
-  components: {
-    LamboSchemaForm: () => import('@lambo-design/schema-form'),
-    LamboPagingTable,
-  },
-  data() {
-    return {
-      queryForm: {},
-      tableSearchParams: {},
-      selection: [],
-      selectStore: [],
-      selectTags: [],
-      selectRows: [],
-      selectedKeys: [],
-    }
-  },
-  props:{
-    dataUrl:{
-      type: String,
-      required: true,
-      default: ''
-    },
-    columnList:{
-      type: Array,
-      required: true,
-      default(){
-        return []
-      }
-    },
-    rowKey: {
-      type: String,
-      require: false,
-      default: ""
-    },
-    rowName: {
-      type: String,
-      require: false,
-      default: ""
-    },
-    form:{
-      type: Object,
-      required: true,
-      default(){
-        return {}
-      }
-    },
-    formFields:{
-      type: Array,
-      required: true,
-      default(){
-        return []
-      }
-    },
-    buttonList:{
-      type: Array,
-      required: true,
-      default(){
-        return []
-      }
-    },
-    customComponents: Object,
-    customValidates: Object
-  },
-  computed: {
-    tableColumn: function () {
-      let columns = []
-      let self = this
-      self.columnList.forEach((item,index)=>{
-        let obj = item
-        if(obj.hasOwnProperty("enums") && obj.hasOwnProperty("translate") && obj.translate === 'enums'){
-          obj.render = function (h, param) {
-            let state = param.row[obj.key]
-            return h('span', obj.enums[state])
-          }
-        }else if(obj.hasOwnProperty("type") && obj.type === "operate"){
-          obj.render = (h, param) => {
-            return h('div',
-              obj.button.map((item,index)=>{
-                return operateHref(self, h, param.row, item.name, (vm, currentRow) => {
-                  if(item.clickEvent?.type==="route"){
-                    // self.$Message.info(item.clickEvent.name)
-                    let query = item.clickEvent?.route?.keys?.reduce((acc,sourceItem)=>{
-                      return Object.assign(acc,{[sourceItem]:currentRow[sourceItem]})
-                    },{})
-                    this.$router.push({
-                      path: item.clickEvent?.route?.path,
-                      query
-                    })
-                  }else if(item.clickEvent?.type==="request"){
-                    // self.$Message.info(item.clickEvent.name)
-                    let data = item.clickEvent?.request?.keys?.reduce((acc,sourceItem)=>{
-                      return Object.assign(acc,{[sourceItem]:currentRow[sourceItem]})
-                    },{})
-                    let request = {
-                      url:item.clickEvent.request.url,
-                      method:item.clickEvent.request.method,
-                      param:data,
-                    }
-                    let response = item.clickEvent.response
-                    self.fetch(request,response)
-                  }else if(item.clickEvent?.type==="method"){
-                    let args = item.clickEvent?.method?.keys?.reduce((total,current)=>{
-                      return Object.assign(total,{[current]:currentRow[current]})
-                    },{})
-                    self.$emit(item.clickEvent?.method?.name,args)
-                  }else if(item.clickEvent?.type==="modal"){
-                    self.$Message.info(item.clickEvent.name)
-                  }
-                },item.permission)
-              })
-            )
-          }
-        }
-        columns.push(item)
-      })
-      return columns
-    },
-    spreadButton: function () {
-      return this.buttonList.slice(0,3)
-    },
-    dropDownButton: function () {
-      return this.buttonList.slice(3 - this.buttonList.length)
-    },
-  },
-  watch:{
-    form: function(val) {
-      this.queryForm = val
-    }
-  },
-  created() {
-  },
-  methods: {
-    doClick(item){
-      let self = this;
-      if(item.clickEvent?.type==="route"){
-        // self.$Message.info(item.clickEvent.name)
-        let query = item.clickEvent?.route?.keys?.reduce((acc,sourceItem)=>{
-          return Object.assign(acc,{[sourceItem]:param.row[sourceItem]})
-        },{})
-        this.$router.push({
-          path: item.clickEvent?.route?.path,
-          query
-        })
-      }else if(item.clickEvent?.type==="method"){
-        // self.$Message.info(item.clickEvent.name)
-        let param = item.clickEvent?.method?.keys?.reduce((acc,sourceItem)=>{
-          return Object.assign(acc,{[sourceItem]:self.selection[sourceItem]})
-        },{})
-        self.$emit(item.clickEvent?.method?.name,param)
-      }else if(item.clickEvent?.type==="modal"){
-        self.$Message.info(item.clickEvent.name)
-      }
-    },
-    doSearch: function () {
-      this.tableSearchParams = Object.assign({}, this.queryForm)
-    },
-    onReset() {
-      this.doSearch()
-    },
-    fetch: function (request,response) {
-      let self = this
-      let options = {
-        url: request.url,
-        method: request.method,
-        [request.method==='GET'?"params":"data"]:request.param
-      }
-      ajax.request(options).then(function (resp) {
-        // todo 判断返回码
-        self.$Message.success(response.successMsg)
-        self.doSearch()
-      }).catch(function (err) {
-        console.error(err)
-        self.$Message.error(response.errorMsg)
-      })
-    },
-    /**
-     *
-     * @param row
-     * @param index
-     */
-    onRowClick: function (row, index) {
-      this.selectOnChange(row, index);
-    },
-    //单选
-    selectOnChange: function (row, index) {
-      this.selection = Array(index).fill(false);
-      this.selection.splice(index, 1, true);
-      this.selectStore = [row];
-    },
-    //多选
-    onSelectionChange: function (rows) {
-      if (!this.rowKey) {
-        this.selectStore = rows;
-      } else {
-        this.selectStore = rows;
-        if (rows && rows.length > 0) {
-          for (let i = 0; i < rows.length; i++) {
-            let row = rows[i];
-            if (!this.selectTags.some(item => item.key === row[this.rowKey])) {
-              let tagItem = {"key": row[this.rowKey], "value": row[this.rowName]}
-              this.selectTags.push(tagItem);
-            }
-          }
-        }
-      }
-    },
-    onSelect: function (selection, row) {
-      if (this.rowKey) {
-        this.selectRows[row[this.rowKey]] = row;
-      }
-    },
-    onSelectCancel: function (selection, row) {
-      if (this.rowKey) {
-        delete this.selectRows[row[this.rowKey]];
-        const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === row[this.rowKey])
-        if (selectIndex > -1) {
-          this.selectTags.splice(selectIndex, 1);
-        }
-      }
-    },
-    onSelectAll: function (selection) {
-      if (this.rowKey) {
-        for (let item of selection) {
-          this.selectRows[item[this.rowKey]] = item;
-        }
-      }
-    },
-    onSelectAllCancel: function () {
-      if (this.rowKey) {
-        let currentTableData = this.$refs.schemaPagingTable.$data.tableData;
-        for (let i = 0; i < currentTableData.length; i++) {
-          let tempData = currentTableData[i][this.rowKey];
-          delete this.selectRows[tempData];
-          const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === tempData)
-          if (selectIndex > -1) {
-            this.selectTags.splice(selectIndex, 1);
-          }
-        }
-      }
-    },
-    transformResponse: function (resp) {
-      if (this.rowKey) {
-        let self = this;
-        if (resp.code === 1 || resp.code === "000") {
-          let tableData = resp.data.rows;
-          for (let i = 0; i < tableData.length; i++) {
-            if (self.selectRows[tableData[i][self.rowKey]]) {
-              tableData[i]._checked = true;
-            }
-          }
-          resp.data.rows = tableData;
-        }
-      }
-      return resp;
-    },
-    clearSelectData: function () {
-      this.selection = [];//清空已选项
-      this.selectStore = [];//清空已选数据
-      this.selectRows = [];//清空已选数据
-      this.selectTags = [];//清空所选标签
-      this.selectedKeys = [];//清空默认选择
-    },
-    tagClose: function (event, name) {
-      const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === name)
-      const dataIndex = (this.$refs.schemaPagingTable.$data.tableData || []).findIndex((selectItem) => selectItem[this.rowKey] === name)
-      if (selectIndex > -1) {
-        this.selectTags.splice(selectIndex, 1);
-        this.selectStore.splice(selectIndex, 1);
-      }
-      delete this.selectRows[name];
-      if (dataIndex > -1) {
-        this.$refs.schemaPagingTable.$refs.tableRef.toggleSelect(dataIndex);
-      }
-    },
-    getSelection(){
-      if (this.selectRows.length > 0 && this.rowKey) {
-        let selectStore = [];
-        for (let item in this.selectRows) {
-          selectStore.push(this.selectRows[item]);
-        }
-        this.selectStore = selectStore;
-      }
-      return this.selectStore
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.lambo-grid-table {
-  /deep/.ivu-form {
-    .ivu-form-item {
-      display: block !important;
-    }
-  }
-}
-.tags {
-  margin: 10px auto;
-}
-</style>
-
+<template>
+  <LamboPagingTable
+    ref="schemaPagingTable"
+    :dataUrl="dataUrl"
+    :data="data"
+    :columns="tableColumn"
+    :autoSearch="autoSearch"
+    :searchParams="tableSearchParams"
+    :transformResponse="transformResponse"
+    :showTableOption="showTableOption"
+    :buttonFlex="buttonFlex"
+    :pageDisable="pageDisable"
+    :radioSelectIndex="radioSelectIndex"
+    @on-row-click="onRowClick"
+    @on-selection-change="onSelectionChange"
+    @on-select="onSelect"
+    @on-select-cancel="onSelectCancel"
+    @on-select-all="onSelectAll"
+    @on-select-all-cancel="onSelectAllCancel">
+    <div slot="search">
+      <LamboSchemaForm
+        ref="lamboSchemaForm"
+        v-model="queryForm"
+        :form-type="'search'"
+        :fieldList="formFields"
+        :labelWidth="labelWidth"
+        :default-rows="2"
+        :grid-columns="gridColumns"
+        :customComponents="customComponents"
+        :customValidates="customValidates"
+        @doSearch="doSearch" @reset="onReset"/>
+      <div v-if="rowName && selectTags.length > 0">
+        <Tag v-for="item in selectTags" :key="item.key" :name="item.key" closable @on-close="tagClose">
+          {{ item.value }}
+        </Tag>
+      </div>
+      <div v-else-if="rowName && selectTags.length === 0" style="height: 26px">
+        无选中数据
+      </div>
+    </div>
+    <Row slot="buttons" type="flex" justify="space-between" :wrap="false">
+      <Col flex="auto" ref="container" :class="totalButtons.length > buttonsInFirstRow ? collapsed  ? 'buttons-hidden' : '' : ''">
+        <Row type="flex" :justify="buttonFlex">
+          <Button
+            ref="buttons"
+            v-if="dropDownButton.length > 0"
+            v-for="(item,index) in dropDownButton"
+            type="primary"
+            :ghost="true"
+            :icon="item.icon"
+            v-permission="item.permission"
+            :key="index"
+            @click="doClick(item)"
+            :class="buttonShowClass">
+            {{ item.name }}
+          </Button>
+        </Row>
+      </Col>
+      <Col flex="0 1 77px" v-if="totalButtons.length > buttonsInFirstRow">
+        <Button type="text" class="more-btn" @click=setCollapse>
+          {{collapsed ?'展开':'收起'}}
+          <Icon :type="collapsed ? 'ios-arrow-down' : 'ios-arrow-up'"></Icon>
+        </Button>
+      </Col>
+    </Row>
+  </LamboPagingTable>
+</template>
+<script>
+import ajax from '@lambo-design/shared/utils/ajax'
+import {operateBtn, operateHref, operateMore} from '@lambo-design/shared/utils/assist'
+import LamboPagingTable from '@lambo-design/paging-table'
+// import LamboSchemaForm from '@lambo-design/schema-form'
+// const LamboSchemaForm = ()=> import('@lambo-design/schema-form')
+export default {
+  name:"schema-paging-table",
+  components: {
+    LamboSchemaForm: () => import('@lambo-design/schema-form'),
+    LamboPagingTable,
+  },
+  data() {
+    return {
+      buttonsInFirstRow:0,
+      totalButtons:0,
+      collapsed:true,
+      queryForm: {},
+      tableSearchParams: {},
+      selection: [],
+      selectTags: [],
+      selectRows: [],
+      selectedKeys: [],
+      radioSelectIndex: -1,
+      selectCondition:''
+    }
+  },
+  props:{
+    dataUrl:{
+      type: String,
+      required: true,
+      default: ''
+    },
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    autoSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    columnList: {
+      type: Array,
+      required: true,
+      default(){
+        return []
+      }
+    },
+    showTableOption: {
+      type: Boolean,
+      default: true
+    },
+    buttonFlex: {
+      type: String,
+      default () {
+        return 'start';
+      },
+      validator(value) {
+        return ['start', 'end'].indexOf(value) > -1;
+      }
+    },
+    //是否禁用分页
+    pageDisable: {
+      type: Boolean,
+      default: false
+    },
+    rowKey: {
+      type: String,
+      require: false,
+      default: ""
+    },
+    rowName: {
+      type: String,
+      require: false,
+      default: ""
+    },
+    labelWidth: {
+      type: Number,
+      require: false,
+      default: 100
+    },
+    operColumnDropdownNum: {
+      type: Number,
+      require: false,
+      default: 2
+    },
+    form:{
+      type: Object,
+      required: true,
+      default(){
+        return {}
+      }
+    },
+    formFields:{
+      type: Array,
+      required: true,
+      default(){
+        return []
+      }
+    },
+    buttonList:{
+      type: Array,
+      required: true,
+      default(){
+        return []
+      }
+    },
+    gridColumns:{
+      type: Number,
+      default: 4
+    },
+    customComponents: Object,
+    customValidates: Object,
+    //父组件回填已选中的值
+    selectedKey: {
+      type: Array,
+      require: false,
+      default: () => {return []}
+    }
+  },
+  computed: {
+    tableColumn: function () {
+      let columns = []
+      let self = this
+      self.columnList.forEach((item,index)=>{
+        let obj = item
+        if(obj.hasOwnProperty("enums") && obj.hasOwnProperty("translate") && obj.translate === 'enums'){
+          obj.render = function (h, param) {
+            let state = param.row[obj.key]
+            return h('span', obj.enums[state])
+          }
+        } else if (obj.hasOwnProperty("type") && obj.type === "status" && obj.statusList){
+          obj.render = function (h, param) {
+            let label = "";
+            let tagColor = "";
+            obj.statusList.forEach(item => {
+              if(item.statusKey === param.row[obj.key]){
+                label = item.statusValue;
+                tagColor = item.color ? item.color : item.customColor;
+              }
+            })
+            if(label){
+              return h('Tag', {
+                props: {
+                  color: tagColor
+                }
+              }, label);
+            }
+          }
+        } else if(obj.hasOwnProperty("type") && obj.type === "operate"){
+          obj.render = (h, param) => {
+            let visibleDomsd = [];
+            let dropdownDomsd = [];
+            obj.button.map((item, index) => {
+              const conditionMet = item && typeof item.condition === "function" ? item.condition(param) : true;
+              const execConditionMet = item && typeof item.execCondition === "function" ? item.execCondition(param) : true;
+              if(conditionMet){
+                let doms
+                if (!execConditionMet) {
+                  doms = item.name ? item.name : param.row[obj.key]
+                } else {
+                  doms = operateHref(self, h, param.row, item.name || param.row[obj.key], (vm, currentRow) => {
+                    if (item.clickEvent?.type === "route") {
+                      // self.$Message.info(item.clickEvent.name)
+                      let query = item.clickEvent?.route?.keys?.reduce((acc, sourceItem) => {
+                        return Object.assign(acc, {[sourceItem]: currentRow[sourceItem]})
+                      }, {})
+                      self.$router.push({
+                        path: item.clickEvent?.route?.path,
+                        query
+                      })
+                    } else if (item.clickEvent?.type === "request") {
+                      // self.$Message.info(item.clickEvent.name)
+                      let data = item.clickEvent?.request?.keys?.reduce((acc, sourceItem) => {
+                        return Object.assign(acc, {[sourceItem]: currentRow[sourceItem]})
+                      }, {})
+                      let request = {
+                        url: item.clickEvent.request.url,
+                        method: item.clickEvent.request.method,
+                        param: data,
+                      }
+                      let response = item.clickEvent.response
+                      if (item.clickEvent.tips) {
+                        let tips = item.clickEvent.tips
+                        this.$Modal.confirm({
+                          title: tips.title,
+                          content: '<p>' + tips.content + '</p>',
+                          onOk: () => {
+                            self.fetch(request, response)
+                          }
+                        });
+                      } else {
+                        self.fetch(request, response)
+                      }
+                    } else if (item.clickEvent?.type === "method") {
+                      if(!item.clickEvent?.method?.keys) {
+                        self.$emit(item.clickEvent?.method?.name, param.index);
+                        return ;
+                      }
+                      let args = item.clickEvent?.method?.keys?.reduce((total, current) => {
+                        return Object.assign(total, {[current]: currentRow[current]})
+                      }, {})
+                      self.$emit(item.clickEvent?.method?.name, args)
+                    } else if (item.clickEvent?.type === "modal") {
+                      self.$Message.info(item.clickEvent.name)
+                    }
+                  }, item.permission)
+                }
+                if (visibleDomsd.length < self.operColumnDropdownNum) {
+                  visibleDomsd.push(doms);
+                } else if (visibleDomsd.length === self.operColumnDropdownNum && dropdownDomsd.length === 0){
+                  dropdownDomsd.push(h('DropdownItem', {}, [visibleDomsd[self.operColumnDropdownNum - 1]]))
+                  dropdownDomsd.push(h('DropdownItem', {}, [doms]))
+                } else {
+                  dropdownDomsd.push(h('DropdownItem', {}, [doms]))
+                }
+              }
+            })
+            if (dropdownDomsd.length !== 0) {
+              visibleDomsd.splice(self.operColumnDropdownNum - 1, 1)
+            }
+            return h('div', {}, [
+              ...visibleDomsd,
+              dropdownDomsd.length !== 0 ? operateMore(self,h,dropdownDomsd) : null
+            ]);
+          }
+        } else if (obj.hasOwnProperty('type') && (obj.type === 'selection'||obj.type === 'single-selection')) {
+          this.selectCondition = item.selectCondition ? item.selectCondition : ''
+        } else if (item.isFlotTip) {
+          obj.render = (h, param) => {
+            return h('span', {
+              style: {
+                display: 'inline-block',
+                width: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+              },
+              domProps: { title: item.name ? item.name : param.row[obj.key] }
+            }, item.name ? item.name : param.row[obj.key])
+          }
+        }
+        columns.push(item)
+      })
+      return columns
+    },
+    dropDownButton: function () {
+      return this.buttonList
+    },
+    multiSelect: function() {
+      return this.columnList.some((item)=>{
+        return item.type === "selection"
+      })
+    },
+    buttonShowClass(){
+      return 'buttons-show-'+this.buttonFlex
+    }
+  },
+  watch: {
+    form: {
+      handler: function (val) {
+        this.tableSearchParams = val
+        this.queryForm = val
+      },
+      deep: true
+    },
+    rowKey: {
+      handler: function () {
+        if(this.rowKey){
+          if (this.selectedKey.length === 0) return
+          this.selectedKeys = this.selectedKey
+          //重置标签
+          this.selectTags = []
+          this.selectRows = []
+          for (let item of this.selectedKeys) {
+            this.selectRows[item[this.rowKey]] = item;
+            let tagItem = {"key": item[this.rowKey], "value": item[this.rowName]}
+            this.selectTags.push(tagItem);
+          }
+        }
+      },
+      immediate:true
+    }
+  },
+  created() {
+    let self = this
+    setTimeout(()=>{
+      self.calculateButtonsInFirstRow();
+    },1000)
+    window.addEventListener('resize', this.calculateButtonsInFirstRow);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calculateButtonsInFirstRow);
+  },
+  methods: {
+    //计算第一行有多少个button，根据父div宽度和每个button的宽度计算
+    calculateButtonsInFirstRow() {
+      let container = this.$refs.container
+      if (!container){return}
+      let containerWidth = container.$el.offsetWidth
+      const buttons = this.$refs.buttons;
+      let totalWidth = 0;
+      let buttonsInFirstRow = 0;
+      for (let i = 0; buttons && i < buttons.length; i++) {
+        totalWidth += buttons[i].$el.offsetWidth + 5
+        if (totalWidth <= containerWidth) {
+          buttonsInFirstRow++;
+        } else {
+          break;
+        }
+      }
+      this.totalButtons = this.dropDownButton
+      this.buttonsInFirstRow = buttonsInFirstRow;
+    },
+    setCollapse: function() {
+      this.collapsed = !this.collapsed
+    },
+    doClick(item){
+      let self = this;
+      if (item.clickEvent?.type === "route") {
+        const routeInfo = item.clickEvent.route;
+        const keysExist = routeInfo.keys && routeInfo.keys.length !== 0;
+        const selection = keysExist ? self.getSelection() : null;
+        if (keysExist && selection.length === 0) {
+          self.$Message.info('请选择一条记录！');
+          return;
+        }
+        if (keysExist && self.multiSelect) {
+          const query = selection.map((select, index) => {
+            if (item.clickEvent?.route?.keys) {
+              let obj = item.clickEvent?.route?.keys?.reduce((acc, sourceItem) => {
+                return Object.assign(acc, {[sourceItem]: select[sourceItem]})
+              }, {})
+              return obj
+            } else {
+              return item
+            }
+          })
+          self.$router.push({ path: routeInfo.path, query })
+        } else {
+          const query = keysExist
+            ? routeInfo.keys.reduce((acc, key) => ({ ...acc, [key]: selection[0][key] }), {})
+            : null;
+          self.$router.push({ path: routeInfo.path, query })
+        }
+      } else if (item.clickEvent?.type === "method") {
+        const methodInfo = item.clickEvent.method;
+        const keysExist = methodInfo.keys && methodInfo.keys.length !== 0;
+        let selection = self.getSelection()
+        if (keysExist && selection.length === 0) {
+          self.$Message.info('请选择一条记录！')
+          return
+        }
+        if (self.multiSelect) {
+          let param = selection.map((select, index) => {
+            if (item.clickEvent?.method?.keys) {
+              let obj = item.clickEvent?.method?.keys?.reduce((acc, sourceItem) => {
+                return Object.assign(acc, {[sourceItem]: select[sourceItem]})
+              }, {})
+              return obj
+            } else {
+              return item
+            }
+          })
+          self.$emit(item.clickEvent?.method?.name, param)
+        } else {
+          if (item.clickEvent?.method?.keys) {
+            let param = item.clickEvent?.method?.keys?.reduce((acc, sourceItem) => {
+              return Object.assign(acc, {[sourceItem]: selection[0][sourceItem]})
+            }, {})
+            self.$emit(item.clickEvent?.method?.name, param)
+          } else {
+            let param = selection[0]
+            self.$emit(item.clickEvent?.method?.name, param)
+          }
+        }
+      }
+    },
+    doSearch: function () {
+      this.tableSearchParams = Object.assign({}, this.queryForm)
+      // 帮助框查询不清空已选择项
+      if (!this.rowName) {
+        this.clearSelectData();
+      }
+    },
+    boxShowSearch: function () {
+      this.tableSearchParams = Object.assign({}, this.queryForm)
+    },
+    onReset() {
+      // Object.assign(this.queryForm, this.$options.propsData.form)
+      this.queryForm = this.$options.propsData.form;
+      this.doSearch()
+    },
+    fetch: function (request,response) {
+      let self = this
+      let options = {
+        url: request.url,
+        method: request.method,
+        [request.method==='GET'?"params":"data"]:request.param
+      }
+      ajax.request(options).then(function (resp) {
+        // todo 判断返回码
+        self.$Message.success(response.successMsg)
+        self.doSearch()
+      }).catch(function (err) {
+        console.error(err)
+        self.$Message.error(response.errorMsg)
+      })
+    },
+    /**
+     *
+     * @param row
+     * @param index
+     */
+    onRowClick: function (row, index) {
+      // 单选触发
+      if (this.$refs.schemaPagingTable.isSingleSelectModel) {
+        this.selectOnChange(row, index);
+      }
+    },
+    //单选
+    selectOnChange: function (row, index) {
+      this.radioSelectIndex = -1
+      this.selection = Array(index).fill(false);
+      this.selection.splice(index, 1, true);
+      this.selectRows = []
+      this.selectRows[row[this.rowKey]] = row
+      this.selectTags = [{"key": row[this.rowKey], "value": row[this.rowName]}]
+    },
+    //多选
+    onSelectionChange: function (rows) {
+      if (this.rowKey) {
+        if (rows && rows.length > 0) {
+          for (let i = 0; i < rows.length; i++) {
+            let row = rows[i];
+            if (!this.selectTags.some(item => item.key === row[this.rowKey])) {
+              let tagItem = {"key": row[this.rowKey], "value": row[this.rowName]}
+              this.selectTags.push(tagItem);
+            }
+          }
+        }
+      }
+    },
+    onSelect: function (selection, row) {
+      if (this.rowKey) {
+        this.selectRows[row[this.rowKey]] = row;
+      }
+    },
+    onSelectCancel: function (selection, row) {
+      if (this.rowKey) {
+        delete this.selectRows[row[this.rowKey]];
+        const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === row[this.rowKey])
+        if (selectIndex > -1) {
+          this.selectTags.splice(selectIndex, 1);
+        }
+      }
+    },
+    onSelectAll: function (selection) {
+      if (this.rowKey) {
+        for (let item of selection) {
+          this.selectRows[item[this.rowKey]] = item;
+        }
+      }
+    },
+    onSelectAllCancel: function () {
+      if (this.rowKey) {
+        let currentTableData = this.$refs.schemaPagingTable.$data.tableData;
+        for (let i = 0; i < currentTableData.length; i++) {
+          let tempData = currentTableData[i][this.rowKey];
+          delete this.selectRows[tempData];
+          const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === tempData)
+          if (selectIndex > -1) {
+            this.selectTags.splice(selectIndex, 1);
+          }
+        }
+      }
+    },
+    transformResponse: function (resp) {
+      if (this.rowKey) {
+        let self = this;
+        self.radioSelectIndex = -1
+        if (resp.code === 1 || resp.code === "000") {
+          let tableData = resp.data.rows;
+          for (let i = 0; i < tableData.length; i++) {
+            if (self.selectCondition && typeof self.selectCondition === "function") {
+              tableData[i]._disabled = !self.selectCondition({row:tableData[i]})
+            }
+            if (self.selectRows[tableData[i][self.rowKey]]) {
+              self.radioSelectIndex = i
+              tableData[i]._checked = true;
+            }
+          }
+          resp.data.rows = tableData;
+        }
+      }
+      return resp;
+    },
+    clearSelectData: function () {
+      this.selection = [];//清空已选项
+      this.selectRows = [];//清空已选数据
+      this.selectTags = [];//清空所选标签
+      this.selectedKeys = [];//清空默认选择
+      this.radioSelectIndex = -1
+    },
+    tagClose: function (event, name) {
+      this.radioSelectIndex = -1
+      const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === name)
+      const dataIndex = (this.$refs.schemaPagingTable.$data.tableData || []).findIndex((selectItem) => selectItem[this.rowKey] === name)
+      if (selectIndex > -1) {
+        this.selectTags.splice(selectIndex, 1);
+      }
+      delete this.selectRows[name];
+      if (dataIndex > -1) {
+        this.$refs.schemaPagingTable.$refs.tableRef.toggleSelect(dataIndex);
+      }
+    },
+    getSelection() {
+      let selectStore = [];
+      if (Object.keys(this.selectRows).length > 0 && this.rowKey) {
+        for (let item in this.selectRows) {
+          selectStore.push(this.selectRows[item]);
+        }
+      }
+      return selectStore
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.lambo-grid-table {
+  /deep/.ivu-form {
+    .ivu-form-item {
+      display: block;
+    }
+  }
+}
+
+.buttons-hidden{
+  height:33px;
+  overflow: hidden;
+}
+
+.buttons-show-start:not(:last-child){
+  margin:0 5px 5px 0
+}
+.buttons-show-end:not(:first-child){
+  margin:0 0 5px 5px
+}
+</style>
+