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

✨ feat: 新增包码列表代码

This commit is contained in:
wangsongsole 2024-01-31 18:29:12 +08:00
parent 85f33b57d1
commit ca58568250
6 changed files with 595 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/api.js
View File

@ -1019,4 +1019,9 @@ export const notifyReseller = (data) => {
return req("post", baseurl + "/order/notifyReseller", data)
}
/* 获取包码订单结算列表 */
export const getSettlementOrder = (data) => {
return req("get", baseurl + "/settlement_order/list", data)
}
export { req }

389
src/pages/order/settlementList/list.jsx Normal file
View File

@ -0,0 +1,389 @@
import {
getPlanChoseOption,
getReSellerOption,
getSettlementOrder,
getSettlementType,
handelResponse,
queryKeyBatch
} from "@/assets/api.js"
import "@/assets/comm.css"
import { nowDay, nowMonth } from "@/assets/comm.js"
import FormItem from "@/components/form-item/main"
import Form from "@/components/form/main"
import Grid from "@/components/gird/main.js"
import Ipt from "@/components/input/main"
import TabPage from "@/components/tabPage/main.js"
import React from "react"
import { Alert, Button, CombinedDateRangePicker, Notify, Select } from "zent"
import "./list.less"
import { Column } from "./utils"
import { pickBy } from "lodash-es"
var moment = require("moment")
let day = moment(nowDay()).format("YYYY-MM-DD")
let tomonth = moment(nowMonth()).format("YYYY-MM-DD")
export default class settlementList extends React.Component {
constructor(props) {
super(props)
this.state = {
tabList: [{ title: "包码列表" }],
orderList: [],
selectionData: [],
allcheck: false,
itemcheck: false,
tableHeight: 500,
combinedValue: [],
planOptions: [],
resellerOptions: [],
keysOptions: [],
settlementOptions: [],
page: 1,
limit: 10,
officialPrice: 0,
costPrice: 0,
search: this.initSearch()
}
this.onChangeCombinedDate = this.onChangeCombinedDate.bind(this)
}
initSearch() {
return {
plan_id: "",
reseller_id: "",
key_batch_id: "",
type: "",
key: ""
}
}
searchChange(key, va) {
const search = this.state.search
search[key] = va
this.setState({ search })
}
//选中表格的选框
selection(selection) {
this.setState({ selectionData: selection })
let officialPrice = 0
let costPrice = 0
selection.forEach((item) => {
officialPrice += Number(item.key_official_price)
costPrice += Number(item.key_cost_price)
})
this.setState({ officialPrice, costPrice })
}
/* 获取营销计划/分销商/结算类型 */
getPlan() {
getPlanChoseOption().then((res) =>
handelResponse(
res,
(req, msg) => {
const planOptions = req.map((item) => ({
key: item.id,
text: item.title
}))
this.setState({ planOptions })
},
(err) => {}
)
)
getReSellerOption().then((res) => {
handelResponse(res, (req, msg) => {
const resellerOptions = req.map((item) => ({
key: item.id,
text: item.name
}))
this.setState({ resellerOptions })
})
})
getSettlementType().then((res) =>
handelResponse(
res,
(req, msg) => {
const settlementOptions = req.map((o) => {
return { key: o.settlement_type, text: o.settlement_text }
})
this.setState({ settlementOptions })
},
(err) => {}
)
)
}
/* 获取营销计划下的key批次 */
getBatchKeys(key) {
queryKeyBatch({ status: "4,5", plan_id: key, bind_object: 1 }).then((res) => {
handelResponse(
res,
(req, msg) => {
const keysOptions = req.map((item) => ({
key: item.id,
text: item.batch_name
}))
this.setState({ keysOptions })
},
(err) => {
Notify.error(err)
}
)
})
}
//详情
moreFn(e, row) {
this.props.history.push("/home/order-addetails?oid=" + row.order_number)
sessionStorage.setItem("pathname2", "/home/order-addetails")
let activerou = [
{
items: [
{
path: "/home/order-list",
name: "订单管理"
},
{
path: "/home/order-addetails",
name: "订单详情"
}
]
}
]
sessionStorage.setItem("breaknav", JSON.stringify(activerou))
}
//清空
clearFn() {
this.setState({ allcheck: false, selectionData: [], itemcheck: false })
}
//选择时间
onChangeCombinedDate(e) {
this.setState({ combinedValue: e, page: 1, selectionData: [] }, () => {
this.getOrderFn()
})
}
//page
pageChange(e) {
this.setState({ selectionData: [], page: e }, () => {
this.getOrderFn()
})
}
//limit
countChange(e) {
this.setState({ selectionData: [], page: 1, limit: e }, () => {
this.getOrderFn()
})
}
//!获取订单列表
getOrderFn() {
let { page, limit, search, combinedValue } = this.state
let data = {
page,
limit,
begin_time: combinedValue[0],
end_time: combinedValue[1]
}
for (let key in search) {
data[key] = typeof search[key] === "string" ? search[key] : search[key].key
}
getSettlementOrder(pickBy(data))
.then((res) => {
handelResponse(
res,
(response, msg) => {
const orderList_data = response.data
const { total } = response
this.setState({ orderList: orderList_data, total })
},
(err) => {
Notify.error(err)
}
)
})
.catch((err) => {})
}
componentWillMount() {
let datetime = [tomonth + " " + "00:00:00", day + " " + "23:59:59"]
this.getPlan()
this.setState({ tableHeight: window.innerHeight - 490, combinedValue: datetime }, () => {
this.getOrderFn()
})
}
/* 重置 */
reset() {
this.setState({ search: this.initSearch(), page: 1 }, () => this.getOrderFn())
}
//过滤表格枚举状态
render() {
const date = (
<CombinedDateRangePicker
className="zent-datepicker-demo"
value={this.state.combinedValue}
showTime={{
format: "HH:mm:ss",
defaultTime: ["00:00:00", "23:59:59"]
}}
format="YYYY-MM-DD HH:mm:ss"
onChange={this.onChangeCombinedDate}
/>
)
return (
<div id="dislist" className="settlementList">
<TabPage tabs={this.state.tabList} slot={date}>
<div className="order-query">
<Form>
<FormItem labelname="营销计划：" required="" labelwidth="95px">
<Select
name="state"
value={this.state.search.plan_id}
options={this.state.planOptions}
placeholder="请选择"
width={204}
clearable
onChange={(va) => {
this.searchChange("plan_id", va)
if (va) {
this.getBatchKeys(va.key)
} else {
this.setState({ keysOptions: [] })
this.searchChange("key_batch_id", "")
}
}}
/>
</FormItem>
<FormItem labelname="key批次：" required="" labelwidth="86px">
<Select
name="state"
value={this.state.search.key_batch_id}
options={this.state.keysOptions}
placeholder="请先选择计划"
width={204}
clearable
onChange={(va) => {
this.searchChange("key_batch_id", va)
}}
/>
</FormItem>
<FormItem labelname="分销商：" required="" labelwidth="80px">
<Select
name="state"
value={this.state.search.reseller_id}
options={this.state.resellerOptions}
placeholder="请选择"
width={204}
clearable
onChange={(va) => {
this.searchChange("reseller_id", va)
}}
/>
</FormItem>
<FormItem labelname="结算类型：" required="" labelwidth="100px">
<Select
name="state"
value={this.state.search.type}
options={this.state.settlementOptions}
placeholder="请选择"
width={204}
clearable
onChange={(va) => {
this.searchChange("type", va)
}}
/>
</FormItem>
<FormItem labelname="key码：" required="" labelwidth="65px">
<Ipt
value={this.state.search.key}
countShow={false}
labelWidth="0px"
placeholder="请输入"
width={204}
onChange={(va) => {
this.searchChange("key", va)
}}
onClearItem={(va) => {
this.searchChange("key", "")
}}
/>
</FormItem>
<FormItem labelname="" required="" labelwidth="0">
<div style={{ width: "200px" }}>
<Button
type="primary"
onClick={() => {
this.setState({ page: 1 }, () => {
this.getOrderFn()
})
}}
>
查询
</Button>
<Button onClick={() => this.reset()}>重置</Button>
</div>
</FormItem>
</Form>
</div>
<div>
{this.state.selectionData.length > 0 ? (
<Alert
type="info"
extraContent={
<Button type="primary" onClick={this.clearFn.bind(this)}>
清空
</Button>
}
>
已选择
<font color="#296bef" style={{ fontWeight: "bold" }}>
{this.state.selectionData.length}
</font>
项，官方价金额总计￥{this.state.officialPrice.toFixed(4)}
，成本价金额总计：￥{this.state.costPrice.toFixed(4)}
</Alert>
) : null}
<Grid
spliteColor={"#fff"}
tableData={this.state.orderList}
Column={Column}
dataCount={this.state.total}
itemcheck={this.state.itemcheck}
allcheck={this.state.allcheck}
isMultiple={true}
page={this.state.page}
countbarVisible={false}
isSwitch={false}
ref="orderList"
maxheight={this.state.tableHeight}
pageChange={(e) => {
this.pageChange(e)
}}
countChange={(e) => {
this.countChange(e)
}}
checkChange={this.selection.bind(this)}
ComponentHandler={(com, rowData) => {
if (com == "opearo") {
return (
<span className="grid-link" onClick={(e) => this.moreFn(e, rowData)}>
详情
</span>
)
}
}}
/>
</div>
</TabPage>
</div>
)
}
}

