yangsen
2 years ago
2 changed files with 360 additions and 111 deletions
@ -0,0 +1,299 @@ |
|||
import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import { Modal, Form, Row, Col, Spin } from "@douyinfe/semi-ui"; |
|||
import { IconTickCircle } from "@douyinfe/semi-icons"; |
|||
|
|||
import moment from "moment"; |
|||
|
|||
function pushModal (props) { |
|||
const { modalName, pushRef } = props; |
|||
const { dispatch, actions, vender, close } = props; |
|||
const pushData = props.pushData || {}; //修改时传来的值 |
|||
const form = useRef(); |
|||
const [visible, setVisible] = useState(false); //是否显示弹框 |
|||
const [isloading, setloading] = useState(false); //是否显示loading |
|||
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值 |
|||
const [step, setstep] = useState("none"); //第几步 |
|||
const [okText, setokText] = useState("测试校验"); //ok弹框text 右边 |
|||
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边 |
|||
const [formObj, setformObj] = useState(); //接口入参 |
|||
|
|||
function showDialog () { |
|||
//打开弹框 |
|||
setVisible(true); |
|||
} |
|||
function positionForm (val) { |
|||
let zz = /^(-?\d+)(\.\d+)?$/; |
|||
if (!val) { |
|||
return "请输入或拾取高德经纬度坐标"; |
|||
} else if (val.split(",").length != 2) { |
|||
return "请输入格式为116.354169,39.835452的经纬度坐标"; |
|||
} else if (!zz.test(val.split(",")[0])) { |
|||
return "只能填写数字"; |
|||
} else if (!zz.test(val.split(",")[1])) { |
|||
return "只能填写数字"; |
|||
} else { |
|||
return ""; |
|||
} |
|||
} |
|||
function handleOk () { |
|||
//点击弹框确定 右边按钮 |
|||
if (step == "none") { |
|||
form.current |
|||
.validate() |
|||
.then((values) => { |
|||
//表单校验 |
|||
console.log(values) |
|||
let valuesObj = JSON.parse(JSON.stringify(values)); |
|||
valuesObj.longitude = values.position.split(",")[0]; |
|||
valuesObj.latitude = values.position.split(",")[1]; |
|||
delete valuesObj.position; |
|||
if (pushData.id) { |
|||
valuesObj.id = pushData.id; |
|||
} |
|||
var front = new moment(); //验证前时间 |
|||
setloading(true); |
|||
dispatch( |
|||
actions.equipmentWarehouse.getCheck({ |
|||
serialNo: valuesObj.serialNo, |
|||
}) |
|||
).then((res) => { |
|||
var after = new moment(); //验证后时间 |
|||
var duration = moment.duration(after.diff(front))._data.milliseconds; |
|||
if (res.success) { |
|||
setTimeout( |
|||
() => { |
|||
setloadingTip("已完成"); |
|||
setTimeout(() => { |
|||
setstep("block"); |
|||
setloading(false); |
|||
setokText("确认"); |
|||
setcancelText("上一步"); |
|||
setloadingTip("获取中...请稍后..."); |
|||
}, 1000); |
|||
}, |
|||
duration > 2000 ? 0 : 2000 - duration |
|||
); |
|||
} else { |
|||
setTimeout( |
|||
() => { |
|||
setloadingTip("校验失败"); |
|||
setTimeout(() => { |
|||
setstep("none"); |
|||
setloading(false); |
|||
setokText("测试校验"); |
|||
setcancelText("取消"); |
|||
setloadingTip("获取中...请稍后..."); |
|||
}, 1000); |
|||
}, |
|||
duration > 2000 ? 0 : 2000 - duration |
|||
); |
|||
} |
|||
}); |
|||
setformObj(valuesObj); |
|||
}) |
|||
.catch((errors) => { |
|||
//表单校验失败 |
|||
console.log("errors", errors); |
|||
}); |
|||
} else { |
|||
dispatch(actions.equipmentWarehouse.addchangepush(formObj)).then((res) => { |
|||
setVisible(false); |
|||
close(); |
|||
}); |
|||
} |
|||
} |
|||
function handleAfterClose () { |
|||
//在关闭之后 |
|||
setstep("none"); |
|||
setokText("测试校验"); |
|||
setcancelText("取消"); |
|||
} |
|||
function handleCancel () { |
|||
//点击弹框取消 左边按钮 |
|||
if (step == "none") { |
|||
setVisible(false); |
|||
} else { |
|||
setstep("none"); |
|||
setokText("测试校验"); |
|||
setcancelText("取消"); |
|||
} |
|||
} |
|||
function handleLocation () { |
|||
//高德经纬度 |
|||
window.open("https://lbs.amap.com/tools/picker", "_blank"); |
|||
} |
|||
useImperativeHandle(pushRef, () => ({ |
|||
//传给父组件方法 |
|||
//aa即为子组件暴露给父组件的方法 |
|||
pushNumber: () => formObj.serialNo |
|||
})); |
|||
return ( |
|||
<> |
|||
<div onClick={showDialog}>{modalName == "add" ? "创建推送" : "修改"}</div> |
|||
<Modal |
|||
title={modalName == "add" ? "创建推送" : "修改"} |
|||
okText={okText} |
|||
cancelText={cancelText} //取消按钮 |
|||
visible={visible} |
|||
onOk={handleOk} |
|||
width={782} |
|||
height={720} |
|||
afterClose={handleAfterClose} |
|||
onCancel={handleCancel} |
|||
> |
|||
<Spin tip={loadingTip} spinning={isloading}> |
|||
<div |
|||
style={{ |
|||
paddingLeft: 16, |
|||
display: step == "none" ? "block" : "none", |
|||
}} |
|||
> |
|||
<Form |
|||
allowEmpty |
|||
labelPosition="left" |
|||
labelAlign="left" |
|||
labelWidth="90px" |
|||
onValueChange={(values) => console.log(values)} |
|||
getFormApi={(formApi) => (form.current = formApi)} |
|||
> |
|||
<Row> |
|||
<Col span={12}> |
|||
<Form.Input |
|||
maxLength="39" |
|||
field="serialNo" |
|||
label="设备编号:" |
|||
initValue={pushData.serialNo || ""} |
|||
placeholder="请输入设备编号" |
|||
style={{ width: 149 }} |
|||
rules={[{ required: true, message: "请输入设备编号" }]} |
|||
/> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.InputNumber |
|||
formatter={(value) => `${value}`.replace(/\D/g, "")} |
|||
hideButtons={true} |
|||
maxLength="15" |
|||
field="regionCode" |
|||
label="行政区区码:" |
|||
initValue={pushData.regionCode || ""} |
|||
placeholder="请输入行政区区码" |
|||
style={{ width: 149 }} |
|||
/> |
|||
</Col> |
|||
<Col span={24}> |
|||
<Form.Input |
|||
maxLength="36" |
|||
field="name" |
|||
label="设备名称:" |
|||
initValue={pushData.name || ""} |
|||
placeholder="请输入设备名称" |
|||
style={{ width: 421 }} |
|||
rules={[ |
|||
{ |
|||
required: true, |
|||
message: "请输入设备名称、常用项目或位置定义", |
|||
}, |
|||
]} |
|||
/> |
|||
</Col> |
|||
<Col span={24}> |
|||
<Form.Select |
|||
label="设备厂家:" |
|||
field="venderId" |
|||
initValue={pushData.venderId || null} |
|||
placeholder="请选择设备厂家" |
|||
style={{ width: 421 }} |
|||
rules={[{ required: true, message: "请选择设备厂家" }]} |
|||
> |
|||
{vender.map((item, index) => ( |
|||
<Form.Select.Option key={index} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
))} |
|||
</Form.Select> |
|||
</Col> |
|||
<Col span={24} style={{ display: "flex" }}> |
|||
<Form.Input |
|||
maxLength="39" |
|||
field="position" |
|||
label="安装位置:" |
|||
initValue={ |
|||
pushData.longitude && pushData.latitude |
|||
? pushData.longitude + "," + pushData.latitude |
|||
: "" |
|||
} |
|||
placeholder="请输入或拾取高德经纬度坐标" |
|||
style={{ width: 386 }} |
|||
validate={positionForm} |
|||
rules={[ |
|||
{ |
|||
required: true, |
|||
message: "请输入或拾取高德经纬度坐标", |
|||
}, |
|||
]} |
|||
/> |
|||
<div |
|||
style={{ |
|||
width: 32, |
|||
height: 32, |
|||
background: "#1859C1", |
|||
marginLeft: 4, |
|||
display: "flex", |
|||
justifyContent: "center", |
|||
alignItems: "center", |
|||
cursor: "pointer", |
|||
marginTop: 12, |
|||
borderRadius: 3 + "px", |
|||
}} |
|||
onClick={handleLocation} |
|||
> |
|||
<img |
|||
src="../../../assets/images/background/location.png" |
|||
width={16} |
|||
height={20} |
|||
/> |
|||
</div> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</div> |
|||
|
|||
<div style={{ height: 224, display: step }}> |
|||
<div |
|||
style={{ |
|||
paddingTop: 50, |
|||
display: "flex", |
|||
justifyContent: "center", |
|||
}} |
|||
> |
|||
<IconTickCircle style={{ color: "#04B234", fontSize: 60 }} /> |
|||
</div> |
|||
<div |
|||
style={{ |
|||
marginTop: 20, |
|||
display: "flex", |
|||
justifyContent: "center", |
|||
}} |
|||
> |
|||
是否确认创建推送？ |
|||
</div> |
|||
</div> |
|||
</Spin> |
|||
</Modal> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, vender } = state; |
|||
return { |
|||
loading: members.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
members: members.data, |
|||
vender: vender.data || [], //设备厂家 |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(pushModal); |
|||
Loading…
Reference in new issue