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>
                  <!-- <div style="width:80%;;display:flex;flex-wrap:wrap;">
                    <div style="display:flex;flex-wrap:wrap;">
                        <a-form-item
                          style="width:320px;margin: 5px 40px 5px 0;"
                          label="知识标题"
                          name="name">
                          <a-input v-model="queryParam.titles" placeholder="请输入"/>
                        </a-form-item>
                        <a-form-item
                          style="width:320px;margin: 5px 40px 5px 0;"
                          label="创建时间"
                          name="createTime">
                          <a-range-picker v-model="createTime" 
                                          separator="→"
                                          format="YYYY/MM/DD"
                                          valueFormat="YYYY-MM-DD"
                                          @change="handleClearTimeChange">
                            <a-icon v-if="$store.state.appSetting.collapsed" slot="suffixIcon" type="calendar" />
                          </a-range-picker>
                        </a-form-item>
                        <a-form-item
                          style="width:320px;margin: 5px 40px 5px 0;"
                          label="审核状态"
                          name="online">
                          <a-select v-model="queryParam.approvalStatus" placeholder="请选择"  allowClear>
                            <a-select-option v-for="(item,index) in approvalStatusList" :key="index" :value="item.value">
                              {{item.label}}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                    </div>
                    <div style="display:flex;flex-wrap:wrap;" v-if="extend" :class="{'show-other': extend}">
                      <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="知识类别"
                        name="online">
                        <a-select v-model="queryParam.type" placeholder="请选择"  allowClear>
                          <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
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="所属分类"
                        name="categoryIds">
                        <a-cascader v-model="categoryIds" 
                                    :options="classifyList" 
                                    :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                                    placeholder="请选择"
                                    changeOnSelect
                                    @change="handleClassifyChange" />
                      </a-form-item>
                      <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="作者"
                        name="creator">
                        <a-input v-model="queryParam.author" placeholder="请输入" />
                      </a-form-item>
                     </div>
                  </div>
                  <div style="width:20%;display:flex;justify-content:flex-end;align-content: flex-start;flex-wrap:wrap;">
                    <div style="display:flex;justify-content:center;margin-top: 8px;">
                      <a-button @click="handleResetClick">重置</a-button>
                      <a-button type="primary" @click="handleSearchClick">查询</a-button>
                    </div>
                    <div style="margin-top: 8px;">
                      <a-button type="link" @click="extend = !extend">
                        <template v-if="!extend">
                          <div>
                            展开
                            <a-icon type="down" />
                          </div>
                        </template>
                        <template v-else>
                          <div>
                            收起
                            <a-icon type="up" />
                          </div>
                        </template>
                      </a-button>
                    </div>
                  </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"  
                    @transCheckedTarget="transCheckedTarget"
                    @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: '',
        organizationId: ''
      },
      authName: undefined,
      isShowOrg: false,
      classifyList: [],
      // 组织架构
      checkedTarget: {},
      // 职系
      sequencesInfo: {},
      // 职等
      gradesInfo: {},
      // 文档知识不能选择权限
      isDocument: false,
      widthVar: 800
    }
  },
  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,
          }
        } 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
          }
        } 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.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
          }
        }
      }
      if(!this.willAuditData.length) return
      this.auditShow = true
    },
    transCheckedTarget(arg) {
      this.checkedTarget = 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.organizationId = JSON.stringify([...res])
        } else {
          this.auditForm.organizationId = ""
        }
      }
      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>