富文本、视频、附件

<template lang='pug'>
  .boxCommon
    .treeWrap(@contextmenu.prevent.stop="mousedown")
      el-tree(
        ref="leftTreeRef"
        :data="treeData"
        node-key="_id"
        :props="defaultProps"
        :highlight-current="true"
        :expand-on-click-node="false"
        :default-expanded-keys="defaultExpandedIdArr"
        @node-click="handleNodeClick"
      )
        span(class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="labelHover($event,node,data)" @mouseleave="labelHoverLeave($event,node,data)")
          el-tooltip(effect="dark" :content="node.label" placement="top-start" :open-delay="1000")
            span.labelName {{ node.label }}
          span.s(v-show="node.showIcon" v-if="data.is_operation==1")
            i.iconfont.icon-xinjianwenjianjia(v-if="data.is_increase==1" @click.stop="addSubTree(node, data)")
            i.iconfont.icon-bianji(v-if="data.is_update==1" @click.stop="editCurTree(node, data)")
            i.iconfont.icon-qingchu2(v-if="data.is_delete==1" @click.stop="delCurTree(node, data)")
    .dataWrap
      .button-group
        .button-left
          xt-search(:searchList="searchList" style="display: inline-block;margin-right: 10px;" ref="formName" @submit="searchHandle" :hasResetBtn="true")
        .button-right
          //- xt-selectProject(@success="toggleProject" :data="projectList" v-if="isBusiness")
          //- el-button(type="primary" style="background: #006EE9;border: 1px solid #006EE9;margin-left: 10px;" size="small" @click="templateDownload" v-if="authorityInfo.role_type === 2 || authorityInfo.role_type === 3 || currentProject.id === '0' || currentProject.id === '0-0'")
          //- el-button(type="primary" style="background: #006EE9;border: 1px solid #006EE9;margin-left: 10px;" size="small" @click="templateDownload" )
          //-   i.iconfont.icon-mobanxiazai
          //-   span 导出样板
          //- el-button(type="primary" size="small" @click="creatFun" v-if="authorityInfo.role_type === 2 || authorityInfo.role_type === 3 || currentProject.id === '0' || currentProject.id === '0-0'")
          el-button(type="primary" size="small" @click="creatFun")
            i.iconfont.icon-icon_xinzeng
          //- xt-upload(fileType="Equipment" url="data!person/qqqqqqqqq/import" ref="upload" size="small" style="margin-left:10px;display: inline-block;" v-if="authorityInfo.role_type === 2 || authorityInfo.role_type === 3 || currentProject.id === '0' || currentProject.id === '0-0'" :condition="[{value: 'cover', label: '覆盖原有数据', select: false}]")
          //- xt-upload(fileType="Equipment" url="data!person/qqqqqqqqq/data_import" ref="upload" size="small" style="margin-left:10px;display: inline-block;" :condition="[{value: 'cover', label: '覆盖原有数据', select: false}]")
          //- xt-export(path="data!person/qqqqqqqqq/data_export" size="small" style="display: inline-block;margin: 0 10px;" :params="exportParams" showModel=true) 
          //-   i.iconfont.icon-Icon-daochu
          //- el-button(type="primary" style="background: #DD514C;border: 1px solid #DD514C;" size="small" @click="batchDelete" v-if="authorityInfo.role_type === 2 || authorityInfo.role_type === 3 || currentProject.id === '0' || currentProject.id === '0-0'")
          el-button(type="primary" style="background: #DD514C;border: 1px solid #DD514C;" size="small" @click="batchDelete" )
            i.iconfont.icon-shanchu
            span 批量删除
      .boxTable
        el-table(:data="tableData" size="small" border v-loading="tableLoading" @selection-change="handleSelectionChange" height="calc(100vh - 240px)" style="width: 100%;")
          el-table-column(type="selection" align="center")
          el-table-column(type="index" label="序号" align="center")
            template(slot-scope="scope")
              span {{(page - 1) * pageForm.pageSize + scope.$index + 1}}
          el-table-column(prop="full_name" label="标题" align="center")
          el-table-column(prop="departmen" label="目录" align="center")
          el-table-column(prop="job" label="类型" align="center")
          el-table-column(prop="tel" label="电话" align="center")
          el-table-column(prop="enclosure" label="图片" align="center")
            template(slot-scope="scope")
              //- img(style="width: 30px;height: 30px;cursor: pointer;vertical-align: middle;" @click="lookFile(scope.row)" v-if="scope.row.enclosure[0]" :src="server.fileUrl + scope.row.enclosure[0].url" alt="alt")
              //- span(v-else) -
              span 图片
          el-table-column(prop="tel" label="更新人" align="center")
          el-table-column(prop="tel" label="更新日期" align="center")
          el-table-column(label="操作" align="center" )
            template(slot-scope="scope")
              el-button(type="text" size="small" @click="editFun(scope.row)")
                i(style="color: #18A12F;").iconfont.icon-bianji
              el-button(type="text" size="small" @click="deleteFun(scope.row)")
                i(style="color: #DD514C;").iconfont.icon-shanchu
      xt-pagination(:total="total" @change="changePage" :page="pageForm.page" :page-size="pageForm.pageSize")
    xt-fileonline(ref="fileDialog" append-to-body)
    xt-dialog(
      ref="addEditBbook"
      class="addEditBbook"
      :title="title"
      @confirm="$refs.xtForm.submit()"
      width="900px"
    )
      xt-form(
        ref="xtForm"
        :label-width="80"
        :formList="formList"
        :grid="[1,1,1,1,1]"
        @submit="submit"
      )
      .editor(style="height: 380px;")
        div 内容：
        div(style="height: 400px;")
          xt-wangEditor( style="width: 100%;height: 90%;" :uploadImgUrl="'oamanage/oamanage/oamanage13'" v-model="detail")
      //- .editor(v-else)
      //-   div 内容：
      //-   div(v-html="formDetais.content" style="width: calc(100% - 120px);")
    xt-dialog(
      ref="treeDialog"
      class="treeDialog"
      :title="editTreeTitle"
      width="440px"
      :autoclose="false"
      @confirm="treeConfirm"
      @close="treeClose"
    )
      .treeForm
        el-input(v-model="treeName" placeholder="请输入内容")
