日常计划添加

This commit is contained in:
zhaoyz 2024-04-23 18:31:46 +08:00
parent e674cf8cd8
commit 7273a85503
6 changed files with 650 additions and 578 deletions

13
src/api/daily-plan.ts Normal file
View File

@ -0,0 +1,13 @@
import request from "@/utils/request";
const addDailyPlanUrl = "/admin/dailyPlan/addDailyPlan";
export function addDailyPlan(param: any) {
return new Promise((resolve, reject) => {
request.postForm(addDailyPlanUrl, param).then((res: any) => {
resolve(res.data);
}).catch(err => {
reject(err);
})
})
}

View File

@ -8,10 +8,10 @@ export function getPatientInfo(name: string, id: string, date: string) {
patientName: name, patientName: name,
idNum: id, idNum: id,
date: date date: date
})
}).then((res: any) => { }).then((res: any) => {
console.log(res.data) resolve(res.data);
}).catch(error => { }).catch(error => {
reject(error) reject(error);
}) });
});
} }

View File

@ -46,18 +46,31 @@ export function getMonthDays(time: any) {
* i:1,2,3,4,5,6,7 * i:1,2,3,4,5,6,7
* @returns * @returns
*/ */
export function getFirstDayOfWeek(date: Date, i: number) { export function getFirstDayOfWeek(date: string | Date | number, i: number) {
let temp: any;
if (!(date instanceof Date)) {
if (typeof date == "number") {
temp = new Date(date);
} else {
const s = date.replace(/-/g, "/");
temp = new Date(s);
}
} else {
temp = new Date(date.getTime())
}
if (i < 1 || i > 7) { if (i < 1 || i > 7) {
return null; return null;
} }
const day = date.getDay() || 7; const day = temp.getDay() || 7;
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + i - day); return new Date(temp.getFullYear(), temp.getMonth(), temp.getDate() + i - day);
} }
/** /**
* *
* @returns * @returns
*/ */
const weekArray = ['周天', '周一', '周二', '周三', '周四', '周五', '周六']; const weekArray = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
export function getCurrentDate(date: any) { export function getCurrentDate(date: any) {
let myDate = new Date(); let myDate = new Date();
if (date) { if (date) {
@ -79,12 +92,15 @@ export function getCurrentDate(date: any) {
*/ */
export function getDays(date: any, days: number) { export function getDays(date: any, days: number) {
if (date) { if (date) {
let temp: any;
if (!(date instanceof Date)) { if (!(date instanceof Date)) {
date = date.replace(/-/g, '/'); date = date.replace(/-/g, '/');
date = new Date(date); temp = new Date(date);
} else {
temp = new Date(date.getTime());
} }
const time = date.setDate(date.getDate() + days); // 天数 const time = temp.setDate(temp.getDate() + days);
return new Date(time); return new Date(time);
} }
} }

View File

@ -5,7 +5,8 @@
<div class="message-box"> <div class="message-box">
<el-carousel height="32px" direction="vertical" indicator-position="none" autoplay> <el-carousel height="32px" direction="vertical" indicator-position="none" autoplay>
<el-carousel-item v-for="(item, index) in messages" :key="'message-' + index"> <el-carousel-item v-for="(item, index) in messages" :key="'message-' + index">
<p class="text-row-1" style="line-height: 32px;" :class="{'is-link': item.link}" @click="() => {item.link && router.push(item.link)}">{{ item.type }} {{ item.content }}</p> <p class="text-row-1" style="line-height: 32px;" :class="{'is-link': item.link}"
@click="() => {item.link && router.push(item.link)}">{{ item.type }} {{ item.content }}</p>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
@ -16,7 +17,7 @@
</div> </div>
<div class="header-item"> <div class="header-item">
<el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;"> <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
<Calendar /> <Calendar/>
</el-icon> </el-icon>
<div> <div>
<p class="text1-color f14">待办任务</p> <p class="text1-color f14">待办任务</p>
@ -26,22 +27,22 @@
</div> </div>
<div class="echart-box"> <div class="echart-box">
<div class="echart-item"> <div class="echart-item">
<NumberChart /> <NumberChart/>
</div> </div>
<div class="echart-item"> <div class="echart-item">
<NumberPieChart /> <NumberPieChart/>
</div> </div>
<div class="echart-item"> <div class="echart-item">
<TimeChart /> <TimeChart/>
</div> </div>
<div class="echart-item"> <div class="echart-item">
<TimeBarChart /> <TimeBarChart/>
</div> </div>
</div> </div>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="week-calendar"> <div class="week-calendar">
<WeekCalendar /> <WeekCalendar/>
</div> </div>
<div class="system-logs"> <div class="system-logs">
<div class="title"> <div class="title">
@ -49,7 +50,7 @@
<span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage/logs-manage')">更多</span> <span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage/logs-manage')">更多</span>
</div> </div>
<div class="content"> <div class="content">
<SystemLogs /> <SystemLogs/>
</div> </div>
</div> </div>
</div> </div>
@ -58,9 +59,9 @@
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {onMounted, reactive, ref, toRefs, watch} from 'vue'
import { useRouter } from 'vue-router' import {useRouter} from 'vue-router'
import { useLoginStore } from '@/stores/user-info-store' import {useLoginStore} from '@/stores/user-info-store'
import NumberChart from "./number-chart.vue"; import NumberChart from "./number-chart.vue";
import NumberPieChart from "./number-pie-chart.vue"; import NumberPieChart from "./number-pie-chart.vue";
import TimeChart from "./time-chart.vue"; import TimeChart from "./time-chart.vue";
@ -75,8 +76,15 @@ const userInfo = useLoginStore().getlogin()
const messages = ref([] as any) const messages = ref([] as any)
const total = ref(0) // const total = ref(0) //
messages.value.push({type: '通知', content: '测试测试测试测试测试测试测试测试测试测试', link: '/system-manage/system-home'}) messages.value.push({
messages.value.push({type: '公告', content: '公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试'}) type: '通知',
content: '测试测试测试测试测试测试测试测试测试测试',
link: '/system-manage/system-home'
})
messages.value.push({
type: '公告',
content: '公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试'
})
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@ -100,6 +108,7 @@ messages.value.push({type: '公告', content: '公告测试公告测试公告测
.left-content { .left-content {
width: calc(100% - 350px); width: calc(100% - 350px);
height: 100%; height: 100%;
.message-box { .message-box {
height: 34px; height: 34px;
background: #f8f8f8; background: #f8f8f8;
@ -107,11 +116,13 @@ messages.value.push({type: '公告', content: '公告测试公告测试公告测
padding: 0 30px; padding: 0 30px;
border: 1px solid $border1-color; border: 1px solid $border1-color;
margin-bottom: 20px; margin-bottom: 20px;
.is-link { .is-link {
cursor: pointer; cursor: pointer;
color: $main-color; color: $main-color;
} }
} }
.header-box { .header-box {
width: 100%; width: 100%;
height: 90px; height: 90px;
@ -130,7 +141,7 @@ messages.value.push({type: '公告', content: '公告测试公告测试公告测
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
&~.header-item { & ~ .header-item {
width: 40%; width: 40%;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -158,6 +169,7 @@ messages.value.push({type: '公告', content: '公告测试公告测试公告测
&:nth-child(even) { &:nth-child(even) {
width: 40%; width: 40%;
} }
&:nth-child(n + 3) { &:nth-child(n + 3) {
margin-top: 20px; margin-top: 20px;
} }
@ -168,10 +180,12 @@ messages.value.push({type: '公告', content: '公告测试公告测试公告测
.right-content { .right-content {
width: 330px; width: 330px;
height: 100%; height: 100%;
.week-calendar { .week-calendar {
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.system-logs { .system-logs {
width: 100%; width: 100%;
height: calc(50% - 20px); height: calc(50% - 20px);

View File

@ -5,124 +5,124 @@
</el-form-item> </el-form-item>
<el-form-item label="类型" prop="type"> <el-form-item label="类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择类型"> <el-select v-model="formData.type" placeholder="请选择类型">
<el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="state" placeholder="请选择状态"> <el-form-item label="状态" prop="status" placeholder="请选择状态">
<el-select v-model="formData.state"> <el-select v-model="formData.status">
<el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="日期" prop="date"> <el-form-item label="日期" prop="date">
<el-date-picker v-model="formData.date" type="date" placeholder="请输入日期" /> <el-date-picker v-model="formData.date" type="date" placeholder="请输入日期"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="时间" prop="time"> <el-form-item label="时间" prop="time">
<el-time-picker v-model="formData.time" placeholder="请输入时间" /> <el-time-picker v-model="formData.time" placeholder="请输入时间"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="内容" prop="content"> <el-form-item label="内容" prop="content">
<el-input v-model="formData.content" type="textarea" :rows="10" placeholder="请输入内容"></el-input> <el-input v-model="formData.content" type="textarea" :rows="10" placeholder="请输入内容"></el-input>
</el-form-item> </el-form-item>
<div style="text-align: right;" > <div style="text-align: right;">
<el-button v-if="formData.isSaveBtn" class="f18" type="primary" @click="saveData">保存</el-button> <el-button v-if="isSaveBtn" class="f18" type="primary" @click="saveData">保存</el-button>
<el-button v-if="formData.isRemoveBtn" class="f18" @click="removeData">删除</el-button> <el-button v-if="isRemoveBtn" class="f18" @click="removeData">删除</el-button>
</div> </div>
</el-form> </el-form>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import {dateFormater} from "@/utils/date-util";
const emit = defineEmits(['close', 'saveData']) const emit = defineEmits(['close', 'saveData'])
const typeOption = [ const typeOption = [
{ label: '手术', value: '手术' }, {label: '手术', value: '手术'},
{ label: '会议', value: '会议' }, {label: '会议', value: '会议'},
] ]
const stateOption = [ const stateOption = [
{ label: '已处理', value: '已处理' }, {label: '已处理', value: '已处理'},
{ label: '未处理', value: '未处理' }, {label: '未处理', value: '未处理'},
] ]
const rules = reactive({ const rules = reactive({
title: [ title: [
{ required: true, message: '请输入标题', trigger: 'blur' }, {required: true, message: '请输入标题', trigger: 'blur'},
], ],
type: [ type: [
{ required: true, message: '请选择类型', trigger: 'blur' }, {required: true, message: '请选择类型', trigger: 'blur'},
], ],
state: [ status: [
{ required: true, message: '请选择状态', trigger: 'blur' }, {required: true, message: '请选择状态', trigger: 'blur'},
], ],
date: [ date: [
{ required: true, message: '请输入日期', trigger: 'blur' }, {required: true, message: '请输入日期', trigger: 'blur'},
], ],
time: [ time: [
{ required: true, message: '请输入时间', trigger: 'blur' }, {required: true, message: '请输入时间', trigger: 'blur'},
], ],
content: [ content: [
{ required: true, message: '请输入内容', trigger: 'blur' }, {required: true, message: '请输入内容', trigger: 'blur'},
] ]
}) })
const formRef = ref() const formRef = ref()
const formData = ref({ const formData = ref({
id: '', id: '',
title: '', title: '',
type: '', type: '',
state: '', status: '',
date: '', date: '',
time: '', time: '',
content: '', content: '',
isSaveBtn: true,
isRemoveBtn: true
}) })
const isSaveBtn = ref(true);
const isRemoveBtn = ref(true);
defineExpose({
resetData
})
onMounted(() => { onMounted(() => {
formData.value = { formData.value = {
id: '', id: '',
title: '', title: '',
type: '', type: '',
state: '', status: '',
date: '', date: '',
time: '', time: '',
content: '', content: '',
isSaveBtn: true,
isRemoveBtn: true
} }
}) })
defineExpose({
formData,
resetData,
})
function close() { function close() {
emit('close') emit('close')
} }
function resetData() {
function resetData(hasRmBtn: boolean, date?: string) {
formRef.value.resetFields() formRef.value.resetFields()
Object.assign(formData.value, { Object.assign(formData.value, {
id: '', id: '',
title: '', title: '',
type: '', type: '',
state: '', status: '',
date: '', date: date ? date : '',
time: '', time: '',
content: '' content: ''
}) })
isRemoveBtn.value = hasRmBtn;
} }
const saveData = async () => {
await formRef.value.validate((valid: any, fields: any) => { const saveData = () => {
formRef.value.validate((valid: any, fields: any) => {
if (valid) { if (valid) {
ElMessage.success('保存成功!') ElMessage.success('保存成功!');
emit('saveData', formData.value) const form = JSON.parse(JSON.stringify(formData.value));
close() form.time = dateFormater("HH:mm:ss", new Date(form.time));
emit('saveData', form);
close();
} else { } else {
// console.log('error submit!', fields) // console.log('error submit!', fields)
} }
@ -140,7 +140,8 @@ const removeData = () => {
).then(() => { ).then(() => {
ElMessage.success('删除成功!') ElMessage.success('删除成功!')
close() close()
}).catch(() => { }) }).catch(() => {
})
} }
</script> </script>

View File

@ -1,22 +1,26 @@
<template> <template>
<div class="week-calendar-part"> <div class="week-calendar-part">
<div class="header-box"> <div class="header-box">
<el-icon @click="setWeek('up')"> <el-icon @click="minusWeek()">
<ArrowLeft /> <ArrowLeft/>
</el-icon> </el-icon>
<div class="date-block"> <div class="date-block">
<span @click="handleOpen">{{ formatDate(month) }}</span> <span @click="handleDatePickerOpen">{{ getMonthTitle() }}</span>
<el-date-picker ref="datePicker" popper-class="week-calendar-picker" class="month-date-pick" v-model="month" <el-date-picker ref="datePickerRef"
type="month" @change="setWeek()" /> popper-class="week-calendar-picker"
class="month-date-pick"
v-model="month"
type="month"
@change="setMonthWeek()"/>
</div> </div>
<el-icon @click="setWeek('down')"> <el-icon @click="addWeek()">
<ArrowRight /> <ArrowRight/>
</el-icon> </el-icon>
</div> </div>
<div class="week-box"> <div class="week-box">
<table> <table>
<tr class="text1-color"> <tr class="text1-color">
<th v-for="item in weekEn" :key="item">{{ item }}</th> <th v-for="item in weekCn" :key="item">{{ item }}</th>
</tr> </tr>
<tr v-if="week.length > 0" class=""> <tr v-if="week.length > 0" class="">
<td v-for="item in week" :key="item" :class="{ <td v-for="item in week" :key="item" :class="{
@ -32,64 +36,93 @@
</div> </div>
<el-button text icon="Plus" style="width: 100%;margin-bottom: 5px;" @click="addRecord()">新建</el-button> <el-button text icon="Plus" style="width: 100%;margin-bottom: 5px;" @click="addRecord()">新建</el-button>
<div class="record-box "> <div class="record-box ">
<el-empty v-if="record.length < 1" :description="dateFormater('MM月dd日', currentDate) + '没有任何记录'" style="padding: 0;" /> <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="record-item" v-for="(item, index) in record" :key="'record-' + index" @click="viewRecord(item)">
<div class="icon-box"> <div class="icon-box">
<i class="icon-RectangleCopy"></i> <i class="icon-RectangleCopy"></i>
</div> </div>
<div class="text-box"> <div class="text-box">
<p class="main-color" style="font-weight: 600;cursor: pointer;">{{ <p class="main-color" style="font-weight: 600;cursor: pointer;">{{
item.title }}</p> item.title
}}</p>
<p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p> <p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
</div> </div>
<el-icon class="remove-icon" @click.stop="remoteRecord(item, index)"> <el-icon class="remove-icon" @click.stop="remoteRecord(item, index)">
<Close /> <Close/>
</el-icon> </el-icon>
</div> </div>
</div> </div>
<el-dialog v-model="isRecordDialog" title="详情"> <el-dialog v-model="isRecordDialog" title="详情">
<RecordForm ref="recordFormRef" @close="isRecordDialog = false" @saveData="saveData" /> <RecordForm ref="recordFormRef" @close="isRecordDialog = false" @saveData="saveData"/>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {onMounted, ref} from 'vue'
import RecordForm from './record-form.vue' import RecordForm from './record-form.vue'
import { ElMessage, ElMessageBox } from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import { dateFormater, getFirstDayOfWeek, getDays } from '@/utils/date-util' import {dateFormater, getDays, getFirstDayOfWeek} from '@/utils/date-util'
const monthCn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
const weekCn = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const datePickerRef = ref();
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());
const monthEn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'] onMounted(init)
const weekEn = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const datePicker = ref() function init() {
const recordFormRef = ref() setMonthWeek();
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()
function formatDate(date: any) {
return monthEn[new Date(date).getMonth()] + '月 ' + new Date(date).getFullYear()
} }
function getMonthTitle() {
return monthCn[new Date(month.value).getMonth()] + '月 ' + new Date(month.value).getFullYear();
}
function addWeek() {
const date: any = getDays(month.value, 7);
month.value = date;
setWeek(date);
}
function minusWeek() {
const date: any = getDays(month.value, -7);
month.value = date;
setWeek(date);
}
function setMonthWeek() {
setWeek(month.value);
setDate(month.value);
}
/** /**
* 设置周 * 设置周
* @param type * @param type
* 获取一周的数据然后给每天打 record-mark 标记 * 获取一周的数据然后给每天打 record-mark 标记
*/ */
function setWeek(type?: 'up' | 'down') { function setWeek(date: any) {
const date = (type && getDays(month.value, type === 'up' ? -7 : 7)) || month.value getWeekPlanList();
currentDate.value = date
const e = date week.value = [];
week.value = [] setTimeout(() => {
for (let i = 0; i < 7; i++) {
week.value.push(getFirstDayOfWeek(date, i + 1));
}
}, 0)
}
function getWeekPlanList() {
recordWeek.value = [] recordWeek.value = []
recordWeek.value = [ /*recordWeek.value = [
{ {
id: '1', id: '1',
title: '月度会议', title: '月度会议',
@ -108,38 +141,32 @@ function setWeek(type?: 'up' | 'down') {
time: getFirstDayOfWeek(e, 4), time: getFirstDayOfWeek(e, 4),
content: '测试测试' content: '测试测试'
} }
] ]*/
//
setTimeout(() => {
for (let i = 0; i < 7; i++) {
week.value.push(getFirstDayOfWeek(date, i + 1))
}
}, 0)
setDate(currentDate.value)
} }
const handleOpen = () => { const handleDatePickerOpen = () => {
datePicker.value.handleOpen() datePickerRef.value.handleOpen();
} }
function setDate(e: Date) { function setDate(e: Date) {
currentDate.value = e currentDate.value = e
record.value = recordWeek.value.filter((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', e)) getDatePlanList();
} }
function getDatePlanList() {}
const addRecord = () => { const addRecord = () => {
const e = currentDate.value || new Date() const e = currentDate.value || new Date()
isRecordDialog.value = true isRecordDialog.value = true
setTimeout(() => { setTimeout(() => {
recordFormRef.value.resetData() recordFormRef.value.resetData(false, dateFormater("yyyy-MM-dd", e));
recordFormRef.value.formData.date = e
recordFormRef.value.formData.isRemoveBtn = false
}, 0) }, 0)
} }
const viewRecord = (e: any) => { const viewRecord = (e: any) => {
isRecordDialog.value = true isRecordDialog.value = true
setTimeout(() => { setTimeout(() => {
recordFormRef.value.resetData() recordFormRef.value.resetData(true)
recordFormRef.value.formData = Object.assign({}, recordFormRef.value.formData, e) recordFormRef.value.formData = Object.assign({}, recordFormRef.value.formData, e)
recordFormRef.value.formData.isRemoveBtn = true
// console.log(recordFormRef.value.formData) // console.log(recordFormRef.value.formData)
}, 0) }, 0)
} }
@ -156,11 +183,12 @@ const remoteRecord = (item: any, index: number) => {
ElMessage.success('删除成功!') ElMessage.success('删除成功!')
recordWeek.value = recordWeek.value.filter((r: any) => r.id !== item.id) recordWeek.value = recordWeek.value.filter((r: any) => r.id !== item.id)
setDate(item.date) setDate(item.date)
}).catch(() => { }) }).catch(() => {
})
} }
const saveData = (e: any) => { const saveData = (e: any) => {
recordWeek.value.push(e) recordWeek.value.push(e);
setDate(e.date) setDate(new Date(e.date));
} }
</script> </script>
@ -184,7 +212,7 @@ const saveData = (e: any) => {
.date-block { .date-block {
position: relative; position: relative;
&>span { & > span {
cursor: pointer; cursor: pointer;
} }