Przeglądaj źródła

回车登录,上传情况添加

liqiuying 2 miesięcy temu
rodzic
commit
f4b99069cd
3 zmienionych plików z 141 dodań i 100 usunięć
  1. 105 82
      entrypoints/popup/pages/DesignPic.tsx
  2. 31 16
      entrypoints/popup/pages/Login.tsx
  3. 5 2
      wxt.config.ts

+ 105 - 82
entrypoints/popup/pages/DesignPic.tsx

@@ -33,6 +33,13 @@ export default function DesignPic() {
     }
   }
 
+  const order_render = (value: any, index: any, record: any) => {
+    return (
+      <div>{index + 1}</div>
+    )
+  }
+
+
   const pic_render = (value: any, index: any, record: any) => {
     return (
       <>
@@ -86,12 +93,13 @@ export default function DesignPic() {
   // 删除操作渲染函数
   const option_render = (value: any, index: number, record: any) => {
     return (
-      <a
-        className='text-red-600 cursor-pointer'
-        onClick={() => handleDelete(index, record)}
-      >
-        删除
-      </a>
+      record.is_upload ? <p className='text-green-600'>上传成功</p> :
+        <a
+          className='text-red-600 cursor-pointer'
+          onClick={() => handleDelete(index, record)}
+        >
+          删除
+        </a>
     );
   };
 
@@ -350,93 +358,107 @@ export default function DesignPic() {
   };
 
   const uploadPic = () => {
-    const token = localStorage.getItem("access_token");
-    console.log(tableData, "tableData")
-    let table_obj: { [key: string]: any } = {};
-    tableData.forEach(item => {
-      if (!table_obj[item.design_sku]) {
-        table_obj[item.design_sku] = ""
-      }
-      if (table_obj[item.design_sku]) {
-        const data_params = table_obj[item.design_sku].data_params
-        data_params.push({
-          design_pic: item.file,
-          region: item.region,
-          text: item.text,
-          width: item.width,
-          height: item.height,
-        })
-        table_obj[item.design_sku] = {
-          ...table_obj[item.design_sku],
-          data_params,
+    try {
+      const token = localStorage.getItem("access_token");
+      console.log(tableData, "tableData")
+      let table_obj: { [key: string]: any } = {};
+      tableData.forEach(item => {
+        if (!table_obj[item.design_sku]) {
+          table_obj[item.design_sku] = ""
         }
-      } else {
-        table_obj[item.design_sku] = {
-          order_no: item.order_no,
-          design_sku: item.design_sku,
-          data_params: [{
+        if (table_obj[item.design_sku]) {
+          const data_params = table_obj[item.design_sku].data_params
+          data_params.push({
             design_pic: item.file,
             region: item.region,
             text: item.text,
             width: item.width,
             height: item.height,
-          }]
-        }
-      }
-    })
-    console.log(table_obj, "table_obj", Object.values(table_obj))
-    const table_params = Object.values(table_obj)
-    let fetch_url = "", arr_index = 0
-    if (!uploadUrl) {
-      CustomMessage.warning("上传地址丢失,请再次点击获取定制数据!")
-      return
-    }
-    if (uploadUrl.includes('http')) {
-      fetch_url = `${uploadUrl}photo/temuUpload`
-    } else {
-      fetch_url = `http:${uploadUrl}photo/temuUpload`
-    }
-    const FetchFun = (params: any) => {
-      // console.log(params, "params")
-      params['api_token'] = token
-      fetch(fetch_url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      }).then(resjson => {
-        return resjson.json();
-      }).then(res => {
-        if (res.data.error && res.data.error.length) {
-          // 未上传成功的 图片
-          console.log(res.data.error, "arr_index", arr_index)
-          res.data.error.forEach((item: any) => {
-            CustomMessage.error(item.design_pic)
           })
-        }
-        arr_index++
-        if (arr_index < table_params.length) {
-          FetchFun(table_params[arr_index])
-        } else {
-          setLoading(false)
-          setTableData([])
-          CustomMessage.success("图片上传结束")
-        }
-      }).catch(err => {
-        console.log(err, "err")
-        arr_index++
-        if (arr_index < table_params.length) {
-          FetchFun(table_params[arr_index])
+          table_obj[item.design_sku] = {
+            ...table_obj[item.design_sku],
+            data_params,
+          }
         } else {
-          setLoading(false)
-          setTableData([])
-          CustomMessage.success("图片上传结束")
+          table_obj[item.design_sku] = {
+            order_no: item.order_no,
+            design_sku: item.design_sku,
+            data_params: [{
+              design_pic: item.file,
+              region: item.region,
+              text: item.text,
+              width: item.width,
+              height: item.height,
+            }]
+          }
         }
       })
+      console.log(table_obj, "table_obj", Object.values(table_obj))
+      const table_params = Object.values(table_obj)
+      let fetch_url = "", arr_index = 0
+      if (!uploadUrl) {
+        CustomMessage.warning("上传地址丢失,请再次点击获取定制数据!")
+        return
+      }
+      if (uploadUrl.includes('http')) {
+        fetch_url = `${uploadUrl}photo/temuUpload`
+      } else {
+        fetch_url = `http:${uploadUrl}photo/temuUpload`
+      }
+      const FetchFun = (params: any) => {
+        // console.log(params, "params")
+        params['api_token'] = token
+        fetch(fetch_url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(params),
+        }).then(resjson => {
+          return resjson.json();
+        }).then(res => {
+          if (res.data.error && res.data.error.length) {
+            // 未上传成功的 图片
+            console.log(res.data.error, "arr_index", arr_index)
+            res.data.error.forEach((item: any) => {
+              CustomMessage.error(item.design_pic)
+            })
+          }
+          arr_index++
+          if (arr_index < table_params.length) {
+            // tableData循环出备货单相同的数据,修改表格操作数据 is_upload
+            let tableData1 = tableData.map(item => {
+              if (item.order_no == params.order_no) {
+                console.log(item.order_no, "item.order_no", params)
+                item.is_upload = true
+              }
+              return item
+            })
+            // console.log(tableData1,"tableData111")
+            setTableData(tableData1)
+            FetchFun(table_params[arr_index])
+          } else {
+            setLoading(false)
+            setTableData([])
+            CustomMessage.success("图片上传结束")
+          }
+        }).catch(err => {
+          console.log(err, "err")
+          arr_index++
+          if (arr_index < table_params.length) {
+            FetchFun(table_params[arr_index])
+          } else {
+            setLoading(false)
+            setTableData([])
+            CustomMessage.success("图片上传结束")
+          }
+        })
+      }
+      setLoading(true)
+      FetchFun(table_params[arr_index])
+    } catch (error) {
+      console.error(error, "报错")
     }
-    setLoading(true)
-    FetchFun(table_params[arr_index])
   }
 
   return (
@@ -458,6 +480,7 @@ export default function DesignPic() {
           }}>上传定制信息</Button>
         <span className='text-red-500'>ps:需在Temu定制商品内容页面获取数据,且上传图片过程中请勿关闭插件</span>
         <Table dataSource={dataSourceWithIndex}>
+          <Table.Column title="序号" cell={order_render} align="center" />
           <Table.Column title="图片" cell={pic_render} align="center" />
           <Table.Column title="备货单" cell={name_render} align="center" />
           <Table.Column title="定制区域" cell={label_render} align="center" />

+ 31 - 16
entrypoints/popup/pages/Login.tsx

@@ -10,7 +10,7 @@ export default function Login({ setIsLoggedIn }: { setIsLoggedIn: (loggedIn: boo
     const formRef = useRef<any>(null);
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
-    // const [invitationCode, setInvitationCode] = useState('');
+    const [invitationCode, setInvitationCode] = useState('');
     const [loading, setLoading] = useState(false);
     const [errors, setErrors] = useState<{ username?: string, password?: string, code?: string, invitationCode?: string }>({});
     const [keys, setKeys] = useState('');
@@ -25,6 +25,21 @@ export default function Login({ setIsLoggedIn }: { setIsLoggedIn: (loggedIn: boo
         evVerify()
     }, [])
 
+    // 添加键盘事件监听
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Enter' && !loading) {
+                handleLogin({ username, password, code, invitationCode });
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+        // 添加依赖项,确保每次状态更新时都重新绑定事件监听器
+    }, [username, password, code, invitationCode, loading]);
+
     const validateForm = () => {
         const newErrors: { username?: string, password?: string, code?: string, invitationCode?: string } = {};
 
@@ -197,24 +212,24 @@ export default function Login({ setIsLoggedIn }: { setIsLoggedIn: (loggedIn: boo
                 <Form.Item
                     label="邀请码"
                     name="invitationCode"
-                    // required
-                    // help={errors.invitationCode}
-                    // validateState={errors.invitationCode ? 'error' : undefined}
-                    >
+                // required
+                // help={errors.invitationCode}
+                // validateState={errors.invitationCode ? 'error' : undefined}
+                >
                     <Input
                         htmlType="invitationCode"
                         placeholder="请输入邀请码"
-                        // value={invitationCode}
-                        // onChange={(value) => {
-                        //     if (typeof value === 'string') {
-                        //         setInvitationCode(value);
-                        //     } else {
-                        //         setInvitationCode(String(value));
-                        //     }
-                        //     if (errors.invitationCode) {
-                        //         setErrors({ ...errors, invitationCode: undefined });
-                        //     }
-                        // }}
+                        value={invitationCode}
+                        onChange={(value) => {
+                            if (typeof value === 'string') {
+                                setInvitationCode(value);
+                            } else {
+                                setInvitationCode(String(value));
+                            }
+                            // if (errors.invitationCode) {
+                            //     setErrors({ ...errors, invitationCode: undefined });
+                            // }
+                        }}
                         disabled={loading}
                     />
                 </Form.Item>

+ 5 - 2
wxt.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'wxt';
 import tailwindcss from "@tailwindcss/vite";
-
 // See https://wxt.dev/api/config.html
 export default defineConfig({
   vite: () => ({
@@ -8,9 +7,13 @@ export default defineConfig({
     css: { postcss: { plugins: [] } }, // 禁用默认PostCSS
   }),
   modules: ['@wxt-dev/module-react'],
+  // 添加构建配置使用时间戳
+  outDir: '.output',
+  // 代码有变动打包的哈希名称才会变,无需配置时间戳,内部已配置自动生成的哈希值,用于缓存控制
+  // outDirTemplate: 'temu_design',//打包名称
   manifest: {
     name: "云上印花",
-    version: "1.0.0",
+    version: "1.0.2",
     description: "Get Temu's Design Picture",
     icons: {
       48: "icon/48x.png", // 扩展管理页图标