diff --git a/src/components/gird/main.css b/src/components/gird/main.css index e7f24c84..a752857c 100644 --- a/src/components/gird/main.css +++ b/src/components/gird/main.css @@ -159,8 +159,6 @@ opacity: 1; width: 100%; height: 100px; - display: flex !important ; - justify-content: center; } .grid-loading.show .loading-bar { diff --git a/src/components/gird/main.js b/src/components/gird/main.js index e618a0bd..f997edd6 100644 --- a/src/components/gird/main.js +++ b/src/components/gird/main.js @@ -312,12 +312,7 @@ export default class menu extends React.Component { this.props.countChange(e) this.setState({ pageCount: e }) } - gridPageLoad() { - this.setState({ pageLoading: true }) - setTimeout(() => { - this.setState({ pageLoading: false }) - }, 500) - } + pageShow(e) {} gridEditChange(e) {} getSelectData() { diff --git a/src/pages/order/list/list.js b/src/pages/order/list/list.js index 5500e362..c0bc9792 100644 --- a/src/pages/order/list/list.js +++ b/src/pages/order/list/list.js @@ -190,10 +190,10 @@ export default class orderlist extends React.Component { prop: 'status', menuList: [ { id: 999, name: '全部' }, - { id: 1, name: '商品-充值中' }, - { id: 2, name: '商品-已完成' }, - { id: 3, name: '商品-充值失败' }, - { id: 4, name: '商品-已取消' }, + { id: 1, name: '直充-充值中' }, + { id: 2, name: '直充-已完成' }, + { id: 3, name: '直充-充值失败' }, + { id: 4, name: '直充-已取消' }, { id: 111, name: '立减金-待领取' }, { id: 222, name: '立减金-已领取' }, { id: 5, name: '立减金-已过期' } @@ -778,7 +778,7 @@ export default class orderlist extends React.Component { ) } if (com === 'type_text') { - return {rowData.type === 1 ? '商品' : '立减金'} + return {rowData.type === 1 ? '直充' : '立减金'} } if (com == 'channel_activity_id') { return ( @@ -797,7 +797,8 @@ export default class orderlist extends React.Component { onClick={(e) => this.moreFn(e, rowData)}> 详情 - {rowData.status == 1||rowData.status == 0&&rowData.type==1 ? ( + {rowData.status == 1 || + (rowData.status == 0 && rowData.type == 1) ? ( this.deleteFn(e, rowData)}> diff --git a/src/pages/plan/keyList/index.jsx b/src/pages/plan/keyList/index.jsx index d9a41e2c..0d1f42d1 100644 --- a/src/pages/plan/keyList/index.jsx +++ b/src/pages/plan/keyList/index.jsx @@ -1,11 +1,12 @@ -import React, { useRef } from "react"; -import { useUpdateEffect, useSetState } from "ahooks"; +import React, { useRef } from 'react' +import { useUpdateEffect, useSetState } from 'ahooks' -import { getNowTime } from "@/utils.js"; -import menu from "@/assets/enum.js"; -import _ from "lodash"; +import { getNowTime } from '@/utils.js' +import menu from '@/assets/enum.js' +import _ from 'lodash' import { Button, + BlockLoading, Icon, Notify, Alert, @@ -14,8 +15,8 @@ import { DropdownClickTrigger, MenuItem, DropdownContent, - Menu, -} from "zent"; + Menu +} from 'zent' import { keyCancel, @@ -26,124 +27,125 @@ import { getKeysList, batchUploadVoid, batchUploadUsed, - exportKey, -} from "@/assets/api.js"; + exportKey +} from '@/assets/api.js' -import Grid from "@/components/gird/main.js"; -import TabPage from "@/components/tabPage/main.js"; -import KeysFind from "@/components/keysFind"; -import UseUploadExcel from "@/components/UseUploadExcel"; +import Grid from '@/components/gird/main.js' +import TabPage from '@/components/tabPage/main.js' +import KeysFind from '@/components/keysFind' +import UseUploadExcel from '@/components/UseUploadExcel' -import "./style.less"; +import './style.less' const tableColumn = [ { - 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 UseKeyList = () => { - const key_query_el = useRef(null); - const plan_list_el = useRef(null); + const key_query_el = useRef(null) + const plan_list_el = useRef(null) const [state, setState] = useSetState({ - tabList: [{ title: "KEY列表" }], + tabList: [{ title: 'KEY列表' }], query: { - begin_time: "", - end_time: "", - reseller_id: "", - plan_id: "", - status: "", - key: "", + begin_time: '', + end_time: '', + reseller_id: '', + plan_id: '', + status: '', + key: '' }, - hash: "", + hash: '', + loading:false, page: 1, limit: 10, isQuery: false, selectTable: [], multipleDisabledBtn: true, exportKeyBtn: false, - lodgingTable: true, + lodgingTable: false, tableHeight: 500, tableData: [], grantTotal: 0, @@ -151,11 +153,11 @@ const UseKeyList = () => { usageTotal: 0, outdateTotal: 0, invalidTotal: 0, - dialogTitle: "", + dialogTitle: '', bachVisible: false, - bachUrl: "", - bachApiType: 0, - }); + bachUrl: '', + bachApiType: 0 + }) /** * @@ -169,48 +171,51 @@ const UseKeyList = () => { plan_id: state.query.plan_id || null, status: state.query.status || null, key: state.query.key || null, - hash: state.hash !== "" ? state.hash : null, + hash: state.hash !== '' ? state.hash : null, page: state.page, - limit: state.limit, - }; + limit: state.limit + } param = _.omitBy( { - ...param, + ...param }, (value) => { - return _.isNaN(value) || _.isNil(value); + return _.isNaN(value) || _.isNil(value) } - ); - return param; - }; + ) + return param + } /** * 获取表格 */ const getTable = () => { - const param = getParam(); + const param = getParam() + setState({loading:true}); getKeysList(param).then((res) => { handelResponse( res, (req, msg) => { - console.log("req =>", req); + setState({loading:false}); + console.log('req =>', req) if (req.total > 0) { - setState({ lodgingTable: false }); + setState({ lodgingTable: false }) } else { - setState({ lodgingTable: true }); + setState({ lodgingTable: true }) } - setState({ dataCount: req.total, tableData: req.data }); + setState({ dataCount: req.total, tableData: req.data }) }, (err) => { - Notify.warn(err); + Notify.warn(err) } - ); - }); - }; + ) + }) + } useUpdateEffect(() => { - getTable(); - }, [state.isQuery]); + getTable() + }, [state.isQuery]) + /** * 获取查询值 @@ -218,285 +223,292 @@ const UseKeyList = () => { const getQuery = (data) => { let queryParams = _.omitBy( { - ...data, + ...data }, (value) => { - return _.isNaN(value) || _.isNil(value); + return _.isNaN(value) || _.isNil(value) } - ); - setState({ query: queryParams }); - }; + ) + setState({ query: queryParams }) + } /** * 查询按钮 */ const onQueryBtn = () => { - setState({ page: 1, limit: 10, hash: "", isQuery: !state.isQuery }); - }; + setState({ page: 1, limit: 10, hash: '', isQuery: !state.isQuery }) + } /** * 重置 */ const resetBtn = () => { - setState({ page: 1, limit: 10, hash: "", tableData: [] }); - }; + setState({ + page: 1, + limit: 10, + hash: '', + tableData: [], + lodgingTable: false, + dataCount: 0 + }) + } /** * 清空 select table */ const clearSelectTableBtn = () => { - plan_list_el.current.allChecked(false); - setState({ selectTable: [] }); - }; + plan_list_el.current.allChecked(false) + setState({ selectTable: [] }) + } /** * 作废 */ const multipleCancel = () => { let keys = _.map(state.selectTable, (item) => { - return item.key; - }); + return item.key + }) let formdata = { - keys: keys, - }; + keys: keys + } keyBatchCancel(formdata).then((res) => { handelResponse( res, (req, msg) => { - Notify.success("批量作废成功"); - clearSelectTableBtn(); + Notify.success('批量作废成功') + clearSelectTableBtn() setState({ multipleDisabledBtn: true, - isQuery: !state.isQuery, - }); + isQuery: !state.isQuery + }) }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); - }; + ) + }) + } /** * 使用 */ const multipleUse = () => { let keys = _.map(state.selectTable, (item) => { - return item.key; - }); + return item.key + }) let formdata = { - keys: keys, - }; + keys: keys + } keyBatchUsage(formdata).then((res) => { handelResponse( res, (req, msg) => { - Notify.success("批量标记为使用成功"); - clearSelectTableBtn(); + Notify.success('批量标记为使用成功') + clearSelectTableBtn() setState({ multipleDisabledBtn: true, - isQuery: !state.isQuery, - }); + isQuery: !state.isQuery + }) }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); - }; + ) + }) + } /** * 导出 */ const bachExportKey = () => { - let tag = false; - let param = getParam(); - delete param.page; - delete param.limit; + let tag = false + let param = getParam() + delete param.page + delete param.limit // hash - if (state.hash !== "") { - param.hash = state.hash; + if (state.hash !== '') { + param.hash = state.hash } // 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 (state.selectTable.length > 0) { - let key_arr = []; + let key_arr = [] key_arr = state.selectTable.map((item) => { - return item.key; - }); + return item.key + }) param = { - keys: key_arr.join(","), - }; - tag = true; + keys: key_arr.join(',') + } + 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 } - }); + }) } - }; + } const onPageChange = (e) => { - setState({ page: e, isQuery: !state.isQuery }); - }; + setState({ page: e, isQuery: !state.isQuery }) + } const onCountChange = (e) => { - setState({ limit: e, isQuery: !state.isQuery }); - }; + setState({ limit: e, isQuery: !state.isQuery }) + } const selectionFun = (data) => { if (data.length > 0) { - setState({ multipleDisabledBtn: false }); + setState({ multipleDisabledBtn: false }) } else { - setState({ multipleDisabledBtn: true }); + setState({ multipleDisabledBtn: true }) } - setState({ selectTable: data }); - let grantTotal = 0; - let surplusTotal = 0; - let usageTotal = 0; - let invalidTotal = 0; - let outdateTotal = 0; + setState({ selectTable: data }) + let grantTotal = 0 + let surplusTotal = 0 + let usageTotal = 0 + let invalidTotal = 0 + let outdateTotal = 0 // let usage_total = 0; // let silent_total = 0; data.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); - }); + }) setState({ grantTotal, usageTotal, invalidTotal, outdateTotal, - surplusTotal, - }); - }; + surplusTotal + }) + } const menuItemClick = (e, key, rowData) => { if (Number(key) === 1) { let formdata = { - key: rowData.key, - }; + key: rowData.key + } keyUsage(formdata).then((res) => { handelResponse( res, (req, msg) => { - setState({ page: 1, limit: 10, isQuery: !state.isQuery }); - Notify.success("标记为使用成功"); + setState({ page: 1, limit: 10, isQuery: !state.isQuery }) + Notify.success('标记为使用成功') }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); + ) + }) } if (Number(key) === 2) { let formdata = { - key: rowData.key, - }; + key: rowData.key + } keyCancel(formdata).then((res) => { handelResponse( res, (req, msg) => { - setState({ page: 1, limit: 10, isQuery: !state.isQuery }); - Notify.success("作废成功"); + setState({ page: 1, limit: 10, isQuery: !state.isQuery }) + Notify.success('作废成功') }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); + ) + }) } if (Number(key) === 3) { - sessionStorage.setItem("keyCode", rowData.key); - window.open("#/home/key-log"); + sessionStorage.setItem('keyCode', rowData.key) + window.open('#/home/key-log') } - }; + } /** * 批量上传操作 */ const bachUploadQuery = () => { let obj = { - bachUrl: "/key/import?type=1", - dialogTitle: "批量上传查询", + bachUrl: '/key/import?type=1', + dialogTitle: '批量上传查询', bachVisible: true, - bachApiType: 1, - }; - setState(obj); - }; + bachApiType: 1 + } + setState(obj) + } /** * 批量上传作废 */ const bachUploadVoid = () => { let obj = { - bachUrl: "/key/import?type=2", - dialogTitle: "批量上传作废", + bachUrl: '/key/import?type=2', + dialogTitle: '批量上传作废', bachVisible: true, - bachApiType: 2, - }; - setState(obj); - }; + bachApiType: 2 + } + setState(obj) + } /** * 批量上传使用 */ const bachUploadTagUse = () => { let obj = { - bachUrl: "/key/import?type=3", - dialogTitle: "批量上传使用", + bachUrl: '/key/import?type=3', + dialogTitle: '批量上传使用', bachVisible: true, - bachApiType: 3, - }; - setState(obj); - }; + bachApiType: 3 + } + setState(obj) + } const bachOnClose = () => { - setState({ bachVisible: false }); - }; + setState({ bachVisible: false }) + } const bachImportBtn = (data) => { // 批量上传查询 if (state.bachApiType === 1) { - setState({ page: 1, hash: data, isQuery: !state.isQuery }); - return; + setState({ page: 1, hash: data, isQuery: !state.isQuery }) + return } // 批量上传作废 @@ -505,21 +517,21 @@ const UseKeyList = () => { handelResponse( res, (req, msg) => { - Notify.success("批量上传标记为作废"); - key_query_el.current.clearData(); // 重置 + Notify.success('批量上传标记为作废') + key_query_el.current.clearData() // 重置 setState({ page: 1, limit: 10, hash: data, - isQuery: !state.isQuery, - }); + isQuery: !state.isQuery + }) }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); - return; + ) + }) + return } // 批量上传使用 @@ -528,28 +540,28 @@ const UseKeyList = () => { handelResponse( res, (req, msg) => { - Notify.success("批量上传标记为使用"); - key_query_el.current.clearData(); // 重置 + Notify.success('批量上传标记为使用') + key_query_el.current.clearData() // 重置 setState({ page: 1, limit: 10, hash: data, - isQuery: !state.isQuery, - }); + isQuery: !state.isQuery + }) }, (err) => { - Notify.error(err); + Notify.error(err) } - ); - }); - return; + ) + }) + return } - }; + } return ( -
+
-
+
getQuery(data)} @@ -557,39 +569,34 @@ const UseKeyList = () => { resetChange={() => resetBtn()} />
-
+
{/* 批量上传操作 */}
@@ -597,15 +604,14 @@ const UseKeyList = () => {
{state.selectTable.length > 0 ? ( clearSelectTableBtn()}> + - } - > + }> 已选择 - + {state.selectTable.length} 发放key总数:{state.grantTotal},剩余key总数: @@ -614,8 +620,9 @@ const UseKeyList = () => { {state.invalidTotal} ) : null} + { pageChange={(e) => onPageChange(e)} emptyText={ state.lodgingTable - ? "抱歉，暂无相关数据记录" - : "查询 请输入【分销商】或【计划名称】或【key】进行查询" + ? '抱歉，暂无相关数据记录' + : '查询 请输入【分销商】或【计划名称】或【key】进行查询' } countChange={(e) => onCountChange(e)} checkChange={(data) => selectionFun(data)} ComponentHandler={(com, rowData) => { - if (com == "dates") { + if (com == 'dates') { return ( {rowData.begin_time} 至 {rowData.end_time} - ); + ) } - if (com == "status") { + if (com == 'status') { return ( -

+

+ background: menu.keyStatusBg(parseInt(rowData.status)) + }}> {rowData.status_text}

- ); + ) } - if (com == "opearo") { + if (com == 'opearo') { return ( + className='grid-link' + style={{ paddingLeft: '2px', color: '#d8dbdd' }}> 详情 -
- 更多 +
+ 更多
menuItemClick(e, key, rowData)} - > + onClick={(e, key) => menuItemClick(e, key, rowData)}> + key='1' + disabled={rowData.status === 1 ? false : true}> 标记成已使用 + }> 作废 - 日志 + 日志 - ); + ) } }} /> +
+ {/* 批量上传 */} @@ -710,10 +712,9 @@ const UseKeyList = () => { visible={state.bachVisible} url={state.bachUrl} onClose={() => bachOnClose()} - onImport={(data) => bachImportBtn(data)} - > + onImport={(data) => bachImportBtn(data)}>
- ); -}; + ) +} -export default UseKeyList; +export default UseKeyList