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

<template>
  <div class="contentDataMain">
    <div class="userTop" v-if="!isAdd">
      <div class="userMidle">
        <div class="albumTitle">
          <div>{{detailDataBase.name}}</div>
          <div class="categoryBox">
            <div v-for="(item0, index) in detailDataBase.categoryArr" :key="index">
              <div>
                {{item0}}
              </div>
              <a-divider v-if="index!=(detailDataBase.categoryArr.length-1)" class="lineBox" type="vertical" />
            </div>
          </div>
          <div :class="'approvalBox stateBox'+detailDataBase.versionState" v-if="detailDataBase.versionStateName!=''&&detailDataBase.versionStateName!=null&&detailDataBase.versionState!=2">
            {{ detailDataBase.versionStateName }}
          </div>
        </div>
        <div class="albumUserList">
          <img class="albumHead" :src="header0"/>
          <div>{{detailDataBase.owner}}</div>
          <div>{{detailDataBase.ownerCompany}}-{{detailDataBase.ownerDepartment}}</div>
        </div>
        <div class="albumTimesList">
          <div class="timesBox">
            <div>{{detailDataBase.views}}</div>
            <div>阅读量</div>
          </div>
          <div class="timesBox">
            <div>{{detailDataBase.yelpTotal}}</div>
            <div>点评量</div>
          </div>
        </div>
        <div class="button-group" v-if="detailDataBase.actionFlag.indexOf('edit')>-1">
          <a-button style="background:#406CC4;color:#fff;margin-right: 1.14583vw;" @click="changeEdite">编辑</a-button>
          <a-button @click="$router.back()" style="color: #406CC4;border-color: #406CC4;display: none;">取消</a-button>
        </div>
      </div>
      <div class="userEnd">
        <div class="albumPhoto">
          <img :src="imgUrl" @click="openPreview(detailDataBase.cover)"/>
          <div>{{detailDataBase.createTime}}</div>
        </div>
      </div>
    </div>
    <div class="userTopAdd" v-else>
      <div class="addTitle">
        <div class="addTitleText">{{ titleData }}</div>
        <div class="button-groupAdd">
          <a-button style="background:#406CC4;color:#fff;margin-right: 1.25vw;" @click="handleSaveClick">提交</a-button>
          <a-button @click="goBack" style="color: #406CC4;border-color: #406CC4;">取消</a-button>
        </div>
      </div>
      <a-form-model labelAlign="right" ref="knowledgeRef" :rules="knowledgeRules" :model="knowledgeForm" layout="inline" >
        <a-form-model-item class="knowledgeAddUpdateLabel oneline" label="所选分类:" prop="categoryId" style="font-size:0.93vw">
          <a-cascader v-model="knowledgeForm.categoryId" 
            class="addItemBox"
            :options="classifyList" 
            :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
            placeholder="请选择"
            changeOnSelect 
            popupClassName="knowledgeCascader">
            <a-icon slot="suffixIcon" type="caret-down" class="classifyIconBox"/>
          </a-cascader>
        </a-form-model-item>
        <a-form-model-item class="knowledgeAddUpdateLabel oneline" label="专辑标题:" prop="name" style="margin-top: -5px;">
          <a-input style='width: 46.0416vw;' @change='titlesChange' class="addItemBox" maxLength="20" v-model="knowledgeForm.name" placeholder="请输入" >
            <div slot="suffix" style="color: #C0C0C0;">
              {{titlesNum}}
            </div>
          </a-input>
        </a-form-model-item>
        <a-form-model-item class="knowledgeAddUpdateLabel" label="　缩略图:" prop="cover" style="margin-top: 2.4vw;margin-bottom: 0px;">
          <a-upload-dragger
            v-if="!knowledgeForm.cover"
            name="file"
            class="uploadBox"
            :headers="headers"
            action="/api/api-system/system/core/sysFile/upload"
            :showUploadList="false"
            @change="handleChange"
            :beforeUpload="beforeUpload"
          >
            <p class="ant-upload-drag-icon">
              <img v-if="!loading" :src="add" alt="">
              <a-icon v-else type="loading" />
            </p>
            <p class="ant-upload-text" v-if="!loading">
              点击或将文件拖拽到这里上传
              <br/>
              (仅可上传一份)
            </p>
            <p class="ant-upload-text" v-else>
              上传中...
              <br/>
              (仅可上传一份)
            </p>
            <p class="ant-upload-hint">
              支持扩展名：.png .jpg（推荐尺寸342*226） 
            </p>
          </a-upload-dragger>
          <div v-else class="imgBox">
            <img class="uploadImg" :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+knowledgeForm.cover"/>
            <rx-button style="font-size: 1vw;color: #406CC4;" class="clearBtn" :butn-icon="'none'" @click="handleFileDelClick">删除</rx-button>
          </div>
        </a-form-model-item> 
      </a-form-model>
    </div>
    <div class="tabBoxContent">
      <div v-for="(item, index) in tapArr" :key="index" @click="changeAction(item.id)">
        <span>{{item.name}}</span>
        <img v-if="tapAction==item.id" src="../../../../image/tabAction.png"/>
      </div>
      <a-divider class="lineBorder"/>
    </div>
    <div class="searchBoxContent" v-show="(tapAction==0)">
      <div class="DataBoxContent" style="position: relative;">
        <a-input maxLength="500" :disabled="!(isAdd)" @change='detailChange' class="detailBox" v-model="detailData" type="textarea" :autosize="{minRows: 10, maxRows: 26}" placeholder="请输入" >
        </a-input>
      </div>
    </div>
    <div class="searchBoxContent" v-show="(tapAction==1)">
      <div class="DataBoxContent">
        <div class="albumBox">
          <div class="albumBoxLeft">
            <a-button class="creatBtn" @click="addOpen" v-if="isAdd">创建目录</a-button>
            <div class="albumList" v-if="isAdd">
              <div v-dragging="{item: item, list:albumArr}" :key="index" :draggable= "true" @click="changeCatalogue(index)" :class="albumPkId==item.pkId?'albumitem actionAlbum':'albumitem'" v-for="(item, index) in albumArr">
                <div class="leftPoint"></div>
                <div class="pointText">{{item.name}}</div>
                <div class="albumitemBtn">
                  <img src="../../../../image/add.png" v-if="isAdd" class="btnsty" @click="addDataOpen"/>
                  <img src="../../../../image/del.png" v-if="isAdd" class="btnstydel" @click.stop="deleteData(index)"/>
                </div>
              </div>
            </div>
            <div class="albumList" style="margin-top:0;" v-else>
              <div :key="index" @click="changeCatalogue(index)" :class="albumPkId==item.pkId?'albumitem actionAlbum':'albumitem'" v-for="(item, index) in albumArr">
                <div class="leftPoint0"></div>
                <div class="pointText">{{item.name}}</div>
              </div>
            </div>
          </div>
          <div class="albumBoxRight">
            <div class="noDataBox" v-if="dataList.length==0">
              <img src="../../../../image/noDataNew.png" class="noData"/>
              <p class="noDataText">暂无内容</p>
            </div>
            <div v-else class="listBoxItemContent listItemClass" v-for="(item, index) in dataList" :key="index">
              <pageList :item="item" @delRefresh="delList(index)" :showDelete="showDelete&&isAdd"></pageList>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="searchBoxContent" v-show="(tapAction==2)">
      <div class="noDataBox" v-if="dataList2.length==0">
        <img src="../../../../image/noDataNew.png" class="noData"/>
        <p class="noDataText">暂无搜索结果</p>
      </div>
      <div v-else class="DataBoxContent">
        <div class="albumBox" style="flex-direction: column;">
          <div class="commentTitle">
            我要点评
          </div>
          <div class="submitBox">
            <a-input-search
              v-model:value="yelpContent"
              class="commentAdd"
              placeholder="评论千万条，友善第一条"
              enter-button="提交"
              maxLength="100"
              size="large"
              @search="replyAlbum"
            />
          </div>
          <div class="commentList">
            <div class="commentTitle commentPadd">
              点评信息
              <a-radio-group v-model:value="commentType" button-style="solid" class="titleRight" @change="changeType">
                <a-radio-button value="1">全部点评</a-radio-button>
                <a-radio-button value="2">与我相关</a-radio-button>
              </a-radio-group>
            </div>
            <a-divider class="commentLine"/>
            <div class="noDataBox" v-if="yelpDataList.length==0">
              <img src="../../../../image/noDataNew.png" class="noData"/>
              <p class="noDataText">暂无内容</p>
            </div>
            <div v-else>
              <div class="albumListClass" v-for="(item, index) in yelpDataList" :key="index">
                <img v-if="item.replies.length!=0" @click="changeOpen(item)" src="../../../../image/dowmPoint.png" :class="item.open==1?'leftImg':'leftImg leftImgRotate'"/>
                <img v-else src="../../../../image/dowmPoint.png" class="leftImg" style="opacity: 0;cursor: default;"/>
                <albumList @replyYelp="replyYelp" :item="item" style="flex-grow: 1;"></albumList>
              </div>
              <div class="getMoreList" @click="getMoreList" v-if="yelpPageTotle>yelpDataList.length">
                点击加载更多评论
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="searchBoxContent" v-show="(tapAction==3)">
      <div class="DataBoxContent" style="padding:0px 2vw">
        <div class="titleAlbum"  v-if="!isAdd">审批状态：<span style="background: none;" :class="'stateBox'+detailDataBase.versionState" v-if="detailDataBase.versionStateName!=''&&detailDataBase.versionStateName!=null">{{ detailDataBase.versionStateName }}</span></div>
        <div style="width:100%;margin-top: 1.5625vw;">
          <a-table class="tableBoxAlbum" :columns="approverColumns" :data-source="approverData" :pagination="false">
          </a-table>
        </div>
      </div>
    </div>
    <a-modal v-model="catalogueShow" 
              :title="catalogueTitle" 
              centered
              okText="保存"
              @ok="catalogueHandleOk"
              :confirmLoading="saveLoading">
      <a-form :model="catalogueForm" layout="inline" :label-col="{ span: 5 }">
        <a-form-item prop="name" style="margin-top:10px;" label="目录名称">
          <a-input v-model="catalogueForm.name" placeholder="请输入" maxLength="20"/>
        </a-form-item>
        <a-form-item prop="solt" style="margin-top:10px;" label="排序">
          <a-input-number :min="1" v-model="catalogueForm.solt" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model="addDataShow" 
              title="添加目录内容" 
              centered
              okText="添加"
              @ok="handleOkAdd"
              :confirmLoading="saveLoading">
      <a-form ref="labelRef" :model="addDataForm" layout="inline" :label-col="{ span: 5 }">
        <a-form-item prop="name" style="margin-top:10px;" label="内容类型">
          <a-select v-model="addDataForm.type" placeholder="请选择">
            <a-select-option class="dropdownClassli" v-for="(item,index) in knowledgeList" :key="index" :value="item.value">
              <span class="addSelectOption">{{item.label}}</span>
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item prop="name" style="margin-top:10px;" label="知识分类">
          <a-cascader v-model="categoryValue" 
            :popupStyle="{
              maxWidth: '40vw',
              'overflow-x': 'auto'
            }"
            :getPopupContainer="triggerNode => { return triggerNode.parentNode }"
            :options="classifyListAdd" 
            :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
            placeholder="请选择"
            @change="onChange"
            @popupVisibleChange="popupVisibleChange"
            popupClassName="knowledgeCascader"
            class="scroll-ckunk">
          </a-cascader>
        </a-form-item>
        <a-form-item prop="name" style="margin-top:10px;" label="选择知识">
          <a-select v-model="addDataForm.pkId" placeholder="请选择">
            <a-select-option class="dropdownClassli" v-for="(item,index) in addDataSelect" :key="index" :value="item.pkId">
              <span class="addSelectOption">{{item.titles}}</span>
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title=""
      :visible="delVisible"
      :confirm-loading="false"
      class="delModal"
      :footer="null"
      :closable="false"
      dialogClass="delBox"
    >
      <div class="delBoxMain">
        <img src="../../../../image/confirm.png" class="confirmImg"/>
        <p class="confirmTitle">确认要删除这个专辑目录吗？</p>
        <p class="confirmContent">您删除后的专辑目录将无法恢复，请慎重操作。</p>
        <div>
          <div class="btnConfirmOk" @click="confirmOkCatalogue">确认</div>
          <div class="btnConfirmCancel" @click="closeDel">取消</div>
        </div>
      </div>
    </a-modal>
    <previewVisible ref="previewVisible"></previewVisible>
  </div>
