处理新需求；

package.json

@@ -12,15 +12,18 @@
     "axios": "^0.21.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "core-js": "^3.6.5",
+    "element-tiptap": "^1.26.2",
+    "element-ui": "^2.15.1",
     "qs": "^6.10.1",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vuejs-datepicker": "^1.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.13",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

src/App.vue

@@ -151,9 +151,9 @@ export default {
     created() {
     this.loadingFlag = true;
     //this.getData(); // 线上打开
-    // 本地调试打开
+    // 本地调试打开 
      this.loadingFlag = false;
-    // this.isManufacturer = "manufacturer";
+    // this.isManufacturer = "manufacturer"; distributor
        this.isManufacturer = "manufacturer"
      if (this.isManufacturer === 'manufacturer') {
        if(this.$route.path === '/loading') this.$router.replace({ path: "/uploadInfor" });

src/components/RouterBanner.vue

@@ -65,7 +65,7 @@ export default {
   },
   data() {
     return {
-      isHover: [true, true, true, true, true],
+      isHover: [true, true, true, true, true, true, true],
       routerList: ROUTER,
       firstRouter: ''
     };

src/main.js

@@ -2,9 +2,24 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import axiosApi from './request/api'
+
+
+import ElementUI from 'element-ui';
+import { ElementTiptapPlugin } from 'element-tiptap';
+// import ElementUI's styles
+import 'element-ui/lib/theme-chalk/index.css';
+// import this package's styles
+import 'element-tiptap/lib/index.css';
+
+// use ElementUI's plugin
+Vue.use(ElementUI);
+// use this package's plugin
+Vue.use(ElementTiptapPlugin, { /* plugin options */ });
+// Now you register `'el-tiptap'` component globally.
+
 Vue.config.productionTip = false
 Vue.prototype.$http = axiosApi
 new Vue({
-  router,
-  render: h => h(App)
-}).$mount('#app')
+    router,
+    render: h => h(App)
+}).$mount('#app')

src/router/index.js

@@ -49,8 +49,12 @@ import CommonParam from '../views/parameter/CommonParam'
 
 // 厂商通知公告
 import NoticeChangShang from '../views/notification/changShang.vue'
-// 经销商账号管理
+// 经销商
 import NoticeJingXiaoshang from '../views/notification/jingXiaoshang.vue'
+// 厂商通知公告 编辑
+import editPage from '../views/notification/editPage/editPage.vue'
+// 经销商通知公告 详情
+import itemDetail from '../views/notification/detail/itemDetail.vue'
 
 
 Vue.use(VueRouter)
@@ -189,13 +193,22 @@ const routes = [{
             url: '/accountIndex'
         }],
     },
+    /* 公告通知 */
     {
         path: '/changShang',
         component: NoticeChangShang,
+        children: [{
+            path: '/changShang/editPage',
+            component: editPage,
+        }]
     },
     {
         path: '/jingXiaoshang',
         component: NoticeJingXiaoshang,
+        children: [{
+            path: '/jingXiaoshang/itemDetail',
+            component: itemDetail,
+        }]
     },
     {
         path: '/accountManage',

src/views/notification/changShang.vue

@@ -1,63 +1,66 @@
 <template>
   <div class="notice_changShang">
-    <div style="color: #80808059;border: 1px solid;"></div>
-    <button @click="announce()">发布公告</button>
-    <div class="tableD">
-      <div class="table_template">
-        <table class="table">
-          <thead>
-            <tr :style="tableHeadStyle">
-              <td
-                v-for="(item, index) in tableHeaderD"
+    <div v-if="isFather()">
+      <div style="color: #80808059; border: 1px solid"></div>
+      <button @click="announce()">发布公告</button>
+      <div class="tableD">
+        <div class="table_template">
+          <table class="table">
+            <thead>
+              <tr :style="tableHeadStyle">
+                <td
+                  v-for="(item, index) in tableHeaderD"
+                  :key="index"
+                  :style="tableHeadStyle"
+                >
+                  {{ item }}
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(obj, index) in tableData"
                 :key="index"
-                :style="tableHeadStyle"
+                :class="{ table_gray: !discolor && index % 2 === 0 }"
               >
-                {{ item }}
-              </td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(obj, index) in tableData"
-              :key="index"
-              :class="{ table_gray: !discolor && index % 2 === 0 }"
-            >
-              <td>{{ obj.informationName || "标题" }}</td>
-              <td>{{ obj.accountScope || "重要通知" }}</td>
-              <td>
-                {{
-                  (obj.fileUploadDate || "")
-                    .replace("T", " ")
-                    .slice(0, -4)
-                    .replace(RegExp("-", "g"), "/")
-                }}
-              </td>
+                <td class="titleStyle">{{ obj.informationName || "标题" }}</td>
+                <td>{{ obj.accountScope || "重要通知" }}</td>
+                <td>
+                  {{
+                    (obj.fileUploadDate || "")
+                      .replace("T", " ")
+                      .slice(0, -4)
+                      .replace(RegExp("-", "g"), "/")
+                  }}
+                </td>
 
-              <td v-if="operation" :style="trStyle" class="operationStyle">
-                <div class="operationBox">
-                  <span
-                    style="cursor: pointer"
-                    v-for="(operationObj, i) in operation"
-                    :key="i"
-                    @click="operationObj.function(obj, index)"
-                    >{{ operationObj.name }}
-                  </span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td v-if="operation" :style="trStyle" class="operationStyle">
+                  <div class="operationBox">
+                    <span
+                      style="cursor: pointer"
+                      v-for="(operationObj, i) in operation"
+                      :key="i"
+                      @click="operationObj.function(obj, index)"
+                      >{{ operationObj.name }}
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="pageD">
+        <TablePage
+          :totalPage="totalPage"
+          :currentPage="currentPage"
+          @change_page="changePage"
+          @jump_page="jumpPage"
+        />
+        <p>共{{ totalPage }}页，共{{ sum }}条数据</p>
       </div>
     </div>
-    <div class="pageD">
-      <TablePage
-        :totalPage="totalPage"
-        :currentPage="currentPage"
-        @change_page="changePage"
-        @jump_page="jumpPage"
-      />
-      <p>共{{ totalPage }}页，共{{ sum }}条数据</p>
-    </div>
+    <router-view></router-view>
   </div>
 </template>
 
@@ -110,7 +113,6 @@ export default {
       },
       onlineUrl: env_url, //'http://8.140.188.129:8080'线上 //http://8.136.230.133:8080 //测试
       userId: localStorage.getItem("userId") || "",
-    
     };
   },
   computed: {
@@ -143,7 +145,22 @@ export default {
     },
     //编辑
     edit: function (config) {
-      console.log(config)
+      console.log(config);
+      this.$router.push({
+        path: "/changShang/editPage",
+        query: {},
+      });
+    },
+    isFather: function () {
+      return this.$route.path == '/changShang' ? true : false;
+    },
+    /* 发布公告 */
+    announce: function () {
+      console.log(' 发布公告')
+      this.$router.push({
+        path: "/changShang/editPage",
+        query: {},
+      });
     },
   },
   created() {},
