1) 表单
This commit is contained in:
zhangds
parent
3afd84ad17
commit
a82f1ed8ae
|
|
@ -229,6 +229,11 @@
|
|||
border: none;
|
||||
}
|
||||
|
||||
.table-box-app .zent-datepicker-trigger{
|
||||
background: #f5f6f7 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 日期整体样式 */
|
||||
.zent-datepicker .zent-datepicker-trigger {
|
||||
border-radius: 0 !important;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,435 @@
|
|||
import React, { forwardRef, useImperativeHandle, useRef } from "react";
|
||||
import { useSetState } from "ahooks";
|
||||
import { FixedSizeList } from "react-window";
|
||||
import {
|
||||
Card,
|
||||
DateRangePicker,
|
||||
Button,
|
||||
LayoutRow as Row,
|
||||
LayoutCol as Col,
|
||||
LayoutGrid as Grids,
|
||||
Select,
|
||||
} from "zent";
|
||||
import moment from "moment";
|
||||
|
||||
import Ipt from "@/components/input/main";
|
||||
import Form from "@/components/form/main";
|
||||
import FormItem from "@/components/form-item/main";
|
||||
import Grid from "@/components/gird/main.js";
|
||||
|
||||
import "./style.less";
|
||||
|
||||
const tableColumn = [
|
||||
{
|
||||
title: "商品编号",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "官方价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "合同单价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "库存数量",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "批次号",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "总预算",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "有效时间段",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "上游平台",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
];
|
||||
|
||||
const rules = {
|
||||
name: [{ type: "required", message: "请输入批次名称" }],
|
||||
};
|
||||
|
||||
const UseCouponAddEdit = forwardRef((props, ref) => {
|
||||
/**
|
||||
* type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
|
||||
*/
|
||||
const { type = 0 } = props;
|
||||
const [state, setState] = useSetState({
|
||||
setup1_title: "基本信息",
|
||||
setup2_title: "发放规则",
|
||||
setup3_title: "商品范围",
|
||||
disabled: false,
|
||||
model: {
|
||||
name: "",
|
||||
date_time: "",
|
||||
},
|
||||
tableData: [],
|
||||
tableHeight: 500,
|
||||
page: 1,
|
||||
dataCount: 0,
|
||||
rankoptions: [],
|
||||
rank: [],
|
||||
newGoodsBtnLoading: false,
|
||||
newGoldLoading: false,
|
||||
lodgingTable: true,
|
||||
plan_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `plan 1`,
|
||||
},
|
||||
],
|
||||
key_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `key 1`,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
submit: submit,
|
||||
}));
|
||||
|
||||
const form_el = useRef(null);
|
||||
const table_el = useRef(null);
|
||||
|
||||
const submit = () => {
|
||||
let el = form_el.current.validator();
|
||||
console.log("el =>", el);
|
||||
};
|
||||
|
||||
const onReturn = () => {};
|
||||
const onChangeCombinedDate = () => {};
|
||||
const onDisabledRange = (date, type) => {
|
||||
let disabled = false;
|
||||
if (type == "end") {
|
||||
disabled = moment(date.getTime()).add(1, "days") <= new Date().getTime();
|
||||
}
|
||||
if (type == "start") {
|
||||
disabled = date.getTime() <= new Date().getTime();
|
||||
}
|
||||
return disabled;
|
||||
};
|
||||
const onPageChange = () => {};
|
||||
const onCountChange = () => {};
|
||||
const selectionFun = () => {};
|
||||
const onRankChange = () => {};
|
||||
const addProduct = () => {};
|
||||
const renderOptionList = (options, renderOption) => {
|
||||
return (
|
||||
<FixedSizeList
|
||||
height={8.5 * 32}
|
||||
itemCount={options.length}
|
||||
itemSize={32}
|
||||
width={240}
|
||||
>
|
||||
{({ index, style }) => (
|
||||
<div style={style}>{renderOption(options[index], index)}</div>
|
||||
)}
|
||||
</FixedSizeList>
|
||||
);
|
||||
};
|
||||
const plan_key_formEl = () => {
|
||||
return (
|
||||
<>
|
||||
<FormItem labelname="归属计划" prop="gs_plan">
|
||||
<Select
|
||||
clearable
|
||||
options={state.plan_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="归属key" prop="gs_key">
|
||||
<Select
|
||||
clearable
|
||||
options={state.key_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="coupon-box">
|
||||
<Form model={state.model} rules={rules} ref={form_el}>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup1_title}>
|
||||
{/* 是否显示两个字段 */}
|
||||
{type === 1 ? plan_key_formEl() : null}
|
||||
|
||||
<FormItem labelname="批次名称" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={true}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="生效时间段" prop="date_time">
|
||||
<DateRangePicker
|
||||
className="zent-datepicker-plan"
|
||||
showTime={{
|
||||
format: "HH:mm:ss",
|
||||
defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
|
||||
}}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
disabled={[state.disabled, false]}
|
||||
value={state.model.date_time}
|
||||
onChange={(e) => {
|
||||
onChangeCombinedDate(e);
|
||||
}}
|
||||
disabledDate={onDisabledRange}
|
||||
/>
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup2_title}>
|
||||
<Grids>
|
||||
<Row>
|
||||
<Col span={3}>
|
||||
<p>
|
||||
面额 <span className="mustwrite">*</span>
|
||||
</p>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<div className="justify-box">
|
||||
<span>满</span>
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"130px"}
|
||||
alignment={"left"}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={3}>
|
||||
<div className="justify-box">
|
||||
<span style={{ paddingRight: "10px" }}>减</span>
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"130px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grids>
|
||||
|
||||
<FormItem labelname="发放总量" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="个"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="总预算" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup3_title}>
|
||||
<FormItem labelname="商品范围" prop="rank" id="rank">
|
||||
<div className="goods-boxs">
|
||||
<Select
|
||||
options={state.rankoptions}
|
||||
multiple
|
||||
value={state.rank}
|
||||
placeholder="选择一项"
|
||||
width={405}
|
||||
onChange={(e) => {
|
||||
onRankChange(e);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoodsBtnLoading}
|
||||
onClick={() => {
|
||||
addProduct("addProduct");
|
||||
}}
|
||||
>
|
||||
新建商品
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoldLoading}
|
||||
onClick={() => {
|
||||
addProduct("addKnockGold");
|
||||
}}
|
||||
disabled={
|
||||
!JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
|
||||
}
|
||||
>
|
||||
新建立减金
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
<div className="step-btn-group">
|
||||
<Button type="primary" onClick={() => submit()}>
|
||||
提交审核
|
||||
</Button>
|
||||
<Button type="normal" onClick={() => onReturn()}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default UseCouponAddEdit;
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
import React, { forwardRef, useImperativeHandle, useRef } from "react";
|
||||
import { useSetState } from "ahooks";
|
||||
import { FixedSizeList } from "react-window";
|
||||
import {
|
||||
Card,
|
||||
DateRangePicker,
|
||||
Button,
|
||||
LayoutRow as Row,
|
||||
LayoutCol as Col,
|
||||
LayoutGrid as Grids,
|
||||
Select,
|
||||
} from "zent";
|
||||
import moment from "moment";
|
||||
|
||||
import Ipt from "@/components/input/main";
|
||||
import Form from "@/components/form/main";
|
||||
import FormItem from "@/components/form-item/main";
|
||||
import Grid from "@/components/gird/main.js";
|
||||
|
||||
import "./style.less";
|
||||
|
||||
const tableColumn = [
|
||||
{
|
||||
title: "商品编号",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "官方价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "合同单价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "库存数量",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "批次号",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "总预算",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "有效时间段",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "上游平台",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
];
|
||||
|
||||
const rules = {
|
||||
name: [{ type: "required", message: "请输入批次名称" }],
|
||||
};
|
||||
|
||||
const UseCouponAddEdit = forwardRef((props, ref) => {
|
||||
/**
|
||||
* type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
|
||||
*/
|
||||
const { type = 0 } = props;
|
||||
const [state, setState] = useSetState({
|
||||
setup1_title: "基本信息",
|
||||
setup2_title: "发放规则",
|
||||
setup3_title: "商品范围",
|
||||
disabled: false,
|
||||
model: {
|
||||
name: "",
|
||||
date_time: "",
|
||||
},
|
||||
tableData: [],
|
||||
tableHeight: 500,
|
||||
page: 1,
|
||||
dataCount: 0,
|
||||
rankoptions: [],
|
||||
rank: [],
|
||||
newGoodsBtnLoading: false,
|
||||
newGoldLoading: false,
|
||||
lodgingTable: true,
|
||||
plan_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `plan 1`,
|
||||
},
|
||||
],
|
||||
key_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `key 1`,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
submit: submit,
|
||||
}));
|
||||
|
||||
const form_el = useRef(null);
|
||||
const table_el = useRef(null);
|
||||
|
||||
const submit = () => {
|
||||
let el = form_el.current.validator();
|
||||
console.log("el =>", el);
|
||||
};
|
||||
|
||||
const onReturn = () => {};
|
||||
const onChangeCombinedDate = () => {};
|
||||
const onDisabledRange = (date, type) => {
|
||||
let disabled = false;
|
||||
if (type == "end") {
|
||||
disabled = moment(date.getTime()).add(1, "days") <= new Date().getTime();
|
||||
}
|
||||
if (type == "start") {
|
||||
disabled = date.getTime() <= new Date().getTime();
|
||||
}
|
||||
return disabled;
|
||||
};
|
||||
const onPageChange = () => {};
|
||||
const onCountChange = () => {};
|
||||
const selectionFun = () => {};
|
||||
const onRankChange = () => {};
|
||||
const addProduct = () => {};
|
||||
const renderOptionList = (options, renderOption) => {
|
||||
return (
|
||||
<FixedSizeList
|
||||
height={8.5 * 32}
|
||||
itemCount={options.length}
|
||||
itemSize={32}
|
||||
width={240}
|
||||
>
|
||||
{({ index, style }) => (
|
||||
<div style={style}>{renderOption(options[index], index)}</div>
|
||||
)}
|
||||
</FixedSizeList>
|
||||
);
|
||||
};
|
||||
const plan_key_formEl = () => {
|
||||
return (
|
||||
<>
|
||||
<FormItem labelname="归属计划" prop="gs_plan">
|
||||
<Select
|
||||
clearable
|
||||
options={state.plan_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="归属key" prop="gs_key">
|
||||
<Select
|
||||
clearable
|
||||
options={state.key_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="coupon-box">
|
||||
<Form model={state.model} rules={rules} ref={form_el}>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup1_title}>
|
||||
{/* 是否显示两个字段 */}
|
||||
{type === 1 ? plan_key_formEl() : null}
|
||||
|
||||
<FormItem labelname="批次名称" prop="name" id="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={true}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="生效时间段" prop="date_time" id="date_time">
|
||||
<DateRangePicker
|
||||
className="zent-datepicker-plan"
|
||||
showTime={{
|
||||
format: "HH:mm:ss",
|
||||
defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
|
||||
}}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
disabled={[state.disabled, false]}
|
||||
value={state.model.date_time}
|
||||
onChange={(e) => {
|
||||
onChangeCombinedDate(e);
|
||||
}}
|
||||
disabledDate={onDisabledRange}
|
||||
/>
|
||||
</FormItem>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
<div className="step-btn-group">
|
||||
<Button type="primary" onClick={() => submit()}>
|
||||
提交审核
|
||||
</Button>
|
||||
<Button type="normal" onClick={() => onReturn()}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default UseCouponAddEdit;
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
import React, { forwardRef, useImperativeHandle, useRef } from "react";
|
||||
import { useSetState } from "ahooks";
|
||||
import { FixedSizeList } from "react-window";
|
||||
import {
|
||||
Card,
|
||||
DateRangePicker,
|
||||
Button,
|
||||
LayoutRow as Row,
|
||||
LayoutCol as Col,
|
||||
LayoutGrid as Grid,
|
||||
LayoutGrid as Grids,
|
||||
Select,
|
||||
} from "zent";
|
||||
import moment from "moment";
|
||||
|
||||
import Ipt from "@/components/input/main";
|
||||
import Form from "@/components/form/main";
|
||||
import FormItem from "@/components/form-item/main";
|
||||
import Grid from "@/components/gird/main.js";
|
||||
|
||||
import "./style.less";
|
||||
|
||||
|
|
@ -24,6 +27,83 @@ const tableColumn = [
|
|||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "官方价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "合同单价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "库存数量",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "批次号",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "总预算",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "有效时间段",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "上游平台",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
];
|
||||
|
||||
const rules = {
|
||||
|
|
@ -44,6 +124,23 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
tableHeight: 500,
|
||||
page: 1,
|
||||
dataCount: 0,
|
||||
rankoptions: [],
|
||||
rank: [],
|
||||
newGoodsBtnLoading: false,
|
||||
newGoldLoading: false,
|
||||
lodgingTable: true,
|
||||
plan_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `plan 1`,
|
||||
},
|
||||
],
|
||||
key_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `key 1`,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
|
|
@ -69,13 +166,43 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
const onPageChange = () => {};
|
||||
const onCountChange = () => {};
|
||||
const selectionFun = () => {};
|
||||
const addCouponBtn = () => {};
|
||||
const searchCallback = () => {};
|
||||
const onRankChange = () => {};
|
||||
const addProduct = () => {};
|
||||
const renderOptionList = (options, renderOption) => {
|
||||
return (
|
||||
<FixedSizeList
|
||||
height={8.5 * 32}
|
||||
itemCount={options.length}
|
||||
itemSize={32}
|
||||
width={240}
|
||||
>
|
||||
{({ index, style }) => (
|
||||
<div style={style}>{renderOption(options[index], index)}</div>
|
||||
)}
|
||||
</FixedSizeList>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="coupon-box">
|
||||
<Form model={state.model} rules={rules} ref={form_el}>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup1_title}>
|
||||
<Form model={state.model} rules={rules} ref={form_el}>
|
||||
<FormItem labelname="归属计划" prop="gs_plan">
|
||||
<Select
|
||||
clearable
|
||||
options={state.plan_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="归属key" prop="gs_key">
|
||||
<Select
|
||||
clearable
|
||||
options={state.key_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="批次名称" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
|
|
@ -89,7 +216,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
countShow={true}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
/>
|
||||
|
|
@ -111,10 +238,9 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
disabledDate={onDisabledRange}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup2_title}>
|
||||
<Grid>
|
||||
<Grids>
|
||||
<Row>
|
||||
<Col span={3}>
|
||||
<p>
|
||||
|
|
@ -161,12 +287,12 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
countShow={false}
|
||||
width={"130px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Grids>
|
||||
|
||||
<FormItem labelname="发放总量" prop="name">
|
||||
<Ipt
|
||||
|
|
@ -184,6 +310,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
countShow={false}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="个"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -203,29 +330,48 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
countShow={false}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup3_title}>
|
||||
<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={"请输入批次号、名称、key批次名称、计划名称 进行搜索"}
|
||||
countShow={false}
|
||||
height={"36px"}
|
||||
width={"260px"}
|
||||
onClearItem={(e) =>
|
||||
setState({ key_word: "", isQuery: !state.isQuery })
|
||||
}
|
||||
alignment={"left"}
|
||||
<FormItem labelname="商品范围" prop="rank" id="rank">
|
||||
<div className="goods-boxs">
|
||||
<Select
|
||||
options={state.rankoptions}
|
||||
multiple
|
||||
value={state.rank}
|
||||
placeholder="选择一项"
|
||||
width={405}
|
||||
onChange={(e) => {
|
||||
onRankChange(e);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoodsBtnLoading}
|
||||
onClick={() => {
|
||||
addProduct("addProduct");
|
||||
}}
|
||||
>
|
||||
新建商品
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoldLoading}
|
||||
onClick={() => {
|
||||
addProduct("addKnockGold");
|
||||
}}
|
||||
disabled={
|
||||
!JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
|
||||
}
|
||||
>
|
||||
新建立减金
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<Grid
|
||||
spliteColor={"#fff"}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { forwardRef, useImperativeHandle, useRef } from "react";
|
||||
import { useSetState } from "ahooks";
|
||||
import { FixedSizeList } from "react-window";
|
||||
import {
|
||||
Card,
|
||||
DateRangePicker,
|
||||
|
|
@ -17,6 +18,7 @@ import FormItem from "@/components/form-item/main";
|
|||
import Grid from "@/components/gird/main.js";
|
||||
|
||||
import "./style.less";
|
||||
import { useState } from "react";
|
||||
|
||||
const tableColumn = [
|
||||
{
|
||||
|
|
@ -106,10 +108,15 @@ const tableColumn = [
|
|||
];
|
||||
|
||||
const rules = {
|
||||
name: [{ type: "required", message: "请输入批次名称" }],
|
||||
addNew: [{ type: "required", message: "请输入批次名称" }],
|
||||
addNew1: [{ type: "required", message: "请输入批次名称" }],
|
||||
};
|
||||
|
||||
const UseCouponAddEdit = forwardRef((props, ref) => {
|
||||
/**
|
||||
* type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
|
||||
*/
|
||||
const { type = 0 } = props;
|
||||
const [state, setState] = useSetState({
|
||||
setup1_title: "基本信息",
|
||||
setup2_title: "发放规则",
|
||||
|
|
@ -117,7 +124,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
disabled: false,
|
||||
model: {
|
||||
name: "",
|
||||
time: "",
|
||||
name1: "",
|
||||
},
|
||||
tableData: [],
|
||||
tableHeight: 500,
|
||||
|
|
@ -128,7 +135,20 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
newGoodsBtnLoading: false,
|
||||
newGoldLoading: false,
|
||||
lodgingTable: true,
|
||||
plan_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `plan 1`,
|
||||
},
|
||||
],
|
||||
key_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `key 1`,
|
||||
},
|
||||
],
|
||||
});
|
||||
const [stateData, setStateData] = useState({ addNew: "", addNew1: "" });
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
submit: submit,
|
||||
|
|
@ -137,7 +157,11 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
const form_el = useRef(null);
|
||||
const table_el = useRef(null);
|
||||
|
||||
const submit = () => {};
|
||||
const submit = () => {
|
||||
let el = form_el.current.validator();
|
||||
console.log("el =>", el);
|
||||
};
|
||||
|
||||
const onReturn = () => {};
|
||||
const onChangeCombinedDate = () => {};
|
||||
const onDisabledRange = (date, type) => {
|
||||
|
|
@ -153,24 +177,57 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
const onPageChange = () => {};
|
||||
const onCountChange = () => {};
|
||||
const selectionFun = () => {};
|
||||
const addCouponBtn = () => {};
|
||||
const searchCallback = () => {};
|
||||
const onRankChange = () => {};
|
||||
const addProduct = () => {};
|
||||
const renderOptionList = (options, renderOption) => {
|
||||
return (
|
||||
<FixedSizeList
|
||||
height={8.5 * 32}
|
||||
itemCount={options.length}
|
||||
itemSize={32}
|
||||
width={240}
|
||||
>
|
||||
{({ index, style }) => (
|
||||
<div style={style}>{renderOption(options[index], index)}</div>
|
||||
)}
|
||||
</FixedSizeList>
|
||||
);
|
||||
};
|
||||
const plan_key_formEl = () => {
|
||||
return (
|
||||
<>
|
||||
<FormItem labelname="归属计划" prop="gs_plan">
|
||||
<Select
|
||||
clearable
|
||||
options={state.plan_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="归属key" prop="gs_key">
|
||||
<Select
|
||||
clearable
|
||||
options={state.key_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="coupon-box">
|
||||
<Form model={state.model} rules={rules} ref={form_el}>
|
||||
<Form model={stateData} rules={rules} ref={form_el}>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup1_title}>
|
||||
<Form model={state.model} rules={rules} ref={form_el}>
|
||||
<FormItem labelname="批次名称" prop="name">
|
||||
<FormItem labelname="批次名称" prop="addNew" id="addNew">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
onChange={(value) => {
|
||||
setStateData({ ...stateData, addNew: value });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
setStateData({ ...stateData, addNew: "" });
|
||||
}}
|
||||
value={state.model.name}
|
||||
value={stateData.addNew}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
|
|
@ -181,203 +238,24 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="生效时间段" prop="date_time" id="date_time">
|
||||
<DateRangePicker
|
||||
className="zent-datepicker-plan"
|
||||
showTime={{
|
||||
format: "HH:mm:ss",
|
||||
defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
|
||||
}}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
disabled={[state.disabled, false]}
|
||||
value={state.model.date_time}
|
||||
onChange={(e) => {
|
||||
onChangeCombinedDate(e);
|
||||
}}
|
||||
disabledDate={onDisabledRange}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup2_title}>
|
||||
<Grids>
|
||||
<Row>
|
||||
<Col span={3}>
|
||||
<p>
|
||||
面额 <span className="mustwrite">*</span>
|
||||
</p>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<div className="justify-box">
|
||||
<span>满</span>
|
||||
<FormItem labelname="批次名称" prop="addNew1" id="addNew1">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
onChange={(value) => {
|
||||
setStateData({ ...stateData, addNew1: value });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
setStateData({ ...stateData, addNew1: "" });
|
||||
}}
|
||||
value={state.model.name}
|
||||
value={stateData.addNew1}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"130px"}
|
||||
alignment={"left"}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={3}>
|
||||
<div className="justify-box">
|
||||
<span style={{ paddingRight: "10px" }}>减</span>
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"130px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grids>
|
||||
|
||||
<FormItem labelname="发放总量" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
countShow={true}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="个"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="总预算" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup3_title}>
|
||||
<FormItem labelname="商品范围" prop="rank" id="rank">
|
||||
<div className="goods-boxs">
|
||||
<Select
|
||||
options={state.rankoptions}
|
||||
multiple
|
||||
value={state.rank}
|
||||
placeholder="选择一项"
|
||||
width={405}
|
||||
onChange={(e) => {
|
||||
onRankChange(e);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoodsBtnLoading}
|
||||
onClick={() => {
|
||||
addProduct("addProduct");
|
||||
}}
|
||||
>
|
||||
新建商品
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoldLoading}
|
||||
onClick={() => {
|
||||
addProduct("addKnockGold");
|
||||
}}
|
||||
disabled={
|
||||
!JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
|
||||
}
|
||||
>
|
||||
新建立减金
|
||||
</Button>
|
||||
|
||||
<Ipt
|
||||
onChange={(e) => setState({ key_word: e })}
|
||||
value={state.key_word}
|
||||
wordSearch={() => searchCallback()}
|
||||
icon="search"
|
||||
placeholder={
|
||||
"请输入批次号、名称、key批次名称、计划名称 进行搜索"
|
||||
}
|
||||
countShow={false}
|
||||
height={"36px"}
|
||||
width={"260px"}
|
||||
onClearItem={(e) =>
|
||||
setState({ key_word: "", isQuery: !state.isQuery })
|
||||
}
|
||||
alignment={"left"}
|
||||
/>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import UseCouponAddEdit from "@/components/UseCouponAddEdit";
|
|||
const CouponAddEdit = () => {
|
||||
return (
|
||||
<div className="coupon-add-edit">
|
||||
<UseCouponAddEdit></UseCouponAddEdit>
|
||||
<UseCouponAddEdit type={0}></UseCouponAddEdit>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue