✨ feat: 兑换码列表新增筛选条件

2024-01-11 12:00:03 +08:00 · 2024-01-11 12:00:03 +08:00 · dbd76ee9b8
parent 6cf56f78f2
commit dbd76ee9b8
3 changed files with 175 additions and 34 deletions
--- a/src/pages/exchangecode/list/list.js
+++ b/src/pages/exchangecode/list/list.js
@ -5,18 +5,22 @@ import {
  getCodesList,
  handelResponse,
  putCodeStatus,
-  terminateApprovals
+  terminateApprovals,
+  getPlanChoseOption
 } from "@/assets/api.js"
 import "@/assets/comm.css"
 import menu from "@/assets/enum.js"
 import Grid from "@/components/gird/main.js"
 import Ipt from "@/components/input/main"
+import Form from "@/components/form/main"
+import FormItem from "@/components/form-item/main"
 import TabPage from "@/components/tabPage/main.js"
 import { commonSearchOrder } from "@/tools/apiTools.js" // 公用接口函数
 import React from "react"
-import { Button, CombinedDateRangePicker, Notify, Sweetalert, Switch } from "zent"
+import { Button, CombinedDateRangePicker, Notify, Sweetalert, Switch, Select } from "zent"
 import "./list.less"
 import { Column, tabList } from "./util"
