新增keylist

This commit is contained in:
wangsongsole 2022-07-28 10:47:07 +08:00
parent e66daf8b65
commit c72c357f61
2 changed files with 810 additions and 0 deletions

View File

@ -0,0 +1,803 @@
/* key列表 */
import React from 'react'
import { Button, Alert } from 'zent'
import './list.less'
import {
Input,
RadioGroup,
CombinedDateRangePicker,
Radio,
Notify,
Switch,
Dropdown,
DropdownPosition,
DropdownClickTrigger,
Icon,
MenuItem,
DropdownContent,
Menu
} from 'zent'
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'
import KeysFind from '@/components/keysFind'
export default class acclist extends React.Component {
constructor(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 }
],
distdata: [{ title: '士大夫大师傅' }],
filterList: [
{
id: 0,
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: '已完结' }
]
}
],
tableHeight: 500,
menuList: [{ id: 0, name: '状态', check: false }],
phone_list: [],
email_list: [],
phone: '',
email: '',
email_radio: -1,
phone_radio: -1,
search: '',
audit_visible: false,
cur_item: null,
selectiondata: [],
plan_id: 0,
grantTotal: 0,
surplusTotal: 0,
usageTotal: 0,
silentTotal: 0,
receive_total: 0,
usage_total: 0,
outdateTotal: 0,
invalidTotal: 0,
multiple: true,
dialogTitle: '',
bachVisible: false,
conditionalQuery: {} //条件查询
}
}
//分页
onPageChange(e) {
this.setState({ page: e })
setTimeout(() => {
this.getpageFn()
}, 0)
}
componentDidMount(e) {}
componentWillMount() {
this.setState({ tableHeight: window.innerHeight - 430 })
}
getKeyCodeList(data) {
console.log(data, this.state.conditionalQuery)
let queryParams = _.omitBy(
{ ...data, ...this.state.conditionalQuery },
(value) => {
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 })
},
(err) => {}
)
})
}
onCountChange(e) {
this.setState({ page: 1, limit: e })
setTimeout(() => {
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
if (status) {
data.status = status
}
this.getKeyCodeList(data)
}
//清空
clearFn() {
this.refs.plan_list.allChecked(false)
this.setState({ multiple: true })
this.setState({ selectiondata: [] })
}
//选中表格的选框
selection(selection) {
if (selection.length > 0) {
this.setState({ multiple: false })
} else {
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
selection.forEach((item) => {
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)
})
this.setState({
grantTotal,
usageTotal,
invalidTotal,
outdateTotal,
surplusTotal
})
}
// 监听组件内部状态的变化:
componentDidUpdate(prevProps, prevState) {
// 参数分别为改变之前的数据状态对象
if (prevState.search != this.state.search && !this.state.search) {
this.iptsureFn()
}
}
iptsureFn() {
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
}
if (status) {
data.status = status
}
if (status) {
data.status = status
}
this.getKeyCodeList(data)
}
onFilterClose(prop) {
let data = {}
data[prop] = null
this.setState(data)
let params = {
page: 1,
limit: 10,
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 params = {
page: 1,
limit: 10,
status: status
}
this.getKeyCodeList(params)
}
menuItemClick(e, key, rowData) {
if (key == 1) {
let formdata = {
key: rowData.key
}
keyUsage(formdata).then((res) => {
handelResponse(
res,
(req, msg) => {
let data = {
page: 1,
limit: 10
}
this.setState({ page: 1, limit: 10 })
this.getKeyCodeList(data)
Notify.success('标记为使用成功')
},
(err) => {
Notify.error(err)
}
)
})
}
if (key == 2) {
let formdata = {
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('作废成功')
},
(err) => {
Notify.error(err)
}
)
})
}
if (key == 3) {
sessionStorage.setItem('keyCode', rowData.key)
window.open('#/home/key-log')
}
}
multipleCancel() {
console.log(this.state.selectiondata)
let keys = _.map(this.state.selectiondata, (item) => {
return item.key
})
let formdata = {
keys: keys
}
keyBatchCancel(formdata).then((res) => {
handelResponse(
res,
(req, msg) => {
Notify.success('批量作废成功')
let data = {
page: 1,
limit: 10
}
this.setState({ page: 1, limit: 10 })
this.clearFn()
this.getKeyCodeList(data)
},
(err) => {
Notify.error(err)
}
)
})
}
multipleUse() {
let keys = _.map(this.state.selectiondata, (item) => {
return item.key
})
let formdata = {
keys: keys
}
keyBatchUsage(formdata).then((res) => {
handelResponse(
res,
(req, msg) => {
Notify.success('批量标记为使用成功')
let data = {
page: 1,
limit: 10
}
this.setState({ page: 1, limit: 10 })
this.clearFn()
this.getKeyCodeList(data)
},
(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 Column = [
{
title: 'key码',
name: 'key_code',
prop: 'key_code',
type: 'normal',
width: 'auto'
},
{
title: '归属营销计划',
width: 'auto',
type: 'normal',
prop: 'plan_title',
name: 'plan_title'
},
{
title: '状态',
prop: 'status',
name: 'status',
width: 'auto',
type: 'slot'
},
{
title: '操作',
name: 'opearo',
prop: 'opearo',
type: 'slot',
width: 'auto'
},
{
title: '发放总数',
prop: 'total',
name: 'total',
width: 'auto',
type: 'normal'
},
{
title: '剩余总数',
prop: 'residue',
name: 'residue',
width: 'auto',
type: 'normal'
},
{
title: '使用总数',
name: 'usage',
prop: 'usage',
type: 'normal',
width: 'auto'
},
{
title: '失效总数',
name: 'overdue',
prop: 'overdue',
type: 'normal',
width: 'auto'
},
{
title: '作废总数',
name: 'invalid',
prop: 'invalid',
type: 'normal',
width: 'auto'
},
{
title: '已完结总数',
name: 'end',
prop: 'end',
type: 'normal',
width: 'auto'
},
{
title: '更新时间',
name: 'update_time',
prop: 'update_time',
type: 'normal',
width: 'auto'
}
]
const date = (
<CombinedDateRangePicker
className='zent-datepicker-demo'
value={this.state.combinedValue}
showTime={{
format: 'HH:mm:ss',
defaultTime: ['00:00:00', '23:59:59']
}}
format='YYYY-MM-DD HH:mm:ss'
onChange={this.onChangeCombinedDate}
/>
)
return (
<div id='dislist'>
<TabPage tabs={this.state.tabList} tabChange={this.tabFn.bind(this)}>
<div className='distable dflexj' style={{ paddingBottom: 0 }}>
<KeysFind
onQuery={(va) => {
this.setState({ conditionalQuery: va })
setTimeout(() => {
this.iptsureFn(va)
}, 500)
}}
/>
</div>
<div className='distable dflexj'>
<div>
{/* 批量上传操作 */}
<Button onClick={this.bachUploadQuery.bind(this)}>
批量上传查询
</Button>
<Button
style={{ border: '1px solid red', color: 'red' }}
onClick={this.bachUploadVoid.bind(this)}>
批量上传作废
</Button>
<Button
style={{ border: '1px solid red', color: 'red' }}
onClick={this.bachUploadTagUse.bind(this)}>
批量上传标记成已使用
</Button>
<Button
onClick={() => {
this.multipleCancel()
}}
disabled={this.state.multiple}>
批量作废
</Button>
<Button
onClick={() => {
this.multipleUse()
}}
disabled={this.state.multiple}>
批量标记为已使用
</Button>
</div>
{/* <Button type="info">批量操作</Button> */}
{/* <Ipt
onChange={(e) => this.setState({ search: e })}
value={this.state.search}
wordSearch={this.iptsureFn.bind(this)}
icon="search"
placeholder={"请完整输入key"}
countShow={false}
height={"36px"}
width={"260px"}
onClearItem={(e) => {
this.setState({ search: "" });
let data = {
page: 1,
limit: 10,
};
this.getKeyCodeList(data);
}}
alignment={"left"}
/> */}
</div>
<div className='code-table'>
{this.state.selectiondata.length > 0 ? (
<Alert
type='info'
extraContent={
<Button type='primary' onClick={this.clearFn.bind(this)}>
清空
</Button>
}>
已选择
<font color='#296bef' style={{ fontWeight: 'bold' }}>
{this.state.selectiondata.length}
</font>
发放key总数:{this.state.grantTotal},剩余key总数:
{this.state.surplusTotal},已使用总数:{this.state.usageTotal}
,已过期总数:{this.state.outdateTotal},已作废总数:
{this.state.invalidTotal}
</Alert>
) : null}
<Grid
spliteColor={'#fff'}
tableData={this.state.distdata}
Column={Column}
countbarVisible={false}
maxheight={this.state.tableHeight}
isSwitch={false}
page={this.state.page}
ref='plan_list'
dataCount={this.state.dataCount}
pageChange={(e) => {
this.onPageChange(e)
}}
countChange={(e) => {
this.onCountChange(e)
}}
checkChange={this.selection.bind(this)}
ComponentHandler={(com, rowData) => {
if (com == 'dates') {
return (
<span>
{rowData.begin_time} {rowData.end_time}
</span>
)
}
if (com == 'title') {
return (
<span
className='grid-link'
onClick={(e) => {
this.linkTo(rowData)
}}>
{rowData.title}
</span>
)
}
if (com == 'switch') {
return (
<Switch
size='small'
checked={rowData.open == 1}
disabled={!rowData.is_open}
onChange={(e) => {
this.onSwitchChange(e, rowData)
}}></Switch>
)
}
if (com == 'status') {
return (
<p className='dflexa'>
<span>
<font
className='icon'
style={{
background: menu.keyStatusBg(
parseInt(rowData.status)
)
}}></font>
{rowData.status_text}
</span>
</p>
)
}
if (com == 'opearo') {
let str = null
if (rowData.status == 1) {
str = (
<span>
<a
className='grid-link'
style={{ paddingLeft: '2px', color: '#d8dbdd' }}>
详情
</a>
<Dropdown position={DropdownPosition.RightTop}>
<DropdownClickTrigger>
<div className='linkmore' onClick={(e) => {}}>
{' '}
更多 <Icon type={'down'} />{' '}
</div>
</DropdownClickTrigger>
<DropdownContent>
<Menu
onClick={(e, key) =>
this.menuItemClick(e, key, rowData)
}>
<MenuItem key='1'>标记成已使用</MenuItem>
<MenuItem key='2'>作废</MenuItem>
<MenuItem key='3'>日志</MenuItem>
</Menu>
</DropdownContent>
</Dropdown>
</span>
)
} else {
str = (
<span>
<a
className='grid-link'
style={{ paddingLeft: '2px', color: '#d8dbdd' }}>
详情
</a>
<Dropdown position={DropdownPosition.RightTop}>
<DropdownClickTrigger>
<div className='linkmore' onClick={(e) => {}}>
{' '}
更多 <Icon type={'down'} />{' '}
</div>
</DropdownClickTrigger>
<DropdownContent>
<Menu
onClick={(e, key) =>
this.menuItemClick(e, key, rowData)
}>
<MenuItem key='1' disabled>
标记成已使用
</MenuItem>
<MenuItem key='2' disabled={rowData.status != 2}>
作废
</MenuItem>
<MenuItem key='3'>日志</MenuItem>
</Menu>
</DropdownContent>
</Dropdown>
</span>
)
}
return str
}
}}
/>
{this.state.audit_visible ? (
<div>
<div className='modal'> </div>
<div className='audit-box'>
<Icon
type='close'
className='audit-close'
onClick={(e) => {
this.cancel(e)
}}
/>
<div className='audit-box-title'>发送</div>
<div className='audit-box-question'>
是否立即发送key以及解压密码?
</div>
<div className='phone-group'>
<div>接收手机号</div>
<div className='phone-list'>
<RadioGroup
value={this.state.phone_radio}
isValueEqual={this.isValueEqual}
onChange={(e) => {
this.onPhoneChange(e)
}}>
{this.state.phone_list.map((item, index) => {
return (
<Radio
value={index}
onClick={() => {
if (
item ==
this.state.phone_list[this.state.phone_radio]
) {
this.setState({ phone_radio: -1 })
}
}}>
{item}
</Radio>
)
})}
</RadioGroup>
</div>
</div>
<div className='email-group'>
<div>接收邮箱</div>
<div className='email-list'>
<RadioGroup
value={this.state.email_radio}
isValueEqual={this.isValueEqual}
onChange={(e) => {
this.onEmailChange(e)
}}>
{this.state.email_list.map((item, index) => {
return (
<Radio
value={index}
onClick={() => {
if (
item ==
this.state.email_list[this.state.email_radio]
) {
this.setState({ email_radio: -1 })
}
}}>
{item}
</Radio>
)
})}
</RadioGroup>
</div>
</div>
<div className='input-group'>
<Input
placeholder='请输入接收手机号'
onChange={this.phoneChange}
disabled={this.state.phone_radio > -1}></Input>
</div>
<div className='input-group'>
<Input
placeholder='请输入接收邮箱'
onChange={this.emailChange}
disabled={this.state.email_radio > -1}></Input>
</div>
<div className='audit-btn-group'>
<Button
onClick={(e) => {
this.cancel(e)
}}>
取消
</Button>
<Button
type='primary'
onClick={(e) => {
this.send(e)
}}>
发送
</Button>
</div>
</div>
</div>
) : null}
</div>
</TabPage>
{/* 批量上传 */}
<UseUploadExcel
title={this.state.dialogTitle}
visible={this.state.bachVisible}
onClose={this.bachOnClose.bind(this)}></UseUploadExcel>
</div>
)
}
}

View File

@ -0,0 +1,7 @@
.code-table {
border-top: 1px solid #e0e0e0;
padding-bottom: 24px;
}
.zent-btn-disabled{
background-color: #FFFFFF !important;
}