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

<template>
  <rx-layout>
    <div slot="center" style>
      <div class="mainContent">
        <breadcrumb firstLevel="知识仓库管理" lastLevel="知识管理" />
        <div class="body">
          <div class="content">
            <a-form-model ref="knowledgeRef" :model="knowledgeForm" :rules="knowledgeRules" layout="inline" hideRequiredMark>
              <a-form-model-item label="*所选分类:" prop="categoryId">
                <a-cascader v-model="knowledgeForm.categoryId" 
                  class="scroll-ckunk"
                  :popupStyle="{
                    maxWidth: widthVar + 'px',
                    'overflow-x': 'auto'
                  }"
                  :getPopupContainer="triggerNode => { return triggerNode.parentNode }"
                  :disabled="!!pkId"
                  :options="classifyList" 
                  :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                  placeholder="请选择"
                  changeOnSelect />
              </a-form-model-item>
              <a-form-model-item label="*知识类型:" prop="type">
                <a-select v-model="knowledgeForm.type" placeholder="请选择" :disabled="!!pkId">
                  <a-select-option v-for="(item,index) in knowledgeList" :key="index" :value="item.value">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="*知识标题:" prop="titles">
                <a-input v-model="knowledgeForm.titles" placeholder="请输入" :disabled="!!pkId" />
              </a-form-model-item>
              <a-form-model-item prop="author">
                <span slot="label">&emsp;&emsp;&ensp;作者</span>
                <a-input disabled v-model="knowledgeForm.author" placeholder="请输入" />
              </a-form-model-item>
              <!-- 知识管理与审核管理查看时 为true不可编辑-->
              <a-form-model-item label="*编辑简介:" prop="summary">
                <a-input v-model="knowledgeForm.summary" :disabled="!!$route.query.show" type="textarea" :autosize="{minRows: 3, maxRows: 6}" placeholder="请输入(建议100个汉字以内)" />
              </a-form-model-item>
              <!-- 知识管理与审核管理查看时 为true-->
              <a-form-model-item label="编辑正文:" prop="content">
                <editor class="editorBox" :disabled="!!$route.query.show" :value.sync="knowledgeForm.content"></editor>
              </a-form-model-item>
              <a-form-model-item label="上传附件:" prop="attachment" v-if="!knowledgeForm.attachment">
                <span v-if="!!$route.query.show">未上传附件</span>
                <a-upload-dragger
                  v-else
                  name="file"
                  :headers="headers"
                  action="/api/api-system/system/core/sysFile/upload"
                  :showUploadList="false"
                  @change="handleChange"
                  :beforeUpload="beforeUpload"
                >
                  <p class="ant-upload-drag-icon">
                    <a-icon v-if="!loading" type="inbox" />
                    <a-icon v-else type="loading" />
                  </p>
                  <p class="ant-upload-text" v-if="!loading">
                    点击或将文件拖拽到这里上传（仅可上传一份
                  </p>
                  <p v-else class="ant-upload-text">
                    上传中...
                  </p>
                  <p class="ant-upload-hint">
                    支持扩展名：.doc .docx .pdf .xls .xlsx .pptx
                  </p>
                </a-upload-dragger>
              </a-form-model-item>
              <!-- <a-form-model-item label="上传附件:" prop="accessory"> -->
                <!-- <vab-only-office :option='option' officeHeight="800"></vab-only-office> -->
              <!-- </a-form-model-item> -->
              <a-form-model-item label="附件下载" prop="pass" v-else>
                <div class="accessory-show">
                  <img :src="wordIcon" alt="">
                  <span style="">{{ knowledgeForm.attachmentName }}</span>
                  <rx-button class="clearBtn" :butn-icon="'none'" @click="handleShowClick">查看</rx-button>
                  <rx-button class="clearBtn" :butn-icon="'none'" v-if="(type == 'knowledgeManageList') && !$route.query.show" @click="handleFileDelClick">删除</rx-button>
                  <rx-button class="clearBtn" :butn-icon="'none'" @click="handleFileDownloadClick">下载</rx-button>
                </div>
              </a-form-model-item>
              <template v-if="showOnlyOffice">
                <vab-only-office :option="option" officeHeight="800"></vab-only-office>
              </template>  
              <!-- 审核管理 审核时-->
              <template v-if="!!$route.query.isAudit && (type == 'auditManageList')">
                <a-form-model-item label="知识审批:" style="font-size:16px;">
                  <div style="width:100%;box-sizing:border-box;margin-bottom: 16px;">
                    <a-radio-group v-model="auditForm.result">
                      <a-radio value="1">通过</a-radio>
                      <a-radio value="0">驳回</a-radio>
                    </a-radio-group>
                  </div>
                  <div style="width:100%;box-sizing:border-box">
                    <a-input v-model="auditForm.remark" type="textarea" :autosize="{minRows: 3, maxRows: 6}" :maxLength="200" placeholder="请输入审批意见" />
                  </div>
                </a-form-model-item>
                <!-- 最终节点审 核时 -->
                <a-form-model-item v-if="isShowOrg && knowledgeForm.type == 1" prop="actualApproverName">
                  <span slot="label">&emsp;&emsp;权限</span>
                  <div @click="showAuditFlag = true">
                    <a-select v-model="authName" :showArrow="false" :open="false" placeholder="请选择组织部门、职系、职称等授予知识访问权限"></a-select>
                  </div>
                </a-form-model-item>
              </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="!!$route.query.isAudit || !pkId" type="primary" @click="handleSaveClick" :loading="saveLoading">保存</a-button>
              </a-row>
              <a-form-model-item label="审批流程:" style="font-size:16px;">
                <div style="width:100%;box-sizing:border-box;margin-top:4px;">
                  <a-table :columns="approverColumns" :data-source="approverData" :pagination="false">
                  </a-table>
                </div>
              </a-form-model-item>
              <!-- 知识管理 编辑和查看 -->
              <a-form-model-item v-if="type == 'knowledgeManageList' && !!pkId && accessAuthority" label="访问权限:" prop="accessAuthority" style="margin: 20px 0;">
                <a-input disabled v-model="accessAuthority" />
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
      </div> 
      <a-modal v-model="showAuditFlag" 
            width="800"
            title="选择" 
            centered
            okText="保存"
            @ok="handleSaveOk">
        <org-people :isOnlyOrg="false" 
                    style="width:800px;height:65vh;" 
                    @transCheckedTarget="transCheckedTarget"
                    @returnSequencesInfo="handleSequencesChange"
                    @returnGradeInfo="handleGradeChange" />
      </a-modal>  
    </div> 
  </rx-layout>
