root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2025-08-23 20:44:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

This commit is contained in:
gaofy 2023-12-22 09:40:13 +08:00
parent 69df0fbc66
commit b7fb92e927
7 changed files with 131 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/custom-element.scss
View File

@ -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;

19
src/views/home/record-form.vue
View File

@ -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,9 +106,10 @@ function close() {
emit('close')
}
function resetData() {
formRef.value.resetFields()
Object.assign(formData.value, {
id: '',
title: '',
title: '',
type: '',
state: '',
date: '',
@ -115,9 +117,16 @@ function resetData() {
content: ''
})
}
const saveData = () => {
ElMessage.success('保存成功！')
close()
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(

145
src/views/home/week-calendar.vue
View File

@ -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"
:class="{ 'record-mark': record.some((e: any) => new Date(e.time).getDate() === item.getDate()) }">
<td v-for="item in week" :key="item" :class="{
'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">
<div class="record-item" v-for="(item, index) in record" :key="'record-' + index">
<el-button text icon="Plus" style="width: 100%;margin-bottom: 5px;" @click="addRecord()">新建</el-button>
<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,48 +69,63 @@ 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 = []
setTimeout(() => {
for (let i = 0; i < 7; i++) {
week.value.push(getFirstDayOfWeek(date, i + 1))
recordWeek.value = []
recordWeek.value = [
{
id: '1',
title: '月度会议',
type: '',
state: '',
date: getFirstDayOfWeek(e, 1),
time: getFirstDayOfWeek(e, 1),
content: '测试测试'
},
{
id: '2',
title: '手术提醒',
type: '',
state: '',
date: getFirstDayOfWeek(e, 4),
time: getFirstDayOfWeek(e, 4),
content: '测试测试'
}
record.value = [
{
id: '1',
title: '月度会议',
type: '',
state: '',
date: getFirstDayOfWeek(date, 1),
time: new Date('2023/12/16 16:15:00'),
content: '测试测试'
},
{
id: '2',
title: '手术提醒',
type: '',
state: '',
date: getFirstDayOfWeek(date, 4),
time: new Date('2023/12/16 16:15:00'),
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;
}
}
}
}

1
src/views/patients-manage/form/patients-form.vue
View File

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

1
src/views/permissions-manage/form/doctor-form.vue
View File

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

1
src/views/permissions-manage/form/menu-form.vue
View File

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

1
src/views/permissions-manage/form/role-form.vue
View File

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