🐛 首页周选择交互优化，表单校验resetData清除验证

src/assets/css/custom-element.scss

@@ -40,6 +40,11 @@
         outline: 0;
     }
 }
+.el-button.is-text:not(.is-disabled) {
+    &:focus-visible {
+        outline: 0;
+    }
+}
 .el-button.el-button--primary {
     background-color: $main-color;
     border-color: $main-color;

src/views/home/record-form.vue

@@ -39,7 +39,7 @@
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'saveData'])
 
 const typeOption = [
     { label: '手术', value: '手术' },
@@ -70,6 +70,7 @@ const rules = reactive({
     ]
 })
 
+const formRef = ref()
 const formData = ref({
     id: '',
     title: '',
@@ -105,6 +106,7 @@ function close() {
     emit('close')
 }
 function resetData() {
+    formRef.value.resetFields()
     Object.assign(formData.value, {
         id: '',
         title: '',  
@@ -115,9 +117,16 @@ function resetData() {
         content: ''
     })
 }
-const saveData = () => {
+const saveData = async () => {
+    await formRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
             ElMessage.success('保存成功！')
+            emit('saveData', formData.value)
             close()
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
 }
 const removeData = () => {
     ElMessageBox.confirm(

src/views/home/week-calendar.vue

@@ -19,29 +19,37 @@
                     <th v-for="item in weekEn" :key="item">{{ item }}</th>
                 </tr>
                 <tr v-if="week.length > 0" class="swing_flip_1">
-                    <td v-for="item in week" :key="item"
+                    <td v-for="item in week" :key="item" :class="{
-                        :class="{ 'record-mark': record.some((e: any) => new Date(e.time).getDate() === item.getDate()) }">
+                        'record-mark': recordWeek.some((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', item)),
+                        'active': dateFormater('yyyy-MM-dd', item) === dateFormater('yyyy-MM-dd', currentDate)
+                    }">
                         <span :class="{
                             'text2-color': item.getDate() > week[6].getDate()
-                        }" @click="addRecord(item)">{{ dateFormater('dd', item) }}</span>
+                        }" @click="setDate(item)">{{ dateFormater('dd', item) }}</span>
                     </td>
                 </tr>
             </table>
         </div>
-        <div v-if="week.length > 0" class="record-box move_2">
+        <el-button text icon="Plus" style="width: 100%;margin-bottom: 5px;" @click="addRecord()">新建</el-button>
-            <div class="record-item" v-for="(item, index) in record" :key="'record-' + index">
+        <div class="record-box move_2">
+            <el-empty v-if="record.length < 1" :description="dateFormater('MM月dd日', currentDate) + '没有任何记录'" style="padding: 0;" />
+            <div class="record-item" v-for="(item, index) in record" :key="'record-' + index" @click="viewRecord(item)">
                 <div class="icon-box">
                     <i class="icon-RectangleCopy"></i>
                 </div>
                 <div class="text-box">
-                    <p class="main-color" style="font-weight: 600;cursor: pointer;" @click="viewRecord(item)">{{ item.title}}</p>
+                    <p class="main-color" style="font-weight: 600;cursor: pointer;">{{
+                        item.title }}</p>
                     <p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
                 </div>
+                <el-icon class="remove-icon" @click.stop="remoteRecord(item, index)">
+                    <Close />
+                </el-icon>
             </div>
         </div>
 
         <el-dialog v-model="isRecordDialog" title="详情">
-            <RecordForm ref="recordFormRef" @close="isRecordDialog = false" />
+            <RecordForm ref="recordFormRef" @close="isRecordDialog = false" @saveData="saveData" />
         </el-dialog>
     </div>
 </template>
@@ -49,6 +57,7 @@
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import RecordForm from './record-form.vue';
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { dateFormater, getFirstDayOfWeek, getDays } from '@/utils/date-util';
 
 
@@ -60,29 +69,35 @@ const recordFormRef = ref()
 const isRecordDialog = ref(false)
 const month = ref(new Date())
 const week = ref([] as any)
+const recordWeek = ref([] as any)
 const record = ref([] as any)
+const currentDate = ref<Date>(new Date())
 
 setWeek()
+setDate(currentDate.value)
 
 function formatDate(date: any) {
     return monthEn[new Date(date).getMonth()] + '月 ' + new Date(date).getFullYear()
 }
+/**
+ * 设置周
+ * @param type 
+ * 获取一周的数据，然后给每天打 record-mark 标记
+ */
 function setWeek(type?: 'up' | 'down') {
     const date = (type && getDays(month.value, type === 'up' ? -7 : 7)) || month.value
+    currentDate.value = date
+    const e = date
     week.value = []
-    record.value = []
+    recordWeek.value = []
-    setTimeout(() => {
+    recordWeek.value = [
-        for (let i = 0; i < 7; i++) {
-            week.value.push(getFirstDayOfWeek(date, i + 1))
-        }
-        record.value = [
         {
             id: '1',
             title: '月度会议',
             type: '',
             state: '',
-                date: getFirstDayOfWeek(date, 1),
+            date: getFirstDayOfWeek(e, 1),
-                time: new Date('2023/12/16 16:15:00'),
+            time: getFirstDayOfWeek(e, 1),
             content: '测试测试'
         },
         {
@@ -90,18 +105,27 @@ function setWeek(type?: 'up' | 'down') {
             title: '手术提醒',
             type: '',
             state: '',
-                date: getFirstDayOfWeek(date, 4),
+            date: getFirstDayOfWeek(e, 4),
-                time: new Date('2023/12/16 16:15:00'),
+            time: getFirstDayOfWeek(e, 4),
             content: '测试测试'
         }
     ]
-    }, 0)
+    // setTimeout(() => {
+    for (let i = 0; i < 7; i++) {
+        week.value.push(getFirstDayOfWeek(date, i + 1))
+    }
+    // }, 0)
 }
 
 const handleOpen = () => {
     datePicker.value.handleOpen()
 }
-const addRecord = (e: Date) => {
+function setDate(e: Date) {
+    currentDate.value = e
+    record.value = recordWeek.value.filter((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', e))
+}
+const addRecord = () => {
+    const e = currentDate.value || new Date()
     isRecordDialog.value = true
     setTimeout(() => {
         recordFormRef.value.resetData()
@@ -118,6 +142,24 @@ const viewRecord = (e: any) => {
         console.log(recordFormRef.value.formData)
     }, 0)
 }
+const remoteRecord = (item: any, index: number) => {
+    ElMessageBox.confirm(
+        '是否确认删除？',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    ).then(() => {
+        ElMessage.success('删除成功！')
+        recordWeek.value = recordWeek.value.filter((r: any) => r.id !== item.id)
+        setDate(item.date)
+    }).catch(() => { })
+}
+const saveData = (e: any) => {
+    recordWeek.value.push(e)
+    setDate(e.date)
+}
 </script>
 
 <style lang='scss' scoped>
@@ -183,7 +225,7 @@ const viewRecord = (e: any) => {
                         transition: all .3s;
 
                         &:hover {
-                            background: rgba($main-color, .2);
+                            background: rgba($main-color, .1);
                             transition: all .3s;
                         }
                     }
@@ -196,34 +238,63 @@ const viewRecord = (e: any) => {
                         border-color: $main-color;
                     }
                 }
+
+                .active {
+                    color: white;
+
+                    span {
+                        border-color: $main-color;
+                        background: $main-color;
+
+                        &:hover {
+                            background: rgba($main-color, .8);
+                        }
+                    }
+                }
             }
         }
     }
 
     .record-box {
         width: 100%;
-        height: calc(100% - 130px);
+        height: calc(100% - 170px);
         overflow-x: hidden;
         overflow-y: auto;
 
         .record-item {
+            position: relative;
             width: 100%;
             display: flex;
             align-items: center;
-            margin-top: 20px;
+            padding: 10px 20px;
+            transition: all .6s;
+
+            &:hover {
+                background: rgba($main-color, .1);
+                transition: all .6s;
+            }
 
             .icon-box {
                 flex-shrink: 0;
                 width: 50px;
                 height: 50px;
                 border-radius: 8px;
-                background: rgba($main-color, .3);
+                background: rgba($main-color, .1);
                 color: $main-color;
                 font-size: 32px;
                 text-align: center;
                 line-height: 50px;
                 margin-right: 15px;
             }
+
+            .remove-icon {
+                cursor: pointer;
+                position: absolute;
+                font-size: 20px;
+                top: calc(50% - 10px);
+                right: 20px;
+                color: $text3-color;
+            }
         }
     }
 }

src/views/patients-manage/form/patients-form.vue

@@ -141,6 +141,7 @@ function close() {
     emit('close')
 }
 function resetData() {
+    formRef.value.resetFields()
     formData.value = {
         id: '',
         userName: '',

src/views/permissions-manage/form/doctor-form.vue

@@ -103,6 +103,7 @@ function close() {
     emit('close')
 }
 function resetData() {
+    formRef.value.resetFields()
     formData.value = {
         id: '',
         userName: '',

src/views/permissions-manage/form/menu-form.vue

@@ -95,6 +95,7 @@ function close() {
     emit('close')
 }
 function resetData() {
+    formRef.value.resetFields()
     formData.value = {
         id: '',
         type: '菜单',

src/views/permissions-manage/form/role-form.vue

@@ -70,6 +70,7 @@ function close() {
     emit('close')
 }
 function resetData() {
+    formRef.value.resetFields()
     formData.value = {
         id: '',
         roleName: '',