feat: 日报修改

src/views/daily/index.vue

@@ -9,44 +9,43 @@ const testDate = ref(null);
 
 const formData = ref({});
 
-const holidays = [
-  '2024-06-01',
-  '2024-06-02',
-  '2024-06-03',
-]
+const holidays = ref([])
 
-const isHoliday = ({ dayjs }) => holidays.includes(dayjs.format('YYYY-MM-DD'));
+onMounted(() => {
+  
+  setTimeout(() => {
 
-const isExistData = computed(() => Object.keys(unref(formData)).length);
+    holidays.value = [
+      { testDate: '2024/06/01', exists: false },
+      { testDate: '2024/06/02', exists: false },
+      { testDate: '2024/06/03', exists: false },
+      { testDate: '2024/06/04', exists: false },
+      { testDate: '2024/06/05', exists: false },
+      { testDate: '2024/06/06', exists: true },
+      { testDate: '2024/06/07', exists: true }
+    ]
 
-// 下一步
-const handleNextStep = async () => {
+  }, 2000);
 
-  if (!testDate.value) {
-    return proxy.$modal.msgError("请先选择日报时间");
-  }
+})
 
-  if (isExistData.value) {
-    await proxy.$modal.confirm('检测到当前日报已填写，是否继续切换？').then(() => {
-      
-      proxy.$modal.msgSuccess("切换成功");
+const isHoliday = ({ dayjs }) => {
+  return holidays.value.find(({ testDate }) => dayjs.format('YYYY/MM/DD') === testDate)?.exists
+};
 
-    })
-  }
+const isExistData = computed(() => Object.keys(unref(formData)).length);
 
-  isVisible.value = !isVisible.value;
-}
 
 // 提交数据
 const onSubmit = () => {
 
-  if ( !isExistData.value ) {
-    return proxy.$modal.msgError("请填写日报内容，在进行保存");
+  if (!isExistData.value) {
+    return proxy.$modal.msgError("请填写日报内容，在进行提交");
   }
-  
+
   proxy.$modal.confirm('是否确认提交？').then(async () => {
-      
-    proxy.$modal.msgSuccess("保存成功");
+15
+    proxy.$modal.msgSuccess("提交成功");
 
     isVisible.value = !isVisible.value;
 
@@ -54,11 +53,30 @@ const onSubmit = () => {
 
   })
 }
+
+
+// 下一步
+const handleNextStep = async () => {
+  if (!testDate.value) {
+    return proxy.$modal.msgError("请先选择需要填写日报日期");
+  }
+  isVisible.value = true;
+}
+
+// 上一步
+const onBackStep = async () => {
+  if (isExistData.value) {
+    return proxy.$modal.confirm('测到当前日报已填写，是否返回上一步？').then(function () {
+      isVisible.value = false
+    }).catch(() => {});
+  }
+  isVisible.value = false;
+}
 </script>
 
 <template>
   <div class="app-container">
-    <el-card shadow="never" header="选择日报填写日期" class="pre-form">
+    <el-card shadow="never" header="选择日报填写日期" class="pre-form"  v-show="!isVisible">
       <el-form :inline="true">
         <div class="pre-form_inner">
           <el-form-item label="水厂名称">
@@ -67,26 +85,19 @@ const onSubmit = () => {
             </el-select>
           </el-form-item>
           <el-form-item label="日报时间">
-            <el-date-picker
-              v-model="testDate"
-              type="date"
-              value-format="YYYY/MM/DD"
-              placeholder="请选择日期"
-              :editable="false"
-            >
+            <el-date-picker v-model="testDate" type="date" value-format="YYYY/MM/DD" placeholder="请选择日期"
+              :editable="false">
               <template #default="cell">
                 <div class="cell" :class="{ current: cell.isCurrent }">
                   <span class="text">{{ cell.text }}</span>
-                  <el-tooltip effect="dark" content="已填写" placement="top">
-                    <span v-if="isHoliday(cell)" class="holiday" />
-                  </el-tooltip>
+                  <span v-if="isHoliday(cell) === false" class="holiday" />
+                  <span v-if="isHoliday(cell) === true" class="blue"></span>
                 </div>
               </template>
             </el-date-picker>
           </el-form-item>
         </div>
       </el-form>
-
       <div class="next-btn">
         <el-button type="primary" @click="handleNextStep">下一步</el-button>
       </div>
@@ -94,29 +105,26 @@ const onSubmit = () => {
 
     <div v-show="isVisible">
       <el-card class="card" shadow="never" :header="obj.title" :key="key" v-for="obj, key in schema">
-        <el-form label-position="right" label-suffix=":">
+        <el-form label-position="top" label-suffix=":">
           <div v-for="val, k in obj" :key="key + k">
             <el-divider content-position="left" v-show="val.title">{{ val.title }}</el-divider>
             <el-row :gutter="100">
               <el-col :span="8" v-for="item in val.list" :key="item.key">
                 <el-form-item :label-width="150" :label="item.label">
                   <el-input-number v-model="formData[item.key]" :controls="false" />
-                  <span style="padding-left: 10px; color: #999;">{{ item.unit }}</span>
+                  <span style="padding-left: 10px; color: #999; font-size: 12px;">{{ item.unit }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
           </div>
         </el-form>
       </el-card>
-
       <div class="btn-group">
-        <el-button>保存</el-button>
+        <el-button @click="onBackStep">上一步</el-button>
         <el-button type="primary" @click="onSubmit">提交</el-button>
       </div>
     </div>
-
   </div>
-
 </template>
 
 <style lang="scss" scoped>
@@ -153,6 +161,7 @@ const onSubmit = () => {
   padding: 3px 0;
   box-sizing: border-box;
 }
+
 .cell .text {
   width: 24px;
   height: 24px;
@@ -164,11 +173,14 @@ const onSubmit = () => {
   transform: translateX(-50%);
   border-radius: 50%;
 }
+
 .cell.current .text {
   background: #626aef;
   color: #fff;
 }
-.cell .holiday {
+
+.cell .holiday,
+.cell .blue {
   position: absolute;
   width: 6px;
   height: 6px;
@@ -178,6 +190,10 @@ const onSubmit = () => {
   left: 50%;
   transform: translateX(-50%);
 }
+
+.cell .blue {
+  background: #1989fa;
+}
 </style>
 
 <style>