1）修改样式

src/pages/coupon/list/index.jsx

@@ -1,56 +1,56 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect } from "react";
-import { useSetState } from 'ahooks'
+import { useSetState } from "ahooks";
-import { Button, CombinedDateRangePicker } from 'zent'
+import { Button, CombinedDateRangePicker } from "zent";
-import _ from 'lodash'
+import _ from "lodash";
-import TabPage from '@/components/tabPage/main.js'
+import TabPage from "@/components/tabPage/main.js";
-import Ipt from '@/components/input/main'
+import Ipt from "@/components/input/main";
-import Grid from '@/components/gird/main.js'
+import Grid from "@/components/gird/main.js";
-import './style.less'
+import "./style.less";
 
 const tableColumn = [
   {
-    title: 'table 示例 1',
+    title: "table 示例 1",
-    name: 'key_code',
+    name: "key_code",
-    prop: 'key_code',
+    prop: "key_code",
-    type: 'normal',
+    type: "normal",
-    width: 'auto'
+    width: "auto",
   },
   {
-    title: 'table 示例 2',
+    title: "table 示例 2",
-    width: 'auto',
+    width: "auto",
-    type: 'normal',
+    type: "normal",
-    prop: 'title',
+    prop: "title",
-    name: 'title'
+    name: "title",
-  }
+  },
-]
+];
 
 const UseCouponList = () => {
   const [state, setState] = useSetState({
     tabList: [
-      { title: '全部', index: 0 },
+      { title: "全部", index: 0 },
-      { title: '创建中', index: -1 },
+      { title: "创建中", index: -1 },
-      { title: '未开始', index: 3 },
+      { title: "未开始", index: 3 },
-      { title: '审核中', index: 6 },
+      { title: "审核中", index: 6 },
-      { title: '审核驳回', index: 7 },
+      { title: "审核驳回", index: 7 },
-      { title: '进行中', index: 1 },
+      { title: "进行中", index: 1 },
-      { title: '暂停中', index: 2 },
+      { title: "暂停中", index: 2 },
-      { title: '已结束', index: 4 },
+      { title: "已结束", index: 4 },
-      { title: '已作废', index: 5 }
+      { title: "已作废", index: 5 },
     ],
     tableData: [],
     tableHeight: 500,
     dataCount: 0,
     lodgingTable: true,
     combinedValue: [],
-    key_word: '',
+    key_word: "",
-    begin_time: '',
+    begin_time: "",
-    end_time: '',
+    end_time: "",
-    status: '',
+    status: "",
     page: 1,
     limit: 10,
-    isQuery: false
+    isQuery: false,
-  })
+  });
-  const table_el = useRef(null)
+  const table_el = useRef(null);
 
   /**
    *
@@ -61,105 +61,106 @@ const UseCouponList = () => {
       key_word: state.key_word || null,
       begin_time: state.begin_time || null,
       end_time: state.end_time || null,
-      status: state.status !== 999 && state.status !== '' ? state.status : null,
+      status: state.status !== 999 && state.status !== "" ? state.status : null,
       page: state.page,
-      limit: state.limit
+      limit: state.limit,
-    }
+    };
     param = _.omitBy(
       {
-        ...param
+        ...param,
       },
       (value) => {
-        return _.isNaN(value) || _.isNil(value)
+        return _.isNaN(value) || _.isNil(value);
       }
-    )
+    );
-    return param
+    return param;
-  }
+  };
 
   const getTable = () => {
-    let param = getParam()
+    let param = getParam();
-    console.log('调用接口 ...', param)
+    console.log("调用接口 ...", param);
-  }
+  };
 
   useEffect(() => {
-    getTable()
+    getTable();
-  }, [state.isQuery])
+  }, [state.isQuery]);
 
-  const addCouponBtn = () => {}
+  const addCouponBtn = () => {};
-  const selectionFun = () => {}
+  const selectionFun = () => {};
   const searchCallback = () => {
-    getTable()
+    getTable();
-  }
+  };
   const onPageChange = (data) => {
-    setState({ page: data, isQuery: !state.isQuery })
+    setState({ page: data, isQuery: !state.isQuery });
-  }
+  };
   const onCountChange = (data) => {
-    setState({ limit: data, isQuery: !state.isQuery })
+    setState({ limit: data, isQuery: !state.isQuery });
-  }
+  };
   const onChangeCombinedDate = (data) => {
-    setState({ combinedValue: data })
+    setState({ combinedValue: data });
     if (data[0]) {
       setState({
         begin_time: data[0],
         end_time: data[1],
-        isQuery: !state.isQuery
+        isQuery: !state.isQuery,
-      })
+      });
     } else {
       setState({
         combinedValue: data,
-        begin_time: '',
+        begin_time: "",
-        end_time: '',
+        end_time: "",
-        isQuery: !state.isQuery
+        isQuery: !state.isQuery,
-      })
+      });
     }
-  }
+  };
   const tabChange = (data) => {
-    setState({ page: 1, limit: 10, status: data, isQuery: !state.isQuery })
+    setState({ page: 1, limit: 10, status: data, isQuery: !state.isQuery });
-  }
+  };
 
   /**
    * 日期
    */
   const dateEl = (
     <CombinedDateRangePicker
-      className='zent-datepicker-demo'
+      className="zent-datepicker-demo"
       value={state.combinedValue}
       showTime={{
-        format: 'HH:mm:ss',
+        format: "HH:mm:ss",
-        defaultTime: ['00:00:00', '23:59:59']
+        defaultTime: ["00:00:00", "23:59:59"],
       }}
-      format='YYYY-MM-DD HH:mm:ss'
+      format="YYYY-MM-DD HH:mm:ss"
       onChange={(data) => onChangeCombinedDate(data)}
     />
-  )
+  );
   return (
-    <div className='table-box-app'>
+    <div className="table-box-app">
       <TabPage
         tabs={state.tabList}
         tabChange={(data) => tabChange(data)}
         width={130}
-        slot={dateEl}></TabPage>
+        slot={dateEl}
-      <div className='query-box'>
+      ></TabPage>
-        <Button type='primary' icon='plus' onClick={() => addCouponBtn()}>
+      <div className="query-box">
+        <Button type="primary" icon="plus" onClick={() => addCouponBtn()}>
           新增优惠券
         </Button>
         <Ipt
           onChange={(e) => setState({ key_word: e })}
           value={state.key_word}
           wordSearch={() => searchCallback()}
-          icon='search'
+          icon="search"
-          placeholder={'请输入xxxxx'}
+          placeholder={"请输入xxxxx"}
           countShow={false}
-          height={'36px'}
+          height={"36px"}
-          width={'260px'}
+          width={"260px"}
           onClearItem={(e) =>
-            setState({ key_word: '', isQuery: !state.isQuery })
+            setState({ key_word: "", isQuery: !state.isQuery })
           }
-          alignment={'left'}
+          alignment={"left"}
         />
       </div>
       <Grid
-        spliteColor={'#fff'}
+        spliteColor={"#fff"}
         tableData={state.tableData}
         Column={tableColumn}
         countbarVisible={false}
@@ -171,23 +172,23 @@ const UseCouponList = () => {
         pageChange={(e) => onPageChange(e)}
         emptyText={
           state.lodgingTable
-            ? '抱歉，暂无相关数据记录'
+            ? "抱歉，暂无相关数据记录"
-            : '查询 请输入【分销商】或【计划名称】或【key】进行查询'
+            : "查询 请输入【分销商】或【计划名称】或【key】进行查询"
         }
         countChange={(e) => onCountChange(e)}
         checkChange={(data) => selectionFun(data)}
         ComponentHandler={(com, rowData) => {
-          if (com == 'dates') {
+          if (com == "dates") {
             return (
               <span>
                 {rowData.begin_time} 至 {rowData.end_time}
               </span>
-            )
+            );
           }
         }}
       />
     </div>
-  )
+  );
-}
+};
 
-export default UseCouponList
+export default UseCouponList;