From e4057c7cfa2f347555ba54e093e083e85dd4c422 Mon Sep 17 00:00:00 2001 From: zhangds Date: Thu, 11 Aug 2022 17:37:07 +0800 Subject: [PATCH] =?UTF-8?q?1=EF=BC=89=20=E4=BF=AE=E6=94=B9=E5=A4=8D?= =?UTF-8?q?=E5=88=B6=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/plan/add/plan-copy.js | 2 +- src/pages/plan/keyList/index.jsx | 802 ++++++++++++++++--------------- 2 files changed, 412 insertions(+), 392 deletions(-) diff --git a/src/pages/plan/add/plan-copy.js b/src/pages/plan/add/plan-copy.js index 0bcc08bb..55c68bb5 100644 --- a/src/pages/plan/add/plan-copy.js +++ b/src/pages/plan/add/plan-copy.js @@ -104,7 +104,7 @@ export default class add extends React.Component { */ getDetails(plan_id) { let copy_count_golod = sessionStorage.getItem("copy_count_golod"); - get_copy_data(plan_id).then((res) => { + getDraftInfo(plan_id).then((res) => { console.log("res 1=>", res); handelResponse( res, diff --git a/src/pages/plan/keyList/index.jsx b/src/pages/plan/keyList/index.jsx index 9673594e..c195a36f 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,48 +28,48 @@ import { getKeysList, batchUploadVoid, batchUploadUsed, - exportKey -} from '@/assets/api.js' -import _ from 'lodash' -import menu from '@/assets/enum.js' + 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 { getNowTime } from '@/utils.js' +import UseUploadExcel from "@/components/UseUploadExcel"; +import KeysFind from "@/components/keysFind"; +import { getNowTime } from "@/utils.js"; 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, @@ -84,179 +84,177 @@ export default class acclist extends React.Component { outdateTotal: 0, invalidTotal: 0, multiple: true, - dialogTitle: '', + dialogTitle: "", bachVisible: false, - bachUrl: '', + bachUrl: "", conditionalQuery: {}, //条件查询 bachApiType: 1, lodging: false, exportKeyBtn: false, - hashPop: '', - query: {} - } + hashPop: "", + query: {}, + }; } //分页 onPageChange(e) { - this.setState({ page: e }) + this.setState({ page: e }); setTimeout(() => { - this.getpageFn() - }, 0) + this.getpageFn(); + }, 0); } componentDidMount(e) { // this.iptsureFn(); } componentWillMount() { - this.setState({ tableHeight: window.innerHeight - 430 }) + this.setState({ tableHeight: window.innerHeight - 430 }); } getKeyCodeList(data) { let queryParams = _.omitBy( { ...data, ...this.state.conditionalQuery, hash: this.state.hashPop }, (value) => { - return _.isNaN(value) || _.isNil(value) + return _.isNaN(value) || _.isNil(value); } - ) - - console.log('queryParams =>', queryParams) - + ); + console.log("queryParams =>", queryParams); getKeysList(queryParams).then((res) => { handelResponse( res, (req, msg) => { if (req.total > 0) { - this.setState({ lodging: false }) + this.setState({ lodging: false }); } else { - this.setState({ lodging: true }) + this.setState({ lodging: true }); } - 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( @@ -264,196 +262,196 @@ 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 tag = false + let tag = false; let param = { hash: this.state.hashPop || null, - ...this.state.query - } + ...this.state.query, + }; for (let key in param) { if (!param[key]) { - delete param[key] + delete param[key]; } } - console.log('param =>', param) + console.log("param =>", param); // 4个条件必须有一个 for (let key in param) { if ( - param.hasOwnProperty('key') === true || - param.hasOwnProperty('plan_id') === true || - param.hasOwnProperty('reseller_id') === true || - param.hasOwnProperty('hash') === true + param.hasOwnProperty("key") === true || + param.hasOwnProperty("plan_id") === true || + param.hasOwnProperty("reseller_id") === true || + param.hasOwnProperty("hash") === true ) { - tag = true + tag = true; } } if (tag) { exportKey(param).then((res) => { - if (res.type == 'application/json') { - const reader = new FileReader() //创建一个FileReader实例 - reader.readAsText(res, 'utf-8') //读取文件,结果用字符串形式表示 + if (res.type == "application/json") { + const reader = new FileReader(); //创建一个FileReader实例 + reader.readAsText(res, "utf-8"); //读取文件,结果用字符串形式表示 reader.onload = function () { - const obj = JSON.parse(reader.result) - Notify.clear() - Notify.error(obj.message) - } + const obj = JSON.parse(reader.result); + Notify.clear(); + Notify.error(obj.message); + }; } else { - let bl = new Blob([res]) - let fileName = '营销计划' + getNowTime() + '.xlsx' //设置文件名 - var link = document.createElement('a') //创建标签 - link.href = window.URL.createObjectURL(bl) - link.download = fileName //下载的文件名 - link.click() - window.URL.revokeObjectURL(link.href) //清除URL + let bl = new Blob([res]); + let fileName = "营销计划" + getNowTime() + ".xlsx"; //设置文件名 + var link = document.createElement("a"); //创建标签 + link.href = window.URL.createObjectURL(bl); + link.download = fileName; //下载的文件名 + link.click(); + window.URL.revokeObjectURL(link.href); //清除URL } - }) + }); } } // 取消按钮 bachOnClose() { - this.setState({ bachVisible: false }) + this.setState({ bachVisible: false }); } // 确定导入 bachImportBtn(data) { if (this.state.bachApiType === 1) { - this.setState({ hashPop: data }) - this.iptsureFn(data) - return + this.setState({ hashPop: data }); + this.iptsureFn(data); + return; } if (this.state.bachApiType === 2) { @@ -461,14 +459,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) { @@ -476,178 +474,183 @@ export default class acclist extends React.Component { handelResponse( res, (req, msg) => { - Notify.success('批量上传标记为使用') + Notify.success("批量上传标记为使用"); }, (err) => { - Notify.error(err) + Notify.error(err); } - ) - }) - return + ); + }); + return; } } getDataquey(val) { - this.setState({ conditionalQuery: val }) - this.setState({ query: val }) + this.setState({ conditionalQuery: val }); + this.setState({ query: val }); } 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.getDataquey(val)} onQuery={(va) => { - this.setState({ hashPop: '' }) - console.log('va =>', va) - this.setState({ conditionalQuery: va }) + this.setState({ hashPop: "" }); + console.log("va =>", va); + this.setState({ conditionalQuery: va }); setTimeout(() => { - this.iptsureFn(va) - }, 500) + this.iptsureFn(va); + }, 500); }} resetChange={() => { - this.setState({ lodging: false, distdata: [], dataCount: 0 }) + this.setState({ lodging: false, distdata: [], dataCount: 0 }); }} />
-
+
{/* 批量上传操作 */}
@@ -655,14 +658,15 @@ export default class acclist extends React.Component {
{this.state.selectiondata.length > 0 ? ( + - }> + } + > 已选择 - + {this.state.selectiondata.length} 发放key总数:{this.state.grantTotal},剩余key总数: @@ -672,167 +676,175 @@ export default class acclist extends React.Component { ) : null} { - this.onPageChange(e) + this.onPageChange(e); }} emptyText={ this.state.lodging - ? '抱歉，暂无相关数据记录' - : '查询 请输入【分销商】或【计划名称】或【key】进行查询' + ? "抱歉，暂无相关数据记录" + : "查询 请输入【分销商】或【计划名称】或【key】进行查询" } 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} + >
-
+
@@ -920,8 +939,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)} + >
- ) + ); } }