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

<template>
  <rx-layout>
    <div slot="center" style>
      <div class="mainContent">
        <breadcrumb firstLevel="专辑管理" lastLevel="专辑详情" />
        <div class="body-head">
          <div class="body-head-title">
            <div>基本信息</div>
            <div>
              <a-button v-if="actionFlag.indexOf('transfer') > -1" style="margin-right: 20px;" type="primary" @click="showAuditFlag = true">转移负责人</a-button>
              <a-button v-if="actionFlag.indexOf('open') > -1" type="primary" @click="handleSwitchClick" :loading="saveLoading">开启专辑</a-button>
              <a-button v-if="actionFlag.indexOf('close') > -1" type="primary" @click="handleSwitchClick" :loading="saveLoading">专辑关闭</a-button>
            </div>
          </div>
          <div class="body-head-details">
            <div>
              <div>
                <span>专辑名称: {{ baseInfo.name }}</span>
                <span>专辑负责人: {{ baseInfo.owner }}</span>
                <span>创建时间: {{ baseInfo.createTime }}</span>
              </div>
              <div>
                <span>所属公司: {{ baseInfo.ownerCompany }}</span>
                <span>所属部门: {{ baseInfo.ownerDepartment }}</span>
                <span>专辑分类: {{ baseInfo.categoryName }}</span>
              </div>
              <div>
                <span>阅读数量: {{ baseInfo.views }}</span>
                <span>点评数量: {{ baseInfo.yelpTotal }}</span>
                <span>发布状态: {{ baseInfo.versionState }}</span>
              </div>
            </div>
            <div>
              <img :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+baseInfo.cover" alt="">
            </div>
          </div>
        </div>
        <div class="body-content" v-if="tabsList.length">
          <a-tabs v-model="tabsKeys" size="large" :animated="false" @change="handleTabChange">
            <a-tab-pane v-for="(item,index) in tabsList" :key="index + 1 + ''" :tab="computedTabName(item)">
              <!--  专辑简介  -->
              <div class="album-desc"> 
                <div>专辑简介</div>
                <div>{{ versionInfo.summary }}</div>
              </div>
              <a-divider />
               <!--  专辑目录  -->
              <template v-if="catalogInfo.length">
                <div class="album-catalog">
                  <div>专辑目录</div>
                  <album-catalog :catalogInfo="catalogInfo" @handleRemoveId="setId" />
                </div>
                <!--  专辑page  -->
                <div class="album-page">
                  <a-pagination
                    v-model="queryParam.pageNo"
                    :page-size-options="pageSizeOptions"
                    :total="total"
                    show-size-changer
                    showQuickJumper
                    :page-size="queryParam.pageSize"
                    @showSizeChange="handleShowSizeChange"
                    @change="onChange"
                  >
                  <template slot="buildOptionText" slot-scope="props">
                    <span>{{ props.value }}条/页</span>
                  </template>
                  </a-pagination>
                </div>
              </template>
              <template v-else>
                <div class="album-catalog">
                  <div>专辑目录</div>
                  <div style="text-indent: 2em">无内容</div>
                </div>
              </template>
              <!--  专辑审批   -->
              <!-- 审核页进入的并且版本状态是审核中的才能审批-->
              <template v-if="showCheck && item.state == 1">
                <div class="album-check">
                  <div>专辑审批</div>
                  <a-radio-group v-model="auditForm.result" style="margin-bottom: 16px;">
                    <a-radio value="1">通过</a-radio>
                    <a-radio value="0">驳回</a-radio>
                  </a-radio-group>
                  <a-input v-model="auditForm.remark" type="textarea" :autosize="{minRows: 3, maxRows: 6}" :maxLength="200" placeholder="请输入审批意见" />
                  <a-row :gutter="24" type="flex" justify="end" style="margin-top: 20px;padding-right:12px;">
                    <a-button style="margin-right: 20px;" @click="$router.back()">取消</a-button>
                    <a-button type="primary" :loading="saveLoading" @click="handleCheckClick">保存</a-button>
                  </a-row>
                </div>
              </template>
              <a-divider />
              <!--  专辑审批记录  -->
              <div class="album-check-record">
                <div>专辑审批记录</div>
                <div>
                  <a-table :columns="approverColumns" :data-source="versionInfo.approvalFlows" :pagination="false">
                  </a-table>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
        <!-- 点评信息 -->
        <template> 
          <div class="body-footer">
            <template v-if="yelpList.length">
              <div>点评信息</div>
              <a-collapse v-model="collapseCheckKey" @change="handlePanelChange">
                <a-collapse-panel v-for="(item,index) in yelpList" :key="index + 1 + ''" :style="(yelpList.length != index + 1) && panelStyle">
                  <!-- head -->
                  <div slot="header" class="collapse-check">
                    <div>
                      <img :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+item.createPhoto" style="width:20px;height:20px;border-radius:50%;" alt="">
                      <span>{{ item.createName }}</span>
                    </div>
                    <div>
                      {{ item.content  }}
                    </div>
                    <div>
                      <span>{{ item.createTime  }}</span>
                      <a-button type="link" @click="handleRemarkDelClick(index,item.pkId)">删除</a-button>  
                    </div>
                  </div>
                  <!-- body -->
                  <template v-if="item.replies">
                    <div style="padding-right: 6px;" v-for="(iten,indey) in item.replies" :key="indey" class="collapse-check">
                      <div>
                        <img :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+iten.createPhoto" style="width:20px;height:20px;border-radius:50%;" alt="">
                        <span>{{ iten.createName }}</span>
                      </div>
                      <div>
                        {{ iten.content }}
                      </div>
                      <div>
                        <span>{{ iten.createTime }}</span>
                        <a-button type="link" @click="handleReplyDelClick(index,indey,iten.pkId)">删除</a-button>  
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div>无内容</div>
                  </template>
                  <div v-if="item.replyCount > 2" class="show-return-info" @click="handleMoreClick(item.pkId)">
                    查看全部{{ item.replyCount - 2 }}条回复内容>
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </template>
            <template v-else>
              <div>点评信息</div>
              <div>无内容</div>
            </template>
            <a-row :gutter="24" type="flex" justify="end" style="margin-top: 20px; padding-right:12px;">
              <a-button style="margin-right: 20px;" @click="$router.back()">取消</a-button>
              <a-button v-if="actionFlag.indexOf('edit') > -1" type="primary" :loading="saveLoading" @click="handleSaveClick">保存</a-button>
            </a-row>
          </div>
        </template>
      </div>  
      <a-modal v-model="showAuditFlag" 
            width="1100"
            title="选择组织人员" 
            centered
            okText="保存"
            @ok="handleOk">
        <org-people style="width:1100px;height:540px;" isOnlyChoosePeople @transCheckedTarget="transCheckedTarget"></org-people>
      </a-modal>    
    </div> 
  </rx-layout>
