From 2768763a2c3cf7d1234a910e9fc0ab55b95a1f7c Mon Sep 17 00:00:00 2001
From: lvys <huxin@123.com>
Date: Fri, 6 Jun 2025 21:54:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=AE=A2=E6=B5=81=E9=A2=84=E8=AD=A6?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E7=95=8C=E9=9D=A2UI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/notice/index.vue         | 384 ++++++++++++++++++
 1 file changed, 384 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/notice/index.vue

diff --git a/Dkl-vue3-ui-DP/src/views/system/notice/index.vue b/Dkl-vue3-ui-DP/src/views/system/notice/index.vue
new file mode 100644
index 0000000..53ef7dd
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/notice/index.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+    >
+      <el-row>
+        <el-form-item label="公告标题" prop="noticeTitle">
+          <el-input
+            v-model="queryParams.noticeTitle"
+            placeholder="请输入公告标题"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="操作人员" prop="createBy">
+          <el-input
+            v-model="queryParams.createBy"
+            placeholder="请输入操作人员"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="类型" prop="noticeType">
+          <el-select
+            v-model="queryParams.noticeType"
+            placeholder="公告类型"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="dict in sys_notice_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-row>
+      <el-row class="dfjb">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button
+              v-hasPermi="['system:notice:add']"
+              type="primary"
+              @click="handleAdd"
+              class="circle-plus-btn"
+            >
+              新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate"
+              v-hasPermi="['system:notice:edit']"
+              >修改</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="['system:notice:remove']"
+              >删除</el-button
+            >
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <div class="tablebox">
+      <el-table
+        v-loading="loading"
+        :data="noticeList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+          label="序号"
+          align="center"
+          prop="noticeId"
+          width="100"
+        />
+        <el-table-column
+          label="公告标题"
+          align="center"
+          prop="noticeTitle"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="公告类型"
+          align="center"
+          prop="noticeType"
+          width="100"
+        >
+          <template #default="scope">
+            <dict-tag
+              :options="sys_notice_type"
+              :value="scope.row.noticeType"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status" width="100">
+          <template #default="scope">
+            <dict-tag :options="sys_notice_status" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建者"
+          align="center"
+          prop="createBy"
+          width="100"
+        />
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          width="100"
+        >
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              icon="Edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:notice:edit']"
+              >修改</el-button
+            >
+            <el-button
+              link
+              type="primary"
+              icon="Delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:notice:remove']"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 添加或修改公告对话框 -->
+    <el-dialog
+      :style="{ height: '550px' }"
+      :title="title"
+      v-model="open"
+      width="780px"
+      append-to-body
+    >
+      <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题" prop="noticeTitle">
+              <el-input
+                v-model="form.noticeTitle"
+                placeholder="请输入公告标题"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公告类型" prop="noticeType">
+              <el-select v-model="form.noticeType" placeholder="请选择">
+                <el-option
+                  v-for="dict in sys_notice_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in sys_notice_status"
+                  :key="dict.value"
+                  :value="dict.value"
+                  >{{ dict.label }}</el-radio
+                >
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <editor v-model="form.noticeContent" :min-height="192" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Notice">
+import {
+  listNotice,
+  getNotice,
+  delNotice,
+  addNotice,
+  updateNotice,
+} from "@/api/system/notice";
+
+const { proxy } = getCurrentInstance();
+const { sys_notice_status, sys_notice_type } = proxy.useDict(
+  "sys_notice_status",
+  "sys_notice_type"
+);
+
+const noticeList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    noticeTitle: undefined,
+    createBy: undefined,
+    status: undefined,
+  },
+  rules: {
+    noticeTitle: [
+      { required: true, message: "公告标题不能为空", trigger: "blur" },
+    ],
+    noticeType: [
+      { required: true, message: "公告类型不能为空", trigger: "change" },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询公告列表 */
+function getList() {
+  loading.value = true;
+  listNotice(queryParams.value).then((response) => {
+    noticeList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    noticeId: undefined,
+    noticeTitle: undefined,
+    noticeType: undefined,
+    noticeContent: undefined,
+    status: "0",
+  };
+  proxy.resetForm("noticeRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.noticeId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加公告";
+}
+
+/**修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const noticeId = row.noticeId || ids.value;
+  getNotice(noticeId).then((response) => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改公告";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["noticeRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.noticeId != undefined) {
+        updateNotice(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addNotice(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const noticeIds = row.noticeId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？')
+    .then(function () {
+      return delNotice(noticeIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+getList();
+</script>