</template>

<script>
import wordIcon from '@/assets/img/wordIcon.png'
import editor from '../components/editor'
import breadcrumb from '../components/breadcrumb'
import orgPeople from './components/orgPeople'
import vabOnlyOffice from '../components/onlyOffice'
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { getCategoryId } from '../aJs/getClassifyTree'
import api from '@/api/knowledge/manage'
import auditApi from '@/api/knowledge/audit'
import classApi from '@/api/knowledge/classify'
import processApi from '@/api/knowledge/auditProcess'
import initMixin from "../aMixin/initMixin"
export default {
  name: 'knowledgeAddUpdate',
  mixins: [ initMixin ],
  components: {
    editor,
    breadcrumb,
    vabOnlyOffice,
    orgPeople
  },
  data() {
    return {
      loading:false,
      api,
      classApi,
      saveLoading: false,
      wordIcon,
      // 知识id
      pkId: '',
      type: '',
      knowledgeForm: {
        createBy: '',
        categoryId: [],
        type: undefined,
        titles: '',
        author: '',
        summary: '',
        content: '',
        attachment: '', 
        attachmentName: ''
      },
      showAuditFlag: false,
      showOnlyOffice: false,
      auditForm: {
        pkId: '',
        result:'1',
        remark:'',
        actualApprover: '',
        actualApproverName: '',
        organizationId: ''
      },
      authName: undefined,
      accessAuthority: undefined,
      isShowOrg: false,
      knowledgeList: [
        {value: '1', label: '文档知识'},
        {value: '2', label: '维基知识'}
      ],
      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',
        },
        {
          title: '审批人',
          dataIndex: 'approverName',
        },
        {
          title: '审批状态',
          dataIndex: 'approvalStatus',
        },
        {
          title: '审批备注',
          dataIndex: 'remark',
        },
        {
          title: '时间',
          dataIndex: 'approvalTime',
        },
      ],
      approverData: [],
      classifyList: [],
      option: {
        url: '',
        canPrint: true,
        canDownload:true,
        isEdit: '',
        fileType: '',
        title: '',
        lang: '',
        isPrint: '',
        user: { id:null,name:''}
      },
      headers: {},
      // 组织架构
      checkedTarget: {},
      // 职系
      sequencesInfo: {},
      // 职等
      gradesInfo: {},
      innerWidth: 800
    }
  },
  created() {
    this.knowledgeForm = Object.assign({},this.$options.data().knowledgeForm)
    this.auditForm = Object.assign({},this.$options.data().auditForm)
    let pkId = this.$route.query.pkId
    if(pkId) {
      this.pkId = pkId
      this.type = this.$route.query.type
      api.info({pkId:pkId}).then(res => {
        this.knowledgeForm.createBy = res.data.createBy
        this.knowledgeForm.categoryId = getCategoryId(res.data.knowledgeCategoryAdminVo)
        this.knowledgeForm.type = res.data.type.toString()
        this.knowledgeForm.titles = res.data.titles
        this.knowledgeForm.author = res.data.author
        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.auditForm.actualApprover = this.$store.state.appSetting.user.userId
        this.auditForm.actualApproverName = this.$store.state.appSetting.user.fullName
        if(res.data.organizationId) {
          let organizationInfo = JSON.parse(res.data.organizationId)
          let info = []
          for(let i of organizationInfo) {
            if(i.organizationId) {
              info.push(`${i.organizationTree.join('-')}`)
            } else if(i.gradeId) {
              info.push(`职系-${i.gradeName}`)
            } else {
              info.push(`职等-${i.gradeLevelName}`)
            }
          }
          this.accessAuthority = info.join('/')
        }
        // 待最终节点审批
        this.isShowOrg = res.data.approvalStatus == 3 ? true : false
      })
    } else {
      this.pkId = ''
      this.type = 'knowledgeManageList'
      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": {}
      }
      processApi.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)*/
   
  },
  beforeDestroy() {
    this.$refs.knowledgeRef.clearValidate()
  },
  methods: {
    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() {
      // window.open("/api/api-system/system/core/sysFile/previewFile?fileId="+this.knowledgeForm.attachment)

      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()
    },
    // 保存
    handleSaveClick() {
      // 新增
      if(!this.pkId) {
          this.$refs.knowledgeRef.validate(valid => {
            if (valid) {
                this.saveLoading = true
                api.create({...this.knowledgeForm, categoryId: this.knowledgeForm.categoryId.slice(-1)[0]}).then(res => {
                if(res.code == 200) {
                  setTimeout(() => 
                  {
                    this.$router.back()
                    this.saveLoading = false
                  }
                    ,1000)
                }
              })
            }
          }
        )
      } else {
        // 从知识管理跳进
        this.saveLoading = true
        if(this.type == 'knowledgeManageList') {
          this.$refs.knowledgeRef.validate(valid => {
          if (valid) {
            api.save({...this.knowledgeForm, categoryId: this.knowledgeForm.categoryId.slice(-1)[0], pkId: this.pkId}).then(res => {
              if(res.code == 200) {
                setTimeout(() => 
                  {
                    this.$router.back()
                    this.saveLoading = false
                  }
                  ,1000)
                }
              })
            }
          })
        } else {
          // 从审核管理跳转
          this.auditForm.pkId = this.$route.query.auditId
          auditApi.knowledgeApproveById(this.auditForm).then(res => {
            if(res.code == 200) {
              setTimeout(() => 
              {
                this.$router.back()
                this.saveLoading = false
              }
              ,1000)
            }
          })
        }
      }
    },
    transCheckedTarget(arg) {
      this.checkedTarget = arg
    },
    handleSequencesChange(arg) {
      this.sequencesInfo = arg
    },
    handleGradeChange(arg) {
      this.gradesInfo = arg
    },
    handleSaveOk() {
      if(this.isShowOrg && this.knowledgeForm.type == 1) {
        let info = []
        let res = []
        if(this.checkedTarget.organizationId) {
          info.push(`${this.checkedTarget.organizationTree.join('-')}`)
          res.push(this.checkedTarget)
        }
        if(this.sequencesInfo.gradeId) {
          info.push(`职系-${this.sequencesInfo.gradeName}`)
          res.push(this.sequencesInfo)
        }
        if(this.gradesInfo.gradeLevelId) {
          info.push(`职等-${this.gradesInfo.gradeLevelName}`)
          res.push(this.gradesInfo)
        }
        if(info.length) {
          this.authName = info.join('/')
        }
        if(res.length) {
          this.auditForm.organizationId = JSON.stringify([...res])
        } else {
          this.auditForm.organizationId = ""
        }
      }
      this.showAuditFlag = false
    },
    handleShowClick() {
      this.option.isEdit = false
      this.option.lang = 'zh-CN'
      // 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/: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>
@gary:  #f8f8f8;
@white: #fff;
.mainContent {
  min-height: 100%;
  width: 100%;
  padding: 40px;
  background: #f8f8f8;
  position: relative;
  .ant-breadcrumb {
    position:absolute;
    top:10px;
  }
  .body {
    height: 100%;
    background: @white;
    .content {
      height: 100%;
      background: @white;
      padding: 0 20px 20px;

      .ant-form-item {
        margin: 8px 0 16px;
      }
    }
  }
}
.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-upload.ant-upload-drag {
  width: 30%;
  background: #fff;
}
/deep/.ant-btn > .anticon + span {
  margin-left: 0;
}
/deep/ .ant-cascader-menus {
  left: 0!important;
}
/deep/ .ant-cascader-menu:last-child {
  margin-right: 0;
}
</style>