Merge branch 'couponV1.5' of codeup.aliyun.com:5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5

This commit is contained in:
许红梅 2022-09-07 18:55:37 +08:00
commit cbc57b9c27
8 changed files with 98 additions and 1835 deletions

View File

@ -1,820 +0,0 @@
import React, {
forwardRef,
useImperativeHandle,
useRef,
useEffect,
} from "react";
import { useSetState } from "ahooks";
import { FixedSizeList } from "react-window";
import {
Card,
DateRangePicker,
Button,
Select,
Notify,
BlockLoading,
} from "zent";
import moment from "moment";
import _ from "lodash";
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 UseGoodsScopePop from "../UseGoodsScopePop/index";
import { isAmount } from "@/tools/validate";
import { getProductInfoSelect, handelResponse } from "@/assets/api.js";
import { mulNum } from "@/tools/number";
import "./style.less";
const tableColumn = [
{
title: "商品编号",
name: "product_id",
prop: "product_id",
type: "normal",
width: "auto",
},
{
title: "商品名称",
name: "product_name",
prop: "product_name",
type: "normal",
width: "auto",
},
{
title: "官方价",
name: "official_price",
prop: "official_price",
type: "normal",
width: "auto",
},
{
title: "合同单价",
name: "contract_price",
prop: "contract_price",
type: "normal",
width: "auto",
},
{
title: "库存数量",
name: "quantity",
prop: "quantity",
type: "normal",
width: "auto",
},
{
title: "批次号",
name: "channel_activity_id",
prop: "channel_activity_id",
type: "normal",
width: "auto",
},
{
title: "总预算",
name: "all_budget",
prop: "all_budget",
type: "normal",
width: "auto",
},
{
title: "有效时间段",
name: "effectDate",
prop: "effectDate",
type: "normal",
width: "auto",
},
{
title: "创建时间",
name: "createDate",
prop: "createDate",
type: "normal",
width: "auto",
},
{
title: "类型",
name: "goods_type",
prop: "goods_type",
type: "slot",
width: "auto",
},
{
title: "上游平台",
name: "upstream",
prop: "upstream",
type: "normal",
width: "auto",
},
{
title: "操作",
name: "opearo",
prop: "opearo",
type: "slot",
width: "200px",
},
];
const info_rules = {
plan_id: [{ type: "required", message: "请选择归属计划" }],
key_batch_id: [{ type: "required", message: "请选择归属key" }],
name: [{ type: "required", message: "请输入批次名称" }],
date_time: [{ type: "required", message: "请选择时间" }],
};
const rule_rules = {
full: [
{ type: "required", message: "请输入面额" },
{
type: "regExp",
message: "请输入两位小数",
reg: "^[0-9][0-9]*([.][0-9]{1,2})?$",
},
],
restrict: [
{ type: "required", message: "请输入发放总量" },
{
type: "regExp",
message: "请输入正整数",
reg: "^[1-9]*$",
},
],
};
const UseCouponAddEdit = forwardRef((props, ref) => {
const { type = 0, isAuditButton = true, isCopy = false } = props; // type 0 1key ()
useEffect(() => {
if (type === 0) {
delete info_rules.plan_id;
delete info_rules.key_batch_id;
} else {
info_rules.plan_id = [{ type: "required", message: "请选择归属计划" }];
info_rules.key_batch_id = [
{ type: "required", message: "请选择归属key" },
];
}
}, []);
const [state, setState] = useSetState({
setup1_title: "基本信息",
setup2_title: "发放规则",
setup3_title: "商品范围",
time_disabled: false,
tableData: [],
tableHeight: 500,
page: 1,
dataCount: 0,
rankoptions: [],
rank: [],
newGoodsBtnLoading: false,
newGoldLoading: false,
lodgingTable: true,
isRestrict: true,
plan_OPTIONS: [
{
key: "1",
text: `plan 1`,
},
{
key: "2",
text: `plan 2`,
},
],
key_OPTIONS: [
{
key: 2,
text: `key 1`,
},
],
addProductBtnLoading: false,
addGoldBtnLoading: false,
product_title: "",
showScopePop: false,
scopePopType: "",
productData: {},
direct_reseller_id: 23329,
tableLoading: false,
});
//
const [form_info_data, setForm_info_data] = useSetState({
plan_id: "",
key_batch_id: "",
name: "",
date_time: "",
});
const form_info_el = useRef(null);
//
const [form_rule_data, setForm_rule_data] = useSetState({
full: "",
reduce: "",
restrict: "",
budget: "",
});
const form_rule_el = useRef(null);
//
useEffect(() => {
setIsRestrict();
}, [form_rule_data.reduce, form_rule_data.full]);
//
useEffect(() => {
setBudget();
}, [form_rule_data.reduce, form_rule_data.restrict]);
const table_el = useRef(null);
useImperativeHandle(ref, () => ({
submit: submit,
}));
const submit = () => {
//
let el_setup1 = form_info_el.current.validator();
// console.log("el_setup1 =>", el_setup1);
// console.log("form_info_data =>", form_info_data);
//
let el_setup2 = form_rule_el.current.validator();
// console.log("el_setup2 =>", el_setup2);
console.log("rank =>", state.rank);
};
const onReturn = () => {};
const onChangeCombinedDate = (e) => {
setForm_info_data({ date_time: e });
//
sessionStorage.setItem(
"knockGold_effectDate",
JSON.stringify({
begin_time: e[0],
end_time: e[1],
})
);
};
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 clearStorageData = () => {
if (state.tableData.length <= 0) {
sessionStorage.setItem("productData", "");
sessionStorage.setItem("knockGoldData", "");
}
//
let product_data = state.tableData.filter((item) => item.goods_type === 1);
if (product_data.length <= 0) {
sessionStorage.setItem("productData", "");
} else {
sessionStorage.setItem("productData", JSON.stringify(product_data));
}
//
let knockGold_data = state.tableData.filter(
(item) => item.goods_type === 2
);
if (knockGold_data.length <= 0) {
sessionStorage.setItem("knockGoldData", "");
} else {
sessionStorage.setItem("knockGoldData", JSON.stringify(knockGold_data));
}
};
const addProduct = (type) => {
try {
// id
const direct_reseller_ids = state.direct_reseller_id;
if (direct_reseller_ids <= 0) {
Notify.error(`请添加映射分销商`);
return;
}
//
clearStorageData();
// :
if (type === "addProduct") {
setState({
product_title: "新建商品",
addProductBtnLoading: true,
scopePopType: "addProduct",
});
} else {
setState({
product_title: "新增立减金",
addGoldBtnLoading: true,
scopePopType: "addKnockGold",
});
}
//
let param = {
reseller_id: direct_reseller_ids,
};
getProductInfoSelect(param).then((res) => {
setState({ addProductBtnLoading: false, addGoldBtnLoading: false });
handelResponse(
res,
(req, msg) => {
// !!!!!!!!!!!!!! 使 productsList
sessionStorage.setItem("productsList", JSON.stringify(req.data));
// !!!!!!!!!!!!!! 使 productsList
setState({ productData: null });
setState({
showScopePop: true,
});
},
(err) => {
console.log("err =>", err);
}
);
});
} catch (err) {
setState({ addProductBtnLoading: false, addGoldBtnLoading: false });
}
};
//
const productEditShow = (rowData) => {
try {
// id
const direct_reseller_ids = state.direct_reseller_id;
if (direct_reseller_ids <= 0) {
Notify.error(`请添加映射分销商`);
return;
}
setState({
tableLoading: true,
});
//
let param = {
reseller_id: direct_reseller_ids,
};
getProductInfoSelect(param).then((res) => {
setState({ tableLoading: false });
handelResponse(
res,
(req, msg) => {
//
sessionStorage.setItem("productsList", JSON.stringify(req.data));
/* 区分立减金 */
if (rowData.goods_type === 2) {
let obj = rowData.only;
setState({
product_title: "编辑立减金",
productData: obj,
addIsType: "addKnockGold",
showScopePop: true,
});
} else {
setState({
product_title: "编辑商品",
productData: rowData,
addIsType: "addProduct",
showScopePop: true,
});
}
},
(err) => {
console.log("err =>", err);
}
);
});
} catch (err) {
setState({ tableLoading: false });
console.log("err =>", err);
}
};
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 setIsRestrict = () => {
if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.full)) {
setState({ isRestrict: false });
} else {
setState({ isRestrict: true });
}
};
//
const setBudget = () => {
if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.restrict)) {
let num = mulNum(
Number(form_rule_data.reduce),
Number(form_rule_data.restrict)
);
setForm_rule_data({
budget: num,
});
} else {
setForm_rule_data({
budget: "",
});
}
};
//
const scopePopClose = () => {
setState({
showScopePop: false,
});
};
const selectionFun = (e) => {
let arr = [];
_.map(e, (res) => {
let obj = {};
obj.key = res;
obj.text = res.product_name;
arr.push(obj);
return obj;
});
setState({ rank: arr });
};
const onRankChange = (e) => {
let new_table_data = state.tableData.map((item) => {
item.checked =
e.findIndex((checks) => {
return checks.key === item;
}) > -1;
return item;
});
setState({ tableData: new_table_data, rank: e });
};
//
const scopePopSubmit = (data) => {
try {
//
let data_new = data;
let new_table = state.tableData;
//
if (data_new.goods_type === 1) {
let el_index = new_table.findIndex(
(item) => item.product_id === data_new.product_id
);
if (el_index !== -1) {
new_table[el_index] = data_new;
} else {
new_table.push(data_new);
}
}
//
if (data_new.goods_type === 2) {
let el_index = new_table.findIndex(
(item) =>
item.channel_activity_id === data_new.only.channel_activity_id
);
if (el_index !== -1) {
new_table[el_index] = data_new;
} else {
new_table.push(data_new);
}
}
console.log("所有数据 =>", new_table);
//
let select_opt = [];
new_table.map((item) => {
let obj = {};
obj.key = item; //
obj.text = item.product_name;
select_opt.push(obj);
});
//
setState({
tableData: new_table,
rankoptions: select_opt,
});
} catch (err) {
console.log("err =>", err);
}
};
//
const deleteGoodsScope = (index) => {
let new_table = state.tableData;
if (index === 0) {
new_table = [];
} else {
new_table = new_table.splice(index, 1);
}
let select_opt = [];
new_table.map((item) => {
let obj = {};
obj.key = item; //
obj.text = item.product_name;
select_opt.push(obj);
});
selectionFun(new_table);
setState({
tableData: new_table,
rankoptions: select_opt,
});
};
return (
<div className="coupon-box">
<Card style={{ margin: "10px auto" }} title={state.setup1_title}>
<Form model={form_info_data} rules={info_rules} ref={form_info_el}>
{type === 1 ? (
<FormItem labelname="归属计划" prop="plan_id">
<Select
clearable
placeholder="选择一项"
renderOptionList={renderOptionList}
options={state.plan_OPTIONS}
value={form_info_data.plan_id}
onChange={(e) => {
setForm_info_data({ plan_id: e });
}}
/>
</FormItem>
) : null}
{type === 1 ? (
<FormItem labelname="归属key" prop="key_batch_id">
<Select
clearable
placeholder="选择一项"
renderOptionList={renderOptionList}
options={state.key_OPTIONS}
value={form_info_data.key_batch_id}
onChange={(e) => {
setForm_info_data({ key_batch_id: e });
}}
/>
</FormItem>
) : null}
<FormItem labelname="批次名称" prop="name">
<Ipt
onChange={(e) => {
setForm_info_data({ name: e });
}}
onClearItem={() => {
setForm_info_data({ name: "" });
}}
value={form_info_data.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.time_disabled, false]}
value={form_info_data.date_time}
onChange={(e) => {
onChangeCombinedDate(e);
}}
disabledDate={onDisabledRange}
/>
</FormItem>
</Form>
</Card>
<Card style={{ margin: "10px auto" }} title={state.setup2_title}>
<Form model={form_rule_data} rules={rule_rules} ref={form_rule_el}>
<FormItem labelname="面额" prop="full">
<div className="justify-box">
<Ipt
onChange={(e) => {
setForm_rule_data({ full: e });
}}
onClearItem={() => {
setForm_rule_data({ full: "" });
}}
value={form_rule_data.full}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"130px"}
alignment={"left"}
front="满"
/>
<Ipt
onChange={(e) => {
setForm_rule_data({ reduce: e });
}}
onClearItem={() => {
setForm_rule_data({ reduce: "" });
}}
value={form_rule_data.reduce}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"130px"}
alignment={"left"}
front="减"
unit="元"
/>
</div>
</FormItem>
<FormItem labelname="发放总量" prop="restrict">
<Ipt
onChange={(e) => {
setForm_rule_data({
restrict: e,
});
}}
onClearItem={() => {
setForm_rule_data({ restrict: "" });
}}
disabled={state.isRestrict}
value={form_rule_data.restrict}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"520px"}
alignment={"left"}
unit="个"
/>
</FormItem>
<FormItem labelname="总预算" prop="budget">
<Ipt
disabled={true}
value={form_rule_data.budget}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"520px"}
alignment={"left"}
unit="元"
/>
</FormItem>
</Form>
</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.addProductBtnLoading}
onClick={() => {
addProduct("addProduct");
}}
>
新建商品
</Button>
<Button
type="primary"
style={{ marginLeft: "20px" }}
loading={state.addGoldBtnLoading}
onClick={() => {
addProduct("addKnockGold");
}}
disabled={
!JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
}
>
新建立减金
</Button>
</div>
</FormItem>
<BlockLoading
loading={state.tableLoading}
iconSize={16}
textSize={12}
icon="circle"
iconText="加载中"
>
<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, rowIndex) => {
if (com === "opearo") {
return (
<div>
<span
className="grid-link"
onClick={() => productEditShow(rowData)}
>
编辑
</span>
<span
style={{ color: "red" }}
className="grid-link"
onClick={() => deleteGoodsScope(rowIndex)}
>
删除
</span>
</div>
);
}
if (com === "goods_type") {
return (
<span>{rowData.goods_type === 1 ? "商品" : "立减金"}</span>
);
}
}}
/>
</BlockLoading>
</Card>
{isAuditButton ? (
<div className="step-btn-group">
<Button type="primary" onClick={() => submit()}>
提交审核
</Button>
<Button type="normal" onClick={() => onReturn()}>
取消
</Button>
</div>
) : null}
<UseGoodsScopePop
product_title={state.product_title}
drawerVisible={state.showScopePop}
type={state.scopePopType}
productData={state.productData}
onClose={() => scopePopClose()}
submit={(data) => scopePopSubmit(data)}
></UseGoodsScopePop>
</div>
);
});
export default UseCouponAddEdit;