</template>

<script>
import add from '@/assets/img/warehouse/add.png'
import header0 from '../../../../image/header0.png'
import contentData from '@/api/knowledge/contentData'
import album from '@/api/knowledge/album'
import api from '@/api/knowledge/warehouseIndex'
import pageList from '../components/pageListAlbum'
import albumList from '../components/albumList'
import previewVisible from '../components/previewVisible'
import { ACCESS_TOKEN } from '@/store/mutation-types';
import {mapState} from "vuex";
export default {
  name: 'contentData',
  components: {
    pageList,
    albumList,
    previewVisible
  },
  computed: {
    ...mapState({
        user: (state) => state.appSetting.user,
    })
  },
  data() {
    return {
      pkId:'',
      titleData:'新增专辑',
      loading:false,
      yelpContent:'',
      showDelete:true,//专辑内容是否加移除
      detailDataBase:{
        actionFlag:[]
      },
      headers: {},
      detailNum:500,
      add,
      titlesNum:20,
      catalogueNum:0,
      knowledgeForm: {
        categoryId:[],
        cover:'',
        name:''
      },
      knowledgeRules: {
        categoryId: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        cover: [
          { required: true, message: '请选择缩略图', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入专辑标题', trigger: 'blur' }
        ]
      },
      isAdd:true,
      commentType:'1',
      addDataSelect:[],
      classifyList:[],
      classifyListAdd:[],
      knowledgeList: [
        {value: '1', label: '文档知识'},
        {value: '2', label: '维基知识'}
      ],
      addDataShow:false,
      categoryValue:'',
      categoryDataArr:[],
      addDataForm:{
        type:'1',
        categoryId:[],
        pkId:undefined,
      },
      delVisible:false,
      catalogueForm:{
        name:'',
        solt:''
      },
      catalogueShow:false,
      catalogueTitle:'新增目录',
      saveLoading:false,
      detailData:'',
      approverColumns: [
        {
          title: '流程节点',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '审批人',
          dataIndex: 'approverName',
          align: 'center'
        },
        {
          title: '审批状态',
          dataIndex: 'approvalStatus',
          align: 'center'
        },
        {
          title: '审批备注',
          dataIndex: 'comment',
          align: 'center'
        },
        {
          title: '时间',
          dataIndex: 'createTime',
          align: 'center'
        },
      ],
      approverData:[],
      header0,
      imgUrl: require('@img/avatar2.jpg'),
      userData:this.user,
      tapArr:[{id:0,name:'专辑简介'},{id:1,name:'专辑目录'},{id:2,name:'专辑点评'},{id:3,name:'审批流程'}],
      tapAction:0,
      dataList2:[
        {}
      ],
      albumArr:[
      ],
      albumPkId:'',
      albumIndex:0,
      dataList:[],
      yelpPageNum:1,
      yelpPageSize:10,
      yelpDataList:[],
      yelpPageTotle:0,
      scope: 2,
      widthVar: 400
    }
  },
  beforeRouteLeave(to, from, next) {
    if(to.name == 'albumIndex') {
      to.query.scope = this.scope
    }
    next();
  },
  mounted() {
    if(this.$route.query.scope) {
      this.scope = this.$route.query.scope
    }
    if(this.$route.query.isAdd) {
      this.isAdd = this.$route.query.isAdd==1?true:false
    }
    if(this.$route.query.pkId) {
      this.pkId = this.$route.query.pkId
      this.titleData = '编辑专辑'
      this.getInfo()
      this.getYelp()
    }
    if(this.isAdd){
      album.approvalTemplate().then((res) => {
        this.approverData = res.data
      })
      this.tapArr=[{id:0,name:'专辑简介'},{id:1,name:'专辑目录'},{id:3,name:'审批流程'}]
    }else{
      this.tapArr=[{id:0,name:'专辑简介'},{id:1,name:'专辑目录'}]
    }
    // 拖拽事件
    this.$dragging.$on("dragged", (result) => {
      let soltArr=this.albumArr.map(item => {
        return item.solt
      })
      soltArr.sort((a, b) => a - b);
      this.albumArr.forEach((item,index) => {
        item.solt=soltArr[index]
      })
      //this.dataList = this.albumArr[this.albumIndex].dataList
      // 将排序后的结果重新赋值
      //this.albumArr = result.value.list;
    });

  },
  created() {
    //this.dataList = this.albumArr[this.albumIndex].dataList
    var token = Vue.ls.get(ACCESS_TOKEN);
    if (token) {
      this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
    }
    this.init()
  },
  methods: {
    openPreview(src){
      this.$refs.previewVisible.openBig(src)
    },
    //点击加载更多评论
    getMoreList(){
      this.yelpPageNum = this.yelpPageNum+1
      this.getYelp()
    },
    //回复点评
    replyYelp(data){
      this.reportYelp(data.content,2,data.yelpId)
    },
    //回复专辑
    replyAlbum(){
      if(this.yelpContent==''){
        this.$message.error('未填写点评或回复的内容')
        return false
      }
      this.reportYelp(this.yelpContent,1,null)
    },
    //修改评论类型
    changeType(){
      this.yelpDataList=[]
      this.yelpPageNum=1
      this.getYelp()
    },
    //评论列表
    getYelp(){
      let getData = {
        pageNo:this.yelpPageNum,
        pageSize:this.yelpPageSize,
        params:{
          albumId:this.pkId,
          type:this.commentType,
        }
      }
      album.yelpQuery(getData).then((res) => {
        res.result.data.forEach(item => {
          item.open = 0
          item.replyComment = ''
          if(item.replies==null){
            item.replies = []
          }else{
            item.replies.forEach(item0 => {
              item0.replyComment = ''
              item0.replyLeft = '@'+item0.createName+'    '
            })
          }
        })
        this.yelpPageTotle = res.result.totalCount
        this.yelpDataList = this.yelpDataList.concat(res.result.data)
      })
    },
    //评论回复
    reportYelp(content,type,yelpId){
      let postData = {
        albumId:this.pkId,
        content:content,
        type:type
      }
      if(yelpId!=null){
        postData.yelpId = yelpId
      }
      album.yelp(postData).then((res) => {
        this.yelpContent = ''
        let tempArr = this.yelpDataList.filter(item=>{return item.pkId==yelpId;})[0]
        tempArr.replyComment = ''
        tempArr.replies.forEach(item => {
          item.replyComment = ''
        })
        //this.yelpDataList=[]
        //this.getYelp()
      })
    },
    //获取详情
    getInfo(){
      let getData = {pkId:this.pkId}
      album.info(getData).then((res) => {
        this.knowledgeForm.name = res.data.name
        this.knowledgeForm.cover = res.data.cover
        this.knowledgeForm.categoryId = []
        if(res.data.categoryLevel1Id!=null){
          this.knowledgeForm.categoryId.push(res.data.categoryLevel1Id)
        }
        if(res.data.categoryLevel2Id!=null){
          this.knowledgeForm.categoryId.push(res.data.categoryLevel2Id)
        }
        //this.knowledgeForm.cover = res.data.cover
        this.detailData = res.data.summary
        this.detailDataBase = res.data
        this.detailDataBase.categoryArr = this.detailDataBase.categoryName.split('|')
        this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId='+this.detailDataBase.cover
        this.getApprovals()
        if(this.detailDataBase.versionState==2){
          this.tapArr.push({id:2,name:'专辑点评'})
        }
        if(this.user.userId==this.detailDataBase.ownerId){
          let testArr = this.tapArr.filter(item=>{return item.id==3})
          if(testArr.length == 0){
            this.tapArr.push({id:3,name:'审批流程'})
          }
        }
        this.tapArr.sort((val0,val1)=>{
          return (val0.id-val1.id);
        })
      })
    },
    //获取详情和编辑审批
    getApprovals(){
      let getData = {albumId:this.detailDataBase.pkId,versionId:this.detailDataBase.versionId}
      album.approvals(getData).then((res) => {
        res.data.flows.forEach(item => {
          item.approverName=item.actualApproverName
          item.createTime=item.approvalTime
        })
        this.approverData = res.data.flows
      })
      album.catalogue(getData).then((res) => {
        res.data.forEach((item,index) => {
          item.contents.forEach(item => {
            item.categoryArr = item.category.split("|")
            item.titles = item.title
            item.pkId = item.knowledgeId
            item.uploadTime = item.createTime
            item.params = {
              photo:item.authorHead
            }
          })
          item.dataList=item.contents
          item.solt=index+1
        })
        this.albumArr = res.data
        this.albumPkId = this.albumArr[this.albumIndex].pkId
        this.dataList = this.albumArr[this.albumIndex].dataList
        this.showDelete = this.albumArr[this.albumIndex].actionFlag.indexOf('delete')>-1
        //this.showDelete = true
      })
    },
    changeEdite(){
      this.isAdd = true
    },
    goBack(){
      if(this.$route.query.isAdd==1){
        this.$router.back()
      }else{
        this.isAdd = false
      }
    },
    //上传图片
    handleSaveClick(){
      //const hide = this.$message.loading('验证码发送中..', 0)
      //setTimeout(hide, 5000);
      //return false;
      if(this.knowledgeForm.categoryId.length==0){
        this.$message.error('请选择分类');
        return false
      }
      if(this.knowledgeForm.name==''){
        this.$message.error('请输入专题标题');
        return false
      }
      if(this.knowledgeForm.cover==''&&this.isAdd){
        this.$message.error('请上传缩略图');
        return false
      }
      if(this.albumArr.length==0){
        this.$message.error('请创建目录');
        return false
      }
      let knowledgeForm = JSON.parse(JSON.stringify(this.knowledgeForm))
      knowledgeForm.summary = this.detailData
      let catalogues = []
      this.albumArr.forEach(item => {
        let tempData = {
          name:item.name,
          contents:[]
        }
        item.dataList.forEach(item0 => {
          tempData.contents.push(item0.pkId)
        })
        catalogues.push(tempData)
      });
      knowledgeForm.catalogues = catalogues
      knowledgeForm.categoryId = knowledgeForm.categoryId[(knowledgeForm.categoryId.length-1)]
      if(this.pkId==''){
        album.create(knowledgeForm).then((res) => {
          if(res.code == 200) {
            this.$message.success("保存成功!");
            this.$router.back()
          }
        })
      }else{
        
        knowledgeForm.cover = this.knowledgeForm.cover
        //knowledgeForm.categoryId = this.detailDataBase.categoryLevel2Id
        //knowledgeForm.categoryId = knowledgeForm.categoryId[(knowledgeForm.categoryId.length-1)]
        knowledgeForm.name = this.knowledgeForm.name
        knowledgeForm.pkId = this.detailDataBase.pkId
        knowledgeForm.versionId = this.detailDataBase.versionId
        album.edit(knowledgeForm).then((res) => {
          if(res.code == 200) {
            this.$message.success("保存成功!");
            this.$router.back()
          }
        })
      }
    },
    //上传之前校验
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 6;
      if (!isLt2M) {
        this.$message.error('附件不能超过6M');
        return false
      }
      const fileName = file.name.split('.')
      const fileExt = fileName.slice(-1)[0]
      let arr = ['png','jpg']
      if(arr.indexOf(fileExt) == -1) {
        this.$message.error('仅支持格式.png .jpg的文件');
        return false
      }
      return true
    },
    //删除图片
    handleFileDelClick(){
      this.knowledgeForm.cover = ''
    },
    //图片上传
    handleChange(info) {
      if(info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if(info.file.status === 'done') {
        this.loading = false
        this.knowledgeForm.cover = info.file.response.data[0].fileId
      }
    },
    //字数变化
    detailChange(){
      this.detailNum=500-this.detailData.length
    },
    changeCatalogue(num){
      this.albumIndex = num
      this.albumPkId = this.albumArr[this.albumIndex].pkId
      this.dataList = this.albumArr[this.albumIndex].dataList
    },
    titlesChange(){
      this.titlesNum=20-this.knowledgeForm.name.length
    },
    changeOpen(data){
      data.open = (data.open+1)%2
    },
    //知识分类变化
    onChange(value, selectedOptions) {
      this.categoryValue = value
      this.categoryDataArr = selectedOptions
      this.addDataForm.categoryId = value[value.length-1]
    },
    popupVisibleChange(value){
      if(value==false){
        this.getData();
      }
    },
    //获取知识数据
    getData(){
      let param = {
        "pageNo": 1,
        "pageSize": 100,
        "sortField": "",
        "sortOrder": "asc",
        params: {
          approvalStatus: 5,
          "categoryId":this.addDataForm.categoryId.length==0?'':this.addDataForm.categoryId,
          "type":this.addDataForm.type,
        }
      }
      contentData.findAllKnowledge(param).then((res) => {
        this.addDataSelect = res.result.data
      })
    },
    closeDel(){
      this.delVisible = false
    },
    confirmOkCatalogue(){
      this.albumArr.splice(this.catalogueNum,1)
      this.delVisible = false
    },
    //删除
    delList(num){
      this.dataList.splice(num,1)
    },
    confirmOk(){
      let param = {
        knowledgeId:this.item.pkId
      }
      this.delVisible = false
    },
    //删除
    deleteData(num){
      this.catalogueNum = num
      this.delVisible = true
    },
    addOpen(){
      if(this.albumArr.length==0){
        this.catalogueForm.solt = 1
      }else{
        this.catalogueForm.solt = Number(this.albumArr[this.albumArr.length-1].solt)+1
      }
      this.catalogueShow = true
    },
    addDataOpen(){
      this.addDataShow = true
      this.addDataForm={
        type:'1',
        categoryId:[],
        pkId:undefined,
      }
      this.categoryValue=''

      // let innerWidth = window.innerWidth

      // this.widthVar = innerWidth/30
      document.onclick=function(element){
        if(element.target.className.indexOf('ant-cascader-menu-item')>-1){
          document.querySelector('.ant-cascader-menus').scrollLeft = 20480
        }
      }
      /*setInterval(() => {
        document.querySelectorAll('.ant-cascader-menu-item').forEach(el => {
          el.onclick = function() {
            document.querySelector('.ant-cascader-menus').scrollLeft = 2048
          }
        })
      }, 1000)*/
    },
    //增加知识
    handleOkAdd(){
      let isHaveArr = this.albumArr[this.albumIndex].dataList.filter(item=>{return item.pkId==this.addDataForm.pkId;})
      if(isHaveArr.length>0){
        this.$message.error('当前目录里已经存在这条知识。');
        return false
      }
      let selectData = this.addDataSelect.filter(item=>{return item.pkId==this.addDataForm.pkId;})[0]
      selectData.documentName = selectData.attachmentName
      selectData.documentRemark = selectData.summary
      selectData.viewNum = selectData.views
      selectData.uploadTime = selectData.createTime
      selectData.categoryArr = []
      this.getCategory(selectData.categoryArr,selectData.knowledgeCategoryAdminVo)
      this.albumArr[this.albumIndex].dataList.push(selectData)
      this.addDataShow = false
    },
    //新增目录
    catalogueHandleOk(){
      let that = this
      let dataFind = that.albumArr.filter(item=>{return item.name==that.catalogueForm.name;})
      if(dataFind.length != 0){
        this.$message.error('目录名称重复。');
        return false
      }
      let pushEnd = false
      that.catalogueForm.dataList = []
      let catalogueForm = JSON.parse(JSON.stringify(that.catalogueForm))
      catalogueForm.pkId = Date.parse(new Date())
      for (let index = 0; index < that.albumArr.length; index++) {
        let element = that.albumArr[index]
        if(element.solt>catalogueForm.solt){
          pushEnd = true
          that.albumArr.splice(index,0,catalogueForm)
          break;
        }
      }
      catalogueForm.actionFlag=['edit','delete']
      if(!pushEnd){
        that.albumArr.push(catalogueForm)
      }
      if(that.albumArr.length==1){
        that.albumPkId = that.albumArr[0].pkId
      }
      that.catalogueShow=false
    },
    //知识分类转化
    getCategory(arr,data){
      arr.unshift(data.name)
      if(data.parents!=null){
        this.getCategory(arr,data.parents)
      }
    },
   filter(inputValue, path) {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
   },
   changeAction(num){
    this.tapAction = num
    if(this.$route.query.pkId) {
      if(this.tapAction==1||this.tapAction==3){
        this.getApprovals()
      }
      if(this.tapAction==2){
        this.yelpDataList=[]
        this.yelpPageNum=1
        this.getYelp()
      }
    }
   },
   //初始化
   async init() {
      let getData={pkId:0}
      album.categories(getData).then((res) => {
        this.classifyList = res.data
      })
      contentData.getAllKnowledgeCategory().then((res) =>{
        this.classifyListAdd=res.data
      })
    },
    //知识分类懒加载
    async loadDataAdd(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      targetOption.loading = true
      let res = await api.getKnowledgeCategory(targetOption.pkId)
      let result  = res.data.children.map(item => {
        if(!item.hasChild) {
          item.isLeaf = true
        } else {
          item.isLeaf = false
        }
        return item
      })
      targetOption.loading = false
      targetOption.children = [...result]
      this.classifyList = [...this.classifyList]
    },
  }
}
</script>
<style>
.titleRight .ant-radio-button-wrapper:not(:first-child):before{
  display: none;
  background: #000;
}
</style>
<style lang="less" scoped>
.categoryBox{
  display: inline-block;
  color: #C0C0C0;
  font-size: 0.8333vw;
  font-weight: 400;
  background: rgba(64, 108, 196, 0.04);
  border-radius: 0.41666vw 0.41666vw 0.41666vw 0.41666vw;
  padding: 0 0.3125vw;
  height: 1.45833vw;
  margin-left: 0.364583vw;
  margin-top: 0.5vw;
  line-height: 1.45833vw;
}
.categoryBox /deep/.ant-divider-vertical{
  height: 0.8vw;
  margin: 0 0.390625vw;
  margin-top: 0.4vw;
}
.categoryBox div{
  float: left;
}
.approvalBox{
  border-radius: 0.625vw;
  height: 1.145833vw;
  line-height: 1.145833vw;
  padding: 0px 0.41666vw;
  font-size: 0.729166vw;
  margin-left: 0.9375vw;
  font-weight: normal;
  margin-top: 0.6vw;
}
.stateBox1{
  background: rgba(255,144,13,0.04);
  color: #FF900D;
}
.stateBox2{
  background: rgba(64,108,196,0.04);
  color: #406CC4;
}
.stateBox3{
  background: rgba(255,144,13,0.04);
  color: #FF900D;
}
.stateBox4{
  background: rgba(248,78,76,0.04);
  color: #F84E4C;
}
.contentDataMain{
  position: absolute;
  background: #FAFAFA;
  height: 100%;
  overflow: scroll;
}
.searchBoxContent{
  margin: 0px 10.94vw;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 2vw;
}
.noDataBox{
  width: 100%;
  text-align: center;
  padding: 1.71875vw 0px 3.91vw 0px;
}
.noData{
  width:35.2vw;
}
.DataBoxContent{
  width:100%;
  background: #fff;
  display: inline-block;
  .ant-input-disabled {
    color: rgba(0, 0, 0, 0.65); 
    background-color: #fff;
    cursor: auto;
  }
}
.commentTitle{
  color: #202124;
  font-size: 0.9375vw;
  font-weight: 550;
  display: flex;
  width: 100%;
  margin-bottom: 0.8854vw;
  align-items: center;
}
.submitBox{
  width: 100%;
  display: inline-block;
}
.titleRight{
  margin-left: auto;
  border: 2px solid #EEEEEE;
  border-radius: 6px;
  color: #202124;
  font-size: 0.73vw;
  height: 1.875vw;
  overflow: hidden;
  background: #EEEEEE;
}
.titleRight /deep/.ant-radio-button-wrapper{
  border-radius: 0vw;
  background: #eee;
  font-weight: 400;
  border-color: #eeeeee00;
  height: calc(1.875vw - 4px);
  line-height: calc(1.875vw - 4px);
  box-shadow: none!important;
}
.titleRight /deep/.ant-radio-button-wrapper:focus{
  box-shadow: none!important;
}
.titleRight /deep/.ant-radio-button-wrapper:hover{
  color: #202124;
}
.titleRight /deep/.ant-radio-button-wrapper:before{
  background-color: #d9d9d900;
}
.titleRight /deep/.ant-radio-button-wrapper-checked{
  border-radius: 6px;
  box-shadow: none!important;
  background: #fff;
  font-weight: 400;
  border-color: #EEEEEE;
  color: #202124;
  box-shadow:none;
}
.titleRight /deep/.ant-radio-button{
  display: none;
}
.titleRight /deep/.ant-radio-button-wrapper-checked:focus{
  box-shadow: none!important;
}
.titleRight /deep/.ant-radio-button-wrapper-checked:hover{
  background: #fff;
  border-color: #EEEEEE;
}
.noDataText{
  color:#C0C0C0;
  font-size:1.14vw;
}
.tabBoxContent{
  display: flow-root;
  width: 78.12vw;
  margin: 0px 10.94vw;
  background: #fff;
  margin-top: 1.25vw;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.tabBoxContent div{
  text-align: center;
  float: left;
  padding: 0px 2.0833vw;
  display: flex;
  flex-direction: column;
}
.tabBoxContent span{
  padding-top: 1.5625vw;
  width: 4.64vw;
  color: #202124;
  font-size: 0.9375vw;
  cursor: pointer;
  display: inline-block;
}
.tabBoxContent img{
  margin-top: 0.9375vw;
  width:4.64vw;
}
::-webkit-scrollbar{
  display:none;
}
.listBoxItemContent{
  padding: 0px 1.5625vw;
  border: 1px solid #EFEFEF;
  border-radius: 0.52vw;
  margin-bottom: 1.25vw;
}
.listItemClass{
  background: #fff;
}
.albumUserList{
  display: flex;
  align-items: center;
  color: #5E5E5E;
  font-size: 0.9375vw;
  margin-top: 0.625vw;
}
.albumUserList div{
  margin-left: 0.52vw;
}
.albumUserList div:last-child{
  margin-left: 0.9375vw;
}
.albumHead{
  width: 1.6666vw;
  height: 1.6666vw;
}
.bottomBorder{
  background: #EEEEEE;
  margin-bottom: 0px;
}
.userTop{
  margin: 0px 10.94vw;
  background: #fff;
  padding: 2.0833vw;
  margin-top: 1.5104vw;
  display: flex;
  border-radius: 10px;
}
.userTopAdd{
  margin: 0px 10.94vw;
  background: #fff;
  padding: 1.3541vw 1.979vw 2.0833vw 1.3541vw;
  margin-top: 1.5104vw;
  border-radius: 10px;
}
.albumPhoto{
  float: right;
}
.albumPhoto img{
  width: 16.9791vw;
  height: 12.8125vw;
  border-radius: 0.625vw;
}
.albumPhoto div{
  color: #fff;
  font-size: 0.8333vw;
  margin-top: -2.4vw;
  text-align: right;
  padding-right: 0.8vw;
  height: 2.4vw;
  line-height: 2.4vw;
  width: 100%;
  position: relative;
  border-radius: 0.625vw;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.66) 100%);
}
.albumTimesList{
  display: inline-block;
  margin-top: 1.197vw;
}
.timesBox{
  display: flex;
  align-items: center;
  flex-direction: column;
  float: left;
  margin-right: 3.59375vw;
  color: #202124;
}
.timesBox div:first-child{
 font-size: 1.25vw;
 font-weight: 550;
}
.timesBox div:last-child{
  font-size: 0.8333vw;
  color: #5E5E5E;
}
.albumTitle{
  color: #202124;
  font-size: 1.5625vw;
  text-align: left;
  font-weight: normal;
  display: flex;
  justify-items: center;
}
.userEnd{
  margin-left: auto;
}
.listBox{
  padding-bottom: 1.5625vw;
  background: #fff;
}
.button-group {
  width:100%;
  display:flex;
  margin-top: 0.9375vw;
  >button {
    width: 9.89583vw;
    height: 2.91666vw;
    font-size: 0.9375vw;
    border-radius: 0.72916vw;
  }
}
.button-groupAdd {
  margin-top: 0px;
  margin-left: auto;
  width: auto;
  display:flex;
  >button {
    width: 7.96875vw;
    height: 2.5vw;
    font-size: 0.9375vw;
    border-radius: 4px;
  }
}
.lineBorder{
  margin-top: 0px;
  margin-bottom: 0px;
  width: 74.12vw;
  min-width: 74.12vw;
  margin-left: 2vw;
}
.detailBox{
  width: 74.12vw;
  height: 23.3854vw;
  border-radius: 0.416666vw;
  border: 1px solid #EEEEEE;
  margin: 1.5625vw 2vw;
  padding: 1.5625vw 1.35416vw;
  font-size: 1vw;
}
.tableBoxAlbum{
  margin-bottom: 2vw;
}
.tableBoxAlbum /deep/.ant-table-thead{
  font-size: 0.9375vw;
  color: #202124;
  background: #F9F9FA;
}
.tableBoxAlbum /deep/tr{
  height: 3.69791vw;
}
.tableBoxAlbum /deep/.ant-table-column-title{
  font-weight: 550;
  font-size: 0.9375vw;
}
.tableBoxAlbum /deep/.ant-table-tbody{
  font-size: 0.9375vw;
  color: #202124;
}
.tableBoxAlbum /deep/td{
  border: none;
}
.tableBoxAlbum /deep/.ant-table-row{
  height: 4vw;
}
.titleAlbum{
  font-size: 0.9375vw;
  color: #202124;
  margin-top: 1.875vw;
}
.albumBox{
  display: flex;
  padding: 1.25vw 2vw;
}
.albumBoxLeft{
  width: 13.125vw;
}
.albumBoxRight{
  width: 59.6vw;
  margin-left: auto;
}
.creatBtn{
  background:#406CC4;
  color:#fff;
  width: 6.40625vw;
  height: 1.875vw;
  font-size: 0.9375vw;
}
.albumList{
  border: 1px solid #EFEFEF;
  border-radius: 0.52vw;
  margin-top: 1.3541vw;
  min-height: 12vw;
}
.albumitem{
  width: 100%;
  height: 4.42708vw;
  font-size: 0.9375vw;
  color: #202124;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.leftPoint{
  width: 0.8vw;
  height: 0.364583vw;
  background: #406CC4;
  border-radius: 2px 2px 2px 2px;
  margin-left: 1.5625vw;
  margin-right: 0.677vw;
}
.leftPoint0{
  width: 0.5vw;
  height: 0.34vw;
  background: #406CC4;
  border-radius: 2px 2px 2px 2px;
  margin-left: 1.5625vw;
  margin-right: 0.677vw;
}
.pointText{
  width: 18vw;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space:nowrap;
}
.albumitemBtn{
  margin-left:auto;
  color: #406CC4;
  margin-right: 0.9375vw;
  width: 7vw;
  align-items: center;
  display: flex;
}
.albumitemBtn i:last-child{
  margin-left: 0.73vw;
}
.albumitemBtn i{
  cursor: pointer;
}
.actionAlbum{
  background: #ECF3FF;
}


