hfysite/pages/manger/news/index.vue

<script>
import {handle} from "../../../until/handle";
import axios from "axios";
import {apiMap, baseUrl} from "../../../map/apiMap";
import {rCode} from "../../../map/rcodeMap_esm";
import RoundedTitle from "../../../components/public/roundedTitle.vue";
import copy from "../../../until/copy";
import {isEmpty} from "../../../until/typeTool";
import TableSelect from "../../../components/public/tableSelect.vue";
import dbField_esm from "../../../map/dbField_esm";
import ImageViewer from "../../../components/public/imageViewer.vue";
import {timestampToTime} from "../../../until/time";

const newsColumns = [
  {
    title: "ID",
    dataIndex: 'id',
    width: '3%',
  },
  {
    title: "文章标题",
    dataIndex: 'title',
    width: '15%',
  },
  {
    title: "文章类型",
    dataIndex: 'type_key',
    width: '5%',
    scopedSlots: {customRender: 'newsType'},
  },
  {
    title: "文章封面",
    dataIndex: 'image',
    width: '20%',
    scopedSlots: {customRender: 'image'},
  },
  {
    title: "文章作者",
    dataIndex: 'source',
    width: '10%',
  },
  {
    title: "阅读量",
    dataIndex: 'hits',
    width: '5%',
  },
  {
    title: "创建时间",
    dataIndex: 'date_time',
    scopedSlots: {customRender: 'time'},
    width: '10%',
  },
  {
    title: "操作",
    scopedSlots: {customRender: 'operation'},
    width: '25%',
  },
]
export default {
  name: 'news',
  components: {ImageViewer, TableSelect, RoundedTitle},
  computed: {
    // 产品类型数据
    newsTypes(){
      let arr = [];
      if (this.form.pType.val === dbField_esm.db_base.newsType.all){
        arr = this.$store.getters.allNewsTypes;
      }else if (this.form.pType.val === dbField_esm.db_base.newsType.news){
        arr = this.$store.getters.newsTypes;
      }else if (this.form.pType.val === dbField_esm.db_base.newsType.solution){
        arr = this.$store.getters.solutionTypes;
      }
      if (arr[0].key !== 'all'){
        // 添加 all
        arr.unshift({text: '全部', key: 'all' });
      }

      return arr;
    },
  },
  data(){
    return {
      loading: false,
      newsColumns: newsColumns,
      dataList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      form: {
        pType: {
          val: dbField_esm.db_base.newsType.all,
          oldVal: dbField_esm.db_base.newsType.all,
          init: dbField_esm.db_base.newsType.all,
          msg: '',
          state: 0,
          options: [
            {text: '全部', key: dbField_esm.db_base.newsType.all},
            {text: '新闻', key: dbField_esm.db_base.newsType.news},
            {text: '解决方案', key: dbField_esm.db_base.newsType.solution},
          ]
        },
        key: {
          val: '',
          oldVal: '',
          init: '',
          msg: '',
          state: 0
        },
        type: {
          val: '',
          init: '',
          msg: '',
          state: 0,
          options: []
        },
      },
      loadErr: false,
    }
  },
  async asyncData(){
    let searchParam = {
      page: 1,
      pageSize: 10,
      key: '',
      type: 'all'
    };
    console.log('搜索文章数据');
    let [err,res] = await handle(axios.get(baseUrl + apiMap.searchAllNews.path,{params: searchParam}));
    if(err){
      console.error(err);
      return {};
    }
    let result = res.data;
    if(result.code === rCode.OK){
      return {
        dataList: result.data,
        page: 1,
        pageSize: 10,
        total: result.total,
      }
    }else{
      console.log(`搜索数据失败,${result.msg}`);
      return {}
    }
    return {}
  },
  beforeMount() {
    this.form.type.options = this.newsTypes;
    this.form.type.val = this.form.type.options[0].key;
    this.form.type.oldVal = this.form.type.val;
    this.form.type.init = this.form.type.val;
  },
  methods: {
    timestampToTime,
    copy(str){
      copy(str).then(()=>{
        this.$message.success('已经将内容复制到剪切板')
      }).catch(err=>{
        console.error(err.message);
        this.$message.error('内容复制失败,请手动复制内容')
      })
    },
    keyLight(str){
      return str.replace(this.form.key.oldVal,`<span class="text-red-500 text-xl">${this.form.key.oldVal}</span>`)
    },
    // 搜索
    async searchExecute(params = {}){
      let err,res;
      let url = apiMap.searchAllNews.path;
      console.log(params);
      // 如果没有传入参数,则使用表单数据
      if(isEmpty(params.key)){
        params.key = this.form.key.oldVal;
      }
      if(isEmpty(params.type)){
        params.type = this.form.type.oldVal;
      }
      if(isEmpty(params.pType)){
        params.pType = this.form.pType.oldVal;
      }
      params.p = this.page;
      params.l = this.pageSize;
      console.log(`搜索产品数据:${JSON.stringify(params)}`);
      this.loading = true;
      [err,res] = await handle(axios.get(url,{params}));
      this.loading = false;
      if(err){
        return this.$message.error(err.message);
      }
      let result = res.data;
      if(result.code === rCode.OK){
        console.log(`搜索成功`)
        this.form.key.oldVal = params.key;
        this.form.type.oldVal = params.type;
        this.form.pType.oldVal = params.pType;
        if (params.p === 1){
          this.$message.success('搜索成功');
          this.total = result.total;
        }
        // 触发更新,设置数据
        this.$nextTick(()=>{
          this.dataList = result.data;
        })


      }else{
        this.$message.error(result.msg);
      }
    },
    // 页码改变
    pageChange(page){
      console.log(`页码改变:${page}`);
      this.page = page;
      console.log(this.page);
      this.searchExecute();
    },
    // 页数改变
    pageSizeChange(pageSize){
      console.log('页数改变');
      this.pageSize = pageSize;
      this.searchExecute();
    },
    onSearchHandle(){
      this.page = 1;
      console.log(this.form.type.val);
      this.searchExecute({
        key: this.form.key.val,
        type: this.form.type.val,
        pType: this.form.pType.val
      });
    },
    onPTypeChange(){
      console.log('文章主类型改变');
      console.log(this.newsTypes);
      this.form.type.val = this.newsTypes[0].key;
      this.form.type.oldVal = this.newsTypes[0].key;
      this.form.type.init = this.newsTypes[0].key;
      this.form.type.options = this.newsTypes;
      this.$nextTick(()=>{
        // this.form.type.val = this.newsTypes[0].key;
        // this.form.type.oldVal = this.newsTypes[0].key;
        // this.form.type.init = this.newsTypes[0].key;
        // this.form.type.options = this.newsTypes;
        this.searchExecute({
          pType: this.form.pType.val
        });
      })
    },
    onTypeChange(){
      this.$nextTick(()=>{
        this.searchExecute({
          type: this.form.type.val
        });
      })
    },
    refreshHandel(){
      this.page = 1;
      this.searchExecute();
    },
    getProTypeText(key){
      let type = this.newsTypes.find(item=>item.key === key);
      return type ? type.text : '';
    },
    getTypeText(key){
      let type = this.form.type.options.find(item=>item.key === key);
      return type ? type.text : key;
    }

  }
}
</script>

