KM-PC-Front-Milestone2/src/views/modules/knowledge/warehouse/knowledgeAddUpdate.vue

<template>
  <div class="page">
    <div class="content">
      <div class="title">{{this.knowledgeForm.bastype==1?'新增文档知识':this.knowledgeForm.bastype==2?'新增维基知识':'新增知识'}}</div>
      <a-form-model 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" 
            :popupStyle="{
              maxWidth: widthVar + 'px',
              'overflow-x': 'auto'
            }"
            class="addItemBox scroll-ckunk"
            :getPopupContainer="triggerNode => { return triggerNode.parentNode }"
            :options="classifyList" 
            :load-data="loadData"
            :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 v-if="!this.knowledgeForm.bastype" class="knowledgeAddUpdateLabel oneline" label="知识类型:" prop="type" style="margin-top: -5px;">
          <a-select class="addItemBox" v-model="knowledgeForm.type" placeholder="请选择" :disabled="!!this.knowledgeForm.bastype">
            <a-icon slot="suffixIcon" type="caret-down" style="font-size: 1vw;"/>
            <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-model-item>
        <a-form-model-item class="knowledgeAddUpdateLabel oneline" label="知识标题:" prop="titles" style="width:46.04vw;margin-top: -5px;">
          <a-input @change='titlesChange' class="addItemBox" maxLength="20" v-model="knowledgeForm.titles" placeholder="请输入" >
            <div slot="suffix" style="color: #C0C0C0;">
              {{titlesNum}}
            </div>
          </a-input>
        </a-form-model-item>
        <a-form-model-item class="knowledgeAddUpdateLabel oneline" label="编辑简介:" prop="summary" style="width:calc( 46.04vw );">
          <a-input @change='summaryChange' class="textareaBox" suffix="100" maxLength="100" v-model="knowledgeForm.summary" type="textarea" :autosize="{minRows: 3, maxRows: 6}" placeholder="请输入" >
          </a-input>
          <div class="rightText">
            {{summaryNum}}
          </div>
        </a-form-model-item>
        <a-form-model-item class="knowledgeAddUpdateLabel" label="编辑正文:" prop="content" style="width:calc( 46.04vw );">
          <editor class="editorBox" :value.sync="knowledgeForm.content"></editor>
        </a-form-model-item>
        <a-form-model-item class="knowledgeAddUpdateLabel" label="上传附件:" prop="accessory" style="margin-top: 2.4vw;" v-if="!knowledgeForm.attachment">
          <a-upload-dragger
            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">
              支持扩展名：.doc .docx .pdf .xls .xlsx .pptx
            </p>
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item class="knowledgeAddUpdateLabel" label="附件下载" v-else>
          <div class="accessory-show">

            <img :src="wordIcon" alt="" style="width: 1.2vw;height: auto;">
            <span style="font-size: 1vw;">{{ knowledgeForm.attachmentName }}</span>
            <rx-button style="font-size: 1vw;color: #406CC4;" class="clearBtn" :butn-icon="'none'" @click="handleShowClick">查看</rx-button>
            <rx-button style="font-size: 1vw;color: #406CC4;" class="clearBtn" :butn-icon="'none'" @click="handleFileDelClick">删除</rx-button>
            <rx-button style="font-size: 1vw;color: #406CC4;" class="clearBtn" :butn-icon="'none'" @click="handleFileDownloadClick">下载</rx-button>
          </div>
        </a-form-model-item>
        <template v-if="showOnlyOffice">
          <div class='qualityManual-container-office'>
            <vab-only-office :option='option' />
          </div>
        </template>  
        <a-divider style="margin: 2.08vw 0 1.56vw;" />
        <div class="button-group" style="width:100%;display:flex;justify-content:flex-end;">
          <a-button style="background:#406CC4;color:#fff;margin-right: 1.25vw;" @click="handleSaveClick">提交</a-button>
          <a-button @click="$router.back()">取消</a-button>
        </div>
      </a-form-model>
    </div>
    <div class="content" style="margin-top: 1.25vw;">
      <div class="title">审批流程</div>
      <div style="width:100%;margin-top: 1.5vw;">
        <a-table class="tableBox" :columns="approverColumns" :data-source="approverData" :pagination="false">
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import add from '@/assets/img/warehouse/add.png'
import wordIcon from '@/assets/img/warehouse/wordIcon.png'
import { ACCESS_TOKEN } from '@/store/mutation-types';
import editor from '../components/editor'
import vabOnlyOffice from '../components/onlyOffice'
import { getCategoryId } from './aJs/getClassifyTree'
import api from '@/api/knowledge/warehouseIndex'
import contentData from '@/api/knowledge/contentData'
export default {
  name: 'knowledgeAddUpdate',
  components: {
    editor,
    vabOnlyOffice
  },
  data() {
    return {
      loading:false,
      api,
      add,
      wordIcon,
      pkId: '',
      titlesNum:20,
      summaryNum:100,
      knowledgeForm: {
        categoryId: [],
        type: undefined,
        bastype:undefined,
        titles: '',
        summary: '',
        content: '',
        attachment: '', 
        attachmentName: '',
        createBy: '',
        author: ''
      },
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
            },
          ],
        }
      ],
      classifyList: [],
      knowledgeList: [
        {value: '1', label: '文档知识'},
        {value: '2', label: '维基知识'}
      ],
      showOnlyOffice: false,
      knowledgeRules: {
        categoryId: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择知识类型', trigger: 'blur' }
        ],
        titles: [
          { required: true, message: '请输入知识标题', trigger: 'blur' }
        ],
        summary: [
          { required: true, message: '请输入编辑简介', trigger: 'blur' }
        ]
      },
      approverColumns: [
        {
          title: '流程节点',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '审批人',
          dataIndex: 'approverName',
          align: 'center'
        },
        {
          title: '审批状态',
          dataIndex: 'approvalStatus',
          align: 'center'
        },
        {
          title: '审批备注',
          dataIndex: 'remark',
          align: 'center'
        },
        {
          title: '时间',
          dataIndex: 'approvalTime',
          align: 'center'
        },
      ],
      approverData: [
        {
          node: '知识提交',
          approver: '放羊',
          status: '审核通过',
          time: '2022-05-01 18:30:00'
        },
         {
          node: '知识提交',
          approver: '放羊',
          status: '审核通过',
          time: '2022-05-01 18:30:00'
        }
      ],
      option: {
        url: '',
        canPrint: true,
        canDownload:true,
        isEdit: '',
        fileType: '',
        title: '',
        lang: '',
        isPrint: '',
        user: { id:null,name:''}
      },
      headers: {},
      isSubmit:false,
      innerWidth: 800
    }
  },
  created() {
    this.knowledgeForm = Object.assign({},this.$options.data().knowledgeForm)
    if(this.$route.query.type) {
      this.knowledgeForm.type = this.$route.query.type
      this.knowledgeForm.bastype = this.$route.query.type
    }
    if(this.$route.query.categoryId&&this.$route.query.categoryId!='000') {
      this.knowledgeForm.categoryId = this.$route.query.categoryId.split(',')
    }
    let pkId = this.$route.query.pkId
    if(pkId) {
      this.pkId = pkId
      api.info({pkId:pkId,isPc:1}).then(res => {
        this.knowledgeForm.categoryId = getCategoryId(res.data.knowledgeCategoryAdminVo)
        this.knowledgeForm.type = res.data.type.toString()
        this.knowledgeForm.titles = res.data.titles
        this.knowledgeForm.summary = res.data.summary
        this.knowledgeForm.content = res.data.content
        this.knowledgeForm.attachment = res.data.attachment
        this.knowledgeForm.attachmentName = res.data.attachmentName
        this.approverData = res.data.approvals
        this.knowledgeForm.createBy = res.data.createBy
        this.knowledgeForm.author = res.data.author
        this.titlesChange()
        this.summaryChange()
      })
    } else {
      this.pkId = ''
      this.knowledgeForm.createBy = this.$store.state.appSetting.user.userId
      this.knowledgeForm.author = this.$store.state.appSetting.user.fullName
          let queryParam = {
        "pageNo": 1,
        "pageSize": 1000,
        "sortField": "",
        "sortOrder": "asc",
        "params": {}
      }
      api.findAllApprovalNodes(queryParam).then(res => {
        this.approverData = res.result.data.map(item => {
          return {
            name: item.name,
            approverId: item.approverId,
            approverName: item.approverName,
            isFinal: item.isFinal
          }
        })
      })
    }
    this.init()
    var token = Vue.ls.get(ACCESS_TOKEN);
    if (token) {
      this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
    }
  },
  mounted() {
    let innerWidth = window.innerWidth

    // 计算
    setTimeout(() => {
      let offsetWidth = document.querySelector('.scroll-ckunk').getBoundingClientRect().left
      this.widthVar = innerWidth - offsetWidth - 40
    }, 1000);
    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)*/
   
  },
  methods: {
    //  title修改限制数量
    titlesChange(){
      this.titlesNum=20-this.knowledgeForm.titles.length
    },
    //  简介修改限制数量
    summaryChange(){
      this.summaryNum=100-this.knowledgeForm.summary.length
    },
    //  提交数据
    handleSaveClick() {
      let that = this
      if(this.knowledgeForm.categoryId.slice(-1)[0]=='000'){
        this.$message.error('请选择分类');
        return false
      }
      this.$refs.knowledgeRef.validate(valid => {
        if (valid) {
           // 新增
          if(!this.pkId) {
              if(this.isSubmit){
                return false
              }
              this.isSubmit = true
              api.create({...this.knowledgeForm, categoryId: this.knowledgeForm.categoryId.slice(-1)[0]}).then(res => {
                if(res.code == 200) {
                  if(res.message.indexOf('知识失败')>-1){
                    this.$message.error(res.message);
                    this.isSubmit = false
                  }else{
                    setTimeout(function(){
                      that.$router.back();
                      that.isSubmit = false;
                    },2000)
                  }
                }
              })
          } else {
            api.save({...this.knowledgeForm, categoryId: this.knowledgeForm.categoryId.slice(-1)[0], pkId: this.pkId}).then(res => {
              if(res.code == 200) {
                setTimeout(() => 
                  this.$router.back()
                  ,2000)
                }
            })
          }
        }
      })
    },
     // 处理分类数据展示
    categoryData(data){
      data.forEach(element => {
        element.label=element.name
        element.value=element.pkId
        if(element.children!=null&&element.children.length!=0){
          this.categoryData(element.children)
        }
      })
    },
    //  初始化数据
    async init() {
      contentData.getAllKnowledgeCategory().then((res) =>{
        this.categoryData(res.data)
        this.classifyList=res.data
      })
      /*let res = await api.getKnowledgeCategory(0)
      this.classifyList = res.data.children.map(item => {
         if(!item.hasChild) {
          item.isLeaf = true
         } else {
          item.isLeaf = false
         }
        delete item.children
        return item
      })*/
    },
    //  分类懒加载
    async loadData(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]
    },
    //  上传前文件过滤
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message.error('附件不能超过100M');
        return false
      }
      const fileName = file.name.split('.')
      const fileExt = fileName.slice(-1)[0]
      let arr = ['doc','docx','pdf','xls','xlsx','pptx']
      if(arr.indexOf(fileExt) == -1) {
        this.$message.error('仅支持格式.doc .docx .pdf .xls .xlsx .pptx的文件');
        return false
      }
      return true
    },
    //  文件上传
    handleChange(info) {
      if(info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if(info.file.status === 'done') {
        this.loading = false
        this.knowledgeForm.attachment = info.file.response.data[0].fileId
        this.knowledgeForm.attachmentName = info.file.response.data[0].fileName
      }
    },
      // 删除文件
    handleFileDelClick() {
      this.knowledgeForm.attachment = ''
      this.knowledgeForm.attachmentName = ''
    },
    // 下载文件
    handleFileDownloadClick() {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = '/api/api-system/system/core/sysFile/previewFile?fileId='+this.knowledgeForm.attachment
      // link.target = '_blank'
      link.setAttribute('download', this.knowledgeForm.attachmentName)
      document.body.appendChild(link)
      link.click()
      link.remove()
      //window.open("/api/api-system/system/core/sysFile/previewFile?fileId="+this.knowledgeForm.attachment)
    },
    //  查看文件
    handleShowClick() {
      this.option.isEdit = false
      this.option.lang = 'zh-CN'
      let baseUrl = api.url0
      if(location.href.indexOf('10.5.100.101')>-1){
        baseUrl = api.url1
      }
      this.option.url = baseUrl+'/api/api-system/system/core/sysFile/previewFile?fileId='+this.knowledgeForm.attachment
      // this.option.url = 'http://10.5.100.64:9900/api-system/system/core/sysFile/previewFile?fileId=1597050108435845121'
      //this.option.url = 'http://10.5.100.101/api/api-system/system/core/sysFile/previewFile?fileId='+ this.knowledgeForm.attachment,
      //this.option.url = 'http://www.hkcqjy.com.cn:8088/api/api-system/system/core/sysFile/previewFile?fileId='+ this.knowledgeForm.attachment,
      this.option.title = this.knowledgeForm.attachmentName
      this.option.fileType = this.knowledgeForm.attachmentName.split('.').slice(-1)[0]
      this.option.isPrint = false
      this.showOnlyOffice = true
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100%;
  padding: 29px 10.93vw;
  background: #FAFAFA;
  box-sizing: border-box;

  .content {
    width: 100%;
    padding: 1.87vw 2.08vw;
    background: #fff;
    border-radius: 0.52vw;

    .title {
      font-size: 1.14583vw;
      margin-left: 0.6vw;
      color: #202124;
      font-weight: 550;
    }

    .ant-form {
      .ant-form-item {
        margin-bottom: 2.08vw;
      }

      .ant-form-item:first-child {
        margin-top: 1.51vw;
      }

      .button-group {
        >button {
          width: 7.96vw;
          height: 2.5vw;
          font-size: 0.93vw;
        }
      }

    }
  }
}
.accessory-show {
  display:flex;
  align-items: center;
  img {
    width: 32px;
    height: 32px;
  }
  span {
    margin: 0 40px 0 10px;
  }
}
.clearBtn {
  background: none;
  color: #3294F7;
  text-shadow: none;
  padding: 0px 6px;
  border: none;
  box-shadow: none;
}
</style>

<style scoped>
/deep/ .ant-form label {
  font-size: 16px;
}
.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;
}
/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;
}

