scrm-vue/src/scrm_pages/article/acticleCategory.vue

<template>
    <div class="main-contain">
      <div class="position">
        <bread-crumb :crumbs='crumbs'></bread-crumb>
        <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate()">添加分类</el-button>
      </div>
      <div class="app-container">
        <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
          <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
          <el-button size="small" icon="el-icon-delete" @click="openDeleteCategorys">批量删除</el-button>

        </div>

        <el-row :gutter="12" style="margin-top: 10px">
          <el-table
            border
            highlight-current-row
            ref="multipleTable"
            :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
            :data="articsData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column label="分类名称" align="center">
              <template slot-scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>

            <el-table-column label="所属文章数量" align="center">
              <template slot-scope="scope">
                {{scope.row.num}}
              </template>
            </el-table-column>

            <el-table-column label="分类排序" align="center">
              <template slot-scope="scope">
                {{scope.row.order}}
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">

              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                    @click="openEdit(scope.row,scope.$index)">
                  </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="openDelete(scope.row,scope.$index)">
                  </el-button>
                </el-tooltip>

              </template>
            </el-table-column>

          </el-table>

         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]"
            :page-size="10"
            background
            style="margin-top:20px;"
            align="right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
           <!-- 添加分类 -->
           <create-article-form ref="createArticleForm" :articsData="articsData"></create-article-form>
           <!-- 编辑分类 -->
           <edit-article-form ref="editArticleForm" :artilceIndex="artilceIndex" :form="articData" :articsData="articsData" ></edit-article-form>
         
        </el-row>
      </div>
    </div>
</template>

<script>
  import BreadCrumb from '../components/bread-crumb'
  import CreateArticleForm from "./components/CreateArticleForm";
  import EditArticleForm from "./components/EditArticleForm";
  import { GetCategorys,DeleteCategorys } from '@/api/act/submitinfo';
  export default {
    name: 'acticleCategory',
    components:{
      BreadCrumb,
      CreateArticleForm,
      EditArticleForm,
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/acticleCategory', name: '发布文章' }
        ],
        articsData:[],
        articData:{
          name:'',
          summary:'',
          order:'',
          id:0,
        },
        total:0,
        listQuery:{
          page:1,
          limit:10,
          name:'',
          summary:'',
          order:'',
        },
         artilceIndex:0,
         checkAllStatus:false,
      }
    },

    methods:{
      openCreate(){
        this.$refs.createArticleForm.open();
      },
      GetCategorys(){
        GetCategorys(this.listQuery).then(response=>{
             console.log(response.data.state)
             if(response.data.state === 1){
               this.articsData = response.data.data.category 
               console.log(this.articsData)
               this.total = response.data.data.total
             }
        })
      },
       handleSizeChange(limit) {
            this.listQuery.limit = limit;
            this.GetCategorys();
        },
        handleCurrentChange(page) {
            this.listQuery.page = page;
            this.GetCategorys();
        },
        openEdit(row,index){          
            for(const key in this.articData){
               if(key in row){
                 this.articData[key] = row[key]
               }
            }
            console.log("是什么",this.articData) 
            console.log("heh",this.articsData)  
             this.artilceIndex = index 
             this.$refs.editArticleForm.open();        
        },
          changeCheck(){
          this.$refs.multipleTable.clearSelection();
          if (this.checkAllStatus) {
            this.$refs.multipleTable.toggleAllSelection();
            }
           },
        openDelete(row,index){
          this.$confirm('确认要删除该分类名称吗？<br>删除后，该分类名称信息将无法恢复',{
             dangerouslyUseHTMLString:true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'   
          }).then(()=>{
            var ids = [];
            ids.push(row.id);
            DeleteCategorys({ids:ids}).then(response=>{
                var res = response.data;
                if(res.state === 1){
                    this.articsData.splice(index,1);
                    this.$message.success("删除会员成功");
                }else{
                   this.$message.error(res.msg);
                }
            }).catch(e=>{});
          }).catch(() => {
            return false        
          });
        },
          handleSelectionChange(val){
          this.selectedMembers = val;
        },
        openDeleteCategorys(){
            if (this.selectedMembers.length==0) {
            this.$message.error("请选择要删除的会员");
            return false;
          }   

          this.$confirm('确认要删除所选的分类名称吗？<br>删除后，分类名称信息将无法恢复', '删除提示',{
             dangerouslyUseHTMLString:true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
          }).then(()=>{
              var ids = [];
              var idMap = {};
              for (const index in this.selectedMembers) {
                ids.push(this.selectedMembers[index].id);
                idMap[this.selectedMembers[index].id] = this.selectedMembers[index].id;
            }
            DeleteCategorys({ids:ids}).then(response=>{
               var res = response.data;
               if(res.state ===1){
                 var articsDatalength = this.articsData.length;
                  for (let index = articsDatalength-1; index >= 0; index--) {
                  if(this.articsData[index].id in idMap) {
                    this.articsData.splice(index, 1);
                  }                  
                }
                 this.$message.success("删除会员成功");
               }else{
                 this.$message.error(res.msg);
              }
            }).catch(e=>{});
          }).catch(() => {
            return false        
          });
        },
    },
     created(){
         this.GetCategorys()
       }
  }
</script>

<style scoped>

</style>