后台公告模块页面开发及新增编辑接口开发

.babelrc

+{
+  "plugins": [["import", {
+    "libraryName": "view-design",
+    "libraryDirectory": "src/components"
+  }]]
+}

package.json

@@ -46,8 +46,8 @@
     "echarts": "4.2.1",
     "element-ui": "2.13.0",
     "file-saver": "2.0.1",
-    "js-beautify": "^1.10.2",
     "fuse.js": "3.4.4",
+    "js-beautify": "^1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
     "normalize.css": "7.0.0",
@@ -55,10 +55,11 @@
     "path-to-regexp": "2.4.0",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "view-design": "^4.2.0",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
-    "vue-quill-editor": "3.0.6",
     "vue-cropper": "0.4.9",
+    "vue-quill-editor": "3.0.6",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
@@ -66,8 +67,8 @@
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
-    "@babel/register": "7.0.0",
     "@babel/parser": "^7.7.4",
+    "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.5.3",
     "@vue/cli-plugin-eslint": "^3.9.1",
     "@vue/cli-plugin-unit-jest": "3.5.3",
@@ -77,6 +78,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
+    "babel-plugin-import": "^1.13.0",
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",

src/api/announcement/announcementList.js

+import request from '@/utils/request'
+
+//get all announcement list
+export function getList(query) {
+  return request({
+    url: '/announcement/announcementList',
+    method: 'get',
+    params: query
+  })
+}
+
+// get current announcement which have been selected
+export function getCurrent() {
+  return request({
+    url: '/announcement/getCurrentAnnouncement',
+    method: 'get'
+  })
+}
+
+// add announcement
+export function addAnnouncement(data) {
+  return request({
+    url: '/announcement/addAnnouncement',
+    method: 'post',
+    data: data
+  })
+}
+
+// get announcement by condition
+export function getAnnouncement(data) {
+  return request({
+    url: '/announcement/getAnnouncement',
+    method: 'get',
+    data: data
+  })
+}
+
+

src/main.js

@@ -21,6 +21,14 @@ import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, download, handleTree } from "@/utils/ruoyi";
 import Pagination from "@/components/Pagination";
 
+//引入view样式
+import 'view-design/dist/styles/iview.css';
+//按需引入
+import { Button, Table,Card  } from 'view-design';
+Vue.component('Button', Button);
+Vue.component('Table', Table);
+Vue.component('Card', Card);
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/views/announcement/announcementList/index.vue

 <template>
-  <div>666</div>
+  <div class="app-container">
+    <!--当前公告-->
+    <div style="background:#eee;padding: 20px;margin-bottom: 20px">
+      <Card :bordered="false">
+        <p slot="title">当前公告通知</p>
+        <p v-if="announcement==null">通知公告为空哦~快去添加吧</p>
+        <p v-else v-text="announcement.content"></p>
+      </Card>
+    </div>
+    <!--操作按钮组-->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']" >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']" >删除</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="announcementList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="40" align="center" :show-overflow-tooltip="true"/>
+      <el-table-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']" >修改</el-button>
+          <el-button v-if="scope.row.userId !== 1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']" >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改公告通知对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24" >
+            <el-form-item label="内容" prop="content">
+              <el-input v-model="form.content" type="textarea" placeholder="请输入公告通知内容"  clearable rows="6"/>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+
+  </div>
 </template>
 <script>
+  import { getList,getCurrent,addAnnouncement,getAnnouncement} from "@/api/announcement/announcementList";
+  export default {
+    //页签缓存页面的name要和路由中的那么要相同，才能缓存，
+    //如果是自定义菜单，则页面的name和菜单管理中路由地址要相同，才能页签缓存
+    name: "announcement",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        ids: [],// 选中数组
+        single: true, // 非单个禁用
+        multiple: true, // 非多个禁用
+        total: 0, // 总条数
+        announcementList: [],// 所有公告列表
+        announcement:null, //当前公告
+        title: "", // 弹出层标题
+        open: false,// 是否显示弹出层
+        queryParams: {  // 查询参数
+          pageNum: 1,
+          pageSize: 10
+        },
+        form: {}, // 表单参数
+        rules: {// 表单校验
+          content: [
+            { required: true, message: "公告内容通知不能为空", trigger: "blur" }
+          ]
+        }
+      };
+    },
+    created() {
+      this.getList();
+      this.getCurrent()
+    },
+    methods: {
+      /** get all announcement list */
+      getList() {
+        this.loading = true;
+        getList(this.queryParams).then(response=>{
+            this.announcementList = response.data
+            this.loading = false
+        })
+      },
+      /** get current announcement */
+      getCurrent() {
+        this.loading = true;
+        getCurrent().then(response=>{
+          if (response.data){
+            this.announcement = response.data
+          }
+        })
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          /*dictId: undefined*/
+        };
+        this.resetForm("form");
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加公告通知内容";
+      },
+      //多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.dictId)
+        this.single = selection.length!=1
+        this.multiple = !selection.length
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        const id = row.id || this.ids
+        let data ={
+          id:id
+        }
+        getAnnouncement(data).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改公告通知内容";
+        });
+      },
+      /** 提交按钮 */
+      submitForm: function() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.dictId != undefined) {
+              updateType(this.form).then(response => {
+                if (response.code === 200) {
+                  this.msgSuccess("修改成功");
+                  this.open = false;
+                  this.getList();
+                } else {
+                  this.msgError(response.msg);
+                }
+              });
+            } else {
+              addAnnouncement(this.form).then(response => {
+                if (response.code === 200) {
+                  this.msgSuccess("新增成功");
+                  this.open = false;
+                  this.getList();
+                } else {
+                  this.msgError("新增失败："+response.msg);
+                }
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const dictIds = row.dictId || this.ids;
+        this.$confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delType(dictIds);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(function() {});
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        const queryParams = this.queryParams;
+        this.$confirm('是否确认导出所有类型数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return exportType(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        }).catch(function() {});
+      }
+    }
+  };
 
 </script>
 <style scoped>