|
|
@@ -1,503 +0,0 @@
|
|
|
-import React, { useState } from 'react'
|
|
|
-import { Button, Table, Input, Message, Loading, Icon } from '@alifd/next';
|
|
|
-import '@alifd/next/dist/next.css';
|
|
|
-// 如果使用了图标,可能还需要导入图标字体
|
|
|
-import '@alifd/next/dist/next-icon.css'; // 或者类似路径
|
|
|
-
|
|
|
-export default function DesignPic() {
|
|
|
- const [uploadUrl, setUploadUrl] = useState<string>("");
|
|
|
- // 添加状态管理表格数据
|
|
|
- const [tableData, setTableData] = useState<any[]>([]);
|
|
|
- const [loading, setLoading] = useState(false);
|
|
|
-
|
|
|
- const pic_render = (value: any, index: any, record: any) => {
|
|
|
- return (
|
|
|
- <>
|
|
|
- {
|
|
|
- record.file ? <>
|
|
|
- <img className='size-20' src={record.file}/></> : <>
|
|
|
- <Icon type="picture" />
|
|
|
- </>
|
|
|
- }
|
|
|
- </>
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- const text_render = (value: any, index: any, record: any) => {
|
|
|
- return (
|
|
|
- <p>{record.text}</p>
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 修改图片名称渲染函数
|
|
|
- const name_render = (value: any, index: number, record: any) => {
|
|
|
- return <>
|
|
|
- <div>{record.design_sku}</div>
|
|
|
- </>
|
|
|
- };
|
|
|
-
|
|
|
- // 修改图片标签渲染函数
|
|
|
- const label_render = (value: any, index: number, record: any) => {
|
|
|
- return <>
|
|
|
- <div>{record.region}</div>
|
|
|
- </>
|
|
|
- };
|
|
|
-
|
|
|
- // 完善删除功能
|
|
|
- const handleDelete = (index: number, record: any) => {
|
|
|
- // 方案1: 直接删除
|
|
|
- const newData = [...tableData];
|
|
|
- newData.splice(index, 1);
|
|
|
- setTableData(newData);
|
|
|
-
|
|
|
- // 方案2: 带确认的删除 (可选)
|
|
|
- // if (window.confirm(`确定要删除 "${record.title.name}" 吗?`)) {
|
|
|
- // const newData = [...tableData];
|
|
|
- // newData.splice(index, 1);
|
|
|
- // setTableData(newData);
|
|
|
- // Message.success('删除成功');
|
|
|
- // }
|
|
|
- };
|
|
|
-
|
|
|
- // 删除操作渲染函数
|
|
|
- const option_render = (value: any, index: number, record: any) => {
|
|
|
- return (
|
|
|
- <a
|
|
|
- className='text-red-600 cursor-pointer'
|
|
|
- onClick={() => handleDelete(index, record)}
|
|
|
- >
|
|
|
- 删除
|
|
|
- </a>
|
|
|
- );
|
|
|
- };
|
|
|
-
|
|
|
- // 添加行索引以确保正确删除
|
|
|
- const dataSourceWithIndex = tableData.map((item, index) => ({
|
|
|
- ...item,
|
|
|
- index
|
|
|
- }));
|
|
|
-
|
|
|
- const getPicData = async () => {
|
|
|
- try {
|
|
|
- setLoading(true)
|
|
|
- // 获取上传路径
|
|
|
- fetch('http://merchant.landwu.com/api/photo/getUploadUrl', {
|
|
|
- method: 'POST',
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'application/json',
|
|
|
- },
|
|
|
- body: JSON.stringify({
|
|
|
- api_token: localStorage.getItem('access_token'),
|
|
|
- }),
|
|
|
- }).then(resjson => {
|
|
|
- return resjson.json();
|
|
|
- }).then(res => {
|
|
|
- if (res.data) {
|
|
|
- const { data = {} } = res;
|
|
|
- const { url = null } = data;
|
|
|
- setUploadUrl(url)
|
|
|
- setLoading(false)
|
|
|
- }
|
|
|
- })
|
|
|
- // 获取当前活动标签页
|
|
|
- const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
|
|
|
-
|
|
|
- if (tab.id) {
|
|
|
- // 发送消息到content script请求获取tbody数据
|
|
|
- const response = await browser.tabs.sendMessage(tab.id, { action: "getTbodyData" });
|
|
|
- const table_datas = []
|
|
|
- // 在控制台输出结果
|
|
|
- if (response.tables && response.tables.length > 0) {
|
|
|
- console.log("找到的表格数据(包含背景图片):");
|
|
|
- // 显式声明类型
|
|
|
- let tables_arr: {
|
|
|
- good_info: any;
|
|
|
- sku_info: any;
|
|
|
- order_no: any;
|
|
|
- design_sku: any;
|
|
|
- design_info: { region: any; text: any; picture: any, cur_index: number }[];
|
|
|
- }[] = [];
|
|
|
- let table_boj: {
|
|
|
- good_info: any;
|
|
|
- sku_info: any;
|
|
|
- order_no: any;
|
|
|
- design_sku: any;
|
|
|
- design_info: { region: any; text: any; picture: any, cur_index: number }[];
|
|
|
- } = {
|
|
|
- good_info: null,
|
|
|
- sku_info: null,
|
|
|
- order_no: null,
|
|
|
- design_sku: null,
|
|
|
- design_info: []
|
|
|
- };
|
|
|
-
|
|
|
- response.tables.forEach((table_node: any, index: number) => {
|
|
|
- console.log(`表格 ${index + 1}:`, table_node);
|
|
|
- // 处理成接口参数
|
|
|
-
|
|
|
- // 处理成数组对象
|
|
|
- if (table_node.length > 4) {
|
|
|
- if (table_boj.design_info.length) {
|
|
|
- // 一个商品的定制信息
|
|
|
- tables_arr.push(table_boj)
|
|
|
- // 重置
|
|
|
- table_boj = {
|
|
|
- good_info: null,
|
|
|
- sku_info: null,
|
|
|
- order_no: null,
|
|
|
- design_sku: null,
|
|
|
- design_info: []
|
|
|
- }
|
|
|
- }
|
|
|
- table_boj = {
|
|
|
- good_info: table_node[1],
|
|
|
- sku_info: table_node[2],
|
|
|
- order_no: table_node[3],
|
|
|
- design_sku: table_node[4],
|
|
|
- design_info: [{
|
|
|
- region: table_node[9],
|
|
|
- text: table_node[10],
|
|
|
- picture: table_node[11],//11
|
|
|
- cur_index: index + 1,
|
|
|
- }]
|
|
|
- }
|
|
|
- } else {
|
|
|
- table_boj.design_info.push({
|
|
|
- region: table_node[0],
|
|
|
- text: table_node[1],
|
|
|
- picture: table_node[2],//2
|
|
|
- cur_index: index + 1,
|
|
|
- })
|
|
|
- // 循环结束
|
|
|
- if (index == response.tables.length - 1) {
|
|
|
- if (table_boj.design_info.length) {
|
|
|
- // 一个商品的定制信息
|
|
|
- tables_arr.push(table_boj)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // good_info sku_info design_info: region text picture cur_index
|
|
|
- });
|
|
|
-
|
|
|
- console.log(tables_arr, "tables_arrddd")
|
|
|
-
|
|
|
- // 上传图片的参数处理
|
|
|
- // let params_arr: any[] = []
|
|
|
- // tables_arr.forEach(item => {
|
|
|
- // // const sku_info = item.sku_info?.text?.split('SKU:')
|
|
|
- // let order_no = ""
|
|
|
- // if (item.order_no && item.order_no != "-") {
|
|
|
- // order_no = item.order_no.substring(0, 15); // 取前15位
|
|
|
- // }
|
|
|
- // if (item.design_info.length) {
|
|
|
- // item.design_info.forEach(design_item => {
|
|
|
- // const prarm = {
|
|
|
- // title: '',
|
|
|
- // label: '',
|
|
|
- // category_id: '',
|
|
|
- // category_name: '',
|
|
|
- // file: '',
|
|
|
- // cur_index: ''
|
|
|
- // };
|
|
|
- // if (order_no && design_item.picture && design_item.picture != '-') {
|
|
|
- // // const text = design_item.text.split('}')
|
|
|
- // const bg_pic = (design_item.picture.backgroundImages as { url: string }[] | undefined)?.[0]?.url ?? '';
|
|
|
- // let bg_file = bg_pic.split('&imageMogr2/thumbnail/60x60')[0]
|
|
|
- // prarm.title = `${order_no}-${design_item.region}`
|
|
|
- // prarm.label = `${order_no}-${design_item.region}`
|
|
|
- // prarm.file = bg_file ?? '';
|
|
|
- // params_arr.push(prarm)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
-
|
|
|
- // console.log(params_arr, "params_arr")
|
|
|
- // setTableData(params_arr)
|
|
|
-
|
|
|
- // 上传图片和文字的参数处理
|
|
|
- let pic_text_arr: any[] = []
|
|
|
- tables_arr.forEach(item => {
|
|
|
- let order_no = "", data_params: any[] = []
|
|
|
- if (item.order_no && item.order_no != "-") {
|
|
|
- order_no = item.order_no.substring(0, 15); // 取前15位
|
|
|
- }
|
|
|
- if (item.design_info.length) {
|
|
|
- item.design_info.forEach(items => {
|
|
|
- const param: any = {}
|
|
|
- if (order_no || item.design_sku) {
|
|
|
- let bg_pic = ""
|
|
|
- if (items.picture && items.picture != '-') {
|
|
|
- let bg_pic1 = (items.picture.backgroundImages as { url: string }[] | undefined)?.[0]?.url ?? '';
|
|
|
- bg_pic = bg_pic1.split('&imageMogr2/thumbnail/60x60')[0]
|
|
|
- } else {
|
|
|
- bg_pic = ""
|
|
|
- }
|
|
|
- let des_text = ""
|
|
|
- if (items.text && items.text != '-') {
|
|
|
- const des_text1 = items.text.split(";}")[1]
|
|
|
- des_text = des_text1.split("查看")[0]
|
|
|
- } else {
|
|
|
- des_text = ""
|
|
|
- }
|
|
|
- param['region'] = items.region
|
|
|
- param['text'] = des_text
|
|
|
- param['design_pic'] = bg_pic
|
|
|
- data_params.push(param)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- if (order_no || item.design_sku) {
|
|
|
- pic_text_arr.push({
|
|
|
- order_no,
|
|
|
- design_sku: item.design_sku,
|
|
|
- data_params
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- console.log(pic_text_arr, "pic_text_arr")
|
|
|
- // const params = {...pic_text_arr[0],api_token: localStorage.getItem('access_token')}
|
|
|
- // console.log(params,"params")
|
|
|
- // fetch(`http:${uploadUrl}photo/temuUpload `, {
|
|
|
- // method: 'POST',
|
|
|
- // headers: {
|
|
|
- // 'Content-Type': 'application/json',
|
|
|
- // },
|
|
|
- // body: JSON.stringify(params),
|
|
|
- // }).then(resjson => {
|
|
|
- // return resjson.json();
|
|
|
- // }).then(res => {
|
|
|
- // if (res.data) {
|
|
|
-
|
|
|
- // }
|
|
|
- // })
|
|
|
-
|
|
|
- // 数据显示
|
|
|
- let table_data: any[] = []
|
|
|
- pic_text_arr.forEach(item => {
|
|
|
- if (item.data_params.length) {
|
|
|
- item.data_params.forEach((items: any) => {
|
|
|
- table_data.push({
|
|
|
- order_no: item.order_no,
|
|
|
- design_sku: item.design_sku,
|
|
|
- file: items.design_pic,
|
|
|
- region: items.region,
|
|
|
- text: items.text,
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- setTableData(table_data)
|
|
|
-
|
|
|
- // const table_arrs = response.tables // 表格数组
|
|
|
- // let i = 0, table_node = table_arrs[i], tables_arr = [];
|
|
|
- // let table_boj: {
|
|
|
- // good_info: any;
|
|
|
- // sku_info: any;
|
|
|
- // design_info: { region: any; text: any; picture: any }[];
|
|
|
- // } = {
|
|
|
- // good_info: null,
|
|
|
- // sku_info: null,
|
|
|
- // design_info: []
|
|
|
- // };
|
|
|
- // while (i < response.tables.length) {
|
|
|
- // // 长度大于4时,指针改变
|
|
|
- // if (table_node.length > 4) {
|
|
|
- // if (table_boj.design_info.length) {
|
|
|
- // // 一个商品的定制信息
|
|
|
- // tables_arr.push(table_boj)
|
|
|
- // // 重置
|
|
|
- // table_boj = {
|
|
|
- // good_info: null,
|
|
|
- // sku_info: null,
|
|
|
- // design_info: []
|
|
|
- // }
|
|
|
- // }
|
|
|
- // table_boj = {
|
|
|
- // good_info: table_node[1],
|
|
|
- // sku_info: table_node[2],
|
|
|
- // design_info: [{
|
|
|
- // region: table_node[9],
|
|
|
- // text: table_node[10],
|
|
|
- // picture: table_node[11],
|
|
|
- // }]
|
|
|
- // }
|
|
|
- // i++
|
|
|
- // table_node = table_arrs[i]
|
|
|
- // } else {
|
|
|
- // table_boj.design_info.push({
|
|
|
- // region: table_node[0],
|
|
|
- // text: table_node[1],
|
|
|
- // picture: table_node[2],
|
|
|
- // })
|
|
|
- // i++
|
|
|
- // table_node = table_arrs[i]
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
- } else {
|
|
|
- console.log("页面上未找到表格数据");
|
|
|
- }
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("获取表格数据失败:", error);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- 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]) {
|
|
|
- const data_params = table_obj[item.design_sku].data_params
|
|
|
- data_params.push({
|
|
|
- design_pic: item.file,
|
|
|
- region: item.region,
|
|
|
- text: item.text
|
|
|
- })
|
|
|
- table_obj[item.design_sku] = {
|
|
|
- ...table_obj[item.design_sku],
|
|
|
- data_params,
|
|
|
- }
|
|
|
- } else {
|
|
|
- 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
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- 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.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)
|
|
|
- }
|
|
|
- arr_index++
|
|
|
- if (arr_index < table_params.length) {
|
|
|
- FetchFun(table_params[arr_index])
|
|
|
- } else {
|
|
|
- setLoading(false)
|
|
|
- Message.success("图片上传结束")
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- console.log(err, "err")
|
|
|
- arr_index++
|
|
|
- if (arr_index < table_params.length) {
|
|
|
- FetchFun(table_params[arr_index])
|
|
|
- } else {
|
|
|
- setLoading(false)
|
|
|
- Message.success("图片上传结束")
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- setLoading(true)
|
|
|
- FetchFun(table_params[arr_index])
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- return
|
|
|
- // 在此处添加下标索引参数
|
|
|
- const table_datas = tableData.map((item, index) => {
|
|
|
- item.cur_index = index + 1
|
|
|
- item.api_token = token
|
|
|
- return item
|
|
|
- })
|
|
|
- if (!uploadUrl) {
|
|
|
- Message.error("图片上传路径未获取到,请重新点击获取定制图片数据按钮")
|
|
|
- return
|
|
|
- }
|
|
|
- const fetch_fn = (data: any) => {
|
|
|
- const formData = new FormData()
|
|
|
- for (var key in data) {
|
|
|
- formData.append(key, data[key])
|
|
|
- }
|
|
|
- fetch(fetch_url, {
|
|
|
- method: 'POST',
|
|
|
- // headers: {
|
|
|
- // 'Content-Type': 'application/json',
|
|
|
- // },
|
|
|
- body: formData,
|
|
|
- mode: 'cors'
|
|
|
- }).then(resjson => {
|
|
|
- return resjson.json();
|
|
|
- }).then(res => {
|
|
|
- if (res.code == -1) {
|
|
|
- Message.error(res.msg)
|
|
|
- }
|
|
|
- arr_index++
|
|
|
- if (arr_index < table_datas.length) {
|
|
|
- fetch_fn(table_datas[arr_index])
|
|
|
- } else {
|
|
|
- // 上传完成
|
|
|
- Message.success(res.msg)
|
|
|
- setLoading(false)
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- setLoading(false)
|
|
|
- Message.error(error.message)
|
|
|
- arr_index++
|
|
|
- if (arr_index < table_datas.length) {
|
|
|
- fetch_fn(table_datas[arr_index])
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- console.log(table_datas, "table_datasss")
|
|
|
- setLoading(true)
|
|
|
- fetch_fn(table_datas[arr_index])
|
|
|
-
|
|
|
-
|
|
|
- // setTableData(tableData)
|
|
|
- }
|
|
|
-
|
|
|
- return (
|
|
|
- <Loading visible={loading} fullScreen>
|
|
|
- <div className='w-3xl h-fit'>
|
|
|
- <Button type="primary" style={{ marginBottom: '10px', marginRight: '10px' }}
|
|
|
- onClick={() => {
|
|
|
- getPicData()
|
|
|
- }}>获取定制图片数据</Button>
|
|
|
- <Button disabled={!tableData.length} type="primary" style={{ marginBottom: '10px', marginRight: '10px' }}
|
|
|
- onClick={() => {
|
|
|
- uploadPic()
|
|
|
- }}>上传图片</Button>
|
|
|
- <span className='text-red-500'>ps:上传图片过程中请勿关闭插件</span>
|
|
|
- <Table dataSource={dataSourceWithIndex}>
|
|
|
- <Table.Column title="图片" cell={pic_render} />
|
|
|
- <Table.Column title="定制SKU" cell={name_render} />
|
|
|
- <Table.Column title="定制区域" cell={label_render} />
|
|
|
- <Table.Column title="文字" cell={text_render} />
|
|
|
- <Table.Column title="操作" cell={option_render} />
|
|
|
- </Table>
|
|
|
- </div>
|
|
|
- </Loading>
|
|
|
- )
|
|
|
-}
|