update

src/assets/styles/sidebar.scss

@@ -46,14 +46,13 @@
     }
 
     &.has-logo {
-      display: none;
       .el-scrollbar {
         height: calc(100% - 50px);
       }
     }
 
     .is-horizontal {
-      display: none;
+
     }
 
     a {
@@ -111,7 +110,6 @@
 
   .hideSidebar {
     .sidebar-container {
-      display: none;
       width: 54px !important;
     }
 

src/components/super-search/index.vue

@@ -63,6 +63,9 @@ export default {
       const { stroageKey, innerColumns } = this;
       localStorage.setItem(stroageKey, JSON.stringify(innerColumns));
     },
+    onVisible() {
+      this.visible = !this.visible;
+    },
   },
   created() {},
   mounted() {},
@@ -178,57 +181,16 @@ export default {
         >
           重 置
         </el-button>
-        <!-- <el-button
-          :size="$attrs.size"
-          icon="el-icon-setting"
-          @click="drawer = true"
-        >
-        </el-button> -->
       </el-col>
     </el-row>
-    <el-divider>
+    <el-divider class="m-0">
       <i
         v-if="innerColumns.length > 4"
         :class="visible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
         style="cursor: pointer"
-        @click="visible = !visible"
+        @click="onVisible"
       ></i>
     </el-divider>
-    <!-- <el-drawer size="25%" title="操作列" append-to-body :visible.sync="drawer">
-      <el-row :gutter="20" style="margin: 0">
-        <el-draggable
-          v-model="innerColumns"
-          :group="{ item: 'key' }"
-          @change="changeColumns"
-        >
-          <el-col
-            v-for="({ item }, index) in innerColumns"
-            :key="index"
-            :span="24"
-            style="
-              display: flex;
-              justify-content: space-between;
-              padding: 15px 20px;
-            "
-          >
-            <span style="cursor: move">
-              <i class="el-icon-rank"></i>
-              {{ item.title }}
-            </span>
-            <div>
-              <el-radio-group
-                v-model="item.hidden"
-                :size="$attrs.size"
-                @change="changeColumns"
-              >
-                <el-radio-button :label="true">显</el-radio-button>
-                <el-radio-button :label="false">隐</el-radio-button>
-              </el-radio-group>
-            </div>
-          </el-col>
-        </el-draggable>
-      </el-row>
-    </el-drawer> -->
   </el-form>
 </template>
 

src/components/super-table/index.vue

@@ -25,7 +25,7 @@ export default {
     // 是否显示序号
     index: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     // 是否显示单选
     radio: {
@@ -40,17 +40,12 @@ export default {
     // 是否显示分页
     pagination: {
       type: Boolean,
-      default: true,
-    },
-    // 是否显示操作图标
-    iconOperation: {
-      type: Boolean,
-      default: true,
+      default: false,
     },
-    // 是否显示操作按钮
-    buttonOperation: {
+    // 是否列显示
+    hiddenColumns: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     // 是否禁止选择
     selectable: {
@@ -249,11 +244,10 @@ export default {
       v-on="$listeners"
       ref="superTable"
       border
-      :data="innerValue"
       :row-key="rowKey"
-      :row-style="{ height: '50px' }"
+      :data="innerValue"
       :cell-style="onCellStyle"
-      :header-row-style="{ height: '50px' }"
+      :row-style="{ height: '50px' }"
       @row-click="onRowClick"
       @selection-change="onSelectionChange"
     >
@@ -293,7 +287,7 @@ export default {
         show-overflow-tooltip
       >
         <template slot="header" slot-scope="scope">
-          <template v-if="iconOperation">
+          <template>
             <span
               :style="{
                 color:
@@ -336,12 +330,13 @@ export default {
               }"
             ></icon-filter>
             <icon-hide
+              v-if="hiddenColumns"
               v-model="item.hidden"
               class="icon-hide"
               @hide="onHide"
             ></icon-hide>
           </template>
-          <template v-else>{{ item.title }}</template>
+          <!-- <template v-else>{{ item.title }}</template> -->
         </template>
         <template slot-scope="scope">
           <slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
@@ -398,31 +393,24 @@ export default {
       </el-table-column>
     </el-table>
     <div
-      v-if="pagination && buttonOperation"
       style="
-        height: 57px;
+        height: auto;
         display: flex;
         justify-content: space-between;
         align-items: center;
       "
     >
       <div>
-        <template v-show="selectState">
+        <template v-if="checkbox">
           <el-button
-            v-show="selectState"
+            v-if="selectState"
             size="mini"
             @click="selectState = !selectState"
           >
             所有列
           </el-button>
-        </template>
-        <template v-show="!selectState">
-          <button-hide v-model="innerColumns" @hide="onHide"></button-hide>
-          <button-freeze
-            v-model="showColumns"
-            @freeze="onFreeze"
-          ></button-freeze>
           <el-button
+            v-else
             :disabled="!selectData.length"
             size="mini"
             @click="selectState = !selectState"
@@ -431,6 +419,13 @@ export default {
             {{ selectData.length ? ` ：${selectData.length}` : "" }}
           </el-button>
         </template>
+        <template v-if="hiddenColumns">
+          <button-hide v-model="innerColumns" @hide="onHide"></button-hide>
+          <button-freeze
+            v-model="showColumns"
+            @freeze="onFreeze"
+          ></button-freeze>
+        </template>
       </div>
       <pagination
         v-show="!selectState"
@@ -447,6 +442,11 @@ export default {
 <style lang="scss">
 .el-super-table {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  > .el-table {
+    flex: 1;
+  }
 }
 .el-super-table .el-table__header .cell {
   display: flex;

src/layout/components/Navbar.vue

@@ -117,7 +117,6 @@
     position: relative;
     background: #fff;
     box-shadow: 0 1px 4px rgba(0,21,41,.08);
-    display: none;
 
     .hamburger-container {
       line-height: 46px;

src/layout/components/Sidebar/index.vue

@@ -66,6 +66,7 @@ export default {
       return variables;
     },
     isCollapse() {
+      return false;
       return !this.sidebar.opened;
     },
   },

src/layout/components/TagsView/index.vue

@@ -243,8 +243,7 @@ export default {
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-  display: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);  
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;

src/layout/index.vue

@@ -1,16 +1,27 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+  <div
+    :class="classObj"
+    class="app-wrapper"
+    :style="{ '--current-color': theme }"
+  >
     <el-scrollbar>
-      <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-      <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
-      <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-        <div :class="{'fixed-header':fixedHeader}">
-          <navbar/>
-          <tags-view v-if="needTagsView"/>
+      <div
+        v-if="device === 'mobile' && sidebar.opened"
+        class="drawer-bg"
+        @click="handleClickOutside"
+      />
+      <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+      <div
+        :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+        class="main-container"
+      >
+        <div :class="{ 'fixed-header': fixedHeader }">
+          <!-- <navbar /> -->
+          <!-- <tags-view v-if="needTagsView" /> -->
         </div>
-        <app-main/>
-        <right-panel>
-          <settings/>
+        <app-main />
+        <right-panel v-if="dev">
+          <settings />
         </right-panel>
       </div>
     </el-scrollbar>
@@ -18,104 +29,107 @@
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
-import variables from '@/assets/styles/variables.scss'
+import RightPanel from "@/components/RightPanel";
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
+import { mapState } from "vuex";
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'Layout',
+  name: "Layout",
   components: {
     AppMain,
     Navbar,
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
   },
   mixins: [ResizeMixin],
   computed: {
     ...mapState({
-      theme: state => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
+      theme: (state) => state.settings.theme,
+      sideTheme: (state) => state.settings.sideTheme,
+      sidebar: (state) => state.app.sidebar,
+      device: (state) => state.app.device,
+      needTagsView: (state) => state.settings.tagsView,
+      fixedHeader: (state) => state.settings.fixedHeader,
     }),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
+        mobile: this.device === "mobile",
+      };
     },
     variables() {
       return variables;
-    }
+    },
+    dev() {
+      return process.env.NODE_ENV === "development";
+    },
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
-    }
-  }
-}
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-
-    .el-scrollbar{
-      height: 100%;
-    }
-
-    ::v-deep .el-scrollbar__wrap {
-      overflow-x: hidden;
-    }
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
+  .el-scrollbar {
+    height: 100%;
   }
 
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
+  ::v-deep .el-scrollbar__wrap {
+    overflow-x: hidden;
   }
 
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

src/views/purchase/catalogue/index.vue

@@ -25,7 +25,7 @@ export default {
       selectData: [],
       TableColumns: TableColumns,
       SearchColumns: SearchColumns,
-      page: { pageNum: 1, pageSize: 10, total: 0 },
+      page: { pageNum: 1, pageSize: 20, total: 0 },
     };
   },
   computed: {},
@@ -91,7 +91,7 @@ export default {
       @reset="useReset"
       @submit="useQuery(params, page)"
     ></el-super-search>
-    <div style="margin: 0 0 20px 0; text-align: right">
+    <div class="my-4" style="text-align: right">
       <el-button-group>
         <ena-button
           :size="size"
@@ -135,24 +135,14 @@ export default {
       v-model="tableData"
       :size="size"
       :dict="dict"
+      :page="page"
       :columns="TableColumns"
-      stroage
-      hideOperationColumns
+      checkbox
       @row-dblclick="useSee"
       @selection-change="useSelect"
+      @pagination="useQuery(params, page)"
     >
-      <el-table-column fixed width="55" align="center" label="#" prop="$index">
-      </el-table-column>
-      <el-table-column fixed width="55" align="center" type="selection">
-      </el-table-column>
     </el-super-table>
-    <pagination
-      :total="page.total"
-      :page.sync="page.pageNum"
-      :limit.sync="page.pageSize"
-      @pagination="useQuery(params, page)"
-      style="height: 32px; margin: 20px 0 0 0; padding: 0 !important"
-    />
   </el-card>
 </template>
 <style scoped lang="scss">

src/views/purchase/task/index.vue

@@ -19,6 +19,7 @@ export default {
     const { TableColumns, SearchColumns } = useColumns();
     const params = this.$init.params(SearchColumns);
     return {
+      key: 0,
       size: "mini",
       loading: false,
       params: params,
@@ -26,7 +27,7 @@ export default {
       selectData: [],
       TableColumns: TableColumns,
       SearchColumns: SearchColumns,
-      page: { pageNum: 1, pageSize: 10, total: 0 },
+      page: { pageNum: 1, pageSize: 20, total: 0 },
     };
   },
   computed: {},
@@ -49,15 +50,12 @@ export default {
     async fetchList(prop, page) {
       try {
         this.loading = true;
+        this.tableData = [];
         const { pageNum, pageSize } = page;
         const { code, rows, total } = await LIST(prop, { pageNum, pageSize });
         if (code === 200) {
-          this.tableData = rows.map((item, index) => ({
-            ...item,
-            $index: (pageNum - 1) * pageSize + index + 1,
-          }));
+          this.tableData = rows;
           this.page.total = total;
-          console.log("selectData", this.selectData);
         }
       } catch (err) {
         // catch
@@ -94,13 +92,12 @@ export default {
     // 重 置
     useReset() {
       this.page.pageNum = 1;
-      this.page.pageSize = 10;
+      this.page.pageSize = 20;
       this.params = this.$init.params(this.SearchColumns);
       this.useQuery(this.params, this.page);
     },
     // 选 择
     useSelect(prop, value) {
-      console.log(prop, value);
       this.selectData = prop;
     },
     // 明 细
@@ -118,7 +115,15 @@ export default {
 </script>
 
 <template>
-  <el-card v-loading="loading" :body-style="{ padding: 0 }">
+  <el-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
     <el-super-search
       v-model="params"
       :size="size"
@@ -126,8 +131,9 @@ export default {
       :columns="SearchColumns"
       @reset="useReset"
       @submit="useQuery(params, page)"
+      @aaa="useQuery(params, page)"
     ></el-super-search>
-    <div style="margin: 0 0 16px 0; text-align: right">
+    <div class="my-4" style="text-align: right">
       <el-button-group>
         <thxq-button
           :size="size"
@@ -166,15 +172,20 @@ export default {
       </el-button-group>
     </div>
     <el-super-table
+      :key="key"
       v-model="tableData"
       :size="size"
       :dict="dict"
+      :page="page"
       :columns="TableColumns"
       :selectable="setSelectable"
+      index
       checkbox
+      hiddenColumns
+      height="100%"
       @row-select="useSelect"
-      :page="page"
       @pagination="useQuery(params, page)"
+      style="flex: 1"
     >
     </el-super-table>
   </el-card>
@@ -182,7 +193,7 @@ export default {
 <style scoped lang="scss">
 .el-card {
   width: calc(100% - 32px);
-  height: 100%;
+  height: calc(100vh - 32px);
   margin: 16px;
   padding: 16px;
   border-radius: 8px;