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

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 { page, limit, search } = cloneDeep(_self.state)
-    let data = { page, limit }
+    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 })
-  }
+    this.getPlan()
-
-  // 监听组件内部状态的变化:
-  componentDidUpdate(prevProps, prevState) {
-    // 参数分别为改变之前的数据状态对象
-    if (prevState.key_word != this.state.key_word && !this.state.key_word) {
-      this.getCodeListFn()
-    }
   }
 
   onReCall(e, rowData) {
@@ -418,20 +445,80 @@ export default class acclist extends React.Component {
             <Button type="primary" icon="plus" onClick={() => this.addCodeFunction()}>
               新建兑换码
             </Button>
-            <Ipt
+            <div className="codesFind">
-              onClearItem={(e) => {
+              <Form>
-                this.setState({ key_word: "" })
+                <FormItem labelname="计划名称：" required="" labelwidth="90px">
-              }}
+                  <Select
-              wordSearch={this.sureFn.bind(this)}
+                    name="state"
-              onChange={(e) => this.setState({ key_word: e })}
+                    value={this.state.search.plan_title}
-              value={this.state.key_word}
+                    options={this.state.planOptions}
-              icon="search"
+                    placeholder="请输入"
-              placeholder={"请输入关键字进行匹配查询"}
+                    width={204}
-              countShow={false}
+                    clearable
-              height={"36px"}
+                    onChange={(va) => {
-              width={"260px"}
+                      this.searchChange("plan_title", va)
-              alignment={"left"}
+                    }}
-            />
+                  />
+                </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

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

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>