frontend/libs/list/index.jsx

import React, { useRef, useEffect } from "react";
import { useSetState } from "ahooks";
import { Button, CombinedDateRangePicker } from "zent";
import _ from "lodash";
import TabPage from "@/components/tabPage/main.js";
import Ipt from "@/components/input/main";
import Grid from "@/components/gird/main.js";
import "./style.less";

const tableColumn = [
  {
    title: "table 示例 1",
    name: "key_code",
    prop: "key_code",
    type: "normal",
    width: "auto",
  },
  {
    title: "table 示例 2",
    width: "auto",
    type: "normal",
    prop: "title",
    name: "title",
  },
];

const UseCouponList = () => {
  const [state, setState] = useSetState({
    tabList: [
      { title: "全部", index: 0 },
      { title: "创建中", index: -1 },
      { title: "未开始", index: 3 },
      { title: "审核中", index: 6 },
      { title: "审核驳回", index: 7 },
      { title: "进行中", index: 1 },
      { title: "暂停中", index: 2 },
      { title: "已结束", index: 4 },
      { title: "已作废", index: 5 },
    ],
    tableData: [],
    tableHeight: 500,
    dataCount: 0,
    lodgingTable: true,
    combinedValue: [],
    key_word: "",
    begin_time: "",
    end_time: "",
    status: "",
    page: 1,
    limit: 10,
    isQuery: false,
  });
  const table_el = useRef(null);

  /**
   *
   * @returns 返回参数
   */
  const getParam = () => {
    let param = {
      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,
      page: state.page,
      limit: state.limit,
    };
    param = _.omitBy(
      {
        ...param,
      },
      (value) => {
        return _.isNaN(value) || _.isNil(value);
      }
    );
    return param;
  };

  const getTable = () => {
    let param = getParam();
    console.log("调用接口 ...", param);
  };

  useEffect(() => {
    getTable();
  }, [state.isQuery]);

  const addCouponBtn = () => {};
  const selectionFun = () => {};
  const searchCallback = () => {
    getTable();
  };
  const onPageChange = (data) => {
    setState({ page: data, isQuery: !state.isQuery });
  };
  const onCountChange = (data) => {
    setState({ limit: data, isQuery: !state.isQuery });
  };
  const onChangeCombinedDate = (data) => {
    setState({ combinedValue: data });
    if (data[0]) {
      setState({
        begin_time: data[0],
        end_time: data[1],
        isQuery: !state.isQuery,
      });
    } else {
      setState({
        combinedValue: data,
        begin_time: "",
        end_time: "",
        isQuery: !state.isQuery,
      });
    }
  };
  const tabChange = (data) => {
    setState({ page: 1, limit: 10, status: data, isQuery: !state.isQuery });
  };

  /**
   * 日期
   */
  const dateEl = (
    <CombinedDateRangePicker
      className="zent-datepicker-demo"
      value={state.combinedValue}
      showTime={{
        format: "HH:mm:ss",
        defaultTime: ["00:00:00", "23:59:59"],
      }}
      format="YYYY-MM-DD HH:mm:ss"
      onChange={(data) => onChangeCombinedDate(data)}
    />
  );
  return (
    <div className="table-box-app">
      <TabPage
        tabs={state.tabList}
        tabChange={(data) => tabChange(data)}
        width={130}
        slot={dateEl}
      ></TabPage>
      <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"
          placeholder={"请输入xxxxx"}
          countShow={false}
          height={"36px"}
          width={"260px"}
          onClearItem={(e) =>
            setState({ key_word: "", isQuery: !state.isQuery })
          }
          alignment={"left"}
        />
      </div>
      <Grid
        spliteColor={"#fff"}
        tableData={state.tableData}
        Column={tableColumn}
        countbarVisible={false}
        maxheight={state.tableHeight}
        isSwitch={false}
        page={state.page}
        ref={table_el}
        dataCount={state.dataCount}
        pageChange={(e) => onPageChange(e)}
        emptyText={
          state.lodgingTable
            ? "抱歉，暂无相关数据记录"
            : "查询 请输入【分销商】或【计划名称】或【key】进行查询"
        }
        countChange={(e) => onCountChange(e)}
        checkChange={(data) => selectionFun(data)}
        ComponentHandler={(com, rowData) => {
          if (com == "dates") {
            return (
              <span>
                {rowData.begin_time} 至 {rowData.end_time}
              </span>
            );
          }
        }}
      />
    </div>
  );
};

export default UseCouponList;