新闻-通知公告更新

package-lock.json

@@ -11075,6 +11075,11 @@
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.1.2.tgz",
       "integrity": "sha1-ooY/QAWqc/JYflXD+t8/AfacfU0="
     },
+    "wangeditor": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/wangeditor/download/wangeditor-3.1.1.tgz",
+      "integrity": "sha1-+9PB1JdpI8nt67hbKdMLNVEq0Dk="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz",

package.json

@@ -17,7 +17,8 @@
     "vue": "^2.6.10",
     "vue-meta": "^2.3.1",
     "vue-router": "^3.1.3",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

src/components/wang-editor.vue

@@ -0,0 +1,77 @@
+<template>
+  <div ref="editor" style="text-align:left"></div>
+</template>
+<script>
+import E from 'wangeditor';
+
+const menus = [
+  'head', // 标题
+  'bold', // 粗体
+  'fontSize', // 字号
+  'fontName', // 字体
+  'italic', // 斜体
+  'underline', // 下划线
+  'strikeThrough', // 删除线
+  'foreColor', // 文字颜色
+  'backColor', // 背景颜色
+  'link', // 插入链接
+  'list', // 列表
+  'justify', // 对齐方式
+  'quote', // 引用
+  // 'emoticon', // 表情
+  'table', // 表格
+  // 'video', // 插入视频
+  // 'code', // 插入代码
+  'undo', // 撤销
+  'redo', // 重复
+];
+
+export default {
+  name: 'wang-editor',
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  props: {
+    value: { type: String, required: false, default: '' },
+  },
+  data() {
+    return {
+      editorContent: this.value,
+    };
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor);
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      this.$emit('change', html);
+    };
+    // 自定义菜单配置
+    editor.customConfig.menus = menus;
+    editor.customConfig.zIndex = 0;
+    editor.customConfig.uploadImgServer = '/files/cms/images/upload';
+    editor.customConfig.uploadImgMaxLength = 1;
+    editor.customConfig.uploadImgHooks = {
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
+      customInsert: function(insertImg, result, editor) {
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+        var url = result.uri;
+        insertImg(url);
+
+        // result 必须是一个 JSON 格式字符串！！！否则报错
+      },
+    };
+    editor.create();
+    editor.txt.html(this.value);
+  },
+  methods: {
+    getContent: function() {
+      return this.editorContent;
+    },
+  },
+};
+</script>

src/layout/layout-part/menus.vue

@@ -20,12 +20,12 @@
           <span> 新闻管理</span>
         </template>
         <el-menu-item-group>
-          <el-menu-item>新闻信息审核</el-menu-item>
-          <el-menu-item>通知公告</el-menu-item>
-          <el-menu-item>创新吉林</el-menu-item>
-          <el-menu-item>国内动态</el-menu-item>
-          <el-menu-item>政务活动</el-menu-item>
-          <el-menu-item>媒体聚焦</el-menu-item>
+          <el-menu-item index="/news/notice/index">通知公告</el-menu-item>
+          <el-menu-item index="/news/innovate/index">创新吉林</el-menu-item>
+          <el-menu-item index="/news/domestic/index">国内动态</el-menu-item>
+          <el-menu-item index="/news/govern/index">政务活动</el-menu-item>
+          <el-menu-item index="/news/media/index">媒体聚焦</el-menu-item>
+          <el-menu-item index="/news/examine/index">新闻信息审核</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
     </el-menu>

src/layout/news/mainData.vue