.delBoxMain{
  text-align: center;
}
.delBox{
  width: 29.16vw!important;
  height: 19.16vw;
}
.confirmImg{
  width:3.854vw;
  margin-top: 0.6vw;
  margin-bottom: 2.03125vw;
}
.confirmTitle{
  color: #202124;
  font-size: 1.04vw;
  margin-bottom: 0.52vw;
}
.confirmContent{
  color: #5E5E5E;
  font-size: 0.9375vw;
  margin-bottom: 2.7vw;
}
.btnConfirmOk{
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  width: 8.02vw!important;
  height: 2.4vw;
  line-height: 2.4vw;
  text-align: center;
  color: #fff;
  background: #406CC4;
  font-size: 0.9375vw;
  cursor: pointer;
  display: inline-block;
  margin-right: 1.77vw;
}
.btnConfirmOk:hover{
  background: #385FAD;
}
.btnConfirmCancel{
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  width: 8.02vw!important;
  height: 2.4vw;
  line-height: 2.4vw;
  text-align: center;
  color: #5E5E5E;
  border: 1px solid #C0C0C0;
  font-size: 0.9375vw;
  cursor: pointer;
  display: inline-block;
}
.btnConfirmCancel:hover{
  background: #f3f3f3;
}
.delBox{
  width: 29.16vw!important;
  height: 19.16vw;
}
.commentAdd /deep/input{
  height: 2.8125vw;
  font-size: 1.14583vw;
  border-radius: 0.41666vw;
}
.commentAdd /deep/.ant-input-search-button{
  font-size: 1.14583vw;
  background-color: #406cc4;
  border-color: #406cc4;
  height: 2.8125vw;
  width: 6.09375vw;
  border-radius: 0.41666vw!important;
}
.commentList{
  margin-top: 0.73vw;
  padding: 0.8vw 0px;
  border: 1px solid #EEEEEE;
  border-radius: 0.41666vw;
}
.commentLine{
  margin-top:1vw;
  margin-bottom: 0px;
}
.commentPadd{
  padding-left:1.354vw;
  padding-right: 2vw;
}
.albumListClass{
  padding-left: 1.354vw;
  padding-right: 2.1875vw;
  display: flex;
}
.leftImg{
  width: 0.8333vw;
  height: 0.8333vw;
  margin-top: 1.6vw;
  margin-right: 0.4166vw;
  cursor: pointer;
}
.leftImgRotate{
  transform: rotate(-90deg);
}
.getMoreList{
  color: #C0C0C0;
  font-size: 0.9375vw;
  text-align: center;
  margin-top: 3.4375vw;
  cursor: pointer;
}
.addTitle{
  display: flex;
  align-items: center;
  width: 100%;
}
.addTitleText{
  font-weight: 550;
  font-size: 1.14583vw;
  color: #202124;
  width: 30%;
  padding-left: 0.7vw;
}
.userTopAdd .ant-form {
  .ant-form-item {
    margin-bottom: 2.08vw;
  }

  .ant-form-item:first-child {
    margin-top: 1.51vw;
  }
}
.knowledgeAddUpdateLabel /deep/ label::before {
  content: '';
  width: 0.3125vw;
  height: 0.3125vw;
  border-radius: 0.3125vw;
  background: #fff;
  margin-bottom: 0.25vw;
  vertical-align: middle;
  font-size: 0.44vw;
  display: inline-block;
  font-family: SimSun, sans-serif;
  margin-right: 0.41666vw;
}
.userTopAdd /deep/ .ant-form-item-required::before {
  width: 0.3125vw;
  height: 0.3125vw;
  border-radius: 0.3125vw;
  background: #F84E4C!important;
  margin-bottom: 0.25vw;
  vertical-align: middle;
  font-size: 0.44vw;
}
.knowledgeAddUpdateLabel /deep/ label {
  font-size: 0.9375vw;
  height: 2.7vw;
}

