@lambo-design/schema-paging-table 1.0.0-beta.47 → 1.0.0-beta.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/schema-paging-table",
-  "version": "1.0.0-beta.47",
+  "version": "1.0.0-beta.49",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "standard-version": "^9.5.0",
-    "@lambo-design/core": "^4.7.1-beta.145",
-    "@lambo-design/shared": "^1.0.0-beta.220",
     "@lambo-design/schema-form": "^1.0.0-beta.72",
-    "@lambo-design/paging-table": "^1.0.0-beta.84"
+    "@lambo-design/paging-table": "^1.0.0-beta.85",
+    "@lambo-design/shared": "^1.0.0-beta.220",
+    "@lambo-design/core": "^4.7.1-beta.145"
   },
   "scripts": {
     "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/index.vue

@@ -1,43 +1,47 @@
 <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">
+    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">
+        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>
-    <div slot="buttons" style="display: flex">
-      <div ref="container" :class="totalButtons.length > buttonsInFirstRow ? collapsed  ? 'buttons-hidden' : '' : ''" style="width: 100%">
-        <Button
+    <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"
@@ -47,17 +51,18 @@
             v-permission="item.permission"
             :key="index"
             @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>
+            :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>
-      </div>
-    </div>
+      </Col>
+    </Row>
   </LamboPagingTable>
 </template>
 <script>
@@ -291,18 +296,16 @@ export default {
       })
       return columns
     },
-    // spreadButton: function () {
-    //   return this.buttonList.slice(0,3)
-    // },
     dropDownButton: function () {
-      // let list =  [...this.buttonList,...this.buttonList]
-      // return list.splice(0,7)
       return this.buttonList
     },
     multiSelect: function() {
       return this.columnList.some((item)=>{
         return item.type === "selection"
       })
+    },
+    buttonShowClass(){
+      return 'buttons-show-'+this.buttonFlex
     }
   },
   watch: {
@@ -348,10 +351,7 @@ export default {
     calculateButtonsInFirstRow() {
       let container = this.$refs.container
       if (!container){return}
-      let containerWidth = ''
-      if (container.offsetWidth === undefined){
-      }
-      containerWidth = container.offsetWidth
+      let containerWidth = container.$el.offsetWidth
       const buttons = this.$refs.buttons;
       let totalWidth = 0;
       let buttonsInFirstRow = 0;
@@ -366,7 +366,6 @@ export default {
       this.totalButtons = this.dropDownButton
       this.buttonsInFirstRow = buttonsInFirstRow;
     },
-
     setCollapse: function() {
       this.collapsed = !this.collapsed
     },
@@ -394,8 +393,8 @@ export default {
           self.$router.push({ path: routeInfo.path, query })
         } else {
           const query = keysExist
-              ? routeInfo.keys.reduce((acc, key) => ({ ...acc, [key]: selection[0][key] }), {})
-              : null;
+            ? routeInfo.keys.reduce((acc, key) => ({ ...acc, [key]: selection[0][key] }), {})
+            : null;
           self.$router.push({ path: routeInfo.path, query })
         }
       } else if (item.clickEvent?.type === "method") {
@@ -588,5 +587,12 @@ export default {
   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>