@@ -0,0 +1,114 @@
+<template>
+  <div id="mainData">
+    <el-row>
+      <el-col :span="24" class="mainData">
+        <el-table :data="tableData" style="width: 100%" border>
+          <el-table-column label="序号" type="index" width="50" align="left"> </el-table-column>
+          <el-table-column prop="name" label="创建用户名称" width="110" align="left"> </el-table-column>
+          <el-table-column prop="title" label="新闻名称" width="484" align="left"> </el-table-column>
+          <el-table-column prop="date" label="创建时间" width="100" align="left"> </el-table-column>
+          <el-table-column prop="state" label="状态" width="120" align="left"> </el-table-column>
+          <el-table-column label="操作" width="180" align="left">
+            <template slot-scope="scoped">
+              <el-button size="mini" type="primary" icon="el-icon-view" @click="openDialog(scoped.$index)"></el-button>
+              <el-button size="mini" type="primary" icon="el-icon-edit" @click="addData(scoped.$index)"></el-button>
+              <el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scoped.$index, tableData)"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-col :span="24" class="page">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="1"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="详细信息" :visible.sync="dialog">
+      <p class="text">新闻名称：{{ info.title }}</p>
+      <p class="text">
+        封面图片：
+        <el-image :src="info.pic"></el-image>
+      </p>
+      <p class="text">
+        新闻内容：<span>{{ info.content }}</span>
+      </p>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainData',
+  props: {
+    tableData: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+    dialog: false,
+    info: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    addData(index) {
+      if (index !== undefined) {
+        let data = this.tableData[index];
+      } else {
+        this.form = {};
+      }
+      this.$router.push({ path: './detail' });
+    },
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    openDialog(index) {
+      if (index !== undefined) {
+        let data = JSON.parse(JSON.stringify(this.tableData[index]));
+        data[`index`] = index;
+        this.$set(this, `info`, data);
+      }
+      this.dialog = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-table th {
+  padding: 5px 0;
+  background: #f2f2f2;
+}
+/deep/.el-table td {
+  padding: 5px 0;
+}
+/deep/.el-table tr {
+  background: #f9f9f9;
+}
+/deep/.el-table tr:nth-child(2n) {
+  background: #fff;
+}
+.page {
+  text-align: center;
+  padding: 30px 0;
+}
+.text {
+  font-size: 16px;
+  padding: 0 0 10px 0;
+}
+.text span {
+  display: inherit;
+  text-indent: 1rem;
+}
+</style>

src/layout/news/mainForm.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="mainForm">
+    <el-row>
+      <el-col :span="24" class="mainForm">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="资讯名称">
+            <el-input v-model="form.title" placeholder="请输入资讯名称"></el-input>
+          </el-form-item>
+          <el-form-item label="封面图片">
+            <el-upload
+              class="upload-demo"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-remove="beforeRemove"
+              multiple
+              :limit="1"
+              :file-list="fileList"
+            >
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="资讯内容">
+            <wang-editor v-model="form.content" upload-img-server=""></wang-editor>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleCancel">返回</el-button>
+            <el-button type="primary" @click="handleEdit()">提交</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import WangEditor from '@/components/wang-editor.vue';
+export default {
+  name: 'mainForm',
+  props: {
+    form: null,
+  },
+  components: {
+    WangEditor,
+  },
+  data: () => ({
+    fileList: [],
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleEdit() {
+      this.handleCancel();
+    },
+    handleCancel() {
+      this.$router.push({ path: './index' });
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-form {
+  padding: 0 200px;
+}
+.mainForm {
+  padding: 20px 0;
+}
+</style>

src/layout/news/searchInfo.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="searchInfo">
+    <el-row>
+      <el-col :span="24" class="searchInfo">
+        <el-col :span="6" class="left">
+          <span>查询联盟名称：</span>
+          <el-input v-model="input" placeholder="请输入查询联盟名称"></el-input>
+        </el-col>
+        <el-col :span="6" class="left">
+          <span>查询用户名称：</span>
+          <el-input v-model="input" placeholder="请输入用户名称"></el-input>
+        </el-col>
+        <el-col :span="6" class="left">
+          <span>查询新闻名称：</span>
+          <el-input v-model="input" placeholder="请输入新闻名称"></el-input>
+        </el-col>
+        <el-col :span="6" class="right">
+          <el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
+          <el-button size="mini" type="success" icon="el-icon-check" @click="addData()">添加用户</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'searchInfo',
+  props: {},
+  components: {},
+  data: () => ({
+    input: '',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    addData() {
+      this.$router.push({ path: './detail' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.searchInfo .left span {
+  font-size: 13px;
+  color: #393939;
+}
+.searchInfo .left .el-input {
+  width: 50%;
+}
+/deep/.searchInfo .left .el-input .el-input__inner {
+  height: 28px;
+}
+</style>

src/router/index.js

@@ -11,6 +11,7 @@ export default new Router({
       name: 'home',
       component: () => import('../views/home/index.vue'),
     },
+    // 用户信息维护
     {
       path: '/userManage/user/index',
       component: () => import('../views//userManage/user/index.vue'),
@@ -19,6 +20,7 @@ export default new Router({
       path: '/userManage/user/detail',
       component: () => import('../views//userManage/user/detail.vue'),
     },
+    // 企业信息管理
     {
       path: '/userManage/companyInfo/index',
       component: () => import('../views//userManage/companyInfo/index.vue'),
@@ -27,6 +29,7 @@ export default new Router({
       path: '/userManage/companyInfo/detail',
       component: () => import('../views//userManage/companyInfo/detail.vue'),
     },
+    // 企业类别管理
     {
       path: '/userManage/companyType/index',
       component: () => import('../views//userManage/companyType/index.vue'),
@@ -35,6 +38,7 @@ export default new Router({
       path: '/userManage/companyType/detail',
       component: () => import('../views//userManage/companyType/detail.vue'),
     },
+    // 专家信息管理
     {
       path: '/userManage/expertInfo/index',
       component: () => import('../views/userManage/expertInfo/index.vue'),
@@ -43,5 +47,40 @@ export default new Router({
       path: '/userManage/expertInfo/detail',
       component: () => import('../views/userManage/expertInfo/detail.vue'),
     },
+    // 新闻管理
+    // 新闻管理-通知公告
+    {
+      path: '/news/notice/index',
+      component: () => import('../views//news/notice/index.vue'),
+    },
+    {
+      path: '/news/notice/detail',
+      component: () => import('../views//news/notice/detail.vue'),
+    },
+    // 新闻管理-创新吉林
+    {
+      path: '/news/innovate/index',
+      component: () => import('../views//news/innovate/index.vue'),
+    },
+    // 新闻管理-国内动态
+    {
+      path: '/news/domestic/index',
+      component: () => import('../views//news/domestic/index.vue'),
+    },
+    // 新闻管理-政务活动
+    {
+      path: '/news/govern/index',
+      component: () => import('../views//news/govern/index.vue'),
+    },
+    // 新闻管理-媒体聚焦
+    {
+      path: '/news/media/index',
+      component: () => import('../views//news/media/index.vue'),
+    },
+    // 新闻管理-信息审核
+    {
+      path: '/news/examine/index',
+      component: () => import('../views//news/examine/index.vue'),
+    },
   ],
 });

src/views/news/domestic/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="index">
+    <p>国内动态</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/news/examine/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="index">
+    <p>新闻信息审核</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/news/govern/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="index">
+    <p>政务活动</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/news/innovate/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="index">
+    <p>创新吉林</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/news/media/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="index">
+    <p>媒体聚焦</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/news/notice/detail.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <mainForm :form="form"></mainForm>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import mainForm from '@/layout/news/mainForm.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    topInfo, //头部标题
+    mainForm, //新闻信息form
+  },
+  data: () => ({
+    topTitle: '通知公告信息编辑',
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+</style>

src/views/news/notice/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="search">
+          <searchInfo></searchInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <mainData :tableData="tableData"></mainData>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import searchInfo from '@/layout/news/searchInfo.vue';
+import mainData from '@/layout/news/mainData.vue';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    topInfo, //头部标题
+    searchInfo, //搜索
+    mainData, //新闻信息列表
+  },
+  data: () => ({
+    topTitle: '通知公告',
+    tableData: [
+      {
+        name: '测试人员',
+        title: '创新券的申请主体为在区域内注册，并且统计、工商、税务关系也在区域内具有独立法人资格的科',
+        date: '2019-01-13',
+        state: '通过审核',
+      },
+      {
+        name: '测试人员',
+        title: '十条数据',
+        date: '2019-01-13',
+        state: '通过审核',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+</style>