/deep/ .ant-upload.ant-upload-drag {
  border: none;
}
/deep/ .ant-table-thead > tr > th {
  padding: 20px!important;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 20px!important;
}
.qualityManual-container-office {
  width: 100%;
  height: 70vw;
  display: block;
}

.tableBox /deep/.ant-table-thead{
  height: 3.69791vw;
  font-size: 0.9375vw;
  color: #202124;
  background: #F9F9FA;
}
.tableBox /deep/.ant-table-column-title{
  font-weight: 550;
}
.tableBox /deep/.ant-table-tbody{
  font-size: 0.9375vw;
  color: #202124;
}
.tableBox /deep/td{
  border: none;
}
.tableBox /deep/.ant-table-row{
  height: 4vw;
}
.textareaBox{
  padding-right: 50px;
}
.rightText{
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 0.9375vw;
  color: #C0C0C0;
}
.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;
}
.knowledgeAddUpdateLabel /deep/.ant-form-item-children{
  display: block;
}

.addSelectOption{
  font-size: 0.9375vw;
  height: 2.0833vw;
  line-height: 2.0833vw;
}
</style>
<style>
.dropdownClassli{
  margin-bottom: 0.52vw;
}

.dropdownClassli:first-child{
  margin-top: 1.04vw;
}
.dropdownClassli:last-child{
  margin-bottom: 1.04vw;
}
.uploadBox{
  width: 26.927vw;
  height: 11.979vw;
  display: block;
}
.ant-upload-hint{
  font-size: 0.833333vw!important;
}
.ant-upload-text{
  font-size: 0.833333vw!important;
  margin-bottom: 0.4687vw!important;
}
.ant-upload-drag-icon img{
  width: 2.29166vw;
  height: 2.29166vw;
}
.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);
}
.ant-cascader-picker-label{
  height: 30px;
}
</style>
<style scoped>
/deep/ .ant-cascader-menus {
  left: 0!important;
}
/deep/ .ant-cascader-menu:last-child {
  margin-right: 0!important;
}
</style>