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