Browse Source

对接公告

chenrui 4 years ago
parent
commit
5c414528f6
3 changed files with 146 additions and 39 deletions
  1. 21 0
      src/api/noticeUser.js
  2. 114 31
      src/views/notice/detailModal.vue
  3. 11 8
      src/views/notice/list.vue

+ 21 - 0
src/api/noticeUser.js

@@ -0,0 +1,21 @@
+import { axios } from '@/utils/request'
+
+//  公告 列表  有分页
+export const noticeUserList = (params) => {
+  const url = `/noticeUser/queryLike/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+//  公告 详情
+export const noticeUserDetail = (params) => {
+  const url = `/notice/findById/${params.id}`
+  return axios({
+    url: url,
+    method: 'get'
+  })
+}

+ 114 - 31
src/views/notice/detailModal.vue

@@ -1,24 +1,50 @@
 <template>
   <a-modal
     centered
-    class="customerManagementDetail-modal"
+    class="noticeDetail-modal"
     :footer="null"
     :maskClosable="false"
-    title="详情"
+    title="公告详情"
     v-model="isShow"
     @cancle="isShow=false"
     width="80%">
-    <!-- 客户详情 -->
-    <div>
-      <div>公告内容</div>
-      <div class="btn-cont"><a-button id="customer-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
+    <div v-if="detailsData">
+      <a-descriptions bordered size="small" :column="2">
+        <a-descriptions-item label="类别">{{ typeDictValue }}</a-descriptions-item>
+        <a-descriptions-item label="可见性">{{ toAppNameDictValue }}</a-descriptions-item>
+        <a-descriptions-item label="公告标题">{{ detailsData.title||'--' }}</a-descriptions-item>
+        <a-descriptions-item label="发布时间">{{ detailsData.releaseDate||'--' }}</a-descriptions-item>
+        <a-descriptions-item label="公告内容" :span="2">
+          <div v-html="detailsData.content" class="editor-box"></div>
+        </a-descriptions-item>
+        <a-descriptions-item label="图片" :span="2">
+          <div style="display: flex;">
+            <p class="pic-box" v-for="(item,index) in imgPathsArr" :key="index">
+              <img :src="item" title="点击查看大图" class="productPic" @click="getPreview(item)" />
+            </p>
+          </div>
+          <span v-if="imgPathsArr.length == 0">--</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="附件" :span="2">
+          <p style="margin: 0 0 5px;" v-for="(item,index) in attachPathsArr" :key="index">
+            <a :href="item.filePath" :download="item.fileName" class="attachLink">{{ item.fileName }}</a>
+          </p>
+          <span v-if="attachPathsArr.length == 0">--</span>
+        </a-descriptions-item>
+      </a-descriptions>
+      <div class="btn-cont">
+        <a-button id="noticeDetail-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
+      </div>
     </div>
+    <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
   </a-modal>
 </template>
 
 <script>
 import { STable } from '@/components'
-import { custFindById } from '@/api/customer'
+import { noticeUserDetail } from '@/api/noticeUser'
 export default {
   name: 'NoticeDetailModal',
   components: { STable },
@@ -33,32 +59,62 @@ export default {
     }
   },
   computed: {
-    // 地址处理
-    addressStr () {
-      const provinceName = this.detailData.provinceName ? this.detailData.provinceName : ''
-      const cityName = this.detailData.cityName ? this.detailData.cityName : ''
-      const countyName = this.detailData.countyName ? this.detailData.countyName : ''
-      const customerAddr = this.detailData.customerAddr ? this.detailData.customerAddr : ''
-      const str = (provinceName || cityName || countyName || customerAddr) ? (provinceName + cityName + countyName + customerAddr) : '--'
+    typeDictValue () { //  类别  数据字典name
+      let str = ''
+      if (this.detailsData.type == 'notity') {
+        str = '公告'
+      } else if (this.detailsData.type == 'news_company') {
+        str = '企业新闻'
+      } else if (this.detailsData.type == 'news_trade') {
+        str = '行业咨询'
+      } else {
+        str = '--'
+      }
+      return str
+    },
+    toAppNameDictValue () { //  可见性  数据字典name
+      let str = ''
+      if (this.detailsData.toAppName == '1,2') {
+        str = '所有'
+      } else if (this.detailsData.toAppName == '2') {
+        str = '经销商'
+      } else if (this.detailsData.toAppName == '1') {
+        str = '总部'
+      } else {
+        str = '--'
+      }
       return str
+    },
+    imgPathsArr () { //  图片数组
+      return this.detailsData.imgPaths ? this.detailsData.imgPaths.split(',') : []
+    },
+    attachPathsArr () { //  附件数组
+      return this.detailsData.attachList ? this.detailsData.attachList : []
     }
   },
   data () {
     return {
       isShow: this.openModal, //  是否打开弹框
-      detailData: null //  网点数据
+      detailsData: null, //  详情数据
+      previewVisible: false,
+      previewImage: ''
     }
   },
   methods: {
     //  获取详情
     getDetail () {
-      custFindById({ id: this.itemId }).then(res => {
+      noticeUserDetail({ id: this.itemId }).then(res => {
         if (res.status == 200) {
-          this.detailData = res.data
+          this.detailsData = res.data
         } else {
-          this.detailData = null
+          this.detailsData = null
         }
       })
+    },
+    // 查看大图
+    getPreview (url) {
+      this.previewImage = url
+      this.previewVisible = true
     }
   },
   watch: {
@@ -83,27 +139,54 @@ export default {
 </script>
 
 <style lang="less">
-  .customerManagementDetail-modal{
+  .noticeDetail-modal{
     .ant-modal-body {
-      padding: 40px 40px 24px;
+    	padding: 40px 40px 24px;
     }
-    .item-cont {
-      margin-bottom: 15px;
-      display: flex;
-      .item-label {
-        width: 115px;
-        font-size: 14px;
-        color: rgba(0, 0, 0, 0.85);
-        flex-shrink: 0;
+    .ant-descriptions-item-label.ant-descriptions-item-colon{
+      width: 90px;
+    }
+    .pic-box{
+      width: 100px;
+      height: 100px;
+      margin-right: 10px;
+      display: inline-flex;
+      align-items: center;
+      border: 1px dashed #d9d9d9;
+      border-radius: 4px;
+      padding: 3px;
+      .productPic{
+        cursor: pointer;
+        max-width: 100%;
+        max-height: 100%;
+        display: block;
+        margin: 0 auto;
       }
-      .item-main {
-        flex-grow: 1;
-        word-break: break-all;
+    }
+    .editor-box{  //  编辑器基本样式初始化
+      p{
+        margin: 0;
+        padding: 0;
+        ul, li{
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        img{
+          max-width: 100%;
+        }
       }
     }
     .btn-cont {
       text-align: center;
       margin: 35px 0 10px;
     }
+    .attachLink{
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      &:hover{
+        text-decoration: underline;
+      }
+    }
   }
 </style>

+ 11 - 8
src/views/notice/list.vue

@@ -18,7 +18,7 @@
           </a-col>
           <a-col :md="6" :sm="24">
             <a-form-item label="公告名称">
-              <a-input id="noticeList-salesBillNo" v-model.trim="queryParam.salesBillNo" allowClear placeholder="请输入公告名称"/>
+              <a-input id="noticeList-title" v-model.trim="queryParam.notice.title" allowClear placeholder="请输入公告名称"/>
             </a-form-item>
           </a-col>
           <a-col :md="6" :sm="24">
@@ -51,13 +51,16 @@
 import moment from 'moment'
 import { STable } from '@/components'
 import noticeDetailModal from './detailModal.vue'
-import { urgentList } from '@/api/urgent'
+import { noticeUserList } from '@/api/noticeUser'
 export default {
   components: { STable, noticeDetailModal },
   data () {
     return {
       queryParam: { //  查询条件
-        buyerName: undefined //  客户名称
+        notice: {
+          title: ''
+        }
+        // buyerName: undefined //  客户名称
       },
       disabled: false, //  查询、重置按钮是否可操作
       dateFormat: 'YYYY-MM-DD',
@@ -65,7 +68,7 @@ export default {
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
         { title: '创建时间', dataIndex: 'createDate', align: 'center' },
-        { title: '公告名称', dataIndex: 'buyerName', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
+        { title: '公告名称', dataIndex: 'notice.title', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
         { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
@@ -79,7 +82,7 @@ export default {
           this.queryParam.beginDate = undefined
           this.queryParam.endDate = undefined
         }
-        return urgentList(Object.assign(parameter, this.queryParam)).then(res => {
+        return noticeUserList(Object.assign(parameter, this.queryParam)).then(res => {
           const data = res.data
           const no = (data.pageNo - 1) * data.pageSize
           for (var i = 0; i < data.list.length; i++) {
@@ -90,7 +93,7 @@ export default {
         })
       },
       openModal: false, //  查看客户详情  弹框
-      itemId: '' //  当前客户id
+      itemId: '' //  当前id
     }
   },
   methods: {
@@ -100,13 +103,13 @@ export default {
     },
     //  重置
     resetSearchForm () {
-      this.queryParam.buyerName = undefined
+      this.queryParam.notice.title = undefined
       this.time = []
       this.$refs.table.refresh(true)
     },
     //  详情
     handleDetail (row) {
-      this.itemId = row.id
+      this.itemId = row.notice.id
       this.openModal = true
     },
     //  关闭弹框