yiliangyiyun-pc-jj/src/views/universalityAudit/audit.vue

//通用审核
<template>
  <div class="container">
    
    <div class="center">
      <el-row style='margin-bottom:10px;'>
        <el-col :span="12">
          <div style='margin-left:10px;' class="datascreen">
            <el-date-picker value-format='yyyy-MM-dd' v-model="value" type="daterange" unlink-panels range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" class="data_css" @change="changeDate" >
            </el-date-picker>
            <el-input placeholder="可按发起人姓名或业务编号查找" class="input_css" v-model="searchKeyWord"></el-input>
            <el-button class="find" type="primary" @click="find()"><img width="16" height="16" style="left: -8px;"
                src="../../../public/img/sousuo.png" alt="" /></el-button>
          </div>
          
        </el-col>
        <el-col style="text-align:right;" :span="12">
          <el-button  style="margin-right:10px" @click="addlist" type="primary">添加</el-button>
        </el-col>
      </el-row>
      <el-row style='margin-bottom:10px;'>
        <el-col :span="18">
          <el-button style="margin-left:10px" @click="typeChange1('')" :type="searchType == ''?'primary':''">全部</el-button>
          <el-button @click="typeChange1(1)" :type="searchType == 1?'primary':''">待审核</el-button>
          <el-button @click="typeChange1(2)" :type="searchType == 2?'primary':''">已驳回</el-button>
          <el-button @click="typeChange1(3)" :type="searchType == 3?'primary':''">已通过</el-button>
          <el-select v-model="businessType" filterable clearable placeholder="选择类型" @change="typeChange" >
          <el-option  key="type0" label="全部类型" value=""
            style="color: #8890b1" />
            <el-option v-for="item in xialaList"  :key="item.id" :label="item.constValue" :value="item.constValue"
            style="color: #8890b1" />
        </el-select>
        <i @click="aduitflow" class="el-icon-question"></i>
        </el-col>
        <el-col :span="6">

        </el-col>
      </el-row>
      <div class="fromdata">
        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column
          type="selection"
          width="55">
        </el-table-column>
          <el-table-column type="index" label="序号">
            <template scope="scope">
              <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
              <span v-else>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditBusinessNo" label="审核业务编号">
          </el-table-column>
          <el-table-column prop="businessType" label="类型">
          </el-table-column>
          <el-table-column prop="buyer" label="备注">
             <template slot-scope="scope">
              <el-popover
              placement="bottom"
              title="备注详情"
              width="400"
              trigger="click"
             >
              <div>
                <div>{{scope.row.sponsor+'（'+scope.row.auditBusinessNo+'）'}}</div>
                <div>{{scope.row.remark}}</div>
              </div>
              
              <el-button slot="reference">查看</el-button>
            </el-popover>
            </template> 
          </el-table-column>
          <el-table-column prop="addressUrl" label="附件">
       <template slot-scope="scope">
           <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
            src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
          <span v-if="scope.row.addressUrlArray != null">
            {{
              scope.row.addressUrlArray.length == 0
                ? ''
                : scope.row.addressUrlArray.length
            }}
          </span>
        </template> 
      </el-table-column>
          <el-table-column prop="createDate" label="时间"></el-table-column>
    
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">{{scope.row.approveStatus?scope.row.approveStatus:scope.row.status}}<i @click="handlerecord(scope.row)" class="el-icon-s-claim"></i></template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="300">
            <template slot-scope="scope">
              
              <el-button v-if="scope.row.approveStatus&&scope.row.taskId" @click="pass(scope.row)" type="primary">通过</el-button>
              <el-button v-if="scope.row.approveStatus&&scope.row.taskId" @click="reject(scope.row)" type="primary">驳回</el-button>
              <!-- <div style="display:inline-block;"> -->
                <el-button v-if="scope.row.status=='已驳回'" @click="del(scope.row)" type="danger">删除</el-button>
              <!-- </div> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        style="text-align:center" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
      </el-pagination>
    </div>
    <el-dialog
  title="提示"
  :visible.sync="addshow"
  width="30%"
  :before-close="handleClose">
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="类型">
    <el-select v-model="form.businessType" filterable clearable placeholder="选择类型">
      <el-option v-for="item in xialaList"  :key="item.id" :label="item.constValue" :value="item.constValue" style="color: #8890b1" />
    </el-select>
  </el-form-item>
  <el-form-item label="附件">
    <ws-upload ref="upload" limit="20" accept=".jpg, .jpeg, .png, .pdf, .doc, .docx, .xls, .xlsx" :comp-id="compId" :appendix-ids="form.addressUrl" :size-limit="size"
        @onChange="onChange" 
       />
  </el-form-item>
  
  <el-form-item label="备注">
    <el-input maxlength="2000" type="textarea" show-word-limit v-model="form.remark"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="addshow=false">取消</el-button>
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </el-form-item>
</el-form>
</el-dialog>
<el-dialog
  title="审核流详情"
  :visible.sync="show"
  width="30%"
  :before-close="handleClose1">
  <div v-for="item in blocks">
  <div style="margin:10px 0;">{{item.title}}</div>
  <div style="display:inline-block;" v-for="(item1,index) in item.subBlocks">{{item1.desc}} <span v-if="index!=item.subBlocks.length-1">----></span>  </div>
  </div>
