From ebe3507d1382bb124c1fb895a5e27f7063fdffdc Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 13 一月 2026 16:19:14 +0800
Subject: [PATCH] fix: 规章制度加一个附件功能
---
src/views/collaborativeApproval/noticeManagement/index.vue | 955 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 611 insertions(+), 344 deletions(-)
diff --git a/src/views/collaborativeApproval/noticeManagement/index.vue b/src/views/collaborativeApproval/noticeManagement/index.vue
index b19d2ac..6b0ea98 100644
--- a/src/views/collaborativeApproval/noticeManagement/index.vue
+++ b/src/views/collaborativeApproval/noticeManagement/index.vue
@@ -3,159 +3,116 @@
<!-- 鎼滅储琛ㄥ崟 -->
<div class="search_form">
<div>
- <span class="search_title">鍏憡鏍囬锛�</span>
- <el-input
- v-model="searchForm.noticeTitle"
- style="width: 240px"
- placeholder="璇疯緭鍏ュ叕鍛婃爣棰樻悳绱�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search"
- />
- <span class="search_title ml10">鍏憡绫诲瀷锛�</span>
- <el-select v-model="searchForm.noticeType" 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>
+ <el-button type="info" @click="openNoticeTypeDialog">鍏憡绫诲瀷閰嶇疆</el-button>
</div>
</div>
<!-- 閫氱煡鍏憡鏉� -->
<div class="notice-board">
- <!-- 鏀惧亣閫氱煡鍖哄煙 -->
- <div class="notice-section" v-if="holidayNotices.length > 0">
- <div class="section-header">
- <h3>馃搮 鏀惧亣閫氱煡</h3>
- <span class="section-count">{{ holidayNotices.length }}鏉�</span>
- </div>
- <div class="notice-cards">
- <div
- v-for="notice in holidayNotices"
- :key="notice.id"
- class="notice-card holiday-card"
- :class="{ 'urgent': notice.priority === '3' }"
- >
- <div class="card-header">
- <div class="card-title">
- <el-icon class="holiday-icon"><Calendar /></el-icon>
- {{ notice.noticeTitle }}
- </div>
- <div class="card-actions">
- <el-button link type="primary" @click="handleEdit(notice)">缂栬緫</el-button>
- <el-button link type="danger" @click="handleDelete(notice.id)">鍒犻櫎</el-button>
+ <el-tabs v-model="activeNoticeTypeTab" @tab-change="handleNoticeTypeTabChange">
+ <el-tab-pane
+ v-for="noticeType in noticeTypeList"
+ :key="noticeType.id"
+ :label="noticeType.noticeType"
+ :name="String(noticeType.id)"
+ >
+ <template #label>
+ <span>{{ noticeType.noticeType }}
+ <span class="tab-count" v-if="getNoticeCountByType(noticeType.id) > 0">
+ ({{ getNoticeCountByType(noticeType.id) }})
+ </span>
+ </span>
+ </template>
+
+ <div class="notice-section">
+ <div class="notice-cards">
+ <div
+ v-for="notice in getNoticesByType(noticeType.id)"
+ :key="notice.id"
+ class="notice-card"
+ :class="{ 'urgent': notice.priority === '3' }"
+ >
+ <div class="card-header">
+ <div class="card-title">
+ <el-icon class="notice-icon">
+ <Calendar/>
+ </el-icon>
+ {{ notice.title }}
+ </div>
+ <div class="card-actions">
+ <el-button link type="primary" @click="handleEdit(notice)" :disabled="isNoticeExpired(notice)" v-if="notice.status !== 1">缂栬緫</el-button>
+ <el-button link type="success" @click="handlePublish(notice)" v-if="notice.status === 0">鍙戝竷</el-button>
+ <el-button link type="danger" @click="handleDelete(notice.id)" v-if="notice.status !== 1">鍒犻櫎</el-button>
+ </div>
+ </div>
+ <div class="card-content">
+ <p>{{ notice.content }}</p>
+ </div>
+ <div class="card-footer">
+ <div class="card-meta">
+ <span class="priority" :class="'priority-' + notice.priority">
+ {{ getPriorityText(notice.priority) }}
+ </span>
+ <span class="status" :class="'status-' + getNoticeStatus(notice)">
+ {{ getStatusText(getNoticeStatus(notice)) }}
+ </span>
+ </div>
+ <div class="card-info">
+ <span class="creator">{{ notice.createUserName }}</span>
+ <span class="expiration" v-if="notice.expirationDate">鎴鏃ユ湡锛歿{ notice.expirationDate }}</span>
+ </div>
+ </div>
+ <div class="card-remark" v-if="notice.remark">
+ <el-icon>
+ <InfoFilled/>
+ </el-icon>
+ <span>{{ notice.remark }}</span>
+ </div>
</div>
</div>
- <div class="card-content">
- <p>{{ notice.noticeContent }}</p>
- </div>
- <div class="card-footer">
- <div class="card-meta">
- <span class="priority" :class="'priority-' + notice.priority">
- {{ getPriorityText(notice.priority) }}
- </span>
- <span class="status" :class="'status-' + notice.status">
- {{ getStatusText(notice.status) }}
- </span>
- </div>
- <div class="card-info">
- <span class="creator">{{ notice.createBy }}</span>
- <span class="time">{{ notice.createTime }}</span>
- </div>
- </div>
- <div class="card-remark" v-if="notice.remark">
- <el-icon><InfoFilled /></el-icon>
- <span>{{ notice.remark }}</span>
+
+ <pagination
+ v-if="getNoticePageByType(noticeType.id).total > 0"
+ :total="getNoticePageByType(noticeType.id).total"
+ :page="getNoticePageByType(noticeType.id).current"
+ :limit="getNoticePageByType(noticeType.id).size"
+ @pagination="(val) => handleNoticeCurrentChange(noticeType.id, val)"
+ />
+
+ <!-- 绌虹姸鎬� -->
+ <div class="empty-state" v-if="getNoticesByType(noticeType.id).length === 0">
+ <el-empty description="鏆傛棤閫氱煡鍏憡"/>
</div>
</div>
- </div>
- </div>
-
- <!-- 璁惧缁翠慨閫氱煡鍖哄煙 -->
- <div class="notice-section" v-if="maintenanceNotices.length > 0">
- <div class="section-header">
- <h3>馃敡 璁惧缁翠慨閫氱煡</h3>
- <span class="section-count">{{ maintenanceNotices.length }}鏉�</span>
- </div>
- <div class="notice-cards">
- <div
- v-for="notice in maintenanceNotices"
- :key="notice.id"
- class="notice-card maintenance-card"
- :class="{ 'urgent': notice.priority === '3' }"
- >
- <div class="card-header">
- <div class="card-title">
- <el-icon class="maintenance-icon"><Tools /></el-icon>
- {{ notice.noticeTitle }}
- </div>
- <div class="card-actions">
- <el-button link type="primary" @click="handleEdit(notice)">缂栬緫</el-button>
- <el-button link type="danger" @click="handleDelete(notice.id)">鍒犻櫎</el-button>
- </div>
- </div>
- <div class="card-content">
- <p>{{ notice.noticeContent }}</p>
- </div>
- <div class="card-footer">
- <div class="card-meta">
- <span class="priority" :class="'priority-' + notice.priority">
- {{ getPriorityText(notice.priority) }}
- </span>
- <span class="status" :class="'status-' + notice.status">
- {{ getStatusText(notice.status) }}
- </span>
- </div>
- <div class="card-info">
- <span class="creator">{{ notice.createBy }}</span>
- <span class="time">{{ notice.createTime }}</span>
- </div>
- </div>
- <div class="card-remark" v-if="notice.remark">
- <el-icon><InfoFilled /></el-icon>
- <span>{{ notice.remark }}</span>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 绌虹姸鎬� -->
- <div class="empty-state" v-if="filteredNotices.length === 0">
- <el-empty description="鏆傛棤閫氱煡鍏憡" />
- </div>
+ </el-tab-pane>
+ </el-tabs>
</div>
<!-- 鏂板/缂栬緫瀵硅瘽妗� -->
- <el-dialog
- :title="dialogTitle"
- v-model="dialogVisible"
- width="800px"
- append-to-body
- @close="resetForm"
+ <el-dialog
+ :title="dialogTitle"
+ v-model="dialogVisible"
+ width="800px"
+ append-to-body
+ @close="resetForm"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
- <el-form-item label="鍏憡鏍囬" prop="noticeTitle">
- <el-input v-model="form.noticeTitle" placeholder="璇疯緭鍏ュ叕鍛婃爣棰�" />
+ <el-form-item label="鍏憡鏍囬" prop="title">
+ <el-input v-model="form.title" placeholder="璇疯緭鍏ュ叕鍛婃爣棰�"/>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="鍏憡绫诲瀷" prop="noticeType">
- <el-select v-model="form.noticeType" placeholder="璇烽�夋嫨鍏憡绫诲瀷" style="width: 100%">
- <el-option label="鏀惧亣閫氱煡" value="1" />
- <el-option label="璁惧缁翠慨閫氱煡" value="2" />
+ <el-form-item label="鍏憡绫诲瀷" prop="type">
+ <el-select v-model="form.type" placeholder="璇烽�夋嫨鍏憡绫诲瀷" style="width: 100%">
+ <el-option
+ v-for="item in noticeTypeList"
+ :key="item.id"
+ :label="item.noticeType"
+ :value="item.id"
+ />
</el-select>
</el-form-item>
</el-col>
@@ -164,32 +121,39 @@
<el-col :span="12">
<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="0">鑽夌</el-radio>
+ <el-radio :value="1">姝ｅ紡鍙戝竷</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="浼樺厛绾�">
<el-select v-model="form.priority" placeholder="璇烽�夋嫨浼樺厛绾�" style="width: 100%">
- <el-option label="鏅��" value="1" />
- <el-option label="閲嶈" value="2" />
- <el-option label="绱ф��" value="3" />
+ <el-option label="鏅��" :value="1"/>
+ <el-option label="閲嶈" :value="2"/>
+ <el-option label="绱ф��" :value="3"/>
</el-select>
</el-form-item>
</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.noticeContent"
- type="textarea"
- :rows="6"
- placeholder="璇疯緭鍏ュ叕鍛婂唴瀹�"
- maxlength="500"
- show-word-limit
+ v-model="form.content"
+ type="textarea"
+ :rows="6"
+ placeholder="璇疯緭鍏ュ叕鍛婂唴瀹�"
+ maxlength="500"
+ show-word-limit
/>
</el-form-item>
</el-col>
@@ -198,12 +162,12 @@
<el-col :span="24">
<el-form-item label="澶囨敞">
<el-input
- v-model="form.remark"
- type="textarea"
- :rows="3"
- placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�"
- maxlength="200"
- show-word-limit
+ v-model="form.remark"
+ type="textarea"
+ :rows="3"
+ placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�"
+ maxlength="200"
+ show-word-limit
/>
</el-form-item>
</el-col>
@@ -216,177 +180,168 @@
</div>
</template>
</el-dialog>
+
+ <!-- 鍏憡绫诲瀷閰嶇疆寮规 -->
+ <el-dialog
+ v-model="noticeTypeDialogVisible"
+ title="鍏憡绫诲瀷閰嶇疆"
+ width="800px"
+ @close="handleNoticeTypeDialogClose"
+ >
+ <div class="notice-type-container">
+ <div class="notice-type-header">
+ <el-button type="primary" @click="handleAddNoticeType">鏂板绫诲瀷</el-button>
+ </div>
+ <el-table :data="noticeTypeList" border style="width: 100%">
+ <el-table-column prop="id" label="ID" width="80" align="center"/>
+ <el-table-column prop="noticeType" label="鍏憡绫诲瀷" align="center">
+ <template #default="scope">
+ <el-input
+ v-if="scope.row.editing"
+ v-model="scope.row.noticeType"
+ placeholder="璇疯緭鍏ュ叕鍛婄被鍨�"
+ />
+ <span v-else>{{ scope.row.noticeType }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="200" align="center">
+ <template #default="scope">
+ <el-button
+ v-if="scope.row.editing"
+ link
+ type="primary"
+ size="small"
+ @click="handleSaveNoticeType(scope.row)"
+ >
+ 淇濆瓨
+ </el-button>
+ <el-button
+ v-if="scope.row.editing"
+ link
+ type="info"
+ size="small"
+ @click="handleCancelEdit(scope.row)"
+ >
+ 鍙栨秷
+ </el-button>
+ <el-button
+ v-if="!scope.row.editing"
+ link
+ type="primary"
+ size="small"
+ @click="handleEditNoticeType(scope.row)"
+ >
+ 缂栬緫
+ </el-button>
+ <el-button
+ v-if="!scope.row.editing"
+ link
+ type="danger"
+ size="small"
+ @click="handleDeleteNoticeType(scope.row)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-dialog>
</div>
</template>
<script setup>
-import { Search, Calendar, Tools, InfoFilled } from "@element-plus/icons-vue";
-import { onMounted, ref, reactive, toRefs, computed } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import {Calendar, InfoFilled} from "@element-plus/icons-vue";
+import {onMounted, ref, reactive, toRefs, computed} from "vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {useRoute} from "vue-router";
import useUserStore from "@/store/modules/user";
+import {
+ addNotice,
+ delNotice,
+ getCount,
+ listNotice,
+ updateNotice,
+ listNoticeType,
+ addNoticeType,
+ delNoticeType
+} from "../../../api/collaborativeApproval/noticeManagement.js";
+import pagination from "../../../components/PIMTable/Pagination.vue";
const userStore = useUserStore();
+const route = useRoute();
// 鍝嶅簲寮忔暟鎹�
const data = reactive({
searchForm: {
- noticeTitle: "",
- noticeType: "",
- status: "",
+ title: "",
+ type: undefined,
+ status: undefined,
},
form: {
id: undefined,
- noticeTitle: "",
- noticeType: "",
- noticeContent: "",
- status: "0",
- priority: "1",
+ title: "",
+ type: null,
+ content: "",
+ status: 0,
+ priority: 1,
remark: "",
- createBy: "",
- createTime: "",
+ expirationDate: "",
},
rules: {
- noticeTitle: [
- { required: true, message: "鍏憡鏍囬涓嶈兘涓虹┖", trigger: "blur" }
+ title: [
+ {required: true, message: "鍏憡鏍囬涓嶈兘涓虹┖", trigger: "blur"}
],
- noticeType: [
- { required: true, message: "璇烽�夋嫨鍏憡绫诲瀷", trigger: "change" }
+ type: [
+ {required: true, message: "璇烽�夋嫨鍏憡绫诲瀷", trigger: "change"}
],
- noticeContent: [
- { required: true, message: "鍏憡鍐呭涓嶈兘涓虹┖", trigger: "blur" }
+ content: [
+ {required: true, message: "鍏憡鍐呭涓嶈兘涓虹┖", trigger: "blur"}
+ ],
+ expirationDate: [
+ {required: true, message: "璇烽�夋嫨鏃ユ湡", trigger: "change"}
]
}
});
-const { searchForm, form, rules } = toRefs(data);
+const {searchForm, form, rules} = toRefs(data);
// 椤甸潰鐘舵��
const dialogVisible = ref(false);
const dialogTitle = ref("");
-const selectedIds = ref([]);
const formRef = ref();
-// 妯℃嫙鏁版嵁 - 鏍规嵁娉曞畾鑺傚亣鏃ヨ璁�
-const mockData = [
- {
- id: 1,
- noticeTitle: "2024骞存槬鑺傛斁鍋囬�氱煡",
- noticeType: "1",
- priority: "2",
- status: "1",
- noticeContent: "鏍规嵁鍥藉姟闄㈠姙鍏巺閫氱煡锛�2024骞存槬鑺傛斁鍋囧畨鎺掑涓嬶細2鏈�10鏃ワ紙鍒濅竴锛夎嚦2鏈�17鏃ワ紙鍒濆叓锛夋斁鍋囪皟浼戯紝鍏�8澶┿��2鏈�4鏃ワ紙鏄熸湡鏃ワ級銆�2鏈�18鏃ワ紙鏄熸湡鏃ワ級涓婄彮銆傝鍚勯儴闂ㄦ彁鍓嶅仛濂藉伐浣滃畨鎺掋��",
- remark: "鏀惧亣鏈熼棿璇蜂繚鎸佹墜鏈虹晠閫氾紝濡傛湁绱ф�ヤ簨鍔″強鏃惰仈绯�",
- createBy: "浜轰簨閮�",
- createTime: "2025-01-15 10:30:00"
- },
- {
- id: 2,
- noticeTitle: "2024骞存竻鏄庤妭鏀惧亣閫氱煡",
- noticeType: "1",
- priority: "1",
- status: "1",
- noticeContent: "鏍规嵁鍥藉姟闄㈠姙鍏巺閫氱煡锛�2024骞存竻鏄庤妭鏀惧亣瀹夋帓濡備笅锛�4鏈�4鏃ワ紙鏄熸湡鍥涳級鑷�4鏈�6鏃ワ紙鏄熸湡鍏級鏀惧亣璋冧紤锛屽叡3澶┿��4鏈�7鏃ワ紙鏄熸湡鏃ワ級涓婄彮銆�",
- remark: "璇峰悇閮ㄩ棬鍋氬ソ鍊肩彮瀹夋帓锛岀‘淇濊妭鏃ユ湡闂村悇椤瑰伐浣滄甯歌繍杞�",
- createBy: "琛屾斂閮�",
- createTime: "2025-01-14 14:20:00"
- },
- {
- id: 3,
- noticeTitle: "2024骞村姵鍔ㄨ妭鏀惧亣閫氱煡",
- noticeType: "1",
- priority: "1",
- status: "1",
- noticeContent: "鏍规嵁鍥藉姟闄㈠姙鍏巺閫氱煡锛�2024骞村姵鍔ㄨ妭鏀惧亣瀹夋帓濡備笅锛�5鏈�1鏃ワ紙鏄熸湡涓夛級鑷�5鏈�5鏃ワ紙鏄熸湡鏃ワ級鏀惧亣璋冧紤锛屽叡5澶┿��4鏈�28鏃ワ紙鏄熸湡鏃ワ級銆�5鏈�11鏃ワ紙鏄熸湡鍏級涓婄彮銆�",
- remark: "鏀惧亣鍓嶈鍏抽棴鐢垫簮锛岄攣濂介棬绐楋紝娉ㄦ剰瀹夊叏",
- createBy: "琛屾斂閮�",
- createTime: "2025-01-13 09:15:00"
- },
- {
- id: 4,
- noticeTitle: "2024骞寸鍗堣妭鏀惧亣閫氱煡",
- noticeType: "1",
- priority: "1",
- status: "1",
- noticeContent: "鏍规嵁鍥藉姟闄㈠姙鍏巺閫氱煡锛�2024骞寸鍗堣妭鏀惧亣瀹夋帓濡備笅锛�6鏈�8鏃ワ紙鏄熸湡鍏級鑷�6鏈�10鏃ワ紙鏄熸湡涓�锛夋斁鍋囪皟浼戯紝鍏�3澶┿��6鏈�11鏃ワ紙鏄熸湡浜岋級涓婄彮銆�",
- remark: "绁濆ぇ瀹剁鍗堣妭蹇箰锛岄槚瀹跺垢绂忥紒",
- createBy: "琛屾斂閮�",
- createTime: "2025-01-12 16:30:00"
- },
- {
- id: 5,
- noticeTitle: "2024骞翠腑绉嬭妭鏀惧亣閫氱煡",
- noticeType: "1",
- priority: "1",
- status: "1",
- noticeContent: "鏍规嵁鍥藉姟闄㈠姙鍏巺閫氱煡锛�2024骞翠腑绉嬭妭鏀惧亣瀹夋帓濡備笅锛�9鏈�15鏃ワ紙鏄熸湡鏃ワ級鑷�9鏈�17鏃ワ紙鏄熸湡浜岋級鏀惧亣璋冧紤锛屽叡3澶┿��9鏈�14鏃ワ紙鏄熸湡鍏級涓婄彮銆�",
- remark: "涓浣宠妭锛岀澶у鍥㈠渾缇庢弧锛屽垢绂忓畨搴凤紒",
- createBy: "琛屾斂閮�",
- createTime: "2025-01-11 11:20:00"
- },
- {
- id: 6,
- noticeTitle: "2024骞村浗搴嗚妭鏀惧亣閫氱煡",
- noticeType: "1",
- priority: "2",
- status: "1",
- noticeContent: "鏍规嵁鍥藉姟闄㈠姙鍏巺閫氱煡锛�2024骞村浗搴嗚妭鏀惧亣瀹夋帓濡備笅锛�10鏈�1鏃ワ紙鏄熸湡浜岋級鑷�10鏈�7鏃ワ紙鏄熸湡涓�锛夋斁鍋囪皟浼戯紝鍏�7澶┿��9鏈�29鏃ワ紙鏄熸湡鏃ワ級銆�10鏈�12鏃ワ紙鏄熸湡鍏級涓婄彮銆�",
- remark: "鍥藉簡鏈熼棿璇峰悇閮ㄩ棬鍋氬ソ鍊肩彮瀹夋帓锛岀‘淇濆畨鍏ㄧǔ瀹�",
- createBy: "琛屾斂閮�",
- createTime: "2025-01-10 15:45:00"
- },
- {
- id: 7,
- noticeTitle: "A杞﹂棿鐢熶骇绾垮勾搴︽淇�氱煡",
- noticeType: "2",
- priority: "2",
- status: "1",
- noticeContent: "A杞﹂棿鐢熶骇绾垮皢浜�2024骞�1鏈�20鏃ワ紙鍛ㄥ叚锛夎繘琛屽勾搴︽淇淮鎶わ紝棰勮鍋滃伐8灏忔椂銆傛淇唴瀹瑰寘鎷細璁惧娓呮磥銆佹鼎婊戜繚鍏汇�佸畨鍏ㄨ缃鏌ョ瓑銆傝鐢熶骇閮ㄩ棬鎻愬墠璋冩暣鐢熶骇璁″垝銆�",
- remark: "缁翠慨鏈熼棿璇风浉鍏充汉鍛橀厤鍚堬紝纭繚妫�淇伐浣滃畨鍏ㄩ『鍒╄繘琛�",
- createBy: "璁惧閮�",
- createTime: "2025-01-14 14:20:00"
- },
- {
- id: 8,
- noticeTitle: "B杞﹂棿璁惧棰勯槻鎬х淮鎶ら�氱煡",
- noticeType: "2",
- priority: "1",
- status: "1",
- noticeContent: "B杞﹂棿鍏抽敭璁惧灏嗕簬2024骞�1鏈�25鏃ヨ繘琛岄闃叉�х淮鎶わ紝棰勮鍋滃伐4灏忔椂銆傜淮鎶ゅ唴瀹瑰寘鎷細璁惧妫�鏌ャ�侀浂浠舵洿鎹€�佹�ц兘娴嬭瘯绛夈�傝鐩稿叧閮ㄩ棬閰嶅悎銆�",
- remark: "缁存姢瀹屾垚鍚庡皢杩涜璇曡繍琛岋紝纭繚璁惧姝ｅ父杩愯",
- createBy: "璁惧閮�",
- createTime: "2025-01-13 09:15:00"
- }
-];
+// 鍏憡绫诲瀷閰嶇疆鐩稿叧
+const noticeTypeDialogVisible = ref(false);
+const noticeTypeList = ref([]);
+const activeNoticeTypeTab = ref('');
+
+// 閫氱煡鏁版嵁 - 浣跨敤 Map 瀛樺偍锛宬ey 涓虹被鍨� id
+const noticesMap = ref({});
+const noticePagesMap = ref({});
+
// 璁＄畻灞炴��
const filteredNotices = computed(() => {
let filtered = [...mockData];
-
+
if (searchForm.value.noticeTitle) {
- filtered = filtered.filter(item =>
- item.noticeTitle.includes(searchForm.value.noticeTitle)
+ filtered = filtered.filter(item =>
+ item.noticeTitle.includes(searchForm.value.noticeTitle)
);
}
if (searchForm.value.noticeType) {
- filtered = filtered.filter(item =>
- item.noticeType === searchForm.value.noticeType
+ filtered = filtered.filter(item =>
+ item.noticeType === searchForm.value.noticeType
);
}
if (searchForm.value.status !== "") {
- filtered = filtered.filter(item =>
- item.status === searchForm.value.status
+ filtered = filtered.filter(item =>
+ item.status === searchForm.value.status
);
}
-
+
return filtered;
-});
-
-const holidayNotices = computed(() => {
- return filteredNotices.value.filter(notice => notice.noticeType === "1");
-});
-
-const maintenanceNotices = computed(() => {
- return filteredNotices.value.filter(notice => notice.noticeType === "2");
});
// 鏂规硶瀹氫箟
@@ -396,20 +351,44 @@
const resetQuery = () => {
searchForm.value = {
- noticeTitle: "",
- noticeType: "",
+ title: "",
+ type: "",
status: ""
};
};
const getPriorityText = (priority) => {
- const priorityMap = { "1": "鏅��", "2": "閲嶈", "3": "绱ф��" };
+ const priorityMap = {"1": "鏅��", "2": "閲嶈", "3": "绱ф��"};
return priorityMap[priority] || "鏅��";
};
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) => {
@@ -417,44 +396,64 @@
dialogTitle.value = "鏂板鍏憡";
form.value = {
id: undefined,
- noticeTitle: "",
- noticeType: "",
- noticeContent: "",
- status: "0",
- priority: "1",
+ title: "",
+ type: undefined,
+ content: "",
+ status: 0,
+ priority: 1,
remark: "",
- createBy: userStore.name || "褰撳墠鐢ㄦ埛",
- createTime: new Date().toLocaleString()
+ expirationDate: "",
};
}
dialogVisible.value = true;
};
const handleEdit = (row) => {
+ if (isNoticeExpired(row)) {
+ ElMessage.warning("宸茶繃鏈熺殑鍏憡涓嶅彲缂栬緫");
+ return;
+ }
dialogTitle.value = "缂栬緫鍏憡";
- form.value = { ...row };
+ form.value = {...row};
dialogVisible.value = true;
-};
-
-const handleSelectionChange = (selection) => {
- selectedIds.value = selection.map(item => item.id);
};
const handleDelete = (id) => {
ElMessageBox.confirm(
- "纭鍒犻櫎杩欐潯鍏憡鍚楋紵",
- "鎻愮ず",
- {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning"
- }
+ "纭鍒犻櫎杩欐潯鍏憡鍚楋紵",
+ "鎻愮ず",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ }
).then(() => {
- const index = mockData.findIndex(item => item.id === id);
- if (index > -1) {
- mockData.splice(index, 1);
+ delNotice(id).then(res => {
ElMessage.success("鍒犻櫎鎴愬姛");
- }
+ resetTable()
+ })
+ });
+};
+
+const handlePublish = (notice) => {
+ ElMessageBox.confirm(
+ "纭鍙戝竷杩欐潯鍏憡鍚楋紵",
+ "鎻愮ず",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "info"
+ }
+ ).then(() => {
+ updateNotice({
+ ...notice,
+ status: 1
+ }).then(res => {
+ if (res.code === 200) {
+ ElMessage.success("鍙戝竷鎴愬姛");
+ resetTable()
+ }
+ })
});
};
@@ -463,24 +462,85 @@
if (valid) {
if (form.value.id) {
// 缂栬緫妯″紡
- const index = mockData.findIndex(item => item.id === form.value.id);
- if (index > -1) {
- mockData[index] = { ...form.value };
- }
- ElMessage.success("淇敼鎴愬姛");
+ updateNotice(form.value).then(res => {
+ ElMessage.success("淇敼鎴愬姛");
+ resetTable()
+ })
} else {
// 鏂板妯″紡
- const newId = Math.max(...mockData.map(item => item.id)) + 1;
- const newNotice = {
- ...form.value,
- id: newId,
- createTime: new Date().toLocaleString()
- };
- mockData.unshift(newNotice);
- ElMessage.success("鏂板鎴愬姛");
+ addNotice(form.value).then(res => {
+ ElMessage.success("鏂板鎴愬姛");
+ resetTable()
+ })
}
dialogVisible.value = false;
}
+ });
+};
+
+// 鍒濆鍖栨煇涓被鍨嬬殑鍒嗛〉鏁版嵁
+const initNoticePage = (typeId) => {
+ if (!noticePagesMap.value[typeId]) {
+ noticePagesMap.value[typeId] = {
+ total: 0,
+ current: 1,
+ size: 10
+ };
+ }
+ if (!noticesMap.value[typeId]) {
+ noticesMap.value[typeId] = [];
+ }
+};
+
+// 鑾峰彇鏌愪釜绫诲瀷鐨勯�氱煡鍒楄〃
+const getNoticesByType = (typeId) => {
+ return noticesMap.value[typeId] || [];
+};
+
+// 鑾峰彇鏌愪釜绫诲瀷鐨勫垎椤垫暟鎹�
+const getNoticePageByType = (typeId) => {
+ return noticePagesMap.value[typeId] || { total: 0, current: 1, size: 10 };
+};
+
+// 鑾峰彇鏌愪釜绫诲瀷鐨勬暟閲�
+const getNoticeCountByType = (typeId) => {
+ return getNoticePageByType(typeId).total || 0;
+};
+
+// 鑾峰彇鏌愪釜绫诲瀷鐨勯�氱煡鏁版嵁
+const fetchNoticesByType = (typeId) => {
+ initNoticePage(typeId);
+ const pageData = noticePagesMap.value[typeId];
+ listNotice({...pageData, type: typeId}).then(res => {
+ if (res.code === 200) {
+ noticesMap.value[typeId] = res.data.records || [];
+ noticePagesMap.value[typeId].total = res.data.total || 0;
+ }
+ });
+};
+
+// 澶勭悊鍒嗛〉鍙樺寲
+const handleNoticeCurrentChange = (typeId, val) => {
+ initNoticePage(typeId);
+ noticePagesMap.value[typeId].size = val.limit;
+ noticePagesMap.value[typeId].current = val.page;
+ fetchNoticesByType(typeId);
+};
+
+// 澶勭悊 tab 鍒囨崲
+const handleNoticeTypeTabChange = (tabName) => {
+ activeNoticeTypeTab.value = tabName;
+ const typeId = Number(tabName);
+ fetchNoticesByType(typeId);
+};
+
+const resetTable = () => {
+ // 閲嶇疆鎵�鏈夌被鍨嬬殑鍒嗛〉骞堕噸鏂拌幏鍙栨暟鎹�
+ noticeTypeList.value.forEach(type => {
+ initNoticePage(type.id);
+ noticePagesMap.value[type.id].current = 1;
+ noticePagesMap.value[type.id].size = 10;
+ fetchNoticesByType(type.id);
});
};
@@ -488,9 +548,187 @@
formRef.value?.resetFields();
};
+// 鍏憡绫诲瀷閰嶇疆鐩稿叧鏂规硶
+const openNoticeTypeDialog = () => {
+ noticeTypeDialogVisible.value = true;
+ fetchNoticeTypeList();
+};
+
+const fetchNoticeTypeList = () => {
+ return listNoticeType().then(res => {
+ if (res.code === 200) {
+ noticeTypeList.value = res.data.map(item => ({
+ ...item,
+ editing: false
+ }));
+
+ // 妫�鏌ヨ矾鐢卞弬鏁颁腑鐨� type
+ const routeType = route.query.type;
+ let targetTypeId = null;
+
+ if (routeType) {
+ // 濡傛灉璺敱鍙傛暟涓湁 type锛屾煡鎵惧搴旂殑绫诲瀷
+ const typeId = Number(routeType);
+ const foundType = noticeTypeList.value.find(item => item.id === typeId);
+ if (foundType) {
+ targetTypeId = typeId;
+ }
+ }
+
+ // 濡傛灉鏈夌被鍨嬫暟鎹�
+ if (noticeTypeList.value.length > 0) {
+ // 濡傛灉璺敱鍙傛暟鎸囧畾浜嗙被鍨嬩笖瀛樺湪锛屼娇鐢ㄨ矾鐢卞弬鏁扮殑绫诲瀷
+ // 鍚﹀垯濡傛灉娌℃湁閫変腑 tab锛岄粯璁ら�変腑绗竴涓�
+ if (targetTypeId !== null) {
+ activeNoticeTypeTab.value = String(targetTypeId);
+ fetchNoticesByType(targetTypeId);
+ } else if (!activeNoticeTypeTab.value) {
+ activeNoticeTypeTab.value = String(noticeTypeList.value[0].id);
+ fetchNoticesByType(noticeTypeList.value[0].id);
+ }
+ }
+ }
+ });
+};
+
+const handleAddNoticeType = () => {
+ const newItem = {
+ id: undefined,
+ noticeType: '',
+ editing: true
+ };
+ noticeTypeList.value.push(newItem);
+};
+
+const handleEditNoticeType = (row) => {
+ // 淇濆瓨鍘熷鍊�
+ row.originalNoticeType = row.noticeType;
+ row.editing = true;
+};
+
+const handleSaveNoticeType = (row) => {
+ if (!row.noticeType || row.noticeType.trim() === '') {
+ ElMessage.warning('鍏憡绫诲瀷涓嶈兘涓虹┖');
+ return;
+ }
+
+ const data = {
+ noticeType: row.noticeType.trim()
+ };
+
+ if (row.id) {
+ // 缂栬緫妯″紡 - 鍏堝垹闄ゅ啀娣诲姞锛堝洜涓哄彧鏈� add 鍜� del 鎺ュ彛锛�
+ delNoticeType(row.id).then(res => {
+ if (res.code === 200) {
+ addNoticeType(data).then(addRes => {
+ if (addRes.code === 200) {
+ ElMessage.success('缂栬緫鎴愬姛');
+ row.editing = false;
+ delete row.originalNoticeType;
+ fetchNoticeTypeList().then(() => {
+ // 濡傛灉褰撳墠閫変腑鐨勭被鍨嬭缂栬緫锛岄渶瑕侀噸鏂拌幏鍙栨暟鎹�
+ if (activeNoticeTypeTab.value === String(row.id)) {
+ fetchNoticesByType(addRes.data?.id || row.id);
+ }
+ });
+ }
+ });
+ }
+ });
+ } else {
+ // 鏂板妯″紡
+ addNoticeType(data).then(res => {
+ if (res.code === 200) {
+ ElMessage.success('鏂板鎴愬姛');
+ row.editing = false;
+ fetchNoticeTypeList();
+ }
+ });
+ }
+};
+
+const handleDeleteNoticeType = (row) => {
+ // 濡傛灉娌℃湁id锛岃鏄庢槸鏂板浣嗘湭淇濆瓨鐨勮锛岀洿鎺ヤ粠鍓嶇鍒犻櫎
+ if (!row.id) {
+ const index = noticeTypeList.value.indexOf(row);
+ if (index > -1) {
+ noticeTypeList.value.splice(index, 1);
+ }
+ return;
+ }
+
+ // 濡傛灉鏈塱d锛岃皟鐢ㄥ悗绔帴鍙ｅ垹闄�
+ ElMessageBox.confirm(
+ "纭鍒犻櫎杩欎釜鍏憡绫诲瀷鍚楋紵",
+ "鎻愮ず",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ }
+ ).then(() => {
+ delNoticeType(row.id).then(res => {
+ if (res.code === 200) {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ // 濡傛灉鍒犻櫎鐨勬槸褰撳墠閫変腑鐨勭被鍨嬶紝鍒囨崲鍒扮涓�涓被鍨�
+ if (activeNoticeTypeTab.value === String(row.id)) {
+ fetchNoticeTypeList().then(() => {
+ if (noticeTypeList.value.length > 0) {
+ activeNoticeTypeTab.value = String(noticeTypeList.value[0].id);
+ fetchNoticesByType(noticeTypeList.value[0].id);
+ } else {
+ activeNoticeTypeTab.value = '';
+ }
+ });
+ } else {
+ fetchNoticeTypeList();
+ }
+ }
+ });
+ });
+};
+
+const handleCancelEdit = (row) => {
+ if (!row.id) {
+ // 濡傛灉鏄柊澧炰絾鏈繚瀛樼殑琛岋紝绉婚櫎瀹�
+ const index = noticeTypeList.value.indexOf(row);
+ if (index > -1) {
+ noticeTypeList.value.splice(index, 1);
+ }
+ } else {
+ // 濡傛灉鏄紪杈戜腑鐨勮锛屽彇娑堢紪杈戠姸鎬佸苟鎭㈠鍘熷��
+ row.editing = false;
+ if (row.originalNoticeType !== undefined) {
+ row.noticeType = row.originalNoticeType;
+ delete row.originalNoticeType;
+ }
+ }
+};
+
+const handleNoticeTypeDialogClose = () => {
+ // 鍏抽棴寮规鏃讹紝鍙栨秷鎵�鏈夌紪杈戠姸鎬�
+ noticeTypeList.value.forEach(item => {
+ if (item.editing && !item.id) {
+ // 濡傛灉鏄柊澧炰絾鏈繚瀛樼殑琛岋紝绉婚櫎瀹�
+ const index = noticeTypeList.value.indexOf(item);
+ if (index > -1) {
+ noticeTypeList.value.splice(index, 1);
+ }
+ } else if (item.editing) {
+ // 濡傛灉鏄紪杈戜腑鐨勮锛屽彇娑堢紪杈戠姸鎬佸苟鎭㈠鍘熷��
+ item.editing = false;
+ if (item.originalNoticeType !== undefined) {
+ item.noticeType = item.originalNoticeType;
+ delete item.originalNoticeType;
+ }
+ }
+ });
+};
+
// 鐢熷懡鍛ㄦ湡
onMounted(() => {
- // 椤甸潰鍔犺浇瀹屾垚
+ // 鍏堣幏鍙栧叕鍛婄被鍨嬪垪琛紝鐒跺悗鏍规嵁绫诲瀷鑾峰彇閫氱煡鏁版嵁
+ fetchNoticeTypeList();
});
</script>
@@ -569,12 +807,16 @@
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
-.holiday-card {
- border-left-color: #67c23a;
+.notice-icon {
+ color: #409eff;
+ margin-right: 8px;
+ font-size: 18px;
}
-.maintenance-card {
- border-left-color: #e6a23c;
+.tab-count {
+ color: #909399;
+ font-size: 12px;
+ margin-left: 4px;
}
.urgent {
@@ -598,17 +840,6 @@
flex: 1;
}
-.holiday-icon {
- color: #67c23a;
- margin-right: 8px;
- font-size: 18px;
-}
-
-.maintenance-icon {
- color: #e6a23c;
- margin-right: 8px;
- font-size: 18px;
-}
.card-actions {
display: flex;
@@ -645,13 +876,35 @@
font-weight: 500;
}
-.priority-1 { background: #f0f9ff; color: #0369a1; }
-.priority-2 { background: #fef3c7; color: #d97706; }
-.priority-3 { background: #fef2f2; color: #dc2626; }
+.priority-1 {
+ background: #f0f9ff;
+ color: #0369a1;
+}
-.status-0 { background: #f3f4f6; color: #6b7280; }
-.status-1 { background: #d1fae5; color: #059669; }
-.status-2 { background: #fef3c7; color: #d97706; }
+.priority-2 {
+ background: #fef3c7;
+ color: #d97706;
+}
+
+.priority-3 {
+ background: #fef2f2;
+ color: #dc2626;
+}
+
+.status-0 {
+ background: #f3f4f6;
+ color: #6b7280;
+}
+
+.status-1 {
+ background: #d1fae5;
+ color: #059669;
+}
+
+.status-2 {
+ background: #fef3c7;
+ color: #d97706;
+}
.card-info {
display: flex;
@@ -664,6 +917,10 @@
.creator {
font-weight: 500;
margin-bottom: 2px;
+}
+
+.expiration {
+ margin-top: 2px;
}
.card-remark {
@@ -687,17 +944,27 @@
text-align: right;
}
+.notice-type-container {
+ padding: 10px 0;
+}
+
+.notice-type-header {
+ margin-bottom: 15px;
+ display: flex;
+ justify-content: flex-end;
+}
+
/* 鍝嶅簲寮忚璁� */
@media (max-width: 768px) {
.notice-cards {
grid-template-columns: 1fr;
}
-
+
.search_form {
flex-direction: column;
gap: 15px;
}
-
+
.search_form > div {
width: 100%;
}
--
Gitblit v1.9.3