public-fuse/src/view/user/index.vue

<template>
  <com-head :options="[{ name: '用户管理', value: '2' }]">
    <el-form label-width="84px">
      <el-form-item label="所属架构：">
        <com-company v-model="state.query.departmentId" />
      </el-form-item>
      <el-form-item label="用户账号：">
        <el-input v-model="state.query.userName" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名：">
        <el-input v-model="state.query.nickName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="state.query.status" placeholder="全部">
          <el-option label="全部" :value="''"></el-option>
          <el-option label="启用" :value="1"></el-option>
          <el-option label="禁用" :value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="searh-btns">
        <el-button type="primary" @click="refresh">查询</el-button>
        <el-button type="primary" plain @click="queryReset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer" style="padding-top: 8px">
    <div class="body-but">
      <el-button type="primary" v-pdpath="'add'" @click="addHandler">新增用户</el-button>
    </div>

    <el-table
      class="user-table"
      :data="state.table.rows"
      style="width: 100%; max-height: 480px"
      size="large"
    >
      <el-table-column label="序号" width="70" v-slot:default="{ $index }">
        <div style="text-align: center">
          {{ state.pag.size * (state.pag.currentPage - 1) + $index + 1 }}
        </div>
      </el-table-column>
      <el-table-column label="手机号（账号）" prop="userName"></el-table-column>
      <el-table-column label="用户名称" prop="nickName"></el-table-column>
      <el-table-column label="所属架构" prop="deptName"></el-table-column>
      <el-table-column label="角色" prop="roleName"></el-table-column>
      <el-table-column label="状态" v-slot:default="{ row }">
        {{ row.status ? "启用" : "禁用" }}
      </el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }">
        <span
          class="oper-span"
          v-pddept="[row, 'edit']"
          :class="{ disable: row.type === 0 }"
          @click="editHandler(row)"
          >编辑</span
        >
        <span
          class="oper-span"
          @click="switchUserStatus(row)"
          :class="{ disable: user.info.id == row.id }"
          v-pddept="[row, 'disabled']"
          style="color: var(--primaryColor)"
          >{{ row.status ? "禁用" : "启用" }}</span
        >
        <span
          class="oper-span"
          style="color: var(--primaryColor)"
          @click="delInfo(row)"
          :class="{ disable: user.info.id == row.id }"
          v-pddept="[row, 'del']"
          >删除</span
        >
      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="changPageSize"
      @current-change="changPageCurrent"
      :current-page="state.pag.currentPage"
      :page-size="state.pag.size"
      :total="state.pag.total"
    />
  </div>
</template>

<script setup lang="ts">
import { usePagging } from "@/hook/pagging";
import comHead from "@/components/head/index.vue";
import comCompany from "@/components/company-select/index.vue";
import comPagination from "@/components/pagination/index.vue";
import { UserInfo, changeUserStatus, delUser, getUserPagging, user } from "@/store/user";
import { ElMessage } from "element-plus";
import { confirm } from "@/helper/message";
import { addUser, editUser } from "./quisk";

const { state, queryReset, refresh, changPageCurrent, changPageSize } = usePagging({
  get: getUserPagging,
  paramsTemlate: {
    nickName: "",
    status: "" as any,
    departmentId: "",
    userName: "",
  },
});

const delInfo = async (row: UserInfo) => {
  if (
    await confirm(
      "用户被删除后，无法登陆使用，无法编辑场景（可将该用户关联的相机绑定到其他管理员），确认要删除组织吗？"
    )
  ) {
    delUser(row.id);
    ElMessage.success("操作成功");
    refresh();
  }
};

const addHandler = async () => {
  (await addUser({})) && refresh();
};

const editHandler = async (row: UserInfo) => {
  if (!row.status) {
    return ElMessage.error("请先启用用户");
  }
  (await editUser({ user: row })) && refresh();
};

const switchUserStatus = async (row: UserInfo) => {
  const enable = !row.status;
  const msg = !enable
    ? `用户被禁用后，无法登录使用，无法编辑场景（可将该用户关联的相机绑定到其它管理员）。确定要禁用吗？`
    : `用户被启用后，可正常登录使用。确定要启用吗？`;
  if (enable || (await confirm(msg))) {
    await changeUserStatus(row);
    refresh();
  }
};
</script>

<style scoped lang="scss"></style>