.oneline /deep/ label {
  line-height: 2.7vw;
}
.knowledgeAddUpdateLabel /deep/ textarea {
  font-size: 0.9375vw;
}

.knowledgeAddUpdateLabel /deep/.ant-form-item-children{
  display: block;
}
.addItemBox{
  height: 2.7vw;
  width: 21.71875vw;
  font-size: 0.9375vw;
}
.addItemBox /deep/input{
  height: 2.7vw;
  font-size: 0.9375vw;
}
.addItemBox /deep/.ant-select-selection{
  height: 2.7vw;
}
.addItemBox /deep/.ant-select-selection-selected-value{
  height: 2.7vw;
  line-height: 2.7vw;
}
.addItemBox /deep/.ant-select-selection__rendered{
  height: 2.7vw;
}
.addItemBox /deep/.ant-select-arrow{
  margin-top: -0.55vw;
}
.classifyIconBox{
  color: rgba(0,0,0,.25);
  font-size: 1vw!important;
  margin-top: -0.55vw!important;
  -webkit-transform-origin: 90% 80%;
  position: absolute;
  right: 1vw;
  transform-origin: 0.5vw 0.45vw;
}
.ant-cascader-picker-focused .classifyIconBox{
  transform:rotate(180deg);
}
.uploadBox{
  width: 26.927vw;
  min-height: 11.979vw;
  display: block;
}
.rightText{
  position: absolute;
  right: 3vw;
  top: 2vw;
  font-size: 0.9375vw;
  color: #C0C0C0;
}
.uploadImg{
  width: 12vw;
}
.clearBtn {
  background: none;
  color: #3294F7;
  text-shadow: none;
  padding: 0px 6px;
  border: none;
  box-shadow: none;
}
.imgBox{
  display: flex;
  flex-direction: column;
  width: 12vw;
}
.btnsty{
  height: 0.78125vw;
}
.btnstydel{
  height: 1.2vw;
  margin-left: 0.6vw;
}
</style>
<style scoped>
/deep/ .ant-cascader-menus {
  left: 0!important;
}
/deep/ .ant-cascader-menu:last-child {
  margin-right: 0!important;
}
/deep/ .ant-modal-wrap {
  overflow: inherit;
}
</style>