settle_down_web/src/views/workbench/components/myAudit.vue

<template>
  <div class="myAudit">
    <el-collapse value="1">
      <el-collapse-item title="我的待办" name="1">
        <template slot="title">
          <svg-icon icon-class="我的待办" />
          <span class="myLine">我的待办</span>
          <img
            src="@/static/images/refresh.svg"
            alt=""
            class="panel-icon el-icon-refresh  new-ref"
            @click.stop="refresh"
          >
        </template>
        <div class="taskType">
          <div
            v-for="(item, index) in itemList"
            :key="index"
            :class="selectTask==item.key?'isborder task':'task'"
            @click="typeChange(item, index)"
          >
            <span :class="selectTask==item.key?'selectTaskName':'taskName'">{{ item.name }}</span>
            <span class="taskQuan">{{ '(' + item.quantity + ')' }}</span>
          </div>
        </div>
        <div>
          <!--					v-if="itemList && itemList.length > 0"-->
          <el-row v-if="itemList && itemList.length > 0" class="comp-box">
            <el-col :span="24">
              <!--							tableDataList-->

              <el-table v-loading="loading" :header-cell-style="{ background: 'rgba(0,0,0,0)!important' }" :data="tableDataList" row-class-name="g_table_row">
                <el-table-column align="center" type="index" width="30" />
                <el-table-column label="标题" width="150">
                  <template scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top">

                      <div class="chaochuyingcang">
                        <el-link type="primary" :underline="false" @click="rowClick(scope.row)">
                          <div class="chaochuyingcang" style="width: 150px">{{ scope.row.title }}</div>
                        </el-link>
                      </div>

                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="来源" prop="srcUserName" />
                <el-table-column align="center" header-align="center" label="接收时间" prop="createdAt" width="180" />
              </el-table>
              <div class="table-page">
                <div class="unSelect" @mouseleave="handleLeave" @mouseover="handleEnter" @click.stop="morePc">
                  全部<img :src="isSelectAll?selectAll:unSelectAll" class="iconRight">
                </div>
                <el-pagination
                  :current-page.sync="currentPage"
                  :page-size="tablePageSize"
                  layout="total, prev, pager, next"
                  :total="allpage"
                  @current-change="handlePageChange"
                />
              </div>
            </el-col>
          </el-row>

          <el-row v-if="!itemList || itemList.length <= 0" class="comp-box" style="padding-top: 90px; text-align: center; font-size: 16px;">
            暂无消息
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-dialog
      append-to-body
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="75%"
      top="50px"
    >
      <!--      <company-form v-if="dialogVisible" ref="companyForm" :is-handle="true" :is-view="false" @handleClose="handleClose" />-->
      <indexCompanyShow v-if="dialogVisible" ref="companyForm" :is-handle="true" :is-view="false" @handleClose="handleClose" />

    </el-dialog>

    <apply-payment-confirm ref="applyPaymentConfirm" @getData="getDataList()" />
    <apply-check-in ref="applyCheckIn" @getData="getDataList()" />
    <apply-contract ref="applyContract" @getData="getDataList()" />
    <apply-receivables-adjust ref="applyReceivablesAdjust" @getData="getDataList()" />
    <apply-invoice-red ref="applyInvoiceRed" @getData="getDataList()" />
    <apply-buying-more ref="applyBuyingMore" @getData="getDataList()" />
    <apply-finance ref="applyFinance" @getData="getDataList()" />

  </div>
</template>
<script>
// import BasePanel from '../base/baseListPanel'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
// import CompanyForm from '@/views/company/companyForm.vue'
import indexCompanyShow from '@/views/prove/indexCompanyShow'
import myBus from '@/static/utils/myBus'
import applyPaymentConfirm from '@/views/workflow/components/myProcess/applyPaymentConfirm.vue'
import applyCheckIn from '@/views/workflow/components/myProcess/applyCheckIn.vue'
import applyContract from '@/views/workflow/components/myProcess/applyContract.vue'
import applyReceivablesAdjust from '@/views/workflow/components/myProcess/applyReceivablesAdjust.vue'
import applyInvoiceRed from '@/views/workflow/components/myProcess/applyInvoiceRed.vue'
import applyBuyingMore from '@/views/workflow/components/myProcess/applyBuyingMore.vue'
import applyFinance from '@/views/workflow/components/myProcess/applyFinance.vue'

