|
|
@@ -0,0 +1,611 @@
|
|
|
+<template>
|
|
|
+ <Dialog
|
|
|
+ style="max-width: 100vw; min-width: 90vw"
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="title"
|
|
|
+ scroll
|
|
|
+ class="FloorActivityRecord"
|
|
|
+ noPaddingEL="FloorActivityRecord"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-form v-loading="loading" ref="formRef" :model="dataForm" :rules="isDetail?[]:dataRule" :label-width="labelWidth">
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <div class="info-wrap">
|
|
|
+ <el-row>
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <el-form-item label="记录年月" prop="recordYear">
|
|
|
+ <el-date-picker
|
|
|
+ v-if="!isDetail"
|
|
|
+ v-model="dataForm.recordYear"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择年月"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="handleYearChange"
|
|
|
+ />
|
|
|
+ <el-text v-else>{{dataForm.recordYear}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <el-form-item label="第几周" prop="weekNumber">
|
|
|
+ <el-select v-if="!isDetail" v-model="dataForm.weekNumber" placeholder="选择周次" style="width: 100%">
|
|
|
+ <el-option v-for="w in 5" :key="w" :label="'第' + ['一', '二', '三', '四', '五'][w-1] + '周'" :value="w" />
|
|
|
+ </el-select>
|
|
|
+ <el-text v-else>第{{['一', '二', '三', '四', '五'][dataForm.weekNumber-1]}}周</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <el-form-item label="楼栋" prop="floorName">
|
|
|
+ <el-select v-if="!isDetail" v-model="dataForm.buildName" placeholder="选择楼栋" style="width: 100%">
|
|
|
+ <el-option @click="handleBuildChange(item)" v-for="(item,index) in buildList" :key="index" :label="item.buildName" :value="item.buildName" />
|
|
|
+ </el-select>
|
|
|
+ <el-text v-else>{{dataForm.buildName}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <el-form-item label="楼层" prop="weekNumber">
|
|
|
+ <el-select v-if="!isDetail" v-model="dataForm.floorName" placeholder="选择楼层" style="width: 100%">
|
|
|
+ <el-option v-for="(item,index) in floorList" :key="index" :label="item.floorName" :value="item.floorName" />
|
|
|
+ </el-select>
|
|
|
+ <el-text v-else>{{dataForm.floorName}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <el-form-item label="记录时间" prop="recordTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-if="!isDetail"
|
|
|
+ v-model="dataForm.recordTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择记录时间"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ <el-text v-else>{{dataForm.recordTime}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="参与长者">
|
|
|
+ <el-input type="textarea" placeholder="需要注意，这里的长者会用于列表页的长者名称模糊搜索" maxlength="500" show-word-limit :rows="4">{{ dateRangeText }}</el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-divider style="margin-top: 1px" />
|
|
|
+
|
|
|
+ <!-- 活动记录表格 -->
|
|
|
+ <div class="activity-table-wrap">
|
|
|
+ <table class="activity-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th class="time-col">时间/内容</th>
|
|
|
+ <th v-for="(day, index) in weekDays" :key="index" class="day-col">
|
|
|
+ <div class="day-header">
|
|
|
+ <div class="day-name">{{ day.name }}</div>
|
|
|
+ <div class="day-date">{{ day.date }}</div>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <!-- 8:00-9:00 早报/早操 -->
|
|
|
+ <tr>
|
|
|
+ <td class="time-slot">8:00-9:00</td>
|
|
|
+ <td v-for="(day, index) in weekDays" :key="index" class="activity-cell">
|
|
|
+ <el-input
|
|
|
+ v-if="!isDetail"
|
|
|
+ v-model="dataForm.morningExercise[index]"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="早报/早操内容"
|
|
|
+ />
|
|
|
+ <el-text v-else>{{ dataForm.morningExercise[index] || '-' }}</el-text>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <!-- 9:00-10:30 上午活动 -->
|
|
|
+ <tr>
|
|
|
+ <td class="time-slot">9:00-10:30</td>
|
|
|
+ <td v-for="(day, index) in weekDays" :key="index" class="activity-cell">
|
|
|
+ <el-input
|
|
|
+ v-if="!isDetail"
|
|
|
+ v-model="dataForm.morningActivity[index]"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="上午活动内容"
|
|
|
+ />
|
|
|
+ <el-text v-else>{{ dataForm.morningActivity[index] || '-' }}</el-text>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <!-- 11:00-12:00 长者午餐 -->
|
|
|
+ <tr>
|
|
|
+ <td class="time-slot">11:00-12:00</td>
|
|
|
+ <td colspan="7" class="merge-cell">
|
|
|
+ <span class="merge-text">长者午餐</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <!-- 12:00-14:30 长者午休、起床 -->
|
|
|
+ <tr>
|
|
|
+ <td class="time-slot">12:00-14:30</td>
|
|
|
+ <td colspan="7" class="merge-cell">
|
|
|
+ <span class="merge-text">长者午休、起床</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <!-- 15:00-16:30 下午活动 -->
|
|
|
+ <tr>
|
|
|
+ <td class="time-slot">15:00-16:30</td>
|
|
|
+ <td v-for="(day, index) in weekDays" :key="index" class="activity-cell">
|
|
|
+ <el-input
|
|
|
+ v-if="!isDetail"
|
|
|
+ v-model="dataForm.afternoonActivity[index]"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="下午活动内容"
|
|
|
+ />
|
|
|
+ <el-text v-else>{{ dataForm.afternoonActivity[index] || '-' }}</el-text>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <!-- 执行人姓名 -->
|
|
|
+ <tr>
|
|
|
+ <td class="time-slot">执行人姓名</td>
|
|
|
+ <td v-for="(day, index) in weekDays" :key="index" class="activity-cell">
|
|
|
+ <el-input
|
|
|
+ v-if="!isDetail"
|
|
|
+ v-model="dataForm.executorName[index]"
|
|
|
+ placeholder="执行人"
|
|
|
+ />
|
|
|
+ <el-text v-else>{{ dataForm.executorName[index] || '-' }}</el-text>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <!-- 执行情况记录 -->
|
|
|
+ <tr>
|
|
|
+ <td class="time-slot execution-col">
|
|
|
+ <div class="execution-title">执行情况记录</div>
|
|
|
+ </td>
|
|
|
+ <td v-for="(day, index) in weekDays" :key="index" class="execution-cell">
|
|
|
+ <div class="checkbox-group">
|
|
|
+ <el-checkbox v-if="!isDetail" v-model="dataForm.executionRecord[index].suitablePhysiology">适宜长者生理、心理特征</el-checkbox>
|
|
|
+ <el-text v-else v-show="dataForm.executionRecord[index].suitablePhysiology">适宜长者生理、心理特征</el-text>
|
|
|
+
|
|
|
+ <el-checkbox v-if="!isDetail" v-model="dataForm.executionRecord[index].improveSecurity">有助于提高长者安全感、归属感</el-checkbox>
|
|
|
+ <el-text v-else v-show="dataForm.executionRecord[index].improveSecurity">有助于提高长者安全感、归属感</el-text>
|
|
|
+
|
|
|
+ <el-checkbox v-if="!isDetail" v-model="dataForm.executionRecord[index].maintainMemory">有助于维系长者认知和记忆</el-checkbox>
|
|
|
+ <el-text v-else v-show="dataForm.executionRecord[index].maintainMemory">有助于维系长者认知和记忆</el-text>
|
|
|
+
|
|
|
+ <el-checkbox v-if="!isDetail" v-model="dataForm.executionRecord[index].improveCoordination">有助于提高长者手眼协调能力</el-checkbox>
|
|
|
+ <el-text v-else v-show="dataForm.executionRecord[index].improveCoordination">有助于提高长者手眼协调能力</el-text>
|
|
|
+
|
|
|
+ <el-checkbox v-if="!isDetail" v-model="dataForm.executionRecord[index].improveCommunication">有助于提高长者沟通与表达能力</el-checkbox>
|
|
|
+ <el-text v-else v-show="dataForm.executionRecord[index].improveCommunication">有助于提高长者沟通与表达能力</el-text>
|
|
|
+
|
|
|
+ <div class="other-remark">
|
|
|
+ <el-checkbox v-if="!isDetail" v-model="dataForm.executionRecord[index].hasOther">其他请注明</el-checkbox>
|
|
|
+ <el-text v-else v-show="dataForm.executionRecord[index].hasOther">其他请注明</el-text>
|
|
|
+ <el-input
|
|
|
+ v-if="!isDetail"
|
|
|
+ v-model="dataForm.executionRecord[index].otherRemark"
|
|
|
+ placeholder="请输入"
|
|
|
+ style="width: 120px; margin-left: 8px;"
|
|
|
+ />
|
|
|
+ <el-text v-else v-show="dataForm.executionRecord[index].hasOther" style="margin-left: 8px;">{{ dataForm.executionRecord[index].otherRemark }}</el-text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="handleClosed">关闭</el-button>
|
|
|
+ <el-button v-loading="formLoading" type="primary" v-show="!isDetail" @click="submitForm">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed, ref, watch } from 'vue'
|
|
|
+import { FormRules } from 'element-plus'
|
|
|
+import { useMediaQuery } from '@vueuse/core'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import {
|
|
|
+ floorActivityRecordCreate,
|
|
|
+ floorActivityRecordUpdate,
|
|
|
+ floorActivityRecordGetInfo
|
|
|
+} from "@/api/social-work";
|
|
|
+import {getBuildList} from "@/api/system/badManage";
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+const selectBedRef = ref()
|
|
|
+const title = ref('')
|
|
|
+const dialogVisible = ref(false) // 弹窗
|
|
|
+const loading = ref(false) // 弹窗
|
|
|
+const formRef = ref() // 表单 Ref
|
|
|
+const isDetail = ref(false) // 是否详情打开
|
|
|
+const formLoading = ref(false) // 表单的加载中
|
|
|
+
|
|
|
+// 星期配置
|
|
|
+const weekDayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
|
+
|
|
|
+// 计算日期范围
|
|
|
+const weekDays = ref<{ name: string; date: string }[]>([])
|
|
|
+
|
|
|
+// 初始化执行记录
|
|
|
+const initExecutionRecord = () => {
|
|
|
+ return {
|
|
|
+ suitablePhysiology: false,
|
|
|
+ improveSecurity: false,
|
|
|
+ maintainMemory: false,
|
|
|
+ improveCoordination: false,
|
|
|
+ improveCommunication: false,
|
|
|
+ hasOther: false,
|
|
|
+ otherRemark: ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+let dataForm = ref({
|
|
|
+ id: undefined,
|
|
|
+ recordYear: dayjs().format('YYYY-MM'), // 记录年份
|
|
|
+ recordMonth: dayjs().month() + 1, // 记录月份
|
|
|
+ weekNumber: 1, // 第几周
|
|
|
+ floorName: '', // 养护楼层
|
|
|
+ recordTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), // 记录时间
|
|
|
+ startDate: '', // 开始日期
|
|
|
+ endDate: '', // 结束日期
|
|
|
+ // 7天的活动内容
|
|
|
+ morningExercise: ['', '', '', '', '', '', ''], // 8:00-9:00 早报/早操
|
|
|
+ morningActivity: ['', '', '', '', '', '', ''], // 9:00-10:30 上午活动
|
|
|
+ afternoonActivity: ['', '', '', '', '', '', ''], // 15:00-16:30 下午活动
|
|
|
+ executorName: ['', '', '', '', '', '', ''], // 执行人姓名
|
|
|
+ executionRecord: Array(7).fill(null).map(() => initExecutionRecord()), // 执行情况记录
|
|
|
+ tenantId: undefined
|
|
|
+})
|
|
|
+
|
|
|
+// 表单规则
|
|
|
+const dataRule = reactive<FormRules>({
|
|
|
+ recordYear: [{ required: true, message: '记录年份不能为空', trigger: 'change' }],
|
|
|
+ recordMonth: [{ required: true, message: '记录月份不能为空', trigger: 'change' }],
|
|
|
+ weekNumber: [{ required: true, message: '周次不能为空', trigger: 'change' }],
|
|
|
+ floorName: [{ required: true, message: '养护楼层不能为空', trigger: 'blur' }],
|
|
|
+ recordTime: [{ required: true, message: '记录时间不能为空', trigger: 'blur' }],
|
|
|
+})
|
|
|
+
|
|
|
+// 计算日期范围文本
|
|
|
+const dateRangeText = computed(() => {
|
|
|
+ if (!dataForm.value.startDate || !dataForm.value.endDate) {
|
|
|
+ return '-'
|
|
|
+ }
|
|
|
+ return `${dataForm.value.startDate} 至 ${dataForm.value.endDate}`
|
|
|
+})
|
|
|
+
|
|
|
+// 获取指定年月第几周的起止日期
|
|
|
+const getWeekDateRange = (year: number, month: number, weekNum: number) => {
|
|
|
+ // 获取该月第一天
|
|
|
+ const firstDayOfMonth = dayjs(`${year}-${month}-01`)
|
|
|
+ // 获取该月第一天是星期几 (0=周日, 1=周一...)
|
|
|
+ const firstDayWeek = firstDayOfMonth.day()
|
|
|
+ // 计算第一周的起始日期（周日开始）
|
|
|
+ let weekStart = firstDayOfMonth.subtract(firstDayWeek, 'day')
|
|
|
+
|
|
|
+ // 调整到指定的周
|
|
|
+ weekStart = weekStart.add((weekNum - 1) * 7, 'day')
|
|
|
+ const weekEnd = weekStart.add(6, 'day')
|
|
|
+
|
|
|
+ return {
|
|
|
+ start: weekStart.format('MM月DD日'),
|
|
|
+ end: weekEnd.format('MM月DD日'),
|
|
|
+ dates: Array.from({ length: 7 }, (_, i) => weekStart.add(i, 'day').format('MM-DD'))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 更新周日期显示
|
|
|
+const updateWeekDays = () => {
|
|
|
+ const yearMonth = dataForm.value.recordYear // 格式: YYYY-MM
|
|
|
+ const weekNum = dataForm.value.weekNumber
|
|
|
+
|
|
|
+ if (yearMonth && weekNum) {
|
|
|
+ const [year, month] = yearMonth.split('-').map(Number)
|
|
|
+ const range = getWeekDateRange(year, month, weekNum)
|
|
|
+ dataForm.value.startDate = range.start
|
|
|
+ dataForm.value.endDate = range.end
|
|
|
+
|
|
|
+ weekDays.value = weekDayNames.map((name, index) => ({
|
|
|
+ name,
|
|
|
+ date: range.dates[index]
|
|
|
+ }))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 年份变化
|
|
|
+const handleYearChange = () => {
|
|
|
+ updateWeekDays()
|
|
|
+}
|
|
|
+
|
|
|
+// 月份变化
|
|
|
+const handleMonthChange = () => {
|
|
|
+ updateWeekDays()
|
|
|
+}
|
|
|
+
|
|
|
+// 监听周次变化
|
|
|
+watch(() => dataForm.value.weekNumber, () => {
|
|
|
+ updateWeekDays()
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 计算窗口大小
|
|
|
+const currentWidth = useMediaQuery('(max-width: 800px)')
|
|
|
+// 计算文字大小
|
|
|
+const labelWidth = computed(() => {
|
|
|
+ return currentWidth.value ? '100px' : '100px'
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const buildList = ref([])
|
|
|
+const floorList = ref([])
|
|
|
+
|
|
|
+const handleBuildChange = (e) => {
|
|
|
+ floorList.value= e.floorList
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/** 打开弹窗 */
|
|
|
+const open = async (tenantId, id?: any, detail: boolean = false) => {
|
|
|
+ resetForm()
|
|
|
+ dialogVisible.value = true
|
|
|
+ dataForm.value.id = id || undefined
|
|
|
+ dataForm.value.tenantId = tenantId
|
|
|
+ isDetail.value = detail
|
|
|
+
|
|
|
+ try {
|
|
|
+ buildList.value = await getBuildList({tenantIds: tenantId})
|
|
|
+ }catch (e) {}
|
|
|
+
|
|
|
+ if (id) {
|
|
|
+ title.value = detail ? "详情-楼层活动记录" : "编辑-楼层活动记录"
|
|
|
+ } else {
|
|
|
+ title.value = "新增-楼层活动记录"
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化周日期
|
|
|
+ updateWeekDays()
|
|
|
+
|
|
|
+ if (id) {
|
|
|
+ try {
|
|
|
+ loading.value = true
|
|
|
+ const res = await floorActivityRecordGetInfo(id)
|
|
|
+ // 解析后端返回的数据
|
|
|
+ dataForm.value = {
|
|
|
+ ...res,
|
|
|
+ morningExercise: res.morningExercise ? JSON.parse(res.morningExercise) : ['', '', '', '', '', '', ''],
|
|
|
+ morningActivity: res.morningActivity ? JSON.parse(res.morningActivity) : ['', '', '', '', '', '', ''],
|
|
|
+ afternoonActivity: res.afternoonActivity ? JSON.parse(res.afternoonActivity) : ['', '', '', '', '', '', ''],
|
|
|
+ executorName: res.executorName ? JSON.parse(res.executorName) : ['', '', '', '', '', '', ''],
|
|
|
+ executionRecord: res.executionRecord ? JSON.parse(res.executionRecord) : Array(7).fill(null).map(() => initExecutionRecord()),
|
|
|
+ }
|
|
|
+ updateWeekDays()
|
|
|
+ loading.value = false
|
|
|
+ } catch (err) {
|
|
|
+ loading.value = false
|
|
|
+ message.error('获取详情失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
+
|
|
|
+/** 提交表单 */
|
|
|
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
|
+const submitForm = async () => {
|
|
|
+ if (formLoading.value) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ formLoading.value = true
|
|
|
+ // 提交请求
|
|
|
+ try {
|
|
|
+ // 校验表单
|
|
|
+ if (!formRef.value) return
|
|
|
+ const valid = await formRef.value.validate()
|
|
|
+ if (!valid) return
|
|
|
+
|
|
|
+ // 构建提交参数
|
|
|
+ const tempParams = {
|
|
|
+ ...dataForm.value,
|
|
|
+ morningExercise: JSON.stringify(dataForm.value.morningExercise),
|
|
|
+ morningActivity: JSON.stringify(dataForm.value.morningActivity),
|
|
|
+ afternoonActivity: JSON.stringify(dataForm.value.afternoonActivity),
|
|
|
+ executorName: JSON.stringify(dataForm.value.executorName),
|
|
|
+ executionRecord: JSON.stringify(dataForm.value.executionRecord),
|
|
|
+ }
|
|
|
+
|
|
|
+ if (dataForm.value.id) {
|
|
|
+ const res = await floorActivityRecordUpdate(tempParams)
|
|
|
+ if (res) {
|
|
|
+ message.success(t('common.updateSuccess'))
|
|
|
+ dialogVisible.value = false
|
|
|
+ // 发送操作成功的事件
|
|
|
+ emit('success')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const res = await floorActivityRecordCreate(tempParams)
|
|
|
+ if (res) {
|
|
|
+ message.success(t('common.createSuccess'))
|
|
|
+ dialogVisible.value = false
|
|
|
+ // 发送操作成功的事件
|
|
|
+ emit('success')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ setTimeout(() => {
|
|
|
+ formLoading.value = false
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置表单 */
|
|
|
+const resetForm = () => {
|
|
|
+ dataForm.value = {
|
|
|
+ id: undefined,
|
|
|
+ recordYear: dayjs().format('YYYY-MM'),
|
|
|
+ recordMonth: dayjs().month() + 1,
|
|
|
+ weekNumber: 1,
|
|
|
+ floorName: '',
|
|
|
+ recordTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ morningExercise: ['', '', '', '', '', '', ''],
|
|
|
+ morningActivity: ['', '', '', '', '', '', ''],
|
|
|
+ afternoonActivity: ['', '', '', '', '', '', ''],
|
|
|
+ executorName: ['', '', '', '', '', '', ''],
|
|
|
+ executionRecord: Array(7).fill(null).map(() => initExecutionRecord()),
|
|
|
+ tenantId: undefined
|
|
|
+ }
|
|
|
+ formRef.value?.resetFields()
|
|
|
+ weekDays.value = []
|
|
|
+}
|
|
|
+
|
|
|
+// 关闭表单
|
|
|
+const handleClosed = () => {
|
|
|
+ dialogVisible.value = false
|
|
|
+ resetForm()
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.FloorActivityRecord {
|
|
|
+ .el-form {
|
|
|
+ padding: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-wrap {
|
|
|
+ margin: 0 15px 15px 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity-table-wrap {
|
|
|
+ margin: 15px;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ th {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-col {
|
|
|
+ width: 118px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .day-col {
|
|
|
+ min-width: 140px;
|
|
|
+
|
|
|
+ .day-header {
|
|
|
+ .day-name {
|
|
|
+ color: #555555;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 13px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .day-date {
|
|
|
+ color: #222222;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-slot {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ font-weight: 600;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity-cell {
|
|
|
+ min-width: 140px;
|
|
|
+ vertical-align: top;
|
|
|
+
|
|
|
+ :deep(.el-textarea__inner) {
|
|
|
+ min-height: 60px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .merge-cell {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .merge-text {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .execution-col {
|
|
|
+ vertical-align: middle;
|
|
|
+
|
|
|
+ .execution-title {
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ text-orientation: upright;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .execution-cell {
|
|
|
+ min-width: 160px;
|
|
|
+ text-align: left;
|
|
|
+ vertical-align: top;
|
|
|
+
|
|
|
+ .checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ :deep(.el-checkbox) {
|
|
|
+ margin-right: 0;
|
|
|
+ height: auto;
|
|
|
+ white-space: normal;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other-remark {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 1200px) {
|
|
|
+ :deep(.el-form-item--default .el-form-item__label) {
|
|
|
+ line-height: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
unknown