settle_down_web/src/views/workflow/myProcess.vue

<template>
  <!--    我的流程主页 -->
  <div class="myProcess">
    <el-row class="handle-box labeldom" style="margin-bottom: 10px">
      <el-col :span="22">
        <el-tabs v-model="activeName" @tab-click="handleClick()">
          <el-tab-pane label="待办事项" name="待办事项" />
          <el-tab-pane label="已办事项" name="已办事项" />
          <el-tab-pane label="我的申请" name="我的申请" />
          <el-tab-pane label="抄送事项" name="抄送事项" />
          <el-tab-pane label="委托待办事项" name="委托待办事项" />
          <el-tab-pane label="我的委托" name="我的委托" />
        </el-tabs>
      </el-col>
      <el-col :span="2">
        <el-dropdown
          class="statistic_base"
          :append-to-body="true"
          :modal-append-to-body="true"
          custom-class="tagdialog"
          style="float:right"
          trigger="click"
        >
          <span class="el-dropdown-link">
            流程发起<i
              class="el-icon-arrow-down el-icon--right"
            />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in dropdownList"
              :key="index"
              @click.native="openDianlog(item.ref)"
            >
              {{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <el-form
        ref="elForm"
        :model="search"
        :rules="rules"
        label-width="100px"
        size="medium"
      >
        <el-col :span="6">
          <el-form-item label="流程名称" prop="field101">
            <el-input
              v-model="search.field101"
              :style="{ width: '100%' }"
              clearable
              placeholder="请输入流程名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="主题" prop="field102">
            <el-input
              v-model="search.field102"
              :style="{ width: '100%' }"
              clearable
              placeholder="请输入主题"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="this.activeName != '我的申请'" :span="6">
          <el-form-item label="发起人" prop="field103">
            <el-input
              v-model="search.field103"
              :style="{ width: '100%' }"
              clearable
              placeholder="请输入发起人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item size="large">
            <el-button
              class="ch-button-warning"
              plain
              size="small"
              @click="handleReset()"
            ><i class="el-icon-aim" />&nbsp;重置
            </el-button>
            <el-button
              class="ch-button"
              size="small"
              @click="handleSearch()"
            ><i class="el-icon-search" />&nbsp;搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row class="handle-box">
      <el-col :span="24">
        <el-table
          v-loading="loading"
          :data="tableData"
          row-class-name="g_table_row"
          stripe
          style="width: 100%"
        >
          <el-table-column type="index" width="60" />
          <el-table-column label="流程名称" prop="flowName" />
          <el-table-column label="主题" prop="applyTheme">
            <template slot-scope="scope">
              <a
                v-if="activeName=='我的申请'||'我的委托'||'抄送事项'"
                style="color: #1890ff"
                @click="openDetailsDialog(scope.row.flowType,scope.row)"
              >
                {{ scope.row.applyTheme }}
              </a>
              <span v-else>
                {{ scope.row.applyTheme }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="发起人" prop="applyUserName" />
          <el-table-column label="所在部门" prop="applyDeptName" />
          <el-table-column label="发起时间" prop="createdAt">
            <template slot-scope="scope">
              {{ $common.transTime(scope.row.createdAt) }}
              <!--              {{ (row.createdAt) }}-->
            </template>
          </el-table-column>
          <el-table-column label="当前流转状态" prop="flowStatusString" />

          <el-table-column label="审核结果" prop="auditResultString" />

          <el-table-column align="center" fixed="right" header-align="center" label="操作" width="250px">
            <template scope="scope">
              <el-button
                v-if="activeName=='我的申请'&& (scope.row.flowStatusString=='已撤回'||scope.row.flowStatusString=='退回发起人')"
                :disabled="scope.row.returnStatus==1"
                size="mini"
                @click="applyAgain(scope.row,scope.row.flowType)"
              >
                <!--                -->
                重新发起
              </el-button>
              <el-button
                v-if="activeName=='我的申请'&&scope.row.flowStatusString!='已撤回'&&scope.row.flowStatusString!='已结束'&&scope.row.flowStatusString!='退回发起人'"
                size="mini"
                @click="recallApply(scope.row,scope.row,scope.row.flowType)"
              >
                撤回
              </el-button>
              <el-button
                v-if="activeName=='待办事项'||activeName=='委托待办事项'"
                :disabled="scope.row.flowStatusString=='已撤回'"
                size="mini"
                type="primary"
                @click="handleAudit(scope.row,scope.row.flowType)"
              >审核
              </el-button>
              <el-button
                v-if="activeName=='待办事项'"
                size="mini"
                type="primary"
                @click="openChangeClientDialog(scope.row)"
              >委托办理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-page">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="allpage"
            background
            layout="total, prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>

      <!--       <el-image-->
      <!--          :src="$constant.BASE_URI-->
      <!--          +'/ActController/readByPid?processInstanceId='-->
      <!--          + 65001 " fit="scale-down"/>-->
    </el-row>

    <!--    <apply-cost ref="applyCsot" @getData="getData()" />-->
    <!--    <apply-holiday ref="applyHoliday" @getData="getData()" />-->
    <!--    <apply-pay ref="applyPay" @getData="getData()" />-->
    <!--    <apply-pay-confirm ref="applyPayConfirm" @getData="getData()" />-->
    <!--    <apply-cost-confirm ref="applyCostConfirm" @getData="getData()" />-->
    <!--    <apply-holiday-confirm ref="applyHolidayConfirm" @getData="getData()" />-->
    <change-client ref="changeClient" @getData="getData" />
    <!--    <apply-again-cost ref="applyAgainCost" @getData="getData" />-->
    <!--    <apply-pay-details ref="applyPayDetails" @getData="getData" />-->
    <!--    <apply-again-pay ref="applyAgainPay" @getData="getData" />-->
    <!--    <apply-cost-details ref="applyCostDetails" />-->
    <!--    <holiday-details ref="holidayDetails" @getData="getData" />-->
    <!--    <apply-again-holiday ref="applyAgainHoliday" @getData="getData" />-->
    <apply-add-work ref="applyAddWork" @getData="getData()" />
    <apply-add-work-confirm ref="applyAddWorkConfirm" @getData="getData()" />
    <apply-add-work-detail ref="applyAddWorkDetail" />
    <apply-again-add-work ref="applyAgainAddWork" @getData="getData()" />

    <apply-payment ref="applyPayment" @getData="getData()" />
    <apply-payment-confirm ref="applyPaymentConfirm" @getData="getData()" />
    <apply-payment-detail ref="applyPaymentDetail" />
    <apply-again-payment ref="applyAgainPayment" @getData="getData()" />
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="purchaseTitle"
      :visible.sync="purchaseVisible"
      top="50px"
      width="75%"
      @close="closePurchase"
    >
      <apply-purchase v-if="purchaseVisible" ref="applyPurchase" @closeDialog="closePurchase" />
    </el-dialog>

    <apply-check-in ref="applyCheckIn" @getData="getData()" />

  </div>
</template>
<script>
import applyHoliday from '@/views/workflow/components/myProcess/applyHoliday.vue'
// import applyCost from '@/views/workflow/components/myProcess/applyCost.vue'
import applyAgainCost from '@/views/workflow/components/myProcess/applyAgainCost.vue'
import applyPay from '@/views/workflow/components/myProcess/applyPay.vue'
import changeClient from '@/views/workflow/components/myProcess/changeClient.vue'
import applyAgainPay from '@/views/workflow/components/myProcess/applyAgainPay.vue'
import applyAgainHoliday from '@/views/workflow/components/myProcess/applyAgainHoliday.vue'
import applyAgainAddWork from '@/views/workflow/components/myProcess/applyAgainAddWork.vue'
import applyHolidayConfirm from '@/views/workflow/components/myProcess/applyHolidayConfirm.vue'
// import applyCostConfirm from '@/views/workflow/components/myProcess/applyCostConfirm.vue'
import applyPayConfirm from '@/views/workflow/components/myProcess/applyPayConfirm.vue'
import applyAddWorkConfirm from '@/views/workflow/components/myProcess/applyAddWorkConfirm.vue'
import applyAddWork from '@/views/workflow/components/myProcess/applyAddWork.vue'
import applyAddWorkDetail from '@/views/workflow/components/myProcess/applyAddWorkDetail.vue'
import applyPaymentConfirm from '@/views/workflow/components/myProcess/applyPaymentConfirm.vue'
import applyPayment from '@/views/workflow/components/myProcess/applyPayment.vue'
import applyPaymentDetail from '@/views/workflow/components/myProcess/applyPaymentDetail.vue'
import applyAgainPayment from '@/views/workflow/components/myProcess/applyAgainPayment.vue'

import applyPayDetails from '@/views/workflow/components/myProcess/applyPayDetails.vue'

// import applyCostDetails from '@/views/workflow/components/myProcess/applyCostDetails.vue'
import holidayDetails from '@/views/workflow/components/myProcess/holidayDetails.vue'
import ApplyPurchase from '@/views/workflow/components/myProcess/applyPurchase.vue'
import applyCheckIn from '@/views/workflow/components/myProcess/applyCheckIn.vue'

export default {
    components: {
        applyPaymentConfirm,
        applyPayment,
        applyPaymentDetail,
        applyAgainPayment,
        ApplyPurchase,
        applyAgainAddWork,
        applyAddWork,
        // applyCostDetails,
        applyHoliday,
        // applyCost,
        applyAgainCost,
        applyAgainPay,
        applyPay,
        applyPayConfirm,
        // applyCostConfirm,
        applyHolidayConfirm,
        changeClient,
        applyPayDetails,
        holidayDetails,
        applyAgainHoliday, applyAddWorkConfirm, applyAddWorkDetail, applyCheckIn
    },
    data() {
        return {
            // 查询数据的内容
            search: {},
            dropdownList: [
                // { name: '请假申请单', ref: 'applyHoliday' },
                // { name: '费用报支申请', ref: 'applyCsot' },
                // { name: '付款申请单', ref: 'applyPay' },
                // { name: '加班申请单', ref: 'applyAddWork' },
                { name: '付款流程', ref: 'applyPayment' },
                { name: '入驻流程', ref: 'applyCheckIn' }

                // { name: '采购申请', ref: 'applyPurchase' }
                // {name: '付款审核', ref: 'applyPayConfirm'},
                // {name: '请假审核', ref: 'applyHolidayConfirm'}
            ],
            activeName: '待办事项',
            // 通用字典项
            AUDIT_TYPE: [],
            dc_map: {},
            // 列表相关
            cusName: '',
            auditStatus: '',
            auditType: '',
            proName: '',
            applyBy: '',
            tableData: [],
            loading: false,
            UserData: [
                { label: '审批中', value: '审批中' },
                { label: '已通过', value: '已通过' },
                { label: '已拒绝', value: '已拒绝' },
                { label: '已退回', value: '已退回' }
            ],
            UserMap: {},
            // 分页
            currentPage: 1,
            allpage: 0,
            pageSize: 12,
            // 弹框相关
            currAuditId: '',
            dialogVisible: false,
            dialogTitle: '新增',
            isAdd: true,
            detailList: [],
            rules: {},
            purchaseTitle: '',
            purchaseVisible: false
        }
    },
    mounted() {
        const _this = this
        if (this.$route.query && this.$route.query.activeName) {
            this.activeName = this.$route.query.activeName
        }
        _this.getData()
    },
    methods: {
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        },
        openChangeClientDialog(row) {
            this.$refs.changeClient.setVisible(true, row)
        },
        handleAudit(row, type) {
            switch (type) {
                case 'payment' :
                    this.$refs.applyPaymentConfirm.setVisible(true, row)
                    break
                case 'use_money' :
                    // this.$refs.applyCostConfirm.setVisible(true, row)
                    break
                case 'paymen' :
                    this.$refs.applyPayConfirm.setVisible(true, row)
                    break
                case 'off_work' :
                    this.$refs.applyHolidayConfirm.setVisible(true, row)
                    break
                case 'add_work' :
                    this.$refs.applyAddWorkConfirm.setVisible(true, row)
                    break
                case 'purchase_work' :
                    this.purchaseVisible = true
                    this.purchaseTitle = '采购申请-审核'
                    this.$nextTick(() => {
                        this.$refs.applyPurchase.initData(row.formId, true, false, false, row)
                    })
                    break
            }
        },
        openDetailsDialog(type, row) {
            switch (type) {
                case 'payment' :
                    this.$refs.applyPaymentDetail.setVisible(true, row)
                    break
                case 'use_money' :
                    this.$refs.applyCostDetails.setVisible(true, row)
                    break
                case 'paymen' :
                    this.$refs.applyPayDetails.setVisible(true, row)
                    break
                case 'off_work':
                    this.$refs.holidayDetails.setVisible(true, row)
                    break
                case 'add_work':
                    this.$refs.applyAddWorkDetail.setVisible(true, row)
                    break
                case 'purchase_work' :
                    this.purchaseVisible = true
                    this.purchaseTitle = '采购申请-详情'
                    this.$nextTick(() => {
                        this.$refs.applyPurchase.initData(row.formId, false, true, false, row)
                    })
                    break
            }
        },
        applyAgain(row, type) {
            switch (type) {
                case 'use_money' :
                    this.$refs.applyAgainCost.setVisible(true, row)
                    break
                case 'paymen' :
                    this.$refs.applyAgainPay.setVisible(true, row)
                    break
                case 'payment' :
                    this.$refs.applyAgainPayment.setVisible(true, row)
                    break
                case 'off_work':
                    this.$refs.applyAgainHoliday.setVisible(true, row)
                    break
                case 'add_work':
                    this.$refs.applyAgainAddWork.setVisible(true, row)
                    break
                case 'purchase_work':
                    this.purchaseVisible = true
                    this.purchaseTitle = '采购申请-重新发起'
                    this.$nextTick(() => {
                        this.$refs.applyPurchase.initData(row.formId, false, false, true, row)
                    })
                    break
            }
        },
        recallApply: function(row, type) {
            const _this = this
            _this.$confirm('该流程已经在审核中，撤回后原审核内容将作废确认撤回吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function() {
                const deleting = _this.$notify({
                    title: '正在撤回,请稍等',
                    type: 'warning'
                })
                const postData = {
                    flowMainid: row.id
                }
                console.log('row', row)
                if (row.flowType === 'off_work') { // 请假申请的时候要单独调请假时期的接口
                    _this.baseRequest2('ApplyOffWorkController', 'recallApply', postData).then(res => {
                        if (res.data.code === 200) {
                            _this.getData()
                            deleting.close()
                            _this.$notify({
                                title: '撤回成功',
                                type: 'info'
                            })
                        } else {
                            deleting.close()
                            _this.dialogVisible = false
                            _this.$notify({
                                title: '撤回失败',
                                type: 'info'
                            })
                        }
                    }).catch((err) => {
                        deleting.close()
                        _this.$alert(err)
                    })
                } else {
                    _this.baseRequest2('FlowMainController', 'recallApply', postData).then(res => {
                        if (res.data.code === 200) {
                            _this.getData()
                            deleting.close()
                            _this.$notify({
                                title: '撤回成功',
                                type: 'info'
                            })
                        } else {
                            deleting.close()
                            _this.dialogVisible = false
                            _this.$notify({
                                title: '撤回失败',
                                type: 'info'
                            })
                        }
                    }).catch((err) => {
                        deleting.close()
                        _this.$alert(err)
                    })
                }
            }).catch(function(error) {
                console.error(error)
            })
        },
        // 初始化获取数据
        getData() {
            const _this = this
            const postData = {
                applyUserName: _this.search.field103, // 申请人名称
                applyTheme: _this.search.field102, // 主题名称
                flowName: _this.search.field101, // 流程名称
                auditUser: this.$common.currUser() ? this.$common.currUser().id : '',
                pageNum: _this.currentPage,
                pageSize: _this.pageSize
            }
            let url = ''
            if (_this.activeName === '待办事项') {
                url = 'toDolisAndEntrusttByInfo'
            } else if (_this.activeName === '已办事项') {
                url = 'hasDolistByInfo'
            } else if (_this.activeName === '我的申请') {
                url = 'myApplylistByInfo'
            } else if (_this.activeName === '抄送事项') {
                url = 'cclistByInfo'
            } else if (_this.activeName === '委托待办事项') {
                url = 'entrustToDolistByInfo'
            } else if (_this.activeName === '我的委托') {
                url = 'myEntrustlistByInfo'
            }
            _this.baseRequest1(url, postData).then(res => {
                if (res.data) {
                    _this.tableData = []
                    res.data.rows.forEach(item => {
                        _this.tableData.push(_this.getItemJson(item))
                    })
                    _this.allpage = res.data.total
                } else {
                    _this.tableData = []
                }
            })
        },
        getItemJson: function(item) {
            item.xxx = '111'
            return item
        },
        handleSearch: function() {
            this.getData()
        },
        handleReset: function() {
            for (const i in this.search) {
                if (i !== 'pageNum' && i !== 'pageSize') {
                    this.search[i] = ''
                }
            }
            this.handleSearch()
        },
        // 打开流程发起菜单
        openDianlog(ref) {
            if (ref === 'applyPurchase') {
                this.purchaseVisible = true
                this.purchaseTitle = '采购申请'
                this.$nextTick(() => {
                    this.$refs.applyPurchase.initData('', false, false)
                })
            } else {
                this.$refs[ref].setVisible(true)
            }
        },
        handleClick(tab, event) {
            this.getData()
        },
        closePurchase(refresh) {
            this.purchaseVisible = false
            if (refresh) {
                this.getData()
            }
        },
        // 请求封装，继承类中调用，必须存在
        baseRequest1(opUrl, postData) {
            return this.$channel.globleRequest('FlowMainController', opUrl, postData, 'project task')
        },
        baseRequest2(controller, opUrl, postData) {
            return this.$channel.globleRequest(controller, opUrl, postData, 'project task')
        }
    }
}
</script>

<style lang="scss">
.holidayRow {
	.el-select {
		width: 100%;
	}
}
.myProcess{
    .el-dropdown-menu{
        background: #CCCCCC;
        background-color:#cccccc ;
    }
}
.el-dropdown-link {
	cursor: pointer;
	color: rgba(39, 78, 219, 1);
}

.demonstration {
	display: block;
	color: #8492a6;
	font-size: 14px;
	margin-bottom: 20px;
}

.labeldom {
	.el-tabs__nav-wrap::after {
		background: none;
	}
}

.w200px {
	width: 200px;
}
</style>
<style scoped>
.ch-input .el-input__inner {
	border-radius: 0px;
	border-color: #32323a;
}

.ch-input-size {
	width: 150px;
}

.ch-button {
	borderund-color: #32323a;
	color: #fff;
}

.ch-button-warning {
	margin-left: 10px;
	border-radius: 0px;
	border-color: #E75B5B;
	background-color: #E75B5B;
	color: #fff;
}
</style>