programs_info/三资项目/删除前备份/前段代码/workflow/myApprove.vue

<template>
  <div>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="24">

        <el-date-picker
          id="datePicker"
          v-model="CreateDate"
          size="small"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="发起开始日期"
          end-placeholder="发起结束日期"
          value-format="yyyy-MM-dd"
          @change="pickerChange"
        />

        <el-date-picker
          id="datePicker"
          v-model="CompleteDate"
          size="small"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="处理开始日期"
          end-placeholder="处理结束日期"
          value-format="yyyy-MM-dd"
          @change="pickerChange"
        />
        <el-button size="small" class="ch-button-warning" @click="handleReset()"><i class="el-icon-search" />&nbsp;重置</el-button>
        <el-button size="small" class="ch-button" @click="handleSearch()"><i class="el-icon-search" />&nbsp;搜索</el-button>
        <el-button size="small" class="ch-button-export" @click="confirmOutput()"><i class="el-icon-download" />&nbsp;导出</el-button>
      </el-col>
    </el-row>
    <el-row class="handle-box">
      <el-col :span="24">
        <el-tabs v-model="search.processType" @tab-click="handleSearch">
          <el-tab-pane v-for="item in dc_data.PROCESS_TYPE" :key="item.value" :label="item.label" :name="item.value" />
        </el-tabs>
      </el-col>
      <el-col :span="24">
        <el-table v-loading="loading" :data="AllData" height="500" stripe row-class-name="g_table_row">
          <el-table-column type="index" width="60" />
          <el-table-column label="类型" prop="processType" />
          <el-table-column label="标题" prop="processName" />
          <el-table-column label="发起人" prop="startByName" />
          <el-table-column label="所处理节点" prop="name" />
          <el-table-column label="发起时间" prop="createTime" />
          <el-table-column label="处理时间" prop="endTime" />
          <el-table-column label="操作" header-align="center" align="center" width="120">
            <template scope="scope">
              <el-button size="mini" type="primary" @click="handleOpera(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-page">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            background
            layout="total, prev, pager, next"
            :total="allpage"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
    <el-dialog title="流程查看" :visible.sync="dialogVisible" width="75%" top="30px" :close-on-click-modal="false" :close-on-press-escape="false">
      <flow-page
        v-if="dialogVisible"
        :form-type="form.formType"
        :form-title="form.formTitle"
        :form-id="form.businessKey"
        :task-id="form.taskId"
        :task-historic="true"
        :flow-type="'VIEW'"
        @handleClose="handleClose"
      />
    </el-dialog>
  </div>
</template>
<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import { getDictData } from '@/static/utils/channel'
import Constant from '@/static/utils/constant'

import FlowPage from './flowPage'
export default {
    name: 'MyAudit',
    components: {
        FlowPage
    },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['PROCESS_TYPE'],
            // 列表相关
            search: {
                processType: 'bidding_process_1',
                startUserId: '',
                createdFrom: '',
                createdTo: '',
                endedFrom: '',
                endedTo: ''
            },
            CreateDate: [],
            CompleteDate: [],
            AllData: [],
            loading: false,
            // 弹框相关
            dialogVisible: false,
            form: this.initForm()
        }
    },
    mounted() {
        getDictData(this.dc_key).then((res) => {
            if (res.data) {
                this.dc_key.forEach(key => {
                    const dictValue = this.getDictValue(res.data, key)
                    this.dc_data[key] = dictValue
                    this.dc_map[key] = this.$common.transDcMap(dictValue)
                })
            }
            this.getData()
        })
    },
    methods: {
        getData: function() {
            const _this = this
            _this.loading = true
            _this.AllData = []

            this.search.pageNum = this.currentPage
            this.search.pageSize = this.pageSize
            this.baseRequest('findHistoryTask', this.search).then((res) => {
                console.log(res)
                if (res.data.data) {
                    res.data.data.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                    _this.allpage = res.data.data.length
                }
                _this.loading = false
            }).catch(() => {
            })
            this.initOutData()
        },
        handleSearch: function() {
            this.getData()
        },
        handleReset: function() {
            for (const i in this.search) {
                if (i !== 'pageNum' && i !== 'pageSize' && i !== 'processType') {
                    this.search[i] = ''
                }
            }
            this.CreateDate = []
            this.CompleteDate = []
            this.handleSearch()
        },
        initOutData: function() {
            const _this = this
            this.OutData = []
            const title = [' 类型', ' 标题', ' 发起人', ' 当前节点', ' 发起时间', ' 处理时间'
            ]
            this.OutData.push(title)

            this.baseRequest('findTask', this.search).then((res) => {
                if (res.data.data) {
                    res.data.data.forEach(function(item) {
                        const jsonMap = _this.getItemJson(item)
                        const jsonArray = []
                        jsonArray.push(jsonMap.processType)
                        jsonArray.push(jsonMap.processTitle)
                        jsonArray.push(jsonMap.startBy)
                        jsonArray.push(jsonMap.name)
                        jsonArray.push(jsonMap.createTime)
                        jsonArray.push(jsonMap.endTime)

                        _this.OutData.push(jsonArray)
                    })
                }
            }).catch(() => {
            })
        },
        getItemJson: function(item) {
            item.createTime = this.$common.transDate(item.createTime, Constant.DATE_PATTERN.DATE_TIME_s_h)
            item.endTime = this.$common.transDate(item.endTime, Constant.DATE_PATTERN.DATE_TIME_s_h)
            return item
        },
        initForm: function() {
            return {
                formTitle: 'bidding_process_1',
                formType: '招标单',
                taskId: '',
                businessKey: ''
            }
        },
        pickerChange: function() {
            if (this.CreateDate.length > 0) {
                this.search.createdFrom = this.CreateDate[0]
                this.search.createdTo = this.CreateDate[1]
            }
            if (this.CompleteDate.length > 0) {
                this.search.endedFrom = this.CompleteDate[0]
                this.search.endedTo = this.CompleteDate[1]
            }
            this.handleSearch()
        },
        confirmOutput() {
            const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }
            ]
            const fileName = 'myAudit导出 ' + new Date().Format('yyyy-MM-dd hh:mm')
            this.$outputXlsxFile(this.OutData, OutSize, fileName)
        },
        /* 处理*/
        handleOpera: function(val) {
            this.form = Object.assign({ taskId: val.id, businessKey: val.businessKey }, this.getFormInfo(val.processType))
            this.dialogVisible = true
        },
        getFormInfo: function(processType) {
            let formTitle = ''
            let formType = ''
            switch (processType) {
                case '招标审批':
                    formTitle = '招标单'
                    formType = 'BIDDING'
                    break
                case '合同审批':
                    formTitle = '合同单'
                    formType = 'CONTRACT'
                    break
            }
            return { formTitle, formType }
        },
        handleClose: function() {
            this.dialogVisible = false
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globleRequest('ActivitiController', opUrl, postData, 'project')
        }
    }
}
</script>

<style scoped>
  .ch-input .el-input__inner {
      border-color: #32323A;
  }
  .ch-input-size {
      width: 150px;
  }
  .ch-button {
      border-color: #32323A;
      background-color: #32323A;
      color: #fff;
  }
  .ch-button-warning {
      margin-left: 10px;
      border-color: #E75B5B;
      background-color: #E75B5B;
      color: #fff;
  }
  .ch-button-export {
      margin-left: 10px;
      border-color: #98CC1F;
      background-color: #98CC1F;
      color: #fff;
  }
  /deep/.el-dialog__header {
      padding: 10px 20px;
  }
  /deep/.el-dialog__body {
      padding: 10px 20px;
  }
</style>