@lambo-design/schema-paging-table 1.0.0-beta.16 → 1.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/schema-paging-table",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.18",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,10 +10,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.113",
+    "@lambo-design/core": "^4.7.1-beta.114",
+    "@lambo-design/paging-table": "^1.0.0-beta.73",
     "@lambo-design/shared": "^1.0.0-beta.100",
-    "@lambo-design/schema-form": "^1.0.0-beta.40",
-    "@lambo-design/paging-table": "^1.0.0-beta.72"
+    "@lambo-design/schema-form": "^1.0.0-beta.40"
   },
   "scripts": {}
 }

package/src/index.vue

@@ -1,64 +1,57 @@
 <template>
   <LamboPagingTable
-    ref="schemaPagingTable"
-    :dataUrl="dataUrl"
-    :columns="tableColumn"
-    :searchParams="tableSearchParams"
-    :transformResponse="transformResponse"
-    :showTableOption="showTableOption"
-    @on-row-click="onRowClick"
-    @on-selection-change="onSelectionChange"
-    @on-select="onSelect"
-    @on-select-cancel="onSelectCancel"
-    @on-select-all="onSelectAll"
-    @on-select-all-cancel="onSelectAllCancel">
+      ref="schemaPagingTable"
+      :dataUrl="dataUrl"
+      :columns="tableColumn"
+      :searchParams="tableSearchParams"
+      :transformResponse="transformResponse"
+      :showTableOption="showTableOption"
+      @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"/>
+          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" 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
+    <div slot="buttons" style="display: flex">
+      <div ref="container" :class="collapsed ? 'buttons-hidden' : ''" style="width: 100%">
+        <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"
-          >
-            <Icon :type="item.icon" style="margin-right: 5px"></Icon>
-            <span @click="doClick(item)">{{ item.name }}</span>
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
+            @click="doClick(item)"
+            style="margin:0 5px 5px 0">
+          {{ item.name }}
+        </Button>
+      </div>
+      <div>
+        <Button v-if="totalButtons.length > buttonsInFirstRow" type="text" class="more-btn" @click=setCollapse>
+          {{collapsed ?'展开':'收起'}}
+          <Icon :type="collapsed ? 'ios-arrow-down' : 'ios-arrow-up'"></Icon>
+        </Button>
+      </div>
     </div>
   </LamboPagingTable>
 </template>
@@ -76,6 +69,9 @@ export default {
   },
   data() {
     return {
+      buttonsInFirstRow:0,
+      totalButtons:0,
+      collapsed:true,
       queryForm: {},
       tableSearchParams: {},
       selection: [],
@@ -159,58 +155,58 @@ export default {
         }else if(obj.hasOwnProperty("type") && obj.type === "operate"){
           obj.render = (h, param) => {
             return h('div',
-              obj.button.map((item,index)=>{
-                let 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,
+                obj.button.map((item,index)=>{
+                  let 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"){
+                      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)
                     }
-                    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"){
-                    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)
+                  },item.permission)
 
-                if(item && typeof item.condition == "function"){
-                  if(item.condition(param)){
+                  if(item && typeof item.condition == "function"){
+                    if(item.condition(param)){
+                      return doms
+                    }
+                  }else{
                     return doms
                   }
-                }else{
-                  return doms
-                }
-              })
+                })
             )
           }
         }
@@ -218,11 +214,13 @@ export default {
       })
       return columns
     },
-    spreadButton: function () {
-      return this.buttonList.slice(0,3)
-    },
+    // spreadButton: function () {
+    //   return this.buttonList.slice(0,3)
+    // },
     dropDownButton: function () {
-      return this.buttonList.slice(3 - this.buttonList.length)
+      // let list =  [...this.buttonList,...this.buttonList]
+      // return list.splice(0,7)
+      return this.buttonList
     },
     multiSelect: function() {
       return this.columnList.some((item)=>{
@@ -236,8 +234,42 @@ export default {
     }
   },
   created() {
+    let self = this
+    setTimeout(()=>{
+      self.calculateButtonsInFirstRow();
+    },500)
+    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 = ''
+      if (container.offsetWidth === undefined){
+      }
+      containerWidth = container.offsetWidth
+      const buttons = this.$refs.buttons;
+      let totalWidth = 0;
+      let buttonsInFirstRow = 0;
+      for (let i = 0; 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"){
@@ -282,7 +314,8 @@ export default {
       this.tableSearchParams = Object.assign({}, this.queryForm)
     },
     onReset() {
-      Object.assign(this.queryForm, this.$options.propsData.form)
+      // Object.assign(this.queryForm, this.$options.propsData.form)
+      this.queryForm = this.$options.propsData.form;
       this.doSearch()
     },
     fetch: function (request,response) {
@@ -424,5 +457,9 @@ export default {
 .tags {
   margin: 10px auto;
 }
+.buttons-hidden{
+  height:33px;
+  overflow: hidden;
+}
 </style>