KM-Front-Milestone2/src/views/modules/knowledge/album/albumList.vue

<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit>   
        <div slot="toolheader" border="false" foldbtn="false">
          <breadcrumb firstLevel="专辑管理" lastLevel="专辑列表" />
          <div class="mainContent">
            <div class="body" :style="{'padding-right': $store.state.appSetting.collapsed ? '0px' : '20px' }">
              <div class="content">
                <a-form ref="searchForm" layout="inline" style="display:flex;">
                  <div style="width:80%;;display:flex;flex-wrap:wrap;">
                    <div style="display:flex;flex-wrap:wrap;">
                      <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="专辑名称"
                        name="name">
                        <a-input v-model="queryParam.name" placeholder="请输入"/>
                      </a-form-item>
                      <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="专辑分类"
                        name="categoryIds">
                       <a-cascader v-model="categoryIds" 
                                  :options="classifyLevelList" 
                                  :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                                  placeholder="请选择"
                                  changeOnSelect
                                  @change="handleClassifyChange" />
                      </a-form-item>
                    </div>
                    <div style="display:flex;flex-wrap:wrap;" v-if="extend" :class="{'show-other': extend}">
                      <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="负责人"
                        name="ownerName" >
                        <a-input v-model="queryParam.ownerName" placeholder="请输入" />
                      </a-form-item>
                      <!-- <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="审核状态"
                        name="categoryIds">
                       <a-cascader v-model="categoryIds" 
                                  :options="classifyList" 
                                  :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                                  placeholder="请选择"
                                  changeOnSelect
                                  @change="handleClassifyChange" />
                      </a-form-item> -->
                      <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="创建时间"
                        name="createTime" >
                        <a-range-picker v-model="createTime" 
                                        separator="→"
                                        format="YYYY/MM/DD"
                                        valueFormat="YYYY-MM-DD"
                                        @change="handleClearTimeChange">
                          <a-icon v-if="$store.state.appSetting.collapsed" slot="suffixIcon" type="calendar" />
                        </a-range-picker>
                      </a-form-item>
                    </div>
                  </div>
                  <div style="width:20%;display:flex;justify-content:flex-end;align-content: flex-start;flex-wrap:wrap;">
                    <div style="display:flex;justify-content:center;margin-top: 8px;">
                      <a-button @click="handleResetClick(true)">重置</a-button>
                      <a-button type="primary" @click="handleSearchClick">查询</a-button>
                    </div>
                    <div style="margin-top: 8px;">
                      <a-button type="link" @click="extend = !extend">
                        <template v-if="!extend">
                          <div>
                            展开
                            <a-icon type="down" />
                          </div>
                        </template>
                        <template v-else>
                          <div>
                            收起
                            <a-icon type="up" />
                          </div>
                        </template>
                      </a-button>
                    </div>
                  </div>
                </a-form>
                <rx-button :class="{'knowledge-manage':yelpNum != 0}" :data-attr="yelpNum" alias="albumListComment" :butn-icon="'false'" @click="handleJumpPathClick('comment')">点评审核</rx-button>
                <rx-button :class="{'knowledge-manage':approveNum != 0}" :data-attr="approveNum" alias="albumListAudit" :butn-icon="'false'" @click="handleJumpPathClick('album')">专辑审核</rx-button>
              </div>
            </div>
          </div>
        </div>    

        <rx-grid
          ref="albumRef"
          class="table-style"
          style="background: #fff"
          :columns="columns"
          :url="api.query"
          :queryParam="queryParam"
          data-field="result.data"
          :defaultPageSize="10"
          :pageSizeOptions="['10','20','30','40']"
          idField="pkId"
        >
          <template slot="state" slot-scope="{text,record}">
            <div>{{ record.state == 0 ? '专辑关闭' : computedState(record.versionState) }}</div>
          </template>
          <template slot="action" slot-scope="{text,record}">
            <template v-if="record.actionFlagM.length">
              <rx-button v-show="record.actionFlagM.indexOf('edit') > -1" class="clearBtn" alias="albumListEdite" :butn-icon="'none'"  @click="handleJumpUpdateClick(record)">编辑</rx-button>
              <rx-button v-show="record.actionFlagM.indexOf('delete') > -1" class="clearBtn" alias="albumListDel" :butn-icon="'none'" @click="handleDeleteClick(record)">删除</rx-button>
              <rx-button v-show="record.actionFlagM.indexOf('view') > -1" class="clearBtn" alias="albumListLook" :butn-icon="'none'" @click="handleJumpUpdateClick(record)">查看</rx-button>
            </template>
          </template>
        </rx-grid>
      </rx-fit>
    </div> 
  </rx-layout>
</template>

