programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/myProcessAll.vue

<template>
  <!--    我的流程主页 -->
  <div>
    <el-row class="handle-box labeldom" style="margin-bottom: 10px">
      <el-form
        ref="elForm"
        :model="search"
        :rules="rules"
        label-width="100px"
        size="medium"
      >
        <el-col :span="6">
          <el-form-item label="流程名称" prop="field101" style="margin-bottom: 0px">
            <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" style="margin-bottom: 0px">
            <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" style="margin-bottom: 0px">
            <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" style="margin-bottom: 0px">
            <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="350px">
            <template scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="openDetailsDialog(scope.row.flowType,scope.row)"
              >
                查看
              </el-button>
              <el-button
                :disabled="scope.row.flowStatusString=='已结束'||scope.row.flowStatusString=='已撤回'"
                size="mini"
                @click="recallApply(scope.row,scope.row,scope.row.flowType)"
              >
                撤回
              </el-button>
              <el-button
                size="mini"
                :disabled="!(scope.row.flowStatusString=='已结束'||scope.row.flowStatusString=='已撤回')"
                @click="deleteApply(scope.row,scope.row,scope.row.flowType)"
              >
                删除
              </el-button>
              <el-button
                :disabled="scope.row.flowStatusString=='已结束'||scope.row.flowStatusString=='已撤回'"
                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" @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>
  </div>
</template>
<script>
import applyHoliday from '@/views/workflow/components/myProcess/applyHoliday.vue'
// import applyCost from '@/views/workflow/components/myProcess/applyCost.vue'
// import applyCostConfirm from '@/views/workflow/components/myProcess/applyCostConfirm.vue'
import applyAgainCost from '@/views/workflow/components/myProcess/applyAgainCost.vue'
import applyPay from '@/views/workflow/components/myProcess/applyPay.vue'
import applyPayConfirm from '@/views/workflow/components/myProcess/applyPayConfirm.vue'
import applyHolidayConfirm from '@/views/workflow/components/myProcess/applyHolidayConfirm.vue'
import changeClient from '@/views/workflow/components/myProcessAll/ChangeClient.vue'
import applyPayDetails from '@/views/workflow/components/myProcess/applyPayDetails.vue'
import applyAgainPay from '@/views/workflow/components/myProcess/applyAgainPay.vue'
// import applyCostDetails from '@/views/workflow/components/myProcess/applyCostDetails.vue'
import holidayDetails from '@/views/workflow/components/myProcess/holidayDetails.vue'
import applyAgainHoliday from '@/views/workflow/components/myProcess/applyAgainHoliday.vue'
import applyAddWork from '@/views/workflow/components/myProcess/applyAddWork.vue'
import applyAddWorkConfirm from '@/views/workflow/components/myProcess/applyAddWorkConfirm.vue'
import applyAddWorkDetail from '@/views/workflow/components/myProcess/applyAddWorkDetail.vue'
import ApplyPurchase from '@/views/workflow/components/myProcess/applyPurchase.vue'

export default {
    components: {
        ApplyPurchase,
        applyAddWork,
        // applyCostDetails,
        applyHoliday,
        // applyCost,
        applyAgainCost,
        applyAgainPay,
        applyPay,
        applyPayConfirm,
        // applyCostConfirm,
        applyHolidayConfirm,
        changeClient,
        applyPayDetails,
        holidayDetails,
        applyAgainHoliday, applyAddWorkConfirm, applyAddWorkDetail
    },
    data() {
        return {
            // 查询数据的内容
            search: {},
            activeName: '待办事项',
            // 通用字典项
            AUDIT_TYPE: [],
            dc_map: {},
            // 列表相关
            cusName: '',
            auditStatus: '',
            auditType: '',
            proName: '',
            applyBy: '',
            tableData: [],
            loading: false,
            UserMap: {},
            // 分页
            currentPage: 1,
            allpage: 0,
            pageSize: 12,
            // 弹框相关
            currAuditId: '',
            dialogVisible: false,
            dialogTitle: '新增',
            isAdd: true,
            detailList: [],
            rules: {},
            purchaseTitle: '',
            purchaseVisible: false
        }
    },
    mounted() {
        const _this = this
        _this.getData()
    },
    methods: {
        openDetailsDialog(type, row) {
            switch (type) {
                case 'use_money' :
                    console.log(row)
                    // 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
            }
        },
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        },
        openChangeClientDialog(row) {
            this.$refs.changeClient.setVisible(true, row)
        },
        handleAudit(row, type) {
            switch (type) {
                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
            }
        },
        deleteApply(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
                }
                _this.baseRequest2('FlowMainController', `remove/${row.id}`, 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)
            })
        },
        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
                }
                _this.baseRequest2('FlowMainController', 'topRecallApply', 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, // 流程名称
                pageNum: _this.currentPage,
                pageSize: _this.pageSize
            }
            _this.baseRequest1('applylistByInfo', 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) {
            console.log(ref)
            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%;
	}
}

.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>