anrui/anrui-system-ui/src/views/flow/havereadList.vue

<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div style="text-align: right">
        <a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
      </div>
    </div>
    <div class="searchcon">
      <div class="search">
        <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
          <el-form-item label="工作名称">
            <el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="发起人">
            <el-input v-model="listQuery.params.startUserName" placeholder="流程名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="发送日期">
            <el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
            <span style="padding: 0 8px">至</span>
            <el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
        </el-form>
      </div>
    </div>
    <div class="listtop">
      <div class="tit">已阅列表</div>
      <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
    </div>
    <div class="">
      <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
        <el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
        <el-table-column width="180px" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="工作名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.msgTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送人" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.senderName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送日期" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sendTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送部门" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.senderDeptName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送来源" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.msgSource }}</span>
          </template>
        </el-table-column>
        <el-table-column label="阅读日期" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.modifyTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审批记录" align="center">
          <template slot-scope="scope">
            <span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <div class="tit"/>
      <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
    </div>
    <!-- Start查看页面 -->
    <el-dialog
      title=""
      :visible.sync="centerDialogVisible"
      width="78%"
      height="1%"
      :before-close="closeIt"
      center>
      <iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
    </el-dialog>
    <!-- End查看页面-->

    <!-- 编辑信息 -->
    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
      <!--流程流转记录-->
      <div style="text-align: right">
        <el-button type="primary" size="small" @click="handleComment">评论</el-button>
      </div>
      <flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
    </el-dialog>

    <!-- 审批人员填写评论 -->
    <el-dialog title="评论" :visible.sync="commentVisible" width="50%">
      <el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
      </el-input>
      <upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
        <el-button size="small" @click="commentVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import flowRecords from '@/components/flow/flowRecord'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import { getStorage } from '@/utils/auth'
import { selectUrl, readXml, getFlowViewer, commentSave } from '@/api/flow/todo'
import { pagerList } from '@/api/flow/read'
import { flowRecord } from '@/api/workflow/finished'
import upload from '@/components/uploadFile/upload'

export default {
  name: '',
  components: {
    pageye,
    Pagination,
    flowRecords,
    upload
  },
  data() {
    return {
      taskList: [],
      xmlData: '',
      dialogHeight: '80%',
      centerDialogVisible: false, // 弹框
      editDialog: false,
      flowRecordList: [],
      listLoading: false,
      list: [],
      tableKey: 0,
      url: '',
      commentVisible: false, // 评论内容弹框
      comment_ImgList: [],
      comment: {
        reviewer: '',
        reviewerSid: '',
        time: '',
        content: '',
        processId: '',
        processInstSid: '',
        fileList: []
      },
      line_row: {},
      loginInfo: {
        userSid: ''
      },
      selectUrl_list: {
        proc_def_id: '', // 流程定义id
        taskDefKey: '', // 节点id
        type: '' // 类型
      },
      listQuery: {
        current: 1,
        size: 10,
        total: 0,
        params: {
          names: '',
          createStartTime: '',
          createEndTime: '',
          userSid: '',
          state: '1', // 0是待阅,1是已阅
          orgPath: '',
          startUserName: ''
        }
      }
    }
  },
  mounted() {
    // 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
    window.addEventListener('message', this.handleMessage)
  },
  created() {
    // 加载列表
    this.init()
  },
  methods: {
    async handleMessage(event) {
      var code = ''
      if (event.data.params !== null && event.data.params !== undefined) {
        code = event.data.params.code
      }
      if (code === 1) {
        this.init()
        this.centerDialogVisible = false
      } else if (code === 2) {
        this.dialogHeight = event.data.params.data
        this.setIframeHeight(document.getElementById('iframe_done'))
      }
    },
    setIframeHeight(iframe) {
      iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    },
    init() {
      this.getList()
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    getList() {
      this.listLoading = true
      this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
      this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
      pagerList(this.listQuery).then((rep) => {
        this.listLoading = false
        if (rep.success) {
          this.list = rep.data.records
          this.listQuery.total = rep.data.total
        } else {
          this.list = []
          this.listQuery.total = 0
        }
      })
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    /** 打开详情 */
    handleCheck(row) {
      this.selectUrl_list.proc_def_id = row.procDefId
      this.selectUrl_list.taskDefKey = row.taskDefKey
      this.selectUrl_list.type = 2 // 详情
      const parameter_list = {
        businessSid: row.businessSid,
        instanceId: row.procInsId,
        taskId: row.taskId,
        taskDefKey: row.taskDefKey,
        taskName: row.taskName,
        deployId: row.procDefId
      }
      selectUrl(this.selectUrl_list).then((response) => {
        if (response.success && response.data.url !== '') {
          // this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
          this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
          // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
        } else if (response.success && response.data.url === '') {
          this.$notify({
            title: '提示',
            message: '请联系系统管理员',
            type: 'error',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '提示',
            message: '执行失败',
            type: 'error',
            duration: 2000
          })
        }
      })
      this.getFlowRecordList(row.procInsId, row.procDefId)
      this.centerDialogVisible = true
    },
    handleComment() {
      this.commentVisible = true
      this.comment = {
        reviewer: '',
        reviewerSid: '',
        time: '',
        content: '',
        processId: '',
        processInstSid: '',
        fileList: []
      }
      this.comment_ImgList = []
    },
    handleCommentConfirm() {
      if (this.comment.content === '') {
        this.$message({ showClose: true, type: 'error', message: '请填写评论' })
        return
      }
      if (this.comment_ImgList.length > 0) {
        for (var i = 0; i < this.comment_ImgList.length; i++) {
          this.comment.fileList.push(this.comment_ImgList[i].url)
        }
      }
      this.comment.reviewer = window.sessionStorage.getItem('name')
      this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
      this.comment.processId = this.line_row.procInsId
      commentSave(this.comment).then((resp) => {
        if (resp.success) {
          this.commentVisible = false
          this.handleFlowRecord(this.line_row)
        }
      })
    },
    closeIt() {
      this.url = ''
      this.centerDialogVisible = false
    },
    /** 流程流转记录 */
    handleFlowRecord(row) {
      this.line_row = row
      this.getModelDetail(row.procDefId)
      this.getFlowViewer(row.procInsId)
      this.getFlowRecordList(row.procInsId, row.procDefId)
      this.editDialog = true
    },
    /** xml 文件 */
    getModelDetail(procDefId) {
      var token = getStorage()
      // 发送请求，获取xml
      readXml(procDefId, token).then(res => {
        this.xmlData = res.data
      })
    },
    // 已办环节的节点
    getFlowViewer(procInsId) {
      var token = getStorage()
      getFlowViewer(procInsId, token).then(res => {
        this.taskList = res.data
      })
    },
    /** 流程流转记录 */
    getFlowRecordList(procInsId, procDefId) {
      var token = getStorage()
      const params = { procInsId: procInsId, deployId: procDefId, token: token }
      flowRecord(params).then(res => {
        this.flowRecordList = res.data
        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
        if (res.data.formData) {
          this.formConf = res.data.formData
          this.formConfOpen = true
        }
      }).catch(res => {
        this.getList()
      })
    }
  }
}
</script>

<style>
.listtop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 10px 15px;
  margin: 0;
}

.listtop .tit {
  font-weight: bold;
}

.listtop .pagination {
  margin: 0;
  padding: 0;
}

.pages {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0px 0px 15px 15px;
}

.pages .tit {
  font-weight: bold;
}

.pages .pagination {
  margin: 0;
}
.dialogStyle /deep/ .el-dialog__body {
  padding-top: 0px !important;
}
</style>