+import { cloneDeep } from "lodash-es"

 export default class acclist extends React.Component {
  constructor(props) {
@ -29,10 +33,11 @@ export default class acclist extends React.Component {
      tabList: [...tabList],
      combinedValue: [],
      DateTime: "", //数据更新时间
-      key_word: "",
+      search: this.initSearch(),
      status: 0,
      tableHeight: 600,
-      tabIndex: 0
+      tabIndex: 0,
+      planOptions: []
    }
  }

@ -104,6 +109,38 @@ export default class acclist extends React.Component {
    window.open("#/home/exchange-addcommodity")
  }

+  initSearch() {
+    return {
+      plan_title: "",
+      key_batch_id: "",
+      code_batch_id: "",
+      code_batch_name: ""
+    }
+  }
+
+  searchChange(key, va) {
+    const search = this.state.search
+    search[key] = va
+    this.setState({ search })
+  }
+
+  /* 获取营销计划 */
+  getPlan() {
+    getPlanChoseOption().then((res) =>
+      handelResponse(
+        res,
+        (req, msg) => {
+          const planOptions = req.map((item) => ({
+            key: item.id,
+            text: item.title
+          }))
+          this.setState({ planOptions })
+        },
+        (err) => {}
+      )
+    )
+  }
+
  /* 处理可复制数据逻辑  */
  copyElementFunction(params) {
    let element = ""
@ -170,7 +207,7 @@ export default class acclist extends React.Component {
  }

  tabFn(index) {
-    this.setState({ tabIndex: index, key_word: "", page: 1, limit: 10 })
+    this.setState({ tabIndex: index, search: this.initSearch(), page: 1, limit: 10 })
    setTimeout(() => {
      this.getCodeListFn({}, index)
    }, 10)
@ -292,8 +329,9 @@ export default class acclist extends React.Component {
  //获取兑换码列表
  getCodeListFn(time = {}, menu = this.state.tabIndex) {
    let _self = this
-    let { page, limit, key_word } = _self.state
-    let data = { page, limit }
+    let { page, limit, search } = cloneDeep(_self.state)
+    search.plan_title = search.plan_title?.text || ""
+    let data = { page, limit, ...search }

    if (this.state.combinedValue && this.state.combinedValue[0]) {
      data.begin_time = this.state.combinedValue[0]
@ -317,10 +355,6 @@ export default class acclist extends React.Component {
        data.status = null
      }
    }
-
-    if (key_word) {
-      data.key_word = key_word
-    }
    getCodesList(data)
      .then((res) => {
        let response = JSON.parse(res)
@ -336,14 +370,7 @@ export default class acclist extends React.Component {

  componentWillMount() {
    this.setState({ tableHeight: window.innerHeight - 390 })
-  }
-
-  // 监听组件内部状态的变化:
-  componentDidUpdate(prevProps, prevState) {
-    // 参数分别为改变之前的数据状态对象
-    if (prevState.key_word != this.state.key_word && !this.state.key_word) {
-      this.getCodeListFn()
-    }
+    this.getPlan()
  }

  onReCall(e, rowData) {
@ -418,20 +445,80 @@ export default class acclist extends React.Component {
            <Button type="primary" icon="plus" onClick={() => this.addCodeFunction()}>
              新建兑换码
            </Button>
-            <Ipt
-              onClearItem={(e) => {
-                this.setState({ key_word: "" })
-              }}
-              wordSearch={this.sureFn.bind(this)}
-              onChange={(e) => this.setState({ key_word: e })}
-              value={this.state.key_word}
-              icon="search"
-              placeholder={"请输入关键字进行匹配查询"}
-              countShow={false}
-              height={"36px"}
-              width={"260px"}
-              alignment={"left"}
-            />
+            <div className="codesFind">
+              <Form>
+                <FormItem labelname="计划名称：" required="" labelwidth="90px">
+                  <Select
+                    name="state"
+                    value={this.state.search.plan_title}
+                    options={this.state.planOptions}
+                    placeholder="请输入"
+                    width={204}
+                    clearable
+                    onChange={(va) => {
+                      this.searchChange("plan_title", va)
+                    }}
+                  />
+                </FormItem>
+                <FormItem labelname="key批次ID：" required="" labelwidth="100px">
+                  <Ipt
+                    value={this.state.search.key_batch_id}
+                    countShow={false}
+                    labelWidth="0px"
+                    placeholder="请输入"
+                    width={204}
+                    onChange={(va) => {
+                      this.searchChange("key_batch_id", va)
+                    }}
+                    onClearItem={(va) => {
+                      this.searchChange("key_batch_id", "")
+                    }}
+                  />
+                </FormItem>
+                <FormItem labelname="兑换码批次名称：" required="" labelwidth="155px">
+                  <Ipt
+                    value={this.state.search.code_batch_name}
+                    countShow={false}
+                    labelWidth="0px"
+                    placeholder="请输入"
+                    width={204}
+                    onChange={(va) => {
+                      this.searchChange("code_batch_name", va)
+                    }}
+                    onClearItem={(va) => {
+                      this.searchChange("code_batch_name", "")
+                    }}
+                  />
+                </FormItem>
+                <FormItem labelname="兑换码批次ID：" required="" labelwidth="130px">
+                  <Ipt
+                    value={this.state.search.code_batch_id}
+                    countShow={false}
+                    labelWidth="0px"
+                    placeholder="请输入"
+                    width={204}
+                    onChange={(va) => {
+                      this.searchChange("code_batch_id", va)
+                    }}
+                    onClearItem={(va) => {
+                      this.searchChange("code_batch_id", "")
+                    }}
+                  />
+                </FormItem>
+                <div className="button_box">
+                  <Button type="primary" onClick={() => this.getCodeListFn()}>
+                    查询
+                  </Button>
+                  <Button
+                    onClick={() =>
+                      this.setState({ search: this.initSearch() }, () => this.getCodeListFn())
+                    }
+                  >
+                    重置
+                  </Button>
+                </div>
+              </Form>
+            </div>
          </div>
          <div className="code-table">
            <Grid
--- a/src/pages/exchangecode/list/list.less
+++ b/src/pages/exchangecode/list/list.less
@ -6,6 +6,7 @@
    padding: 24px;
    display: flex;
    justify-content: space-between;
+    align-items: center;
  }

  .code-table {
@ -21,4 +22,57 @@
  .zent-datepicker-trigger {
    background: #f5f6f7 !important;
  }
+
+  .codesFind {
+    display: flex;
+    align-items: center;
+    width: auto;
+
+    .form-label {
+      height: 80% !important;
+    }
+
+    .form-compontent {
+      padding-top: 0px !important;
+      height: 65% !important;
+
+
+      .iptfillself:not(:last-child) {
+        margin-bottom: 0 !important;
+      }
+
+      .keep-ipt {
+        height: 32px !important;
+      }
+    }
+
+    .form {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+
+      .form-Item {
+        width: auto;
+        margin-right: 15px;
+      }
+    }
+
+    .button_box {
+      margin-top: 8px;
+    }
+
+    .zent-input-wrapper {
+      border-top: 0 !important;
+      border-left: 0 !important;
+      border-right: 0 !important;
+    }
+
+    .zent-input-wrapper:hover {
+      border-color: #296BEF !important;
+
+      .zent-input {
+        background-color: #F7F9FC;
+      }
+    }
+  }
 }
--- a/src/pages/order/more/more.js
+++ b/src/pages/order/more/more.js
@ -191,7 +191,7 @@ export default class order extends React.Component {
                <span>总计</span>
                <font>{(orderDetail_data.num * orderDetail_data.contract_price).toFixed(4)}</font>
              </li>
-              {orderDetail_data.product?.product_type === 1 ? (
+              {orderDetail_data.orderDetail?.product.product_type === 1 ? (
                <li>
                  <span>充值账号</span>
                  <font>{orderDetail_data.account}</font>