frontend/libs/list/index.jsx

194 lines
4.7 KiB
JavaScript

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();
};
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;