meixioacomponent 0.3.99 → 0.4.0

package/package.json

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

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>
 
     <!-- 表格内容 -->
@@ -216,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'
@@ -310,6 +323,11 @@ export default {
         return item.show
       })
     },
+
+    isCheckTableRow() {
+      const { tableCheckboxConfig } = this.$props
+      return tableCheckboxConfig.value.length > 0
+    },
   },
   props: {
     // 当加载树形结构的表格时必须传入该值
@@ -436,6 +454,16 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    // 行被选中删除的方法
+    delFn: {
+      type: Function,
+    },
+
+    // 行被选中导出的方法
+    exportFn: {
+      type: Function,
+    },
   },
   components: {
     oaProHeader,
@@ -447,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) {
@@ -796,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
           })
@@ -812,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/src/App.vue

@@ -1,13 +1,7 @@
 <template>
   <div id="app">
     <div style="height: 100vh;">
-      <!-- <testVue></testVue> -->
-
-      <base-toggle
-        :toggleList="toggleList"
-        v-model="test"
-        :disabled="true"
-      ></base-toggle>
+      <testVue></testVue>
     </div>
   </div>
 </template>