diff --git a/src/pages/plan/key/detail/list.js b/src/pages/plan/key/detail/list.js index eb26c3e4..72fd3e3e 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,23 +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' - -import UseUploadExcel from '../../../../components/UseUploadExcel' + getkeyDetailList, +} from "../../../../assets/api.js"; +import _ from "lodash"; +import menu from "../../../../assets/enum.js"; // // @@ -39,44 +37,44 @@ import UseUploadExcel from '../../../../components/UseUploadExcel' // 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, @@ -91,164 +89,162 @@ export default class acclist extends React.Component { outdateTotal: 0, invalidTotal: 0, multiple: true, - dialogTitle: '', - bachVisible: false - } + }; } //分页 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 + 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 + data.status = status; } - this.getKeyCodeList(data) + 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 + key: this.state.search, + }; + if (status) { + data.status = status; } if (status) { - data.status = status + data.status = status; } - if (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( @@ -256,44 +252,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"); @@ -308,210 +304,193 @@ 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); } - ) - }) - } - - /** - * 批量上传操作 - */ - - // 查询 - bachUploadQuery() { - this.setState({ dialogTitle: '批量上传查询' }) - this.setState({ bachVisible: true }) - } - - // 作废 - bachUploadVoid() {} - - // 标记已使用 - bachUploadTagUse() {} - - // 取消按钮 - bachOnClose() { - this.setState({ bachVisible: false }) + ); + }); } 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 ( -
+
-
+
{/* 批量上传操作 */}
@@ -521,33 +500,34 @@ export default class acclist extends React.Component { onChange={(e) => 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总数: @@ -557,162 +537,170 @@ 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} + >
-
+
@@ -793,13 +788,7 @@ export default class acclist extends React.Component { ) : null}
- - {/* 批量上传 */} -
- ) + ); } }