Skip to content

T
TOSTUMI
Commit 212aeb1a authored by cellee's avatar cellee
Browse files
Options

新增设施预约时间组件 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent e52152da
Show whitespace changes
Inline Side-by-side
Showing with 436 additions and 135 deletions
src/components/OnTime/OnTime.less 0 → 100644
View file @ 212aeb1a
.ontime-box {
position: relative;
box-sizing: border-box;
border: 1px solid #d9d9d9;
border-radius: 2px;
&.disabled {
background: #f5f5f5;
border-color: #d9d9d9;
cursor: not-allowed;
}
.ims {
min-height: 30px;
line-height: 30px;
padding: 0 6px 0 10px;
color: #000;
font-size: 14px;
transition: all 0.5s;
cursor: pointer;
&.active {
color: #999;
}
span {
display: inline-block;
padding: 0 6px;
}
}
.icon {
transform: scale(0.9);
transform: rotate(0);
transition: all 0.3s;
&.icon-up {
transform: rotate(180deg);
}
}
// 时间段选择
.slot {
position: absolute;
top: calc(100% + 2px);
left: 0;
border: 1px solid #d9d9d9;
padding: 8px 8px 0;
z-index: 10;
background: #fff;
border-radius: 2px;
min-width: 396px;
// 可选时间
.opens {
display: flex;
justify-content: end;
align-items: center;
flex-wrap: wrap;
span.sapa {
cursor: pointer;
display: inline-block;
padding: 2px 4px;
margin: 0 8px 8px 0;
font-size: 13px;
letter-spacing: 1px;
border: 1px solid #d9d9d9;
border-radius: 2px;
transition: all 0.5s;
&:nth-child(4n) {
margin-right: 0;
}
&.active {
border-color: #1890ff;
background: #1890ff;
color: #fff;
}
&.disabled {
cursor: not-allowed;
border-color: #f9f9f9;
background: #f9f9f9;
color: #999;
}
//去掉双击页面内容的蓝色背景
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
// 无数据
.nodata {
width: 100%;
min-height: 80px;
padding: 20px 0;
text-align: center;
li {
padding-top: 10px;
}
span {
transform: scale(2);
}
}
}
// 按钮
.oks {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 8px;
button {
&:nth-child(1) {
margin-right: 6px;
}
}
}
}
}
src/components/OnTime/OnTime.tsx
View file @ 212aeb1a
import React, { useState, useEffect } from 'react';
import { Select, TimePicker } from 'antd';
const { Option } = Select;
import { getLocale } from 'umi';
import { Button, message } from 'antd';
import {
DownOutlined,
CloseCircleOutlined,
LinkOutlined,
CloseOutlined,
CheckOutlined,
} from '@ant-design/icons';
import moment from 'moment';
import './OnTime.less';
const OnTime = (porps: any) => {
// placeholder 默认显示 disabled 是否禁止
// openSelect 选中函数 limit 限制时间 type 类型 时开始还是结束 1 就是结束 结尾是59
// defaultValue 默认时间 inhibitTime 禁止选择时间
let { placeholder, disabled, openSelect, limit, type, defaultValue, inhibitTime } = porps;
// disabled 是否禁用 // limit 设施默认禁止时间段 // onChanges 提交到父页面 // inhibitTime 选择日期后的禁止时间
let { disabled, limit, onChanges, inhibitTime } = porps;
// 语言设置
const [imgOpen, setImgOpen] = useState([] as any);
// 是否选择
const [Scheduled, setScheduled] = useState(false);
// 可选择时间段
const [Quantum, setQuantum] = useState([] as any);
// 已经选择时间段 ---(应该储存 index )
const [time, settime] = useState([] as any);
const [imgOpen, setImgOpen] = useState(null as any);
// 已经预约时间禁止
const [Scheduled, setScheduled] = useState(null as any);
// 已经选择时间段
const [timeOks, settimeOks] = useState([] as any);
// 禁止选择时间
// 语言
useEffect(() => {
if (inhibitTime != null) {
let arrs = '' as any;
inhibitTime.forEach((element: any) => {
let strArr = cutOut(element);
arrs = arrs + strArr;
});
let confirm = [...new Set(arrs.substr(0, arrs.length - 1).split(','))];
if (getLocale() == 'zh-CN') {
setImgOpen(['开始时间', '结束时间']);
} else {
setImgOpen(['Start time', 'End time']);
}
}, [1]);
let newConfirm = [] as any;
confirm.forEach((element: any) => {
return newConfirm.push(parseInt(element));
});
// 设施开放时间
useEffect(() => {
if (limit) {
let time = limit.split('-');
let star = parseInt(moment(time[0], 'HH:mm').format('HH'));
let end = parseInt(moment(time[1], 'HH:mm').format('HH'));
for (let i = star; i < end; i++) {
let a = Quantum;
let item = {
id: i, // 值
disabled: false, // 是否禁用
active: false, // 是否选中
};
a.push(item);
setQuantum(a);
}
}
}, [limit]);
setScheduled(newConfirm);
// 已经选择的时间
useEffect(() => {
if (inhibitTime) {
// 先循环一次把所有k的变成可选
for (let k in Quantum) {
Quantum[k].disabled = false;
}
// 在进行判断
for (let i in inhibitTime) {
let a = parseInt(moment(inhibitTime[i], 'HH:mm').format('HH'));
for (let j in Quantum) {
if (Quantum[j].id == a) {
Quantum[j].disabled = true;
}
}
}
}
}, [inhibitTime]);
// 时间截取
function cutOut(str: any) {
var one = str.indexOf(':');
let str1 = parseInt(str.substring(0, one));
let str2 = parseInt(str.match(/-(\S*):/)[1]);
let arr = '';
for (let i = str1; i <= str2; i++) {
arr = `${arr}${i},`;
// 点击时间
const onclicks = (item: any, index: any) => {
// 用作判断
let is = true;
// 添加
let tim = time; // 已经选择的时间 (index)
let timOk = timeOks;
let list = Quantum; // 时间段列表
// 如果已经选择的时间没有选择两个以上的话就添加进去，否则先要重新还原
if (tim.length == 1) {
// 里面有一个值的话 把大于存在的动态赋值 class
let min = tim[0] < index ? tim[0] : index;
let max = tim[0] > index ? tim[0] : index;
// 先做下判断，看是不是选了中间已被占用的时间
for (let i = min; i < max; i++) {
if (Quantum[i].disabled) {
is = false;
}
return arr;
}
useEffect(() => {
if (defaultValue != null) {
let a = moment(defaultValue, 'HH:mm');
setImgOpen(a);
}
}, [defaultValue]);
// console.log(limit);
// 生成数组 -- 时间
const createArray = (num: any) => {
var arr = [];
for (let i = 0; i < num; i++) {
if (i < 10) {
arr[i] = `0${i}`;
} else {
arr[i] = i;
// 再改变区间内的值
if (is) {
for (let i = min; i < max; i++) {
list[i].active = true;
}
}
} else if (tim.length == 2) {
for (let i in list) {
list[i].active = false;
}
// 复原
time.length = 0;
timeOks.length = 0;
}
// 添加
if (is) {
list[index].active = true;
setQuantum([...list]);
// 先加入在排序
tim.push(index);
tim.sort(function (a: any, b: any) {
return a - b;
});
// 先加入在排序
timOk.push(item.id);
timOk.sort(function (a: any, b: any) {
return a - b;
});
settime([...tim]); // 排序加入 -- index
settimeOks([...timOk]); // 排序加入
}
return arr;
};
//小时
const hourS = createArray(24).map((item) =>
// 处理限制时间段
limit ? (
<Option value={item + (type ? ':59' : ':00')} key={item} disabled={Times(item, limit)}>
{item + (type ? ':59' : ':00')}
</Option>
) : (
<Option value={item + (type ? ':59' : ':00')} key={item}>
{item + (type ? ':59' : ':00')}
</Option>
),
);
// 点击展开
const opens = () => {
// 如果是禁用状态点击无效
if (!disabled) {
let start = !Scheduled;
setScheduled(start);
// 字符串截取判断
function Times(item: any, openTime: string) {
if (
parseInt(item) >= parseInt(openTime.slice(0, 2)) &&
parseInt(item) <= parseInt(openTime.slice(6, 8))
) {
if (Scheduled && Scheduled.indexOf(parseInt(item)) != -1) {
// 如果存在有预约的时间 且在数组里面，就禁止选择
return true;
}
return false;
} else {
return true;
// 复原选中的
if (start) {
// 先全部清掉
for (let i in Quantum) {
// 再赋值选中的
let imgOpens = parseInt(moment([0], 'HH:mm').format('HH'));
// 如果已选择了 还原
if (!isNaN(imgOpens)) {
for (let j in imgOpen) {
if (i == imgOpen[j]) {
Quantum[i].active = true;
}
}
}
}
}
}
};
// 点击确定
const oks = () => {
if (timeOks.length == 0) {
// 还原提示
} else if (timeOks.length == 1) {
// 只有一个的话
let openTime = [
moment(timeOks[0], 'HH').format('HH:mm'),
moment(timeOks[0] + 1, 'HH').format('HH:mm'),
];
setImgOpen(openTime);
// console.log(openTime);
// 提交到父页面
onChanges(openTime);
} else {
// 有两个的话
let openTime = [
moment(timeOks[0], 'HH').format('HH:mm'),
moment(timeOks[1] + 1, 'HH').format('HH:mm'),
];
setImgOpen(openTime);
// console.log(openTime);
// 提交到父页面
onChanges(openTime);
}
// 再隐藏
setScheduled(false);
};
// 点击取消还原
const cancel = () => {
Quantum.map((item: any) => {
return (item.active = false);
});
// 再隐藏
setScheduled(false);
};
return (
<>
{defaultValue ? (
<TimePicker
defaultValue={moment(defaultValue, 'HH:mm')}
format="HH:mm"
onChange={openSelect}
placeholder={placeholder}
defaultOpenValue={moment('00:00', 'HH:mm')}
disabled={disabled}
<div className={disabled ? 'ontime-box disabled' : 'ontime-box'}>
<div
className={Scheduled ? 'ims' : 'ims active'}
onClick={() => {
opens();
}}
>
<span>{imgOpen[0]}</span> - <span>{imgOpen[1]}</span>
{Scheduled ? (
<CloseCircleOutlined twoToneColor="#333" />
) : (
<DownOutlined
style={{ color: '#d9d9d9' }}
className={Scheduled ? 'icon icon-up' : 'icon'}
/>
)}
</div>
{/* 时间段选择 */}
{Scheduled ? (
<div className="slot">
{/* 可选时间 */}
<div className="opens">
{Quantum.length > 0 ? (
Quantum.map((item: any, index: any) => {
return (
<span
key={index}
className={
item.active
? `sapa active ${item.disabled ? 'disabled' : ''}`
: `sapa ${item.disabled ? 'disabled' : ''}`
}
onClick={() => {
onclicks(item, index);
}}
>
{item.id < 10 ? `0${item.id}` : item.id}:00-
{item.id + 1 < 10 ? `0${item.id + 1}` : item.id + 1}:00
</span>
);
})
) : (
<Select
style={{ width: 140 }}
placeholder={placeholder}
disabled={disabled}
onSelect={openSelect}
<div className="nodata">
<LinkOutlined />
<li>No time to choose</li>
</div>
)}
</div>
{/* 确认按钮 */}
{Quantum.length > 0 ? (
<div className="oks">
<Button
size="small"
icon={<CloseOutlined />}
onClick={() => {
cancel();
}}
>
Cancel
</Button>
<Button
type="primary"
icon={<CheckOutlined />}
size="small"
onClick={() => {
oks();
}}
>
{hourS}
</Select>
OK
</Button>
</div>
) : (
''
)}
</div>
) : (
''
)}
</>
</div>
);
};
......
src/components/OnTime/OnTimeTow.tsx
View file @ 212aeb1a
......@@ -3,7 +3,7 @@ import { TimePicker } from 'antd';
const { RangePicker } = TimePicker;
import moment from 'moment';
const OnTime = (porps: any) => {
const OnTimeTow = (porps: any) => {
// disabled 是否禁止
// limit 默认开放时间
// inhibitTime 禁止选择时间
......@@ -53,4 +53,4 @@ const OnTime = (porps: any) => {
);
};
export default OnTime;
export default OnTimeTow;
src/models/CommunityManagement/FacilityBookings.ts
View file @ 212aeb1a
......@@ -133,7 +133,7 @@ export default {
if (JSON.stringify(Data3) == "{}") {
Data3 = false
// 提示小区没有设施
message.error('There Are No Facilities In The Community !');
message.warning('There Are No Facilities In The Community !');
}
yield put({ type: 'returnPage3', Data3});
......
src/pages/AccountManagement/account/AccountAdds.tsx
View file @ 212aeb1a
......@@ -204,10 +204,10 @@ const Account = (props: any) => {
permissionArray: newData,
};
console.log(value);
console.log(obj);
// RA(38, value, module, dispatch); // 信息上传
// RA(42, obj, module, dispatch); // 权限上传
// console.log(value);
// console.log(obj);
RA(38, value, module, dispatch); // 信息上传
RA(42, obj, module, dispatch); // 权限上传
return true;
}
};
......
src/pages/AccountManagement/account/AccountEdit.tsx
View file @ 212aeb1a
......@@ -529,7 +529,7 @@ const Account = (props: any) => {
localStorage.getItem('towAccount') || '[{"id":1,"tosAccountName":"test"}]',
);
console.log(towAccount);
// console.log(towAccount);
// 选择哪个二级账号
const handleChange = (value: any) => {
......
src/pages/CommunityManagement/CellList/Adds.tsx
View file @ 212aeb1a
......@@ -450,7 +450,11 @@ const Adds = (props: any) => {
</Form.Item>
<Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}>
<RangePicker format="HH:mm" placeholder={['Start Time', 'End Time']} />
<RangePicker
minuteStep={60}
format="HH:mm"
placeholder={['Start Time', 'End Time']}
/>
</Form.Item>
<Form.Item label="Community Telephone" name="info" rules={[{ required: false }]}>
......
src/pages/CommunityManagement/FacilityBookings/Bookings.tsx
View file @ 212aeb1a
......@@ -17,7 +17,8 @@ import { validateMessages } from '@/utils/params';
import moment from 'moment';
import { BookingsTip } from '@/utils/tip';
// 自定义时间段
import OnTime from '@/components/OnTime/OnTimeTow';
// import OnTimeTow from '@/components/OnTime/OnTimeTow';
import OnTimeTow from '@/components/OnTime/OnTime';
const Bookings = (props: any) => {
const { dispatch, Data3, Result, DataSave, token, load, resultTime, Remaining } = props;
......@@ -139,17 +140,17 @@ const Bookings = (props: any) => {
// 没有次数
if (Remaining.canReservationNum == 0) {
message.error('No bookable times');
message.warning('No bookable times');
return false;
}
// 判断时间选择
if (value.Time == null) {
message.error('Please Fill In The Appointment Period!');
message.warning('Please Fill In The Appointment Period!');
return false;
}
// 手机判断
if (tmp.accountPhone && tmp.accountPhone.length != 11 && tmp.accountPhone.length != 8) {
message.error('Please Fill In The Contact Information Correctly!');
message.warning('Please Fill In The Contact Information Correctly!');
return false;
}
// 小区信息
......@@ -173,12 +174,10 @@ const Bookings = (props: any) => {
}
// 姓名长度
if (tmp.accountName && tmp.accountName.length < 2) {
message.error('User Name Should be limit 2~30!', 3);
message.warning('User Name Should be limit 2~30!', 3);
} else {
tmp.reservedTimeList = [
moment(value.Time[0]).format('HH:mm'),
moment(value.Time[1]).format('HH:mm'),
]; // 预约时间
// tmp.reservedTimeList = Array.from(new Set(value.Time)); // 预约时间 不需要去重也可
tmp.reservedTimeList = value.Time; // 预约时间
// 选择的总时间段
let times = [] as any;
......@@ -204,7 +203,7 @@ const Bookings = (props: any) => {
// 如果选择的时间段有其他包含的话 给出提示，否则 可以提交
if (fruit) {
// 判断选的时间 是不是结束时间小于开始时间
message.error('Reservation period already exists!');
message.warning('Reservation period already exists!');
return false;
} else {
delete tmp.Time;
......@@ -325,12 +324,13 @@ const Bookings = (props: any) => {
};
// 点击确定时间
const onChanges = (value: any, b: any) => {
// console.log(value);
// console.log(b);
const onChanges = (value: any) => {
let a = parseInt(moment(value[1], 'HH:mm').format('HH')) - 1;
let b = moment(a, 'HH').format('HH:mm');
let c = [value[0], b];
// 修改后的时间
formRef.current.setFieldsValue({
Time: [moment(b[0], 'HH:mm'), moment(b[1], 'HH:mm')],
Time: c,
});
};
......@@ -415,7 +415,7 @@ const Bookings = (props: any) => {
</Col>
<Col>
<Form.Item label="Reserve Time" name="Time" noStyle>
<OnTime
<OnTimeTow
disabled={prohibit}
limit={curString.categoriesOpenTime} // 设施默认禁止时间段
inhibitTime={result} // 选择日期后的禁止时间
......
src/pages/ContractManagement/ContractContent.tsx
View file @ 212aeb1a
......@@ -506,11 +506,11 @@ const ContractContent = (props: any) => {
style={{ marginLeft: 150, textTransform: 'capitalize' }}
>
<p style={{ marginBottom: 0 }}>
The system will send e-mail notification in the{' '}
<span style={{ color: 'red' }}>{state.tipTime[0]}</span> and{' '}
The system will send email on{' '}
<span style={{ color: 'red' }}>{state.tipTime[0]}</span> ,{' '}
<span style={{ color: 'red' }}>{state.tipTime[1]}</span> and{' '}
<span style={{ color: 'red' }}>{state.tipTime[2]}</span> that the contract is
about to expire !
<span style={{ color: 'red' }}>{state.tipTime[2]}</span> before the contract is
about to expire!
</p>
<p style={{ marginBottom: 0 }}>
<span style={{ color: 'red' }}>*</span> If the time has passed, it will not be
......
src/pages/ContractManagement/ContractDetail.tsx
View file @ 212aeb1a
......@@ -35,7 +35,7 @@ const ContractContent = (props: any) => {
const [fileList, setFileList] = useState([] as any); // 图片列表
const [uploadUp, setUploadUp] = useState(true); // 禁止上传 直到选择了小区后
const [comtyName, setComtyName] = useState(null); // 小区名字
const [tipTime, setTipTime] = useState(['previous month', 'two months'] as any); //提示时间
const [tipTime, setTipTime] = useState(['previous month', 'two months', 'there months'] as any); //提示时间
const [tipModal, settipModal] = useState(false); //附件弹窗
const [fileInfo, setfileInfo] = useState(null as any); //附件内容
//pdf 页码内容
......@@ -64,13 +64,14 @@ const ContractContent = (props: any) => {
setUploadUp(false);
// 提示时间
let a1 = moment(DataSaveDetail.contractValidEndDate)
.subtract(2, 'month')
.format('YYYY-MM-DD');
let a2 = moment(DataSaveDetail.contractValidEndDate)
.subtract(1, 'month')
.format('YYYY-MM-DD');
setTipTime([a1, a2]);
// 提示时间
let a1 = timeOver(DataSaveDetail.contractValidEndDate, 2);
let a2 = timeOver(DataSaveDetail.contractValidEndDate, 1);
let a3 = timeOver(DataSaveDetail.contractValidEndDate, 3);
// setTipTime([a1, a2]);
setTipTime([a3, a1, a2]);
// 给到上传绑定
setComtyName(DataSaveDetail.communityName);
......@@ -86,6 +87,11 @@ const ContractContent = (props: any) => {
}
}, [DataSaveDetail]);
// 时间转换
const timeOver = (time: any, day: any) => {
return moment(time).subtract(day, 'month').format('YYYY-MM-DD');
};
// 监听上传图片列表
useEffect(() => {
if (FileImg != null) {
......@@ -191,7 +197,7 @@ const ContractContent = (props: any) => {
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>{DataSaveDetail ? 'Detail' : 'Add'} Contract</div>
<div className={styles.item1}>Contract Details</div>
<button className={styles.item3} onClick={goToReturn}>
<LeftOutlined />
Back
......@@ -312,10 +318,10 @@ const ContractContent = (props: any) => {
style={{ marginLeft: 150, textTransform: 'capitalize' }}
>
<p style={{ marginBottom: 0 }}>
The system will send e-mail notification in the{' '}
<span style={{ color: 'red' }}>{tipTime[0]}</span> and{' '}
<span style={{ color: 'red' }}>{tipTime[1]}</span> that the contract is about to
expire !
The system will send email on <span style={{ color: 'red' }}>{tipTime[0]}</span>{' '}
, <span style={{ color: 'red' }}>{tipTime[1]}</span> and{' '}
<span style={{ color: 'red' }}>{tipTime[2]}</span> before the contract is about
to expire!
</p>
<p style={{ marginBottom: 0 }}>
<span style={{ color: 'red' }}>*</span> If the time has passed, it will not be
......
src/pages/runTest/Template.tsx
View file @ 212aeb1a
/*
* @Author: your name
* @Date: 2020-11-19 16:54:53
* @LastEditTime: 2021-01-29 20:21:05
* @LastEditors: your name
* @Description: In User Settings Edit
* @FilePath: \tostumi\src\pages\runTest\Template.tsx
*/
import React, { useEffect } from 'react';
import styles from './index.less';
......@@ -22,7 +30,7 @@ const Guard = (props: any) => {
return (
<div className={styles.base}>
<TitleGet title={'Version 1.6.0'} />
<TitleGet title={'Version 1.6.1'} />
{/* <p>
token:{page.token}
name:{getCookie('name')}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment