- ![]()
+
{
/>
-
+
- 模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
+ 模拟后台根据不同角色返回对应路由
diff --git a/src/views/system/user/hook.tsx b/src/views/system/user/hook.tsx
deleted file mode 100644
index 9793531..0000000
--- a/src/views/system/user/hook.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import dayjs from "dayjs";
-import { message } from "@/utils/message";
-// import { getUserList } from "@/api/system";
-import { ElMessageBox } from "element-plus";
-import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";
-import { http } from "@/utils/http";
-
-export function useUser() {
- const form = reactive({
- username: "",
- mobile: "",
- status: ""
- });
- const dataList = ref([]);
- const loading = ref(true);
- const switchLoadMap = ref({});
- const pagination = reactive({
- total: 0,
- pageSize: 10,
- currentPage: 1,
- background: true
- });
- const columns: TableColumnList = [
- {
- label: "序号",
- type: "index",
- width: 70,
- fixed: "left"
- },
- // {
- // label: "用户编号",
- // prop: "id",
- // minWidth: 130
- // },
- {
- label: "用户名称",
- prop: "username",
- minWidth: 130
- },
- // {
- // label: "用户昵称",
- // prop: "nickname",
- // minWidth: 130
- // },
- {
- label: "性别",
- prop: "sex",
- minWidth: 90,
- cellRenderer: ({ row, props }) => (
-
- {row.sex === 1 ? "女" : "男"}
-
- )
- },
- {
- label: "组织",
- prop: "dept",
- minWidth: 90,
- formatter: ({ dept }) => dept.name
- },
- {
- label: "手机号码",
- prop: "mobile",
- minWidth: 90
- },
- {
- label: "状态",
- prop: "status",
- minWidth: 90,
- cellRenderer: scope => (
- onChange(scope as any)}
- />
- )
- },
- {
- label: "创建时间",
- minWidth: 90,
- prop: "createTime",
- formatter: ({ createTime }) =>
- dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
- },
- {
- label: "操作",
- fixed: "right",
- width: 180,
- slot: "operation"
- }
- ];
- const buttonClass = computed(() => {
- return [
- "!h-[20px]",
- "reset-margin",
- "!text-gray-500",
- "dark:!text-white",
- "dark:hover:!text-primary"
- ];
- });
-
- function onChange({ row, index }) {
- ElMessageBox.confirm(
- `确认要${
- row.status === 0 ? "停用" : "启用"
- }${
- row.username
- }用户吗?`,
- "系统提示",
- {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- dangerouslyUseHTMLString: true,
- draggable: true
- }
- )
- .then(() => {
- switchLoadMap.value[index] = Object.assign(
- {},
- switchLoadMap.value[index],
- {
- loading: true
- }
- );
- setTimeout(() => {
- switchLoadMap.value[index] = Object.assign(
- {},
- switchLoadMap.value[index],
- {
- loading: false
- }
- );
- message("已成功修改用户状态", {
- type: "success"
- });
- }, 300);
- })
- .catch(() => {
- row.status === 0 ? (row.status = 1) : (row.status = 0);
- });
- }
-
- function handleUpdate(row) {
- console.log(row);
- }
-
- function handleDelete(row) {
- console.log(row);
- }
-
- function handleSizeChange(val: number) {
- console.log(`${val} items per page`);
- }
-
- function handleCurrentChange(val: number) {
- console.log(`current page: ${val}`);
- }
-
- function handleSelectionChange(val) {
- console.log("handleSelectionChange", val);
- }
-
- const userList = {
- list: [
- {
- username: "admin",
- nickname: "admin",
- remark: "管理员",
- deptId: 103,
- postIds: [1],
- mobile: "15888888888",
- sex: 0,
- id: 1,
- status: 0,
- createTime: 1605456000000,
- dept: {
- id: 103,
- name: "研发部门"
- }
- },
- {
- username: "pure",
- nickname: "pure",
- remark: "不要吓我",
- deptId: 104,
- postIds: [1],
- mobile: "15888888888",
- sex: 0,
- id: 100,
- status: 1,
- createTime: 1605456000000,
- dept: {
- id: 104,
- name: "市场部门"
- }
- },
- {
- username: "lucy",
- nickname: "girl",
- remark: null,
- deptId: 106,
- postIds: null,
- mobile: "15888888888",
- sex: 1,
- id: 103,
- status: 1,
- createTime: 1605456000000,
- dept: {
- id: 106,
- name: "财务部门"
- }
- },
- {
- username: "mike",
- nickname: "boy",
- remark: null,
- deptId: 107,
- postIds: [],
- mobile: "15888888888",
- sex: 0,
- id: 104,
- status: 0,
- createTime: 1605456000000,
- dept: {
- id: 107,
- name: "运维部门"
- }
- }
- ],
- total: 4
- };
-
- function getUserList() {
- // http.request("post", "/login")
- return userList;
- }
-
- async function onSearch() {
- loading.value = true;
- const data = getUserList();
- dataList.value = data.list;
- pagination.total = data.total;
- setTimeout(() => {
- loading.value = false;
- }, 500);
- }
-
- const resetForm = formEl => {
- if (!formEl) return;
- formEl.resetFields();
- onSearch();
- };
-
- onMounted(() => {
- onSearch();
- });
-
- return {
- form,
- loading,
- columns,
- dataList,
- pagination,
- buttonClass,
- onSearch,
- resetForm,
- handleUpdate,
- handleDelete,
- handleSizeChange,
- handleCurrentChange,
- handleSelectionChange
- };
-}
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 888d903..a936a8f 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,6 +1,6 @@
-
+
-
-
+
{
-
-
-
+
-
-
+
-
@@ -214,14 +307,47 @@ onMounted(() => {
- 刷新
-
+ 刷新
-
-
+
+
+
+
+
+
+
-
-
-
-
-
+
@@ -270,9 +390,7 @@ onMounted(() => {
播放视频
暂无视频
-
-
{
v-model:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="totalNumber"
- />
+ /> -->
@@ -294,11 +412,8 @@ h3 {
}
ul {
- list-style-type: none;
padding: 0;
-}
-
-li {
+ list-style-type: none;
}
a {
@@ -307,13 +422,13 @@ a {
.hello {
margin: 5px auto;
- text-align: right;
overflow: hidden;
+ text-align: right;
}
.demo-form-inline {
- align-items: center;
display: flex;
+ align-items: center;
justify-content: flex-end;
margin: 0 auto;
}
@@ -323,5 +438,4 @@ a {
justify-content: flex-end;
margin: 0 auto;
}
-