<script>
import breadcrumb from '../components/breadcrumb'
import api from '@/api/knowledge/album/album'
import classApi from '@/api/knowledge/classify'
import mixin from "../aMixin/mixin"
import initMixin from "../aMixin/initMixin"
const albumMixin = new mixin('album')
export default {
  name: 'knowledgeManageList',
  components: {
    breadcrumb
  },
  mixins: [ initMixin, albumMixin ],
  data() {
    return {
      api,
      classApi,
      extend: true,
      queryParam: {
        name: '',
        categoryId: '',
        ownerName: '',
        createTimeStart: '',
        createTimeEnd: '',
      },
      classifyLevelList: [],
      createTime: [],
      categoryIds: [],
      columns: [
        {
          title: '专辑ID',
          dataIndex: 'pkId',
          align: 'center',
          width: 200
        },
        {
          title: '专辑名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '所属分类',
          dataIndex: 'categoryName',
          align: 'center',
          width: 150
        },
        {
          title: '收录知识量',
          dataIndex: 'knowledgeTotal',
          align: 'center',
          width: 100
        },
          {
          title: '点评量',
          dataIndex: 'yelpTotal',
          align: 'center',
          width: 100
        },
        {
          title: '访问量',
          dataIndex: 'views',
          align: 'center',
          width: 100
        },
        {
          title: '专辑负责人',
          dataIndex: 'ownerName',
          align: 'center',
          width: 100
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
         {
          title: '状态',
          dataIndex: 'state',
          align: 'center',
          width: 100,
          scopedSlots: {customRender: 'state'}
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          align: 'center',
          width: 100
        },
        {
          title: '操作时间',
          dataIndex: 'updateTime',
          align: 'center',
        },
        { 
          title: '操作',
          dataIndex: 'action', 
          // align: 'center',
          width: 100,
          scopedSlots: {customRender: 'action'}
        }
      ],
      knowledgeList: [
        {value: null, label: '全部'},
        {value: '1', label: '文档知识'},
        {value: '2', label: '维基知识'}
      ],
      yelpNum: 0,
      approveNum: 0
    }
  },
  created() {
    let albumClassifyId = this.$route.query.pkId
    if(albumClassifyId) {
      this.queryParam.categoryId = albumClassifyId
      this.categoryIds = [ albumClassifyId ]
    }
    this.init()
  },
  computed: {
    computedState() {
      return function(state) {
        switch (state) {
          case 1:
            return '审核中'
          case 2:
            return '发布中'
          case 3:
            return '无此状态'
          case 4:
            return '已驳回'
        }
      }
    }
  },
  methods: {
    async init() {
      let yelp = await api.yelp()
      this.yelpNum = yelp.data || 0
      let approve = await api.approve()
      this.approveNum = approve.data || 0
      let res = await api.categories()
      this.classifyLevelList = this.formatData(res.data)
    },
    formatData(data) {
      const that = this
      data.forEach((element) => {
        if (element.children && element.children.length > 0) {
          that.formatData(element.children)
        } else {
          delete element.children
        }
      })
      return data
    },
    handleSearchClick() {
      if(this.createTime && this.createTime.length) {
        this.queryParam.createTimeStart = this.createTime[0]
        this.queryParam.createTimeEnd = this.createTime[1]
      }
      if(this.categoryIds && this.categoryIds.length) {
        this.queryParam.categoryId = this.categoryIds.slice('-1')[0]
      }
      this.reloadTable()
    },
    // 跳转审核管理
    handleJumpPathClick(arg) {
      if(arg == 'comment') {
        this.$router.push({
          path: '/knowledge/commentAuditList',
          query: { showOnlyUser: true }
        })
      } else {
        this.$router.push({
          path: '/knowledge/albumAuditList',
          query: { showOnlyUser: true }
        })
      }
 
    },
    // 编辑
    handleJumpUpdateClick(record) {
      this.$router.push({
        path: '/knowledge/albumInfo',
        // pkId   state: 专辑状态  versionState: 版本状态 showCheck
        query: { pkId: record.pkId, showCheck: false }
      })
    },
    // 重新加载表格
    reloadTable() {
      this.$refs.albumRef.loadData()
    },
  }
}
</script>

<style lang="less" scoped>
@gary:  #f8f8f8;
@white: #fff;
.rx-fit {
  padding: 40px!important;
  background: @gary;
  .fit-header {
    .mainContent {
      width: 100%;
      .body {
        background: @white;
        padding: 10px 0 10px 20px;
        .content {
          background: @white;

          button:first-child {
            margin-right: 20px;
          }

          >button {
            margin: 10px;
            margin-left: 0;
          }
        }
      }
    }
  }
  .table-style {
    padding: 20px;

    .clearBtn {
      background: none;
      color: #3294F7;
      text-shadow: none;
      padding: 0px 6px;
      border: none;
      box-shadow: none;
    }
  }
}
.knowledge-manage {
  position: relative;
}
.knowledge-manage::after {
  position: absolute;
  top: -11px;
  left: 76px;
  content: attr(data-attr);
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}

.show-other{
	width: 100%;
	animation:show-other-search 0.8s;
}

@keyframes show-other-search{
	0%{opacity:0;}
  50%{opacity:0.8;}
	100%{opacity: 1;}
}
</style>

<style scoped>
/deep/ .ant-btn > .anticon + span {
  margin-left: 0;
}
 /deep/.ant-table-thead > tr > th {
  text-align: center; 
  height: 54px;
}
/deep/ .ant-table-tbody > tr > td {
  height: 54px;
}
/deep/ .ant-form{
  padding: 0;
}
/deep/ .gridContent{
  border: none;
}
</style>