feat: 公告管理

src/common/components/element-ui.js

@@ -32,6 +32,7 @@ import {
   DropdownItem,
   DropdownMenu,
   Tooltip,
+  ColorPicker,
 } from 'element-ui'
 
 const components = [
@@ -63,6 +64,7 @@ const components = [
   DropdownItem,
   DropdownMenu,
   Tooltip,
+  ColorPicker,
 ]
 
 export default {

src/router/index.js

@@ -65,6 +65,12 @@ const routes = [
         name: 'system_timed_task',
         meta: { title: '定时任务' },
       },
+      {
+        path: '/saas/announceManage',
+        component: () => import('@/views/system/announceManage.vue'),
+        name: 'system_announce_manage',
+        meta: { title: '公告管理' },
+      },
     ],
   },
 ]

src/views/home/navMenu.vue

@@ -195,6 +195,14 @@ export default {
               index: '/saas/timed_task',
               children: [],
             },
+            {
+              id: 5,
+              path: '',
+              label: '公告管理',
+              icon: 'el-icon-s-promotion',
+              index: '/saas/announceManage',
+              children: [],
+            },
           ],
         },
       ],

src/views/system/announceManage.vue

+<template>
+  <div class="announce-manage card">
+    <el-form
+      ref="form"
+      :model="searchForm"
+      size="mini"
+      v-enter-submit="search"
+      @submit.native.prevent
+      :inline="true"
+    >
+      <el-form-item label="创建时间">
+        <el-date-picker
+          style="width: 164px"
+          v-model="searchForm.time"
+          align="right"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+        <!-- <el-input v-model="searchForm.time"></el-input> -->
+      </el-form-item>
+      <el-form-item label="创建人">
+        <el-input
+          v-model="searchForm.creator"
+          placeholder="创建人"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label>
+        <el-button
+          type="primary"
+          native-type="submit"
+          @click="search()"
+        >
+          查询
+        </el-button>
+      </el-form-item>
+      <el-form-item label>
+        <el-button type="success" @click="editDialog()"
+          >新增</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div class="table_wrap" style="padding: 0">
+      <table-view
+        :sourceData="sourceData"
+        :serialNumber="false"
+        :tableColumns="tableColumns"
+      ></table-view>
+    </div>
+    <pagination
+      :setValue="setpaginationOptions"
+      :options="paginationOptions"
+    />
+    <el-dialog
+      :title="isEdit ? '编辑' : '新增'"
+      :close-on-click-modal="false"
+      :visible.sync="dialogVisible"
+      width="900px"
+    >
+      <el-form
+        :model="editForm"
+        :inline="true"
+        label-width="80px"
+        :rules="addrules"
+        size="mini"
+        ref="editForm"
+      >
+        <el-form-item
+          label="标题"
+          size="small"
+          prop="title"
+        >
+          <el-input
+            style="width: 530px"
+            v-model="editForm.title"
+          ></el-input>
+          <el-checkbox
+            style="margin-left: 20px"
+            v-model="editForm.titleWeight"
+            label="粗体"
+          ></el-checkbox>
+        </el-form-item>
+        <el-form-item label>
+          <el-color-picker
+            style="vertical-align: text-top"
+            v-model="editForm.titleColor"
+          ></el-color-picker>
+        </el-form-item>
+
+        <br />
+        <el-form-item label="置顶">
+          <el-switch
+            v-model="editForm.priority"
+          ></el-switch>
+        </el-form-item>
+      </el-form>
+      <v-editor
+        filename="files"
+        v-model="editForm.content"
+        ref="wangeditor"
+        height="300px"
+      />
+      <div slot="footer">
+        <el-button
+          @click="dialogVisible = false"
+          size="mini"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          @click="submit"
+          size="mini"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Editor from '@/components/wangeditor/index.vue'
+import tableView from '@/common/components/base/tableView.vue'
+import { get, post } from '@/common/api/axios'
+export default {
+  name: 'system_announce_manage',
+  components: { 'v-editor': Editor, tableView },
+  data() {
+    return {
+      pageSize: 50,
+      currentPage: 1,
+      total: 1,
+      paginationOptions: {
+        pageSize: 100,
+        currentPage: 1,
+        total: 0,
+      },
+      addrules: {
+        title: [
+          {
+            required: true,
+            message: '请输入标题',
+            trigger: 'blur',
+          },
+        ],
+      },
+      sourceData: [],
+      searchForm: {},
+      isEdit: false,
+      dialogVisible: false,
+      editForm: {
+        title: '',
+      },
+      defaultEditFrom: {
+        title: '',
+        enableFlag: false,
+        content: '',
+        priority: false,
+      },
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  computed: {
+    tableColumns() {
+      return [
+        {
+          label: '标题',
+          key: 'title',
+          align: 'left',
+          render: (item) => (
+            <span
+              style={{
+                color: item.titleColor,
+                fontWeight: item.titleWeight ? 'bold' : '',
+              }}
+            >
+              {item.title}
+            </span>
+          ),
+        },
+        { label: '创建人', key: 'creatorName' },
+        { label: '创建时间', key: 'creationTime' },
+        { label: '更新时间', key: 'updateTime' },
+        {
+          label: '是否发布',
+          key: 'enableFlag',
+          width: 100,
+          render: (item) => (
+            <span>{item.enableFlag ? '已发布' : '未发布'}</span>
+          ),
+        },
+        {
+          label: '操作',
+          width: 100,
+          render: (item) => (
+            <div>
+              <span
+                class="icon-view icon-edit-view"
+                title="编辑"
+                onClick={() => this.editDialog(item)}
+              >
+                <i class="el-icon-edit"></i>
+              </span>
+              {!item.enableFlag && (
+                <span
+                  class="icon-view icon-primary-view"
+                  title="发布"
+                  onClick={() => this.release(item)}
+                >
+                  <i class="el-icon-s-promotion"></i>
+                </span>
+              )}
+            </div>
+          ),
+        },
+      ]
+    },
+  },
+  methods: {
+    search() {
+      this.getList()
+    },
+    setpaginationOptions(opt) {
+      for (const key in opt) {
+        this.paginationOptions[key] = opt[key]
+      }
+      this.getList()
+    },
+    async getList() {
+      try {
+        const { pageSize, currentPage } =
+          this.paginationOptions
+        const res = await post('sys/announcement/list', {
+          pageSize,
+          currentPage,
+          ...this.searchForm,
+        })
+        if (res.code !== 200) return
+        this.sourceData = res.data.records
+        this.paginationOptions.total = res.data.total
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    currentChange(i) {
+      this.currentPage = i
+      this.getList()
+    },
+    async editDialog(item) {
+      if (item) {
+        try {
+          const res = await get(
+            'sys/announcement/get/' + item.id,
+          )
+          if (res.code !== 200) return
+          this.editForm = {
+            ...this.editForm,
+            ...res.data,
+          }
+          this.isEdit = true
+        } catch (e) {
+          console.error(e)
+        }
+      } else {
+        this.editForm = JSON.parse(
+          JSON.stringify(this.defaultEditFrom),
+        )
+        this.$nextTick(() => {
+          this.$refs.editForm.clearValidate()
+        })
+        this.isEdit = false
+      }
+      this.dialogVisible = true
+    },
+    async submit() {
+      try {
+        await this.$refs.editForm.validate()
+      } catch {
+        return
+      }
+
+      try {
+        const url = this.isEdit
+          ? 'sys/announcement/edit'
+          : 'sys/announcement/add'
+        const res = await post(url, { ...this.editForm })
+        if (res.code !== 200) return
+        this.$message.success(res.message)
+        this.dialogVisible = false
+        this.getList()
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    async enableChange(item, val) {
+      try {
+        const res = await post('sys/announcement/edit', {
+          id: item.id,
+          enableFlag: val,
+        })
+        if (res.code !== 200) return
+        this.$message.success(res.message)
+        this.getList()
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    async release(item) {
+      try {
+        const res = await get(
+          'sysAnnouncement/publish/' + item.id,
+        )
+        if (res.code !== 200) return
+        this.$message.success(res.message)
+        this.getList()
+      } catch (e) {
+        console.error(e)
+      }
+    },
+  },
+}
+</script>
+<style scoped>
+.announce-manage {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 20px 0;
+  overflow: hidden;
+}
+</style>