View File

@ -1,795 +0,0 @@
import React, {
forwardRef,
useImperativeHandle,
useRef,
useEffect,
} from "react";
import { useSetState } from "ahooks";
import { FixedSizeList } from "react-window";
import {
Card,
DateRangePicker,
Button,
Select,
Notify,
BlockLoading,
} from "zent";
import moment from "moment";
import _ from "lodash";
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 UseGoodsScopePop from "../UseGoodsScopePop/index";
import { isAmount } from "@/tools/validate";
import { getProductInfoSelect, handelResponse } from "@/assets/api.js";
import { mulNum } from "@/tools/number";
import "./style.less";
const tableColumn = [
{
title: "商品编号",
name: "product_id",
prop: "product_id",
type: "normal",
width: "auto",
},
{
title: "商品名称",
name: "product_name",
prop: "product_name",
type: "normal",
width: "auto",
},
{
title: "官方价",
name: "official_price",
prop: "official_price",
type: "normal",
width: "auto",
},
{
title: "合同单价",
name: "contract_price",
prop: "contract_price",
type: "normal",
width: "auto",
},
{
title: "库存数量",
name: "quantity",
prop: "quantity",
type: "normal",
width: "auto",
},
{
title: "批次号",
name: "channel_activity_id",
prop: "channel_activity_id",
type: "normal",
width: "auto",
},
{
title: "总预算",
name: "all_budget",
prop: "all_budget",
type: "normal",
width: "auto",
},
{
title: "有效时间段",
name: "effectDate",
prop: "effectDate",
type: "normal",
width: "auto",
},
{
title: "创建时间",
name: "createDate",
prop: "createDate",
type: "normal",
width: "auto",
},
{
title: "类型",
name: "goods_type",
prop: "goods_type",
type: "slot",
width: "auto",
},
{
title: "上游平台",
name: "upstream",
prop: "upstream",
type: "normal",
width: "auto",
},
{
title: "操作",
name: "opearo",
prop: "opearo",
type: "slot",
width: "200px",
},
];
const info_rules = {
plan_id: [{ type: "required", message: "请选择归属计划" }],
key_batch_id: [{ type: "required", message: "请选择归属key" }],
name: [{ type: "required", message: "请输入批次名称" }],
date_time: [{ type: "required", message: "请选择时间" }],
};
const rule_rules = {
full: [
{ type: "required", message: "请输入面额" },
{
type: "regExp",
message: "请输入两位小数",
reg: "^[0-9][0-9]*([.][0-9]{1,2})?$",
},
],
restrict: [
{ type: "required", message: "请输入发放总量" },
{
type: "regExp",
message: "请输入正整数",
reg: "^[1-9]*$",
},
],
};
const UseCouponAddEdit = forwardRef((props, ref) => {
const { type = 0, isAuditButton = true, isCopy = false } = props; // type 0 1key ()
useEffect(() => {
if (type === 0) {
delete info_rules.plan_id;
delete info_rules.key_batch_id;
} else {
info_rules.plan_id = [{ type: "required", message: "请选择归属计划" }];
info_rules.key_batch_id = [
{ type: "required", message: "请选择归属key" },
];
}
}, []);
const [state, setState] = useSetState({
setup1_title: "基本信息",
setup2_title: "发放规则",
setup3_title: "商品范围",
time_disabled: false,
tableData: [],
tableHeight: 500,
page: 1,
dataCount: 0,
rankoptions: [],
rank: [],
newGoodsBtnLoading: false,
newGoldLoading: false,
lodgingTable: true,
isRestrict: true,
plan_OPTIONS: [
{
key: "1",
text: `plan 1`,
},
{
key: "2",
text: `plan 2`,
},
],
key_OPTIONS: [
{
key: 2,
text: `key 1`,
},
],
addProductBtnLoading: false,
addGoldBtnLoading: false,
product_title: "",
showScopePop: false,
scopePopType: "",
productData: {},
direct_reseller_id: 23329,
tableLoading: false,
});
//
const [form_info_data, setForm_info_data] = useSetState({
plan_id: "",
key_batch_id: "",
name: "",
date_time: "",
});
const form_info_el = useRef(null);
//
const [form_rule_data, setForm_rule_data] = useSetState({
full: "",
reduce: "",
restrict: "",
budget: "",
});
const form_rule_el = useRef(null);
//
useEffect(() => {
setIsRestrict();
}, [form_rule_data.reduce, form_rule_data.full]);
//
useEffect(() => {
setBudget();
}, [form_rule_data.reduce, form_rule_data.restrict]);
const table_el = useRef(null);
useImperativeHandle(ref, () => ({
submit: submit,
}));
const submit = () => {
//
let el_setup1 = form_info_el.current.validator();
// console.log("el_setup1 =>", el_setup1);
// console.log("form_info_data =>", form_info_data);
//
let el_setup2 = form_rule_el.current.validator();
// console.log("el_setup2 =>", el_setup2);
console.log("rank =>", state.rank);
};
const onReturn = () => {};
const onChangeCombinedDate = (e) => {
setForm_info_data({ date_time: e });
//
sessionStorage.setItem(
"knockGold_effectDate",
JSON.stringify({
begin_time: e[0],
end_time: e[1],
})
);
};
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 clearStorageData = () => {
if (state.tableData.length <= 0) {
sessionStorage.setItem("productData", "");
sessionStorage.setItem("knockGoldData", "");
}
//
let product_data = state.tableData.filter((item) => item.goods_type === 1);
if (product_data.length <= 0) {
sessionStorage.setItem("productData", "");
} else {
sessionStorage.setItem("productData", JSON.stringify(product_data));
}
//
let knockGold_data = state.tableData.filter(
(item) => item.goods_type === 2
);
if (knockGold_data.length <= 0) {
sessionStorage.setItem("knockGoldData", "");
} else {
sessionStorage.setItem("knockGoldData", JSON.stringify(knockGold_data));
}
};
const addProduct = (type) => {
try {
// id
const direct_reseller_ids = state.direct_reseller_id;
if (direct_reseller_ids <= 0) {
Notify.error(`请添加映射分销商`);
return;
}
//
clearStorageData();
// :
if (type === "addProduct") {
setState({
product_title: "新建商品",
addProductBtnLoading: true,
scopePopType: "addProduct",
});
} else {
setState({
product_title: "新增立减金",
addGoldBtnLoading: true,
scopePopType: "addKnockGold",
});
}
//
let param = {
reseller_id: direct_reseller_ids,
};
getProductInfoSelect(param).then((res) => {
setState({ addProductBtnLoading: false, addGoldBtnLoading: false });
handelResponse(
res,
(req, msg) => {
// !!!!!!!!!!!!!! 使 productsList
sessionStorage.setItem("productsList", JSON.stringify(req.data));
// !!!!!!!!!!!!!! 使 productsList
setState({ productData: null });
setState({
showScopePop: true,
});
},
(err) => {
console.log("err =>", err);
}
);
});
} catch (err) {
setState({ addProductBtnLoading: false, addGoldBtnLoading: false });
}
};
//
const productEditShow = (rowData) => {
try {
// id
const direct_reseller_ids = state.direct_reseller_id;
if (direct_reseller_ids <= 0) {
Notify.error(`请添加映射分销商`);
return;
}
setState({
tableLoading: true,
});
//
let param = {
reseller_id: direct_reseller_ids,
};
getProductInfoSelect(param).then((res) => {
setState({ tableLoading: false });
handelResponse(
res,
(req, msg) => {
//
sessionStorage.setItem("productsList", JSON.stringify(req.data));
/* 区分立减金 */
if (rowData.goods_type === 2) {
let obj = rowData.only;
setState({
product_title: "编辑立减金",
productData: obj,
addIsType: "addKnockGold",
showScopePop: true,
});
} else {
setState({
product_title: "编辑商品",
productData: rowData,
addIsType: "addProduct",
showScopePop: true,
});
}
},
(err) => {
console.log("err =>", err);
}
);
});
} catch (err) {
setState({ tableLoading: false });
console.log("err =>", err);
}
};
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 setIsRestrict = () => {
if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.full)) {
setState({ isRestrict: false });
} else {
setState({ isRestrict: true });
}
};
//
const setBudget = () => {
if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.restrict)) {
let num = mulNum(
Number(form_rule_data.reduce),
Number(form_rule_data.restrict)
);
setForm_rule_data({
budget: num,
});
} else {
setForm_rule_data({
budget: "",
});
}
};
//
const scopePopClose = () => {
setState({
showScopePop: false,
});
};
const selectionFun = (e) => {
let arr = [];
_.map(e, (res) => {
let obj = {};
obj.key = res.product_id;
obj.text = res.product_name;
arr.push(obj);
return obj;
});
setState({ rank: arr });
};
const onRankChange = (e) => {
let new_table_data = state.tableData.map((item) => {
console.log("item =>", item);
item.checked =
e.findIndex((checks) => {
return checks.key == item.product_id;
}) > -1;
return item;
});
setState({ tableData: new_table_data, rank: e });
};
//
const scopePopSubmit = (table_all) => {
try {
//
let new_table = table_all;
console.log("所有数据 =>", new_table);
//
let select_opt = [];
new_table.map((item) => {
let obj = {};
obj.key = item.product_id; //
obj.text = item.product_name;
select_opt.push(obj);
});
console.log("select_opt =>", select_opt);
//
setState({
tableData: new_table,
rankoptions: select_opt,
});
} catch (err) {
console.log("err =>", err);
}
};
//
const deleteGoodsScope = (index) => {
let new_table = state.tableData;
if (index === 0) {
new_table = [];
} else {
new_table = new_table.splice(index, 1);
}
let select_opt = [];
new_table.map((item) => {
let obj = {};
obj.key = item.product_id;
obj.text = item.product_name;
select_opt.push(obj);
});
selectionFun(new_table);
setState({
tableData: new_table,
rankoptions: select_opt,
});
};
return (
<div className="coupon-box">
<Card style={{ margin: "10px auto" }} title={state.setup1_title}>
<Form model={form_info_data} rules={info_rules} ref={form_info_el}>
{type === 1 ? (
<FormItem labelname="归属计划" prop="plan_id">
<Select
clearable
placeholder="选择一项"
renderOptionList={renderOptionList}
options={state.plan_OPTIONS}
value={form_info_data.plan_id}
onChange={(e) => {
setForm_info_data({ plan_id: e });
}}
/>
</FormItem>
) : null}
{type === 1 ? (
<FormItem labelname="归属key" prop="key_batch_id">
<Select
clearable
placeholder="选择一项"
renderOptionList={renderOptionList}
options={state.key_OPTIONS}
value={form_info_data.key_batch_id}
onChange={(e) => {
setForm_info_data({ key_batch_id: e });
}}
/>
</FormItem>
) : null}
<FormItem labelname="批次名称" prop="name">
<Ipt
onChange={(e) => {
setForm_info_data({ name: e });
}}
onClearItem={() => {
setForm_info_data({ name: "" });
}}
value={form_info_data.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.time_disabled, false]}
value={form_info_data.date_time}
onChange={(e) => {
onChangeCombinedDate(e);
}}
disabledDate={onDisabledRange}
/>
</FormItem>
</Form>
</Card>
<Card style={{ margin: "10px auto" }} title={state.setup2_title}>
<Form model={form_rule_data} rules={rule_rules} ref={form_rule_el}>
<FormItem labelname="面额" prop="full">
<div className="justify-box">
<Ipt
onChange={(e) => {
setForm_rule_data({ full: e });
}}
onClearItem={() => {
setForm_rule_data({ full: "" });
}}
value={form_rule_data.full}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"130px"}
alignment={"left"}
front="满"
/>
<Ipt
onChange={(e) => {
setForm_rule_data({ reduce: e });
}}
onClearItem={() => {
setForm_rule_data({ reduce: "" });
}}
value={form_rule_data.reduce}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"130px"}
alignment={"left"}
front="减"
unit="元"
/>
</div>
</FormItem>
<FormItem labelname="发放总量" prop="restrict">
<Ipt
onChange={(e) => {
setForm_rule_data({
restrict: e,
});
}}
onClearItem={() => {
setForm_rule_data({ restrict: "" });
}}
disabled={state.isRestrict}
value={form_rule_data.restrict}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"520px"}
alignment={"left"}
unit="个"
/>
</FormItem>
<FormItem labelname="总预算" prop="budget">
<Ipt
disabled={true}
value={form_rule_data.budget}
placeholder={"请输入"}
labelWidth={"0px"}
maxLength={20}
height={"36px"}
countShow={false}
width={"520px"}
alignment={"left"}
unit="元"
/>
</FormItem>
</Form>
</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.addProductBtnLoading}
onClick={() => {
addProduct("addProduct");
}}
>
新建商品
</Button>
<Button
type="primary"
style={{ marginLeft: "20px" }}
loading={state.addGoldBtnLoading}
onClick={() => {
addProduct("addKnockGold");
}}
disabled={
!JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
}
>
新建立减金
</Button>
</div>
</FormItem>
<BlockLoading
loading={state.tableLoading}
iconSize={16}
textSize={12}
icon="circle"
iconText="加载中"
>
<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, rowIndex) => {
if (com === "opearo") {
return (
<div>
<span
className="grid-link"
onClick={() => productEditShow(rowData)}
>
编辑
</span>
<span
style={{ color: "red" }}
className="grid-link"
onClick={() => deleteGoodsScope(rowIndex)}
>
删除
</span>
</div>
);
}
if (com === "goods_type") {
return (
<span>{rowData.goods_type === 1 ? "商品" : "立减金"}</span>
);
}
}}
/>
</BlockLoading>
</Card>
{isAuditButton ? (
<div className="step-btn-group">
<Button type="primary" onClick={() => submit()}>
提交审核
</Button>
<Button type="normal" onClick={() => onReturn()}>
取消
</Button>
</div>
) : null}
<UseGoodsScopePop
product_title={state.product_title}
drawerVisible={state.showScopePop}
type={state.scopePopType}
productData={state.productData}
onClose={() => scopePopClose()}
tableData={state.tableData}
submit={(data) => scopePopSubmit(data)}
></UseGoodsScopePop>
</div>
);
});
export default UseCouponAddEdit;

