diff --git a/src/pages/plan/key/detail/list.js b/src/pages/plan/key/detail/list.js index d4b6ba8b..0b679479 100644 --- a/src/pages/plan/key/detail/list.js +++ b/src/pages/plan/key/detail/list.js @@ -1,7 +1,7 @@ /* key列表 */ -import React from "react"; -import { Button, Alert } from "zent"; -import "./list.less"; +import React from 'react' +import { Button, Alert } from 'zent' +import './list.less' import { Input, RadioGroup, @@ -15,21 +15,21 @@ import { Icon, MenuItem, DropdownContent, - Menu, -} from "zent"; -import Ipt from "../../../../components/input/main"; -import Grid from "../../../../components/gird/main.js"; -import TabPage from "../../../../components/tabPage/main.js"; + Menu +} from 'zent' +import Ipt from '../../../../components/input/main' +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"; + getkeyDetailList +} from '../../../../assets/api.js' +import _ from 'lodash' +import menu from '../../../../assets/enum.js' // // @@ -37,44 +37,44 @@ import menu from "../../../../assets/enum.js"; // export default class acclist extends React.Component { constructor(props) { - super(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 }, + { title: '全部', index: 0 }, + { title: '可使用', index: 1 }, + { title: '已使用', index: 2 }, + { title: '已完结', index: 3 }, + { title: '已作废', index: 4 } ], - distdata: [{ title: "士大夫大师傅" }], + distdata: [{ title: '士大夫大师傅' }], filterList: [ { id: 0, - label: "状态", - prop: "status", + 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: "已完结" }, - ], - }, + { 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 }], + menuList: [{ id: 0, name: '状态', check: false }], phone_list: [], email_list: [], - phone: "", - email: "", + phone: '', + email: '', email_radio: -1, phone_radio: -1, - search: "", + search: '', audit_visible: false, cur_item: null, @@ -88,163 +88,160 @@ export default class acclist extends React.Component { usage_total: 0, outdateTotal: 0, invalidTotal: 0, - multiple: true, - }; + multiple: true + } } //分页 onPageChange(e) { - this.setState({ page: e }); + this.setState({ page: e }) setTimeout(() => { - this.getpageFn(); - }, 0); + this.getpageFn() + }, 0) } componentDidMount(e) {} componentWillMount() { - this.setState({ tableHeight: window.innerHeight - 430 }); + this.setState({ tableHeight: window.innerHeight - 430 }) } getKeyCodeList(data) { let queryParams = _.omitBy(data, (value) => { - return _.isNaN(value) || _.isNil(value); - }); - let id = sessionStorage.getItem("key_batch_id"); + 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 }); + this.setState({ distdata: req.data }) + this.setState({ dataCount: req.total }) }, (err) => {} - ); - }); + ) + }) } onCountChange(e) { - this.setState({ page: 1, limit: e }); + this.setState({ page: 1, limit: e }) setTimeout(() => { - this.getpageFn(); - }, 0); + 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; + key: this.state.key } - this.getKeyCodeList(data); + 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: [] }); + this.refs.plan_list.allChecked(false) + this.setState({ multiple: true }) + this.setState({ selectiondata: [] }) } //选中表格的选框 selection(selection) { if (selection.length > 0) { - this.setState({ multiple: false }); + this.setState({ multiple: false }) } else { - this.setState({ multiple: true }); + 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; + 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); + 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); - }); + usage_total += Number(item.usage_total) + silent_total += Number(item.silent_total) + }) this.setState({ grantTotal, usageTotal, invalidTotal, outdateTotal, - surplusTotal, - }); + surplusTotal + }) } // 监听组件内部状态的变化: componentDidUpdate(prevProps, prevState) { // 参数分别为改变之前的数据状态对象 if (prevState.search != this.state.search && !this.state.search) { - this.iptsureFn(); + this.iptsureFn() } } iptsureFn(e) { - let status = this.state.status > 0 ? this.state.status : null; - this.setState({ page: 1 }); - this.setState({ limit: 10 }); + 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; + key: this.state.search } if (status) { - data.status = status; + data.status = status } - this.getKeyCodeList(data); + this.getKeyCodeList(data) } onFilterClose(prop) { - let data = {}; - data[prop] = null; + let data = {} + data[prop] = null - this.setState(data); + this.setState(data) let params = { page: 1, limit: 10, - key: this.state.search, - }; - this.getKeyCodeList(params); + 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 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); + status: status + } + this.getKeyCodeList(params) } menuItemClick(e, key, rowData) { if (key == 1) { let formdata = { - key: rowData.key, - }; + key: rowData.key + } keyUsage(formdata).then((res) => { handelResponse( @@ -252,44 +249,44 @@ export default class acclist extends React.Component { (req, msg) => { let data = { page: 1, - limit: 10, - }; - this.setState({ page: 1, limit: 10 }); - this.getKeyCodeList(data); - Notify.success("标记为使用成功"); + limit: 10 + } + this.setState({ page: 1, limit: 10 }) + this.getKeyCodeList(data) + Notify.success('标记为使用成功') }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); + ) + }) } if (key == 2) { let formdata = { - key: rowData.key, - }; + 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("作废成功"); + limit: 10 + } + this.setState({ page: 1, limit: 10 }) + this.getKeyCodeList(data) + Notify.success('作废成功') }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); + ) + }) } if (key == 3) { - sessionStorage.setItem("keyCode", rowData.key); + sessionStorage.setItem('keyCode', rowData.key) // this.props.history.push("/home/key-log"); - window.open("#/home/key-log"); + window.open('#/home/key-log') // sessionStorage.setItem("pathname2", "/home/key-log"); // let cur_nav = sessionStorage.getItem("breakchangenav"); @@ -304,194 +301,210 @@ export default class acclist extends React.Component { } } multipleCancel() { - console.log(this.state.selectiondata); + console.log(this.state.selectiondata) let keys = _.map(this.state.selectiondata, (item) => { - return item.key; - }); + return item.key + }) let formdata = { - keys: keys, - }; + keys: keys + } keyBatchCancel(formdata).then((res) => { handelResponse( res, (req, msg) => { - Notify.success("批量作废成功"); + Notify.success('批量作废成功') let data = { page: 1, - limit: 10, - }; - this.setState({ page: 1, limit: 10 }); - this.clearFn(); - this.getKeyCodeList(data); + limit: 10 + } + this.setState({ page: 1, limit: 10 }) + this.clearFn() + this.getKeyCodeList(data) }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); + ) + }) } multipleUse() { let keys = _.map(this.state.selectiondata, (item) => { - return item.key; - }); + return item.key + }) let formdata = { - keys: keys, - }; + keys: keys + } keyBatchUsage(formdata).then((res) => { handelResponse( res, (req, msg) => { - Notify.success("批量标记为使用成功"); + Notify.success('批量标记为使用成功') let data = { page: 1, - limit: 10, - }; - this.setState({ page: 1, limit: 10 }); - this.clearFn(); - this.getKeyCodeList(data); + limit: 10 + } + this.setState({ page: 1, limit: 10 }) + this.clearFn() + this.getKeyCodeList(data) }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); + ) + }) } render() { - const { current, pageSize } = this.state; + const { current, pageSize } = this.state const Column = [ { - title: "key码", - name: "key_code", - prop: "key_code", - type: "normal", - width: "auto", + title: 'key码', + name: 'key_code', + prop: 'key_code', + type: 'normal', + width: 'auto' }, { - title: "归属营销计划", - width: "auto", - type: "normal", - prop: "plan_title", - name: "plan_title", + title: '归属营销计划', + width: 'auto', + type: 'normal', + prop: 'plan_title', + name: 'plan_title' }, { - title: "状态", - prop: "status", - name: "status", - width: "auto", - type: "slot", + title: '状态', + prop: 'status', + name: 'status', + width: 'auto', + type: 'slot' }, { - title: "操作", - name: "opearo", - prop: "opearo", - type: "slot", - width: "auto", + title: '操作', + name: 'opearo', + prop: 'opearo', + type: 'slot', + width: 'auto' }, { - title: "发放总数", - prop: "total", - name: "total", - width: "auto", - type: "normal", + title: '发放总数', + prop: 'total', + name: 'total', + width: 'auto', + type: 'normal' }, { - title: "剩余总数", - prop: "residue", - name: "residue", - width: "auto", - type: "normal", + title: '剩余总数', + prop: 'residue', + name: 'residue', + width: 'auto', + type: 'normal' }, { - title: "使用总数", - name: "usage", - prop: "usage", - type: "normal", - width: "auto", + title: '使用总数', + name: 'usage', + prop: 'usage', + type: 'normal', + width: 'auto' }, { - title: "失效总数", - name: "overdue", - prop: "overdue", - type: "normal", - width: "auto", + title: '失效总数', + name: 'overdue', + prop: 'overdue', + type: 'normal', + width: 'auto' }, { - title: "作废总数", - name: "invalid", - prop: "invalid", - type: "normal", - width: "auto", + title: '作废总数', + name: 'invalid', + prop: 'invalid', + type: 'normal', + width: 'auto' }, { - title: "已完结总数", - name: "end", - prop: "end", - type: "normal", - width: "auto", + title: '已完结总数', + name: 'end', + prop: 'end', + type: 'normal', + width: 'auto' }, { - title: "更新时间", - name: "update_time", - prop: "update_time", - type: "normal", - width: "auto", - }, - ]; + title: '更新时间', + name: 'update_time', + prop: 'update_time', + type: 'normal', + width: 'auto' + } + ] const date = ( - ); + ) return ( -
+
-
+
+
+ + +
+ {/* */} this.setState({ search: e })} value={this.state.search} wordSearch={this.iptsureFn.bind(this)} - icon="search" - placeholder={"请完整输入key"} + icon='search' + placeholder={'请完整输入key'} countShow={false} - height={"36px"} - width={"260px"} + height={'36px'} + width={'260px'} onClearItem={(e) => { - this.setState({ search: "" }); + this.setState({ search: '' }) let data = { page: 1, - limit: 10, - }; - this.getKeyCodeList(data); + limit: 10 + } + this.getKeyCodeList(data) }} - alignment={"left"} + alignment={'left'} />
-
+
{this.state.selectiondata.length > 0 ? ( + - } - > + }> 已选择 - + {this.state.selectiondata.length} 发放key总数:{this.state.grantTotal},剩余key总数: @@ -501,170 +514,162 @@ export default class acclist extends React.Component { ) : null} { - this.onPageChange(e); + this.onPageChange(e) }} countChange={(e) => { - this.onCountChange(e); + this.onCountChange(e) }} checkChange={this.selection.bind(this)} ComponentHandler={(com, rowData) => { - if (com == "dates") { + if (com == 'dates') { return ( {rowData.begin_time} 至 {rowData.end_time} - ); + ) } - if (com == "title") { + if (com == 'title') { return ( { - this.linkTo(rowData); - }} - > + this.linkTo(rowData) + }}> {rowData.title} - ); + ) } - if (com == "switch") { + if (com == 'switch') { return ( { - this.onSwitchChange(e, rowData); - }} - > - ); + this.onSwitchChange(e, rowData) + }}> + ) } - if (com == "status") { + if (com == 'status') { return ( -

+

+ ) + }}> {rowData.status_text}

