Merge branch 'develop' of http://git.zanxiangnet.com/wjx/ad-manage

src/components/Tables/index.tsx

@@ -5,8 +5,6 @@ import style from './index.less'
 import './index.less'
 import { Resizable } from 'react-resizable'
 import { SortOrder } from 'antd/lib/table/interface';
-import EditableRow from './EditableRow';
-import EditableCell from './EditableCell';
 
 export interface DataType {
     key: React.Key;
@@ -64,12 +62,11 @@ interface Props {
     sortDirections?: SortOrder[],
     isShowTotal?: boolean,  // 是否展示总计
     myKey?: any,//自定义要用哪个值做key
-    handleSave?: (row: DataType) => void
 }
 
 function Tables(props: Props) {
     // //导出数据
-    let { columns, dataSource, excle, total, handelResize, rowSelection, onRow, isShowTotal = true, hideOnSinglePage, handleSave, rowClassName, className, expandedRowRender, scroll, summary, showHeader, bordered, size = 'small', onChange, sortDirections, pagination, myKey, ...prop } = props
+    let { columns, dataSource, excle, total, handelResize, rowSelection, onRow, isShowTotal = true, hideOnSinglePage, rowClassName, className, expandedRowRender, scroll, summary, showHeader, bordered, size = 'small', onChange, sortDirections, pagination, myKey, ...prop } = props
     let handleExcle = () => {
         if (dataSource.length < 1) {
             message.error('请先搜索再导出');
@@ -92,10 +89,6 @@ function Tables(props: Props) {
         header: {
             cell: ResizableHeader
         },
-        body: {
-            row: EditableRow,
-            cell: EditableCell
-        }
     }
 
     useEffect(() => {
@@ -117,14 +110,7 @@ function Tables(props: Props) {
         onHeaderCell: (column: any) => ({
             width: column.width,
             onResize: handleResize(index)
-        }),
-        onCell: (record: DataType) => ({
-            record,
-            editable: col.editable,
-            dataIndex: col.dataIndex,
-            title: col.title,
-            handleSave: (row: DataType) => { handleSave?.(row) },
-        }),
+        })
     }))
 
     return <div className='components-table-resizable-column'>

src/pages/launchSystemNew/adq/ad/index.tsx

@@ -197,7 +197,7 @@ const Ad: React.FC<Props> = (props) => {
         {copyData.visible && <Copy selectedRows={selectedRows} {...copyData} onClose={() => setCopyData({ visible: false })} onChange={() => { setCopyData({ visible: false }); listAjax.refresh(); setSelectedRows([]) }} />}
         <TableData
             isCard={false}
-            columns={() => tableConfig(onChange, details, tableIdClick)}
+            columns={() => tableConfig(onChange, details, handleSave, tableIdClick)}
             ajax={listAjax}
             syncAjax={sync}
             fixed={{ left: 2, right: 4 }}
@@ -208,7 +208,6 @@ const Ad: React.FC<Props> = (props) => {
             page={listAjax?.data?.data?.current}
             pageSize={listAjax?.data?.data?.size}
             myKey={'adgroupId'}
-            handleSave={handleSave}
             gutter={[0, 10]}
             config={txAdConfig}
             configName="腾讯广告"

src/pages/launchSystemNew/adq/ad/inputUpdate.tsx

@@ -0,0 +1,53 @@
+import { Form, Input, InputRef } from "antd";
+import React, { useEffect, useRef, useState } from "react"
+
+interface Props {
+    title: string,
+    dataIndex: string
+    record: any;
+    handleSave: (data: any) => void
+}
+
+const InputUpdate: React.FC<Props> = ({ title, dataIndex, record, handleSave }) => {
+    const [form] = Form.useForm();
+    const [editing, setEditing] = useState(false);
+    const inputRef = useRef<InputRef>(null);
+
+    useEffect(() => {
+        if (editing) {
+            inputRef.current!.focus({ cursor: 'all' });
+        }
+    }, [editing]);
+
+    const toggleEdit = () => {
+        setEditing(!editing);
+        form.setFieldsValue({ [dataIndex]: record[dataIndex] });
+    };
+
+    const save = async () => {
+        try {
+            const values = await form.validateFields();
+            if (values?.adgroupName !== (record as any)?.adgroupName) {
+                handleSave({ ...record, ...values });
+            }
+            toggleEdit();
+        } catch (errInfo) {
+            console.log('Save failed:', errInfo);
+        }
+    };
+
+    let childNode = editing ? (<Form form={form}><Form.Item
+        style={{ margin: 0 }}
+        name={dataIndex}
+        rules={[{ required: true, message: `${title} is required.` }]}
+    >
+        <Input ref={inputRef} size="small" onPressEnter={save} onBlur={save} bordered />
+    </Form.Item></Form>) : (<span className="editable-cell-value-wrap ellipsisText" onClick={toggleEdit}>
+        {title}
+    </span>)
+
+    return childNode;
+}
+
+
+export default React.memo(InputUpdate)

src/pages/launchSystemNew/adq/ad/tableConfig.tsx

@@ -8,9 +8,11 @@ import { ReactComponent as RocketSvg } from '@/assets/rocket.svg'
 import '../index.less'
 import { CopyOutlined } from '@ant-design/icons'
 import { copy } from '@/utils/utils'
+import InputUpdate from './inputUpdate'
 function tableConfig(
     onChange: () => void,
     details: (data: any) => void,
+    handleSave: (data: any) => void,
     tableIdClick: (props: {
         activeKey: string,
         parma: {
@@ -103,7 +105,9 @@ function tableConfig(
             key: 'adgroupName',
             width: 280,
             ellipsis: true,
-            editable: true
+            render: (a: string, b: any) => {
+                return <InputUpdate title={a} dataIndex={'adgroupName'} record={b} handleSave={handleSave}/>
+            }
         },
         {
             title: '推广目标类型',

src/pages/launchSystemNew/adq/campaign/index.tsx

@@ -65,8 +65,8 @@ function Campaign(props: Props) {
     }) => {
         if (!params.campaignName || params.campaignName !== listAjax?.params[0]?.adcreativeName) {
             !params.campaignName && delete params.campaignName
-            listAjax.run({ ...params, userId })
         }
+        listAjax.run({ ...params, userId })
     }, [userId, listAjax])
     // 同步 
     const sync = useCallback(() => {

src/pages/launchSystemNew/adq/creative/index.tsx

@@ -55,8 +55,8 @@ function Creative(props: Props) {
     }) => {
         if (!params.adcreativeName || params.adcreativeName !== listAjax?.params[0]?.adcreativeName) {
             !params.adcreativeName && delete params.adcreativeName
-            listAjax.run({ ...params, userId })
         }
+        listAjax.run({ ...params, userId })
     }, [userId, listAjax])
     // 同步 
     const sync = useCallback(() => {

src/pages/launchSystemNew/adq/landingPage/index.tsx

@@ -34,8 +34,8 @@ function LandingPage(props: { accountId: string, adAccountId: string, userId: st
     }) => {
         if (!params.pageName || params.pageName !== listAjax?.params[0]?.pageName) {
             !params.pageName && delete params.pageName
-            listAjax.run({ ...params, userId })
         }
+        listAjax.run({ ...params, userId })
     }, [listAjax, userId])
     // 同步 
     const sync = useCallback(() => {

src/pages/launchSystemNew/adq/targeting/index.tsx

@@ -29,8 +29,8 @@ function Targeting(props: { adAccountId: any, userId: string, accountId: any, ta
         console.log(accountId)
         if (!params.targetingName || params.targetingName !== listAjax?.params[0]?.targetingName) {
             !params.targetingName && delete params.targetingName
-            listAjax.run({ ...params, userId })
         }
+        listAjax.run({ ...params, userId })
     }, [listAjax, userId])
     // 同步 
     const sync = useCallback(() => {

src/pages/launchSystemNew/components/TableData/index.tsx

@@ -47,11 +47,10 @@ interface Prosp {
     bodyStyle?: any
     gutter?: any
     isCard?: boolean
-    handleSave?: (row: DataType) => void
 }
 
 function TableData(props: Prosp) {
-    const { isZj, scroll, columns, title, dataSource, expandedRowRender, className, isCard = true, leftChild, handleSave, page = undefined, rowSelection = false, pageSize = undefined, size = 'small', fixed = { left: 0, right: 1 }, total = 0, loading = false, onChange, config, configName, ajax, syncAjax, hoverable = true, myKey, gutter = [0, 20] } = props
+    const { isZj, scroll, columns, title, dataSource, expandedRowRender, className, isCard = true, leftChild, page = undefined, rowSelection = false, pageSize = undefined, size = 'small', fixed = { left: 0, right: 1 }, total = 0, loading = false, onChange, config, configName, ajax, syncAjax, hoverable = true, myKey, gutter = [0, 20] } = props
     const { state: userState } = useModel('useOperating.useUser')
     const { isFell } = userState
     const [visible, setVisible] = useState<boolean>(false)
@@ -253,7 +252,7 @@ function TableData(props: Prosp) {
                 </Row>
             </Card> : <Row gutter={gutter}>
                 {header}
-                <Tab {...{ size, newColumns, handelResize, className, isZj, rowSelection, columns, loading, handleSave, scroll, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey }} />
+                <Tab {...{ size, newColumns, handelResize, className, isZj, rowSelection, columns, loading, scroll, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey }} />
             </Row>}
         </Col>
     </Row >
@@ -264,7 +263,7 @@ function TableData(props: Prosp) {
 
 /**表格 */
 const Tab = React.memo((props: any) => {
-    const { size, newColumns, className, handelResize, columns, scroll, loading, handleSave, rowSelection, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey } = props
+    const { size, newColumns, className, handelResize, columns, scroll, loading, rowSelection, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey } = props
     return < Col span={24} >
         <div className={`${style[size]} ${className ? style[className] : ''} `}>
             {dataSource || !ajax?.loading ? <Tables
@@ -286,7 +285,6 @@ const Tab = React.memo((props: any) => {
                 rowSelection={rowSelection}
                 handelResize={((columns: any) => handelResize(columns))}
                 myKey={myKey}
-                handleSave={handleSave}
             /> : <div className={style.example}>
                 <Spin />
             </div>}