export default {
    name: 'PendingAudit',
    components: { applyFinance, applyBuyingMore, applyInvoiceRed, applyReceivablesAdjust, applyContract, applyCheckIn,
        applyPaymentConfirm, indexCompanyShow },
    // extends: BasePanel,
    mixins: [Base, BaseData],
    data() {
        return {
            loading: false,
            tablePageSize: 5,
            tableDataList: [],
            selectTask: -1,
            selectUrl: '',
            itemList: [],
            isSelectAll: false,
            selectAll: require('../../../static/images/iconRight.svg'),
            unSelectAll: require('../../../static/images/unselectAll.svg'),
            dialogVisible: false,
            dialogTitle: '',
            selectItem: ''
        }
    },
    mounted() {
        const _this = this
        _this.initData()
        // _this.getHandleSize()
        // _this.getDataList(0)
    },
    methods: {
        // 刷新
        refresh: function() {
            // this.getHandleSize()
            this.currentPage = 1
            // this.getDataList()
            this.initData()
        },
        handleClose(refresh) {
            this.dialogVisible = false
            if (refresh) {
                this.refresh()
            }
        },
        // 获取key位置
        getKeyIndex: function() {
            let keyIndex = -1
            this.itemList.some((item, index) => {
                if (item.key == this.selectTask) {
                    keyIndex = index
                    return true
                }
            })
            return keyIndex
        },
        initData: function() {
            this.itemList = []
            this.baseRequest('getHandleSize', {}).then(res => {
                res.data.data.forEach(element => {
                    this.itemList.push(element)
                })
                if (this.selectTask == -1) {
                    if (this.itemList.length > 0) {
                        this.selectTask = this.itemList[0].key
                        this.selectUrl = this.itemList[0].url
                        this.getMenuDetail(this.itemList[0].name)
                    } else {
                        this.selectTask = 999999
                        this.selectUrl = ''
                    }
                }
                this.getDataList()
            }).catch(() => {
            })
        },

        // 获取待办各类型数据
        getHandleSize: function() {
            this.itemList = []
            this.baseRequest('getHandleSize', {}).then(res => {
                console.log('获取待办各类型数据_:', res)
                res.data.data.forEach(element => {
                    this.itemList.push(element)
                })
            }).catch(() => {
            })
        },
        // 获取菜单详情
        getMenuDetail(e) {
            this.baseRequest('getListPermissionByName', { name: e }).then((res) => {
                console.log(res)
                this.selectItem = res.data
            })
        },
        // 类型点击事件
        typeChange: function(item, index) {
            this.selectTask = item.key
            this.selectUrl = item.url
            this.currentPage = 1
            this.getDataList()
            this.getMenuDetail(item.name)
        },
        // 获取对应类型的数据
        getDataList: function() {
            const _this = this
            _this.loading = true
            _this.tableDataList = []
            const keyIndex = this.getKeyIndex()
            if (keyIndex > -1) {
                const reqData = {
                    type: this.selectTask,
                    pageNum: _this.currentPage,
                    pageSize: _this.tablePageSize
                }
                this.baseRequest('handleList', reqData).then(res => {
                    if (res.data.rows) {
                        _this.tableDataList = []
                        res.data.rows.forEach(function(item) {
                            _this.tableDataList.push(item)
                        })
                        _this.allpage = res.data.total
                        this.itemList[keyIndex].quantity = res.data.total
                    }
                    _this.loading = false
                })
                    .catch(() => {
                    })
            } else {
                _this.loading = false
            }
        },
        handlePageChange: function(val) {
            this.currentPage = val
            this.getDataList()
        },
        handleEnter() {
            this.isSelectAll = true
        },
        handleLeave() {
            this.isSelectAll = false
        },
        rowClick: function(row) {
            console.log('行数据——：', row)
            if (row.routeParam) {
                const postData = this.queryURLParams('http://www.baidu.com?' + row.routeParam)
                switch (row.handleType) {
                    case '1' :
                        this.$refs.applyPaymentConfirm.setVisible(true, postData) // 付款流程
                        break
                    case '2' :
                        this.$refs.applyCheckIn.setVisible(true, postData) // 入驻流程
                        break
                    case '3' :
                        this.$refs.applyContract.setVisible(true, postData) // 合同用章流程
                        break
                    case '4' :
                        this.$refs.applyReceivablesAdjust.setVisible(true, postData) // 应收款调整流程
                        break
                    case '5' :
                        this.$refs.applyInvoiceRed.setVisible(true, postData) // 发票红冲流程
                        break
                    case '6' :
                        this.$refs.applyBuyingMore.setVisible(true, postData) // 回购流程
                        break
                    case '7' :
                        this.$refs.applyFinance.setVisible(true, postData) // 上交财政流程
                        break
                }
            }



            // else {
            //     this.$router.push(row.routeUrl + '?' + row.routeParam)
            // }
        },
        morePc: function() {
            localStorage.removeItem('Navbar')
            this.$nextTick(() => {
                localStorage.setItem('Navbar', JSON.stringify(this.selectItem))
                this.$router.push(this.selectUrl)
                myBus.$emit('menuChild1', { ...this.selectItem })
            })
            // this.$router.push(this.selectUrl)
            // if (this.morePsRouter) {
            // 	this.$router.push(this.morePsRouter)
            // }
        },
        queryURLParams(URL) {
            const url = URL.split('?')[1]
            const urlSearchParams = new URLSearchParams(url)
            const params = Object.fromEntries(urlSearchParams.entries())
            return params
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globleRequest('WorkPanelController', opUrl, postData, 'project')
        },
        baseFlowRequest(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        }
    }
}
</script>

