| | |
| | | <div class="app-container"> |
| | | <!-- 搜索表单 --> |
| | | <div class="search_form"> |
| | | <!-- <div>--> |
| | | <!-- <span class="search_title">公告标题:</span>--> |
| | | <!-- <el-input--> |
| | | <!-- v-model="searchForm.title"--> |
| | | <!-- style="width: 240px"--> |
| | | <!-- placeholder="请输入公告标题搜索"--> |
| | | <!-- @change="handleQuery"--> |
| | | <!-- clearable--> |
| | | <!-- :prefix-icon="Search"--> |
| | | <!-- />--> |
| | | <!-- <span class="search_title ml10">公告类型:</span>--> |
| | | <!-- <el-select v-model="searchForm.type" clearable @change="handleQuery" style="width: 240px">--> |
| | | <!-- <el-option label="放假通知" :value="1"/>--> |
| | | <!-- <el-option label="设备维修通知" :value="2"/>--> |
| | | <!-- </el-select>--> |
| | | <!-- <span class="search_title ml10">状态:</span>--> |
| | | <!-- <el-select v-model="searchForm.status" clearable @change="handleQuery" style="width: 240px">--> |
| | | <!-- <el-option label="草稿" :value="0"/>--> |
| | | <!-- <el-option label="已发布" :value="1"/>--> |
| | | <!-- <el-option label="已下线" :value="2"/>--> |
| | | <!-- </el-select>--> |
| | | <!-- <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>--> |
| | | <!-- <el-button @click="resetQuery" style="margin-left: 10px">重置</el-button>--> |
| | | <!-- </div>--> |
| | | <div> |
| | | <el-button type="primary" @click="openForm('add')">新增公告</el-button> |
| | | <el-button type="danger" plain @click="handleDelete" :disabled="!selectedIds.length">删除</el-button> |
| | |
| | | {{ notice.title }} |
| | | </div> |
| | | <div class="card-actions"> |
| | | <el-button link type="primary" @click="handleEdit(notice)">编辑</el-button> |
| | | <el-button link type="primary" @click="handleEdit(notice)" :disabled="isNoticeExpired(notice)">编辑</el-button> |
| | | <el-button link type="danger" @click="handleDelete(notice.id)">删除</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | <span class="priority" :class="'priority-' + notice.priority"> |
| | | {{ getPriorityText(notice.priority) }} |
| | | </span> |
| | | <span class="status" :class="'status-' + notice.status"> |
| | | {{ getStatusText(notice.status) }} |
| | | <span class="status" :class="'status-' + getNoticeStatus(notice)"> |
| | | {{ getStatusText(getNoticeStatus(notice)) }} |
| | | </span> |
| | | </div> |
| | | <div class="card-info"> |
| | | <span class="creator">{{ notice.createUserName }}</span> |
| | | <span class="time">{{ notice.createTime }}</span> |
| | | <span class="expiration" v-if="notice.expirationDate">截止日期:{{ notice.expirationDate }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="card-remark" v-if="notice.remark"> |
| | |
| | | {{ notice.title }} |
| | | </div> |
| | | <div class="card-actions"> |
| | | <el-button link type="primary" @click="handleEdit(notice)">编辑</el-button> |
| | | <el-button link type="primary" @click="handleEdit(notice)" :disabled="isNoticeExpired(notice)">编辑</el-button> |
| | | <el-button link type="danger" @click="handleDelete(notice.id)">删除</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | <span class="priority" :class="'priority-' + notice.priority"> |
| | | {{ getPriorityText(notice.priority) }} |
| | | </span> |
| | | <span class="status" :class="'status-' + notice.status"> |
| | | {{ getStatusText(notice.status) }} |
| | | <span class="status" :class="'status-' + getNoticeStatus(notice)"> |
| | | {{ getStatusText(getNoticeStatus(notice)) }} |
| | | </span> |
| | | </div> |
| | | <div class="card-info"> |
| | | <span class="creator">{{ notice.createUserName }}</span> |
| | | <span class="time">{{ notice.createTime }}</span> |
| | | <span class="expiration" v-if="notice.expirationDate">截止日期:{{ notice.expirationDate }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="card-remark" v-if="notice.remark"> |
| | |
| | | <el-form-item label="状态"> |
| | | <el-radio-group v-model="form.status"> |
| | | <el-radio :value="0">草稿</el-radio> |
| | | <el-radio :value="1">已发布</el-radio> |
| | | <el-radio :value="2">已下线</el-radio> |
| | | <el-radio :value="1">正式发布</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="过期时间" prop="expirationDate"> |
| | | <el-date-picker v-model="form.expirationDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="date" |
| | | placeholder="请选择" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="公告内容" prop="noticeContent"> |
| | | <el-form-item label="公告内容" prop="content"> |
| | | <el-input |
| | | v-model="form.content" |
| | | type="textarea" |
| | |
| | | status: 0, |
| | | priority: 1, |
| | | remark: "", |
| | | expirationDate: "", |
| | | }, |
| | | rules: { |
| | | title: [ |
| | |
| | | ], |
| | | content: [ |
| | | {required: true, message: "公告内容不能为空", trigger: "blur"} |
| | | ], |
| | | expirationDate: [ |
| | | {required: true, message: "请选择日期", trigger: "change"} |
| | | ] |
| | | } |
| | | }); |
| | |
| | | }; |
| | | |
| | | const getStatusText = (status) => { |
| | | const statusMap = {"0": "草稿", "1": "已发布", "2": "已下线"}; |
| | | const statusMap = {"0": "草稿", "1": "已发布", "2": "已过期"}; |
| | | return statusMap[status] || "未知"; |
| | | }; |
| | | |
| | | const isNoticeExpired = (notice) => { |
| | | if (!notice || !notice.expirationDate) { |
| | | return false; |
| | | } |
| | | |
| | | const expiration = new Date(notice.expirationDate); |
| | | |
| | | if (Number.isNaN(expiration.getTime())) { |
| | | return false; |
| | | } |
| | | |
| | | expiration.setHours(23, 59, 59, 999); |
| | | |
| | | return new Date() > expiration; |
| | | }; |
| | | |
| | | const getNoticeStatus = (notice) => { |
| | | const normalizedStatus = notice && notice.status !== undefined && notice.status !== null |
| | | ? String(notice.status) |
| | | : "0"; |
| | | |
| | | return isNoticeExpired(notice) ? "2" : normalizedStatus; |
| | | }; |
| | | |
| | | const openForm = (type) => { |
| | |
| | | status: 0, |
| | | priority: 1, |
| | | remark: "", |
| | | expirationDate: "", |
| | | }; |
| | | } |
| | | dialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleEdit = (row) => { |
| | | if (isNoticeExpired(row)) { |
| | | ElMessage.warning("已过期的公告不可编辑"); |
| | | return; |
| | | } |
| | | dialogTitle.value = "编辑公告"; |
| | | form.value = {...row}; |
| | | dialogVisible.value = true; |
| | |
| | | const holidayNoticePage = ref({ |
| | | total: 0, |
| | | current: 1, |
| | | size: 6 |
| | | size: 9 |
| | | }) |
| | | |
| | | const maintenanceNoticePage = ref({ |
| | | total: 0, |
| | | current: 1, |
| | | size: 6 |
| | | size: 9 |
| | | }) |
| | | |
| | | const fetchHolidayNotices = () => { |
| | |
| | | |
| | | const resetTable = () => { |
| | | holidayNoticePage.value.current = 1 |
| | | holidayNoticePage.value.size = 6 |
| | | holidayNoticePage.value.size = 9 |
| | | maintenanceNoticePage.value.current = 1 |
| | | maintenanceNoticePage.value.size = 6 |
| | | maintenanceNoticePage.value.size = 9 |
| | | fetchHolidayNotices() |
| | | fetchMaintenanceNotices() |
| | | fetchCount() |
| | |
| | | margin-bottom: 2px; |
| | | } |
| | | |
| | | .expiration { |
| | | margin-top: 2px; |
| | | } |
| | | |
| | | .card-remark { |
| | | display: flex; |
| | | align-items: center; |