From cd35c6fa8a7f61fdd524bfda04b4ee04665d18fe Mon Sep 17 00:00:00 2001 From: zhangds Date: Wed, 10 Aug 2022 17:21:51 +0800 Subject: [PATCH] =?UTF-8?q?1)=20=E5=A2=9E=E5=8A=A0=E8=AE=A1=E5=88=92?= =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/api.js | 4 + src/pages/plan/keyList/index.jsx | 738 ++++++++++++++++--------------- 2 files changed, 393 insertions(+), 349 deletions(-) diff --git a/src/assets/api.js b/src/assets/api.js index 9883fa54..a79aea02 100644 --- a/src/assets/api.js +++ b/src/assets/api.js @@ -888,4 +888,8 @@ export const batchSend = (data) => { return req("post", baseurl + `/keys/batchSend`, data); }; +export const exportKey = (data) => { + return req("get", baseurl + "/key/export", data); +}; + export { req }; diff --git a/src/pages/plan/keyList/index.jsx b/src/pages/plan/keyList/index.jsx index 0527a096..99e4ca6b 100644 --- a/src/pages/plan/keyList/index.jsx +++ b/src/pages/plan/keyList/index.jsx @@ -1,7 +1,7 @@ /* key列表 */ -import React from 'react' -import { Button, Alert } from 'zent' -import './index.less' +import React from "react"; +import { Button, Alert } from "zent"; +import "./index.less"; import { Input, RadioGroup, @@ -15,10 +15,10 @@ import { Icon, MenuItem, DropdownContent, - Menu -} from 'zent' -import Grid from '@/components/gird/main.js' -import TabPage from '@/components/tabPage/main.js' + Menu, +} from "zent"; +import Grid from "@/components/gird/main.js"; +import TabPage from "@/components/tabPage/main.js"; import { keyCancel, keyUsage, @@ -28,47 +28,48 @@ import { getkeyDetailList, getKeysList, batchUploadVoid, - batchUploadUsed -} from '@/assets/api.js' -import _ from 'lodash' -import menu from '@/assets/enum.js' + batchUploadUsed, + exportKey, +} from "@/assets/api.js"; +import _ from "lodash"; +import menu from "@/assets/enum.js"; -import UseUploadExcel from '@/components/UseUploadExcel' -import KeysFind from '@/components/keysFind' +import UseUploadExcel from "@/components/UseUploadExcel"; +import KeysFind from "@/components/keysFind"; export default class acclist extends React.Component { constructor(props) { - super(props) + super(props); this.state = { dataCount: 0, page: 1, limit: 10, - tabList: [{ title: 'KEY列表' }], + tabList: [{ title: "KEY列表" }], distdata: [], 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, @@ -83,168 +84,170 @@ export default class acclist extends React.Component { outdateTotal: 0, invalidTotal: 0, multiple: true, - dialogTitle: '', + dialogTitle: "", bachVisible: false, - bachUrl: '', + bachUrl: "", conditionalQuery: {}, //条件查询 - bachApiType: 1 - } + bachApiType: 1, + exportKeyBtn: false, + hashPop: "", + }; } //分页 onPageChange(e) { - this.setState({ page: e }) + this.setState({ page: e }); setTimeout(() => { - this.getpageFn() - }, 0) + this.getpageFn(); + }, 0); } componentDidMount(e) { - this.iptsureFn() + this.iptsureFn(); } componentWillMount() { - this.setState({ tableHeight: window.innerHeight - 430 }) + this.setState({ tableHeight: window.innerHeight - 430 }); } getKeyCodeList(data) { let queryParams = _.omitBy( { ...data, ...this.state.conditionalQuery }, (value) => { - return _.isNaN(value) || _.isNil(value) + return _.isNaN(value) || _.isNil(value); } - ) + ); getKeysList(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) => { - Notify.warn(err) + Notify.warn(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 - } - let status = this.state.status > 0 ? this.state.status : null + limit: this.state.limit, + }; + 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({ selectiondata: selection }) - let grantTotal = 0 - let surplusTotal = 0 - let usageTotal = 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 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); - 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(hash) { - let status = this.state.status > 0 ? this.state.status : null - this.setState({ page: 1, limit: 10 }) + let status = this.state.status > 0 ? this.state.status : null; + this.setState({ page: 1, limit: 10 }); let data = { page: 1, - limit: 10 - } + limit: 10, + }; /* 兼容不同参数 当进行倒入操作时hash为字符串否则为object */ - if (typeof hash !== 'string') { - data = { ...data, ...hash } + if (typeof hash !== "string") { + data = { ...data, ...hash }; } else { - data = { ...data, hash } + data = { ...data, hash }; } 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 - } - 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) + }; + 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 - } + key: rowData.key, + }; keyUsage(formdata).then((res) => { handelResponse( @@ -252,147 +255,155 @@ 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) - window.open('#/home/key-log') + sessionStorage.setItem("keyCode", rowData.key); + window.open("#/home/key-log"); } } 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); } - ) - }) + ); + }); } // 1:批量上传查询 2:批量上传作废 3:批量上传标记成已使用 默认1 // 查询 bachUploadQuery() { let obj = { - bachUrl: '/key/import?type=1', - dialogTitle: '批量上传查询', + bachUrl: "/key/import?type=1", + dialogTitle: "批量上传查询", bachVisible: true, - bachApiType: 1 - } - this.setState(obj) + bachApiType: 1, + }; + this.setState(obj); } // 作废 bachUploadVoid() { let obj = { - bachUrl: '/key/import?type=2', - dialogTitle: '批量上传作废', + bachUrl: "/key/import?type=2", + dialogTitle: "批量上传作废", bachVisible: true, - bachApiType: 2 - } - this.setState(obj) + bachApiType: 2, + }; + this.setState(obj); } // 标记已使用 bachUploadTagUse() { let obj = { - bachUrl: '/key/import?type=3', - dialogTitle: '批量上传使用', + bachUrl: "/key/import?type=3", + dialogTitle: "批量上传使用", bachVisible: true, - bachApiType: 3 - } - this.setState(obj) + bachApiType: 3, + }; + this.setState(obj); + } + + // 批量导出 + bachExportKey() { + let param = { + hash: this.state.hashPop, + }; + console.log("批量导出 =>", param); } // 取消按钮 bachOnClose() { - this.setState({ bachVisible: false }) + this.setState({ bachVisible: false }); } // 确定导入 bachImportBtn(data) { if (this.state.bachApiType === 1) { - this.iptsureFn(data) - return + this.iptsureFn(data); + return; } if (this.state.bachApiType === 2) { @@ -400,14 +411,14 @@ export default class acclist extends React.Component { handelResponse( res, (req, msg) => { - Notify.success('批量上传标记为作废') + Notify.success("批量上传标记为作废"); }, (err) => { - Notify.error(err) + Notify.error(err); } - ) - }) - return + ); + }); + return; } if (this.state.bachApiType === 3) { @@ -415,174 +426,187 @@ export default class acclist extends React.Component { handelResponse( res, (req, msg) => { - Notify.success('批量上传标记为使用') + Notify.success("批量上传标记为使用"); }, (err) => { - Notify.error(err) + Notify.error(err); } - ) - }) - return + ); + }); + return; } } 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: 'title', - name: 'title' + title: "归属营销计划", + width: "auto", + type: "normal", + prop: "title", + name: "title", }, { - title: '归属KEY批次', - prop: 'batch_name', - name: 'batch_name', - width: 'auto', - type: 'normal' + title: "归属KEY批次", + prop: "batch_name", + name: "batch_name", + width: "auto", + type: "normal", }, { - 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: '220px' - } - ] + title: "更新时间", + name: "update_time", + prop: "update_time", + type: "normal", + width: "220px", + }, + ]; const date = ( - ) + ); return ( -
+
-
+
{ - this.setState({ conditionalQuery: va }) + this.setState({ conditionalQuery: va }); setTimeout(() => { - this.iptsureFn(va) - }, 500) + this.iptsureFn(va); + }, 500); }} />
-
+
{/* 批量上传操作 */} +
{this.state.selectiondata.length > 0 ? ( + - }> + } + > 已选择 - + {this.state.selectiondata.length} 发放key总数:{this.state.grantTotal},剩余key总数: @@ -592,162 +616,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} + >
-
+
@@ -835,8 +874,9 @@ export default class acclist extends React.Component { visible={this.state.bachVisible} url={this.state.bachUrl} onClose={this.bachOnClose.bind(this)} - onImport={this.bachImportBtn.bind(this)}> + onImport={this.bachImportBtn.bind(this)} + >
- ) + ); } }