</template>

<script>
import server from '@/server'
import { mapGetters } from 'vuex'
export default {
name: 'help-config',
components: {},
data() {
  let vm = this
  return {
    title: '新增',
    detail: '',
    loading: false,
    tableLoading: false,
    defaultExpandedIdArr: [],
    tableData: [],
    multipleSelection: [],
    total: 0, //页码变量
    pageForm: { //页码
      page: 1,
      pageSize: 20
    },
    server: server,
    page: null,
    searchObj: {},
    searchList: [
      {
        type: 'xt-form',
        children: [
          {
            title: '',
            type: 'input',
            key: 'keywords',
            props: {
              placeholder: '请输入标题'
            }
          }
        ]
      }
    ],
    formList: [
      {
        title: '标题：',
        type: 'input',
        key: 'full_name',
        rule: {required: true, message: '请输入标题', trigger: 'blur'},
        props: {
          'placeholder': '请输入标题'
        }
      },
      {
        title: '类型：',
        type: 'radio-group',
        key: 'job',
        disabled: false,
        defaultValue: 1,
        options: [
          {
            value:1,
            text:'富文本'
          },
          {
            value:2,
            text:'视频'
          },
          {
            value:3,
            text:'附件'
          }
        ],
        onInput(value, item, form){
          if(value == 1) { //富文本
            
          }else if(value == 2) { //视频

          }else { //附件

          }
        },
      },
      {
        title: '目录：',
        type: 'cascader',
        key: 'department_id',
        // rule: {required: true, message: '请选择部门', trigger: 'change'},
        props: {
          'placeholder': '请选择目录',
          clearable: true,
          // 'show-all-levels': false,
          props: {
            expandTrigger: 'hover',
            // checkStrictly: true,
            label: 'name',
            value: '_id'
          }
        },
        options: []
      },
      {
        title: '视频：',
        defaultValue: [],
        isShow: false,
        key: 'video',
        renderContent (h, item, form) {
          // return (<xt-newUnload url="data!member/PreTraining/upload_enclosure" show-text="最多上传1个视频，最大上传1GB，文件格式mp4" buttonType={vm.title == '详情' ? 'look' : ''} limit={1} multiple={false} fileList={ form.video } accept="video/*" onChange={ res => form.video = res }></xt-newUnload>)
          return (<xt-newUnload url="data!help/Document/upload" fileList={ form.video } accept="video/*" onChange={ res => form.video = res }></xt-newUnload>)
        }
      },
      {
        title: '附件：',
        key: 'enclosure',
        defaultValue: [],
        isShow: true,
        props: {
          'placeholder': '请上传附件'
        },
        renderContent (h, item, form) {
          return (<xt-newUnload url='data!qqqqqqqqq/qqqqqqqqq/upload_enclosure' fileList={ form.enclosure } onChange={ res => form.enclosure = res }></xt-newUnload>)
        }
      }
    ],
    treeData: [],
    defaultProps: {
      id: '_id',
      children: 'children',
      label: 'name',
    },
    editTreeTitle: '',
    treeName: '',
    currentNode: null,
    currentId: ''
  }
},
computed: {
  ...mapGetters(['upload_complete', 'isBusiness', 'projects', 'business', 'currentProject', 'currentBusiness', 'authorityInfo']),
  exportParams () {
    let params = JSON.parse(JSON.stringify(this.searchObj))
    let ids = this.multipleSelection.map(item => {
      return item.personnel_id
    })
    params.ids = ids.toString()
    return params
  },
  projectList () {
    if (this.business.type === 'group_owner') {
      return [
        ...this.projects,
        ...[
          { id: `${this.currentBusiness.id}-0`, title: this.currentBusiness.alias },
          { id: '0-0', title: this.business.alias }
        ]
      ]
    } else {
      return [...this.projects, ...[{id: '0', title: this.business.alias}]]
    }
  }
},
watch: {
  upload_complete (value) {
    this.getPersonTreeList()
    this.getData()
  }
},
methods: {
  lookFile(row) {
    this.$refs.fileDialog.open(row.enclosure[0].url)
  },
  // 视频上传
  beforeUploadVideo(file) {
  },
  removeUpload() {
    this.url = ''
  },
  async fnUploadRequest(option) {
    oss.ossUploadFile(option).then(res => {
      this.url = this.baseUrl + res.name
      document.getElementsByClassName('el-upload-list__item-name')[0].addEventListener('click',(e) => {
        this.$refs.fileDialog.open(this.url)
      })
    }).catch(err => {
      this.$error('上传失败')
    });
  },
  async getDepartmentList() {
    let res = await this.$api.getDepartmentList()
    this.formList[2].options = res.result
  },
  async getPersonTreeList() {
    let res = await this.$api.getPersonTreeList()
    this.treeData = res.result
    this.defaultExpandedIdArr = this.treeData.length > 0 ? this.treeData.map(item => item._id) : []
    this.$nextTick(() => {
      this.$refs.leftTreeRef.setCurrentKey(this.treeData && this.treeData[0]._id)
    })
    this.getData()
  },
  treeClose(){
    this.currentNode = null
  },
  async treeConfirm(){
    if(this.treeName && this.treeName.trim()){
      let url = '', id = '', parentId = ''
      if(this.editTreeTitle == '添加子目录'){
        url = 'addPersonTreeList'
        parentId = this.currentNode.data._id
      }else{
        id = this.currentNode.data._id
        url = 'updatePersonTreeList'
        parentId = this.currentNode.parent.data._id
      }
      const data = {
        _id: id,
        name: this.treeName,
        parent_id: parentId
      }
      const res = await this.$api[url](data)
      this.$message.success(this.editTreeTitle == '添加子目录' ? '添加成功！' : '修改成功！')
      // if(this.editTreeTitle == '添加子目录'){
      //   if (!this.currentNode.data.children) {
      //     this.$set(this.currentNode.data, 'children', [])
      //   }
      //   this.currentNode.data.children.push(res.result)
      // }else{
      //   this.currentNode.data.name = this.treeName
      // }
      this.getPersonTreeList()
      this.$refs.treeDialog.handleClose()
      this.treeName = ''
      this.getDepartmentList()
    }else{
      this.$message.warning('请输入目录名称！')
      return
    }
  },
  labelHoverLeave(event,node,data){
    this.$set(node, 'showIcon', false)
  },
  labelHover(event,node,data){
    this.$set(node, 'showIcon', true)
    // //限制层级显示操作按钮
    // if(node.level>2){
    //   this.$set(node, 'showIcon', true)
    // }
    // console.log(node,data)
  },
  delCurTree(node, data){
    if(node.childNodes.length){
      this.$message.warning('存在下级子目录，无法删除！')
      return false
    }
    let index = node.parent.childNodes.findIndex(item=>item.key == data._id)
    this.currentNode = node
    this.$confirm('确定删除该目录, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async() => {
      const data2 = {
        _ids: data._id
      }
      await this.$api.delPersonTreeList(data2)
      this.$success('删除成功！')
      // node.parent.childNodes.splice(index,1)
      this.getPersonTreeList()
      this.getDepartmentList()
    })
  },
  editCurTree(node, data){
    this.editTreeTitle = '修改当前目录'
    this.currentNode = node
    this.treeName = node.data.name
    this.$refs.treeDialog.open()
  },
  addSubTree(node, data){
    this.editTreeTitle = '添加子目录'
    this.currentNode = node
    this.treeName = ''
    this.$refs.treeDialog.open()
  },
  handleNodeClick(data) {
    console.log(data);
    this.currentId = data._id
    this.getData(data._id)
  },
  toggleProject () {
    this.getData()
  },
  handleSelectionChange(val) { // table选择
    this.multipleSelection = val
  },
  async templateDownload() {
    let baseUrl = server.fileUrl
    let res = await this.$api.templateDownload({id: this.documentIdList})
    window.open(baseUrl + res.result.url)
  },
  searchHandle(row) { //查询
    this.searchObj = row
    this.getData()
  },
  async getData(id) { //获取列表
    this.tableLoading = true
    let params = { ...this.searchObj, ...this.pageForm }
    params.department_id = this.currentId
    let res = await this.$api.getBookList(params)
    this.tableData = res.result.data
    this.total = res.result.total
    this.page =  this.pageForm.page
    this.tableLoading = false
  },
  changePage (row) { //翻页
    this.pageForm = {...row}
    this.getData()
  },
  editFun(row) { //编辑
    this.title = '编辑'
    if(!row.is_oneself){
      this.$message.warning('无法进行该操作！')
      return false
    }
    this.formList[1].disabled = true
    this.$refs.addEditBbook.open(row)
  },
  creatFun() { //新增
    this.title = '新增'
    if(this.currentId){
      this.formList[2].defaultValue = this.currentId
    }
    this.$refs.addEditBbook.open()
  },
  batchDelete() { // 批量删除
    if (this.multipleSelection.length === 0) {
      this.$message.warning('请至少选择一项数据')
      return false
    }
    let ids = this.multipleSelection.map(item => {
      return item.personnel_id
    })
    let params = {
      personnel_ids: ids.toString()
    }
    this.commonDelete(params)
  },
  async commonDelete(params) {
    this.$confirm('确定删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async() => {
      await this.$api.deleteBook(params)
      this.$success('删除成功')
      this.getData()
    })
  },
  deleteFun(row) { // 单个删除
    if(!row.is_oneself){
      this.$message.warning('无法进行该操作！')
      return false
    }
    let params = {
      personnel_ids: row.personnel_id
    }
    this.commonDelete(params)
  },
  async submit(type, params) {
    params.department_id = (typeof params.department_id === 'string' ? params.department_id : params.department_id[params.department_id.length-1])
    if (type === 'create') {
      let res = await this.$api.createBook(params)
    } else {
      let res = await this.$api.editBook(params)
    }
    this.$success(`${ type === 'create' ? '新增' : '编辑' }成功`)
    this.$refs.addEditBbook.handleClose()
    this.getData(this.currentId)
  }
},
created() {
},
mounted() {
  this.getPersonTreeList()
  this.getDepartmentList()
},
}
</script>
<style scoped lang="scss">
/deep/ .el-tree {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.editor {
  width: 100%;
  padding-bottom: 10px;
  >div {
    &:nth-of-type(1) {
      width: 80px;
      height: 32px;
      color: #606266;
      font-size: 14px;
      font-weight: bold;
      padding-right: 12px;
      text-align: right;
      float: left;
    }
    &:nth-of-type(2) {
      width: calc(100% - 80px);
      margin-left: 80px;
      /deep/ .text {
        min-height: 310px !important;
        height: 310px !important;
        overflow-y: auto;
      }
    }
  }
}
.addEditBbook {
  /deep/ .el-input {  
    width: 100% !important;
  }
  /deep/ .el-select {
    width: 100% !important;
  }
  /deep/ .el-cascader {
    width: 100% !important;
  }
}
.boxCommon {
  display: flex;
  // justify-content: space-between;
  .treeWrap{
    position: relative;
    width: 260px; margin-right: 15px; padding-right: 1px;
    &::before{
      position: absolute; right: 0; top: 0; bottom: 15px; width: 1px;
      background-color: #dedede; content: "";
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      height: 32px;
      padding-right: 8px;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      .labelName{
        flex: 1; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .iconfont{
        margin-left: 5px; color: #999;
      }
    }
    /deep/ .el-tree-node__content{
      width: 250px;
      height: 32px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
  .dataWrap{
    flex: 1; min-width: 0;
  }
  .button-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /deep/ .el-button{
      vertical-align: top;
    }
    .xt-export{
      vertical-align: top;
    }
  }
  .careful-dialog {
    /deep/ .el-dialog__header {
      background: #FFF8EB;
    }
    /deep/ .title_text {
      color: #F2AD0B;
    }
    .careful {
      font-size: 12px;
      color: #F2AD0B;
      line-height: 24px;
    }
  }
}
</style>