meixioacomponent 0.1.0

package/packages/components/proPageTable/oa_pro-table-search.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="oa-pro-table-search-content" ref="oaProTableSearchContent">
+    <searchHeaderVue
+      v-model="module"
+      :placeholder="placeholder"
+      :searchList="screenList"
+      @handleSearch="handleSearch"
+      @handleScreen="handleScreen"
+    >
+      <el-button
+        size="medium"
+        :class="{
+          'is-plain': !showProScreenList,
+        }"
+        :disabled="_proScreenList.length <= 0"
+        @click="handleProScreenList"
+        :type="showProScreenList ? 'primary' : 'info'"
+        >{{ handleScreenText }} <i :class="handleScreenIcon"></i>
+      </el-button>
+      <el-button size="medium" plain type="info" @click="handleOpenProScreen">
+        <i class="iconfont icon-shaixuan"></i>高级筛选
+      </el-button>
+    </searchHeaderVue>
+
+    <div class="search-mid-content" v-show="showProScreenList">
+      <el-card class="box-card">
+        <span class="tips-text">筛选条件</span>
+        <div class="screen-item-wrap">
+          <oa_pro_screen_itemVue
+            :key="index"
+            :item="item"
+            :disable="true"
+            :config="proScreenConfig"
+            style="width: 50%"
+            v-for="(item, index) in _proScreenList"
+          ></oa_pro_screen_itemVue>
+        </div>
+        <baseButtonHandle
+          :size="`mini`"
+          :align="`start`"
+          :config="footerHandleConfig"
+        ></baseButtonHandle>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import oa_pro_screen_itemVue from "./oa_pro_screen_item.vue";
+import searchHeaderVue from "../searchHeader/searchHeader.vue";
+import baseButtonHandle from "../base/baseButtonHandle/baseButtonHandle.vue";
+export default {
+  data() {
+    return {
+      showProScreen: false,
+      showProScreenList: false,
+      footerHandleConfig: [],
+    };
+  },
+  created() {
+    this.initFooterHandleList();
+  },
+  props: {
+    value: {},
+    keyWords: {},
+    placeholder: {},
+    /*
+         快捷筛选的列表
+     */
+    screenList: {},
+
+    proScreenList: {},
+
+    proScreenConfig: {},
+  },
+  components: {
+    searchHeaderVue,
+    baseButtonHandle,
+    oa_pro_screen_itemVue,
+  },
+  computed: {
+    handleScreenIcon() {
+      return this.showProScreenList ? "el-icon-arrow-up" : "el-icon-arrow-down";
+    },
+    handleScreenText() {
+      return this.showProScreenList ? "收起筛选" : "展开筛选";
+    },
+
+    _proScreenList() {
+      return this.$props.proScreenList.filter((item) => {
+        return item.exposed;
+      });
+    },
+
+    module: {
+      get() {
+        return this.$props.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  methods: {
+    handleSearch() {
+      this.$parent.startHttp();
+    },
+    handleProScreenList() {
+      this.showProScreenList = !this.showProScreenList;
+      this.computedHeight();
+    },
+    handleScreen(index) {
+      this.$parent.handleScreen(index);
+    },
+    computedHeight() {
+      this.$nextTick(() => {
+        this.$emit(
+          "searchContentHeightChange",
+          this.$refs.oaProTableSearchContent.clientHeight
+        );
+      });
+    },
+    handleOpenProScreen() {
+      this.$parent.handleOpenProScreen();
+    },
+
+    // 尾部按钮
+    initFooterHandleList() {
+      this.footerHandleConfig = [
+        {
+          text: "确定",
+          type: "primary",
+          plain: false,
+          click: () => {
+            this.$parent.startHttp();
+          },
+        },
+        {
+          text: "清空条件",
+          type: "info",
+          plain: true,
+          click: () => {
+            this.$parent.cleanProscreenCondition();
+            this.$nextTick(() => {
+              this.$parent.startHttp();
+            });
+          },
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.oa-pro-table-search-content {
+  width: 100%;
+  height: auto;
+  padding: calc(var(--padding-5) * 2) 0px;
+
+  .search-mid-content {
+    width: 100%;
+    height: auto;
+    margin-top: var(--margin-5);
+    background: var(--bg-white);
+    .box-card {
+      width: 100%;
+      height: 100%;
+      .tips-text {
+        display: block;
+        color: var(--font-color-d);
+        font-size: var(--font-size-base);
+      }
+      .screen-item-wrap {
+        width: 100%;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        margin-top: var(--margin-4);
+        justify-content: flex-start;
+      }
+    }
+    // padding: var(--padding-5) 0px;
+  }
+  .icon-shaixuan {
+    color: var(--icon-color-s);
+    margin-right: var(--margin-2);
+  }
+}
+</style>

package/packages/components/proPageTable/oa_pro_colum_config.vue

@@ -0,0 +1,219 @@
+<template>
+  <el-dropdown
+    slot="suffix"
+    trigger="click"
+    ref="dropdown"
+    @visible-change="setDragConfigList"
+  >
+    <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-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"
+                ></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="`icon-tuozhuai`"
+                    :size="`s`"
+                    :color="`m`"
+                  ></base-icon>
+                </div>
+              </div>
+            </draggable>
+          </div>
+        </div>
+        <baseButtonHandle
+          :align="`end`"
+          :size="`mini`"
+          class="config-footer"
+          :config="handleConfig"
+        ></baseButtonHandle>
+      </div>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+
+import baseButtonHandle from "../base/baseButtonHandle/baseButtonHandle.vue";
+export default {
+  data() {
+    return {
+      handleConfig: [],
+      dragConfigList: [],
+      isDrag: false,
+    };
+  },
+  created() {
+    this.handleConfig = [
+      {
+        text: "取消",
+        type: "info",
+        plain: true,
+        click: () => {
+          this.$refs.dropdown.hide();
+        },
+      },
+      {
+        text: "确定",
+        type: "primary",
+        plain: false,
+        click: () => {
+          this.setTableHeaderConfig();
+        },
+      },
+    ];
+  },
+  components: {
+    draggable,
+    baseButtonHandle,
+  },
+  props: {
+    config: {
+      type: Array,
+      require: true,
+    },
+  },
+  computed: {
+    lockConfigList() {
+      return this.$props.config.filter((item) => {
+        return item.lock;
+      });
+    },
+  },
+  methods: {
+    onEnd() {
+      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;
+        });
+      }
+    },
+    showTableColum(item) {
+      if (item.lock) return;
+      item.show = !item.show;
+    },
+    setTableHeaderConfig() {
+      if (this.isDrag) {
+        this.$emit("setTableHeaderConfig", this.dragConfigList);
+      }
+      this.$refs.dropdown.hide();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.config-wrap {
+  width: 240px;
+  height: auto;
+  max-height: 370px;
+  background: inherit;
+  box-sizing: border-box;
+  //   padding: 0px var(--padding-5);
+  .tips-text {
+    color: var(--font-color-m);
+    padding-left: var(--padding-5);
+    margin-bottom: var(--margin-5);
+    font-size: var(--font-size-s);
+  }
+  .config-content {
+    width: 100%;
+    overflow-y: auto;
+    max-height: calc(100% - 46px);
+    .config-item-wrap {
+      width: 100%;
+      height: 34px;
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      flex-flow: row nowrap;
+      box-sizing: border-box;
+      justify-content: space-between;
+      padding: 0px var(--padding-5);
+      &:hover {
+        background: var(--hover-light-primary);
+      }
+      .item-right,
+      .item-left {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: center;
+      }
+      .item-left {
+        width: 80%;
+        justify-content: flex-start;
+        .item-text {
+          color: var(--font-color-d);
+          font-size: var(--font-size-s);
+          margin-left: var(--margin-5);
+        }
+      }
+      .item-right {
+        width: 20%;
+        cursor: move;
+        /deep/ .base-icon-wrap {
+          cursor: inherit !important;
+        }
+      }
+    }
+  }
+  .config-footer {
+    height: 30px;
+    box-sizing: border-box;
+    padding: 0px var(--padding-5);
+  }
+}
+</style>

package/packages/components/proPageTable/oa_pro_footer.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="oa-pro-footer-content">
+    <div class="footer-left">
+      <div class="total-item" :key="index" v-for="(item, index) in totalList">
+        <span class="item-name">{{ item.label }} : </span>
+        <span class="item-number">{{ item.total }}</span>
+      </div>
+    </div>
+    <div class="footer-right">
+      <base-pagination
+        :config="pageConfig"
+        :pageProps="pageProps"
+        @sizeChange="sizeChange"
+        @currentChange="currentChange"
+      ></base-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    totalList: {
+      type: Array,
+    },
+    pageProps: {
+      type: Object,
+    },
+    pageConfig: {
+      type: Object,
+    },
+  },
+  methods: {
+    sizeChange(e) {
+      this.$emit("pageSizeChange");
+      this.$parent.startHttp();
+    },
+    currentChange() {
+      this.$emit("pageCurrentChange");
+      this.$parent.startHttp(false);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.oa-pro-footer-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  background: inherit;
+  justify-content: space-between;
+
+  .footer-left,
+  .footer-right {
+    width: 40%;
+    height: 100%;
+  }
+  .footer-left {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    .total-item {
+      width: auto;
+      .item-name {
+        color: var(--font-color-m);
+        margin-right: var(--margin-2);
+        font-size: calc(var(--font-size-base));
+      }
+      .item-number {
+        color: var(--font-color-d);
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-g);
+      }
+    }
+    .total-item + .total-item {
+      margin-left: var(--margin-5);
+      &::before {
+        content: "/";
+        color: var(--font-color-d);
+        margin-right: var(--margin-5);
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-g);
+      }
+    }
+  }
+  .footer-right {
+    width: 60%;
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    /deep/ .page-wrap {
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

package/packages/components/proPageTable/oa_pro_header.vue

@@ -0,0 +1,31 @@
+<template>
+  <basePageHeaderVue :headerText="headerText">
+    <template slot="prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <div slot="header-wrap-right" class="header-wrap-right">
+      <slot name="headerExtend"></slot>
+      <slot name="suffix"></slot>
+    </div>
+  </basePageHeaderVue>
+</template>
+
+<script>
+import basePageHeaderVue from "../base/basePageHeader/basePageHeader.vue";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    headerText: {
+      type: String,
+      require: true,
+    },
+  },
+  components: {
+    basePageHeaderVue,
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

package/packages/components/proPageTable/oa_pro_screen.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="oa-pro-screen-content">
+    <span class="tips-text">筛选条件</span>
+    <div class="screen-item-content" ref="screenItemContent">
+      <oa_pro_screen_itemVue
+        :item="item"
+        :key="index"
+        ref="oaProScreenItemVue"
+        :config="proScreenConfig"
+        :configIndex="item.configIndex < 0 ? null : item.configIndex"
+        v-for="(item, index) in proScreenList"
+        @deleteProscreenItem="deleteProscreenItem(index)"
+      ></oa_pro_screen_itemVue>
+    </div>
+    <div class="screen-handle-wrap">
+      <el-button type="text" @click="insertDefaultItem">
+        <i class="el-icon-plus"></i>
+        添加筛选条件</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import oa_pro_screen_itemVue from "./oa_pro_screen_item.vue";
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  components: {
+    oa_pro_screen_itemVue,
+  },
+  props: {
+    proScreenList: [],
+    proScreenConfig: {},
+  },
+  methods: {
+    init() {
+      if (this.$props.proScreenList.length == 0) {
+        this.insertDefaultItem();
+      }
+    },
+    insertDefaultItem() {
+      this.$emit("insertDefaultItem");
+      this.$nextTick(() => {
+        this.$refs.screenItemContent.scrollTop = 9999999;
+      });
+    },
+    deleteProscreenItem(index) {
+      this.$emit("deleteProscreenItem", index);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.oa-pro-screen-content {
+  width: 100%;
+  height: auto;
+  max-height: 100%;
+  background: var(--bg-white);
+  .tips-text {
+    color: var(--font-color-d);
+    font-size: var(--font-size-base);
+  }
+  .screen-item-content {
+    width: 100%;
+    height: auto;
+    overflow-y: auto;
+    margin-top: var(--margin-5);
+    max-height: calc(250px - 70px);
+  }
+  .screen-handle-wrap {
+    width: 100%;
+    height: 42px;
+  }
+}
+</style>