diff --git a/scripts/webpack.dev.js b/scripts/webpack.dev.js index 6efe04f..34a213c 100644 --- a/scripts/webpack.dev.js +++ b/scripts/webpack.dev.js @@ -14,7 +14,7 @@ let _devConfig = { proxy: { "/PMS": { // target: "http://192.168.8.7:3001/mock/3247", - target: "http://10.10.128.65:3001/mock/18", + target: "http://10.10.128.65:3001/mock/11", pathRewrite: { "^/PMS": "", }, diff --git a/src/assets/images/status_err.png b/src/assets/images/status_err.png new file mode 100644 index 0000000..cebba9a Binary files /dev/null and b/src/assets/images/status_err.png differ diff --git a/src/assets/images/status_normal.png b/src/assets/images/status_normal.png new file mode 100644 index 0000000..b1d1085 Binary files /dev/null and b/src/assets/images/status_normal.png differ diff --git a/src/assets/images/warningIcon.png b/src/assets/images/warningIcon.png new file mode 100644 index 0000000..f14056c Binary files /dev/null and b/src/assets/images/warningIcon.png differ diff --git a/src/components/form/FormInput/index.jsx b/src/components/form/FormInput/index.jsx index dcc5578..855b1c7 100644 --- a/src/components/form/FormInput/index.jsx +++ b/src/components/form/FormInput/index.jsx @@ -28,6 +28,7 @@ export default function FormInput(props) { } = props; const setValue = (e)=>{ + if(isReceive){ onChange(e) }else{ @@ -35,6 +36,7 @@ export default function FormInput(props) { const val = e.target.value.split('，').map( function (curr) { return curr.replace(/[\!\@\#\$\%\^\&\*\?\？\！\_\——]/g, ""); }).join('') + e.target.value=val } onChange(e) @@ -57,7 +59,7 @@ export default function FormInput(props) { )}
- + {isPassword ? } - + {isPassword && error? <> diff --git a/src/components/form/FormSelect/index.jsx b/src/components/form/FormSelect/index.jsx index 173b6f8..6cffa5f 100644 --- a/src/components/form/FormSelect/index.jsx +++ b/src/components/form/FormSelect/index.jsx @@ -34,7 +34,7 @@ function FormSelectSingle(props) { hasUnlimited = true, tagRender, labelPosition = "left", - getPopupContainer=()=>document.body + getPopupContainer = () => document.body } = props const [value, setValue] = useState(defaultValue) const handleChange = (e, option) => { @@ -92,13 +92,18 @@ function FormSelectSingle(props) { ) })} */} - {yisaData.map(({ value, label, disabled = false }, index) => { - return ( - - ) - })} + + { + yisaData?.map(({ value, label, disabled = false }, index) => { + return ( + + ) + }) + } + +
) diff --git a/src/components/form/FormSelectionBox/index.jsx b/src/components/form/FormSelectionBox/index.jsx index 879f2df..b7ff44d 100644 --- a/src/components/form/FormSelectionBox/index.jsx +++ b/src/components/form/FormSelectionBox/index.jsx @@ -64,7 +64,7 @@ function FormSelectionBox(props) {
{ yisaLabel ? - + : null } diff --git a/src/pages/MerchantMgm/FunctionMgm/index.scss b/src/pages/MerchantMgm/FunctionMgm/index.scss index 1838f71..b5fc842 100644 --- a/src/pages/MerchantMgm/FunctionMgm/index.scss +++ b/src/pages/MerchantMgm/FunctionMgm/index.scss @@ -3,3 +3,219 @@ $color-container-bg : var(--color-container-bg); $color-user-list-bg : var(--color-user-list-bg); $color-text : var(--color-text); $color-primary : var(--color-primary); + +#FunctionMgm{ + .panel { + width: 100%; + padding-top: 20px; + padding-left: 10px; + background: none; + + .search-form{ + margin-left: 10px; + } + + .label { + width: 90px; + text-align-last: end; + } + + + .yisa-select { + width: 190px; + + .ant-select-selector { + background: transparent; + border-color: var(--color-border); + } + + } + + .form-input { + width: 190px; + background: transparent; + border-color: var(--color-border); + } + + .ant-select-arrow { + background: none !important; + } + + .ant-input { + background: transparent; + border-color: var(--color-border); + } + + + .panel-1 { + display: flex; + } + .btnBox { + display: flex; + align-items: center; + margin-left: 30px; + + .btn { + margin: 0 5px; + border-radius: 5px; + border: none; + } + + .search-btn { + background-color: #409EFF; + } + + .reset-btn { + color: #000; + background-color: #fff; + } + + .create-btn { + background-color: #67C23A; + + } + } + + } + + .table { + width: 98%; + margin: 15px 10px 10px 15px; + + + .ant-table-thead { + th { + padding: 0px 16px; + height: 50px; + } + + .ant-table-cell { + background: var(--color-table-header-bg) !important; + font-weight: 700; + + &::before { + display: none; + } + } + } + + .ant-table-tbody { + tr { + &:nth-child(2n) { + td { + background: #3E4557 !important; + } + } + + &:hover { + td { + background: #3E4557 !important; + } + } + + td { + background: #3E4557 !important; + border-bottom-color: #f2f2f2; + } + } + } + + .ant-pagination-options { + .ant-select { + &:hover { + .ant-select-selector { + border-color: #f5f6f9; + box-shadow: none; + } + } + } + + .ant-select-selector { + border-color: #f5f6f9; + } + + .ant-select-focused { + .ant-select-selector { + box-shadow: none !important; + border-color: #f5f6f9 !important; + } + } + + .ant-pagination-options-quick-jumper { + input { + background: #3E4557; + border-color: #f5f6f9; + + &:focus { + box-shadow: none; + } + } + } + } + } + + .table-status-normal { + width: 20px; + height: 20px; + border-radius: 50%; + border: 1px solid #67C23A; + } + + .table-status-err { + width: 20px; + height: 20px; + border-radius: 50%; + border: 1px solid red; + } + + .scheduleBtn { + background: #409eff; + border: none; + width: 50px; + border-radius: 4px; + cursor: pointer; + } + + .updateCard{ + padding: 20px; + .title { + display: flex; + align-items: center; + font-size: 18px; + color: #fff; + font-weight: 500; + + &::before { + content: ''; + display: inline-block; + margin-right: 10px; + width: 5px; + height: 20px; + border-radius: 10px; + background-color: #409eff; + } + } + .form-note{ + margin: 20px 0 0 30px; + .ant-form-item-label{ + width: 100px; + text-align-last: right; + } + .ant-input{ + background: transparent; + border-color: var(--color-border); + } + .btns{ + margin-left: 96px; + + .btn{ + margin: 0 8px; + background-color: #fff; + color: #606266; + border: none; + border-radius: 4px; + } + } + } + } +} diff --git a/src/pages/MerchantMgm/FunctionMgm/loadable.jsx b/src/pages/MerchantMgm/FunctionMgm/loadable.jsx index a91372b..6323541 100644 --- a/src/pages/MerchantMgm/FunctionMgm/loadable.jsx +++ b/src/pages/MerchantMgm/FunctionMgm/loadable.jsx @@ -1,15 +1,1402 @@ -import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; +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 moment from 'moment' -// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; -// import ajax from "@/services" -// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" -// import "./index.scss"; -// import errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; +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() { - return
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", + }, + { + title: '创建时间', + key: 'updateAt', + dataIndex: 'updateAt', + align: "center", + }, + { + title: '操作', + key: 'operation', + dataIndex: 'operation', + align: "center", + render: (text, record, index) => { + return <> +
{ updateBtn(record) }} trigger="hover" style={{ color: '#409EFF', cursor: "pointer" }}>编辑
+ + }, + }, + ] + //检索表单 + const [formData, setFormData] = useSetState(parameter) + const [lastFormData, setLastFormData] = useState(formData) + const lastFormDataRef = useRef(formData) + + const [searchForm]=Form.useForm() + //是否第一次检索表单 + const [isFirst,setIsFirst]=useState(false) + //商户名称下拉 + 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.getTenantPull().then( + res => { + if (res.status == 20000) { + setTenantPull(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { console.log(err); } + ) + } + //获取表格数据 + const getTable = () => { + const value=searchForm.getFieldsValue(['shop_name']) + setLoading(true) + ajax.getFunctionMgmTable(value).then( + res => { + if (res.status == 20000) { + setTableData(res.data.list) + setTotal(res.data.total_records) + setIsFirst(true) + } else { + message.error(res.message) + } + setLoading(false) + } + ).catch( + (err) => { + console.log(err) + } + ) + } + //搜索数据 + const getSearchData = () => { + getTable() + } + + //切换分页 + const changePn = (pn, length) => { + if (lastFormData.page_size === length) { + setLastFormData(Object.assign({}, lastFormData, { pn: pn })) + lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }) + getTable(Object.assign({}, lastFormData, { pn: pn })) + } + } + //切换每页条数 + 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:"" + }) + if(isFirst){ + getTable() + } + } + + //编辑 + 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( + () => { + getTenantNamePull() + }, [] + ) + return ( +
+ { + !updateVisible ? + <> +
+
+
+ + + + + + + + + + + {/* */} + + + + + + +
+
+ +
+
: '' + } + +
+ ) } -export default FunctionMgm; \ No newline at end of file +export default FunctionMgm; diff --git a/src/pages/MerchantMgm/InvoiceConf/index.scss b/src/pages/MerchantMgm/InvoiceConf/index.scss index 1838f71..31e8667 100644 --- a/src/pages/MerchantMgm/InvoiceConf/index.scss +++ b/src/pages/MerchantMgm/InvoiceConf/index.scss @@ -3,3 +3,340 @@ $color-container-bg : var(--color-container-bg); $color-user-list-bg : var(--color-user-list-bg); $color-text : var(--color-text); $color-primary : var(--color-primary); + +.invoiceConf { + .panel { + width: 100%; + height: 100px; + padding-top: 20px; + padding-left: 0.625rem; + background: none; + + .btn { + margin: 5px 5px; + border-radius: 5px; + border: none; + } + .reset-btn { + color: #000; + background-color: #fff; + } + + .create-btn { + background-color: #67C23A; + + } + + .search-btn { + background-color: #409EFF; + } + .panel-1 { + display: flex; + align-items: center; + + .ant-input{ + background: transparent; + border-color: var(--color-border); + } + + .form-item{ + margin: 5px 40px; + } + + + .ant-select-arrow { + background: none !important; + } + + + .yisa-cascader { + width: 8rem; + background: transparent; + border-color: var(--color-border); + } + + .yisa-select { + width: 11.875rem; + + .ant-select-selector { + background: transparent; + border-color: var(--color-border); + } + + } + + .search-group-item { + margin-right: 0.625rem; + width: 16.875rem; + background: transparent; + border-color: var(--color-border); + + } + } + + + } + + .table { + width: 98%; + margin: 15px 10px 10px 15px; + + + .ant-table-thead { + th { + padding: 0px 16px; + height: 50px; + } + + .ant-table-cell { + background: var(--color-table-header-bg) !important; + font-weight: 700; + + &::before { + display: none; + } + } + } + + .ant-table-tbody { + tr { + &:nth-child(2n) { + td { + background: #3E4557 !important; + } + } + + &:hover { + td { + background: #3E4557 !important; + } + } + + td { + background: #3E4557 !important; + border-bottom-color: #f2f2f2; + } + } + } + + .ant-pagination-options { + .ant-select { + &:hover { + .ant-select-selector { + border-color: #f5f6f9; + box-shadow: none; + } + } + } + + .ant-select-selector { + border-color: #f5f6f9; + } + + .ant-select-focused { + .ant-select-selector { + box-shadow: none !important; + border-color: #f5f6f9 !important; + } + } + + .ant-pagination-options-quick-jumper { + input { + background: #3E4557; + border-color: #f5f6f9; + + &:focus { + box-shadow: none; + } + } + } + } + } + + .scheduleBtn { + background: #409eff; + border: none; + width: 50px; + border-radius: 4px; + cursor: pointer; + } + + #create { + height: 800px; + overflow-y: scroll; + + .create-form { + .btns { + display: flex; + justify-content: end; + margin-right: 20px; + margin-top: 10px; + + .btn { + width: 70px; + height: 36px; + border: none; + border-radius: 4px; + text-align: center; + cursor: pointer; + } + + .btn-1 { + color: #fff; + background-color: #409EFF; + margin-right: 10px; + } + + .btn-2 { + background-color: #fff; + color: #000; + } + } + + .container { + padding: 20px 20px; + display: flex; + + .left { + width: 50%; + margin-right: 20px; + + .left-1 { + width: 500px; + } + + .left-2 { + width: 500px; + background-color: #3E4557; + } + + .left-3 { + width: 500px; + } + + .cc-form-input { + margin: 10px 5px 20px 30px; + + .cc-form-name { + width: 100px; + text-align: right; + } + } + + .select { + margin: 10px 5px 20px 30px; + + .form-select-single-name { + width: 100px; + text-align: right; + } + } + + .selectionBox { + margin-left: 64px; + } + + + } + + .right { + width: 50%; + + .right-wrap { + width: 500px; + + .cc-form-input { + margin: 10px 5px 20px 30px; + + .cc-form-name { + width: 110px; + text-align: right; + } + } + } + + } + + } + } + } + + #check { + height: 800px; + overflow-y: scroll; + + .check-form { + .btns { + display: flex; + justify-content: end; + margin-right: 20px; + margin-top: 10px; + + .btn { + width: 70px; + height: 36px; + border: none; + border-radius: 4px; + text-align: center; + cursor: pointer; + background-color: #fff; + color: #000; + } + + + } + + .container { + padding: 20px 20px; + display: flex; + + .left { + width: 50%; + margin: 0 20px; + display: flex; + flex-direction: column; + + .left-wrap { + width: 300px; + margin-bottom: 40px; + + .item { + margin: 15px; + + .item-title { + display: inline-block; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + + + } + + } + + .right { + width: 50%; + + .right-wrap { + width: 500px; + .item { + margin: 15px; + + .item-title { + display: inline-block; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + + } + + } + + } + } + } +} diff --git a/src/pages/MerchantMgm/InvoiceConf/loadable.jsx b/src/pages/MerchantMgm/InvoiceConf/loadable.jsx index 51cf4c1..2ec92a2 100644 --- a/src/pages/MerchantMgm/InvoiceConf/loadable.jsx +++ b/src/pages/MerchantMgm/InvoiceConf/loadable.jsx @@ -1,15 +1,1024 @@ import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; -// import { dictionary, utils } from "@/config/common"; -// import moment from 'moment' -// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; -// import ajax from "@/services" -// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" -// import "./index.scss"; -// import errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; +import { Input, Select, Cascader, DatePicker, Button, message, Pagination, Table, Popover, Form, Radio, Space, Modal, } from "antd"; +import { dictionary, utils } from "@/config/common"; +import moment from 'moment' +import { pageSizeOptions } from '@/config/character.config.js' +import { useSessionStorageState, useUpdateEffect, useSize, useUpdate, useSetState } from 'ahooks'; +import ajax from "@/services" +import { FormInput, FormSelect, FormSelectionBox, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" +import "./index.scss"; +import errorImg from "@/assets/images/layout/error.png" +import { useLocation } from "react-router-dom"; +import { SearchOutlined, DeleteOutlined } from '@ant-design/icons'; + +const { RangePicker } = DatePicker; + + function InvoiceConf() { - return
InvoiceConf
+ //默认 + const parameter = { + info_id: '',//发票ID + tenantName: '', + receipt_type: 0,//发票平台 + receipt_type_name: '', + invoice_item: '',//开票项目 + sell_name: '', + sell_num: '',//销货方识别号 + drawer_name: '', + updatePerson: '', + updateAt: '', + type: 1, + status: 0, + status_name: '', + start: moment().subtract(90, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'), + end: moment().format('YYYY-MM-DD HH:mm:ss'), + + tax_way: '',//计税方式 + tax_type: '',//含税标志 + tax_rate: '',//税率 + code: "", + auth_code: "", + request_url: "", + request_code: "", + request_func: '', + namespace: "", + tax_name: "", + tax_num: "", + sell_name: "", + sell_num: '',//销货方识别号 + sell_address: "", + sell_phone: '', + sell_bank_name: '', + sell_bank_num: '', + pay_name: '', + check_name: '', + mini_amount: '', + max_amount: '', + order_type: '',//订单类型 + pn: 1, + page_size: Number(pageSizeOptions[0]), // 每页条数 + } + + //检索表单 + const [formData, setFormData] = useSetState(parameter) + const [lastFormData, setLastFormData] = useState(formData) + const lastFormDataRef = useRef(formData) + const [records, setRecords] = useState({}) + + const [searchForm] = Form.useForm() + //是否第一次检索表单 + const [isFirst,setIsFirst]=useState(false) + //表格数据 + const [tableData, setTableData] = useState([]) + //等待状态 + const [loading, setLoading] = useState(false) // 等待状态 + //总条数 + const [total, setTotal] = useState() + + //商户名称下拉 + const [tenantPull, setTenantPull] = useState([]) + //计税方式下拉 + const [taxWay, setTaxWay] = useState([]) + //税率下拉 + const [taxRate, setTaxRate] = useState([]) + //含税标志下拉 + const [taxType, setTaxType] = useState([]) + //开票项目下拉 + const [invoiceItem, setInvoiceItem] = useState([]) + //新增开关 + const [createVisible, setCreateVisible] = useState(false) + //查看开关 + const [checkVisible, setCheckVisible] = useState(false) + + //商户类型选择 + const tenantOption = [ + { + label: '商户名称', + value: 1, + }, + { + label: '销货方名称', + value: 2, + }, + { + label: '销货放识别号', + value: 3, + }, + ] + //发票平台 + const invoicePlat = [ + { + label: '全部', + value: 0, + }, + { + label: '航信', + value: 1, + }, + { + label: '航信诺诺', + value: 2, + }, + { + label: '百旺', + value: 3, + }, + ] + //发票平台单选 + const invoicePlatSelection = [ + { + label: '航信', + value: 1, + }, + { + label: '航信诺诺', + value: 2, + }, + { + label: '百旺', + value: 3, + }, + ] + //订单类型的复选 + const orderType = [ + { + label: '停车支付订单', + value: 1, + }, + { + label: '停车卡订单', + value: 2, + }, + ] + + //状态 + const statusType = [ + { + label: '全部', + value: 0, + }, + { + label: '已启用', + value: 1, + }, + { + label: '已停用', + value: 2, + }, + ] + + //表头 + const columns = [ + { + title: '配置ID', + dataIndex: 'info_id', + key: 'info_id', + align: "center", + }, + { + title: '商户名称', + key: 'tenantName', + dataIndex: 'tenantName', + align: "center", + }, + { + title: '发票平台', + key: 'receipt_type_name', + dataIndex: 'receipt_type_name', + align: "center", + }, + { + title: '开票项目', + key: 'invoice_item', + dataIndex: 'invoice_item', + align: "center", + }, + { + title: '销货方名称', + key: 'sell_name', + dataIndex: 'sell_name', + align: "center", + }, + { + title: '销货方识别号', + key: 'sell_num', + dataIndex: 'sell_num', + align: "center", + }, + { + title: '开票人', + key: 'drawer_name', + dataIndex: 'drawer_name', + align: "center", + }, + { + title: '状态', + key: 'status', + dataIndex: 'status', + align: "center", + render: (value, row, index) => { + return ( + <> + { + row.status == 1 ? +
已启用
: +
已停用
+ } + + ) + } + }, + { + title: '最后操作人', + key: 'updatePerson', + dataIndex: 'updatePerson', + align: "center", + }, + { + title: '最后修改时间', + key: 'updateAt', + dataIndex: 'updateAt', + align: "center", + }, + { + title: '操作', + key: 'operation', + dataIndex: 'operation', + align: "center", + render: (text, record, index) => { + return <> + +
{ checkBtn(index) }}>详情
+ { + record.status == 2 ? + <> +
{ updateBtn(index) }}>编辑
+
{ stopBtn(index) }}>启用
+ :
{ stopBtn(index) }}>停用
+ } + + }> + + + + }, + }, + ] + + //获取表格数据 + const getTable = () => { + const value = searchForm.getFieldsValue(["info_id", "type_name", "type", "receipt_type", "status"]) + const value1 = searchForm.getFieldValue("last_time") + const start = moment(value1[0]?._d).subtract(90, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss') + const end = moment(value1[0]?._d).format('YYYY-MM-DD HH:mm:ss') + setLoading(true) + ajax.getInvoiceTable({ ...value, start, end }).then( + res => { + if (res.status == 20000) { + setTableData(res.data.list) + setTotal(res.data.total_records) + setIsFirst(true) + } else { + message.error(res.message) + } + setLoading(false) + } + ).catch( + (err) => { + console.log(err) + } + ) + } + //获取商户名称的下拉 + const getTenantNamePull = () => { + ajax.getTenantPull().then( + res => { + if (res.status == 20000) { + setTenantPull(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { console.log(err); } + ) + } + //获取计税方式下拉 + const getTaxWayPull = () => { + ajax.getTaxWayPull().then( + res => { + if (res.status = 20000) { + setTaxWay(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + + //获取税率的下拉 + const getTaxRatePull = () => { + ajax.getTaxRatePull().then( + res => { + if (res.status == 20000) { + setTaxRate(res.data) + } else { + message.error(res.error) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + //获取含税标志的下拉 + const getTaxTypePull = () => { + ajax.getTaxTypePull().then( + res => { + if (res.status == 20000) { + setTaxType(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + //获取开票项目的下拉 + const getInvoiceItemPull = () => { + ajax.getInvoiceItemPull().then( + res => { + if (res.status == 20000) { + setInvoiceItem(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + + //搜索 + const getSearchData = () => { + getTable() + } + //新增 + const createData = () => { + setCreateVisible(true) + } + //编辑 + const updateBtn = (index) => { + setCreateVisible(true) + ajax.checkForm(index).then( + res => { + if (res.status == 20000) { + setFormData(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + //查看详情 + const checkBtn = (index) => { + setCheckVisible(true) + ajax.checkForm(index).then( + res => { + if (res.status == 20000) { + setRecords(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + + //启用/停用 + function stopBtn(index) { + ajax.updateInvoiceStatus(index).then( + res => { + if (res.status == 20000) { + getTable() + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + + + //切换分页 + const changePn = (pn, length) => { + if (lastFormData.page_size === length) { + setLastFormData(Object.assign({}, lastFormData, { pn: pn })) + lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }) + getTable(Object.assign({}, lastFormData, { pn: pn })) + } + } + //切换每页条数 + 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 createOncancel = () => { + setCreateVisible(false) + setCheckVisible(false) + } + //保存 + const createTenant = () => { + console.log(formData); + ajax.createForm(formData).then( + res => { + if (res.status == 20000) { + message.success("已保存", 2.5) + setCreateVisible(false) + } else { + message.error(res.message) + } + } + ).catch(err => console.log(err)) + } + + //重置数据 + const getResetData = () => { + searchForm.setFieldsValue({ + info_id: "", + type_name: '', + type: 1, + receipt_type: 0, + status: 0, + last_time: '' + }) + if(isFirst){ + getTable() + } + } + + + useEffect( + () => { + getTenantNamePull() + getTaxWayPull() + getTaxRatePull() + getTaxTypePull() + getInvoiceItemPull() + }, [] + ) + + + return ( +
+ + { + !createVisible && !checkVisible ? + <> +
+
+ +
+ + + + + + + + } + placeholder="请输入" + /> + + + + + + + + + + + + + + + + + + + +
+
+
+
+ { + if (total) { + return `共 ${total} 条` + } + else return `共 0 条` + } + } + total={total} + current={formData.pn} + pageSize={formData.page_size} + pageSizeOptions={pageSizeOptions} + onChange={changePn} + onShowSizeChange={changeLength} + /> + : + '' + } + + { + createVisible ? + <> +
+
+
+ + +
+
+
+
+ { + setFormData({ receipt_type: e }) + }} + className="selectionBox" + > + { + setFormData({ tenantName: e }) + }} + /> +
+
+ { + setFormData({ invoice_item: e }) + }} + /> + {/* 复选 */} + { + setFormData({ order_type: e }) + }} + className="selectionBox" + > + { + setFormData({ tax_way: e }) + }} + /> + { + setFormData({ tax_rate: e }) + }} + /> + { + setFormData({ tax_type: e }) + }} + /> +
+
+ { + setFormData({ code: e.target.value }) + }} + /> + { + setFormData({ auth_code: e.target.value }) + }} + /> + { + setFormData({ request_url: e.target.value }) + }} + /> + { + setFormData({ request_code: e.target.value }) + }} + /> + { + setFormData({ request_func: e.target.value }) + }} + /> + { + setFormData({ namespace: e.target.value }) + }} + /> +
+ +
+
+
+ { + setFormData({ tax_name: e.target.value }) + }} + /> + { + setFormData({ tax_num: e.target.value }) + }} + /> + { + setFormData({ sell_name: e.target.value }) + }} + /> + { + setFormData({ sell_num: e.target.value }) + }} + /> + { + setFormData({ sell_address: e.target.value }) + }} + /> + { + setFormData({ sell_phone: e.target.value }) + }} + /> + { + setFormData({ sell_bank_name: e.target.value }) + }} + /> + { + setFormData({ sell_bank_num: e.target.value }) + }} + /> + { + setFormData({ pay_name: e.target.value }) + }} + /> + { + setFormData({ check_name: e.target.value }) + }} + /> + { + setFormData({ drawer_name: e.target.value }) + }} + /> + { + setFormData({ mini_amount: e.target.value }) + }} + /> + { + setFormData({ max_amount: e.target.value }) + }} + /> +
+ +
+
+
+ +
+ : '' + } + + { + checkVisible ? + +
+
+
+ +
+
+
+
+
配置ID：
{records.info_id}
+
状态：
{records.status_name}
+
商户名称：
{records.tenantName}
+
发票平台：
{records.receipt_type_name}
+
+
+
开票项目：
{records.invoice_item}
+
计税方式：
{records.tax_way}
+
税率（%）：
{records.tax_rate}
+
含税标志：
{records.tax_type}
+
+
+
平台编码：
{records.code}
+
授权码：
{records.auth_code}
+
请求地址：
{records.request_url}
+
请求码：
{records.request_code}
+
请求函数：
{records.request_func}
+
目标命名空间：
{records.namespace}
+
+ +
+
+
+
纳税人名称：
{records.tax_name}
+
纳税人识别号：
{records.tax_num}
+
销货方名称：
{records.sell_name}
+
销货放识别号：
{records.sell_num}
+
销贷方地址：
{records.sell_address}
+
销贷方电话：
{records.sell_phone}
+
销贷方银行名称：
{records.sell_bank_name}
+
销贷方银行账号：
{records.sell_bank_num}
+
收款人：
{records.pay_name}
+
复核：
{records.check_name}
+
开票人：
{records.drawer_name}
+
最小开票金额：
{records.mini_amount}
+
最大开票金额：
{records.max_amount}
+
最后操作人：
{records.updatePerson}
+
最后修改时间：
{records.updateAt}
+
初始创建时间：
{records.create_time}
+
+
+
+
+
+ : "" + } + +
+ ) } -export default InvoiceConf; \ No newline at end of file +export default InvoiceConf; diff --git a/src/pages/MerchantMgm/MerchantAdmin/index.scss b/src/pages/MerchantMgm/MerchantAdmin/index.scss index 1838f71..c1af0db 100644 --- a/src/pages/MerchantMgm/MerchantAdmin/index.scss +++ b/src/pages/MerchantMgm/MerchantAdmin/index.scss @@ -3,3 +3,320 @@ $color-container-bg : var(--color-container-bg); $color-user-list-bg : var(--color-user-list-bg); $color-text : var(--color-text); $color-primary : var(--color-primary); + +#MerchantAdmin { + .panel { + width: 100%; + padding-top: 20px; + padding-left: 10px; + background: none; + + .search-form { + margin: 5px 20px; + + label { + // width: 82px; + width: 100%; + text-align-last: end; + } + } + + .yisa-select { + width: 190px; + + .ant-select-selector { + background: transparent; + border-color: var(--color-border); + } + } + + .form-input { + width: 190px; + background: transparent; + border-color: var(--color-border); + } + + .ant-select-arrow { + background: none !important; + } + + .ant-input { + background: transparent; + border-color: var(--color-border); + } + + .btnBox { + display: flex; + align-items: center; + // margin-left: 20px; + + .btn { + margin: 5px 5px; + border-radius: 5px; + border: none; + } + + .search-btn { + background-color: #409EFF; + } + + .reset-btn { + color: #000; + background-color: #fff; + } + + .create-btn { + background-color: #67C23A; + + } + } + + + .panel-1 { + display: flex; + } + + .panel-2 { + margin-top: 10px; + display: flex; + align-items: center; + } + } + + .table { + width: 98%; + margin: 15px 10px 10px 15px; + + + .ant-table-thead { + th { + padding: 0px 16px; + height: 50px; + } + + .ant-table-cell { + background: var(--color-table-header-bg) !important; + font-weight: 700; + + &::before { + display: none; + } + } + } + + .ant-table-tbody { + tr { + &:nth-child(2n) { + td { + background: #3E4557 !important; + } + } + + &:hover { + td { + background: #3E4557 !important; + } + } + + td { + background: #3E4557 !important; + border-bottom-color: #f2f2f2; + } + } + } + + .ant-pagination-options { + .ant-select { + &:hover { + .ant-select-selector { + border-color: #f5f6f9; + box-shadow: none; + } + } + } + + .ant-select-selector { + border-color: #f5f6f9; + } + + .ant-select-focused { + .ant-select-selector { + box-shadow: none !important; + border-color: #f5f6f9 !important; + } + } + + .ant-pagination-options-quick-jumper { + input { + background: #3E4557; + border-color: #f5f6f9; + + &:focus { + box-shadow: none; + } + } + } + } + } + + .table-status-normal { + width: 20px; + height: 20px; + border-radius: 50%; + border: 1px solid #67C23A; + } + + .table-status-err { + width: 20px; + height: 20px; + border-radius: 50%; + border: 1px solid red; + } + + .scheduleBtn { + background: #409eff; + border: none; + width: 50px; + border-radius: 4px; + cursor: pointer; + } + + .warning { + span { + color: #fff; + } + + img { + margin: 0 10px; + } + } + + + #create { + .create-form { + margin: 0px 20px; + border-radius: 5px; + border: 1px solid #C0CCDA; + + .btns { + display: flex; + margin: 10px 0 20px 200px; + + .btn { + width: 70px; + height: 36px; + border: none; + border-radius: 4px; + text-align: center; + cursor: pointer; + } + + .btn-1 { + color: #fff; + background-color: #409EFF; + margin-right: 30px; + } + + .btn-2 { + background-color: #fff; + color: #000; + } + } + + .container { + padding: 20px 20px; + display: flex; + + .ant-select-selector { + border-color: #666d7d; + } + + .ant-select-arrow { + background: none !important; + } + + .ant-input { + border-color: #666d7d; + } + + .form-wrap { + margin: 30px 0 0 30px; + } + + .ant-form-item-label { + width: 100px; + text-align-last: end; + } + + + } + } + } + + + #check { + .check-form { + .btns { + display: flex; + justify-content: end; + margin-right: 20px; + margin-top: 10px; + + .btn { + width: 70px; + height: 36px; + border: none; + border-radius: 4px; + text-align: center; + cursor: pointer; + background-color: #fff; + color: #000; + } + + } + + .container { + padding: 20px 20px; + margin: 10px 20px; + border: 1px solid #C0CCDA; + border-radius: 5px; + + .title { + display: flex; + align-items: center; + font-size: 18px; + color: #fff; + font-weight: 500; + + + &::before { + content: ''; + display: inline-block; + margin-right: 10px; + width: 5px; + height: 20px; + border-radius: 10px; + background-color: #409eff; + } + } + + .item { + display: flex; + margin: 20px; + line-height: 34px; + font-size: 16px; + + .item-title { + display: inline-block; + margin-right: 10px; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + + } + } + } + +} diff --git a/src/pages/MerchantMgm/MerchantAdmin/loadable.jsx b/src/pages/MerchantMgm/MerchantAdmin/loadable.jsx index 0891693..1d2f7d5 100644 --- a/src/pages/MerchantMgm/MerchantAdmin/loadable.jsx +++ b/src/pages/MerchantMgm/MerchantAdmin/loadable.jsx @@ -1,15 +1,866 @@ import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; -// import { dictionary, utils } from "@/config/common"; -// import moment from 'moment' -// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; -// import ajax from "@/services" -// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" -// import "./index.scss"; -// import errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; +import { Input, Select, message, Popover, Pagination, Table, Form, Radio, Modal, Button } from "antd"; +import { pageSizeOptions } from '@/config/character.config.js' +import moment from 'moment' +import { 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} from '@ant-design/icons'; + function MerchantAdmin() { - return
MerchantAdmin
+ //默认 + const parameter = { + id: 1, + operatorid: '',//商户ID + shop_name: '',//商户名称 + manage_type: '',//经营业务类型 + manage_type_name: "",//经营业务类型 + account: "",//管理员账号 + username: "",//姓名 + phone: "",//电话 + email: "",//邮箱 + sex: "",//性别 + status: 0,//状态 + create_time: "",//创建时间 + start: moment().subtract(90, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'), + end: moment().format('YYYY-MM-DD HH:mm:ss'), + pn: 1, + page_size: Number(pageSizeOptions[0]), // 每页条数 + } + //商户名称下拉 + const [tenantPull, setTenantPull] = useState([]) + //等待状态 + const [loading, setLoading] = useState(false) // 等待状态 + //表格数据 + const [tableData, setTableData] = useState([]) + //检索表单 + const [formData, setFormData] = useSetState(parameter) + const [lastFormData, setLastFormData] = useState(formData) + const lastFormDataRef = useRef(formData) + + const [searchForm] = Form.useForm() + //是否第一次检索表单 + const [isFirst,setIsFirst]=useState(false) + //查看表单记录 + const [records, setRecords] = useState({}) + //总条数 + const [total, setTotal] = useState() + //创建管理员开关 + const [createVisible, setCreateVisible] = useState(false) + //编辑开关 + const [updateVisible, setUpdateVisible] = useState(false) + //查看开关 + const [checkVisible, setCheckVisible] = useState(false) + //编辑表单 + const [updateForm] = Form.useForm() + //性别单选 + const [sexValue, setSexValue] = useState(1); + //重置密码确认框 + const [confirm, setConfirm] = useState(false) + //禁用确认框 + const [banBtn, setBanBtn] = useState(false) + //启用确认框 + const [startBtn, setStartBtn] = useState(false) + //id + const [ID, setID] = useState() + //表头 + const columns = [ + { + title: '序号', + dataIndex: 'id', + key: 'id', + align: "center", + }, + { + title: '商户名称', + key: 'shop_name', + dataIndex: 'shop_name', + align: "center", + }, + { + title: '经营业务类型', + key: 'manage_type_name', + dataIndex: 'manage_type_name', + align: "center", + }, + { + title: '管理员账号', + key: 'account', + dataIndex: 'account', + align: "center", + }, + { + title: '管理员姓名', + key: 'username', + dataIndex: 'username', + align: "center", + }, + { + title: '手机号', + key: 'phone', + dataIndex: 'phone', + align: "center", + }, + { + title: '邮箱', + key: 'email', + dataIndex: 'email', + align: "center", + }, + { + title: '性别', + key: 'sex_status_name', + dataIndex: 'sex_status_name', + align: "center", + }, + { + title: '添加时间', + key: 'create_time', + dataIndex: 'create_time', + align: "center", + }, + { + title: '状态', + key: 'user_status_name', + dataIndex: 'user_status_name', + align: "center", + render: (value, row, index) => { + return ( + <> + { + row.user_status == 1 ? + : + + } + + ) + } + }, + { + title: '操作', + key: 'operation', + dataIndex: 'operation', + align: "center", + render: (text, record, index) => { + return <> + +
{ checkBtn(index) }}>详情
+
{ resetPassWordBtn(index) }}>重置密码
+ { + record.user_status == 2 ? + <> +
{ updateBtn(record) }}>编辑
+
{ stopBtn(record) }}>启用
+ :
{ stopBtn(record) }}>停用
+ } + }> + + + + }, + }, + ] + + //状态类型下拉框 + const statusType = [ + { + label: "全部", + value: 0 + }, + { + label: "启用", + value: 1 + }, + { + label: "禁用", + value: 2 + }, + ] + + //获取商户名称的下拉 + const getTenantNamePull = () => { + ajax.getTenantPull().then( + res => { + if (res.status == 20000) { + setTenantPull(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { console.log(err); } + ) + } + + //获取表格数据 + const getTable = () => { + const value =searchForm.getFieldsValue(["shop_name","phone","username","account","status"]) + console.log(value); + setLoading(true) + ajax.getMerchantAdminTable(value).then( + res => { + if (res.status == 20000) { + setTableData(res.data.list) + setTotal(res.data.total_records) + setIsFirst(true) + if (banBtn) { + setTimeout( + () => { + message.success("禁用成功", 2.5) + }, 1000 + ) + setBanBtn(false) + } + if (startBtn) { + setTimeout( + () => { + message.success("启用成功", 2.5) + }, 1000 + ) + setStartBtn(false) + } + } else { + message.error(res.message) + } + setLoading(false) + } + ).catch( + (err) => { + console.log(err) + } + ) + } + + //搜索数据 + const getSearchData = () => { + getTable() + } + + //重置数据 + const getResetData = () => { + searchForm.setFieldsValue( + { + shop_name: '', + phone: '', + account: '', + username: '', + status: 0 + } + ) + if(isFirst){ + getTable() + } + } + + //切换分页 + const changePn = (pn, length) => { + if (lastFormData.page_size === length) { + setLastFormData(Object.assign({}, lastFormData, { pn: pn })) + lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }) + getTable(Object.assign({}, lastFormData, { pn: pn })) + } + } + //切换每页条数 + 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 createData = () => { + setCreateVisible(true) + updateForm.setFieldsValue( + { + shop_name: '', + phone: '', + account: '', + _name: '', + email: '', + sex_status: '' + } + ) + } + //点击取消-返回上一层 + const createOncancel = () => { + setCreateVisible(false) + setUpdateVisible(false) + setCheckVisible(false) + } + + //编辑管理员-提交按钮 + const submitUpdate = () => { + const value = updateForm.getFieldsValue(['shop_name', 'phone', 'name', 'account', 'email', 'sex_status']) + ajax.updateMerchantAdmin(value).then( + res => { + if (res.status == 20000) { + setCreateVisible(false) + setUpdateVisible(false) + message.success("已提交", 2.5) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + + } + //创建新管理员-提交按钮 + const submitAdd = () => { + const value = updateForm.getFieldsValue(['shop_name', 'phone', '_name', 'account', 'email', 'sex_status']) + ajax.addMerchantAdmin(value).then( + res => { + if (res.status == 20000) { + setCreateVisible(false) + setUpdateVisible(false) + message.success("已提交", 2.5) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + + } + //编辑 + function updateBtn(record) { + setUpdateVisible(true) + setFormData(record) + //数据回显 + updateForm.setFieldsValue( + { + shop_name: record.shop_name, + phone: record.phone, + account: record.account, + _name: record.username, + email: record.email, + sex_status: parseInt(record.sex_status) + } + ) + + } + //查看 + function checkBtn(index) { + setCheckVisible(true) + ajax.checkMerchantAdmin(index).then( + res => { + if (res.status == 20000) { + setRecords(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { console.log(err); } + ) + } + //启用/停用 + function stopBtn(record) { + if (record.user_status == 1) { + //禁用 + setBanBtn(true) + } else { + //启用 + setStartBtn(true) + } + setID(record.id) + } + + const handleAdminStatus = () => { + ajax.updateAdminStatus(ID).then( + res => { + if (res.status == 20000) { + getTable() + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + } + //重置密码 + const resetPassWordBtn = (index) => { + setConfirm(true) + setID(index) + } + + const handleReset = () => { + ajax.resetPassWord(ID).then( + res => { + if (res.status == 20000) { + getTable() + setConfirm(false) + message.success("重置成功", 2.5) + } else { + message.error(res.message) + } + } + ).catch( + err => { console.log(err); } + ) + } + //关闭重置密码确认框,关闭禁用确认框 + const handleCancel = () => { + setConfirm(false) + setBanBtn(false) + setStartBtn(false) + message.warning("已取消操作", 2.5) + } + + //性别单选框改变 + const onChange = (e) => { + setSexValue(e.target.value); + }; + //新增--商户名选择搜索框 + const filterOption = (input, option) => + (option?.label ?? '').toLowerCase().includes(input.toLowerCase()); + + useEffect( + () => { + getTenantNamePull() + }, [] + ) + return ( +
+ { + !createVisible && !updateVisible && !checkVisible ? + <> +
+
+
+ + + + + + +
+
+
+
+ { + let reg = new RegExp(/^[0-9]+$/); + if (!reg.test(value)) { + return Promise.reject('管理员账号不合法'); + } else { + return Promise.resolve(); + } + } + }, + ]} + > + + + + + + + + { + let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/); + if (!reg.test(value)) { + return Promise.reject('手机号码不合法'); + } else if (value = '') { + return Promise.reject('手机号码不能为空'); + } else { + return Promise.resolve(); + } + } + }, + ]} + + > + + + + + + + + + + + + + + + + + + 男 + 女 + + + +
: +
+ + {formData.shop_name} + + + { + let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/); + if (!reg.test(value)) { + return Promise.reject('手机号码不合法'); + } else if (value = '') { + return Promise.reject('手机号码不能为空'); + } else { + return Promise.resolve(); + } + } + }, + ]} + + > + + + + + {formData.account} + + + + + + + + + + + + + 男 + 女 + + + +
+ } +
+ { + createVisible && !updateVisible ? +
+ + +
: +
+ + +
+ } + +
+ +
+ : '' + } + + { + checkVisible ? +
+
+
+ +
+
+
系统管理员详情
+
商户：
{records.shop_name}
+
手机号：
{records.phone}
+
登录名：
{records.account}
+
姓名：
{records.username}
+
邮箱：
{records.email}
+
性别：
{records.sex_status}
+
+
+
+ : '' + } + + + ) } -export default MerchantAdmin; \ No newline at end of file +export default MerchantAdmin; diff --git a/src/pages/MerchantMgm/MerchantInfo/index.scss b/src/pages/MerchantMgm/MerchantInfo/index.scss index 2f5baaa..b98d489 100644 --- a/src/pages/MerchantMgm/MerchantInfo/index.scss +++ b/src/pages/MerchantMgm/MerchantInfo/index.scss @@ -9,7 +9,7 @@ $color-primary : var(--color-primary); width: 100%; height: 100px; padding-top: 20px; - padding-left: 10px; + padding-left: 20px; background: none; .panel-1 { @@ -56,7 +56,7 @@ $color-primary : var(--color-primary); } .panel-2 { - margin-top: 10px; + margin-top: 15px; display: flex; align-items: center; @@ -250,7 +250,16 @@ $color-primary : var(--color-primary); text-align: right; } } - + .businessType{ + margin-left: 30px; + .ant-select-selector{ + background-color: #3E4557; + border-color: var(--color-border); + } + .ant-select-selection-item{ + border: none; + } + } .select { margin: 10px 5px 20px 30px; @@ -264,8 +273,6 @@ $color-primary : var(--color-primary); display: flex; align-items: center; margin: 10px 5px 20px 30px; - // position: relative; - // left: 18%; label { color: #fff; @@ -292,7 +299,7 @@ $color-primary : var(--color-primary); .accountInformation { padding: 10px 5px 5px 10px; - height: 510px; + height: 540px; background-color: #3E4557; .account { @@ -346,6 +353,11 @@ $color-primary : var(--color-primary); } } + .select-form-item { + width: 270px; + margin-left: auto; + } + .license { display: flex; position: relative; @@ -380,10 +392,14 @@ $color-primary : var(--color-primary); margin-bottom: 10px; .business { + display: flex; + flex-direction: column; + .business-wrap{ + width: 420px; + margin-left: 83px; + } .cc-form-input { margin: 20px 5px 40px 30px; - position: relative; - left: -37%; } } @@ -391,32 +407,34 @@ $color-primary : var(--color-primary); .clearinformation { padding: 10px 5px 5px 10px; - height: 550px; + // height: 550px; background-color: #3E4557; .clear { .cc-form-input { margin: 20px 5px 40px 30px; - position: relative; - left: -37%; } + .clear-wrap{ + margin-bottom: 40px; + width: 420px; + margin-left: 83px; + .select { + margin: 10px 5px 20px 30px; + } + } .clear-select { margin-bottom: 40px; - position: relative; - left: -37%; + width: 420px; .select { margin: 10px 5px 20px 30px; } } - - .form-item { - position: relative; - left: -37%; - + .form-item{ + width: 420px; + margin-left: 83px; } - .special { display: grid; grid-template-columns: 60% 40%; @@ -440,11 +458,7 @@ $color-primary : var(--color-primary); } } } - - } - - } .title { @@ -468,4 +482,199 @@ $color-primary : var(--color-primary); } } + #check { + height: 800px; + overflow-y: scroll; + + .check-form { + .btns { + display: flex; + justify-content: end; + margin-right: 20px; + margin-top: 10px; + + .btn { + width: 70px; + height: 36px; + border: none; + border-radius: 4px; + text-align: center; + cursor: pointer; + background-color: #fff; + color: #000; + } + + } + + .container { + padding: 20px 20px; + display: flex; + + .left { + width: 50%; + margin-right: 20px; + + .systemInformation { + padding: 10px 5px 5px 10px; + height: 310px; + background-color: #3E4557; + margin-bottom: 20px; + + .system { + display: flex; + flex-direction: column; + + .system-wrap { + width: 300px; + + .item { + margin: 15px; + + .item-title { + display: inline-block; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + + .text-green { + color: #67C23A; + } + + .text-red { + color: red; + } + } + + } + } + + .accountInformation { + padding: 10px 5px 5px 10px; + height: 370px; + background-color: #3E4557; + + .account { + display: flex; + flex-direction: column; + + .account-wrap { + width: 300px; + + .item { + margin: 20px; + line-height: 45px; + + .item-title { + display: inline-block; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + } + } + } + } + + .right { + width: 50%; + + .businessInformation { + padding: 10px 5px 5px 10px; + height: 170px; + background-color: #3E4557; + margin-bottom: 10px; + + .business { + display: flex; + flex-direction: column; + + .business-wrap { + width: 300px; + + .item { + margin: 20px; + + .item-title { + display: inline-block; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + } + + } + } + + .clearInformation { + padding: 10px 5px 5px 10px; + height: 450px; + background-color: #3E4557; + margin-bottom: 10px; + + .clear { + display: flex; + flex-direction: column; + + .clear-wrap { + width: 300px; + + .item { + margin: 20px; + line-height: 45px; + + .item-title { + display: inline-block; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + } + } + + } + + .operationInformation { + padding: 10px 5px 5px 10px; + height: 200px; + background-color: #3E4557; + + .operation { + display: flex; + flex-direction: column; + + .operation-wrap { + width: 300px; + + .item { + margin: 20px; + + .item-title { + display: inline-block; + width: 100px; + text-align-last: end; + white-space: nowrap; + } + } + } + } + } + + } + + .title { + font-size: 18px; + color: #fff; + font-weight: 500; + } + + + } + } + } + } diff --git a/src/pages/MerchantMgm/MerchantInfo/loadable.jsx b/src/pages/MerchantMgm/MerchantInfo/loadable.jsx index 3aebc6e..2037ddd 100644 --- a/src/pages/MerchantMgm/MerchantInfo/loadable.jsx +++ b/src/pages/MerchantMgm/MerchantInfo/loadable.jsx @@ -1,11 +1,11 @@ import React, { useState, useRef, useEffect } from "react"; -import { Input, Select, message, Popover, Pagination, Table, DatePicker, Upload, Space, Modal, Cascader, Button } from "antd"; +import { Input, Select, message, Popover, Pagination, Table, DatePicker, Upload, TreeSelect, Modal, Cascader, Button, Form } 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 } from 'ahooks'; +import { useSessionStorageState, useUpdateEffect, useSize, useUpdate, useSetState } from 'ahooks'; import ajax from "@/services" import "./index.scss"; import { SearchOutlined, DeleteOutlined } from '@ant-design/icons'; @@ -15,7 +15,6 @@ import { assign } from "lodash"; const { RangePicker } = DatePicker; function MerchantInfo() { - const [messageApi, contextHolder] = message.useMessage() //默认 const parameter = { tenantId: '',//商户ID @@ -23,9 +22,11 @@ function MerchantInfo() { tenantCode: '',//商户编码 tenantType: '',//商户类型1234 shop_type_name: '',//平台 - tenantNamePull: '',//商户下拉框 - businessType: '', + type: 1,//商户下拉框 + type_name: '',//商户下拉后的输入值 + businessType: [], status: '', + status_name: '', start: moment().subtract(90, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'), end: moment().format('YYYY-MM-DD HH:mm:ss'), pn: 1, @@ -48,7 +49,9 @@ function MerchantInfo() { const [formData, setFormData] = useState(parameter) const [lastFormData, setLastFormData] = useState(formData) const lastFormDataRef = useRef(formData) - //表单记录 + + const [selectForm] = Form.useForm() + //查看表单记录 const [records, setRecords] = useState({}) //增加商户表单 const defaultCreate = { @@ -56,7 +59,7 @@ function MerchantInfo() { tenantCode: '',//商户编码 tenantType: '',//商户类型1234 shop_type_name: '',//平台 - businessType: '', + businessType: [], city: '', address: '', connect_name: '', @@ -134,8 +137,6 @@ function MerchantInfo() { //支付宝生活号及小程序 const [zhiMiniVisible2, setZhiMiniVisible2] = useState(false) - //上传图片的地址 - const [imageUrl, setImageUrl] = useState(); //表头 const columns = [ { @@ -211,7 +212,7 @@ function MerchantInfo() { }, { title: '最后操作人', - key: 'updatePerpson', + key: 'updatePerson', dataIndex: 'updatePerson', align: "center", }, @@ -226,17 +227,18 @@ function MerchantInfo() { key: 'operation', dataIndex: 'operation', align: "center", - render: (text, record) => { + render: (text, record, index) => { return <> -
{ CheckBtn(record) }}>详情
+
+
{ checkBtn(index) }}>详情
{ record.status == 2 ? -
{ translateBtn(record) }}>编辑
: "" + <> +
{ updateBtn(index) }}>编辑
+
{ stopBtn(index) }}>启用
+ :
{ stopBtn(index) }}>停用
} - -
{ deleteBtn(record) }}>停用/启用
}> @@ -263,6 +265,8 @@ function MerchantInfo() { label: '车务业务' }, ] + + //公司地址 const COMPANY_ADRESS = [ { @@ -335,8 +339,9 @@ function MerchantInfo() { //获取表格数据 const getTable = (data = formData) => { + console.log(data); setLoading(true) - ajax.getTable(data).then( + ajax.getMerchantInfoTable(data).then( res => { if (res.status == 20000) { setTableData(res.data.list) @@ -383,35 +388,41 @@ function MerchantInfo() { //创建商户 const createData = () => { setCreateVisible(true) + setFormCreate({ ...parameter }) } //关闭创建商户-点击取消 const createOncancel = () => { setCreateVisible(false) setUpdateVisible(false) + setCheckVisible(false) + setSingleVisible(false) + setQingDaoVisible(false) + setSpecialVisible(false) + getTable() } //经营业务类型多选框改变 const onHandleChange = (v) => { console.log('已选择：' + v) - let _formData = { ...formData } - _formData.businessType = v - setFormCreate(_formData) + let _formCreate = { ...formCreate } + _formCreate.businessType = v + setFormCreate(_formCreate) } - //点击启用 + //点击启用-提交表单 const createTenant = () => { - let _formCreate = { ...formCreate } - console.log("formCreate", _formCreate); - console.log("formCreateModal", formCreateModal); + const value = selectForm.getFieldValue("business_type") + setFormCreate({ businessType: value }) - ajax.addTenant({ _formCreate, formCreateModal }).then( + ajax.addTenant( {...formCreate, ...formCreateModal}).then( res => { if (res.status == 20000) { - messageApi.open({ - type: 'success', - content: '已启用', - }); + message.success("已启用", 2.5) setCreateVisible(false) + setUpdateVisible(false) + setSingleVisible(false) + setSpecialVisible(false) + setQingDaoVisible(false) } else { message.error(res.message) } @@ -423,15 +434,58 @@ function MerchantInfo() { ) } //编辑 - function translateBtn(record) { + function updateBtn(index) { setUpdateVisible(true) - setRecords(record) - console.log(record); + ajax.checkTenant(index).then( + res => { + if (res.status == 20000) { + setFormCreate(res.data) + setRecords(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) + selectForm.setFieldsValue( + { + business_type: records.businessType + } + ) } //查看 - function CheckBtn(record) { + function checkBtn(index) { setCheckVisible(true) - setRecords(record) + ajax.checkTenant(index).then( + res => { + if (res.status == 20000) { + setRecords(res.data) + } else { + message.error(res.message) + } + } + ).catch( + err => { console.log(err); } + ) + } + //启用/停用 + function stopBtn(index) { + ajax.updateStatus(index).then( + res => { + if (res.status == 20000) { + getTable() + } else { + message.error(res.message) + } + } + ).catch( + err => { + console.log(err); + } + ) } /* 独立账户 3*/ @@ -525,11 +579,18 @@ function MerchantInfo() { console.log(imgList); }; + //判断输入框为数字 + const handleBlurNumber = (e) => { + var value = /^[0-9]+$/ + if (!value.test(e.target.value)) { + message.success("输入有误，请重新输入", 2.5) + } + } + useEffect( () => { getPullList() - // getTable() }, [] ) return ( @@ -545,10 +606,13 @@ function MerchantInfo() { className="form-input" placeholder="请输入商户ID" showCount={false} - defaultValue={null} + defaultValue="" + value={formData.tenantId} + onBlur={handleBlurNumber} onChange={e => { - setFormData(Object.assign(formData, { tenantId: e.target.value })) + setFormData(Object.assign({ ...formData, tenantId: e.target.value })) }} + />
@@ -558,20 +622,16 @@ function MerchantInfo() { className="yisa-cascader" placeholder="商户名称" options={tenantNamePull} + value={formData?.type} onChange={e => { - setFormData(Object.assign(formData, { tenantNamePull: e })) - setTenantNamePull(e) + setFormData(Object.assign({ ...formData, type: e })) }} /> } placeholder="请输入" + value={formData.type_name} onChange={e => { - if (tenantNamePull == 1) { - setFormData(Object.assign(formData, { tenantCode: e.target.value })) - } - else { - setFormData(Object.assign(formData, { tenantName: e.target.value })) - } + setFormData(Object.assign({ ...formData, type_name: e.target.value })) }} />
@@ -581,11 +641,10 @@ function MerchantInfo() { className="yisa-select" options={tenantType} placeholder="请选择" - hasUnlimited={false} + value={formData?.tenantType} onChange={ e => { - setFormData(Object.assign(formData, { tenantType: e })) - console.log(e); + setFormData(Object.assign({ ...formData, tenantType: e })) } } /> @@ -596,9 +655,8 @@ function MerchantInfo() { className="yisa-select" options={businessType} placeholder="请选择" - hasUnlimited={false} - showClose={true} - onChange={e => { setFormData(Object.assign(formData, { businessType: e })) }} + value={formData.businessType} + onChange={e => { setFormData(Object.assign({ ...formData, businessType: e })) }} />
@@ -607,9 +665,8 @@ function MerchantInfo() { className="yisa-select" options={status} placeholder="请选择" - hasUnlimited={false} - showClose={true} - onChange={e => { setFormData(Object.assign(formData, { status: e })) }} + value={formData.status} + onChange={e => { setFormData(Object.assign({ ...formData, status: e })) }} />
@@ -697,8 +754,8 @@ function MerchantInfo() { labelPosition="left" placeholder="请输入商户名称" isRequired={true} - className="form-item" - value={records.tenantName} + className="form-item" + value={formCreate.tenantName} showClose={true} onChange={e => { setFormCreate(Object.assign({ ...formCreate, tenantName: e.target.value })) @@ -709,8 +766,8 @@ function MerchantInfo() { labelPosition="left" placeholder="请输入商户编码" isRequired={true} - className="form-item" - value={records.tenantCode} + className="form-item" + value={formCreate.tenantCode} showClose={true} onChange={e => { setFormCreate({ ...formCreate, tenantCode: e.target.value }) @@ -720,33 +777,55 @@ function MerchantInfo() { yisaLabel="商户类型:" yisaData={tenantType} defaultValue={tenantType || null} - value={records.tenantType} + value={formCreate.tenantType} placeholder="请选择" hasUnlimited={false} showClose={true} - required={true} + required={true} className="select" onChange={e => { setFormCreate(Object.assign({ ...formCreate, tenantType: e })) }} /> - +
+ +