费用配置表单时间重叠判断，区域配置表单页面优化

ebike-operate/src/views/Urban/OperateRegion/index.vue

@@ -185,7 +185,10 @@
       width="1000px"
       :maskClosable="false"
     >
-      <RegionFeeCofFrom ref="formModel"></RegionFeeCofFrom>
+      <RegionFeeCofFrom
+        :key="modalFreeKey"
+        ref="formModel"
+      ></RegionFeeCofFrom>
     </a-modal>
     <!-- 运营配置 -->
     <a-modal
@@ -195,7 +198,10 @@
       width="1000px"
       :maskClosable="false"
     >
-      <OperateConfForm ref="formModelConfig"></OperateConfForm>
+      <OperateConfForm
+        :key="modalOperateKey"
+        ref="formModelConfig"
+      ></OperateConfForm>
     </a-modal>
     <!-- 地图 -->
     <operateRegionMap
@@ -218,6 +224,7 @@ import {
   SettingOutlined
 } from '@ant-design/icons-vue'
 import { useRouter, useRoute } from 'vue-router'
+import { getGUID } from '@/utils/tools'
 
 // 表格行数据
 const dataSource = ref([])
@@ -231,6 +238,9 @@ const open = ref(false);
 const openConfig = ref(false);
 const editORMapModel = ref(null);
 const openORMapTitle = ref('地图');
