4pc/src/view/platform-users/users.vue

<template>
  <div class="relics-layout">
    <div class="relics-header">
      <div class="search">
        <el-form label-width="100px" inline>
          <el-form-item label="用户账号">
            <el-input
              v-model="pageProps.userName"
              clearable
              style="width: 250px"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="所属单位">
            <el-input
              v-model="pageProps.orgName"
              clearable
              style="width: 250px"
              placeholder="请输入"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="refresh">查询</el-button>
            <el-button
              type="primary"
              plain
              @click="pageProps = { ...initProps }"
            >
              重置
            </el-button>
            <el-button type="primary" @click="addHandler"> 创建用户 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="relics-content">
      <el-table :data="relicsArray" border>
        <el-table-column label="姓名" prop="nickName"></el-table-column>
        <el-table-column label="账号" prop="userName"></el-table-column>
        <!-- <el-table-column label="账号" prop="userName" v-slot:default="{ row }: { row: Device }">
          {{ DeviceTypeDesc[row.cameraType] }}
        </el-table-column> -->

        <el-table-column label="所属单位" prop="orgName"> </el-table-column>
        <el-table-column label="角色" prop="roleNames"> </el-table-column>
        <el-table-column label="创建人" prop="createBy"> </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          v-slot:default="{ row }"
        >
          {{ row.createTime && row.createTime.substr(0, 16) }}
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          prop="status"
          v-slot:default="{ row }"
        >
          <el-switch
            inline-prompt
            width="60"
            v-model="row.status"
            :before-change="() => beforeChangeStatus(row)"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
            style="--el-switch-on-color: #13ce66"
          />
        </el-table-column>
        <el-table-column label="操作" width="100px" fixed="right">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              @click="editHandler(row)"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              link
              type="danger"
              @click="delHandler(row)"
              size="small"
              v-if="!isMe(row.userId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pag-layout">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        v-model:page-size="pageProps.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="(data: number) => pageProps.pageNum = data"
        :current-page="pageProps.pageNum"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onActivated, ref, watch, computed } from "vue";
import {
  getUserpageFetch,
  addUserFetch,
  delUserFetch,
  updateUserStatusFetch,
  editUserFetch,
  PageProps,
  UserType,
} from "@/request";
import { usersAdd, usersEdit } from "./quisk";
import { openLoading, closeLoading } from "@/helper/loading";
import { ElMessageBox } from "element-plus";
import { debounce } from "@/util";
import { user } from "@/store/user";

const isSuper = computed(
  () =>
    user.value.roles.filter((item) => item.roleKey === "super_admin").length > 0
);
const isMe = computed(() => (id: any) => {
  return id === user.value.userId;
});
console.log("isSuper", isSuper);
const initProps: PageProps<Partial<Pick<UserType, "userName" | "orgName">>> = {
  pageNum: 1,
  pageSize: 10,
  userName: "",
  orgName: "",
};

const pageProps = ref({ ...initProps });
const total = ref<number>(0);
const relicsArray = ref<UserType[]>([]);

const refresh = debounce(async () => {
  const data = await getUserpageFetch({ ...pageProps.value, type: 1 });
  total.value = data.total;
  relicsArray.value = data.records;
});
const addHandler = async () => {
  await usersAdd({ submit: addUserFetch });
  await refresh();
};
const editHandler = async (row: UserType) => {
  await usersEdit({ user: row, submit: editUserFetch });
  await refresh();
};
const delHandler = async (row: UserType) => {
  const ok = await ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
  });
  if (ok) {
    await delUserFetch({
      userId: row.userId,
    });
    await refresh();
  }
};

const beforeChangeStatus = (row: UserType): Promise<boolean> => {
  openLoading();
  return new Promise(async (resolve, reject) => {
    try {
      const anti = !row.status;
      console.log("anti", anti);
      await updateUserStatusFetch({
        userId: row.userId,
        status: Number(anti),
      });
      resolve(true);
    } catch (error) {
      reject(false);
    }

    closeLoading();
  });
};
watch(pageProps, refresh, { deep: true, immediate: true });
onActivated(refresh);
</script>

<style scoped lang="scss">
.relics-layout {
  height: 100%;
  overflow-y: auto;
  padding: 30px;
}

.pag-layout {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.relics-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .search {
    flex: 1;
  }

  .relics-oper {
    flex: 0 0 100px;
    text-align: right;
  }
}
</style>