diff --git a/src/pages/plan/keysList/list.js b/src/pages/plan/keysList/list.js
new file mode 100644
index 00000000..d5d21211
--- /dev/null
+++ b/src/pages/plan/keysList/list.js
@@ -0,0 +1,803 @@
+/* key列表 */
+import React from 'react'
+import { Button, Alert } from 'zent'
+import './list.less'
+import {
+  Input,
+  RadioGroup,
+  CombinedDateRangePicker,
+  Radio,
+  Notify,
+  Switch,
+  Dropdown,
+  DropdownPosition,
+  DropdownClickTrigger,
+  Icon,
+  MenuItem,
+  DropdownContent,
+  Menu
+} from 'zent'
+import Grid from '@/components/gird/main.js'
+import TabPage from '@/components/tabPage/main.js'
+import {
+  keyCancel,
+  keyUsage,
+  keyBatchUsage,
+  keyBatchCancel,
+  handelResponse,
+  getkeyDetailList
+} from '@/assets/api.js'
+import _ from 'lodash'
+import menu from '@/assets/enum.js'
+
+import UseUploadExcel from '@/components/UseUploadExcel'
+import KeysFind from '@/components/keysFind'
+export default class acclist extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      dataCount: 0,
+      page: 1,
+      limit: 10,
+      tabList: [
+        { title: '全部', index: 0 },
+        { title: '可使用', index: 1 },
+        { title: '已使用', index: 2 },
+        { title: '已完结', index: 3 },
+        { title: '已作废', index: 4 }
+      ],
+      distdata: [{ title: '士大夫大师傅' }],
+      filterList: [
+        {
+          id: 0,
+          label: '状态',
+          prop: 'status',
+          menuList: [
+            { id: 999, name: '全部' },
+            { id: 0, name: '创建中' },
+            { id: 2, name: '审核中' },
+            { id: 3, name: '待生效' },
+            { id: 4, name: '进行中' },
+            { id: 5, name: '暂停中' },
+            { id: 6, name: '已完结' }
+          ]
+        }
+      ],
+      tableHeight: 500,
+      menuList: [{ id: 0, name: '状态', check: false }],
+      phone_list: [],
+      email_list: [],
+      phone: '',
+      email: '',
+      email_radio: -1,
+      phone_radio: -1,
+      search: '',
+      audit_visible: false,
+
+      cur_item: null,
+      selectiondata: [],
+      plan_id: 0,
+      grantTotal: 0,
+      surplusTotal: 0,
+      usageTotal: 0,
+      silentTotal: 0,
+      receive_total: 0,
+      usage_total: 0,
+      outdateTotal: 0,
+      invalidTotal: 0,
+      multiple: true,
+      dialogTitle: '',
+      bachVisible: false,
+      conditionalQuery: {} //条件查询
+    }
+  }
+
+  //分页
+  onPageChange(e) {
+    this.setState({ page: e })
+
+    setTimeout(() => {
+      this.getpageFn()
+    }, 0)
+  }
+
+  componentDidMount(e) {}
+  componentWillMount() {
+    this.setState({ tableHeight: window.innerHeight - 430 })
+  }
+
+  getKeyCodeList(data) {
+    console.log(data, this.state.conditionalQuery)
+    let queryParams = _.omitBy(
+      { ...data, ...this.state.conditionalQuery },
+      (value) => {
+        return _.isNaN(value) || _.isNil(value)
+      }
+    )
+    let id = sessionStorage.getItem('key_batch_id')
+
+    getkeyDetailList(id, queryParams).then((res) => {
+      handelResponse(
+        res,
+        (req, msg) => {
+          this.setState({ distdata: req.data })
+          this.setState({ dataCount: req.total })
+        },
+        (err) => {}
+      )
+    })
+  }
+  onCountChange(e) {
+    this.setState({ page: 1, limit: e })
+    setTimeout(() => {
+      this.getpageFn()
+    }, 0)
+  }
+  getpageFn() {
+    let data = {
+      page: this.state.page,
+      limit: this.state.limit,
+      key: this.state.key
+    }
+    console.log(155, this.state.status)
+    let status = this.state.status > 0 ? this.state.status : null
+    if (status) {
+      data.status = status
+    }
+    this.getKeyCodeList(data)
+  }
+
+  //清空
+  clearFn() {
+    this.refs.plan_list.allChecked(false)
+    this.setState({ multiple: true })
+    this.setState({ selectiondata: [] })
+  }
+  //选中表格的选框
+  selection(selection) {
+    if (selection.length > 0) {
+      this.setState({ multiple: false })
+    } else {
+      this.setState({ multiple: true })
+    }
+    // this.setState({multiple:false})
+
+    this.setState({ selectiondata: selection })
+    let grantTotal = 0
+    let surplusTotal = 0
+    let usageTotal = 0
+    let receive_total = 0
+    let usage_total = 0
+    let silent_total = 0
+    let invalidTotal = 0
+    let outdateTotal = 0
+    selection.forEach((item) => {
+      grantTotal += Number(item.total)
+      surplusTotal += Number(item.residue)
+      usageTotal += Number(item.usage)
+      outdateTotal += Number(item.overdue)
+      invalidTotal += Number(item.invalid)
+
+      // receive_total+=Number(item.receive_total);
+      usage_total += Number(item.usage_total)
+      silent_total += Number(item.silent_total)
+    })
+    this.setState({
+      grantTotal,
+      usageTotal,
+      invalidTotal,
+      outdateTotal,
+      surplusTotal
+    })
+  }
+
+  // 监听组件内部状态的变化:
+  componentDidUpdate(prevProps, prevState) {
+    // 参数分别为改变之前的数据状态对象
+    if (prevState.search != this.state.search && !this.state.search) {
+      this.iptsureFn()
+    }
+  }
+
+  iptsureFn() {
+    let status = this.state.status > 0 ? this.state.status : null
+    this.setState({ page: 1 })
+    this.setState({ limit: 10 })
+    let data = {
+      page: 1,
+      limit: 10,
+      key: this.state.search
+    }
+    if (status) {
+      data.status = status
+    }
+    if (status) {
+      data.status = status
+    }
+    this.getKeyCodeList(data)
+  }
+
+  onFilterClose(prop) {
+    let data = {}
+    data[prop] = null
+
+    this.setState(data)
+
+    let params = {
+      page: 1,
+      limit: 10,
+      key: this.state.search
+    }
+    this.getKeyCodeList(params)
+  }
+
+  tabFn(e) {
+    let status = e > 0 ? e : null
+    this.setState({ status: e })
+    this.setState({ search: '' })
+    this.setState({ page: 1 })
+    this.setState({ limit: 10 })
+    let params = {
+      page: 1,
+      limit: 10,
+      status: status
+    }
+    this.getKeyCodeList(params)
+  }
+  menuItemClick(e, key, rowData) {
+    if (key == 1) {
+      let formdata = {
+        key: rowData.key
+      }
+
+      keyUsage(formdata).then((res) => {
+        handelResponse(
+          res,
+          (req, msg) => {
+            let data = {
+              page: 1,
+              limit: 10
+            }
+            this.setState({ page: 1, limit: 10 })
+            this.getKeyCodeList(data)
+            Notify.success('标记为使用成功')
+          },
+          (err) => {
+            Notify.error(err)
+          }
+        )
+      })
+    }
+    if (key == 2) {
+      let formdata = {
+        key: rowData.key
+      }
+      keyCancel(formdata).then((res) => {
+        handelResponse(
+          res,
+          (req, msg) => {
+            let data = {
+              page: 1,
+              limit: 10
+            }
+            this.setState({ page: 1, limit: 10 })
+            this.getKeyCodeList(data)
+            Notify.success('作废成功')
+          },
+          (err) => {
+            Notify.error(err)
+          }
+        )
+      })
+    }
+    if (key == 3) {
+      sessionStorage.setItem('keyCode', rowData.key)
+      window.open('#/home/key-log')
+    }
+  }
+  multipleCancel() {
+    console.log(this.state.selectiondata)
+    let keys = _.map(this.state.selectiondata, (item) => {
+      return item.key
+    })
+
+    let formdata = {
+      keys: keys
+    }
+
+    keyBatchCancel(formdata).then((res) => {
+      handelResponse(
+        res,
+        (req, msg) => {
+          Notify.success('批量作废成功')
+          let data = {
+            page: 1,
+            limit: 10
+          }
+          this.setState({ page: 1, limit: 10 })
+          this.clearFn()
+          this.getKeyCodeList(data)
+        },
+        (err) => {
+          Notify.error(err)
+        }
+      )
+    })
+  }
+  multipleUse() {
+    let keys = _.map(this.state.selectiondata, (item) => {
+      return item.key
+    })
+
+    let formdata = {
+      keys: keys
+    }
+
+    keyBatchUsage(formdata).then((res) => {
+      handelResponse(
+        res,
+        (req, msg) => {
+          Notify.success('批量标记为使用成功')
+          let data = {
+            page: 1,
+            limit: 10
+          }
+          this.setState({ page: 1, limit: 10 })
+          this.clearFn()
+          this.getKeyCodeList(data)
+        },
+        (err) => {
+          Notify.error(err)
+        }
+      )
+    })
+  }
+
+  /**
+   * 批量上传操作
+   */
+
+  // 查询
+  bachUploadQuery() {
+    this.setState({ dialogTitle: '批量上传查询' })
+    this.setState({ bachVisible: true })
+  }
+
+  // 作废
+  bachUploadVoid() {}
+
+  // 标记已使用
+  bachUploadTagUse() {}
+
+  // 取消安妮
+  bachOnClose() {
+    this.setState({ bachVisible: false })
+  }
+
+  render() {
+    const { current, pageSize } = this.state
+    const Column = [
+      {
+        title: 'key码',
+        name: 'key_code',
+        prop: 'key_code',
+        type: 'normal',
+        width: 'auto'
+      },
+      {
+        title: '归属营销计划',
+        width: 'auto',
+        type: 'normal',
+        prop: 'plan_title',
+        name: 'plan_title'
+      },
+
+      {
+        title: '状态',
+        prop: 'status',
+        name: 'status',
+        width: 'auto',
+        type: 'slot'
+      },
+      {
+        title: '操作',
+        name: 'opearo',
+        prop: 'opearo',
+        type: 'slot',
+        width: 'auto'
+      },
+      {
+        title: '发放总数',
+        prop: 'total',
+        name: 'total',
+        width: 'auto',
+        type: 'normal'
+      },
+      {
+        title: '剩余总数',
+        prop: 'residue',
+        name: 'residue',
+        width: 'auto',
+        type: 'normal'
+      },
+      {
+        title: '使用总数',
+        name: 'usage',
+        prop: 'usage',
+        type: 'normal',
+        width: 'auto'
+      },
+      {
+        title: '失效总数',
+        name: 'overdue',
+        prop: 'overdue',
+        type: 'normal',
+        width: 'auto'
+      },
+      {
+        title: '作废总数',
+        name: 'invalid',
+        prop: 'invalid',
+        type: 'normal',
+        width: 'auto'
+      },
+      {
+        title: '已完结总数',
+        name: 'end',
+        prop: 'end',
+        type: 'normal',
+        width: 'auto'
+      },
+      {
+        title: '更新时间',
+        name: 'update_time',
+        prop: 'update_time',
+        type: 'normal',
+        width: 'auto'
+      }
+    ]
+    const date = (
+      <CombinedDateRangePicker
+        className='zent-datepicker-demo'
+        value={this.state.combinedValue}
+        showTime={{
+          format: 'HH:mm:ss',
+          defaultTime: ['00:00:00', '23:59:59']
+        }}
+        format='YYYY-MM-DD HH:mm:ss'
+        onChange={this.onChangeCombinedDate}
+      />
+    )
+    return (
+      <div id='dislist'>
+        <TabPage tabs={this.state.tabList} tabChange={this.tabFn.bind(this)}>
+          <div className='distable dflexj' style={{ paddingBottom: 0 }}>
+            <KeysFind
+              onQuery={(va) => {
+                this.setState({ conditionalQuery: va })
+                setTimeout(() => {
+                  this.iptsureFn(va)
+                }, 500)
+              }}
+            />
+          </div>
+          <div className='distable dflexj'>
+            <div>
+              {/* 批量上传操作 */}
+              <Button onClick={this.bachUploadQuery.bind(this)}>
+                批量上传查询
+              </Button>
+              <Button
+                style={{ border: '1px solid red', color: 'red' }}
+                onClick={this.bachUploadVoid.bind(this)}>
+                批量上传作废
+              </Button>
+              <Button
+                style={{ border: '1px solid red', color: 'red' }}
+                onClick={this.bachUploadTagUse.bind(this)}>
+                批量上传标记成已使用
+              </Button>
+
+              <Button
+                onClick={() => {
+                  this.multipleCancel()
+                }}
+                disabled={this.state.multiple}>
+                批量作废
+              </Button>
+              <Button
+                onClick={() => {
+                  this.multipleUse()
+                }}
+                disabled={this.state.multiple}>
+                批量标记为已使用
+              </Button>
+            </div>
+
+            {/* <Button type="info">批量操作</Button> */}
+            {/* <Ipt
+              onChange={(e) => this.setState({ search: e })}
+              value={this.state.search}
+              wordSearch={this.iptsureFn.bind(this)}
+              icon="search"
+              placeholder={"请完整输入key"}
+              countShow={false}
+              height={"36px"}
+              width={"260px"}
+              onClearItem={(e) => {
+                this.setState({ search: "" });
+                let data = {
+                  page: 1,
+                  limit: 10,
+                };
+                this.getKeyCodeList(data);
+              }}
+              alignment={"left"}
+            /> */}
+          </div>
+          <div className='code-table'>
+            {this.state.selectiondata.length > 0 ? (
+              <Alert
+                type='info'
+                extraContent={
+                  <Button type='primary' onClick={this.clearFn.bind(this)}>
+                    清空
+                  </Button>
+                }>
+                已选择
+                <font color='#296bef' style={{ fontWeight: 'bold' }}>
+                  {this.state.selectiondata.length}
+                </font>
+                发放key总数:{this.state.grantTotal},剩余key总数:
+                {this.state.surplusTotal},已使用总数:{this.state.usageTotal}
+                ,已过期总数:{this.state.outdateTotal},已作废总数:
+                {this.state.invalidTotal}
+              </Alert>
+            ) : null}
+            <Grid
+              spliteColor={'#fff'}
+              tableData={this.state.distdata}
+              Column={Column}
+              countbarVisible={false}
+              maxheight={this.state.tableHeight}
+              isSwitch={false}
+              page={this.state.page}
+              ref='plan_list'
+              dataCount={this.state.dataCount}
+              pageChange={(e) => {
+                this.onPageChange(e)
+              }}
+              countChange={(e) => {
+                this.onCountChange(e)
+              }}
+              checkChange={this.selection.bind(this)}
+              ComponentHandler={(com, rowData) => {
+                if (com == 'dates') {
+                  return (
+                    <span>
+                      {rowData.begin_time} 至 {rowData.end_time}
+                    </span>
+                  )
+                }
+
+                if (com == 'title') {
+                  return (
+                    <span
+                      className='grid-link'
+                      onClick={(e) => {
+                        this.linkTo(rowData)
+                      }}>
+                      {rowData.title}
+                    </span>
+                  )
+                }
+                if (com == 'switch') {
+                  return (
+                    <Switch
+                      size='small'
+                      checked={rowData.open == 1}
+                      disabled={!rowData.is_open}
+                      onChange={(e) => {
+                        this.onSwitchChange(e, rowData)
+                      }}></Switch>
+                  )
+                }
+                if (com == 'status') {
+                  return (
+                    <p className='dflexa'>
+                      <span>
+                        <font
+                          className='icon'
+                          style={{
+                            background: menu.keyStatusBg(
+                              parseInt(rowData.status)
+                            )
+                          }}></font>
+                        {rowData.status_text}
+                      </span>
+                    </p>
+                  )
+                }
+                if (com == 'opearo') {
+                  let str = null
+
+                  if (rowData.status == 1) {
+                    str = (
+                      <span>
+                        <a
+                          className='grid-link'
+                          style={{ paddingLeft: '2px', color: '#d8dbdd' }}>
+                          详情
+                        </a>
+                        <Dropdown position={DropdownPosition.RightTop}>
+                          <DropdownClickTrigger>
+                            <div className='linkmore' onClick={(e) => {}}>
+                              {' '}
+                              更多 <Icon type={'down'} />{' '}
+                            </div>
+                          </DropdownClickTrigger>
+                          <DropdownContent>
+                            <Menu
+                              onClick={(e, key) =>
+                                this.menuItemClick(e, key, rowData)
+                              }>
+                              <MenuItem key='1'>标记成已使用</MenuItem>
+                              <MenuItem key='2'>作废</MenuItem>
+                              <MenuItem key='3'>日志</MenuItem>
+                            </Menu>
+                          </DropdownContent>
+                        </Dropdown>
+                      </span>
+                    )
+                  } else {
+                    str = (
+                      <span>
+                        <a
+                          className='grid-link'
+                          style={{ paddingLeft: '2px', color: '#d8dbdd' }}>
+                          详情
+                        </a>
+                        <Dropdown position={DropdownPosition.RightTop}>
+                          <DropdownClickTrigger>
+                            <div className='linkmore' onClick={(e) => {}}>
+                              {' '}
+                              更多 <Icon type={'down'} />{' '}
+                            </div>
+                          </DropdownClickTrigger>
+                          <DropdownContent>
+                            <Menu
+                              onClick={(e, key) =>
+                                this.menuItemClick(e, key, rowData)
+                              }>
+                              <MenuItem key='1' disabled>
+                                标记成已使用
+                              </MenuItem>
+                              <MenuItem key='2' disabled={rowData.status != 2}>
+                                作废
+                              </MenuItem>
+                              <MenuItem key='3'>日志</MenuItem>
+                            </Menu>
+                          </DropdownContent>
+                        </Dropdown>
+                      </span>
+                    )
+                  }
+                  return str
+                }
+              }}
+            />
+
+            {this.state.audit_visible ? (
+              <div>
+                <div className='modal'> </div>
+                <div className='audit-box'>
+                  <Icon
+                    type='close'
+                    className='audit-close'
+                    onClick={(e) => {
+                      this.cancel(e)
+                    }}
+                  />
+                  <div className='audit-box-title'>发送</div>
+                  <div className='audit-box-question'>
+                    是否立即发送key以及解压密码?
+                  </div>
+                  <div className='phone-group'>
+                    <div>接收手机号</div>
+                    <div className='phone-list'>
+                      <RadioGroup
+                        value={this.state.phone_radio}
+                        isValueEqual={this.isValueEqual}
+                        onChange={(e) => {
+                          this.onPhoneChange(e)
+                        }}>
+                        {this.state.phone_list.map((item, index) => {
+                          return (
+                            <Radio
+                              value={index}
+                              onClick={() => {
+                                if (
+                                  item ==
+                                  this.state.phone_list[this.state.phone_radio]
+                                ) {
+                                  this.setState({ phone_radio: -1 })
+                                }
+                              }}>
+                              {item}
+                            </Radio>
+                          )
+                        })}
+                      </RadioGroup>
+                    </div>
+                  </div>
+                  <div className='email-group'>
+                    <div>接收邮箱</div>
+                    <div className='email-list'>
+                      <RadioGroup
+                        value={this.state.email_radio}
+                        isValueEqual={this.isValueEqual}
+                        onChange={(e) => {
+                          this.onEmailChange(e)
+                        }}>
+                        {this.state.email_list.map((item, index) => {
+                          return (
+                            <Radio
+                              value={index}
+                              onClick={() => {
+                                if (
+                                  item ==
+                                  this.state.email_list[this.state.email_radio]
+                                ) {
+                                  this.setState({ email_radio: -1 })
+                                }
+                              }}>
+                              {item}
+                            </Radio>
+                          )
+                        })}
+                      </RadioGroup>
+                    </div>
+                  </div>
+                  <div className='input-group'>
+                    <Input
+                      placeholder='请输入接收手机号'
+                      onChange={this.phoneChange}
+                      disabled={this.state.phone_radio > -1}></Input>
+                  </div>
+                  <div className='input-group'>
+                    <Input
+                      placeholder='请输入接收邮箱'
+                      onChange={this.emailChange}
+                      disabled={this.state.email_radio > -1}></Input>
+                  </div>
+
+                  <div className='audit-btn-group'>
+                    <Button
+                      onClick={(e) => {
+                        this.cancel(e)
+                      }}>
+                      取消
+                    </Button>
+                    <Button
+                      type='primary'
+                      onClick={(e) => {
+                        this.send(e)
+                      }}>
+                      发送
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </TabPage>
+
+        {/* 批量上传 */}
+        <UseUploadExcel
+          title={this.state.dialogTitle}
+          visible={this.state.bachVisible}
+          onClose={this.bachOnClose.bind(this)}></UseUploadExcel>
+      </div>
+    )
+  }
+}
diff --git a/src/pages/plan/keysList/list.less b/src/pages/plan/keysList/list.less
new file mode 100644
index 00000000..afe4f962
--- /dev/null
+++ b/src/pages/plan/keysList/list.less
@@ -0,0 +1,7 @@
+.code-table {
+    border-top: 1px solid #e0e0e0;
+    padding-bottom: 24px;
+}
+.zent-btn-disabled{
+	background-color: #FFFFFF !important;
+}
\ No newline at end of file