优化代码

packages/layout/src/layout-button-group.vue

@@ -13,17 +13,21 @@
         v-hasPermi="item.hasPermi"
       >{{ item.label }}</el-button>
     </el-col>
-    <right-toolbar :showSearch.sync="showSearch" @queryTable="$emit('on-search')"></right-toolbar>
+    <LayoutRightToolbar :show-button-visible="showButtonVisible" :showSearch.sync="showSearch" @queryTable="$emit('on-search')"></LayoutRightToolbar>
   </el-row>
 </template>
 
 <script>
+import LayoutRightToolbar from './layout-right-toolbar'
 export default {
+  components: {
+    LayoutRightToolbar,
+  },
   props: {
     props: {
-      type: Array,
+      type: null,
       default: () => {
-        return []
+        return undefined
       },
     },
     // 选中的数据
@@ -33,6 +37,11 @@ export default {
         return []
       },
     },
+    // 是否显示“显示、隐藏”按钮
+    showButtonVisible: {
+      type: Boolean,
+      default: true,
+    },
   },
   watch: {
     showSearch() {
@@ -41,7 +50,7 @@ export default {
   },
   computed: {
     buttonGroup() {
-      const buttonGroup = this.props.length ? this.props : this.init().getDefaultButtonGroup()
+      const buttonGroup = (this.props && this.props !== undefined) ? this.props : this.init().getDefaultButtonGroup()
       this.init().buttonGroup(buttonGroup)
       return buttonGroup
     },

packages/layout/src/layout-right-toolbar.vue

+<template>
+  <div class="top-right-btn">
+    <el-row>
+      <el-tooltip v-if="showButtonVisible" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
+        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
+      </el-tooltip>
+    </el-row>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-transfer
+        :titles="['显示', '隐藏']"
+        v-model="value"
+        :data="columns"
+        @change="dataChange"
+      ></el-transfer>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "RightToolbar",
+  data() {
+    return {
+      // 显隐数据
+      value: [],
+      // 弹出层标题
+      title: "显示/隐藏",
+      // 是否显示弹出层
+      open: false,
+    };
+  },
+  props: {
+    showButtonVisible: {
+      type: Boolean,
+      default: true,
+    },
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    columns: {
+      type: Array,
+    },
+  },
+  created() {
+    // 显隐列初始默认隐藏列
+    for (let item in this.columns) {
+      if (this.columns[item].visible === false) {
+        this.value.push(parseInt(item));
+      }
+    }
+  },
+  methods: {
+    // 搜索
+    toggleSearch() {
+      this.$emit("update:showSearch", !this.showSearch);
+    },
+    // 刷新
+    refresh() {
+      this.$emit("queryTable");
+    },
+    // 右侧列表元素变化
+    dataChange(data) {
+      for (let item in this.columns) {
+        const key = this.columns[item].key;
+        this.columns[item].visible = !data.includes(key);
+      }
+    },
+    // 打开显隐列dialog
+    showColumn() {
+      this.open = true;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-transfer__button {
+  border-radius: 50%;
+  padding: 12px;
+  display: block;
+  margin-left: 0px;
+}
+::v-deep .el-transfer__button:first-child {
+  margin-bottom: 10px;
+}
+</style>

packages/layout/src/layout.vue

@@ -4,31 +4,31 @@
       :body-style="bodyStyle"
       class="app-layout"
       shadow="never">
-      <div v-if="$slots.header || queryForm" class="header">
-        <template v-if="queryForm">
-          <!-- 查询条件相关组件 -->
-          <LqQueryForm v-if="showSearch" ref="queryForm" :props="queryForm" @on-query="(params) => getTableData(params)">
-            <template v-for="item in queryForm.formItem.filter(i => i.type == 'slot')" #[item.slotName]="{ data, $index }">
-              <slot :name="item.slotName" :data="data" :index="$index"/>
-            </template>
-          </LqQueryForm>
-          <!-- 操作按钮相关组件 -->
-          <LqButtonGroup
-            ref="buttonGroup"
-            :props="buttonGroup"
-            :selection="selection"
-            @on-show-search="(e) => {showSearch = e}"
-            @on-search="getTableData"
-            @on-create="$refs.form.show({ form: {} })"
-            @on-update="$refs.form.show({ form: selection[0] })"
-            @on-delete="handler().remove()"
-            @on-export="handler().export()">
-            <template v-for="item in buttonGroup.filter(i => i.type == 'slot')" #[item.slotName]="{ data, $index }">
-              <slot :name="item.slotName" :data="data" :index="$index"/>
-            </template>
-          </LqButtonGroup>
-        </template>
+      <div v-if="showHeader" class="header">
+        <!-- 查询条件相关组件 -->
+        <LqQueryForm v-if="showQueryForm" ref="queryForm" :props="queryForm" @on-query="(params) => getTableData(params)">
+          <template v-for="item in queryForm.formItem.filter(i => i.type == 'slot')" #[item.slotName]="{ data, $index }">
+            <slot :name="item.slotName" :data="data" :index="$index"/>
+          </template>
+        </LqQueryForm>
         <slot v-else name="header"/>
+        <!-- 操作按钮相关组件 -->
+        <LqButtonGroup
+          v-if="$slots.header === undefined"
+          ref="buttonGroup"
+          :props="buttonGroup"
+          :selection="selection"
+          :show-button-visible="(!!queryForm && queryForm.formItem.length > 0)"
+          @on-show-search="(e) => {showSearch = e}"
+          @on-search="getTableData"
+          @on-create="$refs.form.show({ form: {} })"
+          @on-update="$refs.form.show({ form: selection[0] })"
+          @on-delete="handler().remove()"
+          @on-export="handler().export()">
+          <template v-if="buttonGroup" v-for="item in buttonGroup.filter(i => i.type == 'slot')" #[item.slotName]="{ data, $index }">
+            <slot :name="item.slotName" :data="data" :index="$index"/>
+          </template>
+        </LqButtonGroup>
       </div>
       <div ref="content" class="content">
         <!-- 左侧区域 -->
@@ -40,7 +40,7 @@
         <!-- 内容区域 -->
         <div class="content">
           <!-- 自定义table组件 -->
-          <LqLayoutTable ref="table" v-if="table.show !== false" :primary-key="primaryKey" :list-api="api.list" :props="table" :params="tableParams" @selectRow="(e) => {$emit('selectRow', e); selection = e}">
+          <LqLayoutTable ref="table" v-if="table.show !== false" :primary-key="primaryKey" :list-api="listApi" :props="table" :params="tableParams" @selectRow="(e) => {$emit('selectRow', e); selection = e}">
             <template v-for="column in table.columns.filter(i => i.type == 'slot')" #[column.slotName]="{ data, $index }">
               <slot :name="column.slotName" :data="data" :index="$index"/>
             </template>
@@ -328,7 +328,7 @@ export default {
     },
     // 搜索参数
     buttonGroup() {
-      return this.props.buttonGroup || []
+      return this.props.buttonGroup
     },
     formData() {
       return this.props.formData || {}
@@ -336,6 +336,23 @@ export default {
     api() {
       return  this.props.api || {}
     },
+    listApi() {
+      let { list: apiData, base } = this.api
+      apiData = apiData ?? {
+        api: `${base}/getPageList`,
+        method: 'get',
+      }
+      apiData.method = apiData.method || 'post'
+      return apiData
+    },
+    // 是否显示header板块
+    showHeader() {
+      return this.$slots.header !== undefined || this.queryForm || this.buttonGroup || this.buttonGroup === undefined
+    },
+    // 是否显示查询条件
+    showQueryForm() {
+      return this.queryForm && this.showSearch
+    },
   },
   watch: {
     total() {