</template>

<script>
import breadcrumb from '../components/breadcrumb'
import orgPeople from './components/orgPeople'
import albumCatalog from './components/albumCatalog.vue'
import api from '@/api/knowledge/album/albumInfo'
import albumAuditApi from '@/api/knowledge/album/albumAudit'
export default {
  name: 'albumInfo',
  components: {
    breadcrumb,
    albumCatalog,
    orgPeople
  },
  data() {
    return {
      saveLoading: false,
      api,
      // 专辑id
      pkId: '',
      showCheck: false,
      baseInfo: {
        name: '',
        owner: '',
        createTime: '',
        ownerCompany: '',
        ownerDepartment: '',
        categoryName: '',
        views: '',
        yelpTotal: '',
        versionState: '',
        cover: ''
      },
      actionFlag: [],
      tabsList: [],
      tabsKeys: '1',
      // 版本id
      versionId: '',
      versionInfo: {
        summary: '',
        // 审核id
        approvalId: '',
        approvalFlows: []
      },
      approverColumns: [
        {
          title: '流程节点',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '审批人',
          align: 'center',
          dataIndex: 'actualApproverName',
        },
        {
          title: '审批状态',
          align: 'center',
          dataIndex: 'approvalStatus',
        },
        {
          title: '审批备注',
          align: 'center',
          dataIndex: 'comment',
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'approvalTime'
        },
      ],
      catalogInfo: [],
      pageSizeOptions:  ['3', '10', '20', '30'],
      queryParam: {
        pageNo: 1,
        pageSize: 3,
        sortField: "",
        sortOrder:"asc",
        params:{
          // 专辑id  版本id
          albumId: '',
          versionId: ''
        }
      },
      total: 0,
      collapseCheckKey: '1',
      yelpList: [],
      yelpIndexInfo: [],
      auditForm: {
        pkIds: [],
        result: '1',
        remark: ''
      },
      panelStyle: 'border-bottom: 5px solid #fff;',
      showAuditFlag: false,
      // 目标人id
      target: '',
      catalogueIdAndKnowledgeList: {},
      yelps: []
    }
  },
  created() {
    this.pkId = this.$route.query.pkId
    this.showCheck = this.$route.query.showCheck
    this.init()
  },
  beforeDestroy() {
    this.baseInfo = Object.assign({},this.$options.data().baseInfo)
    this.versionInfo = Object.assign({},this.$options.data().versionInfo)
    this.catalogInfo = Object.assign({},this.$options.data().catalogInfo)
    this.auditForm = Object.assign({},this.$options.data().auditForm)
  },
  computed: {
    computedTabName() {
      return function(item) {
        return item.createTime.split(' ')[0] + ' (' + item.stateName + ')'
      }
    }
  },
  methods: {
    async init() {
      let detailData = await api.detail({pkId: this.pkId})
      let detailInfo = detailData.data
      this.baseInfo = { ...detailInfo, versionState: this.getVersionStateName(detailInfo.versionState)}
      this.actionFlag = detailInfo.actionFlag
      this.tabsList = detailInfo.versions || []
      if(this.tabsList.length) {
        this.versionId = this.tabsList[0].pkId
        this.getCatalogData()
        api.yelp({albumId: this.pkId}).then(res => {
          if(res.code == 200) {
            if(res.data.length) {
              this.yelpList = res.data
            }
          }
        })
      }
    },
    async getCatalogData() {
      api.version({pkId: this.versionId}).then(res => {
        if(res.code == 200) {
          this.versionInfo = { ...res.data }
        }
      })
      this.queryParam.params.albumId = this.pkId
      this.queryParam.params.versionId = this.versionId
      api.catalogue(this.queryParam).then(res => {
        if(res.code == 200) {
          this.total = res.result.totalCount
          this.catalogInfo = res.result.data
        }
      })
    },
    getVersionStateName(state) {
      switch (state) {
        case 1:
          return '审核中'
        case 2:
          return '发布中'
        case 3:
          return '无此状态'
        case 4:
          return '已驳回'
      }
    },
    // 关闭专辑
    handleSwitchClick() {
      this.saveLoading = true
      api.close({pkId: this.pkId}).then(res => {
        if(res.code == 200) {
          if(this.actionFlag.indexOf('open') > -1) {
            this.$message.success('开启成功')
          } else {
            this.$message.success('关闭成功')
          }
          setTimeout(() => 
            {
              this.$router.back()
              this.saveLoading = false
            }
          , 500)
        }
      })
    },
    // 转移负责人
    transCheckedTarget(arg) {
      this.target = arg.approverId
    },
    // 确认转移负责人
    handleOk() {
      if(!this.target) {
        this.$message.error('请选负责人')
        return
      }
      let data = {
        pkId: this.pkId,
        target: this.target
      }
      api.transferOwner(data).then(res => {
        if(res.code == 200) {
          this.showAuditFlag = false
          setTimeout(() => 
            {
              this.$router.back()
            }
          , 500)
        }
      })
    },
    // 切换tab
    handleTabChange(arg) {
      this.versionId = this.tabsList[(arg - 1)].pkId
      this.getCatalogData()
    },
    // 每页条数
    handleShowSizeChange(current, pageSize) {
      this.queryParam.pageNo = current
      this.queryParam.pageSize = pageSize;
      this.getCatalogData()
    },
    // 跳转
    onChange(pageNumber) {
      this.queryParam.pageNo = pageNumber
      this.getCatalogData()
    },
    // 审核
    handleCheckClick() {
      this.handleCheckClick = false
      this.auditForm.pkIds = [ this.versionInfo.approvalId ]
      albumAuditApi.approve(this.auditForm).then(res => {
        if(res.code) {
          setTimeout(() => 
            {
              this.$router.back()
              this.saveLoading = false
            }
          ,1000)
        }
      })
    },
    // 切换点评
    handlePanelChange(key) {
      // if(!key.length) return
      // let repliesData = this.yelpList[key[0] - 1].replies
      // this.yelpIndexInfo = repliesData.length < 2 ? repliesData : repliesData.slice(0,2)
    },
    // 显示更多回复
    handleMoreClick(yelpId) {
      // this.yelpIndexInfo = this.yelpList[parseInt(this.collapseCheckKey) - 1].replies
      let query = {
        pageNo: 1,
        pageSize: 100,
        sortField: "",
        sortOrder:"asc",
        params:{
          // 专辑id
          albumId: this.pkId,
          // yelpId
          yelpId: yelpId
        }
      }
      // 暂时还没写
      // api.queryComment(query).then(res => {
      //   if(res.code == 200) {
      //     this.yelpList[parseInt(this.collapseCheckKey) - 1].replies.push(...res.data)
      //   }
      // })
    },
    // 添加要删除的知识
    setId(arg) {
      if(arg.pkId in this.catalogueIdAndKnowledgeList) {
        this.catalogueIdAndKnowledgeList[arg.pkId].push(arg.knowledgeId)
      } else {
        this.catalogueIdAndKnowledgeList[arg.pkId] = [arg.knowledgeId]
      }
    },
    // 删除点评信息
    handleRemarkDelClick(index,pkId) {
      this.yelpList.splice(index, 1)
      this.yelps.push(pkId)
    },
    // 删除回复信息
    handleReplyDelClick(index,indey,pkId) {
      this.yelpList[index].replies.splice(indey, 1)
      this.yelps.push(pkId)
    },
    // 保存
    handleSaveClick() {
      this.saveLoading = true
      let query = {
        pkId: this.pkId,
        versionId: this.versionId,
        catalogueIdAndKnowledgeList: this.catalogueIdAndKnowledgeList,
        yelps: this.yelps
      }
      api.removeKnowledgeAndYelp(query).then(res => {
        if(res.code == 200) {
          setTimeout(() => 
            {
              this.$router.back()
              this.saveLoading = false
            }
          ,1000)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@gary:  #f8f8f8;
@white: #fff;
@fontSize: 17px;
.mainContent {
  min-height: 100%;
  width: 100%;
  padding: 40px;
  background: #f8f8f8;
  position: relative;
  .ant-breadcrumb {
    position:absolute;
    top:10px;
  }
  .body-head {
    height: 100%;
    background: @white;
    padding: 20px 40px;

    .body-head-title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      >div:first-child {
        font-size: @fontSize;
      }
    }

    .body-head-details {
      margin-top: 15px;
      display:flex;

      >div:first-child {
        flex: 1; 
        display: flex;
        flex-direction: column;

        div {
          display: flex;
          justify-content: space-between;
          // align-items: center;
          flex:1;

          span {
            display: inline-block;
            width: 100%;
            white-space: pre-line;
          }
        }
      }

      >div:last-child {
        width: 198px;
        height: 120px;
        flex-shrink: 1;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .body-content {
    background: @white;
    padding: 20px 15px 20px 40px;
    margin-top: 20px;

    .album-desc {
      >div:first-child {
        font-size: @fontSize;
      }

      >div:last-child {
        margin-top: 20px;
        text-indent:2em;
        padding-right: 40px;
      }
    }

    .album-catalog {
      
      >div:first-child {
        font-size: @fontSize;
        margin-bottom: 20px;
      }
    }

    .album-page {
      width: 100%;;
      margin-top: 20px;
      text-align: right;
    }

    .album-check {
      width: 95%;

      >div:first-child {
        font-size: @fontSize;
        margin-bottom: 20px;
      }
    }

    .album-check-record {
      >div:first-child {
        font-size: @fontSize;
        margin-bottom: 20px;
      }

      >div:last-child {
        width: 70%;
      }
    }
  }
  .body-footer {
    background: @white;
    padding: 20px 15px 20px 40px;
    margin-top: 20px;

    >div:first-child {
      font-size: @fontSize;
      margin-bottom: 20px;
    }

    .collapse-check {
      padding-right: 20px;

      >div:nth-child(1) {
        display: flex;
        align-items: center;

        img {
          width:20px;
          height:20px;
          border-radius:50%;
        }

        span {
          margin-left: 15px;
        }
      }

      >div:nth-child(2) {
        margin: 10px 0;
      }

      >div:nth-child(3) {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        span {
          color: #aaa;
        }

        button {
          padding: 3px;
        }
      }
    }
  }
}
.show-return-info {
   width: 200px;
   padding: 5px 20px;
   background: #f0f2f5;
   color: #aaa;
   cursor: pointer;
}
.clearBtn {
  background: none;
  color: #3294F7;
  text-shadow: none;
  padding: 0px 6px;
  border: none;
  box-shadow: none;
}

</style>
<style scoped>
/deep/.ant-btn > .anticon + span {
  margin-left: 0;
}
/deep/ .ant-tabs-bar {
  padding-left: 0;
}
/deep/ .ant-collapse {
  border-radius: 0px;
}
/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
  top: 24px;
}
/deep/ .ant-collapse-content {
  border: none;
}
/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 20px 30px 15px 50px;
}
/deep/ .ant-input {
  border-radius: 0;
}
/deep/ .ant-pagination {
  margin: 1px;
}
 /* /deep/.ant-table-thead > tr > th {
  text-align: center; 
  height: 54px;
}
/deep/ .ant-table-tbody > tr > td {
  height: 54px;
} */
/deep/ .ant-modal-footer {
    padding: 10px 24px;
}
</style>