eep_page/src/views/user_manage_org/index.vue

<template>
  <div class="user-manage">
    <div class="user-manage-list">
      <div class="btn-box">
        <span class="org-name">{{ token.org_name }} &nbsp;|</span>
        <el-button class="add-btn" type="primary" size="small" icon="el-icon-plus" @click="updateOrg('')"
          >添加用户</el-button
        >
        <el-button class="add-btn" type="primary" size="small" @click="updateOrg('')">批量导入用户</el-button>
      </div>
      <el-form inline id="query-form">
        <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_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="register_date" label="注册日期">
          <el-date-picker
            v-model="register_date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            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="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="stop_date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            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="user_name" label="真实姓名" align="center" />
        <el-table-column prop="real_name" label="用户名" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" width="170" />
        <el-table-column prop="is_org_manager" label="机构管理员" align="center">
          <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"
          ><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="setOrgUserStop(row)">{{ row.is_stop === 'true' ? '启用' : '停用' }}</span>
            <span class="link" @click="setPower(row)">设置权限</span>
          </template>
        </el-table-column>
      </el-table>

      <PaginationPage ref="pagination" :total="total" @getList="queryOrgList" />
    </div>
    <el-dialog
      :visible.sync="orgAddFlag"
      width="300px"
      append-to-body
      :show-close="true"
      :title="org_Info.name ? '编辑机构' : '创建机构'"
    >
      <el-form ref="formDialog" :model="org_Info" :rules="rules" inline>
        <el-form-item class="label-input" label="名称" prop="name">
          <el-input
            v-model="org_Info.name"
            autocomplete="off"
            name="name"
            @blur="org_Info.name = org_Info.name.trim()"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orgAddFlag = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submitOrg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

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

import { queryOrgUserList } from '@/api/list.js';
import { createOrg, setOrgUserStop } from '@/api/org.js';
import { getToken } from '@/utils/auth';

export default {
  name: 'UserManageOrg',
  components: {
    PaginationPage,
  },
  data() {
    const token = getToken();
    return {
      list: [],
      total: 0,
      org_Info: {
        name: '',
      },
      orgAddFlag: false,
      rules: {
        name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
      },
      loading: false,
      token: token,
      form: {
        real_name: '',
        user_name: '',
        email: '',
        phone: '',
        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,
      },
      register_date: [],
      stop_date: [],
      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: {
    queryOrgList(data) {
      this.form.page_capacity = data.page_capacity;
      this.form.cur_page = data.cur_page;
      if (this.register_date && this.register_date.length === 2) {
        this.form.register_date_begin = this.register_date[0];
        this.form.register_date_end = this.register_date[1];
      } else {
        this.form.register_date_begin = '';
        this.form.register_date_end = '';
      }
      if (this.stop_date && this.stop_date.length === 2) {
        this.form.stop_date_begin = this.stop_date[0];
        this.form.stop_date_end = this.stop_date[1];
      } else {
        this.form.stop_date_begin = '';
        this.form.stop_date_end = '';
      }
      queryOrgUserList(this.form).then(({ total_count, user_list }) => {
        this.total = total_count;
        this.list = user_list;
      });
    },
    /**
     * 修改机构
     * @param {string} id - 项目ID
     */
    updateOrg(row) {
      if (row) {
        this.org_Info = {
          name: row.name,
        };
      } else {
        this.org_Info = {
          name: '',
        };
      }
      // this.orgAddFlag = true;
    },
    setPower(row) {},
    setOrgUserStop(row) {
      let data = {
        user_id_list: [row.id],
        is_stop: row.is_stop === 'true' ? 'false' : 'true',
      };
      setOrgUserStop(data).then((res) => {
        if (res.status === 1) {
          this.queryOrgList({ cur_page: this.form.cur_page, page_capacity: this.form.page_capacity });
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        }
      });
    },
    submitOrg() {
      const _this = this;
      _this.$refs.formDialog.validate((valid) => {
        if (valid) {
          this.loading = true;
          createOrg(_this.org_Info)
            .then((res) => {
              if (res.status === 1) {
                this.loading = false;
                _this.queryOrgList({ cur_page: _this.form.cur_page, page_capacity: _this.form.page_capacity });
                _this.$message({
                  type: 'success',
                  message: '创建成功!',
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    queryList() {
      this.queryOrgList({ cur_page: 1, page_capacity: this.form.page_capacity });
    },
  },
  mounted() {
    this.tableHeight =
      document.getElementsByClassName('app-container')[0].clientHeight -
      document.getElementById('query-form').clientHeight -
      document.getElementsByClassName('el-pagination')[0].clientHeight -
      50;
  },
};
</script>

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

.user-manage {
  @include page-base;

  .btn-box {
    display: flex;

    .org-name {
      margin-right: 5px;
      font-size: 14px;
      line-height: 32px;
    }
  }

  .add-btn {
    width: 120px;
    margin-bottom: 5px;
  }

  &-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;
  }
}
</style>