meixioacomponent 0.3.97 → 0.4.0

package/lib/style/element/index.css

@@ -9310,6 +9310,8 @@
   bottom: 0px;
   width: 100%;
   height: 14px;
+  z-index: 1;
+  pointer-events: none;
   background: transparent !important;
   border-top: 1px solid var(--color-table-border);
   border-bottom: 1px solid var(--color-table-border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.3.97",
+  "version": "0.4.00",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/baseToggle/toggle.vue

@@ -5,6 +5,7 @@
       @click="handletoggle(item)"
       class="toggle-item-wrap"
       :class="{
+        disabled: disabled,
         selected: item.value == module,
       }"
       v-for="(item, index) in toggleList"
@@ -12,9 +13,9 @@
       <base-icon
         :size="`l`"
         :color="`s`"
-        :event="true"
         v-if="item.icon"
         :name="item.icon"
+        :event="disabled ? false : true"
         @iconClick="handletoggle(item)"
       ></base-icon>
       <span v-else>{{ item.label }}</span>
@@ -43,6 +44,11 @@ export default {
     beforeHandle: {
       type: Function,
     },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     module: {
@@ -56,6 +62,8 @@ export default {
   },
   methods: {
     handletoggle(item) {
+      const { disabled } = this.$props
+      if (disabled) return
       const { beforeHandle } = this.$props
       if (beforeHandle) {
         beforeHandle(() => {
@@ -106,6 +114,21 @@ export default {
     background: var(--bg-white);
     box-shadow: 0 3px 5px rgba(13, 20, 36, 0.18), 0 0 1px rgba(13, 20, 36, 0.29);
   }
+  .disabled {
+    cursor: not-allowed;
+    span {
+      color: var(--font-color-s);
+    }
+
+    &:not(.selected) {
+      &:hover {
+        background: transparent;
+        span {
+          color: var(--font-color-s);
+        }
+      }
+    }
+  }
 }
 .min {
   padding: var(--padding-1) !important;

package/packages/components/proPageTable/oa_pro_table.vue

@@ -23,6 +23,7 @@
     <div class="oa-pro-table-search">
       <oa_pro_table_searchVue
         v-model="module"
+        v-show="!isCheckTableRow"
         ref="oaProTableSearch"
         :screenList="screenList"
         :placeholder="placeholder"
@@ -34,6 +35,17 @@
           <slot name="search-extend"></slot>
         </template>
       </oa_pro_table_searchVue>
+
+      <oa_pro_table_check_handle_barVue
+        :del-fn="delFn"
+        :export-fn="exportFn"
+        v-if="isCheckTableRow"
+        :checked-value="tableCheckboxConfig.value"
+      >
+        <template slot="check-handle">
+          <slot name="check-handle-plugin"></slot>
+        </template>
+      </oa_pro_table_check_handle_barVue>
     </div>
 
     <!-- 表格内容 -->
@@ -46,10 +58,10 @@
       }"
     >
       <el-table
+        :fit="true"
         ref="elTable"
         :row-key="rowKey"
         :stripe="stripe"
-        :fit="true"
         :data="tableData"
         :border="borderColu"
         :height="tableHeight"
@@ -158,13 +170,6 @@
           </template>
         </el-table-column>
       </el-table>
-
-      <div class="table-suffix" v-if="!isAverageWidth">
-        <oa_pro_colum_configVue
-          :config="tableConfig"
-          @setTableHeaderConfig="setTableHeaderConfig"
-        ></oa_pro_colum_configVue>
-      </div>
     </div>
 
     <!-- 表格尾部 -->
@@ -223,6 +228,7 @@ import oa_pro_colum_configVue from './oa_pro_colum_config.vue' //表格列配置
 import oa_pro_table_skeletonVue from './oa_pro_table_skeleton.vue' //表格骨架屏
 import baseDefaultSvgVue from '../base/baseDefaultSvg/baseDefaultSvg.vue' //缺省页组件
 import baseButtonHandle from '../base/baseButtonHandle/baseButtonHandle.vue' //通用组件 排列尾部按钮的组件
+import oa_pro_table_check_handle_barVue from './oa_pro_table_check_handle_bar.vue' //  当表格有行被选中的时候
 
 //
 import componentConfig from '../../config/componentConfig'
@@ -270,7 +276,7 @@ export default {
     componentConfig.eventBus.$on('handleTableBorder', this.handleTableBorder)
   },
   mounted() {
-    // this.init();
+    this.initTableColumWidth()
   },
   beforeDestroy() {
     componentConfig.eventBus.$off('handleTableBorder', this.handleTableBorder)
@@ -317,6 +323,11 @@ export default {
         return item.show
       })
     },
+
+    isCheckTableRow() {
+      const { tableCheckboxConfig } = this.$props
+      return tableCheckboxConfig.value.length > 0
+    },
   },
   props: {
     // 当加载树形结构的表格时必须传入该值
@@ -443,6 +454,16 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    // 行被选中删除的方法
+    delFn: {
+      type: Function,
+    },
+
+    // 行被选中导出的方法
+    exportFn: {
+      type: Function,
+    },
   },
   components: {
     oaProHeader,
@@ -454,6 +475,7 @@ export default {
     oa_pro_table_searchVue,
     oa_pro_colum_configVue,
     oa_pro_table_skeletonVue,
+    oa_pro_table_check_handle_barVue,
   },
   methods: {
     isToolTip(value) {
@@ -483,6 +505,26 @@ export default {
 
       this.refreshData()
     },
+
+    initTableColumWidth() {
+      const { isAverageWidth } = this
+      if (isAverageWidth) true
+
+      const tableWidth = this.$refs.elTable.$el.offsetWidth
+      let totalWidth = 0
+      const { tableConfig } = this.$props
+      tableConfig.forEach((item) => {
+        totalWidth += item.width
+      })
+
+      const sub = tableWidth - totalWidth
+      if (sub > 0) {
+        const aver = sub / tableConfig.length
+        tableConfig.forEach((item) => {
+          item.width += aver
+        })
+      }
+    },
     searchContentHeightChange(height) {
       this.searchContentHeight = height
     },
@@ -783,6 +825,11 @@ export default {
           this.preSingleTableValue = val[0]
           tableCheckboxConfig.value = val
         } else {
+          if (val.length == 0) {
+            this.preSingleTableValue = null
+            tableCheckboxConfig.value = []
+            return
+          }
           let index = val.findIndex((item) => {
             return item == this.preSingleTableValue
           })
@@ -799,7 +846,6 @@ export default {
       } else {
         tableCheckboxConfig.value = val
       }
-      //console.log(tableCheckboxConfig.value);
     },
 
     // 返回被选中的值

package/packages/components/proPageTable/oa_pro_table_check_handle_bar.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="check-handle-bar-wrap">
+    <div class="handle-notify-data">
+      <span class="handle-text">
+        已选中
+        <span style="color: var(--color-primary); margin: 0px var(--margin-2);">
+          {{ checkNum }}
+        </span>
+        项
+      </span>
+    </div>
+
+    <div class="handle-plugin-wrap">
+      <el-button
+        type="info"
+        size="mini"
+        icon="el-icon-upload2"
+        v-if="exportFn"
+        @click="exportFn"
+      >
+        导出选中
+      </el-button>
+      <el-button
+        type="info"
+        size="mini"
+        v-if="delFn"
+        @click="delFn"
+        icon="el-icon-delete"
+      >
+        删除
+      </el-button>
+
+      <slot name="check-handle"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    delFn: {},
+    exportFn: {},
+    checkedValue: {},
+  },
+  computed: {
+    checkNum() {
+      const { checkedValue } = this.$props
+      return checkedValue.length
+    },
+  },
+  methods: {},
+}
+</script>
+
+<style lang="less" scoped>
+.check-handle-bar-wrap {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  margin: calc(var(--margin-5) * 2) 0px;
+
+  .handle-notify-data {
+    .handle-text {
+      color: var(--font-color-d);
+      font-size: var(--font-size-s);
+      margin-right: var(--margin-4);
+      font-weight: var(--font-weight-kg);
+    }
+  }
+  .handle-plugin-wrap {
+    display: flex;
+  }
+}
+</style>

package/packages/components/style/element/index.css

@@ -9310,6 +9310,8 @@
   bottom: 0px;
   width: 100%;
   height: 14px;
+  z-index: 1;
+  pointer-events: none;
   background: transparent !important;
   border-top: 1px solid var(--color-table-border);
   border-bottom: 1px solid var(--color-table-border);

package/src/App.vue

@@ -25,6 +25,10 @@ export default {
   data() {
     return {
       test: false,
+      toggleList: [
+        { label: '开启', value: true },
+        { label: '关闭', value: false },
+      ],
     }
   },
   mounted() {

package/src/component/test.vue

@@ -319,7 +319,7 @@ export default {
       :align="`left`"
       v-model="keyWords"
       :height="pageHeight"
-      :isAverageWidth="true"
+      :isAverageWidth="false"
       :pageProps="pageProps"
       :pageConfig="pageConfig"
       :screenList="screenList"
@@ -328,7 +328,6 @@ export default {
       :headerConfig="headerConfig"
       :totalPropsList="totalPropsList"
       :proScreenConfig="proScreenConfig"
-      :sortByApi="true"
     >
       <template>
         <base-icon
@@ -442,7 +441,7 @@ export default {
         label: '岗位编码',
         key: 'postCode',
         lock: false,
-        width: 150,
+        width: 10,
         template: false,
         screen: false,
       },
@@ -450,7 +449,7 @@ export default {
         label: '岗位名称',
         key: 'postName',
         lock: false,
-        width: 150,
+        width: 10,
         template: false,
         click: () => {},
       },
@@ -458,7 +457,7 @@ export default {
         label: '岗位排序',
         key: 'postSort',
         lock: false,
-        width: 150,
+        width: 10,
         screen: false,
         template: false,
       },
@@ -466,20 +465,27 @@ export default {
         label: '状态',
         key: 'state',
         lock: false,
-        width: 199,
+        width: 10,
         template: true,
       },
       {
         label: '创建时间',
         key: 'createTime',
         lock: false,
-        width: 280,
+        width: 10,
+        template: false,
+      },
+      {
+        label: '创建时间',
+        key: 'createTime',
+        lock: false,
+        width: 10,
         template: false,
       },
       {
         label: '操作',
         key: 'options',
-        lock: false,
+        lock: 'right',
         width: 280,
         template: true,
       },