KM-Front-Milestone2/src/views/modules/knowledge/album/albumClassifyList.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">
              <div class="content">
                <a-form ref="searchForm" layout="inline" style="display:flex;flex-wrap:wrap;">
                  <a-form-item
                    style="width:300px;margin: 5px 40px 5px 0;"
                    label="分类名称"
                    name="name">
                    <a-input v-model="queryParam.name" placeholder="请输入"/>
                  </a-form-item>
                  <div style="display:flex;justify-content:flex-end;margin-top: 8px;">
                    <a-button @click="handleResetClick(true)">重置</a-button>
                    <a-button type="primary" @click="handleSearchClick">查询</a-button>
                  </div>
                  <!-- <div style="width:80%;display:flex;flex-wrap:wrap;">
                    <a-form-item
                      style="width:300px;margin: 5px 40px 5px 0;"
                      label="分类名称"
                      name="name">
                      <a-input v-model="queryParam.name" placeholder="请输入"/>
                    </a-form-item>
                  </div>
                  <div style="width:20%;display:flex;justify-content:flex-end;margin-top: 8px;">
                    <a-button @click="handleResetClick(true)">重置</a-button>
                    <a-button type="primary" @click="handleSearchClick">查询</a-button>
                  </div> -->
                </a-form>
                <rx-button alias="albumClassifyListAdd" :butn-icon="'none'" @click="handleAddClassClick">新增分类</rx-button>
              </div>
            </div>
          </div>
        </div>
        <rx-grid
          ref="albumClassifyRef"
          class="table-style"
          style="background: #fff"
          :columns="columns"
          :url="api.query"
          :queryParam="queryParam"
          data-field="result.data"
          :defaultPageSize="10"
          :heightAuto="true"
          :pageSizeOptions="['10','20','30','40']"
          idField="pkId"
        >
          <template slot="name" slot-scope="{text}">
            <div style="white-space: pre-line">{{ text }}</div>
          </template>
          <template slot="action" slot-scope="{text,record,index}">
            <rx-button class="clearBtn" alias="albumClassifyListEdit" :butn-icon="'none'" v-if="record.isSys != 1" @click="handleUpdateClassifyClick(record)">编辑</rx-button>
            <rx-button class="clearBtn" alias="albumClassifyListLook" :butn-icon="'none'" @click="handleJumpKnowledgeManage(record)">查看专辑</rx-button>
            <template v-if="isShowButton">
              <rx-button v-if="index != 0" class="clearBtn" alias="albumClassifyListRise" :butn-icon="'none'" @click="handleActionClick(record,1)">上升</rx-button>
              <rx-button v-if="index != (getDataLength(record) - 1)" class="clearBtn" alias="albumClassifyListRise" :butn-icon="'none'"  @click="handleActionClick(record,2)">下降</rx-button>
            </template>
            <rx-button class="clearBtn" alias="albumClassifyListDel" :butn-icon="'none'" v-if="record.isSys != 1" @click="handleDeleteClick(record)">删除</rx-button>
          </template>
        </rx-grid>
      </rx-fit>
      <a-modal v-model="classifyShow" 
               :title="title" 
               centered
               okText="保存"
               @ok="handleOk"
               :confirmLoading="saveLoading"
               @cancel="handleCancel">
        <a-form ref="classRef" :model="classForm" layout="inline" :label-col="{ span: 4 }">
          <a-form-item label="分类名称" prop="name">
            <a-input v-model="classForm.name" :maxLength="10" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="上级分类" prop="parent" v-if="chooseLevel != 1">
            <a-cascader v-model="classForm.parent" 
                        ref="cascader"
                        style="width: 100%;"
                        :options="classifyLevelList" 
                        :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                        placeholder="请选择上级分类，创建一级分类无需选择" />
          </a-form-item>
          <a-form-item label="排序" prop="sort">
            <div style="width:40%">
              <a-input-number v-model="classForm.sort" :min="1" />
            </div>
          </a-form-item>
        </a-form>
      </a-modal>
    </div> 
  </rx-layout>
</template>

