1) 增加营销系统一键复制功能

This commit is contained in:
zhangds 2022-08-04 15:19:24 +08:00
parent e131dbcda0
commit 0d30d79c86
5 changed files with 1325 additions and 462 deletions

View File

@ -421,12 +421,7 @@ export const getIsRequireApproval = (id, data) => {
// //蓝色兄弟映射商品
export const getProductInfoSelect = (params) => {
// return req("get", baseurl + "/product/market/products", params);
return req(
"get",
"https://marketapi.1688sup.com" + "/product/market/products",
params
);
return req("get", baseurl + "/product/market/products", params);
};
// 上传

View File

@ -30,6 +30,7 @@ import planlist from "../plan/list/list";
import planadd from "../plan/add/add";
import planedit from "../plan/add/edit";
import plancopy from "../plan/copy/index";
import planeditcopy from "../plan/add/edit-copy";
import keylist from "../plan/key/list";
import keysList from "../plan/keyList";
@ -479,6 +480,11 @@ export default class App extends Component {
component={plancopy}
></Route>
<Route path="/home/plan-edit" exact={true} component={planedit} />
<Route
path="/home/plan-edit-copy"
exact={true}
component={planeditcopy}
></Route>
<Route path="/home/key-list" exact={true} component={keylist} />
<Route
path="/home/plan-keyList"

View File

@ -0,0 +1,3 @@
.plan-right{
margin-left:0;
}

View File

@ -0,0 +1,812 @@
/* 编辑 */
import React from "react";
import {
Button,
Card,
Icon,
Notify,
Radio,
RadioGroup,
Sweetalert,
} from "zent";
import "./edit.less";
import Step1 from "./step1.js";
import Step2 from "./step2.js";
import Step3 from "./step3.js";
import _ from "lodash";
import {
addPlanStep,
handelResponse,
getReseller,
planSend,
getDraftInfo,
getApprovalsInfo,
approvals,
terminateApprovals,
getApprovalsStatus,
} from "../../../assets/api.js";
export default class add extends React.Component {
constructor(props) {
super(props);
this.state = {
keys: [],
step1_pagetitle: "修改计划",
step2_pagetitle: "生成key",
step3_pagetitle: "绑定卡券",
curstep: 1,
menuList: [
{ id: 1, title: "营销计划", child: [{ step: 1, title: "新建计划" }] },
{
id: 2,
title: "key",
child: [
{ step: 1, title: "生成key" },
{ step: 2, title: "绑定卡券" },
],
},
{ id: 3, title: "落地页", child: [{ step: 1, title: "绑定落地页" }] },
],
phone_list: [],
email_list: [],
phone: "",
email: "",
email_radio: -1,
phone_radio: -1,
audit_visible: false,
card_visible: false,
recall_visible: false,
step1_data: null,
step2_data: null,
step3_data: null,
disabled: false,
disabled_time: false,
paytype: 3,
reseller: null,
payment_direction: ["对私账户", "对公账户", "预付款扣除"],
approvalLoading: false,
timer: 3,
theme_options: [],
isload: false,
is_Edit: false,
whiteStyle: false,
btn_loading: false,
direct_reseller_id: 0,
};
}
submit() {
this.refs.step1.submit();
}
onReturn() {
let self = this;
Sweetalert.confirm({
type: "warning",
closeBtn: true,
title: "确认操作",
content: <p> 是否返回计划列表?</p>,
onConfirm: () => {
self.props.history.push("/home/plan-list/");
},
onCancel: this.onCancel,
className: "questModal",
parentComponent: this,
});
}
componentDidMount(e) {
// let plan_status = sessionStorage.getItem("plan_status");
// if (plan_status == 3 || plan_status == 4 || plan_status == 5) {
// this.setState({ disabled: true });
// }
let plan_id = sessionStorage.getItem("plan_id");
let approval_id = sessionStorage.getItem("approval_id");
let copy_count_golod = sessionStorage.getItem("copy_count_golod");
console.log("plan_id =>", plan_id);
console.log("approval_id =>", approval_id);
console.log("copy_count_golod =>", copy_count_golod);
//获取审批接口的编辑信息
if (Number(approval_id) > 0) {
getApprovalsInfo(approval_id).then((res) => {
handelResponse(
res,
(req, msg) => {
console.log("res 1", res);
try {
//获取分销商
getReseller(req.info.reseller_id).then((res) => {
handelResponse(res, (req, msg) => {
this.setState({
direct_reseller_id: req.direct_reseller_id,
});
});
});
} catch (err) {
console.log("err =>", err);
}
if (req.info) {
this.refs.step1.edit(req.info);
}
if (req.keys.length > 0 && this.state.disabled == false) {
this.setState({ curstep: 2 });
//转译
req.keys = this.tranFormData(req);
for (let i = 0; i < req.keys.length; i++) {
this.addNewkey();
}
setTimeout(() => {
for (let i = 0; i < this.state.keys.length; i++) {
console.log(req.keys[i]);
this.refs["step2-" + i].edit(req.keys[i]);
}
}, 500);
}
if (req.theme) {
let theme_data = {
theme_id: req.theme.theme_id,
use: req.theme.theme_data.use,
link: req.theme.theme_data.link,
list: req.theme.theme_data.list,
};
this.setState({ step3_data: theme_data });
this.setState({ card_visible: true });
this.setState({ curstep: 3 });
}
if (req.payment_direction) {
let index = this.state.payment_direction.indexOf(
req.payment_direction
);
this.setState({ paytype: index + 1 });
}
},
(err) => {
Notify.error(err);
}
);
});
} else {
//获取草稿信息
console.log("获取草稿信息 ==>", plan_id);
getDraftInfo(plan_id).then((res) => {
console.log("res =>", res);
handelResponse(
res,
(req, msg) => {
//获取分销商
// req.info.reseller_id
getReseller(req.info.reseller_id).then((res) => {
handelResponse(res, (req, msg) => {
console.log("res req=>", req);
this.setState({
direct_reseller_id: req.direct_reseller_id,
});
});
});
if (req.info) {
this.refs.step1.edit(req.info);
}
if (req.keys.length > 0 && this.state.disabled == false) {
this.setState({ curstep: 2 });
//转译
req.keys = this.tranFormData(req);
for (let i = 0; i < req.keys.length; i++) {
this.addNewkey();
}
setTimeout(() => {
for (let i = 0; i < this.state.keys.length; i++) {
this.refs["step2-" + i].edit(req.keys[i]);
}
}, 500);
} else {
this.addNewkey();
}
},
(err) => {
Notify.error(err);
}
);
});
}
}
/* 转译 */
tranFormData(req) {
req.keys.map((item) => {
item.code_batch.map((item1) => {
item1.products = [];
});
});
req.keys.map((item) => {
item.code_batch.map((item1) => {
item1.product.legal.map((item2) => {
item2.only = item2.product_id;
item2.type = 1;
item2.upstream = "直连天下";
item1.products.push(item2);
});
item1.product.reduce.map((item3) => {
let obj = {};
obj.product_name = item3.batch_goods_name; //名字
obj.channel_activity_id = item3.channel_activity_id; //批次号
obj.only = item3.channel_activity_id;
obj.type = 2; //类型
obj.upstream = String(item3.channel) === "1" ? "支付宝" : "微信"; //上游
obj.effectDate =
item3.time_limit.effect_time.start_time +
" 至 " +
item3.time_limit.effect_time.end_time; //有效时间
obj.contract_price = item3.price; //单价
obj.official_price = item3.reduce_amount; //官方价
obj.quantity = Math.trunc(item3.all_budget / item3.reduce_amount); //总库存
obj.origin = item3;
item1.products.push(obj);
});
});
});
req.keys.map((item) => {
item.code_batch.map((item1) => {
item1.product = item1.products;
delete item1.products;
});
});
return req.keys;
}
async onNextStep() {
if (this.state.curstep >= 1) {
if ((await this.refs.step1.submit()) == true) {
this.setState({ isload: true });
this.setState({ curstep: 2 });
} else {
return;
}
}
if (this.state.curstep >= 2) {
let temp = [];
for (let i = 0; i < this.state.keys.length; i++) {
let data = null;
if (this.refs[this.state.keys[i]]) {
data = this.refs[this.state.keys[i]].submit();
} else {
continue;
}
if (data) {
temp.push(data);
} else {
return;
}
}
// if (this.state.direct_reseller_id <= 0) {
// // 老数据不能进行新增商品操作
// Notify.error(`请添加映射分销商2`);
// return;
// }
let obj = {
info: JSON.parse(sessionStorage.getItem("step1")),
key: temp,
};
console.log("obj =>", obj);
let plan_id = sessionStorage.getItem("plan_id");
obj.info.copy_plan_id = plan_id;
await addPlanStep(plan_id, obj).then((res) => {
handelResponse(
res,
(req, msg) => {
this.setState({ curstep: 3 });
sessionStorage.setItem("step2", JSON.stringify(temp));
this.setState({ card_visible: true });
return;
},
(err) => {
Notify.error(err);
}
);
});
}
if (this.state.curstep == 3) {
let data = this.refs.step3.submit();
if (data) {
let obj = {
info: JSON.parse(sessionStorage.getItem("step1")),
key: JSON.parse(sessionStorage.getItem("step2")),
theme: data,
complete: true,
};
let plan_id = sessionStorage.getItem("plan_id");
obj.info.copy_plan_id = plan_id;
addPlanStep(plan_id, obj).then((res) => {
handelResponse(
res,
(req, msg) => {
//获取电话 邮箱
let id = obj.info.reseller_id;
getReseller(id).then((res) => {
handelResponse(res, (req, msg) => {
this.setState({ reseller: req });
this.setState({ phone_list: req.contact_phone });
this.setState({ email_list: req.contact_email });
this.setState({ audit_visible: true });
});
});
},
(err) => {
Notify.error(err);
}
);
});
} else {
return;
}
}
}
addNewkey() {
let step = "step2-" + this.state.keys.length;
this.state.keys.push(step);
this.setState({ keys: this.state.keys });
this.setState({ isload: true });
}
onPhoneChange(e) {
this.setState({ phone_radio: e.target.value });
}
onEmailChange(e) {
this.setState({ email_radio: e.target.value });
}
cancel(e) {
this.setState({ audit_visible: false });
}
closeStep(index) {
this.state.keys[index] = "";
this.setState({ keys: this.state.keys });
}
// 获取分销商 id
getDirectResellerId = (data) => {
this.setState({
direct_reseller_id: data.direct_reseller_id,
});
};
send(e) {
let plan_id = sessionStorage.getItem("plan_id");
let data = {
phone:
this.state.phone_radio > -1
? this.state.phone_list[this.state.phone_radio]
: this.state.phone,
email:
this.state.email_radio > -1
? this.state.email_list[this.state.email_radio]
: this.state.email,
};
let phoneReg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$");
if (!phoneReg.test(data.phone)) {
Notify.error("手机号格式不正确");
return;
}
planSend(plan_id, data).then((res) => {
handelResponse(
res,
(req, msg) => {
Notify.success("发送成功,请在1-2分钟后查看");
this.props.history.push("/home/plan-list/");
},
(err) => {
Notify.success("发送成功,请在1-2分钟后查看");
this.props.history.push("/home/plan-list/");
}
);
});
}
async onEditInfo() {
let plan_id = sessionStorage.getItem("plan_id");
if (!this.state.is_Edit) {
this.setState({ is_Edit: true });
if (await this.refs.step1.submit(plan_id)) {
setTimeout(() => {
this.props.history.push("/home/plan-list/");
this.setState({ is_Edit: false });
}, 1500);
}
}
}
onConfirm(e) {
if (this.state.btn_loading == true) {
return;
}
this.setState({ btn_loading: true });
let plan_id = sessionStorage.getItem("plan_id");
let plan_status = sessionStorage.getItem("plan_status");
this.setState({ audit_visible: false });
let approval_id = sessionStorage.getItem("approval_id");
if (approval_id > 0) {
getApprovalsStatus(approval_id).then((res) => {
setTimeout(() => {
this.setState({ btn_loading: false });
}, 500);
handelResponse(
res,
(req, msg) => {
if (req.status == 0) {
this.setState({ recall_visible: true });
}
if (req.status == 1) {
Notify.error("进行中的计划不能提交审核");
setTimeout(() => {
this.props.history.push("/home/plan-list/");
}, 2000);
}
if (req.status == 2 || req.status == 3) {
let data = {
reseller_id: this.state.reseller.id,
reseller_name: this.state.reseller.name,
company_name: this.state.reseller.company_name,
receive_email: this.state.reseller.contact_email[0],
payment_direction:
this.state.payment_direction[this.state.paytype - 1],
};
if (this.state.direct_reseller_id <= 0) {
// 老数据不能进行新增商品操作
Notify.error(`请添加映射分销商1`);
return;
}
approvals(plan_id, data).then((res) => {
handelResponse(
res,
(req, msg) => {
this.setState({ audit_visible: false });
Notify.success("成功发起审批");
this.props.history.push("/home/plan-list/");
},
(err) => {
Notify.error(err);
}
);
});
}
},
(err) => {
Notify.error(err);
}
);
});
} else {
let data = {
reseller_id: this.state.reseller.id,
reseller_name: this.state.reseller.name,
company_name: this.state.reseller.company_name,
receive_email: this.state.email_list[0],
payment_direction: this.state.payment_direction[this.state.paytype - 1],
};
approvals(plan_id, data).then((res) => {
handelResponse(
res,
(req, msg) => {
Notify.success("成功发起审批");
this.setState({ audit_visible: false });
this.props.history.push("/home/plan-list/");
},
(err) => {
Notify.error(err);
}
);
});
}
}
phoneChange = (e) => {
this.setState({ phone: e.target.value });
};
emailChange = (e) => {
this.setState({ email: e.target.value });
};
onPayTypeChange(e) {
this.setState({ paytype: e.target.value });
}
onReCall() {
let approval_id = sessionStorage.getItem("approval_id");
this.setState({ recall_visible: false });
terminateApprovals(approval_id).then((res) => {
handelResponse(
res,
(req, msg) => {
this.setState({ approvalLoading: true });
let timer_c = setInterval(() => {
console.log(this.state.timer);
if (this.state.timer <= 0) {
clearInterval(timer_c);
this.setState({ approvalLoading: false });
Notify.success("撤销成功,请重新提交审核");
}
let time = this.state.timer - 1;
this.setState({ timer: time });
}, 1000);
},
(err) => {
Notify.error(err);
}
);
});
}
onStyleChange(e) {
console.log("状态", e.target.value);
if (e.target.value == 6) {
this.setState({ whiteStyle: true });
this.setState({ keyStyle: 6 });
} else {
this.setState({ keyStyle: e.target.value });
this.setState({ whiteStyle: false });
}
}
render() {
return (
<div id="plan-edit">
{this.state.disabled ? (
<div className="plan-main">
<div className="action-panel">
<div id="step1" className="step1">
<div className="plan-title">营销计划</div>
<Card
style={{ width: "100%" }}
title={this.state.step1_pagetitle}
>
<Step1
ref="step1"
data={this.state.step1_data}
disabled={this.state.disabled}
/>
</Card>
</div>
<div className="step-btn-group">
<Button type="primary" onClick={() => this.onEditInfo()}>
修改
</Button>
<Button type="normal" onClick={() => this.onReturn()}>
取消
</Button>
</div>
</div>
</div>
) : (
<div className="plan-main">
<div className="action-panel">
<div id="step1" className="step1">
<div className="plan-title">营销计划</div>
<Card
style={{ width: "100%" }}
title={this.state.step1_pagetitle}
>
<Step1
ref="step1"
data={this.state.step1_data}
disabled={this.state.disabled}
onGetDirectResellerId={(data) =>
this.getDirectResellerId(data)
}
/>
</Card>
</div>
{this.state.curstep >= 2 ? (
<div id="step2" className="step2">
<div className="plan-title">key</div>
{this.state.keys.map((item, index) => {
return item ? (
<Card
style={{
width: "100%",
height: "auto",
marginBottom: "10px",
}}
title={this.state.step2_pagetitle}
action={
index > 0 ? (
<span
className="zent-link"
target="_blank"
onClick={(e) => {
this.closeStep(index);
}}
>
关闭
</span>
) : null
}
>
<Step2
ref={"step2-" + index}
addNewkey={() => {
this.addNewkey();
}}
name={index}
onStyleChange={(e) => {
this.onStyleChange(e);
}}
is_Edit={true}
whiteStyle={this.state.whiteStyle}
keyStyle={this.state.keyStyle}
isload={this.state.isload}
data={item}
direct_reseller_id={this.state.direct_reseller_id}
disabled={this.state.disabled}
/>
</Card>
) : null;
})}
</div>
) : null}
{this.state.card_visible ? (
<div id="step3" className="step3">
<Card
style={{ width: "100%", height: "auto" }}
title={this.state.step3_pagetitle}
>
<Step3
ref="step3"
data={this.state.step3_data}
options={this.state.theme_options}
disabled={this.state.disabled}
/>
</Card>
</div>
) : null}
{this.state.card_visible ? (
<div className="step-btn-group">
<Button
type="primary"
onClick={() => this.onNextStep()}
disabled={this.state.disabled}
>
提交审核
</Button>
<Button type="normal" onClick={() => this.onReturn()}>
取消
</Button>
</div>
) : (
<div className="step-btn-group">
<Button
type="primary"
onClick={() => this.onNextStep()}
disabled={this.state.disabled}
>
下一步
</Button>
<Button type="normal" onClick={() => this.onReturn()}>
取消
</Button>
</div>
)}
{this.state.audit_visible ? (
<div className="audit">
<div className="modal"> </div>
<div className="audit-box">
<Icon
type="close"
className="audit-close"
onClick={(e) => {
this.setState({ audit_visible: false });
}}
/>
<div className="audit-box-title">提交审核</div>
<div className="payType">
<RadioGroup
onChange={(e) => {
this.onPayTypeChange(e);
}}
value={this.state.paytype}
className="audit-obj"
>
<Radio value={3}>预付款扣除</Radio>
<Radio value={1}>对私账户</Radio>
<Radio value={2}>对公账户</Radio>
</RadioGroup>
</div>
<div className="audit-btn-group">
<Button
onClick={(e) => {
this.setState({ audit_visible: false });
}}
>
取消
</Button>
<Button
type="primary"
onClick={(e) => {
this.onConfirm(e);
}}
>
确定
</Button>
</div>
</div>
</div>
) : null}
{this.state.recall_visible ? (
<div className="audit">
<div className="modal"> </div>
<div className="audit-box">
<Icon
type="close"
className="audit-close"
onClick={(e) => {
this.onReturn(e);
}}
/>
<div className="audit-box-title">审核中</div>
<div className="audit-box-txt">
提交审核会将原来审批撤回才可进行提交,是否撤回?
</div>
<div className="audit-btn-group">
<Button
onClick={(e) => {
this.setState({ recall_visible: false });
}}
>
取消
</Button>
<Button
type="primary"
onClick={(e) => {
this.onReCall(e);
}}
>
确定
</Button>
</div>
</div>
</div>
) : null}
{this.state.approvalLoading ? (
<div className="audit">
<div className="modal"> </div>
<div className="audit-box">
<div className="audit-box-title">撤销审批中</div>
<div className="audit-box-txt">
正在发起撤销...,请等待
<span style={{ color: "red" }}> {this.state.timer}</span>
</div>
</div>
</div>
) : null}
</div>
</div>
)}
</div>
);
}
}

File diff suppressed because it is too large Load Diff