hfysite/pages/manger/news/type.vue

<script>

import RoundedTitle from "../../../components/public/roundedTitle.vue";
import PopCard from "../../../components/public/popCard.vue";
import TypeEdit from "../../../components/typeEdit.vue";
import Pop from "../../../components/public/pop.vue";
import ImageTable from "../../../components/public/imageTable.vue";
import ImageViewer from "../../../components/public/imageViewer.vue";
import TableSelect from "../../../components/public/tableSelect.vue";
import {handle} from "../../../until/handle";
import axios from "axios";
import {apiMap} from "../../../map/apiMap";
import {rCode} from "../../../map/rcodeMap_esm";
import dbField_esm from "@/map/dbField_esm";

const typeColumns = [
  {
    title: 'ID',
    dataIndex: 'type_id',
    width: '5%',
  },
  {
    title: '图标',
    dataIndex: 'type_logo',
    width: '10%',
    scopedSlots: {customRender: 'type_logo'},
  },
  {
    title: '类型名称',
    dataIndex: 'type_name',
    width: '15%',
  },
  {
    title: '类型关键字',
    dataIndex: 'type_key',
    width: '20%',
  },
  {
    title: '搜索关键字',
    dataIndex: 'seo_key',
    width: '30%',
    scopedSlots: {customRender: 'seo_key'},
  },
  {
    title: '操作',
    scopedSlots: {customRender: 'operation'},
  }
];
export default {
  name: 'newsType',
  components: {ImageTable, TypeEdit, PopCard, Pop, ImageViewer, TableSelect, RoundedTitle},
  data() {
    return {
      typeColumns,
      loading: false,
      types: [],
      page: 1,
      pageSize: 10,
      typeEditShow: false,
      parentType: dbField_esm.db_base.newsType.solution,
      parentTypes: [
        {
          key: dbField_esm.db_base.newsType.solution,
          value: '解决方案',
        },
        {
          key: dbField_esm.db_base.newsType.news,
          value: '新闻',
        },

      ]
    }
  },
  beforeMount() {
    this.getTypes();
  },
  computed: {
    showTypes() {
        return this.types.filter(item =>
          item.parent_type === this.parentType);
    }
  },
  methods: {
    // 获取文章类型列表
    async getTypes() {
      this.loading = true;
      let [err, res] = await handle(axios.get(apiMap.newsTypes.path));
      this.loading = false;
      if (err) {
        this.$message.error(err);
        return {};
      }
      let result = res.data;
      if (result.code !== rCode.OK) {
        this.$message.error(result.msg);
        return {};
      }
      console.log(result.data)
      this.types = result.data;
    },
    parseTags(tagArrStr){
      let tags = tagArrStr
      if (!tags) {
        return [];
      }
      // 去除空字符串
      tags = tags.replace(/\s/g,'')
      let tagArr = tags.split(',')
      // 标签去重
      tagArr = [...new Set(tagArr)]
      // 移除空标签
      tagArr = tagArr.filter(item => item)
      return tagArr
    },
    handleAddType() {
      this.opentypeEdit();
      this.$nextTick(() => {
        this.$refs.type_edit.init("文章类型", apiMap.addNewsType.path,
          {
            parent_type: this.parentType,
          })
      })
    },
    parentTypeChange(value) {
      if (!this.typeEditShow )
      {
        return;
      }
      this.$nextTick(() => {
        this.$refs.type_edit.updateQueryParams({
          parent_type: this.parentType,
        });
      })
    },
    handleEditType(item){
      //
      this.opentypeEdit();
      this.$nextTick(() => {
        this.$refs.type_edit.init("文章类型",
          apiMap.editNewsType.path, item,
          {
            parent_type: this.parentType,
          }
          );
      })
    },
    handleDeleteType(item){
      // 询问是否要删除
      this.$confirm({
        content: '确定要删除吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.executeDeleteType(item);
        }});
    },
    handleCloseEdit(){
      this.closeTypeEdit();
    },
    opentypeEdit(){
      this.typeEditShow = true;
    },
    closeTypeEdit(){
      this.typeEditShow = false;
      this.getTypes();
    },
    async executeDeleteType(item){
      let url = apiMap.productDeleteType.path;
      url += `?id=${item.type_id}`
      let [err,res] = await handle(axios.delete(url, {id: item.type_id}));
      if(err){
        this.$message.error(`[删除类型] 失败:${err.message}`)
        console.log(err)
        return err
      }
      let result = res.data
      if(result.code !== rCode.OK) {
        this.$message.error(`[移除类型] 失败:${result.msg}`)
        return result
      }
      this.$message.success(`[移除类型] 成功`)
      this.closeTypeEdit();
    }
  }
}

</script>

<template>
  <div class="w-full p-2 h-full" >
    <rounded-title class="text-xl">
      <span>文章分类管理</span>
      <a href="/manger/news"
         class="inline-flex px-10 h-full ml-5 rounded bg-blue-400 text-white cursor-pointer
         hover:text-orange-500 ">文章中心</a>
      <a-button
        class="ml-2 flex items-center"
        type="primary"
        @click="handleAddType"
      >新增
      </a-button>
    </rounded-title>
    <div class="w-full rounded border mt-2 bg-white p-2">
<!--      tab 选择 -->
      <a-radio-group
        v-model="parentType"
        @change="parentTypeChange"
      >
        <a-radio-button
          v-for="item in parentTypes"
          :key="item.key"
          :value="item.key"
        >
          {{ item.value }}
        </a-radio-button>
      </a-radio-group>
      <!--      一级分类 -->
      <a-table
        :columns="typeColumns"
        :loading="loading"
        :row-key="record => record.id"
        :pagination="false"
        :data-source="showTypes"
      >
        <template class="logo_view" slot="type_logo" slot-scope="text,record">
          <svg-icon :class="''" :svgHref="text"></svg-icon>
        </template>
        <template class="tags" slot="seo_key" slot-scope="text,record">
          <a-tag
            v-for="tag in parseTags(text)"
            :key="tag"
            color="#2db7f5"
          >
            {{ tag }}
          </a-tag>
        </template>
        <template class="flex justify-center" slot="operation" slot-scope="text,record">
          <a-button
            type="primary"
            @click="handleEditType(record)"
          >编辑
          </a-button>
          <a-button type="danger" @click="handleDeleteType(record)">移除</a-button>
        </template>
      </a-table>
    </div>



    <pop :show="typeEditShow" :loading="loading">
      <pop-card>
        <template slot="close-group">
          <a-button type="danger" @click="handleCloseEdit">关闭</a-button>
        </template>
        <type-edit ref="type_edit" @close="handleCloseEdit"></type-edit>
      </pop-card>
    </pop>
  </div>
</template>

<style scoped>

</style>