+const modalFreeKey = ref(getGUID())
+const modalOperateKey = ref(getGUID())
+
 // 查询相关
 const queryform = ref({
   regionName: '',
@@ -403,6 +413,7 @@ const search = () => {
  * @param record 
  */
 const feeConfigInfo = (record) => {
+  modalFreeKey.value = getGUID();
   openTitle.value = "费用信息 - " + record['regionName']
   open.value = true
   nextTick(() => {
@@ -433,6 +444,7 @@ const handleOkFeeModal = () => {
  * @param record 
  */
 const regionConfigInfo = (record) => {
+  modalOperateKey.value = getGUID();
   openTitleConfig.value = "运营配置 - " + record['regionName']
   openConfig.value = true
   nextTick(() => {
@@ -449,7 +461,7 @@ const regionConfigInfo = (record) => {
  */
 const handleOkConfgModal = () => {
   formModelConfig.value.formSave((data => {
-    openConfig.value = false;
+    // openConfig.value = false;
     if (data['code'] == 200) {
       getData()
     } else {

ebike-operate/src/views/form/operateregion/CustomerServiceConfigForm.vue

@@ -78,7 +78,7 @@
 
               </template>
               <template v-if=" column.type == 'time'">
-                <TimeRangePicker v-model:value="form.operateTimeBytime" />
+                <TimeRangePicker v-model:value="record[column.dataIndex]" />
               </template>
               <template v-if=" column.type == 'input'">
                 <a-input
@@ -174,15 +174,15 @@ const remove = (val, filed, array) => {
   }
 }
 
-
 const validateForm = async () => {
-
   await formRef.value.validate();
   form.value.tableName = 'ebikeSysLinktelDto'
   return form.value;
 }
-defineExpose({
-  validateForm
-});
 
+const resetFormValue = () => {
+  formRef.value.resetFields()
+}
+
+defineExpose({ validateForm, resetFormValue });
 </script>

ebike-operate/src/views/form/operateregion/LockCarConfigForm.vue

@@ -180,8 +180,10 @@ const validateForm = async () => {
   form.value.tableName = 'ebikeSysrlocksetDto'
   return form.value;
 }
-defineExpose({
-  validateForm
-});
 
+const resetFormValue = () => {
+  formRef.value.resetFields()
+}
+
+defineExpose({ validateForm, resetFormValue });
 </script>

ebike-operate/src/views/form/operateregion/OperateConfForm.vue

@@ -54,17 +54,25 @@ const useCarForm = ref(null);
 const lockCarForm = ref(null);
 const returnCarForm = ref(null);
 const customerServiceForm = ref(null);
-
+const isAdd = ref(true);
 const spinning = ref(false);
 const tipContent = ref("加载中...");
 
 const openForm = (params = {}) => {
+  isAdd.value = true;
   if (params['regionId']) {
     spinning.value = true;
     callOperate("/ebikeSysRoperateset/getRegionConfigById?regionId="
       + params['regionId'], {}, "get").then(res => {
         spinning.value = false;
+        if (res.code == 200) {
+          if (res.data) {
+            isAdd.value = false;
 
+          }
+        } else {
+          message.error(res.message);
+        }
       })
   }
 };
@@ -93,11 +101,21 @@ const formSave = (onCallBack) => {
   Promise.all(validationPromises).then(() => {
     tipContent.value = "保存中..."
     spinning.value = true;
-    callOperate("/ebikeSysRoperateset/save", params).then(res => {
+    let url = "save";
+    if (!isAdd.value) {
+      url = "update"
+    }
+    callOperate("/ebikeSysRoperateset/" + url, params).then(res => {
       spinning.value = false;
-      if (onCallBack) {
+      if (res.code == 200) {
-        res.data = params;
+        //重置表单数据
-        onCallBack(res);
+        forms.map(form => {
+          form.value.resetFormValue()
+        })
+        if (onCallBack) {
+          res.data = params;
+          onCallBack(res);
+        }
       }
     })
   }).catch(error => {

ebike-operate/src/views/form/operateregion/OperateConfigForm.vue

@@ -797,8 +797,10 @@ const validateForm = async () => {
   form.value.tableName = 'ebikeSysRoperatesetDto'
   return form.value;
 }
-defineExpose({
-  validateForm
-});
 
+const resetFormValue = () => {
+  formRef.value.resetFields()
+}
+
+defineExpose({ validateForm, resetFormValue });
 </script>

ebike-operate/src/views/form/operateregion/RegionFeeCofFrom.vue

@@ -28,23 +28,6 @@
         </a-col>
       </a-row>
       <a-row :gutter="8">
-        <!-- <a-col :xs="12">
-          <a-form-item
-            label="免费时长模式"
-            required
-            name="freeDurationMode"
-            :rules="[{ required: true, message: '请选择免费时长模式' }]"
-          >
-            <a-radio-group
-              v-model:value="form.freeDurationMode"
-              name="radioGroup"
-              @change="changeFreeDurationMode"
-            >
-              <a-radio value="1">分钟</a-radio>
-              <a-radio value="2">秒</a-radio>
-            </a-radio-group>
-          </a-form-item>
-        </a-col> -->
         <a-col :xs="12">
           <a-form-item
             :label="freeDuration"
@@ -190,19 +173,67 @@
                     :style="{ width: '100%' }"
                   />
                 </template>
-                <template v-if=" column.type == 'time'">
+                <div id="timePicker"></div>
+                <template v-if="column.type == 'time'">
+                  <a-tooltip
+                    color="white"
+                    :open="true"
+                    :getPopupContainer="getPopupContainerFunc"
+                    v-if="record['toolTip'] && column.dataIndex == 'startupTime'"
+                  >
+                    <template #title>
+                      <div style="color: red;">时间重叠！</div>
+                    </template>
+                    <TimePicker
+                      placeholder="请选择"
+                      format="HH:mm:ss"
+                      v-model:value="record[column.dataIndex]"
+                      @change="checkWorkTime"
+                    />
+                  </a-tooltip>
                   <TimePicker
+                    v-else
                     placeholder="请选择"
+                    format="HH:mm:ss"
                     v-model:value="record[column.dataIndex]"
+                    @change="checkWorkTime"
                   />
                 </template>
                 <template v-if=" column.type == 'select'">
+                  <a-tooltip
+                    color="white"
+                    :open="true"
+                    :getPopupContainer="getPopupContainerFunc"
+                    v-if="record['toolTip']"
+                  >
+                    <template #title>
+                      <div style="color: red;">已选择相同的周天数！</div>
+                    </template>
+                    <a-select
+                      v-model:value="record[column.dataIndex]"
+                      mode="multiple"
+                      style="width: 100%"
+                      placeholder="请选择"
+                      :max-tag-count="1"
+                      @change="checkWeek"
+                    >
+                      <a-select-option value="1">周一</a-select-option>
+                      <a-select-option value="2">周二</a-select-option>
+                      <a-select-option value="3">周三</a-select-option>
+                      <a-select-option value="4">周四</a-select-option>
+                      <a-select-option value="5">周五</a-select-option>
+                      <a-select-option value="6">周六</a-select-option>
+                      <a-select-option value="7">周日</a-select-option>
+                    </a-select>
+                  </a-tooltip>
                   <a-select
+                    v-else
                     v-model:value="record[column.dataIndex]"
                     mode="multiple"
                     style="width: 100%"
                     placeholder="请选择"
                     :max-tag-count="1"
+                    @change="checkWeek"
                   >
                     <a-select-option value="1">周一</a-select-option>
                     <a-select-option value="2">周二</a-select-option>
@@ -371,6 +402,10 @@ const deteilShow = ref(false);
 const isAdd = ref(true);
 const warmReminder = ref("");
 const field = ref("");
+const saveFlag = ref(true);
+const openTimeTip = ref(false)
+const openWeekTip = ref(false)
+
 
 const formData = () => ({
   costConfigId: "",
@@ -399,15 +434,6 @@ const form = ref(formData());
 // 表格列配置
 const columns = ref([])
 
-// const changeFreeDurationMode = (data) => {
-//   const value = data.target.value;
-//   if (value == "1") {
-//     freeDuration.value = "免费时长(分钟)";
-//   } else if (value == "2") {
-//     freeDuration.value = "免费时长(秒)";
-//   }
-// }
-
 const timePeriodColumns = [
   {
     title: '阶段',
@@ -564,7 +590,6 @@ const changeTimeDivisionCharging = (data) => {
 const openForm = (params = {}) => {
   deteilShow.value = false;
   Object.assign(form.value, formData());
-  formRef.value.resetFields();
   isAdd.value = true;
   if (params['regionId']) {
     form.value.regionId = params['regionId']
@@ -609,11 +634,17 @@ const addRecord = () => {
   const timeDivisionCharging = form.value.timeDivisionCharging;
   let item = {};
   let timeSegmentDetail = field.value
+  const record = form.value[timeSegmentDetail][form.value[timeSegmentDetail].length - 1];
+
   if (timeDivisionCharging == '2') {
+    let startupTime = dayjs("00:00:00", 'HH:mm:ss');
+    if (record) {
+      startupTime = dayjs(record['endTime'], 'HH:mm:ss')
+    }
     item = {
       key: getGUID(),
       phase: "",
-      startupTime: dayjs("00:00:00", 'HH:mm:ss'),
+      startupTime: startupTime,
       endTime: dayjs("23:59:59", 'HH:mm:ss'),
       startupCost: "",
       startupDuration: "",
@@ -640,6 +671,11 @@ const deleteRecord = (record) => {
   let item = _.clone(form.value[timeSegmentDetail]);
   remove(key, "key", item)
   form.value[timeSegmentDetail] = item;
+  if (timeSegmentDetail == 'ebikeSysRcostsetWeekDtos') {
+    checkWeek();
+  } else {
+    checkWorkTime();
+  }
 }
 
 const remove = (val, filed, array) => {
@@ -649,32 +685,85 @@ const remove = (val, filed, array) => {
   }
 }
 
-const formSave = (callBack) => {
+const getPopupContainerFunc = () => {
-  formRef.value.validate().then(() => {
+  return document.getElementById("timePicker");
-    debugger;
+}
-    tipContent.value = "保存中..."
+
-    spinning.value = true;
+/**
-    let url = "regionFeeConfigAdds";
+ * 检查周有无重叠
-    if (!isAdd.value) {
+ */
-      url = "updateRegionFeeConfig"
+const checkWeek = () => {
+  openWeekTip.value = false;
+  saveFlag.value = true;
+  const seenWeeks = [];
+  form.value['ebikeSysRcostsetWeekDtos'].forEach(items => {
+    const week = items['week'];
+    items['toolTip'] = false;
+    if (week.some(item => seenWeeks.includes(item))) {
+      openWeekTip.value = true;
+      items['toolTip'] = true;
+      saveFlag.value = false;
+    } else {
+      seenWeeks.push(...week);
     }
-    const param = _.cloneDeep(form.value)
-    if (param['ebikeSysRcostsetTimePeriodDtos'] && param['ebikeSysRcostsetTimePeriodDtos'].length > 0) {
-      param['ebikeSysRcostsetTimePeriodDtos'].forEach(item => {
-        item['startupTime'] = item['startupTime'].format('HH:mm:ss');
-        item['endTime'] = item['endTime'].format('HH:mm:ss');
-      })
-    }
-    callOperate("/ebikesysrcostset/" + url, param).then(res => {
-      spinning.value = false;
-      if (callBack) {
-        res.data = param;
-        callBack(res);
-      }
-    })
-  }).catch(error => {
-    console.log('error', error);
   });
+}
+
+/**
+ * 检查时间段有无重叠
+ */
+const checkWorkTime = () => {
+  openTimeTip.value = false;
+  saveFlag.value = true;
+  const periods = form.value['ebikeSysRcostsetTimePeriodDtos'];
+  for (let i = 0; i < periods.length; i++) {
+    const currentPeriod = periods[i];
+    const currentStartTime = new Date(currentPeriod['startupTime']);
+    const currentEndTime = new Date(currentPeriod['endTime']);
+    for (let j = i + 1; j < periods.length; j++) {
+      const comparePeriod = periods[j];
+      const compareStartTime = new Date(comparePeriod['startupTime']);
+      const compareEndTime = new Date(comparePeriod['endTime']);
+      comparePeriod['toolTip'] = false;
+      if (
+        (currentStartTime < compareEndTime && currentEndTime > compareStartTime) ||
+        (compareStartTime < currentEndTime && compareEndTime > currentStartTime)
+      ) {
+        openTimeTip.value = true;
+        saveFlag.value = false;
+        comparePeriod['toolTip'] = true;
+      }
+    }
+  }
+}
+
+const formSave = (callBack) => {
+  if (saveFlag.value) {
+    formRef.value.validate().then(() => {
+      tipContent.value = "保存中..."
+      spinning.value = true;
+      let url = "regionFeeConfigAdds";
+      if (!isAdd.value) {
+        url = "updateRegionFeeConfig"
+      }
+      const param = _.cloneDeep(form.value)
+      if (param['ebikeSysRcostsetTimePeriodDtos'] && param['ebikeSysRcostsetTimePeriodDtos'].length > 0) {
+        param['ebikeSysRcostsetTimePeriodDtos'].forEach(item => {
+          item['startupTime'] = item['startupTime'].format('HH:mm:ss');
+          item['endTime'] = item['endTime'].format('HH:mm:ss');
+        })
+      }
+      callOperate("/ebikesysrcostset/" + url, param).then(res => {
+        spinning.value = false;
+        if (callBack) {
+          res.data = param;
+          callBack(res);
+        }
+      })
+    }).catch(error => {
+      console.log('error', error);
+    });
+  }
 };
 
 defineExpose({ openForm, formSave });

ebike-operate/src/views/form/operateregion/ReturnCarConfigForm.vue

@@ -105,7 +105,7 @@
           :rules="[{ required: true, message: '请输入站点偏移角度误差' }]"
         >
           <a-input
-            v-model:value="form.returnDistance"
+            v-model:value="form.angularOffsetError"
             placeholder="请输入站点偏移角度误差"
             type="number"
           />
@@ -367,7 +367,7 @@ const changeFreeDispatchStudy = (e) => {
     isFreeDispatchStudy.value = true;
   } else {
     isFreeDispatchStudy.value = false;
-    form.value.freeFeturnType = null;
+    form.value.freeFeturnType = [];
     form.value.freeDispatchCount = null;
   }
 }
@@ -378,7 +378,7 @@ const changeIgnoreRegular = (e) => {
   } else {
     isIgnoreRegular.value = false;
     form.value.ignoreRegularErrorCount = null;
-    form.value.ignoreRegularType = null;
+    form.value.ignoreRegularType = [];
   }
 }
 
@@ -387,8 +387,11 @@ const validateForm = async () => {
   form.value.tableName = 'ebikeSysRbacksetDto'
   return form.value;
 }
-defineExpose({
+
-  validateForm
+const resetFormValue = () => {
-});
+  formRef.value.resetFields()
+}
+
+defineExpose({ validateForm, resetFormValue });
 
 </script>

ebike-operate/src/views/form/operateregion/SwitchConfigForm.vue

@@ -131,16 +131,45 @@
                 </a-popconfirm>
 
               </template>
+              <div id="timePicker"></div>
               <template v-if=" column.type == 'time'">
                 <TimeRangePicker v-model:value="record[column.dataIndex]" />
               </template>
               <template v-if=" column.type == 'select'">
+                <a-tooltip
+                  color="white"
+                  :open="true"
+                  :getPopupContainer="getPopupContainerFunc"
+                  v-if="record['toolTip']"
+                >
+                  <template #title>
+                    <div style="color: red;">已选择相同的周天数！</div>
+                  </template>
+                  <a-select
+                    v-model:value="record[column.dataIndex]"
+                    mode="multiple"
+                    style="width: 100%"
+                    placeholder="请选择"
+                    :max-tag-count="1"
+                    @change="checkWeek"
+                  >
+                    <a-select-option value="1">周一</a-select-option>
+                    <a-select-option value="2">周二</a-select-option>
+                    <a-select-option value="3">周三</a-select-option>
+                    <a-select-option value="4">周四</a-select-option>
+                    <a-select-option value="5">周五</a-select-option>
+                    <a-select-option value="6">周六</a-select-option>
+                    <a-select-option value="7">周日</a-select-option>
+                  </a-select>
+                </a-tooltip>
                 <a-select
+                  v-else
                   v-model:value="record[column.dataIndex]"
                   mode="multiple"
                   style="width: 100%"
                   placeholder="请选择"
                   :max-tag-count="1"
+                  @change="checkWeek"
                 >
                   <a-select-option value="1">周一</a-select-option>
                   <a-select-option value="2">周二</a-select-option>
@@ -233,6 +262,8 @@ const form = ref({
   operateTimeByWeek: []
 });
 const showStopTimeInfo = ref(false);
+const saveFlag = ref(true);
+const openWeekTip = ref(false)
 
 const columns = ref([
   {
@@ -262,7 +293,7 @@ const columns = ref([
 const addRecord = () => {
   form.value.operateTimeByWeek.push({
     key: getGUID(),
-    week: [],
+    weekday: [],
     workTime: ""
   })
 }
@@ -281,6 +312,10 @@ const remove = (val, filed, array) => {
   }
 }
 
+const getPopupContainerFunc = () => {
+  return document.getElementById("timePicker");
+}
+
 const changeIsOperate = (e) => {
   const value = e.target.value;
   if (value == '2') {
@@ -310,13 +345,33 @@ const changeOperateType = (data) => {
   }
 }
 
+const checkWeek = () => {
+  openWeekTip.value = false;
+  saveFlag.value = true;
+  const seenWeeks = [];
+  form.value['operateTimeByWeek'].forEach(items => {
+    const week = items['weekday'];
+    items['toolTip'] = false;
+    if (week.some(item => seenWeeks.includes(item))) {
+      openWeekTip.value = true;
+      items['toolTip'] = true;
+      saveFlag.value = false;
+    } else {
+      seenWeeks.push(...week);
+    }
+  });
+}
+
 const validateForm = async () => {
 
   await formRef.value.validate();
   form.value.tableName = 'ebikeSysRoperatesetDto'
   return form.value;
 }
-defineExpose({
+
-  validateForm
+const resetFormValue = () => {
-});
+  formRef.value.resetFields()
+}
+
+defineExpose({ validateForm, resetFormValue });
 </script>

ebike-operate/src/views/form/operateregion/UseCarConfigForm.vue

@@ -866,8 +866,10 @@ const validateForm = async () => {
   form.value.tableName = 'ebikeSysRusecondsetDto'
   return form.value;
 }
-defineExpose({
-  validateForm
-});
 
+const resetFormValue = () => {
+  formRef.value.resetFields()
+}
+
+defineExpose({ validateForm, resetFormValue });
 </script>