meixioacomponent 0.1.0

package/packages/components/proPageTable/oa_pro_screen_item.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    class="screen-item-wrap"
+    :class="{
+      'not-handle': disable,
+    }"
+  >
+    <div class="item-wrap-left">
+      <el-select
+        size="small"
+        class="item"
+        v-model="item.type"
+        :disabled="disable"
+        placeholder="请选择要筛选的字段名"
+      >
+        <el-option
+          v-for="(item, index) in config"
+          :key="item.label"
+          :value="item.type"
+          :label="item.label"
+          :disabled="item.isCheck"
+        >
+          <template
+            ><div @click="typeChange(index)">
+              {{ item.label }}
+            </div></template
+          >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item-wrap-right">
+      <!-- type是input类型 -->
+      <el-input
+        size="small"
+        class="item"
+        v-model="item.value"
+        v-if="item.type == 'input' || item.type == undefined"
+        placeholder="多个条件请用;隔开"
+      ></el-input>
+      <!-- 时间类型 -->
+      <el-date-picker
+        size="small"
+        class="item"
+        type="daterange"
+        v-model="item.value"
+        end-placeholder="结束日期"
+        start-placeholder="开始日期"
+        value-format="timestamp"
+        v-if="item.type == 'time'"
+      >
+        >
+      </el-date-picker>
+      <!-- 下拉选择框类型 -->
+      <el-select
+        size="small"
+        class="item"
+        v-model="item.value"
+        placeholder="请选择条件"
+        v-if="item.type == 'select'"
+      >
+        <el-option
+          v-for="item in config[privateConfigIndex].selectList"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item-wrap-handle" v-if="!disable">
+      <base-icon
+        :color="`m`"
+        :event="true"
+        :name="`icon-close`"
+        @iconClick="deleteProscreen"
+      ></base-icon>
+      <el-checkbox v-model="item.exposed" :disabled="!item.key"
+        >外露</el-checkbox
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      privateConfigIndex: null,
+    };
+  },
+  created() {
+    this.privateConfigIndex = this.$props.configIndex;
+  },
+  mounted() {},
+  props: {
+    item: {},
+    config: {},
+    // 禁止外露的操作
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+    configIndex: {},
+  },
+  computed: {
+    screenItem() {
+      return this.$props.item;
+    },
+  },
+  methods: {
+    typeChange(index) {
+      if (this.$props.config[index].isCheck == true) return;
+      this.privateConfigIndex = index;
+      this.$props.item.key = this.$props.config[this.privateConfigIndex].key;
+      this.trigerCheck(this.privateConfigIndex, true);
+    },
+
+    deleteProscreen() {
+      this.$emit("deleteProscreenItem");
+    },
+    trigerCheck(index, params) {
+      setTimeout(() => {
+        this.$props.config[index].isCheck = params;
+      }, 120);
+    },
+  },
+
+  watch: {
+    privateConfigIndex(newVal, oldVal) {
+      if (oldVal != null) {
+        this.trigerCheck(oldVal, false);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.screen-item-wrap {
+  height: auto;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  margin-bottom: var(--margin-5);
+  .item {
+    width: 100% !important;
+  }
+  .item-wrap-left {
+    width: 20%;
+    margin-right: var(--margin-5);
+  }
+  .item-wrap-right {
+    height: auto;
+    width: 40%;
+  }
+  .item-wrap-handle {
+    display: flex;
+    align-items: center;
+    margin-left: var(--margin-4);
+    div,
+    label {
+      margin-right: var(--margin-4);
+    }
+  }
+}
+.not-handle {
+  // justify-content: space-between !important;
+  .item-wrap-left,
+  .item-wrap-right {
+    width: 40% !important;
+  }
+}
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+  <div class="table-header" v-show="config.value != 'noData'">
+    <div class="table-header-left">
+      <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>
+      </span>
+    </div>
+    <div class="table-header-right">
+      <!-- <i :class="lockClass" @click="test"></i> -->
+      <base-icon
+        :color="`s`"
+        :size="`s`"
+        :event="true"
+        :plain="true"
+        :name="lockClass"
+        class="lock-icons"
+        :active="config.lock"
+        @iconClick="handleClick('lock')"
+      ></base-icon>
+
+      <base-icon
+        :color="`s`"
+        :size="`s`"
+        :event="true"
+        :plain="true"
+        :title="`高级筛选`"
+        :name="`icon-shaixuan`"
+        @iconClick="handleClick('screen')"
+        v-if="config.screen"
+      ></base-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // preIndex: null,
+    };
+  },
+  created() {},
+  mounted() {},
+  computed: {
+    preIndex() {
+      return this.$props.config.preIndex;
+    },
+    lockClass() {
+      if (!this.$props.config.lock) {
+        return "icon-suoding";
+      }
+      return "icon-jiesuo";
+    },
+  },
+  props: {
+    scope: {
+      type: Object,
+      require: true,
+    },
+    config: {
+      type: Object,
+      require: true,
+    },
+    index: {},
+  },
+  methods: {
+    handleClick(type) {
+      switch (type) {
+        case "lock":
+          this.handleLock();
+          break;
+        case "screen":
+          this.handleScreen();
+          break;
+
+        default:
+          break;
+      }
+    },
+
+    handleLock() {
+      if (!this.$props.config.lock) {
+        this.$emit("headerItemLock", {
+          preIndex: this.preIndex,
+          index: this.$props.index,
+        });
+      } else {
+        this.$emit("headerItemUnlock", {
+          preIndex: this.preIndex,
+          index: this.$props.index,
+        });
+      }
+    },
+
+    handleScreen() {
+      this.$emit("handleScreenItem", this.$props.config);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.table-header {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  background: inherit;
+  align-items: center;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  padding: 0px var(--padding-5);
+  justify-content: space-between;
+  transition: all 0.6s var(--ease-out);
+  &:hover {
+    background: var(--hover-gray);
+    .defind {
+      display: inline-flex !important;
+    }
+    .table-header-right {
+      .lock-icons {
+        display: flex !important;
+      }
+    }
+  }
+  .defind {
+    // display: inline-flex !important;
+    transform: scale(0.7) !important;
+  }
+  .cell-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--font-color-m);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-g);
+  }
+
+  .table-header-right {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    .lock-icons {
+      display: none !important;
+    }
+  }
+}
+</style>