U 用户列表页修改

he wei

2022-09-02 55aa45e19ae02746835bc503756bb4fadb635e1d

U 用户列表页修改

 src/pages/user/list.vue

@@ -1,45 +1,50 @@
<template>
  <a-card>
    <div>
      <a-space class="operator">
        <!-- <a-button @click="addNew" type="primary">新建</a-button> -->
      </a-space>
      <!-- title="用户列表" -->
      <advance-table
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        rowKey="id"
        @search="onSearch"
        @refresh="onRefresh"
        :format-conditions="true"
        @reset="onReset"
        :pagination="{
          current: pageCurr,
          pageSize: pageSize,
          total: total,
          showSizeChanger: true,
          showLessItems: true,
          showQuickJumper: true,
          showTotal: (total, range) =>
            `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
          onChange: onPageChange,
          onShowSizeChange: onSizeChange,
        }"
      >
        <template slot="title">
          <a-button @click="addUser">新增用户</a-button>
        </template>
        <template slot="operation" slot-scope="text">
          <span>
            <a @click="edit(text)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="是否要删除此用户？" @confirm="remove(text)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </advance-table>
  <div class="main">
    <div class="inner" ref="wraper">
      <a-card>
        <!-- title="用户列表" -->
        <advance-table
          ref="table"
          class="doc-center-table"
          :columns="columns"
          :data-source="dataSource"
          :loading="loading"
          rowKey="id"
          :scroll="{ x: 1900, y }"
          @search="onSearch"
          @refresh="onRefresh"
          :format-conditions="true"
          @reset="onReset"
          :pagination="{
            current: pageCurr,
            pageSize: pageSize,
            total: total,
            showSizeChanger: true,
            showLessItems: true,
            showQuickJumper: true,
            showTotal: (total, range) =>
              `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
            onChange: onPageChange,
            onShowSizeChange: onSizeChange,
          }"
        >
          <template slot="title">
            <a-space>
              <div class="title">用户列表</div>
              <a-button type="primary" @click="addUser">新增用户</a-button>
            </a-space>
          </template>
          <template slot="operation" slot-scope="text">
            <span>
              <a @click="edit(text)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="是否要删除此用户？" @confirm="remove(text)">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </template>
        </advance-table>
      </a-card>
    </div>
    <!-- 编辑用户 -->
    <a-modal
@@ -58,7 +63,7 @@
        @ok="ok"
      ></user-info>
    </a-modal>
  </a-card>
  </div>
</template>

<script>
@@ -72,6 +77,8 @@
  components: { AdvanceTable, UserInfo },
  data() {
    return {
      update: -1,
      y: 600,
      editShow: false,
      isEdit: true,
      loading: false,
@@ -136,10 +143,46 @@
      return this.isEdit ? "编辑用户信息" : "新增用户";
    },
    ...mapGetters("account", ["roleList", "departmentList"]),
    ...mapGetters("setting", ["affixed"]),
  },
  created() {
  watch: {
    update(n) {
      if (-1 != n) {
        this.$nextTick(() => {
          const table = this.$refs.table;
          const header = document.querySelectorAll(
            ".doc-center-table .ant-table-header"
          )[0].clientHeight;
          const bar = document.querySelectorAll(".header-bar")[0].clientHeight;
          if (table.fullScreen) {
            this.y = table.$el.clientHeight - bar - header - 64;
          } else {
            const wraper = this.$refs.wraper.clientHeight;
            const card = document.querySelectorAll(".ant-card-body")[0];
            const { paddingBottom, paddingTop } = getComputedStyle(card, null);
            const h =
              wraper -
              header -
              64 -
              bar -
              parseInt(paddingBottom) -
              parseInt(paddingTop);
            // console.log(h, "h",wraper, header, bar );
            this.y = h;
          }
        });
      }
    },
    affixed() {
      setTimeout(() => {
        this.update = Math.random();
      }, 200);
    },
  },
  mounted() {
    this.init();
    this.getList();
    window.addEventListener("resize", this.resize);
  },
  methods: {
    getList() {
@@ -171,6 +214,9 @@
        }
        this.dataSource = data;
        this.total = total;
        if (-1 == this.update) {
          this.update = Math.random();
        }
      });
    },
    onSearch(conditions, searchOptions) {
@@ -258,20 +304,36 @@
      this.editShow = false;
      this.getList();
    },
    resize() {
      setTimeout(() => {
        this.update = Math.random();
      }, 200);
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  position: relative;
  .inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
.search {
  margin-bottom: 54px;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
  .fold {