@@ -151,6 +168,9 @@ export default {
 </script>
 
 <style scoped lang="less">
+.titleStyle {
+    color: #0000ff;
+}
 /* 查看详情样式 */
 .table_template {
   text-align: center;

src/views/notification/detail/itemDetail.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="notice_jingXiaoshang_detail">
+    <div class="titleBox">
+        <div class="titleStyle">【{{contentData[0].info}}】{{contentData[0].time}}</div>
+        <span @click="backToPre()">返回上一级</span>
+    </div>
+    <div style="color: rgb(128 128 128 / 10%); border: 1px solid"></div>
+    <div class="content">{{contentData[0].content}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      contentData: [
+        {
+          info: "通知",
+          title: "title",
+          time: "2021/05/01",
+          content: '各位经销商同仁非常感谢一直以来对经销商市场支援项目的支持与帮助。题记事宜, 2020年12月线索相关数据明细已经上传系统,烦请参看。再次感谢'
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    backToPre() {
+      this.$router.push({
+        path: "/jingXiaoshang",
+        query: {},
+      });
+    },
+  },
+  created() {},
+};
+</script>
+
+
+<style scoped lang="less">
+.titleBox{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.titleBox span{
+    color: #0000ff;
+    text-align: right;
+}
+.notice_jingXiaoshang_detail {
+    margin-left: 32px;
+}
+.titleStyle {
+    font-weight:bold;
+    font-size: 16px;
+    height: 50px;
+    line-height: 50px;
+}
+.content {
+    margin-top: 16px;
+}
+</style>
+

src/views/notification/editPage/editPage.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="notice_changShang_edit">
+    <form>
+      <div class="Line Line1">
+        <span>标题:</span>
+        <input type="text" />
+      </div>
+      <div class="Line Line2">
+        <span>类型:</span>
+        <select>
+          <option>重要通知</option>
+        </select>
+      </div>
+      <div class="Line Line3">
+        <span>区域:</span>
+        <div class="areaBox">
+          <div v-for="(item, index) in areaList" :key="index">
+            <input
+              type="checkbox"
+              :value="item"
+              v-model="checkedBoxList"
+              @click="clickCheckbox(index)"
+            /><span>{{ item }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Line Line4">
+        <span>信息配置:</span>
+        <!-- <input class="focusStyle" /> -->
+        <div class="fuWenBen">
+          <el-tiptap v-model="content" :extensions="extensions" />
+        </div>
+      </div>
+      <div class="Line Line5">
+        <span>附件:</span>
+        <button>添加附件</button>
+      </div>
+    </form>
+    <div class="operationStyle">
+      <button>保存</button>
+      <button @click="backToPre()">返回</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  // necessary extensions
+  Doc,
+  Text,
+  Paragraph,
+  Heading,
+  Bold,
+  Underline,
+  Italic,
+  Strike,
+  ListItem,
+  BulletList,
+  OrderedList,
+} from "element-tiptap";
+export default {
+  components: {},
+  data() {
+    return {
+      InfoType: "",
+      areaList: ["全区", "北区", "南区", "东区"], // 按区域添加
+      checkedBoxList: [], // 多选框选中的值
+      extensions: [
+        new Doc(),
+        new Text(),
+        new Paragraph(),
+        new Heading({ level: 5 }),
+        new Bold({ bubble: true }), // render command-button in bubble menu.
+        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
+        new Italic(),
+        new Strike(),
+        new ListItem(),
+        new BulletList(),
+        new OrderedList(),
+      ],
+      // editor's content
+      content: `
+        <h1>Heading</h1>
+        <p>This Editor is awesome!</p>
+      `,
+    };
+  },
+  computed: {},
+  methods: {
+    // 保证多选框东区和其他的多选框互斥
+    clickCheckbox(i) {
+      let list = this.checkedBoxList;
+      let include = list.indexOf("全区");
+      if (i === 0) {
+        this.checkedBoxList = [];
+        return;
+      }
+      if (include >= 0) {
+        this.checkedBoxList.splice(0, 1);
+      }
+    },
+    backToPre() {
+      this.$router.push({
+        path: "/changShang",
+        query: {},
+      });
+    },
+  },
+  created() {},
+};
+</script>
+
+
+<style scoped lang="less">
+/* .notice_changShang_edit {
+  height: 500px;
+} */
+.fuWenBen {
+  position: relative;
+  left: 80px;
+  top: -31px;
+  width: 100%;
+}
+.operationStyle {
+  display: flex;
+  justify-content: center;
+}
+.operationStyle button:nth-child(1) {
+  margin-right: 36px;
+}
+.operationStyle button {
+  border-radius: 5px;
+  width: 100px;
+  height: 36px;
+}
+.Line5 button {
+  border-radius: 5px;
+  width: 100px;
+  height: 23px;
+  vertical-align: middle;
+}
+/* .operationStyle button:nth-child(2){
+  display: flex;
+  justify-content: center;
+} */
+.focusStyle {
+  border: 1px solid #ccc;
+  line-height: 20px;
+  color: #555555;
+  outline: none;
+  position: absolute;
+}
+.focusStyle:focus {
+  animation: shadowAni 200ms linear forwards;
+}
+.Line {
+  height: 50px;
+}
+.Line span {
+  width: 80px;
+  height: 36px;
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 36px;
+  justify-content: flex-end;
+  margin-right: 8px;
+}
+.areaBox {
+  display: flex;
+}
+.areaBox span {
+  width: 30px;
+}
+.areaBox input {
+  vertical-align: middle;
+}
+.Line3 {
+  display: flex;
+}
+.Line4 span {
+  line-height: 10px;
+}
+.Line4 {
+  margin-top: 9px;
+  height: 230px;
+}
+.Line5 span {
+  position: relative;
+}
+.Line5 button {
+  margin-left: 64px;
+}
+.Line1 input {
+  height: 24px;
+}
+.Line2 select {
+  vertical-align: middle;
+  width: 120px;
+}
+</style>
+

src/views/notification/jingXiaoshang.vue

@@ -1,27 +1,142 @@
 <template>
-  <div class="upload_links">
-   
+  <div class="notice_jingXiaoShang">
+    <div v-if="isFather()">
+      <div class="topTab">
+        <span>通知公告</span>
+      </div>
+      <div
+        style="
+          color: #80808059;
+          border: 1px solid;
+          position: relative;
+          top: 30px;
+        "
+      ></div>
+      <div class="noticeContent">
+        <div
+          v-for="(obj, index) in contentData"
+          :key="index"
+          class="itemBox"
+          @click="toDetail"
+        >
+          <div class="lineItem1">
+            <span class="dotStyle"></span>
+            <div :class="{ unread_message: obj.unread === 1 }">
+              [{{ obj.info }}]
+            </div>
+          </div>
+          <div :class="{ unread_message: obj.unread === 1 }">
+            【{{ obj.title || "" }}】
+          </div>
+          <div :class="{ unread_message: obj.unread === 1 }">
+            {{ obj.title }}
+          </div>
+          <div :class="{ unread_message: obj.unread === 1 }">
+            {{ obj.time }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-
 export default {
-  components: {
-
-  },
+  components: {},
   data() {
     return {
-      
+      contentData: [
+        {
+          unread: 1,
+          info: "通知",
+          title: "title",
+          time: "2021/05/01",
+        },
+        {
+          unread: 0,
+          info: "通知",
+          title: "title",
+          time: "2021/05/01",
+        },
+        {
+          unread: 0,
+          info: "通知",
+          title: "title",
+          time: "2021/05/01",
+        },
+        {
+          unread: 0,
+          info: "通知",
+          title: "title",
+          time: "2021/05/01",
+        },
+        {
+          unread: 0,
+          info: "通知",
+          title: "title",
+          time: "2021/05/01",
+        },
+      ],
     };
   },
-  computed: {
+  computed: {},
+  methods: {
+    /* 跳转通知详情 */
+    /* F:\Lexus\Lexus-media\src\views\notification\detail\itemDetail.vue */
+    toDetail: function (config) {
+      console.log(config, this.$route);
+      this.$router.push({
+        path: "/jingXiaoshang/itemDetail",
+        query: {},
+      });
+    },
+    isFather: function () {
+      console.log(this.$route.path, this.$route.path.length)
+      return this.$route.path == '/jingXiaoshang' ? true : false;
+    },
   },
-  methods: {},
   created() {},
 };
 </script>
 
 <style scoped lang="less">
-
+.unread_message {
+  color: red;
+}
+.lineItem1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dotStyle {
+  width: 2px;
+  height: 2px;
+  border: 1px solid black;
+  border-radius: 2px;
+  background-color: black;
+}
+.noticeContent {
+  position: relative;
+  top: 30px;
+  left: 16px;
+}
+.itemBox {
+  display: flex;
+}
+.itemBox div {
+  margin: 8px 16px 8px 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.topTab {
+  height: 30px;
+  background-color: rgba(102, 102, 102, 1);
+  line-height: 30px;
+}
+.topTab span {
+  margin-left: 16px;
+  color: white;
+}
 </style>