From 970368b1a0b411f3b83b05845a5ea83cd6700d67 Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Fri, 16 Jun 2023 14:54:21 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AA=20optimize:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UseExchangeAddEdit/index.jsx | 777 +++++++++----------- 1 file changed, 367 insertions(+), 410 deletions(-) diff --git a/src/components/UseExchangeAddEdit/index.jsx b/src/components/UseExchangeAddEdit/index.jsx index 8559dbc6..dbc80801 100644 --- a/src/components/UseExchangeAddEdit/index.jsx +++ b/src/components/UseExchangeAddEdit/index.jsx @@ -1,135 +1,122 @@ -import React, { - forwardRef, - useImperativeHandle, - useRef, - useEffect -} from 'react'; -import { - Card, - DateRangePicker, - Button, - Select, - Notify, - BlockLoading, - Input -} from 'zent'; -import { useSetState } from 'ahooks'; -import { isSameDay } from 'date-fns'; -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 { knockGoldFun, redPacketsFun } from '@/tools/index'; -import './style.less'; +import React, { forwardRef, useImperativeHandle, useRef, useEffect } from "react" +import { Card, DateRangePicker, Button, Select, Notify, BlockLoading, Input } from "zent" +import { useSetState } from "ahooks" +import { isSameDay } from "date-fns" +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 { knockGoldFun, redPacketsFun } from "@/tools/index" +import "./style.less" const initArray = (targetNum) => { - return Array.from({ length: targetNum }, (_, index) => index); -}; + return Array.from({ length: targetNum }, (_, index) => index) +} const tableColumn = [ { - title: '商品ID', - name: 'product_id', - prop: 'product_id', - width: 'auto', - type: 'normal' + title: "商品ID", + name: "product_id", + prop: "product_id", + width: "auto", + type: "normal" }, { - title: '商品名称', - width: 'auto', - prop: 'product_name', - name: 'product_name', - type: 'normal' + title: "商品名称", + width: "auto", + prop: "product_name", + name: "product_name", + type: "normal" }, { - title: '平台批次号', - width: '250px', - prop: 'channel_activity_id', - name: 'channel_activity_id', - type: 'normal' + title: "平台批次号", + width: "250px", + prop: "channel_activity_id", + name: "channel_activity_id", + type: "normal" }, { - title: '类型', - width: 'auto', - prop: 'type', - name: 'type', - type: 'slot' + title: "类型", + width: "auto", + prop: "type", + name: "type", + type: "slot" }, { - title: '上游平台', - width: 'auto', - prop: 'upstream', - name: 'upstream', - type: 'normal' + title: "上游平台", + width: "auto", + prop: "upstream", + name: "upstream", + type: "normal" }, { - title: '有效时间段', - width: '350px', - prop: 'effectDate', - name: 'effectDate', - type: 'normal' + title: "有效时间段", + width: "350px", + prop: "effectDate", + name: "effectDate", + type: "normal" }, { - title: '当前成本价格', - prop: 'cost_price', - name: 'cost_price', - width: '200px', - type: 'slot' + title: "当前成本价格", + prop: "cost_price", + name: "cost_price", + width: "200px", + type: "slot" }, { - title: '合同价', - name: 'contract_price', - prop: 'contract_price', - type: 'normal', - width: 'auto' + title: "合同价", + name: "contract_price", + prop: "contract_price", + type: "normal", + width: "auto" }, { - title: '商品官方价', - type: 'normal', - prop: 'official_price', - width: 'auto' + title: "商品官方价", + type: "normal", + prop: "official_price", + width: "auto" }, { - title: '库存', - type: 'normal', - prop: 'quantity', - width: 'auto' + title: "库存", + type: "normal", + prop: "quantity", + width: "auto" }, { - title: '操作', - prop: 'opearo', - name: 'opearo', - type: 'slot', - width: 'auto' + title: "操作", + prop: "opearo", + name: "opearo", + type: "slot", + width: "auto" } -]; +] const codeInfoRules = { - code_name: [{ type: 'required', message: '请输入兑换码名称' }], + code_name: [{ type: "required", message: "请输入兑换码名称" }], issued: [ - { type: 'required', message: '请输入发放总量' }, + { type: "required", message: "请输入发放总量" }, { - type: 'regExp', - message: '请输入正整数', - reg: '^([1-9][0-9]*){1,3}$' + type: "regExp", + message: "请输入正整数", + reg: "^([1-9][0-9]*){1,3}$" } ] -}; +} const rulesInfoRules = { - date_time: [{ type: 'required', message: '请选择生效时间段' }], - rank: [{ type: 'required', message: '请选择商品范围' }] -}; + date_time: [{ type: "required", message: "请选择生效时间段" }], + rank: [{ type: "required", message: "请选择商品范围" }] +} const UseExchangeAddEdit = forwardRef((props, ref) => { - const { direct_reseller_id, editData } = props; - const codeInfoEl = useRef(null); - const codeRuleEl = useRef(null); - const table_el = useRef(null); - const goodsScopePopEl = useRef(null); + const { direct_reseller_id, editData } = props + const codeInfoEl = useRef(null) + const codeRuleEl = useRef(null) + const table_el = useRef(null) + const goodsScopePopEl = useRef(null) const [state, setState] = useSetState({ rankOptions: [], @@ -139,85 +126,85 @@ const UseExchangeAddEdit = forwardRef((props, ref) => { tableLoading: false, direct_reseller_id: direct_reseller_id ? direct_reseller_id : 0, showScopePop: false, - scopePopType: '', + scopePopType: "", productData: [], table_index: -1, - id: '', - status: '', + id: "", + status: "", checkedProduct: [], - KeyPcType: sessionStorage.getItem('KeyPcType') - }); + KeyPcType: sessionStorage.getItem("KeyPcType") + }) const [codeInfo, setCodeInfo] = useSetState({ - code_name: '', - issued: '', - describe: '', - date_time: '', - range: '', - restrict: '' - }); + code_name: "", + issued: "", + describe: "", + date_time: "", + range: "", + restrict: "" + }) useImperativeHandle(ref, () => ({ submit, getModel, clearExchangeForm - })); + })) useEffect(() => { - if (editData && editData !== '') { + if (editData && editData !== "") { setState({ id: editData.id, status: editData.status - }); - editFun(); + }) + editFun() } else { // 如果是新增，给计划时间 - let deDateTime = sessionStorage.getItem('knockGold_effectDate'); + let deDateTime = sessionStorage.getItem("knockGold_effectDate") if (deDateTime) { - let times = JSON.parse(deDateTime); + let times = JSON.parse(deDateTime) setCodeInfo({ date_time: [times.begin_time, times.end_time] - }); + }) } } - }, []); + }, []) const submit = () => { - let validator = false; + let validator = false if (codeInfoEl.current.validator()) { - validator = true; + validator = true } else { - validator = false; - return validator; + validator = false + return validator } if (codeRuleEl.current.validator()) { - validator = true; + validator = true } else { - validator = false; - return validator; + validator = false + return validator } if (validator) { if (state.rank.length > 0) { - let arr = state.tableData.filter((item) => item.checked); + let arr = state.tableData.filter((item) => item.checked) // 第二步：最终的校验 // 所选商品库存和总发行数校验 - let sum = 0; + let sum = 0 arr.map((item) => { - sum += parseInt(item.quantity); - }); + sum += parseInt(item.quantity) + }) if (sum < Number(codeInfo.issued)) { - Notify.error('所选商品库存总数小于发放量'); - return false; + Notify.error("所选商品库存总数小于发放量") + return false } } else { - Notify.error(`请选择商品范围`); - return false; + Notify.error(`请选择商品范围`) + return false } } - return validator; - }; + return validator + } const getModel = () => { let param = { @@ -235,42 +222,43 @@ const UseExchangeAddEdit = forwardRef((props, ref) => { reduce: [], cash: [] } - }; - 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); // 立减金 - const redPacketsData = arr.filter((item) => item.type === 3); // 红包 + } + 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) // 立减金 + const redPacketsData = arr.filter((item) => item.type === 3) // 红包 param.product.reduce = param_lj.map((item) => { return { ...item.only - }; - }); + } + }) param.product.cash = redPacketsData.map((item) => { return { ...item.only - }; - }); + } + }) - return param; - }; + return param + } const clearExchangeForm = () => { setState({ - id: '', - status: '', + id: "", + status: "", rank: [], rankOptions: [], tableData: [] - }); + }) setCodeInfo({ - code_name: '', - issued: '', - describe: '', - range: '', - restrict: '' - }); - }; + code_name: "", + issued: "", + describe: "", + range: "", + restrict: "" + }) + } + const editFun = () => { setCodeInfo({ code_name: editData.title, @@ -279,7 +267,7 @@ const UseExchangeAddEdit = forwardRef((props, ref) => { date_time: [editData.begin_time, editData.end_time], range: editData.range, restrict: editData.restrict - }); + }) // 商品范围 // 商品的数组 @@ -287,374 +275,351 @@ const UseExchangeAddEdit = forwardRef((props, ref) => { return { ...item, type: 1, - upstream: '直连天下', - effectDate: '-' - }; - }); + upstream: "直连天下", + effectDate: "-" + } + }) // 立减金 let lj_arr = editData.product.reduce.map((item) => { - let table_obj = knockGoldFun(item); - return table_obj; - }); + let table_obj = knockGoldFun(item) + return table_obj + }) // 红包 let hb_arr = editData.product.cash?.map((item) => { - let table_obj = redPacketsFun(item); - table_obj.only.copy = true; // 标识复制 - return table_obj; - }); + let table_obj = redPacketsFun(item) + table_obj.only.copy = true // 标识复制 + return table_obj + }) - let scope_data = goods_arr.concat(lj_arr, hb_arr); + let scope_data = goods_arr.concat(lj_arr, hb_arr) scope_data = _.map(scope_data, (o) => { - o.checked = true; - return 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; - }); + let obj = {} + obj.key = res.product_id + obj.text = res.product_name + return obj + }) setState({ rankOptions: arr, rank: arr, tableData: scope_data - }); - }; + }) + } const onDisabledTime = (date, type) => { - let step1 = JSON.parse(sessionStorage.getItem('knockGold_effectDate')); - const min = new Date(step1.begin_time); - const hour = min.getHours(); - const minute = min.getMinutes(); - const second = min.getSeconds(); - const isSame = isSameDay(date, min); + let step1 = JSON.parse(sessionStorage.getItem("knockGold_effectDate")) + const min = new Date(step1.begin_time) + const hour = min.getHours() + const minute = min.getMinutes() + const second = min.getSeconds() + const isSame = isSameDay(date, min) return isSame ? { disabledHours: () => initArray(hour), - disabledMinutes: (hourValue) => - hourValue === hour ? initArray(minute) : [], + disabledMinutes: (hourValue) => (hourValue === hour ? initArray(minute) : []), disabledSeconds: (hourValue, minuteValue) => - hourValue === hour && minuteValue === minute - ? initArray(second) - : [] + hourValue === hour && minuteValue === minute ? initArray(second) : [] } - : {}; - }; + : {} + } const onDisabledRange = (date, type) => { - let step1 = JSON.parse(sessionStorage.getItem('knockGold_effectDate')); - let isdisabled = false; - let str = moment(date).format('YYYY-MM-DD HH:mm:ss'); - const isDay = moment(step1.end_time).format('HH:mm:ss'); - if (type == 'start') { - if (isDay < '23:59:59') { + let step1 = JSON.parse(sessionStorage.getItem("knockGold_effectDate")) + let isdisabled = false + let str = moment(date).format("YYYY-MM-DD HH:mm:ss") + const isDay = moment(step1.end_time).format("HH:mm:ss") + if (type == "start") { + if (isDay < "23:59:59") { isdisabled = moment(str).isBefore(step1.begin_time) || - moment(str).subtract(1, 'days').isAfter(step1.end_time); + moment(str).subtract(1, "days").isAfter(step1.end_time) } else { - isdisabled = - moment(str).isBefore(step1.begin_time) || - moment(str).isAfter(step1.end_time); + isdisabled = moment(str).isBefore(step1.begin_time) || moment(str).isAfter(step1.end_time) } } - if (type == 'end') { + if (type == "end") { isdisabled = - moment(str).add(1, 'days').isBefore(step1.begin_time) || - moment(str).isAfter(step1.end_time); + moment(str).add(1, "days").isBefore(step1.begin_time) || moment(str).isAfter(step1.end_time) } - return isdisabled; - }; + return isdisabled + } 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 }); - }; + return checks.key == item.product_id + }) > -1 + return item + }) + setState({ tableData: new_table_data, rank: e }) + } // 清除商品和立减金本地存储 const clearStorageData = () => { if (state.tableData.length <= 0) { - sessionStorage.setItem('productData', ''); - sessionStorage.setItem('knockGoldData', ''); - sessionStorage.setItem('redPacketsData', ''); + sessionStorage.setItem("productData", "") + sessionStorage.setItem("knockGoldData", "") + sessionStorage.setItem("redPacketsData", "") } - // 新建商品 - 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)); - } + centrallyCategorizeProducts("productData", 1) + centrallyCategorizeProducts("knockGoldData", 2) + centrallyCategorizeProducts("redPacketsData", 3) + } - // 立减金 - let knockGold_data = state.tableData.filter((item) => item.type === 2); - if (knockGold_data.length <= 0) { - sessionStorage.setItem('knockGoldData', ''); + /* 集中处理分类商品 */ + const centrallyCategorizeProducts = (key, type) => { + //!type 1:权益商品 2:立减金 3:红包 + let data = state.tableData.filter((item) => item.type === type) + if (data.length <= 0) { + sessionStorage.setItem(key, "") } else { - sessionStorage.setItem('knockGoldData', JSON.stringify(knockGold_data)); + sessionStorage.setItem(key, JSON.stringify(data)) } - - // 红包 - let redPackets_data = state.tableData.filter((item) => item.type === 3); - if (redPackets_data.length <= 0) { - sessionStorage.setItem('redPacketsData', ''); - } else { - sessionStorage.setItem('redPacketsData', JSON.stringify(redPackets_data)); - } - }; + } // 获取已经选择的商品数据(禁用商品选择) const getCheckedProduct = () => { - let arr = state.tableData.map((item) => Number(item.product_id)); - return arr; - }; + let arr = state.tableData.map((item) => Number(item.product_id)) + return arr + } const addProduct = (type) => { try { // 第一步：获取直连天下的商品数据需要分销商 id - const direct_reseller_ids = state.direct_reseller_id; + const direct_reseller_ids = state.direct_reseller_id if (direct_reseller_ids <= 0) { - Notify.error(`请添加映射分销商`); - return; + Notify.error(`请添加映射分销商`) + return } // 第二步：清除本地存储数据 - clearStorageData(); + clearStorageData() /* 区分 立减金 兑换码 红包 */ switch (type) { - case 'addKnockGold': + case "addKnockGold": // 设置立减金时间 sessionStorage.setItem( - 'knockGold_effectDate', + "knockGold_effectDate", JSON.stringify({ begin_time: codeInfo.date_time[0], end_time: codeInfo.date_time[1] }) - ); + ) setState({ - product_title: '新增立减金', - scopePopType: 'addKnockGold', + product_title: "新增立减金", + scopePopType: "addKnockGold", productData: null, showScopePop: true - }); - return; - case 'addProduct': + }) + return + case "addProduct": setState({ - product_title: '新建商品', - scopePopType: 'addProduct', + product_title: "新建商品", + scopePopType: "addProduct", checkedProduct: getCheckedProduct(), // 已经选择的商品 productData: null, table_index: -1, productType: 1, showScopePop: true - }); - return; - case 'redPackets': + }) + return + case "redPackets": // 设置红包时间 sessionStorage.setItem( - 'redPackets_effectDate', + "redPackets_effectDate", JSON.stringify({ begin_time: codeInfo.date_time[0], end_time: codeInfo.date_time[1] }) - ); + ) setState({ - product_title: '新增红包', - scopePopType: 'redPackets', + product_title: "新增红包", + scopePopType: "redPackets", productData: null, showScopePop: true - }); - return; + }) + return default: - break; + break } } catch (err) { - console.log('err =>', err); + console.log("err =>", err) } - }; + } // 编辑 const productEditShow = (rowData, index) => { try { // 第一步：获取直连天下的商品数据需要分销商 id - const direct_reseller_ids = state.direct_reseller_id; + const direct_reseller_ids = state.direct_reseller_id if (direct_reseller_ids <= 0) { - Notify.error(`请添加映射分销商`); - return; + Notify.error(`请添加映射分销商`) + return } // 第二步：清除本地存储数据 - clearStorageData(); + clearStorageData() // 第三步：区分是新建商品还是立减金 /* 区分立减金 */ if (rowData.type === 1) { setState({ - product_title: '编辑商品', - scopePopType: 'addProduct', + product_title: "编辑商品", + scopePopType: "addProduct", checkedProduct: getCheckedProduct(), // 已经选择的商品 table_index: index, productType: rowData.product_type - }); + }) // 如果是复制删除 code_batch_id 如果是计划中的创建中数据 - let plan_status = sessionStorage.getItem('plan_status'); - if (state.KeyPcType === '2' || plan_status === '0') { - delete rowData.code_batch_id; + let plan_status = sessionStorage.getItem("plan_status") + if (state.KeyPcType === "2" || plan_status === "0") { + delete rowData.code_batch_id } setState({ productData: rowData, showScopePop: true - }); + }) } else if (rowData.type === 2) { - let obj = rowData.only; - if (state.KeyPcType === '2') { - delete obj.id; + let obj = rowData.only + if (state.KeyPcType === "2") { + delete obj.id } setState({ - product_title: '编辑立减金', + product_title: "编辑立减金", productData: obj, - scopePopType: 'addKnockGold', + scopePopType: "addKnockGold", showScopePop: true, table_index: index - }); + }) } else { /* 红包 */ - let obj = rowData.only; - if (state.KeyPcType === '2') { - delete obj.id; + let obj = rowData.only + if (state.KeyPcType === "2") { + delete obj.id } setState({ - product_title: '编辑红包', + product_title: "编辑红包", productData: obj, - scopePopType: 'redPackets', + scopePopType: "redPackets", showScopePop: true, table_index: index - }); + }) } } catch (err) { - console.log('err =>', err); + console.log("err =>", err) } - }; + } const selectionFun = (e) => { - let arr = []; + 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 }); - }; + let obj = {} + obj.key = res.product_id + obj.text = res.product_name + arr.push(obj) + return obj + }) + setState({ rank: arr }) + } const scopePopClose = () => { setState({ showScopePop: false - }); - }; + }) + } const scopePopSubmit = (table_all) => { try { // 格式化表格数据 - let new_table = table_all; + let new_table = table_all // 设置商品范围选择 - let select_opt = []; + 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 = []; + let obj = {} + obj.key = item.product_id // 确保差异 + obj.text = item.product_name + select_opt.push(obj) + }) + let select_arr = [] new_table.map((item) => { - let obj = {}; + let obj = {} if (item.checked) { - obj.key = item.product_id; - obj.text = item.product_name; - select_arr.push(obj); + 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); + console.log("err =>", err) } - }; + } return ( -
- -
-
- +
+ +
+ + { - setCodeInfo({ code_name: e }); + setCodeInfo({ code_name: e }) }} onClearItem={(e) => { - setCodeInfo({ code_name: '' }); + setCodeInfo({ code_name: "" }) }} value={codeInfo.code_name} - placeholder={'请输入兑换码名称'} - labelWidth={'0px'} + placeholder={"请输入兑换码名称"} + labelWidth={"0px"} maxLength={10} - height={'36px'} - width={'520px'} - alignment={'left'} + height={"36px"} + width={"520px"} + alignment={"left"} /> - + { - setCodeInfo({ issued: e }); + setCodeInfo({ issued: e }) }} onClearItem={(e) => { - setCodeInfo({ issued: '' }); + setCodeInfo({ issued: "" }) }} - unit='条' + unit="条" countShow={false} value={codeInfo.issued} - placeholder={'请输入发放总量'} - labelWidth={'0px'} + placeholder={"请输入发放总量"} + labelWidth={"0px"} maxLength={12} - height={'36px'} - width={'520px'} - alignment={'left'} + height={"36px"} + width={"520px"} + alignment={"left"} /> - + { - setCodeInfo({ describe: e.target.value }); + setCodeInfo({ describe: e.target.value }) }} /> @@ -662,87 +627,83 @@ const UseExchangeAddEdit = forwardRef((props, ref) => {
- +
- - + + { - setCodeInfo({ date_time: e }); + setCodeInfo({ date_time: e }) }} disabledTime={onDisabledTime} disabledDate={onDisabledRange} /> - -
+ +