KM-Front-Milestone2/src/views/modules/knowledge/album/albumAuditList.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;" >
                  <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.name" placeholder="请输入"/>
                        </a-form-item>
                        <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="专辑分类"
                        name="categoryIds">
                        <a-cascader v-model="categoryIds" 
                                    :options="classifyLevelList" 
                                    :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                                    placeholder="请选择"
                                    changeOnSelect
                                    @change="handleClassifyChange" />
                      </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="ownerName">
                        <a-input v-model="queryParam.ownerName" placeholder="请输入" />
                      </a-form-item>
                      <a-form-item
                        style="width:320px;margin: 5px 40px 5px 0;"
                        label="审核状态"
                        name="approvalState">
                        <a-select v-model="queryParam.approvalState" placeholder="请选择"  allowClear>
                          <a-select-option v-for="(item,index) in approvalStateList" :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="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>
                     </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(true)">重置</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="albumAuditListBatch" :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="api.query"
          :queryParam="queryParam"
          data-field="result.data"
          :defaultPageSize="10"
          :pageSizeOptions="['10','20','30','40']"
          idField="pkId"
        > 
          <template slot="albumName" slot-scope="{text}">
            <div style="white-space: pre-line">{{ text }}</div>
          </template>
          <template slot="categoryName" slot-scope="{text}">
            <div style="white-space: pre-line">{{ text }}</div>
          </template>
          <template slot="action" slot-scope="{text,record}">
            <template v-if="record.actionFlag.indexOf('approve') > -1">
              <rx-button class="clearBtn" alias="albumAuditListProcess" :butn-icon="'none'" @click="handleJumpUpdateClick(record,true)">审核</rx-button>
              <rx-button class="clearBtn" alias="albumAuditListFast" :butn-icon="'none'" @click="handldAuditClick('fast',record)">快速审核</rx-button>
            </template>
            <template v-else>
              <rx-button class="clearBtn" alias="albumAuditListlook" :butn-icon="'none'" @click="handleJumpUpdateClick(record,false)">查看</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>
      </a-modal>
    </div> 
  </rx-layout>
</template>

<script>
import breadcrumb from '../components/breadcrumb'
import orgPeople from './components/orgPeople'
import api from '@/api/knowledge/album/albumAudit'
import albumApi from '@/api/knowledge/album/album'
import mixin from "../aMixin/mixin"
const auditMixin = new mixin('audit')
export default {
  name: 'auditManageList',
  components: {
    breadcrumb,
    orgPeople
  },
  mixins: [ auditMixin ],
  data() {
    return {
      api,
      albumApi,
      saveLoading: false,
      urls: '',
      modalTitle: '快速审核',
      extend: true,
      queryParam: {
        type: 1,
        name: '',
        categoryId: '',
        ownerName: '',
        approvalState: undefined,
        createTimeStart: '',
        createTimeEnd: ''
      },
      createTime: [],
      categoryIds: [],
      classifyLevelList: [],
      approvalStateList: [
        {value: 1, label: '待节点审核'},
        {value: 2, label: '节点驳回'},
        {value: 3, label: '待最终审核'},
        {value: 4, label: '最终驳回'},
        {value: 5, label: '最终通过'}
      ],
      columns: [
        {
          title: '专辑ID',
          dataIndex: 'pkId',
          align: 'center',
          width: 200
        },
        {
          title: '专辑名称',
          dataIndex: 'albumName',
          align: 'center',
          width: 150,
          scopedSlots: {customRender: 'albumName'}
        },
        {
          title: '所属分类',
          dataIndex: 'categoryName',
          align: 'center',
          width: 150,
          scopedSlots: {customRender: 'categoryName'}
        },
        {
          title: '收录知识量',
          dataIndex: 'knowledgeTotal',
          align: 'center',
          width: 100
        },
        {
          title: '专辑负责人',
          dataIndex: 'ownerName',
          align: 'center',
          width: 100
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'approvalStateName',
          align: 'center',
          width: 100
        },
         {
          title: '审核人',
          dataIndex: 'previousApproverName',
          align: 'center',
          width: 100
        },
         {
          title: '最后一次审核时间',
          dataIndex: 'previousApproverTime',
          align: 'center',
        },
        { 
          title: '操作',
          dataIndex: 'action', 
          // align: 'center',
          scopedSlots: {customRender: 'action'},
          width: 130
        }
      ],
      auditShow: false,
      // 要审核的数据
      willAuditData: [],
      auditForm: {
        pkIds:'',
        result:'1',
        remark:'',
      }
    }
  },
  created() {
    if(this.$route.query.showOnlyUser) {
      this.queryParam.type = 2
    } else {
      this.queryParam.type = 1
    }
    this.init()
  },
  methods: {
    async init() {
      let res = await albumApi.categories()
      this.classifyLevelList = this.formatData(res.data)
    },
    formatData(data) {
      const that = this
      data.forEach((element) => {
        if (element.children && element.children.length > 0) {
          that.formatData(element.children)
        } else {
          delete element.children
        }
      })
      return data
    },
    handleSearchClick() {
      if(this.createTime && this.createTime.length) {
        this.queryParam.createTimeStart = this.createTime[0]
        this.queryParam.createTimeEnd = this.createTime[1]
      }
      if(this.categoryIds && this.categoryIds.length) {
        this.queryParam.categoryId = this.categoryIds.slice('-1')[0]
      }
      this.reloadTable()
    },
    // 审核跳转
    handleJumpUpdateClick(record,arg = false) {
      this.$router.push({
        path: '/knowledge/albumInfo',
        // pkId  showCheck: 是否显示审核
        query: { pkId: record.pkId, showCheck: arg}
      })
    },
    // 确认审核
    handleOk(){
      this.saveLoading = true
      this.auditForm.pkIds = this.willAuditData.map(item => item.approvalId)
      this.auditForm.result = parseInt(this.auditForm.result)
      // if(this.$route.query.showUnchecked) {
      //   ids = this.willAuditData.map(item => item.approvalsFirst.pkId)
      // }
      api.approve(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.willAuditData = []
      if(title == 'fast') {
        this.willAuditData.push(arg)
      } else {
        this.willAuditData = this.$refs.auditRef.getSelectedRows()
        if(!this.willAuditData.length) {
          this.$message.error("请选择要审核的专辑");
            return 
        }
        for(let i of this.willAuditData) {
          // if(i.approvalStateName != '待节点审核' && i.approvalStateName != '待最终审核') {
          //   this.$message.error("审核存在状态为驳回/通过的节点,无法审批");
          //   return 
          // }
          if(i.actionFlag.indexOf('view') > -1) {
            this.$message.error("审核存在状态为驳回/通过的节点或您不是审批人,无法审批");
            return 
          }
        }
      }
      this.auditShow = true
    },
      // 重新加载表格
    reloadTable() {
      this.$refs.auditRef.loadData()
    }
  }
}
</script>

<style lang="less" scoped>
@gary:  #f8f8f8;
@white: #fff;
.rx-fit {
  padding: 40px!important;
  background: @gary;
  .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;

    .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;
}

@keyframes show-other-search{
	0%{opacity:0;}
  50%{opacity:0.8;}
	100%{opacity: 1;}
}
</style>

<style scoped>
/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;
}
</style>