- ); + ) } - if (com == "opearo") { - let str = null; + if (com == 'opearo') { + let str = null if (rowData.status == 1) { str = ( + className='grid-link' + style={{ paddingLeft: '2px', color: '#d8dbdd' }}> 详情 -
{}}> - {" "} - 更多 {" "} +
{}}> + {' '} + 更多 {' '}
this.menuItemClick(e, key, rowData) - } - > - 标记成已使用 - 作废 - 日志 + }> + 标记成已使用 + 作废 + 日志 - ); + ) } else { str = ( + className='grid-link' + style={{ paddingLeft: '2px', color: '#d8dbdd' }}> 详情 -
{}}> - {" "} - 更多 {" "} +
{}}> + {' '} + 更多 {' '}
this.menuItemClick(e, key, rowData) - } - > - + }> + 标记成已使用 - + 作废 - 日志 + 日志 - ); + ) } - return str; + return str } }} /> {this.state.audit_visible ? (
-
-
+
+
{ - this.cancel(e); + this.cancel(e) }} /> -
发送
-
+
发送
+
是否立即发送key以及解压密码?
-
+
接收手机号
-
+
{ - this.onPhoneChange(e); - }} - > + this.onPhoneChange(e) + }}> {this.state.phone_list.map((item, index) => { return ( + }}> {item} - ); + ) })}
-
+
接收邮箱
-
+
{ - this.onEmailChange(e); - }} - > + this.onEmailChange(e) + }}> {this.state.email_list.map((item, index) => { return ( + }}> {item} - ); + ) })}
-
+
-1} - > + disabled={this.state.phone_radio > -1}>
-
+
-1} - > + disabled={this.state.email_radio > -1}>
-
+
@@ -753,6 +751,6 @@ export default class acclist extends React.Component {
- ); + ) } }