|
|
|
@ -13,60 +13,90 @@ import { |
|
|
|
Select, |
|
|
|
Image, |
|
|
|
Timeline, |
|
|
|
Popover |
|
|
|
Popover, |
|
|
|
Popconfirm |
|
|
|
} from "antd"; |
|
|
|
import { dictionary } from "@/config/common"; |
|
|
|
import ajax from "@/services"; |
|
|
|
import { TableModule } from "@/components"; |
|
|
|
import moment from 'moment' |
|
|
|
import "./index.scss"; |
|
|
|
|
|
|
|
const { TextArea } = Input; |
|
|
|
|
|
|
|
function OrderRuleMgm() { |
|
|
|
// 详情弹窗 |
|
|
|
const [detailVisible, setDetailVisible] = useState(false); |
|
|
|
// 列表数据 |
|
|
|
const [tableData, setTableData] = useState([]); |
|
|
|
// 数据总数 |
|
|
|
const [total, setTotal] = useState(0); |
|
|
|
// 详情数据 |
|
|
|
const [detailData, setDetailData] = useState({}); |
|
|
|
// 初始搜索条件 |
|
|
|
const initFormData = { |
|
|
|
operator: "0", |
|
|
|
const initFormData = { |
|
|
|
operator_id: "0", |
|
|
|
rule_name: "", |
|
|
|
}; |
|
|
|
|
|
|
|
const columns = [ |
|
|
|
const params ={ |
|
|
|
operator_id:'', |
|
|
|
rule_name:'', |
|
|
|
rule_code:'', |
|
|
|
rule_description:'', |
|
|
|
time:moment().format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
username:'', |
|
|
|
status:1, |
|
|
|
} |
|
|
|
// 新增or详细弹框 |
|
|
|
const [modalData, setModalData] = useState(params) |
|
|
|
// 详情弹窗 |
|
|
|
const [detailVisible, setDetailVisible] = useState(false); |
|
|
|
// 列表数据 |
|
|
|
const [tableData, setTableData] = useState([]); |
|
|
|
// 数据总数 |
|
|
|
const [total, setTotal] = useState(0); |
|
|
|
const [operatorOption, setOperatorOption] = useState([]) |
|
|
|
const [ruleDetailVisible, setRuleDetailVisible] = useState(false) |
|
|
|
const [detailsData, setDetailsData] = useState({}) |
|
|
|
const tableRef = useRef(null) |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: "运营商名称", |
|
|
|
dataIndex: "operator", |
|
|
|
key: "operator", |
|
|
|
dataIndex: "operator_name", |
|
|
|
key: "operator_name", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "规则名称", |
|
|
|
dataIndex: "plate", |
|
|
|
key: "plate", |
|
|
|
dataIndex: "rule_name", |
|
|
|
key: "rule_name", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "规则编码", |
|
|
|
dataIndex: "plate_color", |
|
|
|
key: "plate_color", |
|
|
|
dataIndex: "rule_code", |
|
|
|
key: "rule_code", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "创建人", |
|
|
|
dataIndex: "berth_id", |
|
|
|
key: "berth_id", |
|
|
|
dataIndex: "creator", |
|
|
|
key: "creator", |
|
|
|
width: 100, |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "规则状态", |
|
|
|
dataIndex: "status", |
|
|
|
key: "status", |
|
|
|
width: 100, |
|
|
|
align: "center", |
|
|
|
render:(_,record) => { |
|
|
|
return( |
|
|
|
<span style={ |
|
|
|
{ |
|
|
|
color:record ?.status ? "#2ADC41" : "#EC5761"} |
|
|
|
} |
|
|
|
> |
|
|
|
{record?.status ? "正常" : "停用"}</span> |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "创建时间", |
|
|
|
dataIndex: "in_time", |
|
|
|
key: "in_time", |
|
|
|
dataIndex: "create_time", |
|
|
|
key: "create_time", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
@ -78,24 +108,38 @@ function OrderRuleMgm() { |
|
|
|
width: 100, |
|
|
|
render: (text, record, index) => { |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Button type="primary" onClick={() => openModal(index, record)}> |
|
|
|
<div style={{display:"flex",cursor:"pointer"}}> |
|
|
|
<div style={{color:"#3AA9FF"}} onClick={() => openModal(index, record)}> |
|
|
|
详情 |
|
|
|
</Button> |
|
|
|
</> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{marginLeft:10,color:record ?.status ? "#EC5761" : "#2ADC41"}} |
|
|
|
> |
|
|
|
<Popconfirm |
|
|
|
placement="left" |
|
|
|
title={record?.status ? "是否停用该规则" : "是否启动该规则"} |
|
|
|
onConfirm={() => { handleRuleStatus(record?.id,record?.status ? 0 : 1) }} |
|
|
|
okText="是" |
|
|
|
cancelText="否"> |
|
|
|
{record?.status ? "停用" : "启动"} |
|
|
|
</Popconfirm> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
const formSearch = [ |
|
|
|
const formSearch = [ |
|
|
|
{ |
|
|
|
name: "operator", |
|
|
|
name: "operator_id", |
|
|
|
type: "Select", |
|
|
|
label: "商户名称", |
|
|
|
label: "运营商名称", |
|
|
|
defaultValue: "0", |
|
|
|
placeholder: "请选择商户名称", |
|
|
|
placeholder: "请选择运营商名称", |
|
|
|
options:operatorOption.length ? operatorOption : [{value:"0",label:'全部'}] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "rule_name", |
|
|
|
@ -107,32 +151,100 @@ function OrderRuleMgm() { |
|
|
|
name: "timePeriod", |
|
|
|
type: "RangePicker", |
|
|
|
label: "时间段", |
|
|
|
defaultValue: [moment().subtract(1,"months"), moment()] |
|
|
|
}, |
|
|
|
]; |
|
|
|
]; |
|
|
|
// 更新规则状态 |
|
|
|
const handleRuleStatus = (id,status) => { |
|
|
|
ajax.updataRule({id,status}).then((res) => { |
|
|
|
if (res.status == 20000) { |
|
|
|
message.success(res.message) |
|
|
|
tableRef.current.fetch() |
|
|
|
}else{ |
|
|
|
message.success(res.message) |
|
|
|
} |
|
|
|
}).catch(e => { |
|
|
|
console.log(e); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 打开弹窗 |
|
|
|
const openModal = (index, record) => { |
|
|
|
setDetailData(record) |
|
|
|
setDetailVisible(true); |
|
|
|
// 获取运营商名字 |
|
|
|
const getAllOperator =() => { |
|
|
|
ajax.getOperatorList().then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
setOperatorOption(res.data); |
|
|
|
}else{ |
|
|
|
setOperatorOption([]) |
|
|
|
} |
|
|
|
}).catch(e => { |
|
|
|
console.log(e); |
|
|
|
}); |
|
|
|
} |
|
|
|
// 打开弹窗 |
|
|
|
const openModal = (index, record) => { |
|
|
|
setDetailsData(record) |
|
|
|
setRuleDetailVisible(true); |
|
|
|
} |
|
|
|
|
|
|
|
// 检索 |
|
|
|
const search = (params) => { |
|
|
|
ajax.getParkingList(params).then((res) => { |
|
|
|
// 检索 |
|
|
|
const search = (params) => { |
|
|
|
let data = { |
|
|
|
...params, |
|
|
|
type:2 |
|
|
|
} |
|
|
|
ajax.getRegularList(data).then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
setTableData(res.data.list); |
|
|
|
setTotal(res.data.total); |
|
|
|
setModalData({ |
|
|
|
...modalData, |
|
|
|
username:res.data.username, |
|
|
|
}) |
|
|
|
} else { |
|
|
|
message.error(res.message) |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handelAdd = () => { |
|
|
|
const handelAdd = () => { |
|
|
|
setModalData({ |
|
|
|
...params, |
|
|
|
username:modalData?.username |
|
|
|
}) |
|
|
|
setDetailVisible(true) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
// 处理弹框ok按钮 |
|
|
|
const handleConfirm = () => { |
|
|
|
if(!modalData?.operator_id){ |
|
|
|
message.warning("运营商名称不能为空") |
|
|
|
return |
|
|
|
}else if(!modalData?.rule_name){ |
|
|
|
message.warning("规则名称不能为空") |
|
|
|
return |
|
|
|
}else if(!modalData?.rule_code){ |
|
|
|
message.warning("规则编码不能为空") |
|
|
|
return |
|
|
|
} |
|
|
|
// 发保存请求 |
|
|
|
ajax.addRule({...modalData,type:2}).then(res => { |
|
|
|
if (res.status === 20000) { |
|
|
|
message.success(res.message) |
|
|
|
tableRef.current.fetch() |
|
|
|
setModalData({ |
|
|
|
...params, |
|
|
|
username:modalData?.username |
|
|
|
}) |
|
|
|
setDetailVisible(false) |
|
|
|
} |
|
|
|
}).catch(err => { |
|
|
|
console.log(err); |
|
|
|
}) |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
getAllOperator() |
|
|
|
},[]) |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<TableModule |
|
|
|
showSerial={true} |
|
|
|
@ -146,10 +258,10 @@ function OrderRuleMgm() { |
|
|
|
</Button> |
|
|
|
} |
|
|
|
columns={columns} |
|
|
|
ref={tableRef} |
|
|
|
tableData={tableData} |
|
|
|
formSearch={formSearch} |
|
|
|
pagename="停车记录查询" |
|
|
|
pageName={'orderRuleMgm'} |
|
|
|
initFormData={initFormData} |
|
|
|
total={total} |
|
|
|
search={search} |
|
|
|
@ -157,17 +269,172 @@ function OrderRuleMgm() { |
|
|
|
/> |
|
|
|
<Modal |
|
|
|
open={detailVisible} |
|
|
|
width={1500} |
|
|
|
width={650} |
|
|
|
className="totalModal" |
|
|
|
onCancel={() => { |
|
|
|
setModalData({...params,username:modalData?.username}) |
|
|
|
setDetailVisible(false); |
|
|
|
}} |
|
|
|
onOk={() => { |
|
|
|
handleConfirm() |
|
|
|
setDetailVisible(false); |
|
|
|
}} |
|
|
|
okText="保存" |
|
|
|
destroyOnClose |
|
|
|
> |
|
|
|
<div className="ruleTitle"> |
|
|
|
<span className="font">新增规则</span> |
|
|
|
</div> |
|
|
|
<div className="modal-form"> |
|
|
|
<div className="yisa-search"> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>运营商名称</label> |
|
|
|
<Select |
|
|
|
value={modalData.operator_id} |
|
|
|
style={{ width: 660, marginLeft: 10 }} |
|
|
|
options={operatorOption} |
|
|
|
onChange={(v) => {setModalData({...modalData,operator_id:v})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search" style={{marginLeft:13}}> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>规则名称</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入名称" |
|
|
|
value={modalData.rule_name} |
|
|
|
style={{ width: 660, marginLeft: 10 }} |
|
|
|
maxLength={30} |
|
|
|
onChange={(v) => {setModalData({...modalData,rule_name:v.target.value})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search" style={{marginLeft:13}}> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>规则编码</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入编码" |
|
|
|
value={modalData.rule_code} |
|
|
|
style={{ width: 660, marginLeft: 10 }} |
|
|
|
maxLength={30} |
|
|
|
onChange={(v) => {setModalData({...modalData,rule_code:v.target.value})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search" style={{marginLeft:26}}> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>创建人</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入创建人" |
|
|
|
value={modalData.username} |
|
|
|
style={{ width: 660, marginLeft: 10 }} |
|
|
|
maxLength={30} |
|
|
|
disabled |
|
|
|
// onChange={(v) => {setModalData({...modalData,creator:v.target.value})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search" style={{marginLeft:12}}> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>创建时间</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入创建时间" |
|
|
|
value={modalData.time} |
|
|
|
style={{ width: 660, marginLeft: 10 }} |
|
|
|
maxLength={30} |
|
|
|
disabled |
|
|
|
// onChange={(v) => {setModalData({...modalData,creat_time:v.target.value})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search" style={{marginLeft:12}}> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>规则状态</label> |
|
|
|
<Select |
|
|
|
value={modalData.status} |
|
|
|
style={{ width: 660, marginLeft: 10 }} |
|
|
|
options={[ |
|
|
|
{ |
|
|
|
value:1, |
|
|
|
label:'正常' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:0, |
|
|
|
label:'停用' |
|
|
|
} |
|
|
|
]} |
|
|
|
// onChange={(v) => {setModalData({...modalData,creat_time:v.target.value})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search" style={{display:"flex",marginLeft:13}}> |
|
|
|
<label>规则描述</label> |
|
|
|
<TextArea |
|
|
|
showCount |
|
|
|
placeholder="请输入规则描述" |
|
|
|
value={modalData.rule_description} |
|
|
|
style={{ width: 660,height:80, marginLeft: 7 }} |
|
|
|
onChange={(v)=> setModalData({...modalData,rule_description:v.target.value})} |
|
|
|
maxLength={200} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
<Modal |
|
|
|
open={ruleDetailVisible} |
|
|
|
width={1000} |
|
|
|
className="detail-Modal" |
|
|
|
footer={null} |
|
|
|
destroyOnClose |
|
|
|
onCancel={() => { |
|
|
|
setRuleDetailVisible(false); |
|
|
|
}} |
|
|
|
> |
|
|
|
<div className="ruleTitle"> |
|
|
|
<span className="font">新增规则</span> |
|
|
|
</div> |
|
|
|
<div className="ltc-content"> |
|
|
|
<div className="ltc-item"> |
|
|
|
<div className="new-item">运营商名称</div> |
|
|
|
<div className="new-value"> |
|
|
|
{detailsData?.operator_name || "--"} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="ltc-item"> |
|
|
|
<div className="new-item">规则名称</div> |
|
|
|
<div className="new-value"> |
|
|
|
{detailsData?.rule_name || "--"} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="ltc-item"> |
|
|
|
<div className="new-item">规则编码</div> |
|
|
|
<div className="new-value"> |
|
|
|
{detailsData?.rule_code || "--"} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="ltc-item"> |
|
|
|
<div className="new-item">创建人</div> |
|
|
|
<div className="new-value"> |
|
|
|
{detailsData?.creator || "--"} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="ltc-item"> |
|
|
|
<div className="new-item">创建时间</div> |
|
|
|
<div className="new-value"> |
|
|
|
{detailsData?.create_time || "--"} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="ltc-item"> |
|
|
|
<div className="new-item">规则状态</div> |
|
|
|
<div className="new-value"> |
|
|
|
{detailsData?.status || "--"} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="ltc-item rule-description" > |
|
|
|
<div className="new-item">规则描述</div> |
|
|
|
<div className="new-value"> |
|
|
|
{detailsData?.rule_description || "--"} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
export default OrderRuleMgm; |