<style lang="scss">
.myAudit {
	.el-table{
		border-bottom: 1px solid #E6E6E6;
		th,td{
			border-bottom: none;
		}

	}
	.el-icon{
		color: green;
	}
	.isborder{
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		border-bottom: 3px solid #4A8139;
	}
	.cell {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
	}

	.table-page {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 5px 20px;

		.selectAll {
			color: rgba(244, 83, 32, 1);
			display: flex;
			align-items: center;
			font-size: 12px;
			cursor: pointer;
		}

		.iconRight {
			margin-left: 2px;
		}

		.unSelect {
			color: rgba(153, 153, 153, 1);
			display: flex;
			align-items: center;
			font-size: 12px;
			cursor: pointer;
		}

		.unSelect:hover {
			color: rgba(244, 83, 32, 1);
		}
	}

	.el-pagination__total {
		display: none !important;
	}

	.el-pager li.active {
		color: #F8BF23 !important;
		background: rgba(245, 245, 245, 0.5);
	}

	.taskType {
		//display: flex;
		//align-items: center;
		border-top: 1px solid rgba(230, 230, 230, 1);
		height: 40px;
		margin-left: 0.39vw;
		padding-top: 10px;
		.task {
			display: inline-flex;
			align-items: center;
			margin-left: 0.851vw;
			cursor: pointer;
			white-space: nowrap;

			.taskName {
				color: #333333;
				font-size: 14px;
			}

			.selectTaskName {
				color: #4A8139;
				font-size: 14px;
			}

			.taskQuan {
				color: #f6c56e;
				font-size: 14px;
				margin-left: 3px;
			}
		}

		.taskName:hover {
			color: rgba(36, 36, 100, 0.7) !important;
		}
	}

	.el-table__body-wrapper {
		min-height: 185px !important;

		&::-webkit-scrollbar {
			display: none !important;
		}
	}

	.el-table__empty-block {
		min-height: 185px !important;
	}

	.el-collapse-item__content {
		height: 331px;
	}

	.el-table:before {
		height: 0px !important;
	}

	.el-collapse-item__arrow {
		display: none !important;
	}

	.new-ref {
		right: 10px !important;
	}

	.el-button--warning {
		background-color: rgba(70, 122, 235, 0) !important;
		color: rgba(70, 122, 235, 1) !important;
		border: none !important;
	}

	.el-button--mini {
		padding: 5px 15px !important;
	}
}

.myLine {
	//border-left: 3px solid rgba(81, 68, 157, 1);
	padding-left: 5px;
	height: 16px;
	display: flex;
	align-items: center;
	font-weight: 600;
	color: #264987 !important;
}

.el-table__cell {

}

.el-table__header {
	th {
		background: rgba(245, 245, 245, 1) !important;
	}
}
</style>