Browse Source

时间选择器修改

1178232204@qq.com 3 years ago
parent
commit
b6fadf844b
3 changed files with 115 additions and 45 deletions
  1. 3 0
      src/common/common.less
  2. 55 24
      src/components/BlockLossManage/index.js
  3. 57 21
      src/components/FieldProblem/index.js

+ 3 - 0
src/common/common.less

@@ -230,4 +230,7 @@ body {
   .logoT{
     display: none;
   }
+}
+.ant-picker-footer{
+  display: none;
 }

+ 55 - 24
src/components/BlockLossManage/index.js

@@ -21,10 +21,10 @@ function BlockLossManage() {
     const [title, setTitle] = useState(0);
     const [visible, setVisible] = useState(false);
     const [size, setSize] = useState(15);
-    const [startValue, setStartValue] = useState();
-    const [endValue, setendValue] = useState();
     const [current, setCurrent] = useState(1);
     const [type, setType] = useState(null);
+    const [isLimit, setIsLimit] = useState(false);
+    const [isLimit2, setIsLimit2] = useState(false);
     const [blockData, setBlockData] = useState({});
     const [blockDetail, setBlockDetail] = useState(null);//详情数据
     const [params, setParams] = useState({
@@ -70,28 +70,62 @@ function BlockLossManage() {
         })
     }
     function onStartChange(val) {
-        setStartValue(val)
+        setIsLimit2(true)
     }
     function onEndChange(val) {
-        setendValue(val)
+        setIsLimit(true)
     }
-    function disabledStartDate(startValue) {
-        if (!startValue || !endValue) {
-            //如果没有选择结束日期,则选择开始日期时,开始日期不能大于今天
-            return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    function disabledStartDate(current) {
+        if (isLimit) {
+            // 受到只能选七天日期限制
+            const formData = form.getFieldsValue();
+            const endDate = formData.endDate
+            if (!endDate) {
+                return current && current > Date.now()
+            }
+            return (
+                (current && current < moment(endDate).subtract(364, 'days').startOf('day')) ||
+                current > moment(endDate).add(0, 'days')
+            )
+            
+        } else {
+            return current && current > Date.now()
         }
-        //如果选择了结束日期,则结束日期和开始日期之差大于30天(24*60*60*1000*30是30天的毫秒数),还需要开始日期小于结束日期,返回true,禁止选择
-        return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365 || endValue.valueOf() <= startValue.valueOf();
-    }
 
-    function disabledEndDate(endValue) {
-        if (!endValue || !startValue) {
-            ////如果没有选择开始日期,则结束日期时大于今天
-            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    }
+    function disabledEndDate(current) {
+        if (isLimit2) {
+            const formData = form.getFieldsValue();
+            // 受到只能选七天日期限制
+            const startDate = formData.startDate
+            if (!startDate) {
+                return current > moment().add(1, 'days')
+            }
+            return (
+                current > moment(startDate).add(365, 'days') ||
+                (current && current < moment(startDate).subtract(0, 'days').startOf('day'))
+            )
+        } else {
+            return current > moment().add(0, 'days')
         }
-        //结束日期这里稍微复杂了一些,如果选择了开始日期,则结束日期和开始日期除了不能超过30个自然日之外,还需要结束日期不能小于开始日期,还需要不能超过今天,返回true为不能选择,所以用或链接,式子之间的符号正好与咱们分析的相反
-        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365;
     }
+    // function disabledStartDate(startValue) {
+    //     if (!startValue || !endValue) {
+    //         //如果没有选择结束日期,则选择开始日期时,开始日期不能大于今天
+    //         return startValue.valueOf() >= new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    //     }
+    //     //如果选择了结束日期,则结束日期和开始日期之差大于30天(24*60*60*1000*30是30天的毫秒数),还需要开始日期小于结束日期,返回true,禁止选择
+    //     return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365 || endValue.valueOf() <= startValue.valueOf();
+    // }
+
+    // function disabledEndDate(endValue) {
+    //     if (!endValue || !startValue) {
+    //         ////如果没有选择开始日期,则结束日期时大于今天
+    //         return endValue.valueOf() >= new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    //     }
+    //     //结束日期这里稍微复杂了一些,如果选择了开始日期,则结束日期和开始日期除了不能超过30个自然日之外,还需要结束日期不能小于开始日期,还需要不能超过今天,返回true为不能选择,所以用或链接,式子之间的符号正好与咱们分析的相反
+    //     return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() >= new Date().getTime() || endValue.valueOf() - startValue.valueOf() >= 24 * 60 * 60 * 1000 * 365;
+    // }
     //修改
     function showModal(title, row, type) {
         setVisible(true)
@@ -131,11 +165,6 @@ function BlockLossManage() {
         blockLossTypeGather({ startDate: params.startDate, endDate: params.endDate })
         setBlockDetail(null)
     }
-    function userChange2() {
-        setVisible(false)
-        blockLossTypeGather({ startDate: params.startDate, endDate: params.endDate })
-        setBlockDetail(null)
-    }
     const onFinish = (value) => {
         value.startDate = moment(value.startDate).format('YYYY-MM-DD 00:00:00');
         value.endDate = moment(value.endDate).format('YYYY-MM-DD 23:23:59');
@@ -143,6 +172,8 @@ function BlockLossManage() {
             ...data,
             ...value,
         }
+        setIsLimit(false)
+        setIsLimit2(false)
         setCurrent(1)
         setParams(param)
         getBlockLossPage(param);
@@ -151,6 +182,8 @@ function BlockLossManage() {
     const onReset = () => {
         setCurrent(1)
         setParams(data)
+        setIsLimit(false)
+        setIsLimit2(false)
         form.resetFields();
         getBlockLossPage(data);
         blockLossTypeGather(date)
@@ -231,7 +264,6 @@ function BlockLossManage() {
                                     <DatePicker
                                         allowClear={false}
                                         disabledDate={disabledStartDate}
-                                        value={startValue}
                                         placeholder="请选择开始日期"
                                         onChange={onStartChange}
                                     />
@@ -242,7 +274,6 @@ function BlockLossManage() {
                                     <DatePicker
                                         allowClear={false}
                                         disabledDate={disabledEndDate}
-                                        value={endValue}
                                         placeholder="请选择结束始日期"
                                         onChange={onEndChange}
                                     />

+ 57 - 21
src/components/FieldProblem/index.js

@@ -21,8 +21,8 @@ function FieldProblem() {
     const [total, setTotal] = useState(0);
     const [type, setType] = useState(0);//1新增 2修改
     const [visible, setVisible] = useState(false);
-    const [startValue, setStartValue] = useState();
-    const [endValue, setendValue] = useState();
+    const [isLimit, setIsLimit] = useState(false);
+    const [isLimit2, setIsLimit2] = useState(false);
     const [size, setSize] = useState(15);
     const [current, setCurrent] = useState(1);
     const [probleData, setProbleData] = useState({});
@@ -86,29 +86,63 @@ function FieldProblem() {
     function onSearch(val) {
         getModeName(val)
     }
-    function onStartChange(val) {
-        setStartValue(val)
+    function onStartChange() {
+        setIsLimit2(true)
     }
-    function onEndChange(val) {
-        setendValue(val)
+    function onEndChange() {
+        setIsLimit(true)
     }
-    function disabledStartDate(startValue) {
-        if (!startValue || !endValue) {
-            //如果没有选择结束日期,则选择开始日期时,开始日期不能大于今天
-            return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    function disabledStartDate(current) {
+        if (isLimit) {
+            // 受到只能选七天日期限制
+            const formData = form.getFieldsValue();
+            const endDate = formData.behospitalEndDate
+            if (!endDate) {
+                return current && current > Date.now()
+            }
+            return (
+                (current && current < moment(endDate).subtract(364, 'days').startOf('day')) ||
+                current > moment(endDate).add(0, 'days')
+            )
+            
+        } else {
+            return current && current > Date.now()
         }
-        //如果选择了结束日期,则结束日期和开始日期之差大于30天(24*60*60*1000*30是30天的毫秒数),还需要开始日期小于结束日期,返回true,禁止选择
-        return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365 || endValue.valueOf() <= startValue.valueOf();
-    }
 
-    function disabledEndDate(endValue) {
-        if (!endValue || !startValue) {
-            ////如果没有选择开始日期,则结束日期时大于今天
-            return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    }
+    function disabledEndDate(current) {
+        if (isLimit2) {
+            const formData = form.getFieldsValue();
+            // 受到只能选七天日期限制
+            const startDate = formData.behospitalStartDate
+            if (!startDate) {
+                return current > moment().add(1, 'days')
+            }
+            return (
+                current > moment(startDate).add(365, 'days') ||
+                (current && current < moment(startDate).subtract(0, 'days').startOf('day'))
+            )
+        } else {
+            return current > moment().add(0, 'days')
         }
-        //结束日期这里稍微复杂了一些,如果选择了开始日期,则结束日期和开始日期除了不能超过30个自然日之外,还需要结束日期不能小于开始日期,还需要不能超过今天,返回true为不能选择,所以用或链接,式子之间的符号正好与咱们分析的相反
-        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365;
     }
+    // function disabledStartDate(startValue) {
+    //     if (!startValue || !endValue) {
+    //         //如果没有选择结束日期,则选择开始日期时,开始日期不能大于今天
+    //         return startValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    //     }
+    //     //如果选择了结束日期,则结束日期和开始日期之差大于30天(24*60*60*1000*30是30天的毫秒数),还需要开始日期小于结束日期,返回true,禁止选择
+    //     return endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365 || endValue.valueOf() <= startValue.valueOf();
+    // }
+
+    // function disabledEndDate(endValue) {
+    //     if (!endValue || !startValue) {
+    //         ////如果没有选择开始日期,则结束日期时大于今天
+    //         return endValue.valueOf() > new Date().getTime();//大于今天的日期一律返回true,禁止选择
+    //     }
+    //     //结束日期这里稍微复杂了一些,如果选择了开始日期,则结束日期和开始日期除了不能超过30个自然日之外,还需要结束日期不能小于开始日期,还需要不能超过今天,返回true为不能选择,所以用或链接,式子之间的符号正好与咱们分析的相反
+    //     return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24 * 60 * 60 * 1000 * 365;
+    // }
     //修改
     function showModal(title, row, type) {
         setVisible(true)
@@ -152,12 +186,16 @@ function FieldProblem() {
             ...data,
             ...value,
         }
+        setIsLimit(false)
+        setIsLimit2(false)
         setCurrent(1)
         setParams(param)
         getColumnResultPage(param);
         getColumnResultNumber({ behospitalStartDate: value.behospitalStartDate, behospitalEndDate: value.behospitalEndDate })
     };
     const onReset = () => {
+        setIsLimit(false)
+        setIsLimit2(false)
         setCurrent(1)
         setParams(data)
         form.resetFields();
@@ -243,7 +281,6 @@ function FieldProblem() {
                                     <DatePicker
                                         allowClear={false}
                                         disabledDate={disabledStartDate}
-                                        value={startValue}
                                         placeholder="请选择开始日期"
                                         onChange={onStartChange}
                                     />
@@ -254,7 +291,6 @@ function FieldProblem() {
                                     <DatePicker
                                         allowClear={false}
                                         disabledDate={disabledEndDate}
-                                        value={endValue}
                                         placeholder="请选择结束始日期"
                                         onChange={onEndChange}
                                     />