<script>
import breadcrumb from '../components/breadcrumb.vue'
import api from '@/api/knowledge/album/classify'
import mixin from "../aMixin/mixin"
const albumClassifyMixin = new mixin('albumClassify')
export default {
  components: {
    breadcrumb
  },
  mixins: [ albumClassifyMixin ],
  data() {
    return {
      api,
      saveLoading: false,
      title: '',
      classifyShow: false,
      queryParam: {
        name: ''
      },
      columns:[
        {
          title: 'ID',
          dataIndex: 'pkId',
          align: 'center'
        },
        {
          title: '分类名称',
          dataIndex: 'name',
          // align: 'center',
          scopedSlots: {customRender: 'name'}
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          align: 'center'
        },
        {
          title: '操作时间',
          dataIndex: 'updateTime',
          align: 'center'
        },
        { 
          title: '操作',
          dataIndex: 'action', 
          // align: 'center',
          scopedSlots: {customRender: 'action'},
          width: 250
        }
      ],
      classForm: {
        pkId: '',
        name: '',
        parent: [],
        sort: 1
      },
      // 编辑时不同等级的分类数据
      classifyLevelList: [],
      // 显示上升下降按钮
      isShowButton: true,
      // 选中的分类等级
      chooseLevel: 0,
    }
  },
  computed: {
    getDataLength() {
      return function(record) {
        if(record.grade == 1) {
          return this.$refs.albumClassifyRef.getData().length
        } else {
          let levelTwo = this.$refs.albumClassifyRef.getData().find(item => item.pkId == record.parent)
          if(levelTwo.children) {
            return levelTwo.children.length
          } else {
            return 0
          }
        }
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      let res = await api.listOflevel({level: 1})
      this.classifyLevelList = JSON.parse(JSON.stringify(res.data))
    },
    // 格式化数据 disabled 编辑三分类时,只有一级分类没有二级分类,则不可选一级分类
    getData(data,disabled = false) {
      data.forEach((element) => {
        if(element.children && element.children.length > 0 && element.level == 2) {
          this.getData(element.children)
        } else {
          if(disabled && element.level == 2) {
            element.disabled = true
          } 
          delete element.children
        }
      })
      return data
    },
    // 搜索
    handleSearchClick() {
      this.isShowButton = this.queryParam.name ? false : true
      this.reloadTable()
    },
    handleAddClassClick() {
      this.title ='新增分类'
      this.chooseLevel = 0
      this.init()
      this.classifyShow = true
    },
    // 编辑页面显示
    async handleUpdateClassifyClick(record) {
      this.title = '编辑分类'
      this.chooseLevel = record.grade
      let res = await this.api.info({pkId: record.pkId})
      let gategoryId 
      if(res.data.grade == 1) {
        gategoryId = []
      } else {
        gategoryId = [res.data.parent]
      }
      this.classForm = {
        pkId: record.pkId,
        name: record.name,
        parent: gategoryId,
        sort: record.sort
      }
      this.classifyShow = true
    },
    async handleOk() {
      if(!this.classForm.name) {
        this.$message.error("请输入分类名称");
        return
      }
      if(this.chooseLevel == 2 && !this.classForm.parent.length) {
        this.$message.error("请选择上级分类");
        return
      }
      this.saveLoading = true
      let parentId = this.classForm.parent[0] ? this.classForm.parent[0] : ''
      let res
      if(this.title == '新增分类') {
        res = await this.api.save({...this.classForm, parent: parentId})
      } else {
        res = await this.api.edit({...this.classForm, parent: parentId})
      }
     
      if(res.code == 200) {
        this.reloadTable()
        this.handleCancel()
        this.saveLoading = false
      }
    },
    handleCancel() {
      this.classifyShow = false
      this.classForm = Object.assign({},this.$options.data().classForm)
    },
    handleJumpKnowledgeManage(record) {
      let pkIds
      if(record.parent == 0) {
        pkIds = [ record.pkId ]
      } else {
        pkIds = [ record.parent, record.pkId ]
      }
      this.$router.push({
        path: '/knowledge/albumList',
        query: {pkIds: JSON.stringify(pkIds)}
      })
    },
     // 重新加载表格
    reloadTable() {
      this.$refs.albumClassifyRef.loadData()
    }
  }
}
</script>

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

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

          >button {
            margin: 10px;
            margin-left: 0;
          }
        }
      }
    }
  }
  .table-style {
    padding: 20px;
    min-height: 400px;
    .clearBtn {
      background: none;
      color: #3294F7;
      text-shadow: none;
      padding: 0px 6px;
      border: none;
      box-shadow: none;
    }
  }

}
.show-other{
	width: 100%;
	animation:show-other-search 0.8s;
}
.form-item-style {
  margin: 5px 20px 5px 0;
}
.set-input {
  width:180px;
}
@keyframes show-other-search{
	0%{opacity:0;}
  50%{opacity:0.8;}
	100%{opacity: 1;}
}

</style>
<style scoped>
/deep/   .divdefault {
  position: inherit!important;
}
/deep/ .ant-table-row-expand-icon{
  position: relative;
    z-index: 100;
}
/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;
}
/deep/ .gridContent .ant-table-content .ant-table-tbody>tr>td:nth-child(2) {
  padding-left: 60px!important;
}
</style>