From a82f1ed8aef81a462df7cbc2aa0052dbc90f74a1 Mon Sep 17 00:00:00 2001
From: zhangds <c664256297.com>
Date: Wed, 31 Aug 2022 10:51:41 +0800
Subject: [PATCH] =?UTF-8?q?1)=20=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                                   |   5 +
 .../UseCouponAddEdit/index copy 2.jsx         | 435 ++++++++++++++++++
 .../UseCouponAddEdit/index copy 3.jsx         | 272 +++++++++++
 .../UseCouponAddEdit/index copy.jsx           | 268 ++++++++---
 src/components/UseCouponAddEdit/index.jsx     | 274 +++--------
 src/pages/coupon/addEdit/index.jsx            |   2 +-
 6 files changed, 996 insertions(+), 260 deletions(-)
 create mode 100644 src/components/UseCouponAddEdit/index copy 2.jsx
 create mode 100644 src/components/UseCouponAddEdit/index copy 3.jsx

diff --git a/src/App.css b/src/App.css
index c2e5fff9..9a82ff69 100644
--- a/src/App.css
+++ b/src/App.css
@@ -229,6 +229,11 @@
   border: none;
 }
 
+.table-box-app .zent-datepicker-trigger{
+  background: #f5f6f7 !important;
+  border: none;
+}
+
 /* 日期整体样式 */
 .zent-datepicker .zent-datepicker-trigger {
   border-radius: 0 !important;
diff --git a/src/components/UseCouponAddEdit/index copy 2.jsx b/src/components/UseCouponAddEdit/index copy 2.jsx
new file mode 100644
index 00000000..be3afd47
--- /dev/null
+++ b/src/components/UseCouponAddEdit/index copy 2.jsx	
@@ -0,0 +1,435 @@
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { useSetState } from "ahooks";
+import { FixedSizeList } from "react-window";
+import {
+  Card,
+  DateRangePicker,
+  Button,
+  LayoutRow as Row,
+  LayoutCol as Col,
+  LayoutGrid as Grids,
+  Select,
+} from "zent";
+import moment from "moment";
+
+import Ipt from "@/components/input/main";
+import Form from "@/components/form/main";
+import FormItem from "@/components/form-item/main";
+import Grid from "@/components/gird/main.js";
+
+import "./style.less";
+
+const tableColumn = [
+  {
+    title: "商品编号",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "商品名称",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "官方价",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "合同单价",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "库存数量",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "批次号",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "总预算",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "有效时间段",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "创建时间",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "类型",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "上游平台",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "操作",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+];
+
+const rules = {
+  name: [{ type: "required", message: "请输入批次名称" }],
+};
+
+const UseCouponAddEdit = forwardRef((props, ref) => {
+  /**
+   * type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
+   */
+  const { type = 0 } = props;
+  const [state, setState] = useSetState({
+    setup1_title: "基本信息",
+    setup2_title: "发放规则",
+    setup3_title: "商品范围",
+    disabled: false,
+    model: {
+      name: "",
+      date_time: "",
+    },
+    tableData: [],
+    tableHeight: 500,
+    page: 1,
+    dataCount: 0,
+    rankoptions: [],
+    rank: [],
+    newGoodsBtnLoading: false,
+    newGoldLoading: false,
+    lodgingTable: true,
+    plan_OPTIONS: [
+      {
+        key: "1",
+        text: `plan 1`,
+      },
+    ],
+    key_OPTIONS: [
+      {
+        key: "1",
+        text: `key 1`,
+      },
+    ],
+  });
+
+  useImperativeHandle(ref, () => ({
+    submit: submit,
+  }));
+
+  const form_el = useRef(null);
+  const table_el = useRef(null);
+
+  const submit = () => {
+    let el = form_el.current.validator();
+    console.log("el =>", el);
+  };
+
+  const onReturn = () => {};
+  const onChangeCombinedDate = () => {};
+  const onDisabledRange = (date, type) => {
+    let disabled = false;
+    if (type == "end") {
+      disabled = moment(date.getTime()).add(1, "days") <= new Date().getTime();
+    }
+    if (type == "start") {
+      disabled = date.getTime() <= new Date().getTime();
+    }
+    return disabled;
+  };
+  const onPageChange = () => {};
+  const onCountChange = () => {};
+  const selectionFun = () => {};
+  const onRankChange = () => {};
+  const addProduct = () => {};
+  const renderOptionList = (options, renderOption) => {
+    return (
+      <FixedSizeList
+        height={8.5 * 32}
+        itemCount={options.length}
+        itemSize={32}
+        width={240}
+      >
+        {({ index, style }) => (
+          <div style={style}>{renderOption(options[index], index)}</div>
+        )}
+      </FixedSizeList>
+    );
+  };
+  const plan_key_formEl = () => {
+    return (
+      <>
+        <FormItem labelname="归属计划" prop="gs_plan">
+          <Select
+            clearable
+            options={state.plan_OPTIONS}
+            placeholder="选择一项"
+            renderOptionList={renderOptionList}
+          />
+        </FormItem>
+        <FormItem labelname="归属key" prop="gs_key">
+          <Select
+            clearable
+            options={state.key_OPTIONS}
+            placeholder="选择一项"
+            renderOptionList={renderOptionList}
+          />
+        </FormItem>
+      </>
+    );
+  };
+  return (
+    <div className="coupon-box">
+      <Form model={state.model} rules={rules} ref={form_el}>
+        <Card style={{ margin: "10px auto" }} title={state.setup1_title}>
+          {/* 是否显示两个字段 */}
+          {type === 1 ? plan_key_formEl() : null}
+
+          <FormItem labelname="批次名称" prop="name">
+            <Ipt
+              onChange={(e) => {
+                setState({ model: { name: e } });
+              }}
+              onClearItem={() => {
+                setState({ model: { name: "" } });
+              }}
+              value={state.model.name}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={20}
+              height={"36px"}
+              countShow={true}
+              width={"520px"}
+              alignment={"left"}
+            />
+          </FormItem>
+
+          <FormItem labelname="生效时间段" prop="date_time">
+            <DateRangePicker
+              className="zent-datepicker-plan"
+              showTime={{
+                format: "HH:mm:ss",
+                defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
+              }}
+              format="YYYY-MM-DD HH:mm:ss"
+              disabled={[state.disabled, false]}
+              value={state.model.date_time}
+              onChange={(e) => {
+                onChangeCombinedDate(e);
+              }}
+              disabledDate={onDisabledRange}
+            />
+          </FormItem>
+        </Card>
+        <Card style={{ margin: "10px auto" }} title={state.setup2_title}>
+          <Grids>
+            <Row>
+              <Col span={3}>
+                <p>
+                  面额 <span className="mustwrite">*</span>
+                </p>
+              </Col>
+              <Col span={2}>
+                <div className="justify-box">
+                  <span>满</span>
+                  <Ipt
+                    onChange={(e) => {
+                      setState({ model: { name: e } });
+                    }}
+                    onClearItem={() => {
+                      setState({ model: { name: "" } });
+                    }}
+                    value={state.model.name}
+                    placeholder={"请输入"}
+                    labelWidth={"0px"}
+                    maxLength={20}
+                    height={"36px"}
+                    countShow={false}
+                    width={"130px"}
+                    alignment={"left"}
+                  />
+                </div>
+              </Col>
+
+              <Col span={3}>
+                <div className="justify-box">
+                  <span style={{ paddingRight: "10px" }}>减</span>
+                  <Ipt
+                    onChange={(e) => {
+                      setState({ model: { name: e } });
+                    }}
+                    onClearItem={() => {
+                      setState({ model: { name: "" } });
+                    }}
+                    value={state.model.name}
+                    placeholder={"请输入"}
+                    labelWidth={"0px"}
+                    maxLength={20}
+                    height={"36px"}
+                    countShow={false}
+                    width={"130px"}
+                    alignment={"left"}
+                    unit="元"
+                  />
+                </div>
+              </Col>
+            </Row>
+          </Grids>
+
+          <FormItem labelname="发放总量" prop="name">
+            <Ipt
+              onChange={(e) => {
+                setState({ model: { name: e } });
+              }}
+              onClearItem={() => {
+                setState({ model: { name: "" } });
+              }}
+              value={state.model.name}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={20}
+              height={"36px"}
+              countShow={false}
+              width={"520px"}
+              alignment={"left"}
+              unit="个"
+            />
+          </FormItem>
+
+          <FormItem labelname="总预算" prop="name">
+            <Ipt
+              onChange={(e) => {
+                setState({ model: { name: e } });
+              }}
+              onClearItem={() => {
+                setState({ model: { name: "" } });
+              }}
+              value={state.model.name}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={20}
+              height={"36px"}
+              countShow={false}
+              width={"520px"}
+              alignment={"left"}
+              unit="元"
+            />
+          </FormItem>
+        </Card>
+        <Card style={{ margin: "10px auto" }} title={state.setup3_title}>
+          <FormItem labelname="商品范围" prop="rank" id="rank">
+            <div className="goods-boxs">
+              <Select
+                options={state.rankoptions}
+                multiple
+                value={state.rank}
+                placeholder="选择一项"
+                width={405}
+                onChange={(e) => {
+                  onRankChange(e);
+                }}
+              />
+              <Button
+                type="primary"
+                style={{ marginLeft: "20px" }}
+                loading={state.newGoodsBtnLoading}
+                onClick={() => {
+                  addProduct("addProduct");
+                }}
+              >
+                新建商品
+              </Button>
+              <Button
+                type="primary"
+                style={{ marginLeft: "20px" }}
+                loading={state.newGoldLoading}
+                onClick={() => {
+                  addProduct("addKnockGold");
+                }}
+                disabled={
+                  !JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
+                }
+              >
+                新建立减金
+              </Button>
+            </div>
+          </FormItem>
+
+          <Grid
+            spliteColor={"#fff"}
+            tableData={state.tableData}
+            Column={tableColumn}
+            countbarVisible={false}
+            maxheight={state.tableHeight}
+            isSwitch={false}
+            page={state.page}
+            ref={table_el}
+            dataCount={state.dataCount}
+            pageChange={(e) => onPageChange(e)}
+            emptyText={
+              state.lodgingTable
+                ? "抱歉，暂无相关数据记录"
+                : "查询 请输入【分销商】或【计划名称】或【key】进行查询"
+            }
+            countChange={(e) => onCountChange(e)}
+            checkChange={(data) => selectionFun(data)}
+            ComponentHandler={(com, rowData) => {
+              if (com == "dates") {
+                return (
+                  <span>
+                    {rowData.begin_time} 至 {rowData.end_time}
+                  </span>
+                );
+              }
+            }}
+          />
+        </Card>
+      </Form>
+
+      <div className="step-btn-group">
+        <Button type="primary" onClick={() => submit()}>
+          提交审核
+        </Button>
+        <Button type="normal" onClick={() => onReturn()}>
+          取消
+        </Button>
+      </div>
+    </div>
+  );
+});
+
+export default UseCouponAddEdit;
diff --git a/src/components/UseCouponAddEdit/index copy 3.jsx b/src/components/UseCouponAddEdit/index copy 3.jsx
new file mode 100644
index 00000000..1c7305b1
--- /dev/null
+++ b/src/components/UseCouponAddEdit/index copy 3.jsx	
@@ -0,0 +1,272 @@
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { useSetState } from "ahooks";
+import { FixedSizeList } from "react-window";
+import {
+  Card,
+  DateRangePicker,
+  Button,
+  LayoutRow as Row,
+  LayoutCol as Col,
+  LayoutGrid as Grids,
+  Select,
+} from "zent";
+import moment from "moment";
+
+import Ipt from "@/components/input/main";
+import Form from "@/components/form/main";
+import FormItem from "@/components/form-item/main";
+import Grid from "@/components/gird/main.js";
+
+import "./style.less";
+
+const tableColumn = [
+  {
+    title: "商品编号",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "商品名称",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "官方价",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "合同单价",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "库存数量",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "批次号",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "总预算",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "有效时间段",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "创建时间",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "类型",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "上游平台",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "操作",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+];
+
+const rules = {
+  name: [{ type: "required", message: "请输入批次名称" }],
+};
+
+const UseCouponAddEdit = forwardRef((props, ref) => {
+  /**
+   * type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
+   */
+  const { type = 0 } = props;
+  const [state, setState] = useSetState({
+    setup1_title: "基本信息",
+    setup2_title: "发放规则",
+    setup3_title: "商品范围",
+    disabled: false,
+    model: {
+      name: "",
+      date_time: "",
+    },
+    tableData: [],
+    tableHeight: 500,
+    page: 1,
+    dataCount: 0,
+    rankoptions: [],
+    rank: [],
+    newGoodsBtnLoading: false,
+    newGoldLoading: false,
+    lodgingTable: true,
+    plan_OPTIONS: [
+      {
+        key: "1",
+        text: `plan 1`,
+      },
+    ],
+    key_OPTIONS: [
+      {
+        key: "1",
+        text: `key 1`,
+      },
+    ],
+  });
+
+  useImperativeHandle(ref, () => ({
+    submit: submit,
+  }));
+
+  const form_el = useRef(null);
+  const table_el = useRef(null);
+
+  const submit = () => {
+    let el = form_el.current.validator();
+    console.log("el =>", el);
+  };
+
+  const onReturn = () => {};
+  const onChangeCombinedDate = () => {};
+  const onDisabledRange = (date, type) => {
+    let disabled = false;
+    if (type == "end") {
+      disabled = moment(date.getTime()).add(1, "days") <= new Date().getTime();
+    }
+    if (type == "start") {
+      disabled = date.getTime() <= new Date().getTime();
+    }
+    return disabled;
+  };
+  const onPageChange = () => {};
+  const onCountChange = () => {};
+  const selectionFun = () => {};
+  const onRankChange = () => {};
+  const addProduct = () => {};
+  const renderOptionList = (options, renderOption) => {
+    return (
+      <FixedSizeList
+        height={8.5 * 32}
+        itemCount={options.length}
+        itemSize={32}
+        width={240}
+      >
+        {({ index, style }) => (
+          <div style={style}>{renderOption(options[index], index)}</div>
+        )}
+      </FixedSizeList>
+    );
+  };
+  const plan_key_formEl = () => {
+    return (
+      <>
+        <FormItem labelname="归属计划" prop="gs_plan">
+          <Select
+            clearable
+            options={state.plan_OPTIONS}
+            placeholder="选择一项"
+            renderOptionList={renderOptionList}
+          />
+        </FormItem>
+        <FormItem labelname="归属key" prop="gs_key">
+          <Select
+            clearable
+            options={state.key_OPTIONS}
+            placeholder="选择一项"
+            renderOptionList={renderOptionList}
+          />
+        </FormItem>
+      </>
+    );
+  };
+  return (
+    <div className="coupon-box">
+      <Form model={state.model} rules={rules} ref={form_el}>
+        <Card style={{ margin: "10px auto" }} title={state.setup1_title}>
+          {/* 是否显示两个字段 */}
+          {type === 1 ? plan_key_formEl() : null}
+
+          <FormItem labelname="批次名称" prop="name" id="name">
+            <Ipt
+              onChange={(e) => {
+                setState({ model: { name: e } });
+              }}
+              onClearItem={() => {
+                setState({ model: { name: "" } });
+              }}
+              value={state.model.name}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={20}
+              height={"36px"}
+              countShow={true}
+              width={"520px"}
+              alignment={"left"}
+            />
+          </FormItem>
+
+          <FormItem labelname="生效时间段" prop="date_time" id="date_time">
+            <DateRangePicker
+              className="zent-datepicker-plan"
+              showTime={{
+                format: "HH:mm:ss",
+                defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
+              }}
+              format="YYYY-MM-DD HH:mm:ss"
+              disabled={[state.disabled, false]}
+              value={state.model.date_time}
+              onChange={(e) => {
+                onChangeCombinedDate(e);
+              }}
+              disabledDate={onDisabledRange}
+            />
+          </FormItem>
+        </Card>
+      </Form>
+
+      <div className="step-btn-group">
+        <Button type="primary" onClick={() => submit()}>
+          提交审核
+        </Button>
+        <Button type="normal" onClick={() => onReturn()}>
+          取消
+        </Button>
+      </div>
+    </div>
+  );
+});
+
+export default UseCouponAddEdit;
diff --git a/src/components/UseCouponAddEdit/index copy.jsx b/src/components/UseCouponAddEdit/index copy.jsx
index db8091f6..c4ec4e2a 100644
--- a/src/components/UseCouponAddEdit/index copy.jsx	
+++ b/src/components/UseCouponAddEdit/index copy.jsx	
@@ -1,18 +1,21 @@
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { useSetState } from "ahooks";
+import { FixedSizeList } from "react-window";
 import {
   Card,
   DateRangePicker,
   Button,
   LayoutRow as Row,
   LayoutCol as Col,
-  LayoutGrid as Grid,
+  LayoutGrid as Grids,
+  Select,
 } from "zent";
 import moment from "moment";
 
 import Ipt from "@/components/input/main";
 import Form from "@/components/form/main";
 import FormItem from "@/components/form-item/main";
+import Grid from "@/components/gird/main.js";
 
 import "./style.less";
 
@@ -24,6 +27,83 @@ const tableColumn = [
     type: "normal",
     width: "auto",
   },
+  {
+    title: "商品名称",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "官方价",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "合同单价",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "库存数量",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "批次号",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "总预算",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "有效时间段",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "创建时间",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "类型",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "上游平台",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
+  {
+    title: "操作",
+    name: "key_code",
+    prop: "key_code",
+    type: "normal",
+    width: "auto",
+  },
 ];
 
 const rules = {
@@ -44,6 +124,23 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
     tableHeight: 500,
     page: 1,
     dataCount: 0,
+    rankoptions: [],
+    rank: [],
+    newGoodsBtnLoading: false,
+    newGoldLoading: false,
+    lodgingTable: true,
+    plan_OPTIONS: [
+      {
+        key: "1",
+        text: `plan 1`,
+      },
+    ],
+    key_OPTIONS: [
+      {
+        key: "1",
+        text: `key 1`,
+      },
+    ],
   });
 
   useImperativeHandle(ref, () => ({
@@ -69,52 +166,81 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
   const onPageChange = () => {};
   const onCountChange = () => {};
   const selectionFun = () => {};
-  const addCouponBtn = () => {};
-  const searchCallback = () => {};
+  const onRankChange = () => {};
+  const addProduct = () => {};
+  const renderOptionList = (options, renderOption) => {
+    return (
+      <FixedSizeList
+        height={8.5 * 32}
+        itemCount={options.length}
+        itemSize={32}
+        width={240}
+      >
+        {({ index, style }) => (
+          <div style={style}>{renderOption(options[index], index)}</div>
+        )}
+      </FixedSizeList>
+    );
+  };
   return (
     <div className="coupon-box">
       <Form model={state.model} rules={rules} ref={form_el}>
         <Card style={{ margin: "10px auto" }} title={state.setup1_title}>
-          <Form model={state.model} rules={rules} ref={form_el}>
-            <FormItem labelname="批次名称" prop="name">
-              <Ipt
-                onChange={(e) => {
-                  setState({ model: { name: e } });
-                }}
-                onClearItem={() => {
-                  setState({ model: { name: "" } });
-                }}
-                value={state.model.name}
-                placeholder={"请输入"}
-                labelWidth={"0px"}
-                maxLength={20}
-                height={"36px"}
-                countShow={false}
-                width={"520px"}
-                alignment={"left"}
-              />
-            </FormItem>
+          <FormItem labelname="归属计划" prop="gs_plan">
+            <Select
+              clearable
+              options={state.plan_OPTIONS}
+              placeholder="选择一项"
+              renderOptionList={renderOptionList}
+            />
+          </FormItem>
+          <FormItem labelname="归属key" prop="gs_key">
+            <Select
+              clearable
+              options={state.key_OPTIONS}
+              placeholder="选择一项"
+              renderOptionList={renderOptionList}
+            />
+          </FormItem>
 
-            <FormItem labelname="生效时间段" prop="date_time" id="date_time">
-              <DateRangePicker
-                className="zent-datepicker-plan"
-                showTime={{
-                  format: "HH:mm:ss",
-                  defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
-                }}
-                format="YYYY-MM-DD HH:mm:ss"
-                disabled={[state.disabled, false]}
-                value={state.model.date_time}
-                onChange={(e) => {
-                  onChangeCombinedDate(e);
-                }}
-                disabledDate={onDisabledRange}
-              />
-            </FormItem>
-          </Form>
+          <FormItem labelname="批次名称" prop="name">
+            <Ipt
+              onChange={(e) => {
+                setState({ model: { name: e } });
+              }}
+              onClearItem={() => {
+                setState({ model: { name: "" } });
+              }}
+              value={state.model.name}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={20}
+              height={"36px"}
+              countShow={true}
+              width={"520px"}
+              alignment={"left"}
+            />
+          </FormItem>
+
+          <FormItem labelname="生效时间段" prop="date_time" id="date_time">
+            <DateRangePicker
+              className="zent-datepicker-plan"
+              showTime={{
+                format: "HH:mm:ss",
+                defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
+              }}
+              format="YYYY-MM-DD HH:mm:ss"
+              disabled={[state.disabled, false]}
+              value={state.model.date_time}
+              onChange={(e) => {
+                onChangeCombinedDate(e);
+              }}
+              disabledDate={onDisabledRange}
+            />
+          </FormItem>
         </Card>
         <Card style={{ margin: "10px auto" }} title={state.setup2_title}>
-          <Grid>
+          <Grids>
             <Row>
               <Col span={3}>
                 <p>
@@ -161,12 +287,12 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
                     countShow={false}
                     width={"130px"}
                     alignment={"left"}
+                    unit="元"
                   />
-                  <span>元</span>
                 </div>
               </Col>
             </Row>
-          </Grid>
+          </Grids>
 
           <FormItem labelname="发放总量" prop="name">
             <Ipt
@@ -184,6 +310,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
               countShow={false}
               width={"520px"}
               alignment={"left"}
+              unit="个"
             />
           </FormItem>
 
@@ -203,29 +330,48 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
               countShow={false}
               width={"520px"}
               alignment={"left"}
+              unit="元"
             />
           </FormItem>
         </Card>
         <Card style={{ margin: "10px auto" }} title={state.setup3_title}>
-          <div className="query-box">
-            <Button type="primary" icon="plus" onClick={() => addCouponBtn()}>
-              新增优惠券
-            </Button>
-            <Ipt
-              onChange={(e) => setState({ key_word: e })}
-              value={state.key_word}
-              wordSearch={() => searchCallback()}
-              icon="search"
-              placeholder={"请输入批次号、名称、key批次名称、计划名称 进行搜索"}
-              countShow={false}
-              height={"36px"}
-              width={"260px"}
-              onClearItem={(e) =>
-                setState({ key_word: "", isQuery: !state.isQuery })
-              }
-              alignment={"left"}
-            />
-          </div>
+          <FormItem labelname="商品范围" prop="rank" id="rank">
+            <div className="goods-boxs">
+              <Select
+                options={state.rankoptions}
+                multiple
+                value={state.rank}
+                placeholder="选择一项"
+                width={405}
+                onChange={(e) => {
+                  onRankChange(e);
+                }}
+              />
+              <Button
+                type="primary"
+                style={{ marginLeft: "20px" }}
+                loading={state.newGoodsBtnLoading}
+                onClick={() => {
+                  addProduct("addProduct");
+                }}
+              >
+                新建商品
+              </Button>
+              <Button
+                type="primary"
+                style={{ marginLeft: "20px" }}
+                loading={state.newGoldLoading}
+                onClick={() => {
+                  addProduct("addKnockGold");
+                }}
+                disabled={
+                  !JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
+                }
+              >
+                新建立减金
+              </Button>
+            </div>
+          </FormItem>
 
           <Grid
             spliteColor={"#fff"}
diff --git a/src/components/UseCouponAddEdit/index.jsx b/src/components/UseCouponAddEdit/index.jsx
index 9bb6f2d4..199c321e 100644
--- a/src/components/UseCouponAddEdit/index.jsx
+++ b/src/components/UseCouponAddEdit/index.jsx
@@ -1,5 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { useSetState } from "ahooks";
+import { FixedSizeList } from "react-window";
 import {
   Card,
   DateRangePicker,
@@ -17,6 +18,7 @@ import FormItem from "@/components/form-item/main";
 import Grid from "@/components/gird/main.js";
 
 import "./style.less";
+import { useState } from "react";
 
 const tableColumn = [
   {
@@ -106,10 +108,15 @@ const tableColumn = [
 ];
 
 const rules = {
-  name: [{ type: "required", message: "请输入批次名称" }],
+  addNew: [{ type: "required", message: "请输入批次名称" }],
+  addNew1: [{ type: "required", message: "请输入批次名称" }],
 };
 
 const UseCouponAddEdit = forwardRef((props, ref) => {
+  /**
+   * type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
+   */
+  const { type = 0 } = props;
   const [state, setState] = useSetState({
     setup1_title: "基本信息",
     setup2_title: "发放规则",
@@ -117,7 +124,7 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
     disabled: false,
     model: {
       name: "",
-      time: "",
+      name1: "",
     },
     tableData: [],
     tableHeight: 500,
@@ -128,7 +135,20 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
     newGoodsBtnLoading: false,
     newGoldLoading: false,
     lodgingTable: true,
+    plan_OPTIONS: [
+      {
+        key: "1",
+        text: `plan 1`,
+      },
+    ],
+    key_OPTIONS: [
+      {
+        key: "1",
+        text: `key 1`,
+      },
+    ],
   });
+  const [stateData, setStateData] = useState({ addNew: "", addNew1: "" });
 
   useImperativeHandle(ref, () => ({
     submit: submit,
@@ -137,7 +157,11 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
   const form_el = useRef(null);
   const table_el = useRef(null);
 
-  const submit = () => {};
+  const submit = () => {
+    let el = form_el.current.validator();
+    console.log("el =>", el);
+  };
+
   const onReturn = () => {};
   const onChangeCombinedDate = () => {};
   const onDisabledRange = (date, type) => {
@@ -153,232 +177,86 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
   const onPageChange = () => {};
   const onCountChange = () => {};
   const selectionFun = () => {};
-  const addCouponBtn = () => {};
-  const searchCallback = () => {};
   const onRankChange = () => {};
   const addProduct = () => {};
+  const renderOptionList = (options, renderOption) => {
+    return (
+      <FixedSizeList
+        height={8.5 * 32}
+        itemCount={options.length}
+        itemSize={32}
+        width={240}
+      >
+        {({ index, style }) => (
+          <div style={style}>{renderOption(options[index], index)}</div>
+        )}
+      </FixedSizeList>
+    );
+  };
+  const plan_key_formEl = () => {
+    return (
+      <>
+        <FormItem labelname="归属计划" prop="gs_plan">
+          <Select
+            clearable
+            options={state.plan_OPTIONS}
+            placeholder="选择一项"
+            renderOptionList={renderOptionList}
+          />
+        </FormItem>
+        <FormItem labelname="归属key" prop="gs_key">
+          <Select
+            clearable
+            options={state.key_OPTIONS}
+            placeholder="选择一项"
+            renderOptionList={renderOptionList}
+          />
+        </FormItem>
+      </>
+    );
+  };
   return (
     <div className="coupon-box">
-      <Form model={state.model} rules={rules} ref={form_el}>
+      <Form model={stateData} rules={rules} ref={form_el}>
         <Card style={{ margin: "10px auto" }} title={state.setup1_title}>
-          <Form model={state.model} rules={rules} ref={form_el}>
-            <FormItem labelname="批次名称" prop="name">
-              <Ipt
-                onChange={(e) => {
-                  setState({ model: { name: e } });
-                }}
-                onClearItem={() => {
-                  setState({ model: { name: "" } });
-                }}
-                value={state.model.name}
-                placeholder={"请输入"}
-                labelWidth={"0px"}
-                maxLength={20}
-                height={"36px"}
-                countShow={true}
-                width={"520px"}
-                alignment={"left"}
-              />
-            </FormItem>
-
-            <FormItem labelname="生效时间段" prop="date_time" id="date_time">
-              <DateRangePicker
-                className="zent-datepicker-plan"
-                showTime={{
-                  format: "HH:mm:ss",
-                  defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
-                }}
-                format="YYYY-MM-DD HH:mm:ss"
-                disabled={[state.disabled, false]}
-                value={state.model.date_time}
-                onChange={(e) => {
-                  onChangeCombinedDate(e);
-                }}
-                disabledDate={onDisabledRange}
-              />
-            </FormItem>
-          </Form>
-        </Card>
-        <Card style={{ margin: "10px auto" }} title={state.setup2_title}>
-          <Grids>
-            <Row>
-              <Col span={3}>
-                <p>
-                  面额 <span className="mustwrite">*</span>
-                </p>
-              </Col>
-              <Col span={2}>
-                <div className="justify-box">
-                  <span>满</span>
-                  <Ipt
-                    onChange={(e) => {
-                      setState({ model: { name: e } });
-                    }}
-                    onClearItem={() => {
-                      setState({ model: { name: "" } });
-                    }}
-                    value={state.model.name}
-                    placeholder={"请输入"}
-                    labelWidth={"0px"}
-                    maxLength={20}
-                    height={"36px"}
-                    countShow={false}
-                    width={"130px"}
-                    alignment={"left"}
-                  />
-                </div>
-              </Col>
-
-              <Col span={3}>
-                <div className="justify-box">
-                  <span style={{ paddingRight: "10px" }}>减</span>
-                  <Ipt
-                    onChange={(e) => {
-                      setState({ model: { name: e } });
-                    }}
-                    onClearItem={() => {
-                      setState({ model: { name: "" } });
-                    }}
-                    value={state.model.name}
-                    placeholder={"请输入"}
-                    labelWidth={"0px"}
-                    maxLength={20}
-                    height={"36px"}
-                    countShow={false}
-                    width={"130px"}
-                    alignment={"left"}
-                    unit="元"
-                  />
-                </div>
-              </Col>
-            </Row>
-          </Grids>
-
-          <FormItem labelname="发放总量" prop="name">
+          <FormItem labelname="批次名称" prop="addNew" id="addNew">
             <Ipt
-              onChange={(e) => {
-                setState({ model: { name: e } });
+              onChange={(value) => {
+                setStateData({ ...stateData, addNew: value });
               }}
               onClearItem={() => {
-                setState({ model: { name: "" } });
+                setStateData({ ...stateData, addNew: "" });
               }}
-              value={state.model.name}
+              value={stateData.addNew}
               placeholder={"请输入"}
               labelWidth={"0px"}
               maxLength={20}
               height={"36px"}
-              countShow={false}
+              countShow={true}
               width={"520px"}
               alignment={"left"}
-              unit="个"
             />
           </FormItem>
 
-          <FormItem labelname="总预算" prop="name">
+          <FormItem labelname="批次名称" prop="addNew1" id="addNew1">
             <Ipt
-              onChange={(e) => {
-                setState({ model: { name: e } });
+              onChange={(value) => {
+                setStateData({ ...stateData, addNew1: value });
               }}
               onClearItem={() => {
-                setState({ model: { name: "" } });
+                setStateData({ ...stateData, addNew1: "" });
               }}
-              value={state.model.name}
+              value={stateData.addNew1}
               placeholder={"请输入"}
               labelWidth={"0px"}
               maxLength={20}
               height={"36px"}
-              countShow={false}
+              countShow={true}
               width={"520px"}
               alignment={"left"}
-              unit="元"
             />
           </FormItem>
         </Card>
-        <Card style={{ margin: "10px auto" }} title={state.setup3_title}>
-          <FormItem labelname="商品范围" prop="rank" id="rank">
-            <div className="goods-boxs">
-              <Select
-                options={state.rankoptions}
-                multiple
-                value={state.rank}
-                placeholder="选择一项"
-                width={405}
-                onChange={(e) => {
-                  onRankChange(e);
-                }}
-              />
-              <Button
-                type="primary"
-                style={{ marginLeft: "20px" }}
-                loading={state.newGoodsBtnLoading}
-                onClick={() => {
-                  addProduct("addProduct");
-                }}
-              >
-                新建商品
-              </Button>
-              <Button
-                type="primary"
-                style={{ marginLeft: "20px" }}
-                loading={state.newGoldLoading}
-                onClick={() => {
-                  addProduct("addKnockGold");
-                }}
-                disabled={
-                  !JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
-                }
-              >
-                新建立减金
-              </Button>
-
-              <Ipt
-                onChange={(e) => setState({ key_word: e })}
-                value={state.key_word}
-                wordSearch={() => searchCallback()}
-                icon="search"
-                placeholder={
-                  "请输入批次号、名称、key批次名称、计划名称 进行搜索"
-                }
-                countShow={false}
-                height={"36px"}
-                width={"260px"}
-                onClearItem={(e) =>
-                  setState({ key_word: "", isQuery: !state.isQuery })
-                }
-                alignment={"left"}
-              />
-            </div>
-          </FormItem>
-
-          <Grid
-            spliteColor={"#fff"}
-            tableData={state.tableData}
-            Column={tableColumn}
-            countbarVisible={false}
-            maxheight={state.tableHeight}
-            isSwitch={false}
-            page={state.page}
-            ref={table_el}
-            dataCount={state.dataCount}
-            pageChange={(e) => onPageChange(e)}
-            emptyText={
-              state.lodgingTable
-                ? "抱歉，暂无相关数据记录"
-                : "查询 请输入【分销商】或【计划名称】或【key】进行查询"
-            }
-            countChange={(e) => onCountChange(e)}
-            checkChange={(data) => selectionFun(data)}
-            ComponentHandler={(com, rowData) => {
-              if (com == "dates") {
-                return (
-                  <span>
-                    {rowData.begin_time} 至 {rowData.end_time}
-                  </span>
-                );
-              }
-            }}
-          />
-        </Card>
       </Form>
 
       <div className="step-btn-group">
diff --git a/src/pages/coupon/addEdit/index.jsx b/src/pages/coupon/addEdit/index.jsx
index e3610a89..d7f61c2d 100644
--- a/src/pages/coupon/addEdit/index.jsx
+++ b/src/pages/coupon/addEdit/index.jsx
@@ -6,7 +6,7 @@ import UseCouponAddEdit from "@/components/UseCouponAddEdit";
 const CouponAddEdit = () => {
   return (
     <div className="coupon-add-edit">
-      <UseCouponAddEdit></UseCouponAddEdit>
+      <UseCouponAddEdit type={0}></UseCouponAddEdit>
     </div>
   );
 };