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

<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit>   
        <div slot="toolheader" border="false" foldbtn="false">
          <breadcrumb firstLevel="知识仓库管理" lastLevel="审核管理" />
          <div class="mainContent">
            <div class="body" :style="{'padding-right': $store.state.appSetting.collapsed ? '0px' : '20px' }">
              <div class="content">
                <a-form ref="auditFrom" layout="inline" style="display:flex;flex-wrap:wrap;">
                  <a-form-item
                    class="form-item-style"
                    label="知识标题"
                    name="name">
                    <a-input class="set-input" v-model="queryParam.titles" placeholder="请输入"/>
                  </a-form-item>
                  <a-form-item
                    class="form-item-style"
                    label="创建时间"
                    name="createTime">
                    <a-range-picker v-model="createTime" 
                                    class="set-range-picker" 
                                    separator="→"
                                    format="YYYY/MM/DD"
                                    valueFormat="YYYY-MM-DD"
                                    @change="handleClearTimeChange">
                    </a-range-picker>
                  </a-form-item>
                  <a-form-item
                    class="form-item-style"
                    label="审核状态"
                    name="online">
                    <a-select class="set-input" v-model="queryParam.approvalStatus" placeholder="请选择"  allowClear :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                      <a-select-option v-for="(item,index) in approvalStatusList" :key="index" :value="item.value">
                        {{item.label}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item
                    class="form-item-style"
                    label="知识类别"
                    name="online">
                    <a-select class="set-input" v-model="queryParam.type" placeholder="请选择"  allowClear :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                      <a-select-option v-for="(item,index) in knowledgeList" :key="index" :value="item.value">
                        {{item.label}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item
                    class="form-item-style"
                    label="所属分类"
                    name="categoryIds">
                    <a-cascader v-model="categoryIds" 
                                class="set-input scroll-ckunk"
                                :popupStyle="{
                                  maxWidth: widthVar + 'px',
                                  'overflow-x': 'auto'
                                }"
                                :getPopupContainer="triggerNode => { return triggerNode.parentNode }"
                                :options="classifyList" 
                                :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                                placeholder="请选择"
                                changeOnSelect
                                @change="handleClassifyChange" />
                  </a-form-item>
                  <a-form-item
                    class="form-item-style"
                    label="作者"
                    name="creator">
                    <a-input class="set-input" v-model="queryParam.author" placeholder="请输入" />
                  </a-form-item>
                  <div style="display:flex;justify-content:center;margin-top: 8px;">
                    <a-button @click="handleResetClick(true)">重置</a-button>
                    <a-button type="primary" @click="handleSearchClick">查询</a-button>
                  </div>
                </a-form>
                <rx-button alias="processEdit" :butn-icon="'false'" @click="$router.push('/knowledge/auditProcessMaintain')">维护审核流程</rx-button>
                <rx-button alias="processBatch" :butn-icon="'false'" @click="handldAuditClick('batch')">批量审核</rx-button>
              </div>
            </div>
          </div>
        </div>    

        <rx-grid
          ref="auditRef"
          class="table-style"
          style="background: #fff"
          :columns="columns"
          :allowRowSelect="true"
          :multiSelect="true"
          :url="urls"
          :queryParam="queryParam"
          data-field="result.data"
          :defaultPageSize="10"
          :heightAuto="true"
          :pageSizeOptions="['10','20','30','40']"
          idField="pkId"
        > 
          <template slot="pkId" slot-scope="{text,record}">
            <div>{{ $route.query.showUnchecked ? record.approvalsFirst.pkId : text }}</div>
          </template>
           <template slot="titles" slot-scope="{text}">
            <div style="white-space: pre-line">{{ text }}</div>
          </template>
          <template slot="type" slot-scope="{text}">
            <div>{{ text == 1 ? '文档知识' : '维基知识' }}</div>
          </template>
          <template slot="knowledgeCategoryAdminVo" slot-scope="{text}">
            <div style="white-space: pre-line">{{ getCategory(text) }}</div>
          </template>
          <template slot="approvalStatus" slot-scope="{text}">
            <div>{{ getApprovalStatus(text) }}</div>
          </template>
          <template slot="action" slot-scope="{text,record}">
             <!-- isAudit 0能审核 1不能审核 -->
            <template v-if="($route.query.showUnchecked ? true : record.isAudit == 0) && (record.approvalStatus == 1 || record.approvalStatus == 3)" >
            <!-- <template v-if="(record.approvalStatus == 1 || record.approvalStatus == 3) && record.approverId == $store.state.appSetting.user.userId" > -->
              <rx-button class="clearBtn" alias="processDo" :butn-icon="'none'" @click="handleJumpUpdateClick(record)">审核</rx-button>
              <rx-button class="clearBtn" alias="processFast" :butn-icon="'none'" @click="handldAuditClick('fast',record)">快速审核</rx-button>
            </template>
            <template v-else>
              <rx-button class="clearBtn" alias="processLook" :butn-icon="'none'" @click="handleJumpUpdateClick(record,true)">查看</rx-button>
            </template>
          </template>
        </rx-grid>
      </rx-fit>
      <a-modal v-model="auditShow" 
               :title="modalTitle" 
               centered
               okText="保存"
               @ok="handleOk"
               :confirmLoading="saveLoading">
        <a-form ref="labelRef" :model="auditForm" layout="inline">
          <a-form-item prop="result">
            <a-radio-group v-model="auditForm.result">
              <a-radio value="1">通过</a-radio>
              <a-radio value="0">驳回</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item prop="remark" style="margin-top:10px;">
            <a-input v-model="auditForm.remark" type="textarea" :autosize="{minRows: 3, maxRows: 6}" :maxLength="200" placeholder="请输入审批意见" />
          </a-form-item>
          <a-form-item v-if="isShowOrg && isDocument" label="权限:" prop="actualApproverName" style="margin-top:10px;">
            <div @click="showAuditFlag = true">
              <a-select v-model="authName" :showArrow="false" :open="false" placeholder="请选择组织部门、职系、职称等授予知识访问权限"></a-select>
            </div>
          </a-form-item>
        </a-form>
      </a-modal>
      <a-modal v-model="showAuditFlag" 
          width="800"
          title="选择组织架构" 
          centered
          okText="保存"
          @ok="handleSaveOk">
        <org-people style="width:800px;height:65vh;" 
                    :isOnlyOrg="false"  
                    :organizationIdsInfo="organizationIdsInfo"
                    @transCheckedTargets="transCheckedTargets"
                    @returnSequencesInfo="handleSequencesChange"
                    @returnGradeInfo="handleGradeChange" ></org-people>
      </a-modal>  
    </div> 
  </rx-layout>
</template>

<script>
import breadcrumb from '../components/breadcrumb'
import orgPeople from './components/orgPeople'
import api from '@/api/knowledge/audit'
import classApi from '@/api/knowledge/classify'
import { getCategory } from '../aJs/getClassifyTree'
import mixin from "../aMixin/mixin"
import initMixin from "../aMixin/initMixin"
const auditMixin = new mixin('audit')
export default {
  name: 'auditManageList',
  components: {
    breadcrumb,
    orgPeople
  },
  mixins: [ initMixin, auditMixin ],
  data() {
    return {
      api,
      classApi,
      saveLoading: false,
      urls: '',
      modalTitle: '快速审核',
      extend: true,
      queryParam: {
        titles: '',
        beginTime: '',
        endTime: '',
        approvalStatus: undefined,
        type: undefined,
        categoryId: '',
        author: '',
      },
      createTime: [],
      categoryIds: [],
      knowledgeList: [
        {value: null, label: '全部'},
        {value: '1', label: '文档知识'},
        {value: '2', label: '维基知识'}
      ],
      approvalStatusList: [
        {value: '1', label: '待节点审核'},
        {value: '2', label: '节点驳回'},
        {value: '3', label: '待最终审核'},
        {value: '4', label: '最终驳回'},
        {value: '5', label: '最终通过'},
      ],
      columns: [
        {
          title: 'ID',
          dataIndex: 'pkId',
          align: 'center',
          scopedSlots: {customRender: 'pkId'}
        },
        {
          title: '知识标题',
          dataIndex: 'titles',
          align: 'center',
          scopedSlots: {customRender: 'titles'}
        },
        {
          title: '知识类型',
          dataIndex: 'type',
          align: 'center',
          width: 100,
          scopedSlots: {customRender: 'type'}
        },
        {
          title: '所属分类',
          dataIndex: 'knowledgeCategoryAdminVo',
          align: 'center',
          width: 150,
          scopedSlots: {customRender: 'knowledgeCategoryAdminVo'}
        },
         {
          title: '作者',
          dataIndex: 'author',
          align: 'center',
          width: 100
        },
         {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
         {
          title: '状态',
          dataIndex: 'approvalStatus',
          align: 'center',
          scopedSlots: {customRender: 'approvalStatus'},
          width: 100
        },
         {
          title: '审核人',
          dataIndex: 'approverName',
          align: 'center',
          width: 100
        },
         {
          title: '最后一次审核时间',
          dataIndex: 'approvalTime',
          align: 'center',
        },
        { 
          title: '操作',
          dataIndex: 'action', 
          // align: 'center',
          scopedSlots: {customRender: 'action'},
          width: 140
        }
      ],
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
            },
          ],
        }
      ],
      auditShow: false,
      showAuditFlag: false,
      // 要审核的数据
      willAuditData: [],
      auditForm: {
        pkId: '',
        result:'1',
        remark:'',
        actualApprover: '',
        actualApproverName: '',
        organizationIds: {}
      },
      authName: undefined,
      isShowOrg: false,
      classifyList: [],
      // 组织架构
      checkedTargets: {},
      // 职系
      sequencesInfo: {},
      // 职等
      gradesInfo: {},
      // 维基知识不能选择权限
      isDocument: false,
      widthVar: 800,
      organizationIdsInfo: {}
    }
  },
  activated() {
    if(localStorage.getItem('auditFirst')=='true'){
      this.queryParam.categoryId = 9999
      localStorage.setItem('auditFirst',false)
    }
    if(localStorage.getItem('cancle')=='true'){
      localStorage.setItem('cancle',false)
    }else{
      this.reloadTable()
    }
    setTimeout(() => {
      this.queryParam.categoryId = ''
    },1000)
  },
  created() {
    // 从知识管理页跳转
    if(this.$route.query.showUnchecked) {
      this.urls = api.findAllAuditKnowledge
       this.approvalStatusList = [
        {value: '1', label: '待节点审核'},
        {value: '3', label: '待最终审核'}
      ]
    } else {
      this.urls = api.findAllKnowledgeApprove
      this.approvalStatusList = [
        {value: '1', label: '待节点审核'},
        {value: '2', label: '节点驳回'},
        {value: '3', label: '待最终审核'},
        {value: '4', label: '最终驳回'},
        {value: '5', label: '最终通过'},
      ]
    }
    this.init()
  },
  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)
   
  },
  computed: {
    getApprovalStatus(){
      return function(arg) {
        switch(arg) {
          case 1:
            return '待节点审核'
          case 2:
            return '节点驳回'
          case 3:
            return '待最终审核'
          case 4:
            return '最终驳回'
          case 5:
            return '最终通过'
        }
      }
    }
  },
  methods: {
    getCategory,
    handleSearchClick() {
      if(this.createTime && this.createTime.length) {
        this.queryParam.beginTime = this.createTime[0]
        this.queryParam.endTime = this.createTime[1]
      }
      if(this.categoryIds && this.categoryIds.length) {
        this.queryParam.categoryId = this.categoryIds.slice('-1')[0]
      }
      this.reloadTable()
    },
    // 审核
    handleJumpUpdateClick(record,arg) {
      // 从知识管理跳转
      let query = {}
      if(this.$route.query.showUnchecked) {
        if(arg) {
          // 查看
          query = {
            pkId: record.pkId, 
            type: 'auditManageList', 
            auditId: record.approvalsFirst.pkId,
            show: true,
            isLook: true
          }
        } else {
          // 审核
          query = {
            pkId: record.pkId, 
            type: 'auditManageList', 
            auditId: record.approvalsFirst.pkId,
            show: true,
            isAudit: true
          }
        }
      } else {
        // 当前审核管理跳转
        if(arg) {
          // 查看
          query = {
            pkId: record.knowledgerId, 
            type: 'auditManageList', 
            auditId: record.pkId,
            show: true,
            isLook: true
          }
        } else {
          // 审核
          query = {
            pkId: record.knowledgerId, 
            type: 'auditManageList', 
            auditId: record.pkId,
            show: true,
            isAudit: true
          }
        }
      }
      this.$router.push({
        path: '/knowledge/knowledgeAddUpdate',
        query
      })
    },
    // 确认审核
    handleOk(){
      this.saveLoading = true
      let ids = this.willAuditData.map(item => item.pkId)
      if(this.$route.query.showUnchecked) {
        ids = this.willAuditData.map(item => item.approvalsFirst.pkId)
      }
      this.auditForm.actualApprover = this.$store.state.appSetting.user.userId
      this.auditForm.actualApproverName = this.$store.state.appSetting.user.fullName
      // 快速审核
      if(ids.length == 1) {
        this.auditForm.pkId = ids[0]
        api.knowledgeApproveById(this.auditForm).then(res => {
          if(res.code == 200) {
            this.auditShow = false
            this.reloadTable()
            this.saveLoading = false
          }
        })
      } else {
        // 批量审核
        this.auditForm.pkIds = ids
        api.knowledgeApproveBatchById(this.auditForm).then(res => {
          if(res.code == 200) {
            this.auditShow = false
            this.reloadTable()
            this.saveLoading = false
          }
        })
      }
    },
    // 快速审核/批量审核
    handldAuditClick(title,arg = {}) {
      this.modalTitle = title == 'fast' ? '快速审核' : '批量审核'
      this.auditForm = Object.assign({},this.$options.data().auditForm)
      this.authName = undefined
      this.willAuditData = []
      if(title == 'fast') {
        this.isDocument = arg.type == 1 ? true : false
        this.isShowOrg = arg.approvalStatus == 3 ? true : false
        this.auditForm.organizationIds = arg.organizationIds
        this.organizationIdsInfo = arg.organizationIds
        if(arg.organizationIds) {
          let organizationInfo = arg.organizationIds
          let info = []
          // for(let i of organizationInfo) {
          //   if(i.organizationIds) {
          //     info.push(`${i.organizationTree.join('-')}`)
          //   } else if(i.gradeId) {
          //     info.push(`职系-${i.gradeName}`)
          //   } else {
          //     info.push(`职等-${i.gradeLevelName}`)
          //   }
          // }
          if(organizationInfo.organizationId) {
            info.push(`组织:[${organizationInfo.organizationTree}]`)
          }
          if(organizationInfo.gradeId) {
            info.push(`职系:[${organizationInfo.gradeName}]`)
          }
          if(organizationInfo.gradeLevelId) {
            info.push(`职等:[${organizationInfo.gradeLevelName}]`)
          }
          this.checkedTargets.organizationId = organizationInfo.organizationId
          this.checkedTargets.organizationName = organizationInfo.organizationName
          this.checkedTargets.organizationTree = organizationInfo.organizationTree
          this.sequencesInfo.gradeId = organizationInfo.gradeId
          this.sequencesInfo.gradeName = organizationInfo.gradeName
          this.gradesInfo.gradeLevelId = organizationInfo.gradeLevelId
          this.gradesInfo.gradeLevelName = organizationInfo.gradeLevelName
          this.authName = info.join('/')
        }
        this.willAuditData.push(arg)
      } else {
        this.willAuditData = this.$refs.auditRef.getSelectedRows()
        for(let i of this.willAuditData) {
          if(i.approvalStatus != 1 && i.approvalStatus != 3) {
            this.$message.error("审核存在状态为驳回/通过的节点,无法审批");
            return 
          }
          // if(i.approvalStatus == 3) {
          //   this.isShowOrg = true
          //   this.isDocument = i.type == 1 ? true : false
          //   break
          // } else {
          //   this.isShowOrg = false
          // }
        }
        let approvalStatusData = this.willAuditData.filter(item => item.approvalStatus == 3)
        if(approvalStatusData.length == 1) {
            let approvalStatusInfo = approvalStatusData[0]
            this.isShowOrg = true
            this.isDocument = approvalStatusInfo.type == 1 ? true : false
            this.auditForm.organizationIds = approvalStatusInfo.organizationIds
            this.organizationIdsInfo = approvalStatusInfo.organizationIds
            if(approvalStatusInfo.organizationIds) {
              let organizationInfo = approvalStatusInfo.organizationIds
              let info = []
              if(organizationInfo.organizationId) {
                info.push(`组织:[${organizationInfo.organizationTree}]`)
              }
              if(organizationInfo.gradeId) {
                info.push(`职系:[${organizationInfo.gradeName}]`)
              }
              if(organizationInfo.gradeLevelId) {
                info.push(`职等:[${organizationInfo.gradeLevelName}]`)
              }
              this.checkedTargets.organizationId = organizationInfo.organizationId
              this.checkedTargets.organizationName = organizationInfo.organizationName
              this.checkedTargets.organizationTree = organizationInfo.organizationTree
              this.sequencesInfo.gradeId = organizationInfo.gradeId
              this.sequencesInfo.gradeName = organizationInfo.gradeName
              this.gradesInfo.gradeLevelId = organizationInfo.gradeLevelId
              this.gradesInfo.gradeLevelName = organizationInfo.gradeLevelName
              // for(let i of organizationInfo) {
              //   if(i.organizationIds) {
              //     info.push(`${i.organizationTree.join('-')}`)
              //   } else if(i.gradeId) {
              //     info.push(`职系-${i.gradeName}`)
              //   } else {
              //     info.push(`职等-${i.gradeLevelName}`)
              //   }
              // }
              this.authName = info.join('/')
            }
        } else {
           this.isShowOrg = false
        }

      }
      if(!this.willAuditData.length) return
      this.auditShow = true
      this.$nextTick(() => document.getElementsByClassName('ant-form-item-control-wrapper')[8].style.width = '70%')
    },
    transCheckedTargets(arg) {
      this.checkedTargets = arg
    },
    handleSequencesChange(arg) {
      this.sequencesInfo = arg
    },
    handleGradeChange(arg) {
      this.gradesInfo = arg
    },
    handleSaveOk() {
      if(this.isShowOrg) {
        // 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.organizationIds = res
        // } else {
        //   this.auditForm.organizationIds = ""
        // }
        let info = []
        let res = {}
        console.log(this.checkedTargets)
        if(this.checkedTargets && this.checkedTargets.organizationId) {
          info.push(`组织:[${this.checkedTargets.organizationTree}]`)
          res['organizationId'] = this.checkedTargets.organizationId
          res['organizationName'] = this.checkedTargets.organizationName
          res['organizationTree'] = this.checkedTargets.organizationTree
        }
        if(this.sequencesInfo && this.sequencesInfo.gradeId) {
          info.push(`职系:[${this.sequencesInfo.gradeName}]`)
          res['gradeId'] = this.sequencesInfo.gradeId
          res['gradeName'] = this.sequencesInfo.gradeName
        }
        if(this.gradesInfo && this.gradesInfo.gradeLevelId) {
          info.push(`职等:[${this.gradesInfo.gradeLevelName}]`)
          res['gradeLevelId'] = this.gradesInfo.gradeLevelId
          res['gradeLevelName'] = this.gradesInfo.gradeLevelName
        }
        if(info.length) {
          this.authName = info.join('/')
        }
        if(Object.keys(res).length) {
          this.auditForm.organizationIds = res
        } else {
          this.auditForm.organizationIds = {}
        }
      }
      this.showAuditFlag = false
    },
      // 重新加载表格
    reloadTable() {
      this.$refs.auditRef.loadData()
    }
  }
}
</script>

