✨ feat: 计划列表新增计划ID搜索条件，以及列表新增计划ID字段

src/pages/plan/list/list.js

@@ -16,7 +16,8 @@ import {
   DropdownContent,
   Menu,
   Sweetalert,
-  Pop
+  Pop,
+  Select
 } from "zent"
 import "@/assets/comm.css"
 import Ipt from "@/components/input/main"
@@ -34,11 +35,18 @@ import {
   getReseller,
   dingTaskQuery
 } from "@/assets/api.js"
-import { omitBy, isNaN, isNil, findIndex } from "lodash-es"
+import { findIndex, pickBy } from "lodash-es"
 import menu from "@/assets/enum.js"
 var QRCode = require("qrcode.react")
 
 const Column = [
+  {
+    title: "计划 ID",
+    name: "id",
+    prop: "id",
+    type: "normal",
+    width: "auto"
+  },
   {
     title: "营销计划名称",
     name: "title",
@@ -144,6 +152,24 @@ const Column = [
   }
 ]
 
+export const options = [
+  {
+    key: "id",
+    text: "计划ID",
+    placeholder: "请输入计划ID查询"
+  },
+  {
+    key: "title",
+    text: "计划名称",
+    placeholder: "请输入计划名称查询"
+  },
+  {
+    key: "reseller_name",
+    text: "分销商名称",
+    placeholder: "请输入分销商名称查询"
+  }
+]
+
 export default class acclist extends React.Component {
   constructor(props) {
     super(props)
@@ -180,6 +206,8 @@ export default class acclist extends React.Component {
       email_radio: -1,
       phone_radio: -1,
       key_word: "",
+      searchOption: undefined,
+      placeholder: "",
       audit_visible: false,
 
       cur_item: null,
@@ -256,10 +284,7 @@ export default class acclist extends React.Component {
   }
 
   getPlanList(data) {
-    let queryParams = omitBy(data, (value) => {
+    getPlanList(pickBy(data)).then((res) => {
-      return isNaN(value) || isNil(value)
-    })
-    getPlanList(queryParams).then((res) => {
       handelResponse(
         res,
         (req, msg) => {
@@ -284,11 +309,10 @@ export default class acclist extends React.Component {
     let data = {
       page: this.state.page,
       limit: this.state.limit,
-      status: this.state.status,
+      status: this.state.status
-      key_word: this.state.key_word
     }
-    if (data.key_word === "") {
+    if (this.state.searchOption) {
-      delete data.key_word
+      data[this.state.searchOption.key] = this.state.key_word
     }
     this.getPlanList(data)
   }
@@ -359,8 +383,10 @@ export default class acclist extends React.Component {
                   let data = {
                     page: this.state.page,
                     limit: this.state.limit,
-                    status: this.state.status,
+                    status: this.state.status
-                    key_word: this.state.key_word
+                  }
+                  if (this.state.searchOption) {
+                    data[this.state.searchOption.key] = this.state.key_word
                   }
                   self.getPlanList(data)
                   Notify.success("更改状态成功")
@@ -386,8 +412,10 @@ export default class acclist extends React.Component {
             let data = {
               page: this.state.page,
               limit: this.state.limit,
-              status: this.state.status,
+              status: this.state.status
-              key_word: this.state.key_word
+            }
+            if (this.state.searchOption) {
+              data[this.state.searchOption.key] = this.state.key_word
             }
             self.getPlanList(data)
             Notify.success("更改状态成功")
@@ -504,11 +532,10 @@ export default class acclist extends React.Component {
                 let data = {
                   page: 1,
                   limit: 10,
-                  status: this.state.status,
+                  status: this.state.status
-                  key_word: this.state.key_word
                 }
-                if (data.key_word === "") {
+                if (this.state.searchOption) {
-                  delete data.key_word
+                  data[this.state.searchOption.key] = this.state.key_word
                 }
                 self.getPlanList(data)
               },
@@ -564,8 +591,10 @@ export default class acclist extends React.Component {
     this.setState({ limit: 10, page: 1 })
     let data = {
       page: 1,
-      limit: 10,
+      limit: 10
-      key_word: this.state.key_word
+    }
+    if (this.state.searchOption) {
+      data[this.state.searchOption.key] = this.state.key_word
     }
     data[prop] = e
     if (e == 999) {
@@ -589,20 +618,26 @@ export default class acclist extends React.Component {
   // 监听组件内部状态的变化:
   componentDidUpdate(prevProps, prevState) {
     // 参数分别为改变之前的数据状态对象
+    if (prevState.key_word != this.state.key_word && !this.state.key_word) {
+      this.iptSureFn()
+    }
 
-    if (prevState.key_word != this.state.key_word && prevState.status != this.state.status) {
+    if (prevState.searchOption != this.state.searchOption && !this.state.searchOption) {
-      this.iptsureFn()
+      this.iptSureFn()
+      this.setState({ key_word: "" })
     }
   }
 
-  iptsureFn(e) {
+  iptSureFn(e) {
     this.setState({ page: 1 })
     this.setState({ limit: 10 })
     let data = {
       page: 1,
       limit: 10,
-      status: this.state.status,
+      status: this.state.status
-      key_word: this.state.key_word
+    }
+    if (this.state.searchOption) {
+      data[this.state.searchOption.key] = this.state.key_word
     }
     this.getPlanList(data)
   }
@@ -668,10 +703,9 @@ export default class acclist extends React.Component {
     data[prop] = null
     this.setState(data)
     this.setState({ page: 1, limit: 10 })
-    let params = {
+    let params = { page: 1, limit: 10 }
-      page: 1,
+    if (this.state.searchOption) {
-      limit: 10,
+      params[this.state.searchOption.key] = this.state.key_word
-      key_word: this.state.key_word
     }
     this.getPlanList(params)
   }
@@ -817,26 +851,40 @@ export default class acclist extends React.Component {
             <Button type="primary" icon="plus" onClick={this.clickFn.bind(this)}>
               新建营销计划
             </Button>
-            {/* <Button type="info">批量操作</Button> */}
+            <div className="dfleac query-plan">
-            <Ipt
+              <Select
-              onChange={(e) => this.setState({ key_word: e })}
+                width="180px"
-              value={this.state.key_word}
+                value={this.state.searchOption}
-              wordSearch={this.iptsureFn.bind(this)}
+                onChange={(e) =>
-              icon="search"
+                  this.setState({
-              placeholder={"请输入营销计划名称、分销商名称查询"}
+                    searchOption: e,
-              countShow={false}
+                    key_word: "",
-              height={"36px"}
+                    placeholder: e && e.placeholder
-              width={"260px"}
+                  })
-              onClearItem={(e) => {
-                this.setState({ key_word: "" })
-                let data = {
-                  page: 1,
-                  limit: 10
                 }
-                this.getPlanList(data)
+                disableSearch
-              }}
+                options={options}
-              alignment={"left"}
+                clearable
-            />
+                placeholder="请选择查询分类"
+              />
+              {this.state.searchOption ? (
+                <Ipt
+                  labelWidth={0}
+                  onClearItem={(e) => {
+                    this.setState({ key_word: "" })
+                  }}
+                  wordSearch={this.iptSureFn.bind(this)}
+                  onChange={(e) => this.setState({ key_word: e })}
+                  value={this.state.key_word}
+                  icon="search"
+                  placeholder={this.state.placeholder}
+                  countShow={false}
+                  height={"36px"}
+                  width={"260px"}
+                  alignment={"left"}
+                />
+              ) : null}
+            </div>
           </div>
           <Filterbar
             filterList={this.state.filterList}

src/pages/plan/list/list.less

@@ -1,7 +1,8 @@
-.zent-tabs{
+.zent-tabs {
 	margin-top: 15px;
 }
-.dialog{
+
+.dialog {
 	width: 250px;
 	height: 200px;
 	background-color: #FFFFFF;
@@ -12,14 +13,29 @@
 	margin-left: -125px;
 	border-radius: 5px;
 }
-.input-group{
+
+.input-group {
 	width: 80%;
 	margin: 0 auto;
 	margin-bottom: 10px;
 }
 
-#dislist{
+.query-plan {
-	.linkmore.disabled ,.grid-link.disabled{
+	height: 41px;
-		color: rgb(216, 219, 221);
+
-	}	
+	.iptfillself {
+		margin-bottom: 5px;
+	}
+
+	.iptfillself .label {
+		margin-right: 20px;
+	}
 }
+
+#dislist {
+
+	.linkmore.disabled,
+	.grid-link.disabled {
+		color: rgb(216, 219, 221);
+	}
+}