From 81c632cca4783ee61a1a867b53e02e5a53321613 Mon Sep 17 00:00:00 2001 From: zhangds Date: Tue, 20 Sep 2022 17:58:28 +0800 Subject: [PATCH] =?UTF-8?q?1)=20=E5=A2=9E=E5=8A=A0h5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/api.js | 5 + .../UseCouponAddEdit/index copy 2.jsx | 1043 ----------------- .../UseCouponAddEdit/index copy.jsx | 297 +++-- src/components/UseCouponAddEdit/index.jsx | 3 +- .../UseGoodsScopePop/index copy.jsx | 148 --- src/components/UseGoodsScopePop/index.jsx | 9 +- src/pages/coupon/commodity/index.jsx | 95 +- src/pages/plan/add/edit.js | 36 +- src/pages/plan/add/plan-copy.js | 501 ++++---- src/pages/plan/add/step2 copy.js | 68 +- src/pages/plan/product/add.js | 81 +- src/pages/plan/product/add.less | 54 + 12 files changed, 784 insertions(+), 1556 deletions(-) delete mode 100644 src/components/UseCouponAddEdit/index copy 2.jsx delete mode 100644 src/components/UseGoodsScopePop/index copy.jsx diff --git a/src/assets/api.js b/src/assets/api.js index d40d8738..7b0168d3 100644 --- a/src/assets/api.js +++ b/src/assets/api.js @@ -943,4 +943,9 @@ export const getCouponDetails = (id) => { return req("get", baseurl + `/coupon/${id}`); }; +// 删除优惠券商品范围 +export const deleteGoodsScope = (id) => { + return req("delete", baseurl + `/goods/${id}`); +}; + export { req }; diff --git a/src/components/UseCouponAddEdit/index copy 2.jsx b/src/components/UseCouponAddEdit/index copy 2.jsx deleted file mode 100644 index 6991323f..00000000 --- a/src/components/UseCouponAddEdit/index copy 2.jsx +++ /dev/null @@ -1,1043 +0,0 @@ -import React, { - forwardRef, - useImperativeHandle, - useRef, - useEffect, -} from "react"; -import { useLocation } from "react-router-dom"; -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, - queryPlans, - queryKeyBatch, - addCoupon, - getCouponDetails, -} 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: "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 { type = 0, isAuditButton = true } = 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, - isQuantity: true, - plan_OPTIONS: [], - key_OPTIONS: [], - addProductBtnLoading: false, - addGoldBtnLoading: false, - product_title: "", - showScopePop: false, - scopePopType: "", - productData: {}, - direct_reseller_id: 0, - tableLoading: false, - table_index: -1, - examinePopShow: false, - payType: 3, - payment_direction: ["对私账户", "对公账户", "预付款扣除"], - isState: "", - coupon_batch_id: "", - }); - - // 获取计划数据 - useEffect(() => { - queryPlans({ status: "3,4,5" }).then((res) => { - handelResponse(res, (req, msg) => { - let arr = req.map((item) => { - return { - key: { key: item.id, reseller_id: item.reseller_id }, - text: item.title, - }; - }); - setState({ - plan_OPTIONS: arr, - }); - }); - }); - }, []); - - // 基础信息 - const [form_info_data, setForm_info_data] = useSetState({ - plan_id: "", - key_batch_id: "", - title: "", - date_time: "", - }); - const form_info_el = useRef(null); - - // 计划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 }).then((res) => { - handelResponse(res, (req, msg) => { - let arr = req.map((item) => { - return { - key: item.id, - text: item.batch_name, - }; - }); - - setState({ - key_OPTIONS: arr, - }); - }); - }); - }; - - // 发放规则 - const [form_rule_data, setForm_rule_data] = useSetState({ - full: "", - reduce: "", - quantity: "", - budget: "", - restrict: "", - }); - const form_rule_el = useRef(null); - - // 设置发放总量是否可用 - 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, - })); - - useEffect(() => { - let obj = { - text: "前端开发居家计划_4", - key: "", - }; - }, []); - - // 编辑-复制流程 - const initEditAndCopy = (planArr) => { - const isState = sessionStorage.getItem("isState"); /*复制1 编辑2 */ - const coupon_batch_id = sessionStorage.getItem("code_id"); /* 兑换码id */ - setState({ - isState: isState ? isState : "", - coupon_batch_id: coupon_batch_id ? coupon_batch_id : "", - }); - if (coupon_batch_id) { - getCouponDetails(coupon_batch_id).then((res) => { - handelResponse(res, (req, msg) => { - console.log("req =>", req); - // 编辑处理函数 - if (isState === "2") { - } - }); - }); - } - }; - - // 表单提交 - const submit = () => { - let validator = false; - - // 基础信息 - let el_setup1 = form_info_el.current.validator(); - if (el_setup1) { - validator = true; - } else { - validator = false; - return; - } - - // 发放规则 - let el_setup2 = form_rule_el.current.validator(); - if (el_setup2) { - validator = true; - } else { - validator = false; - return; - } - - 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; - } - - setState({ - examinePopShow: true, - }); - } else { - Notify.error(`请选择商品范围`); - return; - } - } - }; - - 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: [], - }, - }; - console.log("param =>", param); - 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); - } - ); - }); - }; - - 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) => { - 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); - }); - 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); - } - }; - - // 商品范围删除 - 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 ( -
- -
- {type === 1 ? ( - - { - 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"} - /> - -
- - - - -
- { ) : null} - {type === 1 ? ( + {type === 0 ? (