资讯

src/components/Editor/ImageModal.vue

@@ -45,6 +45,7 @@
 import Vue, { PropType } from 'vue'
 import vue2Dropzone from 'vue2-dropzone'
 import 'vue2-dropzone/dist/vue2Dropzone.min.css'
+import FileService from '@/service/FileService/index'
 import { Editor } from '@tiptap/vue-2'
 
 export default Vue.extend({
@@ -60,10 +61,11 @@ export default Vue.extend({
       confirmLoading: false,
       imageSrc: '',
       dropzoneOptions: {
-        url: '/api/upload',
+        url: '/proxyApi/api/v1/image/upload',
         thumbnailWidth: 200,
         maxFilesize: 200,
         dictDefaultMessage: '拖动/选择文件上传图片（200M以内）',
+        paramName: 'uploadFile'
       },
       tab: 1,
     }
@@ -79,7 +81,8 @@ export default Vue.extend({
     showModal() {
       this.visible = true
     },
-    vfileUploaded(file: File | Blob) {
+    vfileUploaded(file: File | Blob, res: { data: string }) {
+      this.imageSrc = new FileService().getImageSrc(res.data)
       /** Here is where you get your URL/Base64 string or what ever.*/
     },
     cursorToEnd(){

src/components/Editor/editorUpload.vue

@@ -2,15 +2,15 @@
   <!-- 上传概要图片 -->
   <div class="border-dotted border-2 p-4 mb-5">
     <a-upload
-      name="file"
+      name="uploadFile"
       list-type="picture-card"
       class="avatar-uploader"
       :show-upload-list="false"
-      action="/api/upload"
+      action="/proxyApi/api/v1/image/upload"
       :before-upload="beforeUpload"
       @change="handleChange"
     >
-      <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+      <img v-if="imgUrl" :src="imgUrl" alt="avatar" />
       <div v-else>
         <a-icon :type="loading ? 'loading' : 'plus'" />
         <div class="ant-upload-text">
@@ -24,6 +24,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { message } from 'ant-design-vue'
+import FileService from '@/service/FileService/index'
 
 function getBase64(img: Blob, callback: (any: any) => void) {
   const reader = new FileReader();
@@ -34,10 +35,15 @@ function getBase64(img: Blob, callback: (any: any) => void) {
 export default Vue.extend({
   data(){
     return{
-      imageUrl: "", 
+      // imageUrl: "", 
       loading: false
     }
   },
+  props: {
+    imgUrl: {
+      type: String
+    }
+  },
   methods:{
     handleChange(info:any) {
     if (info.file.status === 'uploading') {
@@ -45,11 +51,9 @@ export default Vue.extend({
       return;
     }
     if (info.file.status === 'done') {
-      // Get this url from response in real world.
-      getBase64(info.file.originFileObj, imageUrl => {
-        this.imageUrl = imageUrl;
-        this.loading = false;
-      });
+      const res = info.file.response?.data
+      const imageUrl = new FileService().getImageSrc(res)
+      this.$emit('update:imgUrl', imageUrl)
     }
   },
   beforeUpload(file:File) {

src/components/Editor/index.vue

@@ -30,25 +30,31 @@ export default Vue.extend({
     visible:{
       type:Boolean,
       default:true
+    },
+    editorContent: {
+      type: String
     }
   },
   data(){
     let editor:any = undefined
     return {
       editor,
-      content:''
+      // content:''
     }
   },
   mounted(){
-      this.editor = new Editor({
+    this.editor = new Editor({
       onUpdate: () => {
-        this.content = this.editor.getHTML()
-        this.$emit('getContent',this.content)
+        // this.content = this.editor.getHTML()
+        // this.$emit('getContent',this.content)
+        const content = this.editor.getHTML()
+        this.$emit('update:editorContent', content)
       },
       extensions: [
         StarterKit,
         Timage,
       ],
+      content: this.editorContent,
       autofocus: 'start',
     })
   },

src/components/TimePicker/index.vue

@@ -39,7 +39,7 @@ export default Vue.extend({
           startTime = firstM._d.getTime()
           endTime = secondM._d.getTime()
       }
-
+      console.log(startTime)
       this.$emit('getNewTime',startTime,endTime)
     },
   }

src/const/columns/newsColunms.ts

@@ -3,7 +3,8 @@ const columns:Array<column>=[
   {
     title: '发布时间',
     align:'center',
-    dataIndex: 'time',
+    dataIndex: 'created_at',
+    scopedSlots: { customRender: 'created_at' },
   },
   {
     title: '资讯标题',
@@ -13,12 +14,13 @@ const columns:Array<column>=[
   {
     title: '咨询分类',
     align:'center',
-    dataIndex: 'type',
+    dataIndex: 'article_type',
+    scopedSlots: { customRender: 'type' },
   },
   {
     title: '作者名称',
     align:'center',
-    dataIndex: 'author',
+    dataIndex: 'writer',
   },
   {
     title: '新闻内容',
@@ -29,7 +31,8 @@ const columns:Array<column>=[
   {
     title: '状态',
     align:'center',
-    dataIndex: 'state',
+    dataIndex: 'article_status',
+    scopedSlots: { customRender: 'status' },
   },
   {
     title: '操作',

src/service/News/index.ts

+import baseAxios from '../index'
+
+export default class NewsService {
+  static instance: NewsService
+  static getInstance() {
+    if (!NewsService.instance) {
+      NewsService.instance = new NewsService()
+    }
+    return NewsService.instance
+  }
+
+  /**
+   * 新增资讯
+   * @param data 
+   * @returns 
+   */
+  addArticle(data: { 
+    article_type: number,
+    content: string,
+    desc: string,
+    file_name: string,
+    title: string,
+    writer: string
+  }) {
+    return baseAxios({
+      url: '/article/admin/add',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 删除新闻文章
+   * @param data 
+   * @returns 
+   */
+  delArticle(params: { uuid: string }) {
+    return baseAxios({
+      url: '/article/admin/delete/news',
+      method: 'delete',
+      params,
+    })
+  }
+
+  /**
+   * 删除政策文章
+   * @param data 
+   * @returns 
+   */
+  delPolicyArticle(params: { uuid: string }) {
+    return baseAxios({
+      url: '/article/admin/delete/policy',
+      method: 'delete',
+      params,
+    })
+  }
+
+  /**
+   * 查询列表
+   * @param data 
+   * @returns 
+   */
+  articleList(data: { 
+    article_status: number|string,
+    article_type: number|undefined,
+    end_time: number|undefined,
+    limit: number,
+    offset: number,
+    start_time: number|undefined
+  }) {
+    return baseAxios({
+      url: '/article/admin/list',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 修改资讯
+   * @param data 
+   * @returns 
+   */
+  editArticle(data: {
+    article_type: number,
+    content: string,
+    desc: string,
+    file_name: string,
+    title: string,
+    writer: string,
+    uuid: string
+  }) {
+    return baseAxios({
+      url: '/article/admin/modify',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 修改资讯状态
+   * @param data 
+   * @returns 
+   */
+  modifyStatus(data: {
+    uuid: string,
+    article_status: number,
+    article_type: number|undefined
+  }) {
+    return baseAxios({
+      url: '/article/admin/modify/status',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 模糊查询新闻标题
+   * @param data 
+   * @returns 
+   */
+  searchByTitle(data: {
+    title: string
+  }) {
+    return baseAxios({
+      url: '/article/query/fuzzy/news',
+      method: 'get',
+      params: data,
+    })
+  }
+
+  /**
+   * 模糊查询政策文章
+   * @param data 
+   * @returns 
+   */
+  searchByPolicy(data: {
+    title: string
+  }) {
+    return baseAxios({
+      url: '/article/query/fuzzy/policy',
+      method: 'get',
+      params: data,
+    })
+  }
+
+  /**
+   * 查询新闻
+   * @param data 
+   * @returns 
+   */
+  searchNews(uuid: string) {
+    return baseAxios({
+      url: '/article/query/news',
+      method: 'get',
+      params: {
+        uuid
+      },
+    })
+  }
+
+  /**
+   * 查询新闻列表
+   * @param data 
+   * @returns 
+   */
+  searchList(data: {
+    limit: number,
+    offset: number
+  }) {
+    return baseAxios({
+      url: '/article/query/news/list',
+      method: 'post',
+      data,
+    })
+  }
+
+  /**
+   * 查询政策文章
+   * @param data 
+   * @returns 
+   */
+  searchPolicy(uuid: string) {
+    return baseAxios({
+      url: '/article/query/policy',
+      method: 'get',
+      params: {
+        uuid
+      },
+    })
+  }
+
+  /**
+   * 查询政策列表
+   * @param data 
+   * @returns 
+   */
+  searchPolicyList(data: {
+    limit: number,
+    offset: number
+  }) {
+    return baseAxios({
+      url: '/article/query/policy/list',
+      method: 'post',
+      data,
+    })
+  }
+
+
+}

src/utils/days/index.ts

-function getDate(day: Date,isSmaller:Boolean) {
+export function getDate(day: Date,isSmaller:Boolean) {
   let mm:Number,dd:Number
   if(isSmaller){
     mm = day.getMonth() + 1 < 10 ?  + (day.getMonth()+1): day.getMonth()+1 ;

src/views/Root/News/detail.vue

@@ -2,21 +2,43 @@
   <div>
     <p class=" text-2xl font-bold mb-5 ">{{title}}</p>
     <p class=" text-gray-400">发布时间：{{time}} <span class=" ml-2">作者：{{name}}</span></p>
-    <p class="text-left p-5">{{content}}</p>
+    <div class="text-left p-5" v-html="content"></div>
+    <!-- <p class="text-left p-5">{{content}}</p> -->
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import News from '@/service/News/index'
+
+const news = new News()
 
 export default Vue.extend({
   data(){
     return{
-      title:'银保监会、人民银行联合出台现金管理类理财产品监管规则',
-      time:'2021-07-01',
-      name:'丁洁',
-      content:'“中国冰雪大篷车”是国家体育总局深入推进冰雪运动“南展西扩东进”战略，落实“带动三亿人参与冰雪运动”目标的重要群众性活动之一。“中国冰雪大篷车”将在为期半年的时间里，深入全国30余个城市，举办100场线下活动，同时结合持续的线上互动，以创新的体验模式、丰富的活动内容和众多的展示渠道，普及冰雪运动常识，推广冰雪运动理念，让普通大众在家门口就能感受冰雪运动的乐趣。'
+      title:'',
+      time:'',
+      name:'',
+      content:''
+    }
+  },
+  methods: {
+    getDetails() {
+      const type = this.$route.query.type
+      const uuid = this.$route.query.key as string
+      const request = +type === 1 ? 'searchPolicy' : 'searchNews'
+      news[request](uuid).then(res => {
+        console.log(res)
+        const { data } = res
+        this.time = data.created_at
+        this.name = data.writer
+        this.content = data.content
+        this.title = data.title
+      })
     }
+  },
+  created() {
+    this.getDetails()
   }
   
 })

src/views/Root/News/index.vue

@@ -5,37 +5,61 @@
     <a-input placeholder="标题模糊搜索"  v-model="searchPageReqParams.title" style="width: 150px; margin-right:10px;"/>
      <!-- timepicker -->
       <span class=" font-semibold">注册时间：</span>
-      <timerange class=" mr-3"
+      <timerange class=" mr-3" :startTime="searchPageReqParams.start_time" :endTime="searchPageReqParams.end_time"
                  @getNewTime="getNewTime"/>
       <!-- 咨询分类 -->
       <span class=" mr-3">资讯分类</span>
-      <a-select :default-value="newsType[0]" style="width: 120px; margin-right:10px;" v-model="searchPageReqParams.type">
-        <a-select-option v-for="(type,i) in newsType" :key="i">
-          {{type}}
+      <a-select :default-value="newsType[0]" style="width: 120px; margin-right:10px;" v-model="searchPageReqParams.article_type">
+        <a-select-option v-for="type in newsType" :key="type.value">
+          {{type.label}}
         </a-select-option>
       </a-select>
       <!-- 操作 -->
       <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
       <a-button type="primary" style=" margin-right:10px;" @click="reset">重置</a-button>
-      <a-button type="primary" @click="release">发布</a-button>
+      <a-button type="primary" @click="release(null, null)">发布</a-button>
       <!-- 资讯列表 -->
-      <a-table :columns="columns" :data-source="list" style=" text-align: center; margin-top:40px;" bordered >
+      <a-table
+        :columns="columns"
+        :data-source="list"
+        rowKey="columns"
+        style=" text-align: center; margin-top:40px;"
+        bordered
+        :pagination="pagination"
+        @change="tableChange">
+        <!-- 发布时间 -->
+        <span slot="created_at" slot-scope="text,record">
+          {{ record.created_at }}
+        </span>
         <!-- 新闻内容 -->
         <span slot="content" slot-scope="text,record">
-          <a @click="toDetail(record.key)">查看</a>
+          <a @click="toDetail(record.uuid, searchPageReqParams.article_type)">查看</a>
+        </span>
+        <!-- 新闻状态 -->
+        <span slot="status" slot-scope="text,record">
+          {{ record.article_status === 2 ? '已发布' : '未发布' }}
+        </span>
+        <!-- 新闻分类 -->
+        <span slot="type">
+          {{ searchPageReqParams.article_type === 2 ? '新闻' : '政策' }}
         </span>
         <!-- 操作 -->
         <span slot="action" slot-scope="text,record">
-          <a  v-if="record.state=='已下架'" 
-              @click="add(record.key)">
+          <a  v-if="record.article_status==1" 
+              @click="add(record)">
               上架
           </a>
-          <a  v-else
-              @click="remove(record.key)">
+          <a  v-else-if="record.article_status === 2"
+              @click="remove(record)">
               下架
           </a>
-          <a-divider type="vertical" />
-          <a  @click="onDelete(record.key)">
+          <a-divider  type="vertical" />
+          <a  v-show="record.article_status==1" 
+              @click="release(record.uuid, searchPageReqParams.article_type)">
+              编辑
+          </a>
+          <a-divider v-show="record.article_status==1" type="vertical" />
+          <a  @click="onDelete(record)">
               删除
           </a> 
         </span>
@@ -56,10 +80,14 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { newsList } from '@/mock/index'
 import { columns } from '@/const/columns/newsColunms'
 import { modal } from './const'
+import { getDate } from '@/utils/days/index'
 import timerange from '@/components//TimePicker/index.vue'
+import News from '@/service/News/index'
+import { message } from 'ant-design-vue'
+
+const news = new News()
 
 export default Vue.extend({
   components:{ timerange },
@@ -67,15 +95,21 @@ export default Vue.extend({
     columns(){
       return columns
     },
-    list(){
-      return newsList
+    getTime() {
+
     }
   },
   props:{
     newsType:{
       type:Array,
       default(){
-        return ['全部','政策','新闻']
+        return [{
+          label: '新闻',
+          value: 2
+        }, {
+          label: '政策',
+          value: 1
+        }]
       }
     }
   },
@@ -83,32 +117,76 @@ export default Vue.extend({
     return{
       show:false,
       title:'',
+      list: [],
       type:modal.on,
       text:'',
       searchPageReqParams: {
         title: '',
-        type: '',
-        startTime: undefined as undefined | number,
-        endTime: undefined as undefined | number,
+        article_status: 0,
+        article_type: 1 as undefined | number,
+        start_time: undefined as undefined | number,
+        end_time: undefined as undefined | number,
+      },
+      pagination: {
+        current: 1,
+        defaultPageSize: 10,
+        total: 0
       },
+      uuid: ''
     }
   },
+  created() {
+    this.getList()
+  },
   methods:{
+    tableChange(e: any) {
+      console.log(e)
+      this.pagination.current = e.current
+      this.getList()
+    },
+    getList() {
+      const params = {
+        ...this.searchPageReqParams,
+        limit: this.pagination.defaultPageSize,
+        // offset: 10
+        offset: (this.pagination.current - 1) * this.pagination.defaultPageSize
+      }
+      news.articleList(params).then(res => {
+        console.log(res)
+        this.list = res.data.items
+        this.pagination.total = res.data.total
+        if (this.searchPageReqParams.title) {
+          this.findTitle()
+        }
+      })
+    },
+    findTitle() {
+      const searchParams = this.searchPageReqParams.article_type === 1 ? "searchByPolicy" : "searchByTitle"
+      news[searchParams]({title: this.searchPageReqParams.title}).then(res => {
+        console.log(res)
+      })
+    },
     query(){
       console.log(this.searchPageReqParams);
+      this.getList()
     },
     getNewTime(startTime:number,endTime:number){
-      this.searchPageReqParams.startTime = startTime
-      this.searchPageReqParams.endTime = endTime
+      this.searchPageReqParams.start_time = startTime
+      this.searchPageReqParams.end_time = endTime
     },
     reset(){
-      this.searchPageReqParams.title =''
-      this.searchPageReqParams.type = ''
-      this.searchPageReqParams.startTime = undefined
-      this.searchPageReqParams.endTime = undefined    
+      this.searchPageReqParams.title = ''
+      this.searchPageReqParams.article_status = 0
+      this.searchPageReqParams.article_type = 1
+      this.searchPageReqParams.start_time = undefined
+      this.searchPageReqParams.end_time = undefined    
     },
-    release(){
-      this.$router.push({name:'publishNews'}) 
+    release(key?:string, type?:string){
+      if (key && type) {
+        this.$router.push({name:'publishNews', query: {key, type}}) 
+      } else {
+        this.$router.push({name:'publishNews'}) 
+      }
     },
     edit(key:string){
       this.$router.push({name:'publishNews',query:{key:key}}) 
@@ -116,34 +194,58 @@ export default Vue.extend({
     add(record:any){
       this.type = modal.on
       this.show = true
+      this.uuid = record.uuid
       this.title = '上架资讯'
       this.text = '确定上架该资讯吗？'
     },
     remove(record:any){
       this.type = modal.off
       this.show = true
+      this.uuid = record.uuid
       this.title = '下架资讯'
       this.text = '确定下架该资讯吗？'
     },
     onDelete(record:any){
       this.type = modal.delete
       this.show = true
+      this.uuid = record.uuid
       this.title = '删除资讯'
       this.text = '确定删除该资讯吗？'
     },
+    setStatus(status: number, msg: string) {
+      news.modifyStatus({
+        article_status: status,
+        article_type: this.searchPageReqParams.article_type,
+        uuid: this.uuid
+      }).then(res => {
+        if (res.code === 200) {
+          message.success(msg)
+          this.getList()
+        }
+      })
+    },
+    removeArticle() {
+      const props = this.searchPageReqParams.article_type === 1 ? 'delPolicyArticle' : 'delArticle'
+      news[props]({uuid: this.uuid}).then(res => {
+        if (res.code === 200) {
+          message.success('删除成功')
+          this.getList()
+        }
+      })
+    },
     handleOk(record:any){
       if( this.type == modal.on){
-
+        this.setStatus(2, '上架成功')
       } else if( this.type == modal.off){
-        
+        this.setStatus(1, '下架成功')
       } else if( this.type == modal.delete){
-        
+        this.removeArticle()
+        this.pagination.current = 1
       }
-
       this.show = false
     },
-    toDetail(key:string){
-      this.$router.push({name:'newsDetail',query:{key:key}})
+    toDetail(key:string, type:number|undefined){
+      this.$router.push({name:'newsDetail',query:{key:key,type:type}})
     }
   }
 })

src/views/Root/News/publish.vue

@@ -7,16 +7,16 @@
       <!-- 作者 -->
       <a-input v-model="author" placeholder="请输入作者名称" style="width: 35%" />
       <!-- 文章分类 -->
-      <a-select style="width: 20%" v-model="type"> 
-        <a-select-option v-for="type in articalType" :key="type">{{type}}</a-select-option>
+      <a-select style="width: 20%" v-model="type" placeholder="请选择资讯分类"> 
+        <a-select-option v-for="item in articalType" :key="item.value">{{item.label}}</a-select-option>
       </a-select>
     </div>
     <!-- 上传概要图片 -->
-    <editor-upload class=" mt-5"/>
+    <editor-upload class=" mt-5" :imgUrl.sync="imgUrl" />
     <!-- 文章概要 -->
     <a-textarea v-model="summary" :maxLength="50" placeholder="请输入文章概要，字数限制50字以内" auto-size />
     <!-- 编辑器 -->
-    <editor class="edit-news text-left mt-5"
+    <editor class="edit-news text-left mt-5" :editorContent.sync="content"
             @getContent="getContent"/>
     <!-- 发布操作 -->
     <a-button type="primary" @click="onSubmit" class=" mt-5">确定发布</a-button>
@@ -27,6 +27,10 @@
 import Vue from 'vue';
 import Editor from '@/components/Editor/index.vue'
 import EditorUpload from '@/components/Editor/editorUpload.vue'
+import News from '@/service/News/index'
+import { message } from 'ant-design-vue';
+
+const news = new News()
 
 export default Vue.extend({
   components:{ Editor,EditorUpload },
@@ -34,7 +38,13 @@ export default Vue.extend({
     articalType:{
       type:Array,
       default(){
-        return ['新闻','政策']
+        return [{
+          label: '新闻',
+          value: 2
+        }, {
+          label: '政策',
+          value: 1
+        }]
       }
     }
   },
@@ -42,16 +52,90 @@ export default Vue.extend({
     return{
       title:'',
       author:'',
-      type:'新闻',
+      type: undefined as number|any,
+      imgUrl: '',
       summary:'',
       content:''
     }
   },
+  created() {
+    this.getDetails()
+  },
   methods:{
+    getDetails() {
+      console.log(Object.keys(this.$route.query))
+      if (Object.keys(this.$route.query).length === 0) {
+        this.type = undefined
+        return
+      }
+      const type = this.$route.query.type
+      const id = this.$route.query.key as string
+      this.type = +type
+      if (+type === 1) {
+        news.searchPolicy(id).then(res => {
+          console.log(res)
+          this.initData(res.data)
+        })
+      } else {
+        news.searchNews(id).then(res => {
+          this.initData(res.data)
+        })
+      }
+    },
+    initData(res: any) {
+      this.title = res.title
+      this.author = res.writer
+      this.imgUrl = res.file_name
+      this.summary = res.desc
+      this.content = res.content
+    },
     getContent(value:string){
       this.content = value
+      console.log(value)
+    },
+    getImage(val: string) {
+      this.imgUrl = val
+    },
+    addForm() {
+      const params = {
+        article_type: this.type,
+        content: this.content,
+        desc: this.summary,
+        file_name: this.imgUrl,
+        title: this.title,
+        writer: this.author
+      }
+      news.addArticle(params).then(res => {
+        if (res.code === 200) {
+          message.success('新增成功')
+          this.$router.push({ name: 'newsManage' })
+        }
+      })
+    },
+    editForm() {
+      const params = {
+        article_type: this.type,
+        content: this.content,
+        desc: this.summary,
+        file_name: this.imgUrl,
+        title: this.title,
+        writer: this.author,
+        uuid: this.$route.query.key as string
+      }
+      news.editArticle(params).then(res => {
+        if (res.code === 200) {
+          message.success('编辑成功')
+          this.$router.push({ name: 'newsManage' })
+        }
+      })
     },
     onSubmit() {
+      console.log(this.imgUrl)
+      if (this.$route.query.key) {
+        this.editForm()
+      } else {
+        this.addForm()
+      }
       // console.log(this.content);
     },
   }