增加用户管理部分

src/api/system/user copy.ts

@@ -0,0 +1,150 @@
+import { http } from '@/utils/http/axios';
+
+export interface BasicResponseModel<T = any> {
+  code: number;
+  msg: string;
+  data: T;
+}
+
+export interface BasicPageParams {
+  pageNumber: number;
+  pageSize: number;
+  total: number;
+}
+
+/**
+ * @description: 获取用户信息
+ */
+export function getUserInfo(params) {
+  return http.request({
+    url: '/login/info',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 添加/编辑用户
+ */
+export function addUsur(params) {
+  return http.request({
+    url: '/user/add',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 编辑用户
+ */
+export function editUsur(params) {
+  return http.request({
+    url: '/user/update',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 用户信息
+ */
+export function userInfo(params) {
+  return http.request({
+    url: '/user/info',
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * @description: 删除用户
+ */
+export function delUser(params) {
+  return http.request({
+    url: '/user/delete',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 用户登录
+ */
+export function login(params) {
+  return http.request<BasicResponseModel>(
+    {
+      url: '/login/auth',
+      method: 'POST',
+      params,
+    },
+    {
+      isTransformResponse: false,
+    },
+  );
+}
+
+/**
+ * @description: 用户修改密码
+ */
+export function changePassword(params) {
+  return http.request({
+    url: '/login/updatePwd',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 修改用户信息
+ */
+export function editUserInfo(params) {
+  return http.request({
+    url: '/login/updateUser',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 用户登出
+ */
+export function logout(params) {
+  return http.request({
+    url: '/user/doLogout',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 获取用户列表
+ */
+export function getUserList(params) {
+  return http.request({
+    url: '/user/list',
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * @description: 获取在线用户列表
+ */
+export function onlineList(params) {
+  return http.request({
+    url: '/online/userList',
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * @description: 在线用户强制退出
+ */
+export function onlineLogOut(params?) {
+  return http.request({
+    url: '/online/logOut',
+    method: 'GET',
+    params,
+  });
+}

src/api/system/user-operate.ts

@@ -0,0 +1,106 @@
+import { http } from '@/utils/http/axios';
+
+export interface UserType {
+  password?: string;
+  deptId?: number;
+  username?: string;
+  staffNo?: string;
+  mobile?: string;
+  isEnable?: boolean;
+  nickname?: string;
+  roleIds?: string[];
+}
+
+//添加用户
+export function addSingleUser(params: UserType) {
+  return http.request({
+    url: '/user/add',
+    method: 'POST',
+    params,
+  });
+}
+
+//添加批量用户
+export function addMultipleUser(params: File) {
+  return http.request({
+    url: '/user/import',
+    method: 'POST',
+    params,
+  });
+}
+
+export interface UserTypeDel {
+  deleteStatus?: string;
+  deptId?: number;
+  email?: string;
+  isEnable?: boolean;
+  mobile?: string;
+  nickname?: string;
+  opertor?: string;
+  password?: string;
+  postId?: string;
+  remark?: string;
+  roleIds?: string[];
+  sex?: string;
+  staffNo?: string;
+  userId?: number;
+  username?: string;
+  updateTime?: string;
+  createTime?: string;
+}
+
+//删除用户
+export function delUser(params: UserTypeDel) {
+  return http.request({
+    url: '/user/delete',
+    method: 'POST',
+    params,
+  });
+}
+
+//修改用户
+export function updateUser(params: UserType) {
+  return http.request({
+    url: '/user/update',
+    method: 'POST',
+    params,
+  });
+}
+
+//获取单个用户信息
+// export function getUser(params: string): Promise<UserType> {
+//   return http.request({
+//     url: '/user/info',
+//     method: 'get',
+//     params,
+//   });
+// }
+
+export interface UserList {
+  pageNumber: number;
+  totalPage: number;
+  pageSize: number;
+  page: number;
+  list: UserTypeDel[];
+  totalCount: number;
+  pageNum: number;
+}
+
+export interface QueryUser {
+  staffNo?: string; //工号
+  nickname?: string; //姓名
+  mobile?: string; //手机号
+  roleName?: string; //角色
+  deptName?: string; //组织
+  page?: number; //当前页数
+  pageRow?: number; //每页个数
+}
+
+//获取单个用户信息
+export function getUserList(params: QueryUser | null): Promise<UserList> {
+  return http.request({
+    url: '/user/list',
+    method: 'get',
+    params,
+  });
+}

src/api/system/user-query.ts

@@ -0,0 +1,37 @@
+import { http } from '@/utils/http/axios';
+
+export interface Role {
+  roleId: number;
+  roleName: string;
+}
+
+export interface RoleList {
+  list?: Role[];
+}
+
+//获取所有角色
+export function getAllRoles(): Promise<RoleList> {
+  return http.request({
+    url: '/role/getAllRoles',
+    method: 'get',
+  });
+}
+
+export interface Department {
+  deptId: number;
+  createDate: string;
+  modifyDate: string;
+  deptName: string;
+  treePath: string;
+  grade: number;
+  parent: number;
+  orderNum: number | null;
+  isEnable: boolean;
+}
+//获取所有组织
+export function getAllDepartments(): Promise<Department[]> {
+  return http.request({
+    url: '/dept/getAllDept',
+    method: 'get',
+  });
+}

src/api/system/user.ts

@@ -15,7 +15,7 @@ export interface BasicPageParams {
 /**
  * @description: 获取用户信息
  */
-export function getUserInfo(params?) {
+export function getUserInfo(params) {
   return http.request({
     url: '/login/info',
     method: 'POST',

src/views/system/user/component/UserQuery.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="flex items-center query-head">
+    <el-space alignment="center" :size="50">
+      <div>
+        <el-select v-model="queryType" placeholder="选择类型" class="type-select">
+          <el-option
+            v-for="item in queryTypeSelect"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input
+          :style="{ width: '180px' }"
+          v-model="queryTypeContent"
+          clearable
+          placeholder="请输入查找内容"
+        />
+      </div>
+      <div>
+        <span>请选择角色：</span>
+        <el-select v-model="queryRoleName" placeholder="请选择角色" class="protocal-select">
+          <el-option
+            v-for="item in roleList!"
+            :key="item.roleId"
+            :label="item.roleName"
+            :value="item.roleName"
+          />
+        </el-select>
+      </div>
+      <div>
+        <span>请选择组织：</span>
+        <el-select v-model="queryDeptName" placeholder="请选择组织" class="protocal-select">
+          <el-option
+            v-for="item in departmentList"
+            :key="item.deptId"
+            :label="item.deptName"
+            :value="item.deptName"
+          />
+        </el-select>
+        <!-- <el-tree-select
+          v-model="queryWorkSpace"
+          :data="scenesTree"
+          :render-after-expand="false"
+          :default-expand-all="true"
+          check-strictly
+          placeholder="请选择场景"
+          class="protocal-select"
+        /> -->
+      </div>
+    </el-space>
+    <div class="flex-1 flex justify-end">
+      <el-button type="primary" @click="conditionSearch"> 查询 </el-button>
+      <el-button @click="resetSearch"> 重置 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { queryTypeSelect } from '../constant';
+  import useSelectContent from '../hooks/use-user-para';
+  import useUser from '../hooks/use-user';
+  import { storeToRefs } from 'pinia';
+
+  const selectContent = useSelectContent();
+  const { roleList, departmentList } = selectContent;
+
+  const useUserDetail = useUser();
+  const {
+    queryType,
+    queryTypeContent,
+    queryStaffNo,
+    queryNickname,
+    queryMobile,
+    queryRoleName,
+    queryDeptName,
+    userList,
+    page,
+    pageSize,
+    totalCount,
+  } = storeToRefs(useUserDetail);
+  const { conditionSearch, getList, singleUserAdd, multipleUserAdd, userDel, userUpdate } =
+    useUserDetail;
+
+  //   const queryType = ref<string>('');
+  //   const;
+
+  //   const sceneInfos = useSceneInfos();
+  //   const { scenesTree, getScenesTree } = sceneInfos;
+
+  //   const cameraOverview = useCameraOverview();
+  //   const { queryType, queryTypeContent, queryCameraType, queryWorkSpace } =
+  //     storeToRefs(cameraOverview);
+  //   const { getCameraItems } = cameraOverview;
+
+  // 重置查询条件
+  const resetSearch = () => {
+    queryType.value = '';
+    queryTypeContent.value = '';
+    queryRoleName.value = '';
+    queryDeptName.value = '';
+  };
+  const getUserItems = () => {};
+
+  onMounted(() => {
+    // getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name' });
+  });
+</script>
+
+<style scoped>
+  .type-select {
+    width: 100px;
+  }
+
+  .protocal-select {
+    width: 160px;
+  }
+
+  .query-head {
+    padding: 24px 57px 18px 21px;
+  }
+</style>

src/views/system/user/constant.ts

@@ -0,0 +1,35 @@
+export const queryTypeSelect = [
+  {
+    value: 'staffNo',
+    label: '工号',
+  },
+  {
+    value: 'nickname',
+    label: '姓名',
+  },
+  {
+    value: 'mobile',
+    label: '手机号',
+  },
+];
+
+export enum QuerySelect {
+  'staffNo' = 'staffNo',
+  'nickname' = 'nickname',
+  'mobile' = 'mobile',
+}
+
+// export const roleTypeSelect = [
+//   {
+//     value: 'roleCode',
+//     label: '工号',
+//   },
+//   {
+//     value: 'roleName',
+//     label: '姓名',
+//   },
+//   {
+//     value: 'rolePhone',
+//     label: '手机号',
+//   },
+// ];

src/views/system/user/hooks/use-user-para.ts

@@ -0,0 +1,26 @@
+import { getAllRoles, Department, getAllDepartments, Role } from '@/api/system/user-query';
+import { onMounted, ref } from 'vue';
+
+export const getSelectList = () => {
+  const roleList = ref<Role[]>([]);
+  const getRoleList = () => {
+    getAllRoles().then((res) => {
+      roleList.value = res.list!;
+    });
+  };
+
+  const departmentList = ref<Department[]>([]);
+  const getDepartmentList = () => {
+    getAllDepartments().then((res) => {
+      departmentList.value = res;
+    });
+  };
+
+  onMounted(() => {
+    getRoleList();
+    getDepartmentList();
+  });
+
+  return { roleList, getRoleList, departmentList, getDepartmentList };
+};
+export default getSelectList;

src/views/system/user/hooks/use-user.ts

@@ -0,0 +1,156 @@
+import {
+  UserType,
+  addSingleUser,
+  addMultipleUser,
+  UserTypeDel,
+  delUser,
+  updateUser,
+  getUser,
+  UserList,
+  QueryUser,
+  getUserList,
+} from '@/api/system/user-operate';
+import { onMounted, ref } from 'vue';
+import { QuerySelect } from '../constant';
+import { defineStore } from 'pinia';
+
+export const useUser = defineStore('user-list', () => {
+  //查询的类型
+  const queryType = ref<string>('');
+  //查询输入的内容
+  const queryTypeContent = ref<string>('');
+  //查询的工号
+  const queryStaffNo = ref<string>('');
+  //查询的姓名
+  const queryNickname = ref<string>('');
+  //查询的手机号
+  const queryMobile = ref<string>('');
+  //查询的角色
+  const queryRoleName = ref<string>('');
+  //查询的组织
+  const queryDeptName = ref<string>('');
+  //user数据
+  const userList = ref<UserTypeDel[]>([]);
+
+  //编辑时的单个数据
+  //   const userData = ref<UserType>();
+
+  //当前的页数
+  const page = ref<number>(1);
+  //总页数
+  //   const totalPage = ref<number>(1);
+  //每页的数量
+  const pageSize = ref<number>(10);
+  //总数量
+  const totalCount = ref<number>(1);
+
+  //条件查询
+  const conditionSearch = () => {
+    const params: QueryUser = {
+      page: page.value,
+      pageRow: pageSize.value,
+    };
+    if (queryType.value === QuerySelect.staffNo) {
+      queryStaffNo.value = queryTypeContent.value;
+    } else if (queryType.value === QuerySelect.nickname) {
+      queryNickname.value = queryTypeContent.value;
+    } else if (queryType.value === QuerySelect.mobile) {
+      queryMobile.value = queryTypeContent.value;
+    }
+    if (queryStaffNo.value) {
+      params.staffNo = queryStaffNo.value;
+    }
+    if (queryNickname.value) {
+      params.nickname = queryNickname.value;
+    }
+    if (queryMobile.value) {
+      params.mobile = queryMobile.value;
+    }
+    if (queryRoleName.value) {
+      params.roleName = queryRoleName.value;
+    }
+    if (queryDeptName.value) {
+      params.deptName = queryDeptName.value;
+    }
+    getUserList(params).then((res) => {
+      userList.value = res.list;
+      totalCount.value = res.totalCount;
+    });
+  };
+
+  //获取列表
+  const getList = () => {
+    getUserList(null).then((res) => {
+      userList.value = res.list;
+      totalCount.value = res.totalCount;
+    });
+  };
+
+  //添加单个数据
+  const singleUserAdd = (data: UserType) => {
+    addSingleUser(data).then(() => {
+      () => {
+        getList();
+      };
+    });
+  };
+
+  //添加多个数据
+  const multipleUserAdd = (data: File) => {
+    addMultipleUser(data).then(() => {
+      () => {
+        getList();
+      };
+    });
+  };
+
+  //删除用户
+  const userDel = (data: UserTypeDel) => {
+    delUser(data).then(() => {
+      getList();
+    });
+  };
+
+  //修改用户
+  const userUpdate = (data: UserType) => {
+    updateUser(data).then(() => {
+      getList();
+    });
+  };
+
+  //得到单个用户数据
+  //   userData;
+  //   const getSingleUser = () => {
+
+  //   };
+
+  onMounted(() => {
+    getList();
+  });
+
+  return {
+    queryType,
+    queryTypeContent,
+    queryStaffNo,
+    queryNickname,
+    queryMobile,
+    queryRoleName,
+    queryDeptName,
+    userList,
+    page,
+    pageSize,
+    totalCount,
+    conditionSearch,
+    getList,
+    singleUserAdd,
+    multipleUserAdd,
+    userDel,
+    userUpdate,
+  };
+});
+
+//获取单个数据
+
+//修改用户
+
+export default useUser;

src/views/system/user/user-copy.vue

@@ -0,0 +1,161 @@
+<template>
+  <PageWrapper>
+    <el-card :bordered="false" class="mb-3 proCard">
+      <el-space align="center">
+        <el-input
+          :style="{ width: '320px' }"
+          v-model="params.username"
+          clearable
+          placeholder="请输入账号"
+          @keyup.enter="reloadTable"
+        />
+        <el-button type="primary" @click="reloadTable" :icon="Search"> 查询 </el-button>
+      </el-space>
+    </el-card>
+    <el-card :bordered="false" class="proCard">
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.userId"
+        ref="basicTableRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        virtual-scroll
+      >
+        <template #tableTitle>
+          <el-space align="center">
+            <el-button type="primary" @click="openCreateDrawer">
+              <template #icon>
+                <el-icon>
+                  <FileAddOutlined />
+                </el-icon>
+              </template>
+              添加
+            </el-button>
+
+            <!-- <el-button type="error" @click="openRemoveModal" :disabled="!rowKeys.length">
+                <template #icon>
+                  <el-icon>
+                    <DeleteOutlined />
+                  </el-icon>
+                </template>
+                删除
+              </el-button> -->
+          </el-space>
+        </template>
+      </BasicTable>
+    </el-card>
+
+    <CreateDrawer
+      ref="createDrawerRef"
+      :title="drawerTitle"
+      :roleList="roleData"
+      @change="reloadTable"
+    />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, onMounted } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { BasicTable, TableAction, BasicColumn } from '@/components/Table';
+  import { getUserList } from '@/api/system/user';
+  import { FileAddOutlined } from '@vicons/antd';
+  import { roleAllList } from '@/api/system/role';
+  import { delUser } from '@/api/system/user';
+  import CreateDrawer from './CreateDrawer.vue';
+  import { columns } from './columns';
+  import { Search } from '@element-plus/icons-vue';
+
+  const message = ElMessage;
+  const basicTableRef = ref();
+  const rowKeys = ref([]);
+  const rowKeysName = ref([]);
+  const tableData = ref();
+  const createDrawerRef = ref();
+  const drawerTitle = ref('添加用户');
+  const roleData = ref([]);
+
+  const params = reactive({
+    username: '',
+  });
+
+  const actionColumn: BasicColumn = reactive({
+    width: 150,
+    title: '操作',
+    prop: 'action',
+    fixed: 'right',
+    align: 'center',
+    render(record) {
+      return h(TableAction as any, {
+        actions: [
+          {
+            label: '删除',
+            isConfirm: true,
+            popConfirm: {
+              onConfirm: handleDelete.bind(null, record.row),
+              title: '您确定要删除吗？',
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+            },
+          },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record.row),
+          },
+        ],
+      });
+    },
+  });
+
+  const loadDataTable = async (res) => {
+    const result = await getUserList({ ...params, ...res });
+    tableData.value = result.list;
+    return result;
+  };
+
+  function onCheckedRow(keys) {
+    rowKeys.value = keys;
+    rowKeysName.value = tableData.value
+      .filter((item) => {
+        return keys.includes(item.id);
+      })
+      .map((item) => {
+        return item.username;
+      })
+      .join('，');
+  }
+
+  function reloadTable() {
+    basicTableRef.value.reload();
+  }
+
+  function openCreateDrawer() {
+    const { openDrawer } = createDrawerRef.value;
+    openDrawer();
+  }
+
+  function handleEdit(record: Recordable) {
+    console.log('点击了编辑', record);
+    drawerTitle.value = '编辑用户';
+    const { openDrawer } = createDrawerRef.value;
+    openDrawer(record.userId);
+  }
+
+  function handleDelete(record: Recordable) {
+    delUser({ userId: record.userId }).then(() => {
+      message.success('删除成功');
+      reloadTable();
+    });
+  }
+
+  onMounted(async () => {
+    const res = await roleAllList();
+    roleData.value = res.list.map((item: any) => {
+      return {
+        value: item.roleId,
+        label: item.roleName,
+      };
+    });
+  });
+</script>

src/views/system/user/user.vue

@@ -1,26 +1,25 @@
 <template>
-  <PageWrapper>
-    <el-card :bordered="false" class="mb-3 proCard">
-      <el-space align="center">
-        <el-input
-          :style="{ width: '320px' }"
-          v-model="params.username"
-          clearable
-          placeholder="请输入账号"
-          @keyup.enter="reloadTable"
-        />
-        <el-button type="primary" @click="reloadTable" :icon="Search"> 查询 </el-button>
-      </el-space>
-    </el-card>
-    <el-card :bordered="false" class="proCard">
+  <div class="user-page">
+    <UserQuery />
+    <div class="user-list">
       <BasicTable
         :columns="columns"
-        :request="loadDataTable"
+        :data-source="userList"
         :row-key="(row) => row.userId"
         ref="basicTableRef"
+        :pagination="{ total: totalCount, pageSize: pageSize }"
         :actionColumn="actionColumn"
+        :tableSetting="{
+          size: false,
+          redo: false,
+          fullscreen: false,
+          striped: false,
+          setting: false,
+        }"
         @update:checked-row-keys="onCheckedRow"
         virtual-scroll
+        @page-num-change="handlePageNumChange"
+        @page-size-change="handlePageSizeChange"
       >
         <template #tableTitle>
           <el-space align="center">
@@ -32,19 +31,13 @@
               </template>
               添加
             </el-button>
-
-            <!-- <el-button type="error" @click="openRemoveModal" :disabled="!rowKeys.length">
-              <template #icon>
-                <el-icon>
-                  <DeleteOutlined />
-                </el-icon>
-              </template>
-              删除
-            </el-button> -->
           </el-space>
         </template>
       </BasicTable>
-    </el-card>
+    </div>
+  </div>
+  <!-- <PageWrapper>
+    <el-card :bordered="false" class="proCard"> </el-card>
 
     <CreateDrawer
       ref="createDrawerRef"
@@ -52,7 +45,7 @@
       :roleList="roleData"
       @change="reloadTable"
     />
-  </PageWrapper>
+  </PageWrapper> -->
 </template>
 
 <script lang="ts" setup>
@@ -63,9 +56,29 @@
   import { FileAddOutlined } from '@vicons/antd';
   import { roleAllList } from '@/api/system/role';
   import { delUser } from '@/api/system/user';
-  import CreateDrawer from './CreateDrawer.vue';
+  // import CreateDrawer from './CreateDrawer.vue';
   import { columns } from './columns';
-  import { Search } from '@element-plus/icons-vue';
+  // import { Search } from '@element-plus/icons-vue';
+  import UserQuery from './component/UserQuery.vue';
+  import useUser from './hooks/use-user';
+  import { storeToRefs } from 'pinia';
+
+  const useUserDetail = useUser();
+  const {
+    queryType,
+    queryTypeContent,
+    queryStaffNo,
+    queryNickname,
+    queryMobile,
+    queryRoleName,
+    queryDeptName,
+    userList,
+    page,
+    pageSize,
+    totalCount,
+  } = storeToRefs(useUserDetail);
+  const { conditionSearch, getList, singleUserAdd, multipleUserAdd, userDel, userUpdate } =
+    useUserDetail;
 
   const message = ElMessage;
   const basicTableRef = ref();
@@ -76,6 +89,19 @@
   const drawerTitle = ref('添加用户');
   const roleData = ref([]);
 
+  //分页
+  // const total = ref();
+  // const pageSize = ref();
+  const handlePageNumChange = (pageNum) => {
+    // page.value = pageNum;
+    // getCameraItems();
+    console.log(pageNum);
+  };
+  const handlePageSizeChange = (pageSize) => {
+    // size.value = pageSize;
+    // getCameraItems();
+    console.log(pageSize);
+  };
   const params = reactive({
     username: '',
   });
@@ -159,3 +185,14 @@
     });
   });
 </script>
+<style scoped>
+  .user-page {
+    position: relative;
+    height: calc(100vh - 64px - 12px);
+    background-color: #ffffff;
+  }
+
+  .user-list {
+    padding: 0 21px;
+  }
+</style>