💪 optimize: 优化用户体验

src/pages/order/list/list.js

@@ -25,7 +25,22 @@ import Ipt from "@/components/input/main"
 import TabPage from "@/components/tabPage/main.js"
 import { intersection } from "lodash-es"
 import React from "react"
-import { Alert, Button, CombinedDateRangePicker, Dialog, Notify, Select, Sweetalert } from "zent"
+import {
+  Alert,
+  Button,
+  CombinedDateRangePicker,
+  Dialog,
+  Notify,
+  Select,
+  Sweetalert,
+  Dropdown,
+  DropdownClickTrigger,
+  Icon,
+  DropdownContent,
+  Menu,
+  MenuItem,
+  DropdownPosition
+} from "zent"
 import "./list.less"
 import { Column, filterList, options, rules } from "./utils"
 var moment = require("moment")
@@ -47,6 +62,7 @@ export default class orderList extends React.Component {
       ],
       allcheck: false,
       itemcheck: false,
+      menuVisible: false,
       combinedValue: [],
       tableHeight: 500,
       status: null,
@@ -598,29 +614,29 @@ export default class orderList extends React.Component {
     )
   }
 
-  /* 事件通知 */
-  eventNotify(order_number, event) {
-    notifyReseller({ order_number, event }).then(({ code, message }) => {
-      Notify.clear()
-      if (code === 200) {
-        Notify.success(message)
-      } else {
-        Notify.error(message)
-      }
-    })
-  }
-
-  /* 核销查询 */
-  writeOffQuery(order_number) {
-    voucherUsageQuery({ order_number }).then(({ code, message }) => {
-      Notify.clear()
-      if (code === 200) {
-        this.getOrderFn()
-        Notify.success(message)
-      } else {
-        Notify.error(message)
-      }
-    })
+  menuItemClick(event, order_number) {
+    /* 核销查询 */
+    if (event == 0) {
+      voucherUsageQuery({ order_number }).then(({ code, message }) => {
+        Notify.clear()
+        if (code === 200) {
+          this.getOrderFn()
+          Notify.success(message)
+        } else {
+          Notify.error(message)
+        }
+      })
+    } else {
+      /* 事件通知 */
+      notifyReseller({ order_number, event }).then(({ code, message }) => {
+        Notify.clear()
+        if (code === 200) {
+          Notify.success(message)
+        } else {
+          Notify.error(message)
+        }
+      })
+    }
   }
 
   //过滤表格枚举状态
@@ -662,19 +678,6 @@ export default class orderList extends React.Component {
                   }}
                 />
               </FormItem>
-              <FormItem labelname="分销商名称：" required="" labelwidth="120px">
-                <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"
@@ -688,6 +691,19 @@ export default class orderList extends React.Component {
                   }}
                 />
               </FormItem>
+              <FormItem labelname="分销商名称：" required="" labelwidth="120px">
+                <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="120px">
                 <Select
                   width="204px"
@@ -964,26 +980,30 @@ export default class orderList extends React.Component {
                             发送卡密短信
                           </span>
                         )}
-                      {rowData.notifyEvent &&
-                        rowData.notifyEvent.map((item) => (
-                          <span
-                            className="grid-link"
-                            onClick={() => this.eventNotify(rowData.order_number, item.event)}
-                          >
-                            {item.name}
-                          </span>
-                        ))}
-
-                      {rowData.type === 2 &&
-                        rowData.orderVoucher &&
-                        rowData.orderVoucher.status === 1 && (
-                          <span
-                            className="grid-link"
-                            onClick={() => this.writeOffQuery(rowData.order_number)}
-                          >
-                            核销查询
-                          </span>
-                        )}
+                      <Dropdown
+                        position={DropdownPosition.RightTop}
+                        visible={this.state.menuVisible}
+                        onVisibleChange={(v) => this.setState({ visible1: v })}
+                      >
+                        <DropdownClickTrigger>
+                          <div className="linkmore grid-link">
+                            更多 <Icon type={"down"} />
+                          </div>
+                        </DropdownClickTrigger>
+                        <DropdownContent>
+                          <Menu onClick={(e, key) => this.menuItemClick(key, rowData.order_number)}>
+                            {rowData.notifyEvent &&
+                              rowData.notifyEvent.map((item) => (
+                                <MenuItem key={item.event}>{item.name}</MenuItem>
+                              ))}
+                            {rowData.type === 2 &&
+                              rowData.orderVoucher &&
+                              rowData.orderVoucher.status === 1 && (
+                                <MenuItem key={0}>核销查询</MenuItem>
+                              )}
+                          </Menu>
+                        </DropdownContent>
+                      </Dropdown>
                     </div>
                   )
                 }

src/pages/order/list/utils.js

@@ -88,7 +88,7 @@ export const Column = [
     prop: "opearo",
     name: "opearo",
     type: "slot",
-    width: "160px"
+    width: "220px"
   },
   {
     title: "批次号",