</el-dialog>
<el-dialog
      :title="title"
      :visible.sync="rejectshow"
      width="30%"
      :before-close="handleClose">
      <span>{{title=='驳回'?'确定驳回审核？':'确定通过审核？'}}</span>
      <div><el-input
  type="textarea"
  :rows="2"
  placeholder="请输入审核意见"
  v-model="textarea">
</el-input>
</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectshow = false">取 消</el-button>
        <el-button type="primary" @click="rejectclick">确 定</el-button>
      </span>
    </el-dialog>
<WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
      @on-cancel="handleClose">
      <ws-upload ref="upload" :comp-id="compId" :appendix-ids="appendixIdss" :editable="false"
        accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" />
    </WinseaContentModal>
    <el-dialog width="50%" :visible.sync="dialogVisible1" title="审核记录">
      <div style="padding: 20px" v-for="(item, index) in recordList" :style="{
        'border-bottom':
          index != recordList.length - 1 ? '1px solid #ccc' : 'none',
      }">
          <div style="width: 100%; text-align: left">
            {{ item.operateUser }}（{{item.approveResult==1?'已通过':'已驳回'}}）
          </div>
        <div style="width: 100%; text-align: left">
          {{ item.verifyRemark }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    xiala,
    aduitinfoList,
    addaduitinfo,
    deladuitinfo,
    workflow,
    gethis
  } from '@/model/universalityAudit/index'
  import { getUuid } from '../../utils'
  import WsUpload from '@/components/WsUpload'
  import {
    woekflowhandle
  } from '@/model/tasksport/index'
  import {
  getAuditRecord,
} from '@/model/profitable/index'
  export default {
    components: {
      WsUpload
    },
    data() {
      return {
        value: "",
        tableData: [],
        show:false,
        title:'',
        textarea:'',
        rejectshow:false,
        addshow:false,
        correlationshow:false,
        deptBudgetTotal: 0,
        currentPage: 1,
        pageSize: 10,
        businessType:'',
        searchType:"",
        searchKeyWord:"",
        startDate:"",
        endDate:"",
        outtotal:0,
        xialaList:[],
        intotal:0,
        form:{},
        dialogVisible:false,
        contractList:[],
        datalist:{},
        size:100,
        accessoryTFs:false,
        appendixIdss:'',
        blocks:[],
        compId:localStorage.getItem('ws-pf_compId'),
        currectdata:{},
        dialogVisible1:false,
        recordList:[]
      }
    },
    activated() {
      xiala({constId:'EXA1'}).toPromise()
          .then(response => {
            this.xialaList=response
          })
          this.getList()
    },
    methods: {
      rejectclick(){
        if(this.title=='驳回'){
          woekflowhandle({
            taskId: this.currectdata.taskId,
            approved:false,
            auditMind: this.textarea,
            needReapply: true,
          }).toPromise()
          .then((response) => {
            this.$message({
              message: '驳回成功!',
              type: 'success',
            })
            this.rejectshow=false
            this.getList()
          }).catch((response) => {
            this.$message({
              message: '驳回失败!',
              type: 'error',
            })
          })
        }else{
          woekflowhandle({
              taskId: this.currectdata.taskId,
              approved:true,
              auditMind: this.textarea,
              needReapply: true,
            }).toPromise()
            .then((response) => {
              this.$message({
                message: '通过成功!',
                type: 'success',
              })
              this.rejectshow=false
              this.getList()
            }).catch((response) => {
              this.$message({
                message: '通过失败!',
                type: 'error',
              })
            })
        }
        
      },
      handlerecord(row) {
      getAuditRecord({ id: row.id, workflowId: row.workflowId })
        .toPromise()
        .then((response) => {
          this.recordList = response
          this.dialogVisible1 = true
        })
        .catch((response) => { })
    },
      pass(row){
        this.currectdata=row
        this.title='通过'
        this.rejectshow=true
      },
      reject(row){
        this.currectdata=row
        this.title='驳回'
        this.rejectshow=true
      },
      aduitflow(){
        workflow({businessCode: 'GENERAL-AUDIT-APPROVE'}).toPromise().then(response => {
          for (let i = 0; i < response.length; i++) {
            if(response[i].latest==1){
              gethis({workflowId:response[i].id}).toPromise().then(response => {
                const branchSameNodeIds = [];
              this.convertStepsToBlocks(response.steps ? response.steps : [], this.blocks, branchSameNodeIds, 0, false, false);
                console.log(this.blocks,branchSameNodeIds)
              })
              
            }
          }
          
        })
      },
      convertStepsToBlocks (steps, blocks, branchSameNodeIds, fromIndex, onBranch, shouldAddEndPoint) {
      let index = fromIndex;
      let index1 = 0;
      let arr=[]
      while (index < steps.length) {
        const item = steps[index];
        switch (item.stepType) {
          case 'NORMAL':
            if (item.branchNodeLocation !== 'END') { // 普通节点直接加上
              arr[index1].subBlocks.push({
              ...item,
              })
            } else { // END节点，需要在合适时机给加到主分支节点下面
              arr[index1].subBlocks.push({
              ...item,
              })
              index1++
            }
            break;
          case 'COUNTERSIGN':
            arr[index1].subBlocks.push({
              ...item,
            })
            break;
          case 'CONDITION':
            if (item.branchSameNodeId==0&&item.branchConditions) { // 新的条件主节点
              arr[index1]={subBlocks:[],title:item.branchConditions[0].varValue}
              arr[index1].subBlocks.push({
              ...item,
              })
            }
            break;
          default:
            break;
        }
        index++;
      }
      this.blocks=arr
      this.show=true
      // console.log(arr)
    },
      // convertStepsToBlocks (steps, fromIndex) {
      //   let index = fromIndex;
      //   while (index < steps.length) {
      //     const item = steps[index];
      //     switch (item.stepType) {
      //     case 'NORMAL':
      //       if(item.branchNodeLocation !== 'END'){
      //         this. blocks.push({
      //           ...item,
      //           type: 0,
      //         })
      //       }else{

      //       }
      //     break;
      //     case 'COUNTERSIGN':
      //     break;
      //     case 'CONDITION':
      //     break;
      //     default:
      //     break;
      //     }
      //     index++
      //   }
      // },
      fujian(row) {
        this.id = row.id
        this.accessoryTFs = true
        this.appendixIdss = row.addressUrl
        console.log(this.appendixIdss)
      },
      del(row){
        this.$confirm('确定删除审核信息？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            deladuitinfo({id:row.id}).toPromise().then(response => {
            this.$message({
                message: '删除成功!',
                type: 'success',
            })
            this.getList()
          })
          })
      },  
      onChange() {
        this.$refs.upload
          .handleSaveBill()
          .then(async (response) => {
            this.form.addressUrl = response
          })
          .catch((res) => {
            EventBus.$emit('error', (JSON.parse(res) || {}).message)
            this.$refs.upload.clearFiles()
          })
      },
      
      onSubmit(){
        if(!this.form.businessType){
          this.$message({
                message: '审核类型不能为空!',
                type: 'warning',
            })
        }
        if(this.form.remark&&this.form.remark.length<2||this.form.remark&&this.form.remark.length>1000){
          this.$message({
                message: '备注信息10-2000个字!',
                type: 'warning',
            })
        }
        this.$confirm('确定发起审核？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.form.compId=localStorage.getItem('ws-pf_compId')
            this.form.sponsor=localStorage.getItem('ws-pf_roleName')
          addaduitinfo(this.form).toPromise().then(response => {
            this.$message({
                message: '提交成功!',
                type: 'success',
            })
            this.form={}
            this.$refs.upload.clearFiles()
            this.addshow=false
            this.getList()
          })
        })
      },
      addlist(){
        this.addshow=true
      },
      handleClose(){
        this.addshow=false
      },
      handleClose1(){
        this.show=false
      },
      typeChange(num){
        this.businessType= num
        this.getList()
      },
      typeChange1(num){
        this.searchType= num
        this.getList()
      },
      returnsales(){
        this.$router.go(-1)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      async getList() {
        aduitinfoList({
            startDate:this.startDate,
            endDate:this.endDate,
            searchKeyWord:this.searchKeyWord,
            currentPage: this.currentPage,
            pageSize:this.pageSize ,
            searchType:this.searchType,
            businessType:this.businessType
          })
          .toPromise()
          .then(response => {
            if(response.records.length>0){
              for (let i = 0; i < response.records.length; i++) {
                if(response.records[i].addressUrl){
                  response.records[i].addressUrlArray=[]
                  var arr=response.records[i].addressUrl.split(',')
                  for (let q = 0; q < arr.length; q++) {
                    if(arr[q]!=''){
                      response.records[i].addressUrlArray.push(arr[q])
                    }
                    
                  }
                  
                }
                
              }
            }
            this.tableData=response.records
            this.deptBudgetTotal=response.total
          })
      },

      changeDate(){
        if(this.value){
          this.startDate = this.value[0]
          this.endDate = this.value[1]
        }
        this.getList()
      },
      pickerOptions() {},
      find() {
        this.getList()

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
    },
  }
