1) 增加list 模版
This commit is contained in:
parent
0f87400e64
commit
ea207d6f31
|
@ -0,0 +1,194 @@
|
||||||
|
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;
|
Loading…
Reference in New Issue