<template>
  <div class="w-full p-2">
    <rounded-title class="text-xl">
      <span>文章管理</span>
      <a href="/manger/news/type"
         class="px-10 h-full ml-5 rounded bg-blue-400 text-white
         cursor-pointer hover:text-orange-500 ">
        文章分类管理</a>
      <a href="/manger/product/add" class="px-10 h-full ml-5 rounded bg-blue-400 text-white cursor-pointer hover:text-orange-500 ">新增文章</a>
    </rounded-title>

    <div class="w-full rounded border mt-2 bg-white p-2">
      <div class="w-full flex h-14 items-center justify-between border-b">

        <div class="flex">
<!--          文章主分类-->
          <a-radio-group class="flex flex-shrink-0  items-center" v-model="form.pType.val" @change="onPTypeChange">
            <a-radio-button class="" :value="item.key" v-for="item in form.pType.options" :key="item.key">{{item.text}}</a-radio-button>
          </a-radio-group>

          <table-select
            class="w-48 !mx-3 flex-shrink-0"
            :options="form.type.options"
            v-model="form.type.val"
            @change="onTypeChange"
          />
          <a-input-search class="!ml-2 w-64" type="text" allow-clear placeholder="产品关键字"
                          @search="onSearchHandle"
                          :loading="loading" v-model="form.key.val" />
        </div>


        <div class="flex">
          <a-button class="ml-2" type="primary" @click="refreshHandel" :loading="loading">刷新</a-button>
        </div>

      </div>
      <div class="w-full">
        <a-table
          :columns="newsColumns"
          :loading="loading"
          :row-key="record => record.id"
          :pagination="false"
          :data-source="dataList"
        >
          <template slot="newsType" slot-scope="text">
            <span>{{getTypeText(text)}}</span>
          </template>

          <template slot="image" slot-scope="text,record">
            <image-viewer :src="text?text.charAt(0) == '/'? text : '/public/'+text : '' " :alt="record.name" />
          </template>

          <template slot="keyLight" class="flex" slot-scope="text">
            <div class="w-full flex items-center">
              <div  v-html="keyLight(text)"></div>
              <svg-icon :name="'copy'" :icon-class="'copy'" class="text-2xl cursor-pointer mx-2" title="点击复制" @click.native="copy(text)" />
            </div>
          </template>
          <template slot="time" slot-scope="text">
            <span>{{timestampToTime(text)}}</span>
          </template>
          <template class="flex justify-center" slot="operation" slot-scope="text,record">
            <a-button  type="primary">
              <a :href="`/manger/news/info?id=${record.id}`">文章详情</a>
            </a-button>

            <a-button class="mx-3" type="primary">
              <a :href="`/manger/news/edit?id=${record.id}`">编辑文章</a>
            </a-button>

          </template>

        </a-table>
        <a-pagination
          class="mt-2"
          :total="total"
          :page-size="pageSize"
          :current="page"
          @change="pageChange"
          @show-size-change="pageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>