yxk-electronic-archives/src/views/system/user/processCenter/module/form.vue

<template>
  <el-dialog class="detail-dialog" :visible.sync="formVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="流程处理">
    <div class="setting-dialog">
      <div class="detail-tab tab-content">
        <ul class="tab-nav">
          <li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程表单</li>
          <li :class="{'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">流程图</li>
          <!-- <li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">业务详情</li> -->
        </ul>
      </div>
      <div v-if="activeIndex == 0">
        <div class="detail-info">
          <p style="width: 60%;"><span>流程名称：</span>{{ baseInfo && baseInfo.title }}</p>
          <p><span>启动时间：</span>{{ baseInfo && baseInfo.createTime | parseTime }}</p>
          <p style="width: 60%;"><span>实例ID：</span>{{ baseInfo && baseInfo.procInstId }}</p>
          <p><span>发起人：</span>{{ baseInfo && baseInfo.createBy }}</p>
        </div>
        <!-- 1.归档 index=1  2.退回 index=2  3.开放 index=6  4.销毁index=7   5.利用index=3   6.内部移交index=4  7.外部移交index=5 -->
        <div class="detail-list">
          <p><span>业务类型：</span>{{ businessTypeText }}</p>
          <p v-if="baseInfo && baseInfo.businessType === 6"><span>目标全宗：</span>{{ baseInfo && baseInfo.targetFondsNo }}</p>
          <p v-if="baseInfo && baseInfo.businessType !== 6"><span>原始位置：</span>{{ baseInfo && baseInfo.businessType === 1 ? '收集库' : baseInfo && baseInfo.businessType === 2 ? '管理库' : '-' }}</p>
          <p v-if="baseInfo && baseInfo.businessType !== 6"><span>目标位置：</span>{{ baseInfo && baseInfo.businessType === 1 ? '管理库' : baseInfo && baseInfo.businessType === 2 ? '收集库' : '-' }}</p>
          <!-- <p><span>赋权类型：</span>-</p> -->
          <p v-if="baseInfo && baseInfo.giveStartTime"><span>起始时间：</span>{{ baseInfo && baseInfo.giveStartTime | parseTime }}</p>
          <p v-else><span>起始时间：</span>-</p>
          <p v-if="baseInfo && baseInfo.giveEndTime"><span>终止时间：</span>{{ baseInfo && baseInfo.giveEndTime | parseTime }}</p>
          <p v-else><span>终止时间：</span>-</p>
          <p v-if="baseInfo && baseInfo.businessType !== 5"><span>申请缘由：</span>{{ baseInfo && baseInfo.remarks ? baseInfo.remarks : baseInfo.reason }}</p>
          <p v-else><span>利用目的：</span>{{ baseInfo && baseInfo.borrowReason }}</p>
          <!-- <p><span>利用次数：</span>-</p> -->
        </div>
        <div class="opinion">
          <!-- <h5>归档审批</h5> -->
          <div class="opinion-form">
            <!-- <span>审批意见</span>
            <el-input v-model="opinionTxt" placeholder="请输入" type="textarea" :rows="2" /> -->
            <el-form ref="form" :model="form" inline label-width="100px">
              <el-form-item label="审批意见" prop="opinion" :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]">
                <el-input v-model="form.opinion" type="textarea" :rows="3" style="width: 700px;" />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <businessDetails :base-info="baseInfo" :table-data="tableData" :is-utilize="isUtilize" :is-flowable-form="true" :set-page="setPage" @select-change="handleSelectChange" @page-change="pageChangeHandler" @size-change="sizeChangeHandler" />
      </div>
      <div v-if="activeIndex == 1" class="detail-img">
        <img :src="'data:image/jpeg;base64,'+ srcImg" alt="" :onerror="defaultImg">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="submitLoading" @click="submitOpinion(false)">驳回</el-button>
        <el-button :loading="submitLoading2" type="primary" @click="submitOpinion(true)">审批</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { FetchBecomeDocumentConfirm } from '@/api/collect/collect'
