✨ feat: 新增包码列表代码

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 }

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 = (
+      <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>
+    )
+  }
+}

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;
+  }
+}

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"
+  }
+]

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"}
             />
           </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"

src/router/index.js

@@ -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: "订单下载列表",