eep_page/src/views/user_manage/index.vue

<template>
  <div class="user-manage">
    <div class="user-manage-list">
      <div id="query-form">
        <el-form inline label-width="90px">
          <el-form-item prop="real_name" label="真实姓名">
            <el-input v-model="form.real_name" />
          </el-form-item>
          <el-form-item prop="email" label="邮箱" class="email">
            <el-input v-model="form.email" />
          </el-form-item>
          <el-form-item prop="org_id" label="所属机构" class="org_id">
            <el-select v-model="form.org_id_list" filterable multiple collapse-tags>
              <el-option v-for="item in institutionList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item prop="register_date" label="注册日期">
            <el-date-picker v-model="form.register_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd" />
            -
            <el-date-picker v-model="form.register_date_end" placeholder="截止日期" value-format="yyyy-MM-dd" />
          </el-form-item>
          <br />
          <el-form-item prop="user_name" label="用户名">
            <el-input v-model="form.user_name" />
          </el-form-item>
          <el-form-item prop="phone" label="电话" class="email">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item prop="org_manager_status" label="机构管理员">
            <el-select v-model="form.org_manager_status">
              <el-option v-for="item in org_manager_list" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item prop="stop_status" label="已停用" class="stop_status">
            <el-select v-model="form.stop_status">
              <el-option v-for="item in stop_list" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item prop="stop_date" label="停用日期">
            <el-date-picker v-model="form.stop_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd" />
            -
            <el-date-picker v-model="form.stop_date_end" placeholder="截止日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-form>
        <div class="search-box">
          <el-button class="search-btn" type="primary" @click="queryList">查询</el-button>
        </div>
      </div>

      <el-table v-if="tableHeight" :data="list" :max-height="tableHeight + 'px'">
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
          :index="(form.cur_page - 1) * form.page_capacity + 1"
          header-align="center"
          class-name="index-column"
        />
        <el-table-column prop="real_name" width="130" label="真实姓名" align="center" header-align="center" />
        <el-table-column prop="user_name" width="130" label="用户名" align="center" header-align="center" />
        <el-table-column prop="email" label="邮箱" align="center" header-align="center" />
        <el-table-column prop="org_name" label="所属机构" align="center" header-align="center" />
        <el-table-column prop="is_org_manager" label="机构管理员" align="center" width="120" header-align="center">
          <template slot-scope="{ row }">
            <i v-if="row.is_org_manager === 'true'" class="el-icon-check"></i>
          </template>
        </el-table-column>
        <el-table-column prop="register_time" label="注册时间" align="center" width="170" header-align="center" />
        <el-table-column prop="is_stop" label="已停用" align="center" width="100" header-align="center">
          <template slot-scope="{ row }">
            <i v-if="row.is_stop === 'true'" class="el-icon-check"></i>
          </template>
        </el-table-column>
        <el-table-column prop="stop_time" label="停用时间" align="center" width="170" header-align="center" />

        <el-table-column prop="operation" label="操作" fixed="right" width="200" align="center" header-align="center">
          <template slot-scope="{ row }">
            <span class="link" @click="setOrgManager(row)">{{
              row.is_org_manager === 'true' ? '取消机构管理员' : '设为机构管理员'
            }}</span>
          </template>
        </el-table-column>
      </el-table>

      <PaginationPage ref="pagination" :total="total" @getList="queryUserList" />
    </div>
  </div>
</template>

<script>
import PaginationPage from '@/components/PaginationPage.vue';

import { queryUserList } from '@/api/list.js';
import { setUserToOrgManager } from '@/api/org.js';
import { orgIndexList } from '@/api/user';

export default {
  name: 'UserManage',
  components: {
    PaginationPage,
  },
  data() {
    return {
      list: [],
      total: 0,
      institutionList: [],
      form: {
        real_name: '',
        user_name: '',
        email: '',
        phone: '',
        org_id_list: [],
        org_manager_status: -1,
        stop_status: -1,
        register_date_begin: '',
        register_date_end: '',
        stop_date_begin: '',
        stop_date_end: '',
        page_capacity: 10,
        cur_page: 1,
      },
      tableHeight: 0,
      org_manager_list: [
        {
          value: -1,
          label: '全部',
        },
        {
          value: 1,
          label: '机构管理员',
        },
        {
          value: 0,
          label: '普通用户',
        },
      ],
      stop_list: [
        {
          value: -1,
          label: '全部',
        },
        {
          value: 1,
          label: '停用',
        },
        {
          value: 0,
          label: '未停用',
        },
      ],
    };
  },
  created() {
    this.getinstitutionList();
  },
  mounted() {
    this.tableHeight =
      document.getElementsByClassName('app-container')[0].clientHeight -
      document.getElementById('query-form').clientHeight -
      document.getElementsByClassName('el-pagination')[0].clientHeight -
      10;
  },
  methods: {
    queryUserList(data) {
      this.form.page_capacity = data.page_capacity;
      this.form.cur_page = data.cur_page;
      queryUserList(this.form).then(({ total_count, user_list }) => {
        this.total = total_count;
        this.list = user_list;
      });
    },
    // 设置机构管理员
    setOrgManager(row) {
      let data = {
        user_id: row.id,
        is_org_manager: row.is_org_manager === 'true' ? 'false' : 'true',
      };
      setUserToOrgManager(data).then((res) => {
        if (res.status === 1) {
          this.queryUserList({ cur_page: this.form.cur_page, page_capacity: this.form.page_capacity });
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        }
      });
    },
    // 获取机构列表
    getinstitutionList() {
      let data = {
        page_capacity: 10000,
        cur_page: 1,
      };
      orgIndexList(data).then((res) => {
        if (res.status === 1) {
          this.institutionList = res.org_list;
        }
      });
    },
    queryList() {
      this.queryUserList({ cur_page: 1, page_capacity: this.form.page_capacity });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.user-manage {
  @include page-base;

  &-list {
    display: flex;
    flex: 1;
    flex-direction: column;

    .el-table {
      flex: 1;
    }
  }

  #query-form {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;

    :deep .el-form-item--small.el-form-item {
      margin-bottom: 5px;
    }

    :deep .el-input--small .el-input__inner {
      width: 100px;
    }

    :deep .el-range-editor .el-range-input {
      background: transparent;
    }

    :deep .el-select > .el-input {
      width: 115px;

      .el-input__inner {
        width: 100%;
      }
    }

    :deep .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 130px;
    }

    :deep .el-date-editor .el-input__inner {
      width: 130px;
      padding-right: 20px;
    }

    .org_id {
      :deep .el-select > .el-input {
        width: 300px;
      }
    }

    .email {
      :deep .el-form-item__label {
        width: 50px !important;
      }
    }

    .stop_status {
      :deep .el-form-item__label {
        width: 60px !important;
      }
    }

    .search-box {
      flex: 1;
      text-align: center;

      :deep .el-button--small {
        height: 32px;
      }
    }
  }
}
</style>