4pc/src/view/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="isSuper">
              删除
            </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)
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);

  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>