fix: '运维用户批量导入导出功能优化'

src/pages/userCenter/userManage/UserManage.jsx

@@ -19,12 +19,15 @@ import {
   Form,
   Radio,
   Pagination,
-  Upload
+  Upload,
+  Alert
 } from 'antd';
 import {
   UserOutlined,
   UserAddOutlined,
   UsergroupAddOutlined,
+  SnippetsOutlined,
+  UserSwitchOutlined,
   EditOutlined,
   EditTwoTone,
   DeleteOutlined,
@@ -44,6 +47,7 @@ import {
   SyncOutlined,
   ClusterOutlined,
   MessageOutlined,
+  UploadOutlined
 } from '@ant-design/icons';
 import PageContainer from '@/components/BasePageContainer';
 import { encipher } from '@wisdom-utils/utils/lib/helpers';
@@ -75,7 +79,7 @@ import {
   ChangeSMSState,
   AddUserAppBindWhiteList,
   ExportUserData,
-  ImportAccountData,
+  ImportUserData,
   GetPasswordRegularization,
   SysConfiguration
 } from '@/services/userManage/api';
@@ -192,7 +196,8 @@ const UserManage = () => {
   const [rules, setRules] = useState();
   const [btnDisabled, setBtnDisabled] = useState(true);
   const [pasType, setPasType] = useState('');
-
+  const [file, setFile] = useState(''); // 上传文件信息
+  const [alertTxt, setAlertTxt] = useState(''); // 上传文件信息
   const [importUserForm] = Form.useForm(); // 添加用户
 
   const getPasswordRule = () => {
@@ -941,20 +946,19 @@ const UserManage = () => {
 
   /** ***其他操作*** */
   // 导出用户
-  const exportRoles = async () => {
+  const exportRoles = async (data) => {
     // menuID
     // searchWord
     // pageSize
     // currentPage
-    console.log(menuID, 'menuIDmenuIDmenuID');
 
 
     ExportUserData({
-      groupId: menuID ? menuID : 0,
-      key: searchWord,
-      isModel: false,
+      groupId: data.all ? 0 : menuID ? menuID : 0,
+      key: data.all ? '' : searchWord,
+      isModel: data.isModal ? true : false,
     }).then(res => {
-      // window.open(`${window.origin}/${res.data}`)
+      // window.open(`http:192.168.10.167:8088/${res.data}`)
       window.open(`${window.origin}/${res.data}`)
       console.log(res, 'resssssssssssssssssss');
     })
@@ -1575,6 +1579,39 @@ const UserManage = () => {
     </Menu>
   );
 
+  // 本地上传文件
+  const beforeUpload = val => {
+    console.log(val);
+    importUserForm.setFieldsValue({ fileName: val.name });
+    setFile(val);
+    return false;
+  };
+
+  const handleOk = () => {
+    // if(!file) {
+    //   message.error('请上传文件！')
+    //   return false
+    // }
+    importUserForm.validateFields().then(res => {
+      console.log(res, 'resssssssssssss');
+      const formData = new FormData();
+      formData.append('file', file);
+      const params = { query: encipher((res.password), pasType ? pasType : '').toUpperCase(), data: formData }
+      console.log(params, 'paramssssssssssssssss');
+
+      ImportUserData(params).then(res => {
+        console.log(res, 'ressssssssssssssss');
+        if (res.code === 0 && res.data.includes('成功')) {
+          message.success('导入成功！')
+          setImportAccountVisible(false);
+          // setAlertTxt('1116666')
+        } else {
+          setAlertTxt(res.data)
+        }
+      })
+    })
+  }
+
   // 校验文件名字不为空
   const filenameVerification = (file, special) => {
     // 文件名含有特殊字符  提示不能上传   {+,:/?#[]@!$&\\*+;=}
@@ -1628,15 +1665,21 @@ const UserManage = () => {
   const otherButtonMenu = (
     <Menu>
       {/* <Upload {...props}> */}
-      <Menu.Item key="11" onClick={importRoles} icon={<IdcardOutlined />}>
-        批量导入角色
+      <Menu.Item key="11" onClick={importRoles} icon={<UsergroupAddOutlined />}>
+        导入用户
       </Menu.Item>
       {/* </Upload> */}
       {/* <Menu.Item key="11" onClick={importRoles} icon={<IdcardOutlined />}>
         批量导入角色
       </Menu.Item> */}
-      <Menu.Item key="22" onClick={exportRoles} icon={<ApartmentOutlined />}>
-        批量导出角色
+      <Menu.Item key="22" onClick={() => { exportRoles({ isModal: true }) }} icon={<SnippetsOutlined />}>
+        导出模板
+      </Menu.Item>
+      <Menu.Item key="33" onClick={() => {exportRoles({ all: true })}} icon={<UserSwitchOutlined />}>
+        导出全部用户
+      </Menu.Item>
+      <Menu.Item key="44" onClick={exportRoles} icon={<UserSwitchOutlined />}>
+        导出用户
       </Menu.Item>
     </Menu>
   );
@@ -2030,27 +2073,30 @@ const UserManage = () => {
         destroyOnClose
         onCancel={() => {
           setImportAccountVisible(false);
+          setAlertTxt('')
         }}
         afterClose={() => {
           importUserForm.resetFields();
           setPasswordLevel('');
+          setAlertTxt('')
         }}
+        width={520}
         okText="确认"
         cancelText="取消"
         footer={[
           <Button key="back" onClick={() => setImportAccountVisible(false)} style={{ 'marginRight': '5px' }}>
             取消
           </Button>,
-          <Upload {...uploadProps}>
-            <Button key="submit"
-              type="primary"
-              // loading={loading}
-              // onClick={handleOk}
-              disabled={btnDisabled}
-            >
-              确认
-            </Button>
-          </Upload>,
+          // <Upload {...uploadProps}>
+          <Button key="submit"
+            type="primary"
+            // loading={loading}
+            onClick={handleOk}
+          // disabled={btnDisabled}
+          >
+            确认
+          </Button>
+          // </Upload>,
         ]}
       >
         <div className={styles.modalContent}>
@@ -2084,6 +2130,64 @@ const UserManage = () => {
                   }}
                 />
               </Form.Item>
+              <Form.Item
+                hasFeedback
+                name="password2"
+                label="确认密码"
+                rules={[
+                  ({ getFieldValue }) => ({
+                    validator(_, value) {
+                      if (!value || getFieldValue('password') === value) {
+                        return Promise.resolve();
+                      }
+                      return Promise.reject(new Error('两次输入的密码不一致!'));
+                    },
+                  }),
+                  { required: true },
+                ]}
+              >
+                <Input.Password
+                  placeholder={'请确认密码'}
+                  maxLength="16"
+                  onCopy={e => {
+                    e.preventDefault();
+                  }}
+                  onPaste={e => {
+                    // 禁止粘贴
+                    e.preventDefault();
+                  }}
+                />
+              </Form.Item>
+              <Form.Item label="本地导入">
+                <div style={{ display: 'flex' }}>
+                  <Form.Item
+                    name="fileName"
+                    style={{ marginBottom: '0' }}
+                    rules={[
+                      { required: true, message: '请上传文件！' },
+                    ]}>
+                    <Input disabled />
+                  </Form.Item>
+                  <Upload beforeUpload={beforeUpload} showUploadList={false}>
+                    <Button
+                      type="primary"
+                      style={{ marginLeft: '10px' }}
+                      icon={<UploadOutlined />}
+                      shape="circle"
+                    />
+                  </Upload>
+                </div>
+              </Form.Item>
+              {alertTxt ? <Alert
+                message="错误信息"
+                description={
+                  <div dangerouslySetInnerHTML={{__html: alertTxt}} />
+                }
+                type="error"
+                closable
+              // onClose={onClose}
+              /> : null}
+
               <div
                 style={{ right: '70px' }}
                 className={classnames(styles.tipsText, {

src/services/userManage/api.js

@@ -206,7 +206,14 @@ export const AddUserAppBindWhiteList = params =>
 export const ExportUserData = params => get(`${PUBLISH_SERVICE}/UserCenter/ExportUserData`, params);
 
 // 导入用户
-export const ImportAccountData = params =>
-  post(`${PUBLISH_SERVICE}/UserCenter/ImportAccountData`, params);
+// export const ImportUserData = params =>
+//   post(`${PUBLISH_SERVICE}/UserCenter/ImportUserData`, params);
+
+  export const ImportUserData = params =>
+    post(`${PUBLISH_SERVICE}/UserCenter/ImportUserData?password=${params.query}`, params.data, {
+      headers: {
+        'Content-Type': 'multipart/form-data;charset=UTF-8',
+      },
+    });
 // export const DeleteOUNew = params =>
 // get(`${PUBLISH_SERVICE}/UserCenter/DeleteOU`, params)