meixioacomponent 0.3.41 → 0.3.42

package/packages/components/proPageTable/oa_pro_colum_config.vue

@@ -1,112 +1,103 @@
 <template>
-  <el-dropdown
-    slot="suffix"
-    trigger="click"
-    ref="dropdown"
-    @visible-change="setDragConfigList"
+  <base-popover-button
+    iconClass="element"
+    v-model="popoverFlag"
+    @popoverShow="setDragConfigList"
+    buttonIcon="el-icon-s-operation"
   >
-    <el-button
-      type="info"
-      size="small"
-      class="dropdown-button"
-      icon="el-icon-s-operation"
-      plain
-    ></el-button>
-    <el-dropdown-menu slot="dropdown">
-      <div class="config-wrap">
-        <span class="tips-text">显示列表项</span>
-        <div class="config-content">
-          <!-- 显示被固定在头部的列表 -->
-          <div class="fixed">
+    <div class="config-wrap" slot="popoverContent">
+      <span class="tips-text">显示列表项</span>
+      <div class="config-content">
+        <!-- 显示被固定在头部的列表 -->
+        <div class="fixed">
+          <div
+            class="config-item-wrap"
+            :key="index"
+            v-for="(item, index) in lockConfigList"
+          >
+            <div class="item-left" @click="showTableColum(item)">
+              <el-checkbox
+                v-model="item.show"
+                :disabled="item.lock ? true : false"
+              ></el-checkbox>
+              <span class="item-text">{{ item.label }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- 可以拖拽的列表 -->
+
+        <div class="drag">
+          <draggable
+            element="div"
+            v-model="dragConfigList"
+            animation="500"
+            @start="onStart"
+            @end="onEnd"
+          >
             <div
               class="config-item-wrap"
               :key="index"
-              v-for="(item, index) in lockConfigList"
+              v-for="(item, index) in dragConfigList"
             >
-              <div class="item-left" @click="showTableColum(item)">
+              <div class="item-left" @click.self="showTableColum(item)">
                 <el-checkbox
                   v-model="item.show"
-                  :disabled="item.lock?true:false"
+                  :disabled="item.lock"
                 ></el-checkbox>
                 <span class="item-text">{{ item.label }}</span>
               </div>
-            </div>
-          </div>
-          <!-- 可以拖拽的列表 -->
-
-          <div class="drag">
-            <draggable
-              element="div"
-              v-model="dragConfigList"
-              animation="500"
-              @start="onStart"
-              @end="onEnd"
-            >
-              <div
-                class="config-item-wrap"
-                :key="index"
-                v-for="(item, index) in dragConfigList"
-              >
-                <div class="item-left" @click.self="showTableColum(item)">
-                  <el-checkbox
-                    v-model="item.show"
-                    :disabled="item.lock"
-                  ></el-checkbox>
-                  <span class="item-text">{{ item.label }}</span>
-                </div>
-                <div class="item-right">
-                  <base-icon
-                    :name="`meixicomponenticon-tuozhuai`"
-                    :size="`s`"
-                    :color="`m`"
-                  ></base-icon>
-                </div>
+              <div class="item-right">
+                <base-icon
+                  :name="`meixicomponenticon-tuozhuai`"
+                  :size="`s`"
+                  :color="`m`"
+                ></base-icon>
               </div>
-            </draggable>
-          </div>
+            </div>
+          </draggable>
         </div>
-        <baseButtonHandle
-          :align="`end`"
-          :size="`mini`"
-          class="config-footer"
-          :config="handleConfig"
-        ></baseButtonHandle>
       </div>
-    </el-dropdown-menu>
-  </el-dropdown>
+      <baseButtonHandle
+        :align="`end`"
+        :size="`mini`"
+        class="config-footer"
+        :config="handleConfig"
+      ></baseButtonHandle>
+    </div>
+  </base-popover-button>
 </template>
 
 <script>
-import draggable from "vuedraggable";
-
-import baseButtonHandle from "../base/baseButtonHandle/baseButtonHandle.vue";
+import draggable from 'vuedraggable'
+import baseButtonHandle from '../base/baseButtonHandle/baseButtonHandle.vue'
 export default {
   data() {
     return {
+      isDrag: false,
       handleConfig: [],
       dragConfigList: [],
-      isDrag: false,
-    };
+      popoverFlag: false,
+    }
   },
   created() {
     this.handleConfig = [
       {
-        text: "取消",
-        type: "info",
+        text: '取消',
+        type: 'info',
         plain: true,
         click: () => {
-          this.$refs.dropdown.hide();
+          this.popoverFlag = false
         },
       },
       {
-        text: "确定",
-        type: "primary",
+        text: '确定',
+        type: 'primary',
         plain: false,
         click: () => {
-          this.setTableHeaderConfig();
+          this.setTableHeaderConfig()
         },
       },
-    ];
+    ]
   },
   components: {
     draggable,
@@ -121,42 +112,40 @@ export default {
   computed: {
     lockConfigList() {
       return this.$props.config.filter((item) => {
-        return item.lock;
-      });
+        return item.lock
+      })
     },
   },
   methods: {
     onEnd() {
-      this.isDrag = true;
+      this.isDrag = true
     },
     onStart() {},
-    setDragConfigList(event) {
-      if (event) {
-        this.isDrag = false;
-        this.dragConfigList = [];
-        this.dragConfigList = this.$props.config.filter((item) => {
-          return item.key != "noData" && !item.lock;
-        });
-      }
+    setDragConfigList() {
+      this.isDrag = false
+      this.dragConfigList = []
+      this.dragConfigList = this.$props.config.filter((item) => {
+        return item.key != 'noData' && !item.lock
+      })
     },
     showTableColum(item) {
-      if (item.lock) return;
-      item.show = !item.show;
+      if (item.lock) return
+      item.show = !item.show
     },
     setTableHeaderConfig() {
       if (this.isDrag) {
-        this.$emit("setTableHeaderConfig", this.dragConfigList);
+        this.$emit('setTableHeaderConfig', this.dragConfigList)
       }
-      this.$refs.dropdown.hide();
+      this.popoverFlag = false
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
 .config-wrap {
   width: 240px;
-  height: auto;
+  min-height: 66px;
   max-height: 370px;
   background: inherit;
   box-sizing: border-box;
@@ -170,7 +159,7 @@ export default {
   .config-content {
     width: 100%;
     overflow-y: auto;
-    max-height: calc(100% - 46px);
+    max-height: calc(370px - 56px);
     .config-item-wrap {
       width: 100%;
       height: 34px;

package/packages/components/proPageTable/oa_pro_handle_table_border.vue

@@ -8,8 +8,11 @@
       :label="`开启斑马条纹:`"
     >
       <template slot="lineInforSlot">
-        <base-toggle v-model="stripe" :toggleList="toggleList" :size="`min`">
-        </base-toggle>
+        <base-toggle
+          v-model="stripe"
+          :toggleList="toggleList"
+          :size="`min`"
+        ></base-toggle>
       </template>
     </base-line-info-item>
     <base-line-info-item
@@ -24,8 +27,7 @@
           v-model="borderColu"
           :toggleList="toggleList"
           :size="`min`"
-        >
-        </base-toggle>
+        ></base-toggle>
       </template>
     </base-line-info-item>
     <base-line-info-item
@@ -36,100 +38,105 @@
       :label="`开启横向条纹:`"
     >
       <template slot="lineInforSlot">
-        <base-toggle v-model="borderRow" :toggleList="toggleList" :size="`min`">
-        </base-toggle>
+        <base-toggle
+          v-model="borderRow"
+          :toggleList="toggleList"
+          :size="`min`"
+        ></base-toggle>
       </template>
     </base-line-info-item>
   </div>
 </template>
 
 <script>
-import componentConfig from "../../config/componentConfig";
+import componentConfig from '../../config/componentConfig'
 export default {
   data() {
     return {
       tableBorderConfig: null,
       toggleList: [
-        { label: "开启", value: true },
-        { label: "关闭", value: false },
+        { label: '开启', value: true },
+        { label: '关闭', value: false },
       ],
-    };
+    }
   },
   created() {
-    this.init();
+    this.init()
   },
   computed: {
     stripe: {
       set(val) {
-        this.tableBorderConfig.stripe = val;
-        componentConfig.eventBus.$emit("handleTableBorder", {
-          key: "stripe",
+        this.tableBorderConfig.stripe = val
+        componentConfig.eventBus.$emit('handleTableBorder', {
+          key: 'stripe',
           value: val,
-        });
-        this.setLocalStorage();
+        })
+        this.setLocalStorage()
       },
       get() {
-        return this.tableBorderConfig.stripe;
+        return this.tableBorderConfig.stripe
       },
     },
     borderColu: {
       set(val) {
-        this.tableBorderConfig.borderColu = val;
-        componentConfig.eventBus.$emit("handleTableBorder", {
-          key: "borderColu",
+        this.tableBorderConfig.borderColu = val
+        componentConfig.eventBus.$emit('handleTableBorder', {
+          key: 'borderColu',
           value: val,
-        });
-        this.setLocalStorage();
+        })
+        this.setLocalStorage()
       },
       get() {
-        return this.tableBorderConfig.borderColu;
+        return this.tableBorderConfig.borderColu
       },
     },
     borderRow: {
       set(val) {
-        this.tableBorderConfig.borderRow = val;
-        componentConfig.eventBus.$emit("handleTableBorder", {
-          key: "borderRow",
+        this.tableBorderConfig.borderRow = val
+        componentConfig.eventBus.$emit('handleTableBorder', {
+          key: 'borderRow',
           value: val,
-        });
-        this.setLocalStorage();
+        })
+        this.setLocalStorage()
       },
       get() {
-        return this.tableBorderConfig.borderRow;
+        return this.tableBorderConfig.borderRow
       },
     },
   },
   methods: {
     init() {
-      let tableBorderConfig = window.localStorage.getItem("tableBorderConfig");
+      let tableBorderConfig = window.localStorage.getItem('tableBorderConfig')
       if (tableBorderConfig) {
-        this.tableBorderConfig = JSON.parse(tableBorderConfig);
+        this.tableBorderConfig = JSON.parse(tableBorderConfig)
         for (const key in this.tableBorderConfig) {
-          componentConfig.eventBus.$emit("handleTableBorder", {
+          componentConfig.eventBus.$emit('handleTableBorder', {
             key: `${key}`,
             value: this.tableBorderConfig[`${key}`],
-          });
+          })
         }
       } else {
         this.tableBorderConfig = {
           stripe: true,
           borderColu: true,
           borderRow: true,
-        };
+        }
       }
     },
 
     setLocalStorage() {
       window.localStorage.setItem(
-        "tableBorderConfig",
-        JSON.stringify(this.tableBorderConfig)
-      );
+        'tableBorderConfig',
+        JSON.stringify(this.tableBorderConfig),
+      )
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
 .handle-table-border-wrap {
+  box-sizing: border-box;
+  padding: var(--padding-2) var(--padding-4);
 }
 </style>

package/packages/components/proPageTable/oa_pro_table-header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-header" v-show="config.key != 'noData'">
     <div class="table-header-left">
-      <span class="cell-text">{{ scope.column.label }} </span>
+      <span class="cell-text">{{ scope.column.label }}</span>
       <span class="caret-wrapper defind">
         <i class="sort-caret ascending"></i>
         <i class="sort-caret descending"></i>
@@ -15,9 +15,9 @@
         :plain="true"
         :name="lockClass"
         class="lock-icons"
-        :active="config.lock ? true : false"
-        v-if="!isAverageWidth"
         @iconClick="handleClick('lock')"
+        :active="config.lock ? true : false"
+        v-if="!isAverageWidth && config.lock != 'right'"
       ></base-icon>
 
       <base-icon
@@ -30,6 +30,8 @@
         @iconClick="handleClick('screen')"
         v-if="config.screen"
       ></base-icon>
+
+      <slot name="flex-slot" v-if="config.lock == 'right'"></slot>
     </div>
   </div>
 </template>
@@ -39,19 +41,19 @@ export default {
   data() {
     return {
       // preIndex: null,
-    };
+    }
   },
   created() {},
   mounted() {},
   computed: {
     preIndex() {
-      return this.$props.config.preIndex;
+      return this.$props.config.preIndex
     },
     lockClass() {
       if (!this.$props.config.lock) {
-        return "meixicomponenticon-suoding";
+        return 'meixicomponenticon-suoding'
       }
-      return "meixicomponenticon-jiesuo";
+      return 'meixicomponenticon-jiesuo'
     },
   },
   props: {
@@ -69,37 +71,37 @@ export default {
   methods: {
     handleClick(type) {
       switch (type) {
-        case "lock":
-          this.handleLock();
-          break;
-        case "screen":
-          this.handleScreen();
-          break;
+        case 'lock':
+          this.handleLock()
+          break
+        case 'screen':
+          this.handleScreen()
+          break
 
         default:
-          break;
+          break
       }
     },
 
     handleLock() {
       if (!this.$props.config.lock) {
-        this.$emit("headerItemLock", {
+        this.$emit('headerItemLock', {
           preIndex: this.preIndex,
           index: this.$props.index,
-        });
+        })
       } else {
-        this.$emit("headerItemUnlock", {
+        this.$emit('headerItemUnlock', {
           preIndex: this.preIndex,
           index: this.$props.index,
-        });
+        })
       }
     },
 
     handleScreen() {
-      this.$emit("handleScreenItem", this.$props.config);
+      this.$emit('handleScreenItem', this.$props.config)
     },
   },
-};
+}
 </script>
 
 <style lang="less">
@@ -133,7 +135,7 @@ export default {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    color: var(--font-color-m);
+    color: var(--font-color-s);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-g);
   }