1）修改样式
This commit is contained in:
zhangds
parent
ea207d6f31
commit
1e8bc9b06c
|
|
@ -1,56 +1,56 @@
|
|||
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'
|
||||
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 示例 1",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: 'table 示例 2',
|
||||
width: 'auto',
|
||||
type: 'normal',
|
||||
prop: 'title',
|
||||
name: 'title'
|
||||
}
|
||||
]
|
||||
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 }
|
||||
{ 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: '',
|
||||
key_word: "",
|
||||
begin_time: "",
|
||||
end_time: "",
|
||||
status: "",
|
||||
page: 1,
|
||||
limit: 10,
|
||||
isQuery: false
|
||||
})
|
||||
const table_el = useRef(null)
|
||||
isQuery: false,
|
||||
});
|
||||
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()
|
||||
console.log('调用接口 ...', param)
|
||||
}
|
||||
let param = getParam();
|
||||
console.log("调用接口 ...", param);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getTable()
|
||||
}, [state.isQuery])
|
||||
getTable();
|
||||
}, [state.isQuery]);
|
||||
|
||||
const addCouponBtn = () => {}
|
||||
const selectionFun = () => {}
|
||||
const addCouponBtn = () => {};
|
||||
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: '',
|
||||
end_time: '',
|
||||
isQuery: !state.isQuery
|
||||
})
|
||||
begin_time: "",
|
||||
end_time: "",
|
||||
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',
|
||||
defaultTime: ['00:00:00', '23:59:59']
|
||||
format: "HH:mm:ss",
|
||||
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>
|
||||
<div className='query-box'>
|
||||
<Button type='primary' icon='plus' onClick={() => addCouponBtn()}>
|
||||
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'}
|
||||
icon="search"
|
||||
placeholder={"请输入xxxxx"}
|
||||
countShow={false}
|
||||
height={'36px'}
|
||||
width={'260px'}
|
||||
height={"36px"}
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue