HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

1) 修复商品联动

This commit is contained in:
zhangds 2022-09-07 17:18:52 +08:00
parent 046ab5dd5b
commit 6d8f62c89b
7 changed files with 2021 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

820
src/components/UseCouponAddEdit/index copy 2.jsx Normal file
View File

@ -0,0 +1,820 @@
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优惠券新增 1计划、key批次 (是否显示两个字段)
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;

795
src/components/UseCouponAddEdit/index copy 3.jsx Normal file
View File

@ -0,0 +1,795 @@
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优惠券新增 1计划、key批次 (是否显示两个字段)
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;

204
src/components/UseCouponAddEdit/index copy.jsx
View File

@ -6,21 +6,27 @@ import React, {
} from "react";
import { useSetState } from "ahooks";
import { FixedSizeList } from "react-window";
import { Card, DateRangePicker, Button, Select, Notify } from "zent";
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";
import _ from "lodash";
const tableColumn = [
{
@ -60,8 +66,8 @@ const tableColumn = [
},
{
title: "批次号",
name: "key_batch_id",
prop: "key_batch_id",
name: "channel_activity_id",
prop: "channel_activity_id",
type: "normal",
width: "auto",
},
@ -136,7 +142,7 @@ const rule_rules = {
};
const UseCouponAddEdit = forwardRef((props, ref) => {
const { type = 0, isAuditButton = true } = props; // type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
const { type = 0, isAuditButton = true, isCopy = false } = props; // type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
useEffect(() => {
if (type === 0) {
@ -186,7 +192,9 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
product_title: "",
showScopePop: false,
scopePopType: "",
productData: [],
productData: {},
direct_reseller_id: 23329,
tableLoading: false,
});
// 基础信息
@ -232,7 +240,8 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
// 发放规则
let el_setup2 = form_rule_el.current.validator();
// console.log("el_setup2 =>", el_setup2);
// console.log("发放规则 =>", form_rule_data);
console.log("rank =>", state.rank);
};
const onReturn = () => {};
@ -289,7 +298,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
const addProduct = (type) => {
try {
// 第一步：获取直连天下的商品数据需要分销商 id
const direct_reseller_ids = 23329;
const direct_reseller_ids = state.direct_reseller_id;
if (direct_reseller_ids <= 0) {
Notify.error(`请添加映射分销商`);
return;
@ -323,6 +332,8 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
(req, msg) => {
// !!!!!!!!!!!!!! 为了兼容老版本 新增商品设为空！！！老版本使用 productsList 获取商品数据！！！！！！！！！！
sessionStorage.setItem("productsList", JSON.stringify(req.data));
// !!!!!!!!!!!!!! 为了兼容老版本 新增商品设为空！！！老版本使用 productsList 获取商品数据！！！！！！！！！！
setState({ productData: null });
setState({
showScopePop: true,
});
@ -332,12 +343,63 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
}
);
});
// !!!!!!!!!!!!!! 为了兼容老版本 新增商品设为空！！！老版本使用 productsList 获取商品数据！！！！！！！！！！
setState({ productData: null });
} 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
@ -415,7 +477,34 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
// 格式化表格数据
let data_new = data;
let new_table = state.tableData;
new_table.push(data_new);
// 判断是否是编辑 商品
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) => {
@ -649,47 +738,60 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
</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, rowIndex) => {
if (com === "opearo") {
return (
<div>
<span className="grid-link">编辑</span>
<span
style={{ color: "red" }}
className="grid-link"
onClick={() => deleteGoodsScope(rowIndex)}
>
删除
</span>
</div>
);
<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>
);
}
}}
/>
if (com === "goods_type") {
return (
<span>{rowData.goods_type === 1 ? "商品" : "立减金"}</span>
);
}
}}
/>
</BlockLoading>
</Card>
{isAuditButton ? (

43
src/components/UseCouponAddEdit/index.jsx
View File

@ -452,7 +452,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 +462,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,47 +473,20 @@ 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);
// 格式化商品范围
setState({
@ -535,7 +509,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
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);
});
@ -811,6 +785,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
type={state.scopePopType}
productData={state.productData}
onClose={() => scopePopClose()}
tableData={state.tableData}
submit={(data) => scopePopSubmit(data)}
></UseGoodsScopePop>
</div>

143
src/components/UseGoodsScopePop/index copy 2.jsx Normal file
View File

@ -0,0 +1,143 @@
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;

78
src/components/UseGoodsScopePop/index copy.jsx
View File

@ -1,17 +1,15 @@
import React, { forwardRef, useImperativeHandle, useRef } from "react";
import { Card, Drawer, Button } from "zent";
import { deWeightThree } from "@/utils";
import Productform from "@/pages/plan/product/add"; /* 商品 */
import KnockGold from "@/components/knockGold"; /* 立减金 */
import _ from "lodash";
const UseGoodsScopePop = forwardRef((props, ref) => {
const { product_title, drawerVisible, onClose, type, productData, submit } =
props;
console.log("productData =>", productData);
// 如果需要 通过ref 控制此组件 放开注释
// useImperativeHandle(ref, () => ({
// submit: submitPop,
@ -20,27 +18,67 @@ const UseGoodsScopePop = forwardRef((props, ref) => {
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 = "-";
return form_model;
};
// 立减金数据处理
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 = "-"; // 商品编号
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 () => {
let scope_table_data = [];
// 第一步：判断是立减金还是新建商品
let visible = false;
if (type === "addProduct") {
visible = await product_el.current.submit();
} else {
visible = await knockGold_el.current.submit();
}
try {
// 第一步：判断是立减金还是新建商品
let visible = false;
if (type === "addProduct") {
visible = await product_el.current.submit();
} else {
visible = await knockGold_el.current.submit();
}
if (visible) {
let a1 = product_el.current.state.model;
console.log("a1 =>", a1);
// 第二步：数据格式化
scope_table_data = sessionStorage.getItem("productData");
if (scope_table_data) {
scope_table_data = JSON.parse(scope_table_data);
// 第二步：获取商品或者立减金的数据 并格式化为table一样的字段 以商品数据为准
let form_data = {};
if (type === "addProduct") {
form_data = format_product_model();
} else {
form_data = format_knockGold_model();
}
console.log("所有数据:", scope_table_data);
submit(scope_table_data);
console.log("form_data 1=>", form_data);
submit(form_data);
onClose();
}
} catch (err) {

67
src/components/UseGoodsScopePop/index.jsx
View File

@ -5,10 +5,15 @@ 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,
} = props;
// 如果需要 通过ref 控制此组件 放开注释
// useImperativeHandle(ref, () => ({
@ -20,36 +25,50 @@ const UseGoodsScopePop = forwardRef((props, ref) => {
// 新建商品数据处理
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 = "-";
return form_model;
let new_tableData = tableData;
new_tableData.push(form_model);
return new_tableData;
};
// 立减金数据处理
const format_knockGold_model = () => {
let form_model = knockGold_el.current.state.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 = {};
table_obj.only = form_model; // 存储就数据 编辑好用
table_obj.product_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.entry_time; // 有效时间段
table_obj.createDate = ""; // 创建时间
table_obj.goods_type = 2; // 类型
table_obj.upstream = String(form_model.channel) === "1" ? "支付宝" : "微信"; // 上游平台
// 格式化字段 适配table显示
return 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;
}
};
// 提交数据
@ -63,7 +82,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();