Merge remote-tracking branch 'origin/master'

luohairen

2024-11-25 87e3d52c62233ad44bd7bac3f43e5348a2de4e94

 src/components/VisibilityToolbar/index.vue

New file
@@ -0,0 +1,173 @@
<template>
  <div class="top-right-btn">
    <el-row>
      <el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button size="small" circle icon="el-icon-search" @click="toggleSearch"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="small" circle icon="el-icon-refresh" @click="refresh"></el-button>
      </el-tooltip>
      <el-tooltip v-if="columns" class="item" effect="dark" content="显示/隐藏列" placement="top">
        <el-button size="small" circle icon="el-icon-menu" @click="openDrawer"></el-button>
      </el-tooltip>
    </el-row>

    <el-drawer
      :visible.sync="table"
      title="信息显隐筛选"
      size="30%"
      append-to-body
      :wrapperCLosable="false"
      :with-header="true">
      <div slot="header">
        <span>信息显隐筛选</span>
      </div>
      <div slot="default" style="margin-left: 20px;margin-top: 20px">
        <el-table :data="pagedColumns" style="width: 95%; height: 80%;;margin-bottom: 40px;">
          <el-table-column prop="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="label" label="数据名称"></el-table-column>
          <el-table-column prop="visible" label="是否显示">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.visible"
                class="ml-2"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="排序">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.serialNumber" :min="0" style="width: 120px" @change="sortChange(scope.row, $event)"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > pageSize"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
      <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; text-align: right;">
        <el-button @click="table = false">取 消</el-button>
        <el-button type="primary" @click="resetSort">重 置</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  data() {
    return {
      table: false,
      currentPage: 1,
      columnRef: null,
    };
  },
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    search: {
      type: Boolean,
      default: false,
    },
    gutter: {
      type: Number,
      default: 10,
    },
  },
  computed: {
    style() {
      return {
        marginRight: this.gutter ? `${this.gutter / 2}px` : '',
      };
    },
    pageSize() {
      return 10;
    },
    total() {
      return this.columns.length;
    },
    pagedColumns() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.columns.slice(start, end);
    },
  },
  methods: {
    toggleSearch() {
      this.$emit('update:showSearch', !this.showSearch);
    },
    refresh() {
      this.$emit('queryTable');
    },
    openDrawer() {
      this.table = true;
    },
    switchChange(row) {
      this.$emit('update:columns', row);
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    sortChange(row, val) {
      this.$emit('update:sort', { key: row.key, serialNumber: val });
    },
    resetSort() {
      this.$emit('update:resetSort');
    },
  },
  mounted() {
    this.columns.forEach((item, index) => {
      if (item.visible) {

      }
    });
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-transfer__button) {
  border-radius: 50%;
  display: block;
  margin-left: 0px;
}
:deep(.el-transfer__button:first-child) {
  margin-bottom: 10px;
}

.my-el-transfer {
  text-align: center;
}
.tree-header {
  width: 100%;
  line-height: 24px;
  text-align: center;
}
.show-btn {
  margin-left: 12px;
}
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  text-align: right;
}
</style>