</script>
<style lang="scss" scoped>
 table,
      table tr th,
      table tr td {
        border: 2px solid #333333;
        padding: 5px 0;
        height: 55px;
      }

      .content {
        width: 1000px;
        padding: 70px 20px 20px 20px;
        font-size: 22px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      table {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        border: 3px solid #333333;
      }

      .col-bgc {
        background: #f6f7fb;
      }

  .container {
    background: #E8ECF6;
  }

  .center {
    margin: 0 auto;
    background: #ffffff;
    height: calc(100vh - 13vh);
    border-radius: 4px;
    padding: 20px 0;

    /deep/.el-table td,
    /deep/.el-table th {
      text-align: center;
    }
  }

  .row_top {
    background: #F6F7FC;
    border-radius: 4px;
    margin-bottom: 10px;

    .bg-left {
      padding-left: 30px;
    }

    .bg-right {
      padding-right: 10px;
      text-align: right;
    }

    .title {
      position: relative;
    }

    .title::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 30px;
      background: #5473e8;
      position: absolute;
      left: 0;
    }
  }

  .datascreen {
    display: flex;

    .data_css {
      width: 40%;
    }

    .input_css {
      width: 50%;
      margin: 0 10px;
    }

    .find {
      margin-right: 10px;
    }
  }

  .fromdata {
    margin: 20px 0;
    overflow-y: scroll;
    height: 546px;
  }
  .top_info{
    margin: 10px 0 0 10px;
    min-width: 712px;
    .info_css{
      margin-right: 20px;
    }
  }
  .bg-right{
    padding-top:15px;
  }
</style>