import { FetchMergeToFileConfirm, FetchBatchToFileConfirm } from '@/api/prearchiveLibrary/prearchiveLibrary'
import { FetchGenProcessDiagram } from '@/api/system/flowable'
//  FetchBusinessFlowDetails,
import { FetchHandBusinessFlowDetails, FetchUtilizeConfirm, FetchArchivesReturnConfirm, FetchArchivesOpenConfirm, FetchArchivesDestructionConfirm, FetchTransferConfirm, FetchOfflineTransferConfirm, FetchMoveToFileConfirm } from '@/api/archivesManage/library'
import businessDetails from '@/views/system/processManage/runningProcess/module/businessDetails/index.vue'
export default {
  name: 'Form',
  components: {
    businessDetails
  },
  data() {
    return {
      formVisible: false,
      activeIndex: 0,
      form: {
        opinion: null
      },
      selectRow: null,
      selectCenterRow: null,
      srcImg: '',
      defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"',
      tableData: [],
      baseInfo: null,
      isUtilize: false,
      selectedValues: {},
      setPage: {
        total: 0,
        size: 10,
        page: 0
      },
      isMessage: false,
      submitLoading: false,
      submitLoading2: false
    }
  },
  computed: {
    businessTypeText() {
      const businessType = this.baseInfo && this.baseInfo.businessType
      // 1.归档 index=1  2.退回 index=2  3.开放 index=6  4.销毁index=7   5.利用index=3   6.内部移交index=4  7.外部移交index=5
      switch (businessType) {
        case 1 :
          return '归档审批'
        case 2 :
          return '退回审批'
        case 3:
          return '开放鉴定'
        case 4:
          return '销毁鉴定'
        case 5:
          return '赋权审批'
        case 6:
          return '内部移交'
        case 7:
          return '外部移交'
        case 8:
          return '预归档批量成件'
        case 9:
          return '预归档合并成件'
        case 10:
          return '预归档移动'
        default:
          return '-'
      }
    }
  },
  methods: {
    changeActiveTab(data) {
      this.activeIndex = data
      if (data === 1) {
        this.getProcessImg()
      } else {
        this.setPage.page = 0
        this.getBusinessFlowDetails()
      }
    },
    getProcessImg() {
      this.srcImg = ''
      FetchGenProcessDiagram({ 'processId': this.isMessage ? (this.baseInfo && this.baseInfo.procInstId) : this.selectRow.procInstId }).then((res) => {
        if (res.code !== 500) {
          this.srcImg = res
        } else {
          this.srcImg = ''
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleSelectChange({ id, value }) {
      if (value === -1) {
        this.$message.error('请选择有效实体借阅状态！')
      }
      this.$set(this.selectedValues, id, value)
    },
    getBusinessFlowDetails() {
      this.tableData = []
      this.selectedValues = {}
      const params = {
        'businessId': this.isMessage ? this.selectCenterRow.businessId : this.selectRow.id,
        'page': this.setPage.page,
        'size': this.setPage.size
      }
      FetchHandBusinessFlowDetails(params).then((res) => {
        if (res.code !== 500) {
          this.formVisible = true
          this.baseInfo = res.businessFlow
          this.selectRow = res.businessFlow
          if (this.selectRow.businessType === 5) {
            this.isUtilize = true
            res.details.content.forEach(item => {
              item.utilizeType = item.utilizeType.split(',').map(Number)
            })
          } else {
            this.isUtilize = false
            res.details.content.forEach(item => {
              item.utilizeType = []
            })
          }
          this.tableData = res.details.content
          this.tableData.forEach(item => {
            if (item.utilizeState === -1) {
              item.utilizeState = 1
            }
            this.$set(this.selectedValues, item.archivesId, item.utilizeState)
          })
          this.setPage.total = res.details.totalElements
        } else {
          this.$message({ message: res.message, type: 'error', offset: 8 })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.setPage.page = e - 1
      console.log('this.setPage.page', this.setPage.page)
      this.getBusinessFlowDetails()
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.setPage.size = e
      this.setPage.page = 0
      this.getBusinessFlowDetails()
    },
    submitOpinion(type) {
      if (type) {
        this.submitLoading2 = true
      } else {
        this.submitLoading = true
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.selectRow.businessType === 5) {
            if (Object.keys(this.selectedValues).length === 0) {
              this.$message.error('请选择有效实体借阅状态！')
              return false
            } else {
              const hasInvalidSelection = Object.values(this.selectedValues).some(value => value === -1)
              if (hasInvalidSelection) {
                this.$message.error('请选择有效实体借阅状态！')
                return false
              }
            }
          }
          const params = {
            'id': this.selectRow.id,
            'isPass': type,
            'opinion': this.form.opinion,
            'map': this.selectedValues
          }
          console.log(params)
          if (this.selectRow.businessType === 1) {
            // 归档
            FetchBecomeDocumentConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 2) {
            // 退回
            FetchArchivesReturnConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 3) {
            // 开放
            FetchArchivesOpenConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 4) {
            // 销毁
            FetchArchivesDestructionConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 5) {
            // 利用
            FetchUtilizeConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 6) {
            // 在线移交
            FetchTransferConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 7) {
            // 离线移交
            FetchOfflineTransferConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              console.log(err)
            })
          } else if (this.selectRow.businessType === 8) {
            // 批量成件
            FetchBatchToFileConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 9) {
            // 合并成件
            FetchMergeToFileConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          } else if (this.selectRow.businessType === 10) {
            // 预归档移动
            FetchMoveToFileConfirm(params).then((res) => {
              if (res.code !== 500) {
                this.$message({ message: res, type: 'success', offset: 8 })
              } else {
                this.$message({ message: '操作提交失败', type: 'error', offset: 8 })
              }
              this.closedDialog()
            }).catch(err => {
              console.log(err)
            })
          }
          // this.closedDialog()
        } else {
          this.submitLoading = false
          this.submitLoading2 = false
          return false
        }
      })
    },
    closedDialog() {
      this.formVisible = false
      this.form.opinion = null
      this.submitLoading = false
      this.submitLoading2 = false
      this.$emit('refresh')
    }
  }

}
</script>

<style lang='scss' scoped>
.detail-dialog{
  .detail-info,
  .detail-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 4px 18px;
    font-size: 14px;
    line-height: 30px;
    color: #545B65;
    background-color: #F6F8FC;
    p{
      width: 40%;
      span{
        display: inline-block;
        width: 75px;
        text-align: right;
        color: #0C0E1E;
      }
    }
  }
  .opinion{
    margin: 10px 0;
    h5{
      margin-bottom: 18px;
      font-size: 16px;
      color: #0C0E1E;
      text-align: center;
    }
    .opinion-form{
      display: flex;
      justify-content: space-between;
      span{
        display: block;
        width: 83px;
        margin-right: 12px;
        line-height: 30px;
        text-align: right;
        color: #545B65;
      }
      ::v-deep .el-textarea__inner{
        border-color: #E6E8ED;
      }
    }
  }
  .detail-img{
    width: 818px;
    height: 404px;
    overflow: hidden;
    overflow-y: scroll;
    img{
      display: block;
      // width: 100%;
    }
  }
  .detail-list{
    // margin-bottom: 16px;
    padding: 0 18px 4px 18px;
    p{
      width: 33%;
    }
  }
}
</style>