“fix:修改时间样式”

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

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:600px;overflow:auto;padding: 20px;" class="form-class">
+  <div style="height: 600px; overflow: auto; padding: 20px" class="form-class">
     <el-form
       :model="dataForm"
       :rules="dataRule"
@@ -22,24 +22,24 @@
         <el-input
           v-model="dataForm.name"
           placeholder="疫苗接种点名称"
-          :disabled='dialogTitle == "查看"'
+          :disabled="dialogTitle == '查看'"
         ></el-input>
       </el-form-item>
-      <el-form-item label="接种日期" prop="inoculationDate">
-        <!-- <el-input
-          v-model="dataForm.inoculationDate"
-          placeholder="接种日期"
-        ></el-input> -->
+      <el-form-item label="接种时间" :class="dataForm.noAvailableVaccines != '2'?'':'time-class'">
+        <div class="data-block">
+          <div style="width: 30%">
             <el-date-picker
               v-model="dataForm.inoculationDate"
               value-format="yyyy-MM-dd"
               type="date"
               placeholder="选择日期"
-          :disabled='dialogTitle == "查看"'
+              :disabled="dialogTitle == '查看'"
             >
             </el-date-picker>
-      </el-form-item>
-      <el-form-item label="上午接种时间" prop="morningTime" class="time-class">
+          </div>
+          <div class="time-block">
+            <div>
+              <span>上午</span>
               <el-time-picker
                 is-range
                 v-model="morningTime"
@@ -50,13 +50,14 @@
                 end-placeholder="结束时间"
                 placeholder="选择时间范围"
                 @change="startTimeChange"
-          :disabled='dialogTitle == "查看"'
+                :disabled="dialogTitle == '查看'"
                 :clearable="false"
                 :editable="false"
               >
               </el-time-picker>
-      </el-form-item>
-      <el-form-item label="下午接种时间" prop="afterTime" class="time-class">
+            </div>
+            <div>
+              <span>下午</span>
               <el-time-picker
                 is-range
                 v-model="afterTime"
@@ -67,29 +68,36 @@
                 end-placeholder="结束时间"
                 placeholder="选择时间范围"
                 @change="endTimeChange"
-          :disabled='dialogTitle == "查看"'
+                :disabled="dialogTitle == '查看'"
                 :clearable="false"
                 :editable="false"
               >
               </el-time-picker>
+            </div>
+          </div>
+        </div>
       </el-form-item>
       <el-form-item label="" prop="noAvailableVaccines">
         <el-checkbox
           v-model="dataForm.noAvailableVaccines"
           true-label="1"
           false-label="2"
-          :disabled='dialogTitle == "查看"'
+          :disabled="dialogTitle == '查看'"
           >暂无疫苗</el-checkbox
         >
       </el-form-item>
       <el-form-item label="咨询电话" prop="mobile">
-        <el-input v-model="dataForm.mobile" :disabled='dialogTitle == "查看"' placeholder="咨询电话"></el-input>
+        <el-input
+          v-model="dataForm.mobile"
+          :disabled="dialogTitle == '查看'"
+          placeholder="咨询电话"
+        ></el-input>
       </el-form-item>
       <el-form-item label="接种点地址" prop="address">
         <el-input
           v-model="dataForm.address"
           placeholder="例:青岛市时代国际广场"
-          style="width:65%;"
+          style="width: 65%"
         ></el-input>
         <el-button
           style="margin-left: 10px"
@@ -154,9 +162,12 @@
     </el-form>
     <div class="submit">
       <el-button @click="closeSubmit">{{ $t("cancel") }}</el-button>
-      <el-button v-if='dialogTitle != "查看"' type="primary" @click="dataFormSubmitHandle()">{{
-        $t("confirm")
-      }}</el-button>
+      <el-button
+        v-if="dialogTitle != '查看'"
+        type="primary"
+        @click="dataFormSubmitHandle()"
+        >{{ $t("confirm") }}</el-button
+      >
     </div>
   </div>
 </template>
