From b6c05cb1832ca1492b2d029f15154458dc5efbf6 Mon Sep 17 00:00:00 2001 From: zhangds Date: Tue, 26 Jul 2022 16:11:57 +0800 Subject: [PATCH] =?UTF-8?q?1)=20=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=9F=A5=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UseUploadExcel/index copy 2.jsx | 362 ++++++++++ src/components/UseUploadExcel/index copy.jsx | 181 +++-- src/components/UseUploadExcel/index.jsx | 300 +++++++- src/components/UseUploadExcel/style.less | 99 ++- src/pages/plan/key/detail/list.js | 677 +++++++++--------- 5 files changed, 1218 insertions(+), 401 deletions(-) create mode 100644 src/components/UseUploadExcel/index copy 2.jsx diff --git a/src/components/UseUploadExcel/index copy 2.jsx b/src/components/UseUploadExcel/index copy 2.jsx new file mode 100644 index 00000000..93eb3167 --- /dev/null +++ b/src/components/UseUploadExcel/index copy 2.jsx @@ -0,0 +1,362 @@ +import React, { useState } from "react"; +import { Button, Icon, BlockLoading, Notify, Grid } from "zent"; +import "./style.less"; + +const columns = [ + { + title: "行号", + name: "id", + }, + { + title: "key", + name: "key", + }, + { + title: "错误原因", + name: "msg", + }, +]; + +const UseUploadExcel = (props) => { + const datasets = []; + for (let i = 0; i < 30; i++) { + datasets.push({ + id: `${i}`, + key: `key ${i}`, + msg: `meg ${i}`, + }); + } + + const { title = "提示", onClose, visible = false } = props; + + const [fileState, setFilesState] = useState(null); // 文件 + const [filesName, setFilesName] = useState(""); // 文件名 + const [filesTip, setFilesTip] = useState(0); // 解析 tip + const [loading, setLoading] = useState(false); // 解析 loading + const [sha1, setSha1] = useState(""); // 后端值 + const [disabledSureBtn, setDisabledSureBtn] = useState(true); // 导入 按钮 + const [partSuccessTag, setPartSuccessTag] = useState(false); // 部分成功 + const [showUpType, setShowUpType] = useState(2); // 0无文件上传 1文件上传 + /** + * 文件后端解析 + */ + const excelParseFun = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + + // 200 全部成功 + // setFilesTip(true); + // setDisabledSureBtn(false); + + // 400 全部失败 + setFilesTip(false); + setDisabledSureBtn(true); + + // 401 部分成功 + }, 3000); + + // const wfForm = new FormData(); + // wfForm.append("file", fileState); + // wfForm.append("remark", fileState.name); + // this.apiUpload(`/admin/blacklist/parse`, wfForm).then((res) => { + // console.log("res =>", res); + // setLoading(false); + // if (res.code === 200) { + // // 全部成功 + // setFilesTip(true); + // setSha1(res.data); + // setDisabledSureBtn(false); + // } else if (res.code === 400) { + // // 全部失败 + // setFilesTip(false); + // this.isUploadStateTip400 = true; + // } else if (res.code === 401) { + // // 有些成功有些失败 + // setFilesTip(false); + // } else { + // Notify.error(res.error); + // } + // }); + }; + + /** + * input 文件改变 + * @param {file} e + */ + const fileChange = (e) => { + let my_file = e.target.files[0]; + setFilesState(my_file); + setFilesName(my_file.name); + + setShowUpType(1); + + excelParseFun(); // 文件解析 + console.log("file =>", my_file); + }; + + /** + * 表格文件模版下载 + */ + const downloadMBExcel = () => { + window.location.href = + "http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx"; + }; + + /** + * 确定导入 + */ + const importBtn = () => {}; + + /** + * 重新上传 + */ + const resetUpload = () => {}; + + /** + * 弹窗 顶部信息 + * @returns + */ + const uploadTop = () => { + return ( +
+
+
+
1
+ 上传文件 +
+
+
+
+
+
2
+ 导入完成 +
+
+ +
+
直接上传
+
+
- 支持文件类型：xls，xlsx，csv
+
+ - 支持所有基础字段的导入，一次至多导入 10000 + 条手机号（不符合规则整条任务不予以导入） +
+
+
+
+ ); + }; + + /** + * 无，文件上传 + * @returns + */ + const uploadExcel = () => { + return ( +
+ fileChange(e)} + /> + +
+ ); + }; + + /** + * 解析 tip + * @returns + */ + const tipSuccess = () => { + return ( +
+ + 文件解析成功， 点击 "确定导入" 即可导入 +
+ ); + }; + const tipErr = () => { + return ( +
+ + 文件解析失败, 请查看导入规则并更新文件 +
+ ); + }; + + /** + * 文件上传 + * @returns + */ + const upFilesExcel = () => { + return ( +
+
+

+ + {filesName} +

+
+ fileChange(e)} + /> + + 更新文件 +
+
+ {/* tip */} + {filesTip === 1 ? tipSuccess() : tipErr()} +
+ ); + }; + + /** + * 底部 + * @returns + */ + const uploadFooter = () => { + return ( +
+
下载模板并填写后上传
+
+
+ 请先下载「数字世界营销管理系统_keys_模板」并按照模板填写后再上传。 +
+
+ + +
+ + +
+
+ ); + }; + + /** + * 全部错误和全部正确 + */ + const successErrAll = () => { + let el = null; + if (showUpType === 0) { + el = uploadExcel(); + } else if (showUpType === 1) { + el = upFilesExcel(); + } + return ( +
+ {uploadTop()} + {el} + {uploadFooter()} +
+ ); + }; + + /** + * 部分正确 + */ + const partSuccess = () => { + return ( +
+
+ 文件上传成功.共 20 条手机号,其中 10 条可成功导入 +
+
+ 发现以下 10 条不符合要求,将不会被导入 +
+ +
+ +
+ +
+
+ + +
+
+
+ ); + }; + + return ( +
+ {visible ? ( +
+
+
+ +
+
{title}
+ +
+ {partSuccessTag ? partSuccess() : successErrAll()} + +
+
+ ) : null} +
+ ); +}; + +export default UseUploadExcel; diff --git a/src/components/UseUploadExcel/index copy.jsx b/src/components/UseUploadExcel/index copy.jsx index 90efbee5..0738557b 100644 --- a/src/components/UseUploadExcel/index copy.jsx +++ b/src/components/UseUploadExcel/index copy.jsx @@ -1,16 +1,55 @@ import React, { useState } from "react"; -import { Dialog, Button } from "zent"; +import { Dialog, Button, Icon, BlockLoading, InlineLoading } from "zent"; import "./style.less"; const UseUploadExcel = (props) => { - const { - maskClosable = false, - title = "提示", - visible, - onClose, - closeBtn = false, - } = props; + const { title = "提示", onClose, visible = false } = props; - // 顶部 + const [fileState, setFilesState] = useState(null); + const [filesName, setFilesName] = useState(""); + const [filesTip, setFilesTip] = useState(false); + const [loading, setLoading] = useState(true); + /** + * 文件后端解析 + */ + const excelParseFun = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + setFilesTip(true); + }, 3000); + }; + + /** + * input 文件改变 + * @param {file} e + */ + const fileChange = (e) => { + let my_file = e.target.files[0]; + setFilesState(my_file); + setFilesName(my_file.name); + + excelParseFun(); // 文件解析 + console.log("file =>", my_file); + }; + + /** + * 表格文件模版下载 + */ + const downloadMBExcel = () => { + window.location.href = + "http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx"; + }; + + /** + * 确定导入 + */ + const importBtn = () => {}; + + /** + * 弹窗 顶部信息 + * @returns + */ const uploadTop = () => { return (
@@ -42,17 +81,20 @@ const UseUploadExcel = (props) => { ); }; - // 上传excel组件 + /** + * 无，文件上传 + * @returns + */ const uploadExcel = () => { return (
this.fileChange(e)} + onChange={(e) => fileChange(e)} /> + +
+ + +
); }; return (
- - - - - } - > -
- {/* 弹窗头部 */} -
{uploadTop()}
- - {/* 文件上传区域 */} -
{uploadExcel()}
- - {/* 底部 */} -
{uploadFooter()}
-
- + + + {visible ? ( +
+
+
+
+
{title}
+ +
+ {uploadTop()} + {fileState ? upFilesExcel() : uploadExcel()} + {uploadFooter()} +
+
+ ) : null} +
); }; diff --git a/src/components/UseUploadExcel/index.jsx b/src/components/UseUploadExcel/index.jsx index 234427af..063e3eaa 100644 --- a/src/components/UseUploadExcel/index.jsx +++ b/src/components/UseUploadExcel/index.jsx @@ -1,16 +1,121 @@ import React, { useState } from "react"; -import { Dialog, Button, Icon } from "zent"; +import { Button, Icon, BlockLoading, Notify, Grid } from "zent"; import "./style.less"; -const UseUploadExcel = (props) => { - const { - maskClosable = false, - title = "提示", - visible, - onClose, - closeBtn = false, - } = props; - // 顶部 +const columns = [ + { + title: "行号", + name: "id", + }, + { + title: "key", + name: "key", + }, + { + title: "错误原因", + name: "msg", + }, +]; + +const UseUploadExcel = (props) => { + const datasets = []; + for (let i = 0; i < 30; i++) { + datasets.push({ + id: `${i}`, + key: `key ${i}`, + msg: `meg ${i}`, + }); + } + + const { title = "提示", onClose, visible = false } = props; + + const [fileState, setFilesState] = useState(null); // 文件 + const [filesName, setFilesName] = useState(""); // 文件名 + const [filesTip, setFilesTip] = useState(2); // 解析 tip 0失败 1成功 2无事发生 + const [loading, setLoading] = useState(false); // 解析 loading + const [sha1, setSha1] = useState(""); // 后端值 + const [disabledSureBtn, setDisabledSureBtn] = useState(true); // 导入 按钮 + const [partSuccessTag, setPartSuccessTag] = useState(false); // 部分成功 + const [showUpType, setShowUpType] = useState(false); // false无文件上传 true文件上传 + /** + * 文件后端解析 + */ + const excelParseFun = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + + // 200 全部成功 + setFilesTip(1); + setDisabledSureBtn(false); + + // 400 全部失败 + // setFilesTip(0); + // setDisabledSureBtn(true); + + // 401 部分成功 + }, 3000); + + // const wfForm = new FormData(); + // wfForm.append("file", fileState); + // wfForm.append("remark", fileState.name); + // this.apiUpload(`/admin/blacklist/parse`, wfForm).then((res) => { + // console.log("res =>", res); + // setLoading(false); + // if (res.code === 200) { + // // 全部成功 + // setFilesTip(true); + // setSha1(res.data); + // setDisabledSureBtn(false); + // } else if (res.code === 400) { + // // 全部失败 + // setFilesTip(false); + // this.isUploadStateTip400 = true; + // } else if (res.code === 401) { + // // 有些成功有些失败 + // setFilesTip(false); + // } else { + // Notify.error(res.error); + // } + // }); + }; + + /** + * input 文件改变 + * @param {file} e + */ + const fileChange = (e) => { + let my_file = e.target.files[0]; + setFilesState(my_file); + setFilesName(my_file.name); + setShowUpType(true); + excelParseFun(); // 文件解析 + console.log("file =>", my_file); + }; + + /** + * 表格文件模版下载 + */ + const downloadMBExcel = () => { + window.location.href = + "http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx"; + }; + + /** + * 确定导入 + */ + const importBtn = () => {}; + + /** + * 重新上传 + */ + const resetUpload = () => {}; + + /** + * 弹窗 顶部信息 + * @returns + */ const uploadTop = () => { return (
@@ -42,17 +147,20 @@ const UseUploadExcel = (props) => { ); }; - // 上传excel组件 + /** + * 无，文件上传 + * @returns + */ const uploadExcel = () => { return (
this.fileChange(e)} + onChange={(e) => fileChange(e)} />
-
- + +
+
+
+ ); + }; + + return ( +
+ {visible ? ( +
+
+
+ +
+
{title}
+ +
+ {partSuccessTag ? partSuccess() : successErrAll()} + +
+
+ ) : null}
); }; diff --git a/src/components/UseUploadExcel/style.less b/src/components/UseUploadExcel/style.less index 943b9a09..dc3ff594 100644 --- a/src/components/UseUploadExcel/style.less +++ b/src/components/UseUploadExcel/style.less @@ -70,11 +70,29 @@ .upload-input{ opacity: 0; - width: 300px; + width: 100px; height: 48px; position: absolute; z-index: 5; + cursor: pointer; + left: 32px; } + +.upload-input1{ + opacity: 0; + width: 80px; + height: 30px; + position: absolute; + z-index: 5; + cursor: pointer; + border: 1px solid red; + left: 0; +} + +.import-close{ + cursor: pointer; +} + .dialog-main-footer{ margin-top: 40px; } @@ -95,3 +113,82 @@ margin-top: 10px; margin-left: 40px; } + + +.user-file-box { + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 4px; + padding: 0 10px; + margin-bottom: 5px; + background: #f0f0f0; +} + +/* .user-file-box-actv { + background: #409eff; + border: 1px solid #409eff !important; + color: #fff; +} */ +.user-file-box-actv p:first-child { + background: #409eff !important; + border: 1px solid #409eff !important; + color: #fff; +} + +.user-file-box-actv p:last-child { + font-weight: bold !important; +} + + +.file-update-box { + position: relative; + cursor: pointer; +} +.file-update-box span, +.file-update-box i { + color: #409eff; + cursor: pointer; +} +.user-file-name { + margin: 0; + padding: 5px 10px; +} +.user-upload-btn { + position: relative; +} +.upload-error { + color: #f56c6c; + padding-left: 10px; +} +.upload-success { + color: #67c23a; + padding-left: 10px; +} +.upload-title-p { + font-weight: bold; +} +.black-title { + font-weight: bold; + font-size: 25px; +} +.up-files-excel,.upload-excel-01{ + width: 80%; + margin: 0 auto; +} +.upload-excel-01{ + margin-top: 40px; + margin-bottom: 40px; +} +.file-errmsg1{ + margin-top: 10px; + color: #000000; + font-size: 14px; + margin-left: 40px; +} +.gridpanel1{ + width: 90%; + height: 400px; + margin: 0 auto; + margin-top: 30px; +} diff --git a/src/pages/plan/key/detail/list.js b/src/pages/plan/key/detail/list.js index e5be0d34..15e89ba7 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,24 +15,24 @@ 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"; -import UseUploadExcel from '../../../../components/UseUploadExcel' -import KeysFind from '@/components/keysFind' +import UseUploadExcel from "../../../../components/UseUploadExcel"; +import KeysFind from "@/components/keysFind"; // // @@ -40,44 +40,44 @@ 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: '全部', 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, @@ -92,164 +92,164 @@ export default class acclist extends React.Component { outdateTotal: 0, invalidTotal: 0, multiple: true, - dialogTitle: '', - bachVisible: false - } + 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( @@ -257,44 +257,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"); @@ -309,61 +309,61 @@ 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); } - ) - }) + ); + }); } /** @@ -372,8 +372,8 @@ export default class acclist extends React.Component { // 查询 bachUploadQuery() { - this.setState({ dialogTitle: '批量上传查询' }) - this.setState({ bachVisible: true }) + this.setState({ dialogTitle: "批量上传查询" }); + this.setState({ bachVisible: true }); } // 作废 @@ -384,138 +384,142 @@ export default class acclist extends React.Component { // 取消安妮 bachOnClose() { - this.setState({ bachVisible: false }) + 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 ( -
+
-
+
console.log(va)} />
-
+
{/* 批量上传操作 */}
@@ -525,33 +529,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总数: @@ -561,162 +566,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} + >
-
+
@@ -797,11 +817,14 @@ export default class acclist extends React.Component { ) : null}
+ + {/* 批量上传 */} + onClose={this.bachOnClose.bind(this)} + >
- ) + ); } }