用户管理 接口+样式

.env.development

@@ -5,7 +5,7 @@ VITE_PORT = 8092
 VITE_PUBLIC_PATH = /
 
 # 是否开启mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # 网站前缀
 VITE_BASE_URL = /

src/api/system/user-operate.ts

@@ -1,8 +1,9 @@
 import { http } from '@/utils/http/axios';
 
 export interface UserType {
+  userId?: number;
   password?: string;
-  deptId?: number;
+  deptId?: number | null;
   username?: string;
   staffNo?: string;
   mobile?: string;

src/views/login/LoginForm2.vue

@@ -138,7 +138,7 @@
   import { ResultEnum } from '@/enums/httpEnum';
   import { initData, captchaBase64, tentantList } from '@/api/common/index';
   import { CodeOutlined } from '@vicons/antd';
-  import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';//LogoGithub, LogoFacebook 
+  import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'; //LogoGithub, LogoFacebook
   import { PageEnum } from '@/enums/pageEnum';
 
   interface FormState {

src/views/system/user/CreateDrawer.vue

@@ -104,8 +104,28 @@
   // import { deptTreeList } from '@/api/auth/dept';
   import { cloneDeep } from 'lodash-es';
   // import { replaceParams } from '@/utils/helper/treeHelper';
-  import { UserType } from '@/api/system/user-operate';
+  import { UserType, addSingleUser, updateUser } from '@/api/system/user-operate';
   import useSelectContent from './hooks/use-user-para';
+  // import { singleUserAdd } from './hooks/use-user';
+  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 selectContent = useSelectContent();
   const { roleList, departmentList } = selectContent;
@@ -164,7 +184,8 @@
   const postDataList = ref<PostOption[]>([]);
   const defaultValueRef = () => ({
     password: '',
-    deptId: -1,
+    passwordRe: '',
+    deptId: null,
     username: '',
     staffNo: '',
     mobile: '',
@@ -215,28 +236,81 @@
       //   params.postId = '';
       // }
       // 处理部门
+      console.log('params', params);
+
       if (params.deptId) {
         params.deptId = params.deptId;
       }
       if (params.password != params.passwordRe) {
         return message.error('两次密码不一致');
       }
-      const msg = params.username ? '编辑成功' : '添加成功';
-      if (params.username) {
-        editUsur(params).then((_) => {
-          message.success(msg);
+      // const msg = params.username ? '编辑成功' : '添加成功';
+      if (props.title === '添加用户') {
+        const addData = {
+          password: formParams.value.password,
+          deptId: formParams.value.deptId,
+          username: formParams.value.username,
+          staffNo: formParams.value.staffNo,
+          mobile: formParams.value.mobile,
+          isEnable: formParams.value.isEnable,
+          nickname: formParams.value.nickname,
+          roleIds: formParams.value.roleIds,
+        };
+        addSingleUser(addData).then(() => {
           emit('change');
           handleReset();
           closeDrawer();
         });
+        // singleUserAdd(addData);
       } else {
-        addUsur(params).then((_) => {
-          message.success(msg);
+        const updateData = {
+          userId: params.userId,
+          password: formParams.value.password,
+          deptId: formParams.value.deptId,
+          username: formParams.value.username,
+          staffNo: formParams.value.staffNo,
+          mobile: formParams.value.mobile,
+          isEnable: formParams.value.isEnable,
+          nickname: formParams.value.nickname,
+          roleIds: formParams.value.roleIds,
+        };
+        updateUser(updateData).then(() => {
           emit('change');
           handleReset();
           closeDrawer();
         });
+
+        // editUsur(params).then((_) => {
+        //   message.success(msg);
+        //   emit('change');
+        //   handleReset();
+        //   closeDrawer();
+        // });
+        // addUsur(params).then((_) => {
+        //   message.success(msg);
+        //   emit('change');
+        //   handleReset();
+        //   closeDrawer();
+        // });
+        // const addData = {
+        //   password: formParams.value.password,
+        //   deptId: formParams.value.deptId,
+        //   username: formParams.value.username,
+        //   staffNo: formParams.value.staffNo,
+        //   mobile: formParams.value.mobile,
+        //   isEnable: formParams.value.isEnable,
+        //   nickname: formParams.value.nickname,
+        //   roleIds: formParams.value.roleIds,
+        // };
+        // addSingleUser(addData).then(() => {
+        //   emit('change');
+        //   handleReset();
+        //   closeDrawer();
+        // });
       }
+      // emit('change');
+      // handleReset();
+      // closeDrawer();
     });
   }
 
@@ -253,14 +327,15 @@
         email: res.email,
         mobile: res.mobile,
         nickname: res.nickname,
-        password: '',
-        passwordRe: '',
+        password: res.password,
+        passwordRe: res.password,
         remark: res.remark,
         sex: res.sex,
         username: res.username,
         roleIds: res.roleIds,
         postId: res.postId ? res.postId.split(',').map(Number) : null,
         deptId: res.deptId || null,
+        staffNo: res.staffNo,
       };
       formParams.value = Object.assign(formParams.value, params);
       isDrawer.value = true;

src/views/system/user/columns.ts

@@ -65,7 +65,7 @@ export const columns: BasicColumn[] = [
   // },
   {
     label: '用户名',
-    prop: 'username',
+    prop: 'nickname',
   },
   {
     label: '手机',

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

@@ -1,64 +1,155 @@
 <template>
-  <el-card v-if="props.modelValue" class="pop-card">
-    <template #header>
-      <div class="flex justify-between items-center pop-head">
-        <div style="font-size: 16px">批量导入</div>
-        <el-icon :size="16" class="mr-3" @click="updateValue(false)"><Close /></el-icon
-      ></div>
-    </template>
-    <div class="upload-content">
-      <el-upload
-        ref="upload"
-        class="upload-demo"
-        drag
-        action="http://localhost:8092/api/user/import"
-        :headers="headers"
-        :with-credentials="true"
-        :auto-upload="false"
-        :before-upload="beforeUpload"
-        :on-success="handleUploadSuccess"
-        :on-error="handleUploadError"
-        style="width: 384px; height: 192px; border-radius: 8px"
-      >
-        <el-icon class="el-icon--upload" style="width: 33px; height: 42px"><Document /></el-icon>
-        <div class="el-upload__text">
-          <div style="font-size: 16px">点击或将文件拖拽到这里上传</div>
-          <div style="font-size: 14px; color: rgba(0, 0, 0, 0.45)"
-            >文件只支持：.xlsx .xls .仅支持上传一个文件</div
-          ></div
+  <div v-if="props.modelValue">
+    <el-card v-if="cardVisible" class="pop-card">
+      <template #header>
+        <div class="flex justify-between items-center pop-head">
+          <div style="font-size: 16px">批量导入</div>
+          <el-icon :size="16" class="mr-3" @click="updateValue(false)"><Close /></el-icon
+        ></div>
+      </template>
+      <div class="upload-content">
+        <el-upload
+          ref="upload"
+          class="upload-demo"
+          drag
+          action="http://localhost:8092/api/user/import"
+          :headers="headers"
+          :with-credentials="true"
+          :auto-upload="false"
+          :before-upload="beforeUpload"
+          :on-success="handleUploadSuccess"
+          style="width: 384px; height: 192px; border-radius: 8px"
         >
-      </el-upload>
-      <div style="margin-top: 52px; margin-left: 288px; display: flex">
-        <el-button @click="handleDownload" style="margin-right: 10px">下载模板</el-button>
-        <el-button type="primary" @click="handleImport">导入</el-button></div
-      ></div
+          <el-icon class="el-icon--upload" style="width: 33px; height: 42px"><Document /></el-icon>
+          <div class="el-upload__text">
+            <div style="font-size: 16px">点击或将文件拖拽到这里上传</div>
+            <div style="font-size: 14px; color: rgba(0, 0, 0, 0.45)"
+              >文件只支持：.xlsx .xls .仅支持上传一个文件</div
+            ></div
+          >
+        </el-upload>
+        <div style="margin-top: 52px; margin-left: 288px; display: flex">
+          <el-button @click="handleDownload" style="margin-right: 10px">下载模板</el-button>
+          <el-button type="primary" @click="handleImport">导入</el-button></div
+        ></div
+      >
+    </el-card>
+    <!-- //上传成功 -->
+    <el-dialog
+      v-model="DialogVisibleSuc"
+      title="Warning"
+      width="30%"
+      @close="
+        () => {
+          emits('update:modelValue', false);
+        }
+      "
+      align-center
+    >
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header">
+          <h4 :id="titleId" :class="titleClass" style="display: flex">
+            <el-icon style="margin-top: 2px"><CircleCheck /></el-icon
+            ><div style="margin-left: 14px">导入成功</div></h4
+          >
+        </div>
+      </template>
+      <span> 已成功添加{{ sucCount }}条用户信息</span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="handleRightComfirm"> 确定 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 上传失败 -->
+    <el-dialog
+      v-model="DialogVisibleErr"
+      title="Warning"
+      width="30%"
+      @close="
+        () => {
+          emits('update:modelValue', false);
+        }
+      "
+      align-center
     >
-  </el-card>
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header">
+          <h4 :id="titleId" :class="titleClass" style="display: flex">
+            <el-icon style="margin-top: 2px"><Warning /></el-icon>
+            <div style="margin-left: 14px">导入失败</div></h4
+          >
+        </div>
+      </template>
+      <ul v-for="(item, index) in errDetail" :key="index">
+        <li v-if="index < 3">{{ item }} </li>
+        <li v-else v-show="showMore">{{ item }}</li>
+      </ul>
+      <div v-if="errDetail.length > 3 && !showMore" @click="showMore = true" class="more-link"
+        >更多</div
+      >
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="handleErrComfirm"> 确定 </el-button>
+        </span>
+      </template>
+    </el-dialog></div
+  >
 </template>
 
 <script setup lang="ts">
-  import { Close, Document } from '@element-plus/icons-vue';
-  import { ref } from 'vue';
+  import { Close, Document, CircleCheck, Warning } from '@element-plus/icons-vue';
+  import { nextTick, ref } from 'vue';
   import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
   import { downloadByUrl } from '@/utils/file/download';
   //   import templateUrl from './templete.xlsx';
   import { useUserStore } from '@/store/modules/user';
+  import { onMounted } from 'vue';
   //   http://localhost:8092/api/user/import
 
   const userStore = useUserStore();
 
+  onMounted(() => {
+    console.log('111');
+
+    console.log('props.modelValue', props.modelValue);
+
+    cardVisible.value = props.modelValue;
+  });
+
+  // const emit = defineEmits()
+  // const emit = defineEmits<{
+  //   (e: 'change'): unknown;
+  // }>();
+  // const emit = defineEmits(['change']);
+
+  // const emit = defineEmits<{
+  //   (e: 'onOk'): unknown;
+  //   (e: 'onClose'): unknown;
+  // }>();
+
   const headers = {
     Satoken: userStore.getToken,
     Tenantid: userStore.getTenantId,
   };
 
+  const cardVisible = ref<boolean>(true);
+
+  //对话框
+  const DialogVisibleSuc = ref<boolean>(false);
+  const DialogVisibleErr = ref<boolean>(false);
+
+  //更多
+  const showMore = ref(false);
+
   const isSuc = ref<boolean>(true);
   const errDetail = ref<string[]>([]);
   const sucCount = ref<number>(0);
   //   console.log('headers', headers);
 
   const props = defineProps<{ modelValue: boolean }>();
-  const emits = defineEmits(['update:modelValue']);
+  const emits = defineEmits(['update:modelValue', 'change']);
 
   const updateValue = (value) => {
     emits('update:modelValue', value);
@@ -73,8 +164,6 @@
   };
   const handleImport = async () => {
     upload.value!.submit();
-
-    // emits('update:modelValue', false);
   };
 
   const beforeUpload = (file) => {
@@ -91,13 +180,37 @@
     console.log('response', response);
     isSuc.value = response.data.isSuc;
     errDetail.value = response.data.failedInfo;
-    sucCount.value = response.data.sucCount;
-    console.log(isSuc.value, errDetail.value);
+    sucCount.value = response.data.sucCount || 0;
+    console.log('errDetail', errDetail.value);
+
+    if (isSuc.value) {
+      DialogVisibleSuc.value = true;
+      DialogVisibleErr.value = false;
+    } else {
+      DialogVisibleSuc.value = false;
+      DialogVisibleErr.value = true;
+    }
+    cardVisible.value = false;
+    // emits('update:modelValue', false);
   };
-  const handleUploadError = (err, file, fileList) => {
-    console.log('222');
-    console.log(err);
+
+  const handleRightComfirm = () => {
+    DialogVisibleSuc.value = false;
+    emits('update:modelValue', false);
+    emits('change');
+  };
+  const handleErrComfirm = () => {
+    DialogVisibleErr.value = false;
+    emits('update:modelValue', false);
+    emits('change');
   };
+
+  // const handleUploadError = (err, file, fileList) => {
+  //   console.log('222');
+  //   console.log(err);
+  // };
+
+  //对话框
 </script>
 
 <style scoped>
@@ -105,4 +218,8 @@
     margin-left: 96px;
     margin-top: 36px;
   }
+
+  .more-link {
+    color: #1890ff;
+  }
 </style>

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

@@ -83,29 +83,17 @@
   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 = '';
+    queryStaffNo.value = '';
+    queryNickname.value = '';
+    queryMobile.value = '';
   };
-  const getUserItems = () => {};
-
-  onMounted(() => {
-    // getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name' });
-  });
+  // const getUserItems = () => {};
 </script>
 
 <style scoped>

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

@@ -128,6 +128,7 @@ export const useUser = defineStore('user-list', () => {
 
   onMounted(() => {
     getList();
+    console.log('userList', userList.value);
   });
 
   return {

src/views/system/user/user.vue

@@ -7,7 +7,7 @@
         :data-source="userList"
         :row-key="(row) => row.userId"
         ref="basicTableRef"
-        :pagination="{ total: totalCount, pageSize: pageSize }"
+        :pagination="{ total: totalCount, pageSize: pageSize, hideOnSinglePage: false }"
         :actionColumn="actionColumn"
         :tableSetting="{
           size: false,
@@ -50,7 +50,12 @@
     </div>
     <CreateDrawer ref="createDrawerRef" :title="drawerTitle" @change="reloadTable" />
     <!-- <Download /> -->
-    <AddUser v-model="showAddPopover" class="add-popover" />
+    <AddUser
+      v-if="showAddPopover"
+      v-model="showAddPopover"
+      class="add-popover"
+      @change="reloadTable"
+    />
   </div>
   <!-- <PageWrapper>
     <el-card :bordered="false" class="proCard"> </el-card>
@@ -86,19 +91,7 @@
   import { storeToRefs } from 'pinia';
 
   const useUserDetail = useUser();
-  const {
-    queryType,
-    queryTypeContent,
-    queryStaffNo,
-    queryNickname,
-    queryMobile,
-    queryRoleName,
-    queryDeptName,
-    userList,
-    page,
-    pageSize,
-    totalCount,
-  } = storeToRefs(useUserDetail);
+  const { userList, page, pageSize, totalCount } = storeToRefs(useUserDetail);
   const { conditionSearch, getList, singleUserAdd, multipleUserAdd, userDel, userUpdate } =
     useUserDetail;
 
@@ -175,7 +168,7 @@
   }
 
   function reloadTable() {
-    basicTableRef.value.reload();
+    getList();
   }
 
   // function openAddSingleDrawer() {
@@ -184,6 +177,7 @@
   // }
 
   const openAddSingleDrawer = () => {
+    drawerTitle.value = '添加用户';
     const { openDrawer } = createDrawerRef.value;
     openDrawer();
   };
@@ -192,6 +186,7 @@
 
   const openAddMultipleDrawer = () => {
     showAddPopover.value = true;
+    console.log('showAddPopover', showAddPopover.value);
   };
 
   function handleEdit(record: Recordable) {
@@ -202,10 +197,16 @@
   }
 
   function handleDelete(record: Recordable) {
-    delUser({ userId: record.userId }).then(() => {
-      message.success('删除成功');
-      reloadTable();
-    });
+    // delUser({ userId: record.userId }).then(() => {
+    //   message.success('删除成功');
+    //   reloadTable();
+    // });
+    const delDetail = {
+      userId: record.userId,
+      nickname: record.nickname,
+      username: record.username,
+    };
+    userDel(delDetail);
   }
 
   onMounted(async () => {