修改时间组件

src/views/modules/plugins/point/icpointvaccinesinoculation-add-or-update.vue

@@ -8,15 +8,15 @@
       label-width="120px"
     >
       <!--<el-form-item label="所属组织名称" prop="orgName">-->
-        <!--<el-select v-model="dataForm.orgName" placeholder="所属组织名称">-->
+      <!--<el-select v-model="dataForm.orgName" placeholder="所属组织名称">-->
-          <!--<el-option-->
+      <!--<el-option-->
-            <!--v-for="item in organizationList"-->
+      <!--v-for="item in organizationList"-->
-            <!--:key="item.value"-->
+      <!--:key="item.value"-->
-            <!--:label="item.label"-->
+      <!--:label="item.label"-->
-            <!--:value="item.value"-->
+      <!--:value="item.value"-->
-          <!--&gt;-->
+      <!--&gt;-->
-          <!--</el-option>-->
+      <!--</el-option>-->
-        <!--</el-select>-->
+      <!--</el-select>-->
       <!--</el-form-item>-->
       <el-form-item label="疫苗接种点名称" prop="name">
         <el-input
@@ -25,12 +25,48 @@
         ></el-input>
       </el-form-item>
       <el-form-item label="接种日期" prop="inoculationDate">
-        <el-input
+        <!-- <el-input
           v-model="dataForm.inoculationDate"
           placeholder="接种日期"
-        ></el-input>
+        ></el-input> -->
+        <el-date-picker
+          v-model="dataForm.inoculationDate"
+          value-format="yyyy-MM-dd"
+          type="date"
+          placeholder="选择日期"
+        >
+        </el-date-picker>
       </el-form-item>
-      <el-form-item label="接种上午开始时间" prop="moStartTime">
+      <el-form-item label="上午接种时间">
+        <el-time-picker
+          is-range
+          v-model="startTime"
+          value-format="HH:mm:ss"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          placeholder="选择时间范围"
+          @change="startTimeChange"
+        >
+        </el-time-picker>
+      </el-form-item>
+      <el-form-item label="下午接种时间">
+        <el-time-picker
+          is-range
+          v-model="endTime"
+          value-format="HH:mm:ss"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          placeholder="选择时间范围"
+          @change="endTimeChange"
+          :picker-options="{
+            selectableRange: '12:00:01 - 24:00:00',
+          }"
+        >
+        </el-time-picker>
+      </el-form-item>
+      <!-- <el-form-item label="接种上午开始时间" prop="moStartTime">
         <el-input
           v-model="dataForm.moStartTime"
           placeholder="接种上午开始时间"
@@ -53,7 +89,7 @@
           v-model="dataForm.afEndTime"
           placeholder="接种下午结束时间"
         ></el-input>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="" prop="noAvailableVaccines">
         <el-checkbox
           v-model="dataForm.noAvailableVaccines"
@@ -72,7 +108,12 @@
           disabled
         ></el-input>
       </el-form-item>
-      <el-form-item label="位置坐标" class="position_label" prop="longitude" style="display: block">
+      <el-form-item
+        label="位置坐标"
+        class="position_label"
+        prop="longitude"
+        style="display: block"
+      >
         <div>
           <el-input
             class="item_width_4"
@@ -160,6 +201,8 @@ export default {
       },
       keyWords: null,
       // organizationList: [],
+      startTime: null,
+      endTime: null,
     };
   },
   computed: {
@@ -253,14 +296,43 @@ export default {
     },
   },
   methods: {
-    closeSubmit(){
+    startTimeChange() {
-      this.$emit('closeDialog')
+      if (Array.isArray(this.startTime) && this.startTime.length > 0) {
+        let hour_0 = Number(this.startTime[0].substring(0, 2));
+        let hour_1 = Number(this.startTime[1].substring(0, 2));
+        if (hour_0 >= 12 || hour_1 >= 12) {
+          this.$message.error("请选择00:00:00-11:59:59时间段的时间");
+          this.startTime = null;
+          return false;
+        }
+        this.dataForm.moStartTime = this.startTime[0];
+        this.dataForm.moEndTime = this.startTime[1];
+      }
+    },
+    endTimeChange() {
+      if (Array.isArray(this.endTime) && this.endTime.length > 0) {
+        let hour_0 = Number(this.endTime[0].substring(0, 2));
+        let hour_1 = Number(this.endTime[1].substring(0, 2));
+        if (hour_0 < 12 || hour_1 < 12) {
+          this.$message.error("请选择12:00:00-23:59:59时间段的时间");
+          this.endTime = null;
+          return false;
+        }
+        this.dataForm.afStartTime = this.endTime[0];
+        this.dataForm.afEndTime = this.endTime[1];
+      }
+    },
+    closeSubmit() {
+      this.$emit("closeDialog");
     },
     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
     initMap() {
       // 定义地图中心点坐标
-      let _this = this
+      let _this = this;
-      var center = new window.TMap.LatLng(_this.dataForm.latitude, _this.dataForm.longitude);
+      var center = new window.TMap.LatLng(
+        _this.dataForm.latitude,
+        _this.dataForm.longitude
+      );
       // 定义map变量，调用 TMap.Map() 构造函数创建地图
       map = new window.TMap.Map(document.getElementById("map_app"), {
         center: center, // 设置地图中心点坐标
@@ -381,9 +453,9 @@ export default {
         this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
           this.getInfo();
-        }else{
+        } else {
-          this.dataForm.ongitude = "120.38945519"
+          this.dataForm.ongitude = "120.38945519";
-          this.dataForm.latitude = "36.0722275"
+          this.dataForm.latitude = "36.0722275";
           this.initMap();
         }
       });
@@ -407,26 +479,31 @@ export default {
     // 表单提交
     dataFormSubmitHandle: debounce(
       function () {
-        this.$refs['dataForm'].validate((valid) => {
+        this.$refs["dataForm"].validate((valid) => {
           if (!valid) {
-            return false
+            return false;
           }
-          this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/icPointVaccinesInoculation/', this.dataForm).then(({ data: res }) => {
+          this.$http[!this.dataForm.id ? "post" : "put"](
-            if (res.code !== 0) {
+            "/epmetuser/icPointVaccinesInoculation/",
-              return this.$message.error(res.msg)
+            this.dataForm
-            }
+          )
-            this.$message({
+            .then(({ data: res }) => {
-              message: this.$t('prompt.success'),
+              if (res.code !== 0) {
-              type: 'success',
+                return this.$message.error(res.msg);
-              duration: 500,
-              onClose: () => {
-                this.visible = false
-                this.$emit('refreshDataList')
-                this.closeSubmit()
               }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                  this.closeSubmit();
+                },
+              });
             })
-          }).catch(() => {})
+            .catch(() => {});
-        })
+        });
       },
       1000,
       { leading: true, trailing: false }
@@ -435,10 +512,10 @@ export default {
 };
 </script>
 <style scoped>
-.position_label >>> .el-form-item__label::before{
+.position_label >>> .el-form-item__label::before {
-  color:#fff!important;
+  color: #fff !important;
 }
-.submit{
+.submit {
   text-align: center;
   margin: auto;
 }