83
src/pages/order/settlementList/list.less Normal file
View File

@ -0,0 +1,83 @@
.settlementList #dislist .zent-datepicker-trigger {
background: #f5f6f7;
border: none;
}
.zent-select-v2[data-zv="9.11.0"] {
margin-top: -8px;
margin-right: -20px;
border: 0;
}
.settlementList .distable {
margin-bottom: 10px;
}
.settlementList .iptfillself {
margin-bottom: 5px;
}
.query-order {
height: 41px;
}
.settlementList .iptfillself .label {
margin-right: 20px;
}
.settlementList .zent-select-v2[data-zv="9.12.7"] {
border-top: 0;
border-left: 0;
border-right: 0;
}
.settlementList .order-query {
padding: 24px;
.form {
display: flex;
flex-wrap: wrap;
.form-Item:not(:first-child) {
width: auto;
margin-left: 20px;
}
.form-label {
height: 80% !important;
}
.form-compontent {
padding-top: 0px !important;
height: 65% !important;
.keep-ipt {
height: 32px !important;
}
}
}
.button_box {
padding-top: 10px
}
.exportOrder {
margin-top: 20px;
}
}
.refundForm {
margin: 20px 0 50px;
.form-compontent {
padding: 0
}
#account-none {
display: none;
}
}

