eep_page/src/views/user_manage/index.vue

<template>
  <div class="user-manage">
    <div class="user-manage-list">
      <el-form inline id="query-form" label-width="90px">
        <el-form-item prop="real_name" label="真实姓名">
          <el-input v-model="form.real_name"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item prop="org_id" label="机构">
          <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-option>
          </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>
          -
          <el-date-picker v-model="form.register_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="user_name" label="用户名">
          <el-input v-model="form.user_name"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话">
          <el-input v-model="form.phone"></el-input>
        </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-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="stop_status" label="已停用">
          <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-option>
          </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>
          -
          <el-date-picker v-model="form.stop_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" :max-height="tableHeight + 'px'" v-if="tableHeight">
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
          :index="(form.cur_page - 1) * form.page_capacity + 1"
        />
        <el-table-column prop="real_name" width="130" label="真实姓名" align="center" />
        <el-table-column prop="user_name" width="130" label="用户名" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column prop="org_name" label="所属机构" align="center" />
        <el-table-column prop="is_org_manager" label="机构管理员" align="center" width="120">
          <template slot-scope="{ row }">
            <i class="el-icon-check" v-if="row.is_org_manager === 'true'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="register_time" label="注册时间" align="center" width="170" />
        <el-table-column prop="is_stop" label="已停用" align="center" width="100"
          ><template slot-scope="{ row }">
            <i class="el-icon-check" v-if="row.is_stop === 'true'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="stop_time" label="停用时间" align="center" width="170" />

        <el-table-column prop="operation" label="操作" fixed="right" width="200" 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: '未停用',
        },
      ],
    };
  },
  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 });
    },
  },
  created() {
    this.getinstitutionList();
  },
  mounted() {
    this.tableHeight =
      document.getElementsByClassName('app-container')[0].clientHeight -
      document.getElementById('query-form').clientHeight -
      document.getElementsByClassName('el-pagination')[0].clientHeight -
      10;
  },
};
</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;
    }
  }

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

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

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

  :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;
  }

  #query-form {
    text-align: left;

    :deep .el-button--small {
      margin-left: 20px;
    }
  }
}
</style>