开发完成物业公告问题

wuxw
1 parent 70492aa4
Showing 15 changed files with 1118 additions and 4 deletions
src/api/oa/addNoticeViewApi.js
src/api/oa/editNoticeViewApi.js
src/api/oa/noticeDetailApi.js
src/api/oa/noticeManageApi.js
src/components/oa/deleteNotice.vue
src/i18n/oaI18n.js
src/router/oaRouter.js
src/views/oa/addNoticeViewLang.js
src/views/oa/addNoticeViewList.vue
src/views/oa/editNoticeViewLang.js
src/views/oa/editNoticeViewList.vue
src/views/oa/noticeDetailLang.js
src/views/oa/noticeDetailList.vue
src/views/oa/noticeManageLang.js
src/views/oa/noticeManageList.vue
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 保存公告信息
+export function saveNotice(data) {
+  return new Promise((resolve, reject) => {
+    // 确保communityId存在
+    if (!data.communityId) {
+      data.communityId = getCommunityId()
+    }
+    
+    request({
+      url: '/notice.saveNotice',
+      method: 'post',
+      data
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传图片
+export function uploadImage(file) {
+  const formData = new FormData()
+  formData.append('uploadFile', file)
+  formData.append('communityId', getCommunityId())
+
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadImage',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取公告详情
+export function getNoticeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/notice.listNotices',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新公告
+export function updateNotice(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/notice.updateNotice',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传图片
+export function uploadNoticeImage(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: 'uploadImage',
+      method: 'post',
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * 获取公告详情
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function getNoticeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/notice.listNotices',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * 获取公告列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function listNotices(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/notice.listNotices',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 删除公告
+ * @param {Object} data 删除参数
+ * @returns {Promise}
+ */
+export function deleteNotice(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/notice.deleteNotice',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取字典数据
+ * @param {String} dictType 字典类型
+ * @param {String} dictName 字典名称
+ * @returns {Promise}
+ */
+export function getDict(dictType, dictName) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dict.getDict',
+      method: 'get',
+      params: {
+        dictType,
+        dictName
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('noticeManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div style="text-align:center">
+      <p>{{ $t('noticeManage.delete.confirmText') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('noticeManage.delete.cancelText') }}
+      </el-button>
+      <el-button type="primary" @click="handleConfirm">
+        {{ $t('noticeManage.delete.confirmButton') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteNotice } from '@/api/oa/noticeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteNotice',
+  data() {
+    return {
+      visible: false,
+      currentNotice: null,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(notice) {
+      this.currentNotice = notice
+      this.visible = true
+    },
+    async handleConfirm() {
+      try {
+        const params = {
+          ...this.currentNotice,
+          communityId: this.communityId
+        }
+        await deleteNotice(params)
+        this.$message.success(this.$t('noticeManage.delete.successMessage'))
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        this.$message.error(this.$t('noticeManage.delete.errorMessage'))
+      }
+    },
+    handleClose() {
+      this.currentNotice = null
+    }
+  }
+}
+</script>
 \ No newline at end of file
 import { messages as activitiesTypeManageMessages } from '../views/oa/activitiesTypeManageLang'
 import { messages as activitiesManageMessages } from '../views/oa/activitiesManageLang'
+import { messages as noticeManageMessages } from '../views/oa/noticeManageLang'
+import { messages as addNoticeViewMessages } from '../views/oa/addNoticeViewLang'
+import { messages as editNoticeViewMessages } from '../views/oa/editNoticeViewLang'
+import { messages as noticeDetailMessages } from '../views/oa/noticeDetailLang'
 export const messages ={
     en:{
         ...activitiesTypeManageMessages.en,
         ...activitiesManageMessages.en,
+        ...noticeManageMessages.en,
+        ...addNoticeViewMessages.en,
+        ...editNoticeViewMessages.en,
+        ...noticeDetailMessages.en,
     },
     zh:{    
         ...activitiesTypeManageMessages.zh, 
-        ...activitiesManageMessages.zh,  
+        ...activitiesManageMessages.zh,
+        ...noticeManageMessages.zh,
+        ...addNoticeViewMessages.zh,
+        ...editNoticeViewMessages.zh,
+        ...noticeDetailMessages.zh,
     }
 }
 \ No newline at end of file
@@ -5,8 +5,28 @@ export default [
         component: () => import('@/views/oa/activitiesTypeManageList.vue')
     },
     {
-        path:'/pages/property/activitiesManage',
-        name:'/pages/property/activitiesManage',
+        path: '/pages/property/activitiesManage',
+        name: '/pages/property/activitiesManage',
         component: () => import('@/views/oa/activitiesManageList.vue')
-        },
+    },
+    {
+        path: '/pages/common/noticeManage',
+        name: '/pages/common/noticeManage',
+        component: () => import('@/views/oa/noticeManageList.vue')
+    },
+    {
+        path: '/views/oa/addNoticeView',
+        name: '/views/oa/addNoticeView',
+        component: () => import('@/views/oa/addNoticeViewList.vue')
+    },
+    {
+        path: '/views/oa/editNoticeView',
+        name: '/views/oa/editNoticeView',
+        component: () => import('@/views/oa/editNoticeViewList.vue')
+    },
+    {
+        path: '/views/oa/noticeDetail',
+        name: '/views/oa/noticeDetail',
+        component: () => import('@/views/oa/noticeDetailList.vue')
+    },
 ]
 \ No newline at end of file
+export const messages = {
+  en: {
+    addNoticeView: {
+      title: 'New Notice',
+      titleLabel: 'Title',
+      titlePlaceholder: 'Required, please fill in the title',
+      noticeTypeLabel: 'Notice Type',
+      noticeTypePlaceholder: 'Required, please select notice type',
+      noticeTypeOption1: 'Owner Notification (WeChat notification to followers)',
+      noticeTypeOption2: 'Staff Notification',
+      contentLabel: 'Notice Content',
+      contentPlaceholder: 'Required, please enter notice content',
+      submit: 'Submit',
+      cancel: 'Cancel',
+      validate: {
+        title: 'Title cannot be empty',
+        noticeType: 'Notice type cannot be empty',
+        content: 'Notice content cannot be empty'
+      },
+      saveSuccess: 'Added successfully',
+      saveError: 'Failed to add notice'
+    }
+  },
+  zh: {
+    addNoticeView: {
+      title: '新公告',
+      titleLabel: '标题',
+      titlePlaceholder: '必填，请填写标题',
+      noticeTypeLabel: '公告类型',
+      noticeTypePlaceholder: '必填，请选择公告类型',
+      noticeTypeOption1: '业主通知(微信通知关注用户)',
+      noticeTypeOption2: '员工通知',
+      contentLabel: '公告内容',
+      contentPlaceholder: '必填，请输入公告内容',
+      submit: '提交',
+      cancel: '取消',
+      validate: {
+        title: '标题不能为空',
+        noticeType: '公告类型不能为空',
+        content: '公告内容不能为空'
+      },
+      saveSuccess: '添加成功',
+      saveError: '添加公告失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="add-notice-view-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('addNoticeView.title') }}</span>
+      </div>
+
+      <el-form ref="form" :model="addNoticeViewInfo" label-width="120px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('addNoticeView.titleLabel')" prop="title">
+              <el-input v-model="addNoticeViewInfo.title" :placeholder="$t('addNoticeView.titlePlaceholder')" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('addNoticeView.noticeTypeLabel')" prop="noticeTypeCd">
+              <el-select v-model="addNoticeViewInfo.noticeTypeCd" :placeholder="$t('addNoticeView.noticeTypePlaceholder')"
+                style="width:100%">
+                <el-option :label="$t('addNoticeView.noticeTypeOption1')" value="1000" />
+                <el-option :label="$t('addNoticeView.noticeTypeOption2')" value="1001" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('addNoticeView.contentLabel')" prop="context">
+              <div class="editor-wrapper">
+                <rich-text-editor ref="richTextEditor" v-model="addNoticeViewInfo.context" />
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24" class="button-group">
+            
+            <el-button type="warning" @click="closeNoticeInfo">
+              <i class="el-icon-close"></i>
+              {{ $t('addNoticeView.cancel') }}
+            </el-button>
+            <el-button type="primary" @click="saveNoticeInfo">
+              <i class="el-icon-check"></i>
+              {{ $t('addNoticeView.submit') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { saveNotice } from '@/api/oa/addNoticeViewApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import RichTextEditor from "@/components/editor/RichTextEditor";
+
+export default {
+  name: 'AddNoticeViewList',
+  components: {
+    RichTextEditor
+  },
+  data() {
+    return {
+      addNoticeViewInfo: {
+        title: '',
+        noticeTypeCd: '',
+        context: '',
+        startTime: '',
+        endTime: '',
+        objType: '',
+        objId: '',
+        floorId: '',
+        unitId: '',
+        roomId: '',
+        state: '3000',
+        isAll: 'N'
+      },
+    }
+  },
+  created() {
+    this.addNoticeViewInfo.communityId = getCommunityId()
+  },
+  methods: {
+    onEditorChange({ quill, html, text }) {
+      console.log('editor change!', quill, html, text)
+      this.addNoticeViewInfo.context = html
+    },
+    validateForm() {
+      let isValid = true
+      if (!this.addNoticeViewInfo.title) {
+        this.$message.error(this.$t('addNoticeView.validate.title'))
+        isValid = false
+      }
+      if (!this.addNoticeViewInfo.noticeTypeCd) {
+        this.$message.error(this.$t('addNoticeView.validate.noticeType'))
+        isValid = false
+      }
+      if (!this.addNoticeViewInfo.context) {
+        this.$message.error(this.$t('addNoticeView.validate.content'))
+        isValid = false
+      }
+      return isValid
+    },
+    async saveNoticeInfo() {
+      if (!this.validateForm()) {
+        return
+      }
+
+      try {
+        const response = await saveNotice(this.addNoticeViewInfo)
+        if (response.code === 0) {
+          this.$message.success(this.$t('addNoticeView.saveSuccess'))
+          this.$router.go(-1)
+        } else {
+          this.$message.error(response.msg)
+        }
+      } catch (error) {
+        this.$message.error(this.$t('addNoticeView.saveError'))
+      }
+    },
+    closeNoticeInfo() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-notice-view-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .button-group {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .editor-wrapper {
+    height: 300px;
+    margin-bottom: 20px;
+
+    .ql-container {
+      height: 250px;
+    }
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    editNoticeView: {
+      title: 'Edit Notice',
+      titleLabel: 'Title',
+      titlePlaceholder: 'Required, please enter title',
+      contentLabel: 'Content',
+      contentPlaceholder: 'Required, please enter notice content',
+      validate: {
+        titleRequired: 'Title cannot be empty',
+        titleLength: 'Title must be between 4 to 100 characters',
+        contentRequired: 'Content cannot be empty',
+        contentMaxLength: 'Content cannot exceed 10000 characters',
+        noticeIdRequired: 'Notice ID cannot be empty'
+      },
+      fetchError: 'Failed to fetch notice details',
+      updateSuccess: 'Notice updated successfully',
+      updateError: 'Failed to update notice'
+    }
+  },
+  zh: {
+    editNoticeView: {
+      title: '修改公告',
+      titleLabel: '标题',
+      titlePlaceholder: '必填，请填写标题',
+      contentLabel: '公告内容',
+      contentPlaceholder: '必填，请输入公告内容',
+      validate: {
+        titleRequired: '标题不能为空',
+        titleLength: '标题必须在4至100字符之间',
+        contentRequired: '公告内容不能为空',
+        contentMaxLength: '公告内容不能超过10000个字',
+        noticeIdRequired: '公告ID不能为空'
+      },
+      fetchError: '获取公告详情失败',
+      updateSuccess: '公告修改成功',
+      updateError: '公告修改失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="edit-notice-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('editNoticeView.title') }}</span>
+      </div>
+
+      <el-form ref="form" :model="editNoticeViewInfo" label-width="120px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('editNoticeView.titleLabel')" prop="title">
+              <el-input v-model="editNoticeViewInfo.title" :placeholder="$t('editNoticeView.titlePlaceholder')"
+                clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('editNoticeView.contentLabel')" prop="context">
+              <div class="editor-wrapper">
+                <rich-text-editor ref="richTextEditor" v-model="editNoticeViewInfo.context" />
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24" class="button-group">
+            
+            <el-button type="warning" @click="closeEditNoticeInfo" style="margin-left: 20px;">
+              <i class="el-icon-close"></i>
+              {{ $t('common.cancel') }}
+            </el-button>
+            <el-button type="primary" @click="editNotice">
+              <i class="el-icon-check"></i>
+              {{ $t('common.save') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { updateNotice, getNoticeDetail } from '@/api/oa/editNoticeViewApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import RichTextEditor from "@/components/editor/RichTextEditor";
+
+
+export default {
+  name: 'EditNoticeViewList',
+  data() {
+    return {
+      editNoticeViewInfo: {
+        noticeId: '',
+        title: '',
+        noticeTypeCd: '',
+        context: '',
+        startTime: '',
+        endTime: '',
+        communityId: ''
+      }
+    }
+  },
+  components: {
+    RichTextEditor
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      this.editNoticeViewInfo.noticeId = this.$route.query.noticeId
+      this.editNoticeViewInfo.communityId = getCommunityId()
+      await this._initEditNoticeInfo()
+    },
+    async _initEditNoticeInfo() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          communityId: this.editNoticeViewInfo.communityId,
+          noticeId: this.editNoticeViewInfo.noticeId
+        }
+        const { notices } = await getNoticeDetail(params)
+        this.editNoticeViewInfo = { ...notices[0] }
+        this.$refs.richTextEditor.setContent(notices[0].context)
+
+      } catch (error) {
+        this.$message.error(this.$t('editNoticeView.fetchError'))
+      }
+    },
+    editNoticeValidate() {
+
+
+      return this.$refs.form.validate(valid => {
+        if (!valid) {
+          return false
+        }
+        return true
+      })
+    },
+    async editNotice() {
+
+      try {
+        const { code, msg } = await updateNotice(this.editNoticeViewInfo)
+        if (code === 0) {
+          this.$message.success(this.$t('editNoticeView.updateSuccess'))
+          this.closeEditNoticeInfo()
+        } else {
+          this.$message.error(msg)
+        }
+      } catch (error) {
+        this.$message.error(this.$t('editNoticeView.updateError'))
+      }
+    },
+    closeEditNoticeInfo() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-notice-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .editor-wrapper {
+    width: 100%;
+  }
+
+  .button-group {
+    text-align: right;
+    margin-top: 20px;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    noticeDetail: {
+      title: 'Notice Details',
+      back: 'Back',
+      titleLabel: 'Title',
+      noticeType: 'Notice Type',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      createTime: 'Create Time',
+      content: 'Content',
+      fetchError: 'Failed to fetch notice details'
+    }
+  },
+  zh: {
+    noticeDetail: {
+      title: '公告详情',
+      back: '返回',
+      titleLabel: '标题',
+      noticeType: '公告类型',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      createTime: '创建时间',
+      content: '公告内容',
+      fetchError: '获取公告详情失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="notice-detail-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('noticeDetail.title') }}</span>
+        <el-button type="primary" size="small" @click="_goBack">
+          <i class="el-icon-close"></i>
+          {{ $t('noticeDetail.back') }}
+        </el-button>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card shadow="never">
+            <el-form label-position="left" label-width="120px">
+              <el-form-item :label="$t('noticeDetail.titleLabel')">
+                <el-input v-model="noticeDetailInfo.title" readonly class="readonly-input"></el-input>
+              </el-form-item>
+
+              <el-form-item :label="$t('noticeDetail.noticeType')">
+                <el-input v-model="noticeDetailInfo.noticeTypeCdName" readonly class="readonly-input"></el-input>
+              </el-form-item>
+
+              <el-form-item :label="$t('noticeDetail.startTime')">
+                <el-input v-model="noticeDetailInfo.startTime" readonly class="readonly-input"></el-input>
+              </el-form-item>
+
+              <el-form-item :label="$t('noticeDetail.endTime')">
+                <el-input v-model="noticeDetailInfo.endTime" readonly class="readonly-input"></el-input>
+              </el-form-item>
+
+              <el-form-item :label="$t('noticeDetail.createTime')">
+                <el-input v-model="noticeDetailInfo.createTime" readonly class="readonly-input"></el-input>
+              </el-form-item>
+
+              <el-form-item :label="$t('noticeDetail.content')">
+                <div class="notice-content" v-html="noticeDetailInfo.context"></div>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getNoticeDetail } from '@/api/oa/noticeDetailApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'NoticeDetailList',
+  data() {
+    return {
+      noticeDetailInfo: {
+        noticeId: '',
+        title: '',
+        context: '',
+        startTime: '',
+        endTime: '',
+        noticeTypeCd: '',
+        noticeTypeCdName: '',
+        createTime: ''
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    const noticeId = this.$route.query.noticeId
+    if (noticeId) {
+      this.noticeDetailInfo.noticeId = noticeId
+      this._listNotices()
+    }
+  },
+  methods: {
+    async _listNotices() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          communityId: this.communityId,
+          noticeId: this.noticeDetailInfo.noticeId
+        }
+        const { notices } = await getNoticeDetail(params)
+        if (notices && notices.length > 0) {
+          // 过滤XSS攻击
+          notices[0].context = this.filterXSS(notices[0].context)
+          this.noticeDetailInfo =notices[0]
+        }
+      } catch (error) {
+        this.$message.error(this.$t('noticeDetail.fetchError'))
+      }
+    },
+    filterXSS(html) {
+      // 这里应该实现XSS过滤逻辑
+      // 实际项目中应该使用专门的XSS过滤库
+      return html || ''
+    },
+    _goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-detail-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+
+    .float-right {
+      float: right;
+    }
+  }
+
+  .readonly-input {
+    ::v-deep .el-input__inner {
+      background-color: #f5f7fa;
+      border-color: #e4e7ed;
+      color: #606266;
+      cursor: not-allowed;
+    }
+  }
+
+  .notice-content {
+    padding: 10px;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    min-height: 100px;
+    background-color: #f5f7fa;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    noticeManage: {
+      search: {
+        title: 'Search Conditions',
+        noticeTypePlaceholder: 'Please select notice type',
+        ownerNotice: 'Owner Notice',
+        staffNotice: 'Staff Notice',
+        statePlaceholder: 'Please select status',
+        pendingNotice: 'Pending Notice',
+        notifying: 'Notifying',
+        noticeComplete: 'Notice Complete',
+        titlePlaceholder: 'Please enter notice title',
+        startTimePlaceholder: 'Required, please select start time',
+        endTimePlaceholder: 'Required, please select end time'
+      },
+      list: {
+        title: 'Notice Information'
+      },
+      table: {
+        noticeId: 'Notice ID',
+        title: 'Title',
+        noticeType: 'Notice Type',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        state: 'Status',
+        noticeRange: 'Notice Range'
+      },
+      delete: {
+        title: 'Please confirm your operation',
+        confirmText: 'Confirm to delete this notice?',
+        cancelText: 'Cancel',
+        confirmButton: 'Confirm Delete',
+        successMessage: 'Delete successfully',
+        errorMessage: 'Delete failed'
+      },
+      fetchError: 'Failed to fetch notice data'
+    }
+  },
+  zh: {
+    noticeManage: {
+      search: {
+        title: '查询条件',
+        noticeTypePlaceholder: '请选择公告类型',
+        ownerNotice: '业主通知',
+        staffNotice: '员工通知',
+        statePlaceholder: '请选择状态',
+        pendingNotice: '待通知',
+        notifying: '通知中',
+        noticeComplete: '通知完成',
+        titlePlaceholder: '请输入公告标题',
+        startTimePlaceholder: '必填，请填写开始时间',
+        endTimePlaceholder: '必填，请填写结束时间'
+      },
+      list: {
+        title: '公告信息'
+      },
+      table: {
+        noticeId: '公告ID',
+        title: '标题',
+        noticeType: '公告类型',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        state: '状态',
+        noticeRange: '通知范围'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirmText: '确定删除公告？',
+        cancelText: '点错了',
+        confirmButton: '确认删除',
+        successMessage: '删除成功',
+        errorMessage: '删除失败'
+      },
+      fetchError: '获取公告数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="notice-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('noticeManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-select v-model="searchForm.noticeTypeCd" :placeholder="$t('noticeManage.search.noticeTypePlaceholder')"
+            style="width:100%">
+            <el-option :label="$t('noticeManage.search.noticeTypePlaceholder')" value="" />
+            <el-option :label="$t('noticeManage.search.ownerNotice')" value="1000" />
+            <el-option :label="$t('noticeManage.search.staffNotice')" value="1001" />
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-select v-model="searchForm.state" :placeholder="$t('noticeManage.search.statePlaceholder')"
+            style="width:100%">
+            <el-option :label="$t('noticeManage.search.statePlaceholder')" value="" />
+            <el-option :label="$t('noticeManage.search.pendingNotice')" value="1000" />
+            <el-option :label="$t('noticeManage.search.notifying')" value="2000" />
+            <el-option :label="$t('noticeManage.search.noticeComplete')" value="3000" />
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-input v-model="searchForm.title" :placeholder="$t('noticeManage.search.titlePlaceholder')" />
+        </el-col>
+        <el-col :span="4">
+          <el-date-picker v-model="searchForm.startTime" type="datetime"
+            :placeholder="$t('noticeManage.search.startTimePlaceholder')" style="width:100%" />
+        </el-col>
+        <el-col :span="4">
+          <el-date-picker v-model="searchForm.endTime" type="datetime"
+            :placeholder="$t('noticeManage.search.endTimePlaceholder')" style="width:100%" />
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 公告列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('noticeManage.list.title') }}</span>
+        <el-button type="primary" size="small" style="float:right" @click="handleAdd">
+          {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width:100%">
+        <el-table-column prop="noticeId" :label="$t('noticeManage.table.noticeId')" align="center" />
+        <el-table-column prop="title" :label="$t('noticeManage.table.title')" align="center" />
+        <el-table-column prop="noticeTypeCdName" :label="$t('noticeManage.table.noticeType')" align="center" />
+        <el-table-column prop="startTime" :label="$t('noticeManage.table.startTime')" align="center" />
+        <el-table-column prop="endTime" :label="$t('noticeManage.table.endTime')" align="center" />
+        <el-table-column prop="stateName" :label="$t('noticeManage.table.state')" align="center" />
+        <el-table-column prop="objName" :label="$t('noticeManage.table.noticeRange')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleDetail(scope.row)">
+              {{ $t('common.detail') }}
+            </el-button>
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button v-if="scope.row.state !== '2000'" size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 删除确认对话框 -->
+    <delete-notice ref="deleteNotice" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listNotices } from '@/api/oa/noticeManageApi'
+import DeleteNotice from '@/components/oa/deleteNotice'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'NoticeManageList',
+  components: {
+    DeleteNotice
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        title: '',
+        noticeTypeCd: '',
+        state: '',
+        startTime: '',
+        endTime: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ...this.searchForm,
+          communityId: this.communityId
+        }
+        const { notices, total } = await listNotices(params)
+        this.tableData = notices
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('noticeManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        title: '',
+        noticeTypeCd: '',
+        state: '',
+        startTime: '',
+        endTime: ''
+      }
+      this.getList()
+    },
+    handleAdd() {
+      this.$router.push('/views/oa/addNoticeView')
+    },
+    handleEdit(row) {
+      this.$router.push(`/views/oa/editNoticeView?noticeId=${row.noticeId}`)
+    },
+    handleDetail(row) {
+      this.$router.push(`/views/oa/noticeDetail?noticeId=${row.noticeId}`)
+    },
+    handleDelete(row) {
+      this.$refs.deleteNotice.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-manage-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-row {
+      margin-bottom: 20px;
+    }
+  }
+
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
 \ No newline at end of file