<style lang="less" scoped>
@gary:  #f8f8f8;
@white: #fff;
.rx-fit {
  padding: 40px!important;
  background: @gary;
  overflow-y: auto!important;
  display: block!important;
  .fit-header {
    .mainContent {
      width: 100%;
      .body {
        background: @white;
        padding: 10px 0 10px 20px;
        .content {
          background: @white;

          button:first-child {
            margin-right: 20px;
          }

          >button {
            margin: 10px;
            margin-left: 0;
          }
        }
      }
    }
  }
  .table-style {
    padding: 20px;
    min-height: 400px;
    .clearBtn {
      background: none;
      color: #3294F7;
      text-shadow: none;
      padding: 0px 6px;
      border: none;
      box-shadow: none;
    }
  }
}
.knowledge-manage {
  position: relative;
}
.knowledge-manage::after {
  position: absolute;
  top: -11px;
  left: 76px;
  content: attr(data-attr);
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}

.show-other{
	width: 100%;
	animation:show-other-search 0.8s;
}

.form-item-style {
  margin: 5px 20px 5px 0;
}
.set-input {
  width:180px;
}
.set-select {
  width:120px;
}
.set-range-picker {
  width:230px!important;
}
@keyframes show-other-search{
	0%{opacity:0;}
  50%{opacity:0.8;}
	100%{opacity: 1;}
}
</style>

<style scoped>
/deep/   .divdefault {
  position: inherit!important;
}
/deep/  .ant-btn > .anticon + span {
  margin-left: 0;
}
 /deep/.ant-table-thead > tr > th {
  text-align: center; 
  height: 54px;
}
/deep/ .ant-table-tbody > tr > td {
  height: 54px;
}
/deep/ .ant-form{
  padding: 0;
}
/deep/ .gridContent{
  border: none;
}
/deep/ .ant-cascader-menus {
  left: 0!important;
}
/deep/ .ant-cascader-menu:last-child {
  margin-right: 0;
}
</style>