72
src/pages/order/settlementList/utils.js Normal file
View File

@ -0,0 +1,72 @@
export const Column = [
{
title: "ID",
name: "id",
prop: "id",
type: "normal",
width: "50px"
},
{
title: "包码结算订单 ID",
name: "settlement_no",
prop: "settlement_no",
type: "normal",
width: "300px"
},
{
title: "结算类型",
name: "type_text",
prop: "type_text",
type: "normal",
width: "auto"
},
{
title: "key码",
name: "key",
prop: "key",
type: "normal",
width: "auto"
},
{
title: "计划名称",
prop: "plan_title",
name: "plan_title",
width: "auto",
type: "normal"
},
{
title: "key批次名称",
prop: "key_batch_name",
name: "key_batch_name",
width: "auto",
type: "normal"
},
{
title: "分销商",
name: "reseller_name",
prop: "reseller_name",
type: "normal",
width: "auto"
},
{
title: "官方价（元）",
name: "key_official_price",
prop: "key_official_price",
type: "normal",
width: "auto"
},
{
title: "成本价（元）",
name: "key_cost_price",
prop: "key_cost_price",
type: "normal",
width: "auto"
},
{
title: "操作",
prop: "opearo",
name: "opearo",
type: "slot",
width: "auto"
}
]

57
src/pages/plan/add/step1.js
View File

