upload

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 {

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<UpdateFormProps> = (props) => {
   const [imageUrl, setImageUrl] = useState<string>(props.values.employeeName && props.values.cardNo ? `http://localhost:8888/upload/${props.values.employeeName}_${props.values.cardNo}.jpg`:'');
 
   const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
+    console.log(info.file)
+    setFileList(info.fileList)
     if (info.file.status === 'uploading') {
       setLoading(true);
       return;
@@ -682,6 +678,15 @@ const UpdateForm: React.FC<UpdateFormProps> = (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<UpdateFormProps> = (props) => {
     // },
   });
 
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+
   
 
   useEffect(() => {
@@ -738,6 +745,14 @@ const UpdateForm: React.FC<UpdateFormProps> = (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<UpdateFormProps> = (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 ? <Image
+          {fileList.length > 0 ? null : uploadButton}
+          {/* <Image
+            style={{ objectFit: 'contain' }}
             width={200}
+            height={200}
             src={imageUrl}
-            fallback={EmptyImage}
+          /> */}
-          /> : uploadButton}
         </Upload>
           
         </div>

src/pages/Employee/index.tsx

@@ -110,23 +110,28 @@ const UserList: React.FC<{}> = () => {
   const columns: ProColumns<TableListItem>[] = [
     {
       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) => (
         <span>
@@ -419,7 +433,7 @@ const UserList: React.FC<{}> = () => {
         options={false}
         formRef={ref}
         scroll={{
-          x: 'max-content'
+          y: 'calc(100vh - 500px)'
         }}
         pagination={{
           defaultPageSize: 10,