|
|
import React, { useState, useRef, useEffect, createContext } from "react";import { Input, Select, message, Popover, Pagination, Table,Tree, DatePicker, Form, Radio, Upload, Space, Modal, Cascader, Button } from "antd";// import { dictionary, utils } from "@/config/common";
import { pageSizeOptions } from '@/config/character.config.js'import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';import moment from 'moment'import { FormInput, FormSelect, ImgUpload, SystemSearch, FormDatePicker, Icon, ResultFlow, ExportBtn, SearchTabs } from "@/components"import { useSessionStorageState, useUpdateEffect, useSize, useUpdate, useSetState } from 'ahooks';import ajax from "@/services"import "./index.scss";import status_normal from '@/assets/images/status_normal.png'import status_err from '@/assets/images/status_err.png'import warningIcon from "@/assets/images/warningIcon.png";import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';import { assign } from "lodash";
function FunctionMgm() { //默认
const parameter = { tenantName: "", manage_type: "", note: "", updateAt: "", manage_type_name: "", pn: 1, page_size: Number(pageSizeOptions[0]), // 每页条数
} //等待状态
const [loading, setLoading] = useState(false) // 等待状态
//表格数据
const [tableData, setTableData] = useState([]) //表头
const columns = [ { title: '序号', dataIndex: 'id', key: 'id', align: "center", }, { title: '商户名称', key: 'tenantName', dataIndex: 'tenantName', align: "center", }, { title: '经营业务类型', key: 'manage_type_name', dataIndex: 'manage_type_name', align: "center", }, { title: '备注', key: 'note', dataIndex: 'note', align: "center", render: (text, record, index) => record?.note || "--", }, { title: '创建时间', key: 'updateAt', dataIndex: 'updateAt', align: "center", }, { title: '操作', key: 'operation', dataIndex: 'operation', align: "center", render: (text, record, index) => { return <> <div onClick={() => { updateBtn(record) }} trigger="hover" style={{ color: '#409EFF', cursor: "pointer" }}>编辑</div> </> }, }, ] //检索表单
const [formData, setFormData] = useSetState(parameter) const [lastFormData, setLastFormData] = useState(formData) const lastFormDataRef = useRef(formData)
const [searchForm]=Form.useForm() //商户名称下拉
const [tenantPull, setTenantPull] = useState([]) //总条数
const [total, setTotal] = useState() //编辑开关
const [updateVisible, setUpdateVisible] = useState(false) //更新表单
const [updateForm]=Form.useForm() //绑定功能
const treeData = [ { title: '路内停车管理系统', key: '0', children: [ { title: '停车场管理', key: '0-0', children: [ { title: '停车场管理', key: '0-0-0', children: [ { title: '【按钮】查询', key: '0-0-0-0', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】查看', key: '', }, { title: '【按钮】停车场配置', key: '', }, ] }, { title: '停车记录查询', key: '0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】详情', key: '', }, ] }, { title: '泊位列表', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看', key: '', }, ] }, ], }, { title: '业务管理', key: '0-0-1', children: [ { title: '计费规则管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】查看', key: '', }, ] }, { title: '白名单管理', key: '', children: [ { title: '白名单记录', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, { title: '【按钮】查看', key: '', }, { title: '【按钮】修改', key: '', }, { title: '【按钮】启用', key: '', }, ] }, { title: '白名单申请', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】创建申请', key: '', }, { title: '【按钮】查看', key: '', }, { title: '【按钮】修改', key: '', }, { title: '【按钮】删除', key: '', }, ] }, { title: '白名单审核', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】审核', key: '', }, ] }, ] }, ], }, { title: '人员管理', key: '0-0-1', children: [ { title: '人员管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】离职/在职', key: '', }, ] }, { title: '人员考勤', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, ] }, ], }, { title: '设备管理', key: '0-0-0-1', children: [ { title: '路内车场设备监控', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】详情', key: '', }, ] }, { title: '路外车场设备监控', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】详情', key: '', }, ] }, { title: '视频监控设备管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】删除', key: '', }, { title: '【按钮】查看监控', key: '', }, ] }, { title: '杆位管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看', key: '', }, { title: '【按钮】导入', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: 'PDA管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】删除', key: '', }, ] }, { title: '品牌管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, ] }, ] }, { title: '运营统计', key: '0-0-1', children: [ { title: '停车场数据分析', key: '', children: [ { title: '停车场实况数据', key: '', children: [ { title: '【按钮】查询', key: '', }, ] }, { title: '停车场运营分析', key: '', children: [ { title: '【按钮】查询', key: '', }, ] },
] }, ], }, { title: '财务管理', key: '0-0-1', children: [ { title: '停车场欠费订单', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '欠费追缴查询', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '停车场收入报表', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '营收总报表', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '收费员收入统计', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '支付渠道统计', key: '', children: [ { title: '【按钮】查询', key: '', } ] }, { title: '发票记录', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】冲红重开', key: '', }, ] }, { title: '停车支付订单', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, ], }, ], }, { title: '路外停车管理系统', key: '0-0', children: [ { title: '停车场管理', key: '0-0-0', children: [ { title: '停车场管理', key: '0-0-0-0', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】查看', key: '', }, { title: '【按钮】二维码下载', key: '', }, { title: '【按钮】保存并同步', key: '', }, { title: '【按钮】停车场配置', key: '', }, ] }, { title: '计费规则管理', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】删除', key: '', }, { title: '【按钮】查看', key: '', }, ] }, { title: '停车记录查询', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】详情', key: '', }, ] }, ], }, { title: '人员管理', key: '0-0-1', children: [ { title: '交接班报表', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看', key: '', }, ] }, { title: 'MS收费员管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】在职/离职', key: '', }, ] }, ], }, { title: '设备管理', key: '0-0-0-1', children: [ { title: '视频监控设备管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】删除', key: '', }, { title: '【按钮】查看监控', key: '', }, ] }, { title: '路外设备管理', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看', key: '', } ] } ] }, { title: '运营统计', key: '0-0-1', children: [ { title: '停车场数据分析', key: '', children: [ { title: '停车场实况数据', key: '', children: [ { title: '【按钮】查询', key: '', }, ] }, { title: '停车场运营分析', key: '', children: [ { title: '【按钮】查询', key: '', }, ] },
] }, ], }, { title: '异常管理', key: '0-0-1', children: [ { title: '抬杆记录', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '特殊放行记录', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '车牌修正记录', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] } ], }, { title: '财务管理', key: '0-0-1', children: [ { title: '停车场支付订单', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '营收总报表', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '停车场收入报表', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, ] }, { title: '支付渠道统计', key: '', children: [ { title: '【按钮】查询', key: '', }, ] }, ], }, ], }, { title: '充电管理系统', key: '0-0', children: [ { title: '实时监控', key: '0-0-0', children: [ { title: '电桩监控', key: '0-0-0-0', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看详情', key: '', }, { title: '【按钮】远程监控', key: '', }, { title: '【按钮】状态变更记录', key: '', }, ] }, { title: '充电监控', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看详情', key: '', }, ] }, { title: '地锁监控', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看详情', key: '', }, ] }, { title: '充电泊位监控', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看详情', key: '', }, ] }, ], }, { title: '记录查询', key: '0-0-1', children: [ { title: '充电订单', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, { title: '【按钮】查看详情', key: '', }, ] }, { title: '开锁记录', key: '', children: [ { title: '【按钮】查询', key: '', } ] }, { title: '预约订单', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】导出', key: '', }, { title: '【按钮】查看', key: '', }, ] }, { title: '违规行为记录', key: '', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】详情', key: '', }, ] }, ], }, ] }, { title: '系统管理', key: '0-0', children: [ { title: '商户信息查看', key: '0-0-0', children: [ { title: '【按钮】查询', key: '0-0-0-0', }, { title: '【Tab】商户信息', key: '', children: [ { title: '【按钮】查询', key: '', }, ] }, { title: '【Tab】发票配置', key: '', children: [ { title: '【按钮】查询', key: '', }, ] }, { title: '计费规则管理', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】删除', key: '', }, { title: '【按钮】查看', key: '', }, ] }, { title: '停车记录查询', key: '0-0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】详情', key: '', }, ] }, ], }, { title: '管理员管理', key: '0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】离职', key: '', }, ], }, { title: '角色管理', key: '0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】删除', key: '', }, ], }, { title: '组织架构', key: '0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】添加', key: '', }, { title: '【按钮】编辑', key: '', }, { title: '【按钮】删除', key: '', }, ], }, { title: '系统日志', key: '0-0-1', children: [ { title: '【按钮】查询', key: '', }, { title: '【按钮】查看', key: '', } ], }, ], }, ]; //获取商户名称的下拉
const getTenantNamePull = () => { ajax.ElectInvoice.getSelectOperator().then( res => { if (res.status == 20000) { setTenantPull(res.data) } else { message.error(res.message) } } ).catch( err => { console.log(err); } ) } //获取表格数据
const getTable = (data) => {
setLoading(true) ajax.getFunctionMgmTable(data).then( res => { if (res.status == 20000) { setTableData(res.data.list) setTotal(res.data.total_records) setLoading(false) } else { message.error(res.message) } setLoading(false) } ).catch( (err) => { console.log(err) } ) } //搜索数据
const getSearchData = () => { const value=searchForm.getFieldsValue(['shop_name']) setFormData(Object.assign({...formData,pn:1,page_size:Number(pageSizeOptions[0])})) getTable({...value,pn:1,page_size:Number(pageSizeOptions[0])}) }
//切换分页
const changePn = (pn, length) => { if (lastFormData.page_size === length) { lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }) const value=searchForm.getFieldsValue(['shop_name']) setLastFormData(Object.assign(lastFormData,{...value},{pn: pn})) getTable(lastFormData) } } //切换每页条数
const changeLength = (pn, length) => { setFormData(Object.assign({}, formData, { pn: 1, page_size: length })) setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length }) getTable(Object.assign({}, lastFormData, { pn: 1, page_size: length })) }
//重置数据
const getResetData = () => { searchForm.setFieldsValue({ shop_name:"" }) getTable({...parameter}) }
//编辑
const updateBtn = (record) => { setUpdateVisible(true) updateForm.setFieldsValue( { shop_name:record.tenantName, note:record.note } ) setFormData(record) } //点击取消-返回上一层
const createOncancel = () => { setUpdateVisible(false) } //编辑后提交
const submitUpdate=()=>{
}
const onSelect = (selectedKeys, info) => { console.log('selected', selectedKeys, info); }; const onCheck = (checkedKeys, info) => { console.log('onCheck', checkedKeys, info); };
useEffect( () => { const value = searchForm.getFieldsValue(["operatorid", "phone", "name", "account", "status"]) getTenantNamePull() getTable(formData) }, [] ) return ( <div id="FunctionMgm" > { !updateVisible ? <div className="merchant-info-table"> <div className="panel"> <div className="title">查询条件</div> <div className="panel-1"> <Form layout="inline" form={searchForm} > <Form.Item label="商户名称：" name="shop_name" className="search-form yisa-search" > <Select className="yisa-select" options={tenantPull} placeholder="请选择" /> </Form.Item> <Form.Item className="btnBox" > <Button className="reset" onClick={() => { getResetData() }}> 清空 </Button> <Button type="primary" className="submit" icon={<SearchOutlined />} onClick={() => { getSearchData() }}> 查询 </Button> </Form.Item> </Form> </div> </div> <div className="table-content"> <Table columns={columns} className="table" pagination={false} dataSource={tableData} loading={loading} scroll={{ y: "calc(100vh - 280px)" }} ></Table> <Pagination className="pagination-common" showSizeChanger showQuickJumper showTotal={() => { if (total) { return `共 ${total} 条` } else return `共 0 条` } } total={total} current={formData.pn} pageSize={formData.page_size} pageSizeOptions={pageSizeOptions} onChange={changePn} onShowSizeChange={changeLength} /> </div> </div> : '' }
{ updateVisible ? <div className="updateCard"> <div className="title">商户功能管理</div> <div> <div className="form-note"> <Form form={updateForm} > <Form.Item label="商户名称" name="tenantName" > {formData.tenantName} </Form.Item> <Form.Item label="备注" name="note" > <Input></Input> </Form.Item>
<Form.Item className="btns"> <Button type="primary" >全部选择</Button> <Button className="rest" type="primary" >全部取消</Button> </Form.Item>
<Form.Item label="绑定功能" name="bind" > {/* <Tree checkable defaultExpandedKeys={['0-0-0', '0-0-1']} defaultSelectedKeys={['0-0-0', '0-0-1']} defaultCheckedKeys={['0-0-0', '0-0-1']} onSelect={onSelect} onCheck={onCheck} treeData={treeData} /> */} </Form.Item>
<Form.Item> <Button onClick={submitUpdate} type="primary" htmlType="submit">保存</Button> <Button className="rest" onClick={createOncancel}>取消</Button> </Form.Item> </Form> </div>
</div> </div> : '' }
</div> )}
export default FunctionMgm;
|
