diff --git a/src/global.less b/src/global.less index 476ba90..7c8963c 100644 --- a/src/global.less +++ b/src/global.less @@ -14,20 +14,6 @@ body, min-height: 100vh; } -.ant-upload.ant-upload-select-picture-card { - width: 200px !important; - height: 200px !important; -} - -.avatar-uploader { - .ant-upload-list { - display: none !important; - } - .ant-upload-list-text { - display: none !important; - } -} - .row-active { background-color: @table-row-hover-bg; .ant-table-cell-fix-left, .ant-table-cell-fix-right { diff --git a/src/pages/Employee/components/UpdateForm.tsx b/src/pages/Employee/components/UpdateForm.tsx index 4370aa7..a677084 100644 --- a/src/pages/Employee/components/UpdateForm.tsx +++ b/src/pages/Employee/components/UpdateForm.tsx @@ -199,20 +199,14 @@ const handleRemove = async (id?: number, type?: number) => { const dateFormat = 'YYYYMMDD'; -const getBase64 = (img: RcFile, callback: (url: string) => void) => { - const reader = new FileReader(); - reader.addEventListener('load', () => callback(reader.result as string)); - reader.readAsDataURL(img); -}; - const beforeUpload = (file: RcFile) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { - message.error('You can only upload JPG/PNG file!'); + message.error('你只能上传JPG/PNG文件!'); } - const isLt2M = file.size / 1024 / 1024 < 2; + const isLt2M = file.size / 1024 / 1024 < 1; if (!isLt2M) { - message.error('Image must smaller than 2MB!'); + message.error('图片必须小于1MB!'); } return isJpgOrPng && isLt2M; }; @@ -675,6 +669,8 @@ const UpdateForm: React.FC = (props) => { const [imageUrl, setImageUrl] = useState(props.values.employeeName && props.values.cardNo ? `http://localhost:8888/upload/${props.values.employeeName}_${props.values.cardNo}.jpg`:''); const handleChange: UploadProps['onChange'] = (info: UploadChangeParam) => { + console.log(info.file) + setFileList(info.fileList) if (info.file.status === 'uploading') { setLoading(true); return; @@ -682,6 +678,15 @@ const UpdateForm: React.FC = (props) => { if (info.file.status === 'done') { console.log(info.file.response) setLoading(false); + if (fileList.length > 0) { + let newFileList = [...fileList] + newFileList[0].status = 'done' + newFileList[0].url = info.file.response + newFileList[0].preview = info.file.response + newFileList[0].thumbUrl = info.file.response + console.log(newFileList) + setFileList(newFileList) + } setImageUrl(info.file.response); } }; @@ -729,6 +734,8 @@ const UpdateForm: React.FC = (props) => { // }, }); + const [fileList, setFileList] = useState([]); + useEffect(() => { @@ -738,6 +745,14 @@ const UpdateForm: React.FC = (props) => { getData(props.values.employeeNo, 3); getData(props.values.employeeNo, 4); } + if (props.values.employeeName && props.values.cardNo) { + setFileList([{ + uid: '-1', + name: 'image.png', + status: 'done', + url: `http://localhost:8888/upload/${props.values.employeeName}_${props.values.cardNo}.jpg` + }]) + } }, [props.values.employeeNo]); console.log(imageUrl) @@ -784,17 +799,18 @@ const UpdateForm: React.FC = (props) => { name="file" listType="picture-card" className="avatar-uploader" - showUploadList={false} + fileList={fileList} action="http://localhost:8888/api/employee/uploadImage" beforeUpload={beforeUpload} - disabled={!!imageUrl} onChange={handleChange} > - {imageUrl ? 0 ? null : uploadButton} + {/* : uploadButton} + /> */} diff --git a/src/pages/Employee/index.tsx b/src/pages/Employee/index.tsx index 6864df6..69761d2 100644 --- a/src/pages/Employee/index.tsx +++ b/src/pages/Employee/index.tsx @@ -110,23 +110,28 @@ const UserList: React.FC<{}> = () => { const columns: ProColumns[] = [ { title: '姓名', + width: 70, dataIndex: 'employeeName', }, { title: '员工编号', + width: 80, dataIndex: 'employeeNo', }, { title: '手机号', + width: 100, dataIndex: 'mobile', }, { title: '出生日期', + width: 80, dataIndex: 'birthday', search: false }, { title: '性别', + width: 60, dataIndex: 'sex', valueType: 'select', fieldProps: { @@ -142,6 +147,7 @@ const UserList: React.FC<{}> = () => { }, { title: '年龄', + width: 60, dataIndex: 'age', fieldProps: { mode: "multiple" @@ -203,6 +209,7 @@ const UserList: React.FC<{}> = () => { { title: '部门', dataIndex: 'departmentId', + width: 120, valueType: 'select', fieldProps: { mode: "multiple" @@ -225,6 +232,7 @@ const UserList: React.FC<{}> = () => { }, { title: '单位', + width: 320, dataIndex: 'unitId', valueType: 'select', fieldProps: { @@ -248,6 +256,7 @@ const UserList: React.FC<{}> = () => { }, { title: '现岗位', + width: 110, dataIndex: 'postId', valueType: 'select', fieldProps: { @@ -271,6 +280,7 @@ const UserList: React.FC<{}> = () => { }, { title: '班组', + width: 140, dataIndex: 'groupsId', valueType: 'select', fieldProps: { @@ -295,6 +305,7 @@ const UserList: React.FC<{}> = () => { { title: '最高学历', dataIndex: 'highestEducationId', + width: 110, valueType: 'select', fieldProps: { mode: "multiple" @@ -319,6 +330,7 @@ const UserList: React.FC<{}> = () => { title: '专业技术资格', dataIndex: 'ptqId', valueType: 'select', + width: 130, fieldProps: { mode: "multiple" }, @@ -342,6 +354,7 @@ const UserList: React.FC<{}> = () => { title: '技能等级', dataIndex: 'skillLevelId', valueType: 'select', + width: 80, fieldProps: { mode: "multiple" }, @@ -393,6 +406,7 @@ const UserList: React.FC<{}> = () => { { title: "操作", dataIndex: "option", + width: 80, hideInSearch: true, render: (text: any, record: TableListItem) => ( @@ -419,7 +433,7 @@ const UserList: React.FC<{}> = () => { options={false} formRef={ref} scroll={{ - x: 'max-content' + y: 'calc(100vh - 500px)' }} pagination={{ defaultPageSize: 10,