@ -30,7 +30,8 @@ export default class accList extends React.Component {
},
settlementOptions: [],
reseller_option: [],
lodshow: false
lodshow: false,
isSettlement: 2
}
}
@ -54,7 +55,7 @@ export default class accList extends React.Component {
}
sessionStorage.setItem("knockGold_effectDate", JSON.stringify(date))
sessionStorage.setItem("redPackets_effectDate", JSON.stringify(date))
this.setState({ model: model, lodshow: true })
this.setState({ model: model, lodshow: true, isSettlement: data.settlement_type ? 1 : 2 })
}
componentDidMount(e) {
@ -240,7 +241,8 @@ export default class accList extends React.Component {
}
],
reseller: [{ type: "required", message: "请选择分销商" }],
date_time: [{ type: "required", message: "请选择时间段" }]
date_time: [{ type: "required", message: "请选择时间段" }],
settlement_type: [{ type: "required", message: "请选择包码结算方式" }]
}
return (
@ -269,7 +271,6 @@ export default class accList extends React.Component {
alignment={"left"}
/>
</FormItem>
<FormItem labelname="计划类型" prop="type" id="type">
<RadioGroup
onChange={(e) => {
@ -283,6 +284,34 @@ export default class accList extends React.Component {
<RadioButton value={2}>仅兑换</RadioButton>
</RadioGroup>
</FormItem>
<FormItem labelname="包码结算" prop="isSettlement" required="" id="isSettlement">
<RadioGroup
disabled={this.props.disabled}
onChange={(e) => {
this.setState({ isSettlement: e.target.value })
}}
value={this.state.isSettlement}
>
<RadioButton value={1}>是</RadioButton>
<RadioButton value={2}>否</RadioButton>
</RadioGroup>
</FormItem>
{this.state.isSettlement === 1 ? (
<FormItem labelname="包码结算方式" prop="settlement_type" id="settlement_type">
<Select
options={this.state.settlementOptions}
placeholder="选择一项"
disabled={this.props.disabled}
width={515}
value={this.state.model.settlement_type}
onChange={(e) => {
let model = this.state.model
model.settlement_type = e
this.setState({ model })
}}
/>
</FormItem>
) : null}
<FormItem labelname="分销商" prop="reseller" id="reseller">
<Select
options={this.state.reseller_option}
@ -296,25 +325,7 @@ export default class accList extends React.Component {
}}
/>
</FormItem>
<FormItem
labelname="包码结算方式"
prop="settlement_type"
required=""
id="settlement_type"
>
<Select
options={this.state.settlementOptions}
placeholder="选择一项"
disabled={this.props.disabled}
width={515}
value={this.state.model.settlement_type}
onChange={(e) => {
let model = this.state.model
model.settlement_type = e
this.setState({ model })
}}
/>
</FormItem>
<FormItem labelname="开始~结束时间" prop="date_time" id="date_time">
<DateRangePicker
className="zent-datepicker-plan"

12
src/router/index.js
View File

@ -29,6 +29,7 @@ import MyTempMouldAdd from "@/pages/exchangepage/template/main.js"
import downloadList from "@/pages/order/downloadList/list"
import OrderList from "@/pages/order/list/list"
import OrderDetails from "@/pages/order/more/more"
import SettlementList from "@/pages/order/settlementList/list"
import PlanAdd from "@/pages/plan/add/add"
import PlanEdit from "@/pages/plan/add/edit"
import PlanEditCopy from "@/pages/plan/add/plan-copy"
@ -86,6 +87,10 @@ const router = [
path: "/home/exchangepage",
component: ExchangePage
},
{
path: "/home/settlementList",
component: SettlementList
},
{
path: "/home/mytempMould",
component: MyTempMouldAdd
@ -439,6 +444,13 @@ export const routers = [
router: "/home/order-list",
code: ["get-order"]
},
{
id: 202,
title: "包码结算订单列表",
level: 5,
router: "/home/settlementList",
code: ["get-settlement_order-list"]
},
{
id: 215,
title: "订单下载列表",