人员签到绑定

src/api/Home/User/index.ts

@@ -57,4 +57,30 @@ export const PostUserImport = (data: any) =>
     url: `/user/import`,
     method: 'post',
     data
-  })
+  })
+
+export const GetSigninList = () =>
+  request({
+    url: `/user/signin-list`,
+    method: 'get',
+  })
+
+export const PostUserImportSigninList = (data: any) =>
+  request({
+    url: `/user/import/signin-list`,
+    method: 'post',
+    data
+  })
+
+export const GetSigns = (uid: string) =>
+  request({
+    url: `/user/signs?uid=${uid}`,
+    method: 'get',
+  })
+
+export const PutSigns = (uid: string, data: any) =>
+  request({
+    url: `/user/signs?uid=${uid}`,
+    method: 'put',
+    data,
+  })

src/page/Home/User/index.module.scss

@@ -98,4 +98,19 @@
       text-align: right;
     }
   }
+}
+
+.signInUserModal {
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+
+  >div:nth-child(1) {
+    flex-grow: 1;
+    overflow-y: auto;
+  }
+
+  >div:nth-child(2) {
+    flex-shrink: 0;
+  }
 }

src/page/Home/User/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from "react";
 import Operation from '@/components/Operation';
 import { Button, Input, Table, Pagination, Modal, message, Select } from "antd";
 import { ExclamationCircleFilled, SearchOutlined } from '@ant-design/icons';
-import { GetUserList, PostUser, PutUser, DeleteUser, PutUserPwd, GetRoleDpList, PostUserImport, GetSubDpList, PutUserBth } from '@/api/Home/User';
+import { GetUserList, PostUser, PutUser, DeleteUser, PutUserPwd, GetRoleDpList, PostUserImport, GetSubDpList, PutUserBth, GetSigninList, PostUserImportSigninList, GetSigns, PutSigns } from '@/api/Home/User';
 import * as CryptoJS from 'crypto-js';
 import ImageUrl from '@/utils/package/imageUrl';
 import { storage } from '@/utils';
@@ -35,8 +35,14 @@ const User: React.FC = () => {
     year: '0',
   })
   const [changeUserPawModal, setChangeUserPawModal] = useState(false)
+  const [signInModal, setSignInModal] = useState(false)
+  const [signInUserModal, setSignInUserModal] = useState(false)
+  const [signInUserForm, setSignInUserForm] = useState({
+    currentUserList: [],
+    uid: ''
+  })
   const [changeImportModal, setChangeImportModal] = useState(false)