@@ -185,7 +196,7 @@ export default {
         moEndTime: "",
         afStartTime: "",
         afEndTime: "",
-        noAvailableVaccines: '1',
+        noAvailableVaccines: "1",
         mobile: "",
         address: "",
         longitude: "",
@@ -216,7 +227,7 @@ export default {
         ],
         inoculationDate: [
           {
-            required: this.dataForm.noAvailableVaccines === '2',
+            required: this.dataForm.noAvailableVaccines === "2",
             message: this.$t("validate.required"),
             trigger: "blur",
           },
@@ -262,8 +273,8 @@ export default {
   props: {
     dialogTitle: {
       type: String,
-      default:''
-    }
+      default: "",
+    },
   },
   methods: {
     startTimeChange() {
@@ -487,15 +498,15 @@ export default {
             ...this.dataForm,
             ...res.data,
           };
-          this.morningTime = [res.data.moStartTime,res.data.moEndTime]
-          this.afterTime = [res.data.afStartTime,res.data.afEndTime]
-          if(res.data.moStartTime !== ''){
-              this.morningTime = [res.data.moStartTime,res.data.moEndTime]
-              this.afterTime = [res.data.afStartTime,res.data.afEndTime]
+          this.morningTime = [res.data.moStartTime, res.data.moEndTime];
+          this.afterTime = [res.data.afStartTime, res.data.afEndTime];
+          if (res.data.moStartTime !== "") {
+            this.morningTime = [res.data.moStartTime, res.data.moEndTime];
+            this.afterTime = [res.data.afStartTime, res.data.afEndTime];
           }
           if (!this.dataForm.longitude && !this.dataForm.latitude) {
-            this.dataForm.longitude = "120.38945519"
-            this.dataForm.latitude = "36.0722275"
+            this.dataForm.longitude = "120.38945519";
+            this.dataForm.latitude = "36.0722275";
           }
           this.initMap();
         })
@@ -508,13 +519,24 @@ export default {
           if (!valid) {
             return false;
           }
-          if(this.morningTime === null && this.dataForm.noAvailableVaccines === '2'){
-              this.$message.error('请填写上午接种时间');
-              return false
+          if(!this.dataForm.inoculationDate &&
+            this.dataForm.noAvailableVaccines === "2"){
+              this.$message.error("请选择接种日期");
+              return false;
+          }
+          if (
+            this.morningTime === null &&
+            this.dataForm.noAvailableVaccines === "2"
+          ) {
+            this.$message.error("请填写上午接种时间");
+            return false;
           }
-          if(this.afterTime === null && this.dataForm.noAvailableVaccines === '2'){
-              this.$message.error('请填写下午接种时间');
-              return false
+          if (
+            this.afterTime === null &&
+            this.dataForm.noAvailableVaccines === "2"
+          ) {
+            this.$message.error("请填写下午接种时间");
+            return false;
           }
           this.$http[!this.dataForm.id ? "post" : "put"](
             "/epmetuser/icPointVaccinesInoculation/",
@@ -522,7 +544,9 @@ export default {
           )
             .then(({ data: res }) => {
               if (res.code !== 0) {
-                return this.$message.error(res.internalMsg ? res.internalMsg : res.msg);
+                return this.$message.error(
+                  res.internalMsg ? res.internalMsg : res.msg
+                );
               }
               this.$message({
                 message: this.$t("prompt.success"),
@@ -545,6 +569,15 @@ export default {
 };
 </script>
 <style scoped>
+.data-block {
+  display: flex;
+}
+.time-block>div{
+  margin-bottom: 10px;
+}
+.time-block span {
+  padding: 10px;
+}
 .position_label >>> .el-form-item__label::before {
   color: #fff !important;
 }
@@ -562,11 +595,10 @@ export default {
   position: relative;
 }
 .time-class::before {
-    content: '*';
-    color: #F56C6C;
+  content: "*";
+  color: #f56c6c;
   position: absolute;
-    left:16px;
+  left: 42px;
   top: 10px;
 }
-
 </style>