View File

@ -195,6 +195,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
productData: {},
direct_reseller_id: 23329,
tableLoading: false,
table_index: -1,
});
//
@ -349,7 +350,9 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
};
//
const productEditShow = (rowData) => {
const productEditShow = (rowData, index) => {
console.log("rowData =>", rowData);
console.log("index =>", index);
try {
// id
const direct_reseller_ids = state.direct_reseller_id;
@ -357,6 +360,8 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
Notify.error(`请添加映射分销商`);
return;
}
//
clearStorageData();
setState({
tableLoading: true,
});
@ -379,6 +384,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
productData: obj,
addIsType: "addKnockGold",
showScopePop: true,
table_index: index,
});
} else {
setState({
@ -386,6 +392,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
productData: rowData,
addIsType: "addProduct",
showScopePop: true,
table_index: index,
});
}
},
@ -452,7 +459,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
let arr = [];
_.map(e, (res) => {
let obj = {};
obj.key = res;
obj.key = res.product_id;
obj.text = res.product_name;
arr.push(obj);
return obj;
@ -462,9 +469,10 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
const onRankChange = (e) => {
let new_table_data = state.tableData.map((item) => {
console.log("item =>", item);
item.checked =
e.findIndex((checks) => {
return checks.key === item;
return checks.key == item.product_id;
}) > -1;
return item;
});
@ -472,52 +480,40 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
};
//
const scopePopSubmit = (data) => {
const scopePopSubmit = (table_all) => {
try {
//
let data_new = data;
let new_table = state.tableData;
//
if (data_new.goods_type === 1) {
let el_index = new_table.findIndex(
(item) => item.product_id === data_new.product_id
);
if (el_index !== -1) {
new_table[el_index] = data_new;
} else {
new_table.push(data_new);
}
}
//
if (data_new.goods_type === 2) {
let el_index = new_table.findIndex(
(item) =>
item.channel_activity_id === data_new.only.channel_activity_id
);
if (el_index !== -1) {
new_table[el_index] = data_new;
} else {
new_table.push(data_new);
}
}
let new_table = table_all;
console.log("所有数据 =>", new_table);
//
let select_opt = [];
new_table.map((item) => {
let obj = {};
obj.key = item; //
obj.key = item.product_id; //
obj.text = item.product_name;
select_opt.push(obj);
});
console.log("select_opt =>", select_opt);
console.log("rank =>", state.rank);
let select_arr = [];
new_table.map((item) => {
console.log("item =>", item);
let obj = {};
if (item.checked) {
obj.key = item.product_id;
obj.text = item.product_name;
select_arr.push(obj);
}
});
console.log("select_arr =>", select_arr);
//
setState({
tableData: new_table,
rankoptions: select_opt,
rank: select_arr,
});
} catch (err) {
console.log("err =>", err);
@ -526,16 +522,13 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
//
const deleteGoodsScope = (index) => {
console.log("index deleat", index);
let new_table = state.tableData;
if (index === 0) {
new_table = [];
} else {
new_table = new_table.splice(index, 1);
}
new_table.splice(index, 1);
let select_opt = [];
new_table.map((item) => {
let obj = {};
obj.key = item; //
obj.key = item.product_id;
obj.text = item.product_name;
select_opt.push(obj);
});
@ -769,7 +762,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
<div>
<span
className="grid-link"
onClick={() => productEditShow(rowData)}
onClick={() => productEditShow(rowData, rowIndex)}
>
编辑
</span>
@ -811,6 +804,8 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
type={state.scopePopType}
productData={state.productData}
onClose={() => scopePopClose()}
tableData={state.tableData}
table_index={state.table_index}
submit={(data) => scopePopSubmit(data)}
></UseGoodsScopePop>
</div>

View File

@ -382,7 +382,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
setState({
product_title: "编辑立减金",
productData: obj,
addIsType: "addKnockGold",
scopePopType: "addKnockGold",
showScopePop: true,
table_index: index,
});
@ -390,7 +390,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
setState({
product_title: "编辑商品",
productData: rowData,
addIsType: "addProduct",
scopePopType: "addProduct",
showScopePop: true,
table_index: index,
});

View File

@ -1,143 +0,0 @@
import React, { forwardRef, useImperativeHandle, useRef } from "react";
import { Card, Drawer, Button } from "zent";
import Productform from "@/pages/plan/product/add"; /* 商品 */
import KnockGold from "@/components/knockGold"; /* 立减金 */
const UseGoodsScopePop = forwardRef((props, ref) => {
const {
product_title,
drawerVisible,
onClose,
type,
productData,
submit,
tableData,
} = props;
// ref
// useImperativeHandle(ref, () => ({
// submit: submitPop,
// }));
const product_el = useRef(null);
const knockGold_el = useRef(null);
//
const format_product_model = () => {
//
//
let form_model = product_el.current.state.model;
form_model.goods_type = 1;
form_model.upstream = "直连天下";
form_model.all_budget =
Number(form_model.contract_price) * Number(form_model.quantity);
form_model.effectDate = "-";
let new_tableData = tableData;
new_tableData.push(form_model);
return new_tableData;
};
//
const format_knockGold_model = () => {
let channel_activity_id =
knockGold_el.current.state.model.channel_activity_id;
let form_data_arr = JSON.parse(sessionStorage.getItem("knockGoldData"));
let table_obj = {};
let form_model = form_data_arr.find(
(item) => item.channel_activity_id === channel_activity_id
);
if (form_model) {
table_obj.only = form_model; //
table_obj.product_id = channel_activity_id; //
table_obj.product_name = form_model.batch_goods_name; //
table_obj.official_price = form_model.reduce_amount; //
table_obj.contract_price = form_model.price; //
table_obj.quantity = Math.trunc(
form_model.all_budget / form_model.reduce_amount
); //
table_obj.channel_activity_id = form_model.channel_activity_id; //
table_obj.all_budget = Number(form_model.all_budget); //
table_obj.effectDate = `${form_model.time_limit.effect_time.end_time}${form_model.time_limit.effect_time.start_time}`; //
table_obj.createDate = ""; //
table_obj.goods_type = 2; //
table_obj.upstream =
String(form_model.channel) === "1" ? "支付宝" : "微信"; //
// table
return table_obj;
}
};
//
const submitPop = async () => {
try {
//
let visible = false;
if (type === "addProduct") {
visible = await product_el.current.submit();
} else {
visible = await knockGold_el.current.submit();
}
if (visible) {
// table
let form_data = {};
if (type === "addProduct") {
form_data = format_product_model();
} else {
form_data = format_knockGold_model();
}
console.log("form_data 1=>", form_data);
submit(form_data);
onClose();
}
} catch (err) {
console.log("err =>", err);
}
};
return (
<Drawer
className="draw"
width={"86%"}
title={product_title}
footer={
<div style={{ textAlign: "center" }}>
<Button
type="primary"
onClick={(e) => {
submitPop();
}}
>
提交
</Button>
<Button onClick={(e) => onClose()}>取消</Button>
</div>
}
visible={drawerVisible}
onClose={(e) => onClose()}
maskClosable={false}
>
<div className="draw2">
<Card
className="borderNone"
style={{ width: "95%", margin: "10px auto" }}
>
{type === "addKnockGold" ? (
<KnockGold
className="addKnockGold"
data={productData}
ref={knockGold_el}
/>
) : (
<Productform data={productData} ref={product_el}></Productform>
)}
</Card>
</div>
</Drawer>
);
});
export default UseGoodsScopePop;

View File

@ -5,10 +5,16 @@ import Productform from "@/pages/plan/product/add"; /* 商品 */
import KnockGold from "@/components/knockGold"; /* 立减金 */
const UseGoodsScopePop = forwardRef((props, ref) => {
const { product_title, drawerVisible, onClose, type, productData, submit } =
props;
console.log("productData =>", productData);
const {
product_title,
drawerVisible,
onClose,
type,
productData,
submit,
tableData,
table_index,
} = props;
// ref
// useImperativeHandle(ref, () => ({
@ -20,13 +26,26 @@ const UseGoodsScopePop = forwardRef((props, ref) => {
//
const format_product_model = () => {
let form_model = product_el.current.state.model;
let new_tableData = tableData;
//
let form_model = product_el.current.state.form_data;
form_model.goods_type = 1;
form_model.upstream = "直连天下";
form_model.all_budget =
Number(form_model.contract_price) * Number(form_model.quantity);
form_model.effectDate = "-";
return form_model;
if (product_title === "编辑商品") {
if (table_index !== -1) {
form_model.checked = false;
new_tableData[table_index] = form_model;
console.log("new_tableData =>", new_tableData);
}
} else {
new_tableData.push(form_model);
}
return new_tableData;
};
//
@ -40,7 +59,7 @@ const UseGoodsScopePop = forwardRef((props, ref) => {
);
if (form_model) {
table_obj.only = form_model; //
table_obj.product_id = "-"; //
table_obj.product_id = channel_activity_id; //
table_obj.product_name = form_model.batch_goods_name; //
table_obj.official_price = form_model.reduce_amount; //
table_obj.contract_price = form_model.price; //
@ -70,7 +89,7 @@ const UseGoodsScopePop = forwardRef((props, ref) => {
visible = await knockGold_el.current.submit();
}
if (visible) {
// table
// table
let form_data = {};
if (type === "addProduct") {
form_data = format_product_model();

View File

@ -27,7 +27,7 @@ const UseGoodsScopePop = forwardRef((props, ref) => {
//
const format_product_model = () => {
let new_tableData = tableData;
//
let form_model = product_el.current.state.form_data;
form_model.goods_type = 1;
form_model.upstream = "直连天下";
@ -50,32 +50,36 @@ const UseGoodsScopePop = forwardRef((props, ref) => {
//
const format_knockGold_model = () => {
let channel_activity_id =
knockGold_el.current.state.model.channel_activity_id;
let form_data_arr = JSON.parse(sessionStorage.getItem("knockGoldData"));
let new_tableData = tableData;
let table_obj = {};
let form_model = form_data_arr.find(
(item) => item.channel_activity_id === channel_activity_id
);
if (form_model) {
table_obj.only = form_model; //
table_obj.product_id = channel_activity_id; //
table_obj.product_name = form_model.batch_goods_name; //
table_obj.official_price = form_model.reduce_amount; //
table_obj.contract_price = form_model.price; //
table_obj.quantity = Math.trunc(
form_model.all_budget / form_model.reduce_amount
); //
table_obj.channel_activity_id = form_model.channel_activity_id; //
table_obj.all_budget = Number(form_model.all_budget); //
table_obj.effectDate = `${form_model.time_limit.effect_time.end_time}${form_model.time_limit.effect_time.start_time}`; //
table_obj.createDate = ""; //
table_obj.goods_type = 2; //
table_obj.upstream =
String(form_model.channel) === "1" ? "支付宝" : "微信"; //
// table
return table_obj;
let form_model = knockGold_el.current.state.form_data;
table_obj.goods_type = 2; //
table_obj.upstream = String(form_model.channel) === "1" ? "支付宝" : "微信"; //
table_obj.only = form_model; //
table_obj.product_id = form_model.channel_activity_id; //
table_obj.product_name = form_model.batch_goods_name; //
table_obj.official_price = form_model.reduce_amount; //
table_obj.contract_price = form_model.price; //
table_obj.quantity = Math.trunc(
form_model.all_budget / form_model.reduce_amount
); //
table_obj.channel_activity_id = form_model.channel_activity_id; //
table_obj.all_budget = Number(form_model.all_budget); //
table_obj.effectDate = `${form_model.time_limit.effect_time.end_time}${form_model.time_limit.effect_time.start_time}`; //
table_obj.createDate = ""; //
if (product_title === "编辑立减金") {
if (table_index !== -1) {
table_obj.checked = false;
new_tableData[table_index] = table_obj;
new_tableData[table_index].only = form_model;
}
} else {
new_tableData.push(table_obj);
}
return new_tableData;
};
//

View File

@ -119,6 +119,7 @@ export default class addKnockGold extends Component {
],
//
userSelectList: [],
form_data: {},
};
}
@ -420,7 +421,7 @@ export default class addKnockGold extends Component {
}
sessionStorage.setItem("knockGoldData", JSON.stringify(temp));
this.setState({ form_data: temp[index] });
return true;
} else {
/* 校验表单 */
@ -448,6 +449,8 @@ export default class addKnockGold extends Component {
data.push(models);
sessionStorage.setItem("knockGoldData", JSON.stringify(data));
this.setState({ form_data: models });
return true;
}
}