From e72bb62937f1e2f25ae82877956dd3e226fc281d Mon Sep 17 00:00:00 2001 From: lisf Date: Thu, 7 Dec 2023 18:08:43 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E5=81=9C=E8=BD=A6=E5=8D=A1=E8=AE=A2?= =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E7=BC=96=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ParkingCard/ParkingCardOrder/index.scss | 92 ++++ .../ParkingCard/ParkingCardOrder/loadable.jsx | 465 ++++++++++++++++++++- .../OperationCenter/ParkingCardMgm/index.js | 29 +- 3 files changed, 577 insertions(+), 9 deletions(-) diff --git a/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/index.scss b/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/index.scss index 48ff507..bbf2e0f 100644 --- a/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/index.scss +++ b/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/index.scss @@ -9,6 +9,7 @@ $color-primary : var(--color-primary); padding: 15px; width: 100%; .paid-search { + .search { font-size: 16px; font-family: @@ -90,6 +91,30 @@ $color-primary : var(--color-primary); border-radius: 20px; margin-left: 17px; .result { + .detail-title{ + font-size: 16px; + font-weight: 700; + + } + .detail-list{ + margin-left: 20px; + } + .yisa-search{ + margin-top: -6px; + } + .carTitle { + margin-top: 20px; + .font { + font-weight: 700; + font-size: 16px; + border-left: 6px solid #409eff; + padding-left: 8px; + height: 20px; + line-height: 20px; + margin-bottom: 20px; + color: #CCDDFF; + } + } padding: 25px; .font { font-family: @@ -139,4 +164,71 @@ $color-primary : var(--color-primary); } } } +} +.parkModal { + width: 900px !important; + .carTitle { + .font { + font-weight: 700; + font-size: 16px; + border-left: 6px solid #409eff; + padding-left: 8px; + height: 20px; + line-height: 20px; + margin-bottom: 20px; + } + } + .parkShop{ + display: flex; + margin-top: 13px; + label{ + line-height: 31px; + } + } + .only{ + color: #999; + } + .parkNum{ + display: flex; + label{ + line-height: 31px; + } + .parkFont{ + margin-left: 20px; + color: #999; + } + } + .add { + margin-left: 25px; + .yisa-search { + margin-top: 20px; + } + .extra-style{ + margin-left: 26px; + } + + } + .submitBtn { + margin-left: 132px; + margin-top: 20px; + .submit { + width: 80px; + height: 35px; + background: #409eff; + border: none; + border-radius: 4px; + cursor: pointer; + color: #fff; + } + .cancel { + width: 80px; + height: 35px; + // background: #fff; + border: none; + border-radius: 4px; + // color: #3e4557; + cursor: pointer; + margin-left: 20px; + } + } } \ No newline at end of file diff --git a/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/loadable.jsx b/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/loadable.jsx index 579ff4e..78d95ef 100644 --- a/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/loadable.jsx +++ b/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/loadable.jsx @@ -8,8 +8,10 @@ import { SearchOutlined, PlusOutlined,VerticalAlignBottomOutlined } from '@ant-d import moment from 'moment' import { useSetState,} from 'ahooks'; import ajax from "@/services" +import utils from "../../../../../config/utils"; import "./index.scss"; const { RangePicker } = DatePicker; +const { TextArea } = Input; function ParkingCardOrder() { // 列表列数据 const tableColumns = [ @@ -37,6 +39,11 @@ function ParkingCardOrder() { title: '实付金额', dataIndex: 'sale_amount', key: 'sale_amount', + render:(text) => { + return ( + {text}元 + ) + } }, { title: '支付渠道', @@ -75,8 +82,8 @@ function ParkingCardOrder() { <> -
{ }}>查看
-
{ }}>修改
+
{ handleDetail(record)}}>查看
+
{ handleUpData(record)}}>修改
}> @@ -85,6 +92,49 @@ function ParkingCardOrder() { } } ] + // 详情数据列表的列 + const detailColumns = [ + { + title: '序号', + dataIndex: 'id', + key: 'id', + }, + { + title: '车牌号', + dataIndex: 'plate', + key: 'plate', + }, + { + title: '车牌颜色', + dataIndex: 'plate_type', + key: 'plate_type', + }, + { + title: '手机号', + dataIndex: 'phone', + key: 'phone', + }, + { + title: '绑定时间', + dataIndex: 'binding_time', + key: 'binding_time', + }, + { + title: '操作人', + dataIndex: 'user', + key: 'user', + }, + ] + + // 弹框内容字段 + let modalParams = { + plate:'', + plate_type:'', + phone:'', + name:'', + } + + // 检索页表单 const [formData, setFormData] = useSetState({ plate:'', //车牌号 phone:'', //手机号 @@ -110,6 +160,30 @@ function ParkingCardOrder() { export_url: '', process_url: "" }) + + // 添加弹框展示 + const [addVisible, setAddVisible] = useState(false) + + // 添加和修改的标志 + const [actionType, setActionType] = useState(1) // 1为添加 2为修改 + + // 添加订单 + const [addOrderData, setAddOrderData] = useSetState(modalParams) + + // 停车卡名字下拉 + const [cardNameSelect, setCardNameSelect] = useState([]) + + // 查看或修改的展示与隐藏 + const [isShowDetail, setIsShowDetail] = useState(false) + + // 列表中的每行数据 + const [listItem, setListItem] = useState({}) + + // 修改订单 + const [updataOrder, setUpdataOrder] = useSetState({}) + + // 详情表格数据 + const [detailTableData, setDetailTableData] = useState([]) // 不可选择的日期 const disabledDate = (current) => { return current && current < moment().startOf('day'); @@ -164,10 +238,126 @@ function ParkingCardOrder() { lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length }) getData(Object.assign({}, formData, { pn: 1, page_size: length })) } + + // 查看 + const handleDetail =(data) => { + setActionType("1") + setIsShowDetail(true) + setListItem(data) + setDetailTableData({ + + }) + } + + // 修改 + const handleUpData = (data) => { + setActionType("2") + setIsShowDetail(true) + setListItem(data) + } + //下载 + const Donwload = (url) => { + var link = document.createElement("a"); + link.setAttribute("target", "_blank"); + link.style.display = "none"; + link.href = url ? url : ""; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + + // 导出 + const ReportPaySummaryReport = () => { + ajax.exportOrder(formData).then(res => { + if (parseInt(res?.status) === 20000){ + Donwload(res.data?.url) + } + else { + message.error(res?.message); + } + }).catch(e => + console.log(e)) + } + // 添加订单 + const addCardOrder = () => { + setActionType(1) + setAddVisible(true) + } + + // 停车卡名称下拉 + const getSelectCardData = () => { + ajax.selectCardOrder().then(res => { + if(res.status == 20000){ + setCardNameSelect(res.data) + } + }).catch(e => console.log(e)) + } + + // 保存订单 + const placeSaveBtn = () =>{ + let data = { + ...addOrderData, + effective_days:undefined, + days:undefined, + scope:undefined + } + let phoneReg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/) + + if(addOrderData.plate != ''&& !utils?.validationPlate(addOrderData.plate)){ + message.error('请输入正确的车牌号') + return + } + else if(addOrderData.plate == ''){ + message.error('请输入车牌号') + return + }else if(addOrderData.plate_type == ''){ + message.error('请选择车牌颜色') + return + }else if(!phoneReg.test(addOrderData.phone)){ + message.error('请输入正确的手机号') + return + }else if(addOrderData.name == ''){ + message.error('请选择停车卡名称') + return + }else{ + ajax.saveCardOrder(data).then((res) => { + if (res.status === 20000) { + setAddVisible(false) + setAddOrderData(modalParams) + getData(formData) + message.success("保存成功") + } + }).catch(err => { + console.log(err); + }) + } + } + + // 停车卡名字下拉 + const handleCardName = (e) => { + let data = cardNameSelect.find(item => item.value == e) + console.log(data); + setAddOrderData({ + name:e, + effective_days:data.effective_days, + days:data.days, + scope:data.scope, + card_id:data.card_id + }) + } + + // 取消按钮 + const placeBtn = () => { + setAddVisible(false) + setAddOrderData(modalParams) + } + useEffect(() => { getData() + getSelectCardData() }, []) return ( + <>
@@ -422,7 +612,7 @@ function ParkingCardOrder() { type="primary" className="yisa-btn colorBtn" icon={} - onClick={() => { }} + onClick={() => {addCardOrder()}} style={{width:110}}> 添加订单 @@ -430,8 +620,8 @@ function ParkingCardOrder() { type="primary" className="yisa-btn exportBtn" icon={} - onClick={() => { }} - style={{background:"#fff",color:'#59b7ff'}} + onClick={() => { ReportPaySummaryReport()}} + style={{background:"#fff",color:'#59b7ff',height:'100%'}} > 导出 @@ -440,8 +630,10 @@ function ParkingCardOrder() {
- 共检索到{resultData.total}条结果 - + {!isShowDetail ? + <> + 共检索到{resultData.total}条结果 + - + + : + <> +

订单详情

+
+ 订单信息 +
+
+ + + {listItem?.status || '---'} + + + {listItem?.pay_time || '---'} + + + { + actionType == '2' && + * + } + 车牌号 + + } + span={1.5} + > + { + actionType == "1" ? + + {listItem?.plate || '---'} + + : +
+ setUpdataOrder({plate:e.target.value})} + /> +
+ } + + + { + actionType == '2' && + * + } + 车牌颜色 + + } + span={1.5} + > + { + actionType == "1" ? + + {listItem?.plate_type || '---'} + + : +
+ setUpdataOrder({plate_type:e.target.value})} + /> +
+ } + + + {listItem?.purchase || '---'} + + + {listItem?.sale_amount || '---'}元 + + + {listItem?.channel || '---'} + + + {listItem?.equipment || '---'} + + +
+
+ 商品信息 +
+
+ + + {listItem?.name || '---'} + + + {listItem?.operator || '---'} + + + {listItem?.scope || '---'} + + + {listItem?.effective_start || '---'} + + + {listItem?.effective_days || '---'} + + + {listItem?.effective_end || '---'} + + +
+
+ 车辆绑定信息 +
+
+
+ + + } + +
+ {actionType == 1 ? '添加订单' : '修改订单'} +
+
+
+ * + + {setAddOrderData({plate:e.target.value})}} + /> +
+
+ * + + {setAddOrderData({phone:e.target.value})}} + /> +
+
+ * + +