-  const [changeUserPawFrom, setChangeUserPawFrom] = useState({
+  const [changeUserPawForm, setChangeUserPawForm] = useState({
     Pwd: "",
     newPwd: '',
   })
@@ -94,6 +100,7 @@ const User: React.FC = () => {
       const buffer = Buffer.from(arrayBuffer);
       await fs.writeFile(`${setting.shareFilesPath}\\${data.fileName}`, buffer, {});
       setChangeImportModal(false)
+      setSignInModal(false)
       confirm({
         title: '提示',
         icon: <ExclamationCircleFilled />,
@@ -207,6 +214,13 @@ const User: React.FC = () => {
             >
               删除用户
             </Button>
+            <Button type="primary"
+              onClick={() => {
+                setSignInModal(true)
+              }}
+              className='m-ant-btn'>
+              签到绑定
+            </Button>
           </div>
           <div className={`${styles.userBtnsRight} drag`}>
             <Input
@@ -260,7 +274,7 @@ const User: React.FC = () => {
                 <div>{subjectList.find((subject: any) => subject.value === item.subject)?.label}</div>
               </>
             )} />
-            <Column title="操作" width={200} render={(item) => (
+            <Column title="操作" width={300} render={(item) => (
               <>
                 <Button
                   type="primary"
@@ -288,7 +302,7 @@ const User: React.FC = () => {
                   style={{ backgroundColor: '#715AFF40', marginRight: '14px' }}
                   size={'small'}
                   onClick={() => {
-                    setChangeUserPawFrom({
+                    setChangeUserPawForm({
                       Pwd: "",
                       newPwd: '',
                     })
@@ -301,6 +315,25 @@ const User: React.FC = () => {
                     })
                     setChangeUserPawModal(true)
                   }}>更改密码</Button>
+                <Button
+                  type="primary"
+                  style={{ backgroundColor: '#0085FF30', marginRight: '14px' }}
+                  size={'small'}
+                  onClick={() => {
+                    setSignInUserForm({
+                      currentUserList: [],
+                      uid: item.id,
+                    })
+                    GetSigns(item.id).then(res => {
+                      if (res.code === 200) {
+                        setSignInUserForm({
+                          uid: item.id,
+                          currentUserList: res.data,
+                        })
+                        setSignInUserModal(true)
+                      }
+                    })
+                  }}>签到绑定</Button>
               </>
             )} />
           </Table>
@@ -478,10 +511,10 @@ const User: React.FC = () => {
               <Input.Password
                 placeholder="请输入新密码"
                 style={{ flexGrow: 1 }}
-                value={changeUserPawFrom.Pwd}
+                value={changeUserPawForm.Pwd}
                 onChange={(e) => {
-                  setChangeUserPawFrom({
+                  setChangeUserPawForm({
-                    ...changeUserPawFrom,
+                    ...changeUserPawForm,
                     Pwd: e.target.value,
                   });
                 }}
@@ -492,10 +525,10 @@ const User: React.FC = () => {
               <Input.Password
                 placeholder="再次输入密码"
                 style={{ flexGrow: 1 }}
-                value={changeUserPawFrom.newPwd}
+                value={changeUserPawForm.newPwd}
                 onChange={(e) => {
-                  setChangeUserPawFrom({
+                  setChangeUserPawForm({
-                    ...changeUserPawFrom,
+                    ...changeUserPawForm,
                     newPwd: e.target.value,
                   });
                 }}
@@ -507,14 +540,14 @@ const User: React.FC = () => {
           }}>
             <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setChangeUserPawModal(false)}>取消</Button>
             <Button type="primary" className='m-ant-btn' onClick={async () => {
-              if (!changeUserPawFrom.Pwd || !changeUserPawFrom.newPwd) {
+              if (!changeUserPawForm.Pwd || !changeUserPawForm.newPwd) {
                 return message.error('请输入密码！')
               }
-              if (changeUserPawFrom.Pwd !== changeUserPawFrom.newPwd) {
+              if (changeUserPawForm.Pwd !== changeUserPawForm.newPwd) {
                 return message.error('新密码与确认密码不一致！')
               }
 
-              await PutUserPwd({ id: addUserFrom.Id, pwd: CryptoJS.MD5(changeUserPawFrom.Pwd).toString(CryptoJS.enc.Hex) }).then(res => {
+              await PutUserPwd({ id: addUserFrom.Id, pwd: CryptoJS.MD5(changeUserPawForm.Pwd).toString(CryptoJS.enc.Hex) }).then(res => {
                 if (res.code === 200) {
                   setChangeUserPawModal(false)
                   message.success('修改成功')
@@ -609,6 +642,129 @@ const User: React.FC = () => {
           </div>
         </div>
       </Modal>
+      <Modal title='签到绑定' open={signInModal} onCancel={() => setSignInModal(false)} footer={null} centered width={'300px'}>
+        <div>
+          <div>
+            <Button type="primary" className='m-ant-btn' style={{ width: '100%', marginBottom: '10px' }}
+              onClick={async () => {
+                const setting = await JSON.parse(storage.getItem('setting') as string)
+                await GetSigninList().then(res => {
+                  if (res.code === 200) {
+                    const fileName = res.data.split('/').pop().split('?')[0];
+                    fileUpLoad({
+                      url: res.data,
+                      content: `下载签到模板成功！文件已保存至:${setting.shareFilesPath}`,
+                      fileName: fileName,
+                    })
+                  }
+                })
+              }}
+            >
+              下载签到模版
+            </Button>
+          </div>
+          <div>
+            <Button type="primary" className='m-ant-btn' style={{ width: '100%' }}
+              onClick={() => {
+                const file = document.createElement("input") as any;
+                file.type = "file";
+                // file.accept = ".xls,.xlsx";
+                file.onchange = async () => {
+                  const setting = await JSON.parse(storage.getItem('setting') as string)
+                  const fileInfo = file.files[0];
+                  const formData = new FormData();
+                  formData.append("file", fileInfo);
+                  await PostUserImportSigninList(formData).then(res => {
+                    if (res.code === 200) {
+                      if (res.data.item1) {
+                        message.success(res.data.item3)
+                      } else {
+                        if (res.data.item2) {
+                          const fileName = res.data.item2.split('/').pop().split('?')[0];
+                          fileUpLoad({
+                            url: res.data.item2,
+                            content: `导入模板失败！失败文件已保存至:${setting.shareFilesPath}`,
+                            fileName
+                          })
+                        }
+                        message.error(res.data.item3)
+                      }
+                    }
+                  })
+                  setSignInModal(false)
+                };
+                file.click();
+              }}
+            >
+              选择导入文件
+            </Button>
+          </div>
+        </div>
+      </Modal>
+      <Modal title='签到绑定' open={signInUserModal} destroyOnClose={true} onCancel={() => setSignInUserModal(false)} footer={null} centered width={'300px'}>
+        <div className={styles.signInUserModal}>
+          <div>
+            {signInUserForm.currentUserList.map((item: any, index: number) => {
+              return (
+                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }} key={index}>
+                  <Input
+                    placeholder="请输入用户名称"
+                    value={item.signInName}
+                    onChange={(e) => {
+                      let currentUserListTemp: any = [...signInUserForm.currentUserList]
+                      currentUserListTemp[index].signInName = e.target.value
+                      setSignInUserForm({
+                        ...signInUserForm,
+                        currentUserList: currentUserListTemp,
+                      })
+                    }}
+                  />
+                  <img src={ImageUrl.icon21} alt="" style={{ cursor: 'pointer', marginLeft: '10px' }} onClick={() => {
+                    let currentUserListTemp: any = [...signInUserForm.currentUserList]
+                    currentUserListTemp.splice(index, 1)
+                    setSignInUserForm({
+                      ...signInUserForm,
+                      currentUserList: currentUserListTemp,
+                    })
+                  }} />
+                </div>
+              )
+            })
+            }
+            <Button type="primary"
+              onClick={() => {
+                let currentUserListTemp: any = [...signInUserForm.currentUserList, {
+                  id: 0,
+                  uId: signInUserForm.uid,
+                  signInName: '',
+                }]
+                setSignInUserForm({
+                  ...signInUserForm,
+                  currentUserList: currentUserListTemp,
+                })
+              }}
+              style={{ width: '100%', marginBottom: '20px' }}
+              icon={<img src={ImageUrl.icon8} alt="" />}
+              className='m-ant-btn'>
+              添加签到人
+            </Button>
+          </div>
+          <div style={{
+            display: 'flex', justifyContent: 'center'
+          }}>
+            <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }}
+              onClick={() => setSignInUserModal(false)}>取消</Button>
+            <Button type="primary" className='m-ant-btn' onClick={() => {
+              PutSigns(signInUserForm.uid, signInUserForm.currentUserList).then(res => {
+                if (res.code === 200) {
+                  message.success('签到绑定成功')
+                  setSignInUserModal(false)
+                }
+              })
+            }}>确定</Button>
+          </div>
+        </div>
+      </Modal>
       <StupWizard ref={stupWizardRef} />
     </>
   )

src/utils/styles/App.scss

@@ -26,6 +26,20 @@ $pagination-hover-background-color: #5575F2;
   .ant-select-suffix {
     color: white !important;
   }
+
+  .ant-select-selection-overflow-item {
+    .ant-select-selection-item {
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    .ant-select-selection-item-remove {
+      color: white !important;
+    }
+  }
+
+  .ant-select-selection-search-input {
+    color: white !important;
+  }
 }
 
 // input