From 54d7b196a8dc20c6a83b4689bd47608de3244cfd Mon Sep 17 00:00:00 2001 From: zhangds Date: Wed, 21 Sep 2022 12:01:41 +0800 Subject: [PATCH 1/2] =?UTF-8?q?1=EF=BC=89=20=E5=A2=9E=E5=8A=A0=E4=BC=98?= =?UTF-8?q?=E6=83=A0=E5=88=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UseCouponAddEdit/index copy 2.jsx | 1095 +++++++++++++++++ .../UseCouponAddEdit/index copy.jsx | 5 +- src/components/UseCouponAddEdit/index.jsx | 321 +++-- src/pages/coupon/addEdit/index.jsx | 51 +- src/pages/coupon/list/index.jsx | 2 +- src/pages/plan/add/step2 copy.js | 2 +- src/pages/plan/add/step2.js | 2 +- src/pages/plan/product/add.js | 2 +- 8 files changed, 1307 insertions(+), 173 deletions(-) create mode 100644 src/components/UseCouponAddEdit/index copy 2.jsx diff --git a/src/components/UseCouponAddEdit/index copy 2.jsx b/src/components/UseCouponAddEdit/index copy 2.jsx new file mode 100644 index 00000000..6c50de6b --- /dev/null +++ b/src/components/UseCouponAddEdit/index copy 2.jsx @@ -0,0 +1,1095 @@ +import React, { + forwardRef, + useImperativeHandle, + useRef, + useEffect, +} from "react"; +import { useSetState } from "ahooks"; +import { FixedSizeList } from "react-window"; +import { + Card, + DateRangePicker, + Button, + Select, + Notify, + BlockLoading, + Icon, + RadioGroup, + Radio, +} 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, + queryKeyBatch, + addCoupon, +} 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: "有效时间段", + width: "575px", + name: "effectDate", + prop: "effectDate", + type: "normal", + }, + { + title: "创建时间", + name: "createDate", + prop: "createDate", + type: "normal", + width: "auto", + }, + { + title: "类型", + name: "type", + prop: "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" }], + title: [{ 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})?$", + }, + ], + quantity: [ + { type: "required", message: "请输入发放总量" }, + { + type: "regExp", + message: "请输入正整数", + reg: "^[1-9][0-9]*$", + }, + ], + restrict: [ + { type: "required", message: "请输入绑定数" }, + { + type: "regExp", + message: "请输入正整数", + reg: "^[1-9][0-9]*$", + }, + ], +}; + +const UseCouponAddEdit = forwardRef((props, ref) => { + const { + couponType = 0, + isAuditButton = true, + direct_reseller_id, + editData, + } = props; // type 入口类型 0优惠券新增 1计划、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, + isQuantity: true, + plan_OPTIONS: [], + key_OPTIONS: [], + addProductBtnLoading: false, + addGoldBtnLoading: false, + product_title: "", + showScopePop: false, + scopePopType: "", + productData: {}, + direct_reseller_id: direct_reseller_id ? direct_reseller_id : 0, + tableLoading: false, + table_index: -1, + examinePopShow: false, + payType: 3, + payment_direction: ["对私账户", "对公账户", "预付款扣除"], + isState: "", + coupon_batch_id: "", + editModel: {}, // 编辑数据 + }); + + // 基础信息 + const [form_info_data, setForm_info_data] = useSetState({ + plan_id: "", + key_batch_id: "", + title: "", + date_time: JSON.parse(sessionStorage.getItem("datetime")), + }); + const form_info_el = useRef(null); + + // 发放规则 + const [form_rule_data, setForm_rule_data] = useSetState({ + full: "", + reduce: "", + quantity: "", + budget: "", + restrict: "", + }); + const form_rule_el = useRef(null); + + // 编辑/新增/复制 + useEffect(() => { + console.log("editData 1=>", editData); + if (editData !== "" && editData) { + // 基本信息 + setForm_info_data({ + title: editData.title, + date_time: [editData.begin_time, editData.end_time], + }); + // 规则 + setForm_rule_data({ + full: editData.full, + reduce: editData.reduce, + quantity: editData.quantity, + budget: editData.budget, + restrict: editData.restrict, + }); + // 商品范围 + // 商品的数组 + let goods_arr = editData.product.legal.map((item) => { + return { + ...item, + type: 1, + upstream: "直连天下", + all_budget: Number(item.contract_price) * Number(item.quantity), + effectDate: "-", + }; + }); + + // 立减金 + let lj_arr = editData.product.reduce.map((item) => { + let table_obj = {}; + table_obj.type = 2; // 类型 + table_obj.upstream = String(item.channel) === "1" ? "支付宝" : "微信"; // 上游平台 + + table_obj.only = item; // 存储就数据 编辑好用 + table_obj.product_id = item.channel_activity_id; // 商品编号 + table_obj.product_name = item.batch_goods_name; // 商品名 + table_obj.official_price = item.reduce_amount; // 官方价 + table_obj.contract_price = item.price; // 合同价格 + table_obj.quantity = Math.trunc(item.all_budget / item.reduce_amount); // 库存数量 + table_obj.channel_activity_id = item.channel_activity_id; // 批次号 + table_obj.all_budget = Number(item.all_budget); // 总预算 + table_obj.effectDate = `${item.time_limit.effect_time.end_time} 至 ${item.time_limit.effect_time.start_time}`; // 有效时间段 + table_obj.createDate = ""; // 创建时间 + return table_obj; + }); + + let scope_data = goods_arr.concat(lj_arr); + scope_data = _.map(scope_data, (o) => { + o.checked = true; + return o; + }); + + let arr = _.map(scope_data, (res) => { + let obj = {}; + obj.key = res.product_id; + obj.text = res.product_name; + return obj; + }); + + setState({ + rankoptions: arr, + rank: arr, + tableData: scope_data, + }); + } + }, []); + + // 编辑处理函数 + const editFun = () => {}; + // 新增处理函数 + const AddFun = () => {}; + // 复制处理函数 + const copyFun = () => {}; + + // 设置发放总量是否可用 + useEffect(() => { + setIsQuantity(); + }, [form_rule_data.reduce, form_rule_data.full]); + + // 计算发放总数 + useEffect(() => { + setBudget(); + }, [form_rule_data.reduce, form_rule_data.quantity]); + + const table_el = useRef(null); + + useImperativeHandle(ref, () => ({ + submit: submit, + getModel: getModel, + })); + + // 表单提交 + const submit = () => { + let validator = false; + + // 基础信息 + let el_setup1 = form_info_el.current.validator(); + if (el_setup1) { + validator = true; + } else { + validator = false; + } + + // 发放规则 + let el_setup2 = form_rule_el.current.validator(); + if (el_setup2) { + validator = true; + } else { + validator = false; + } + + if (validator) { + // 获取商品范围数据 + // 第一步：获取勾选后的数据 + if (state.rank.length > 0) { + let arr = state.tableData.filter((item) => item.checked); + + // 第二步：最终的校验 + // 所选商品库存和总发行数校验 + let sum = 0; + arr.map((item) => { + sum += parseInt(item.quantity); + }); + if (sum < Number(form_rule_data.quantity)) { + Notify.error("所选商品库存总数小于发放量"); + return false; + } + // 第三步：判断提交类型 新建还是计划的新建 + if (couponType === 1) { + return true; + } else { + setState({ + examinePopShow: true, + }); + } + } else { + Notify.error(`请选择商品范围`); + return false; + } + } + return validator; + }; + + // 获取数据 + const getModel = () => { + let param = { + title: form_info_data.title, + begin_time: form_info_data.date_time[0], + end_time: form_info_data.date_time[1], + quantity: form_rule_data.quantity, + budget: form_rule_data.budget, + full: form_rule_data.full, + reduce: form_rule_data.reduce, + restrict: form_rule_data.restrict, + product: { + legal: [], + reduce: [], + }, + }; + let arr = state.tableData.filter((item) => item.checked); + param.product.legal = arr.filter((item) => item.type === 1); // 商品 + let param_lj = arr.filter((item) => item.type === 2); // 立减金 + param.product.reduce = param_lj.map((item) => { + return { + ...item.only, + }; + }); + console.log("计划优惠券数据 => ", param); + return param; + }; + + const onAuditSubmit = () => { + let param = { + plan_id: form_info_data.plan_id.key.key, + key_batch_id: form_info_data.key_batch_id.key, + title: form_info_data.title, + begin_time: form_info_data.date_time[0], + end_time: form_info_data.date_time[1], + full: form_rule_data.full, + reduce: form_rule_data.reduce, + quantity: form_rule_data.quantity, + budget: form_rule_data.budget, + restrict: form_rule_data.restrict, + payment_direction: "", + product: { + legal: [], + reduce: [], + }, + }; + param.payment_direction = state.payment_direction[state.payType - 1]; // 扣款方式 + let arr = state.tableData.filter((item) => item.checked); + param.product.legal = arr.filter((item) => item.type === 1); // 商品 + + let param_lj = arr.filter((item) => item.type === 2); // 立减金 + param.product.reduce = param_lj.map((item) => { + return { + ...item.only, + }; + }); + addCoupon(param).then((res) => { + handelResponse( + res, + (req, msg) => { + Notify.success(res.message); + setTimeout(() => { + window.history.back(); + }, 2000); + }, + (err) => { + Notify.error(err); + } + ); + }); + }; + + // 计划select改变 + const changePlan = (e) => { + setForm_info_data({ plan_id: e }); + setState({ direct_reseller_id: e.key.reseller_id }); + setForm_info_data({ key_batch_id: "" }); + queryKeyBatch({ status: "4,5", plan_id: e.key.key, bind_object: 2 }).then( + (res) => { + handelResponse(res, (req, msg) => { + console.log("req =>", req); + let arr = req.map((item) => { + return { + key: item.id, + text: item.batch_name, + }; + }); + setState({ + key_OPTIONS: arr, + }); + }); + } + ); + }; + + 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.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.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, index) => { + console.log("rowData =>", rowData); + console.log("index =>", index); + try { + // 第一步：获取直连天下的商品数据需要分销商 id + const direct_reseller_ids = state.direct_reseller_id; + if (direct_reseller_ids <= 0) { + Notify.error(`请添加映射分销商`); + return; + } + // 第二步：清除本地存储数据 + clearStorageData(); + 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.type === 2) { + let obj = rowData.only; + setState({ + product_title: "编辑立减金", + productData: obj, + scopePopType: "addKnockGold", + showScopePop: true, + table_index: index, + }); + } else { + setState({ + product_title: "编辑商品", + productData: rowData, + scopePopType: "addProduct", + showScopePop: true, + table_index: index, + }); + } + }, + (err) => { + console.log("err =>", err); + } + ); + }); + } catch (err) { + setState({ tableLoading: false }); + console.log("err =>", err); + } + }; + + const renderOptionList = (options, renderOption) => { + return ( + + {({ index, style }) => ( +
{renderOption(options[index], index)}
+ )} + + ); + }; + + // 判断是否可用 + const setIsQuantity = () => { + if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.full)) { + setState({ isQuantity: false }); + } else { + setState({ isQuantity: true }); + } + }; + + // 计算总预算 + const setBudget = () => { + if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.quantity)) { + let num = mulNum( + Number(form_rule_data.reduce), + Number(form_rule_data.quantity) + ); + 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) => { + console.log("e =>", e); + let new_table_data = state.tableData.map((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); + }); + 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); + } + }); + // 格式化商品范围 + setState({ + tableData: new_table, + rankoptions: select_opt, + rank: select_arr, + }); + } catch (err) { + console.log("err =>", err); + } + }; + + // 商品范围删除 + const deleteGoodsScope = (index) => { + console.log("index deleat", index); + let new_table = state.tableData; + 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, + }); + }; + + // 提交审核弹窗 + const examinePop = () => { + return ( +
+
+
+ { + setState({ + examinePopShow: false, + }); + }} + /> +
提交审核
+
+ { + setState({ payType: e.target.value }); + }} + value={state.payType} + className="audit-obj" + > + 预付款扣除 + 对私账户 + 对公账户 + +
+
+ + +
+
+
+ ); + }; + + return ( +
+ +
+ {couponType === 0 ? ( + + { + setForm_info_data({ key_batch_id: e }); + }} + /> + + ) : null} + + + { + setForm_info_data({ title: e }); + }} + onClearItem={() => { + setForm_info_data({ title: "" }); + }} + value={form_info_data.title} + placeholder={"请输入"} + labelWidth={"0px"} + maxLength={20} + height={"36px"} + countShow={true} + width={"520px"} + alignment={"left"} + /> + + + + { + onChangeCombinedDate(e); + }} + disabledDate={onDisabledRange} + /> + +
+ + + +
+ +
+ { + 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="满" + /> + { + 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="元" + /> +
+ + + + { + setForm_rule_data({ + quantity: e, + }); + }} + onClearItem={() => { + setForm_rule_data({ quantity: "" }); + }} + disabled={state.isQuantity} + value={form_rule_data.quantity} + placeholder={"请输入"} + labelWidth={"0px"} + maxLength={20} + height={"36px"} + countShow={false} + width={"520px"} + alignment={"left"} + unit="个" + /> + + + + + + { + setForm_rule_data({ + restrict: e, + }); + }} + onClearItem={() => { + setForm_rule_data({ restrict: "" }); + }} + value={form_rule_data.restrict} + placeholder={"请输入"} + labelWidth={"0px"} + maxLength={20} + height={"36px"} + countShow={false} + width={"520px"} + alignment={"left"} + /> + +
+ + + + +
+ { value={form_info_data.plan_id} onChange={(e) => { changePlan(e); - // setForm_info_data({ plan_id: e }); }} /> ) : null} - {type === 0 ? ( + {couponType === 0 ? (