From ca5856825055081719e00b273d71f067c4b3cfd8 Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Wed, 31 Jan 2024 18:29:12 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=96=B0=E5=A2=9E=E5=8C=85?= =?UTF-8?q?=E7=A0=81=E5=88=97=E8=A1=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/api.js | 5 + src/pages/order/settlementList/list.jsx | 389 +++++++++++++++++++++++ src/pages/order/settlementList/list.less | 83 +++++ src/pages/order/settlementList/utils.js | 72 +++++ src/pages/plan/add/step1.js | 57 ++-- src/router/index.js | 12 + 6 files changed, 595 insertions(+), 23 deletions(-) create mode 100644 src/pages/order/settlementList/list.jsx create mode 100644 src/pages/order/settlementList/list.less create mode 100644 src/pages/order/settlementList/utils.js diff --git a/src/assets/api.js b/src/assets/api.js index c1304fef..49a8e43f 100644 --- a/src/assets/api.js +++ b/src/assets/api.js @@ -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 } diff --git a/src/pages/order/settlementList/list.jsx b/src/pages/order/settlementList/list.jsx new file mode 100644 index 00000000..bc6ef87e --- /dev/null +++ b/src/pages/order/settlementList/list.jsx @@ -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 = ( + + ) + return ( +
+ +
+
+ + { + this.searchChange("key_batch_id", va) + }} + /> + + + { + this.searchChange("type", va) + }} + /> + + + { + this.searchChange("key", va) + }} + onClearItem={(va) => { + this.searchChange("key", "") + }} + /> + + +
+ + +
+ +
+
+
+ {this.state.selectionData.length > 0 ? ( + + 清空 + + } + > + 已选择 + + {this.state.selectionData.length} + + 项，官方价金额总计￥{this.state.officialPrice.toFixed(4)} + ，成本价金额总计：￥{this.state.costPrice.toFixed(4)} + + ) : null} + { + this.pageChange(e) + }} + countChange={(e) => { + this.countChange(e) + }} + checkChange={this.selection.bind(this)} + ComponentHandler={(com, rowData) => { + if (com == "opearo") { + return ( + this.moreFn(e, rowData)}> + 详情 + + ) + } + }} + /> +
+ +
+ ) + } +} diff --git a/src/pages/order/settlementList/list.less b/src/pages/order/settlementList/list.less new file mode 100644 index 00000000..547bbffc --- /dev/null +++ b/src/pages/order/settlementList/list.less @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/order/settlementList/utils.js b/src/pages/order/settlementList/utils.js new file mode 100644 index 00000000..1d834912 --- /dev/null +++ b/src/pages/order/settlementList/utils.js @@ -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" + } +] diff --git a/src/pages/plan/add/step1.js b/src/pages/plan/add/step1.js index 59e39abf..8b18fb95 100644 --- a/src/pages/plan/add/step1.js +++ b/src/pages/plan/add/step1.js @@ -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"} /> - { @@ -283,6 +284,34 @@ export default class accList extends React.Component { 仅兑换 + + { + this.setState({ isSettlement: e.target.value }) + }} + value={this.state.isSettlement} + > + 是 + 否 + + + {this.state.isSettlement === 1 ? ( + + - -