<template>
|
<div class="bodyBox">
|
<!-- 资源审批-->
|
<div class="searchBox">
|
<div class="formDiv">
|
<el-form
|
:inline="true"
|
:model="searchData"
|
ref="searchFormRef"
|
label-width="80px"
|
>
|
|
<el-form-item label="资源类型" class="form-item">
|
<el-select
|
style="width: 220px;"
|
clearable
|
v-model="searchData.type"
|
placeholder="请选择资源类型"
|
>
|
<el-option
|
v-for="item in state.resourceOptions"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="资源名称" class="form-item">
|
<el-input
|
v-model="searchData.name"
|
placeholder="请输入名称"
|
clearable
|
style="width:220px"
|
/>
|
</el-form-item>
|
<el-form-item label="审批状态" class="form-item">
|
<el-select
|
style="width: 200px;"
|
clearable
|
v-model="searchData.authStatus"
|
placeholder="请选择资源类型"
|
>
|
<el-option
|
v-for="item in state.statusOptions"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="form-item">
|
<el-button
|
class="btnDiv"
|
icon="Search"
|
type="primary"
|
@click="queryInformation"
|
>查询
|
</el-button>
|
<el-button class="btnDiv" icon="Refresh" @click="restClick()"
|
>重置
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div style="width: 100%;" v-loading="loading">
|
<div class="buttonDiv">
|
<el-row>
|
<el-col :span="6" style="margin-top: 10px"> </el-col>
|
<el-col :span="18" align="right" style="margin-top: 10px">
|
<div class="btnBox">
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: searchData.approvalStatus == 'dealwith' }"
|
@click="btnClick('dealwith')"
|
>
|
<span class="numjx">我的待办</span>
|
<span>{{ state.dealwithData }}</span>
|
</div>
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass:searchData.approvalStatus== 'completed' }"
|
@click="btnClick('completed')"
|
>
|
<span class="numjx">我的已办</span>
|
<span>{{ state.completedData }}</span>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="tableBox">
|
<div class="tableDiv">
|
<el-table
|
:data="state.tableListData"
|
v-tableHeight
|
border
|
stripe
|
style="width: 100%"
|
size="large"
|
:header-cell-style="{
|
textAlign: 'center',
|
backgroundColor: '#fff',
|
color: '#333',
|
}"
|
>
|
<el-table-column
|
align="center"
|
prop="name"
|
label="资源名称"
|
show-overflow-tooltip
|
min-width="200"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="rowtypeName"
|
label="资源类型"
|
width="120"
|
>
|
<template #default="scope">
|
<div class="rowBtnDiv">
|
<el-tag v-if="scope.row.type=='benchmark'" >
|
{{ scope.row.typeName }}
|
</el-tag>
|
<el-tag v-if="scope.row.type=='product'" type="success">
|
{{ scope.row.typeName }}
|
</el-tag>
|
<el-tag v-if="scope.row.type=='knowledge'" type="warning">
|
{{ scope.row.typeName }}
|
</el-tag>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="industrialChainName"
|
label="行业领域"
|
min-width="150"
|
show-overflow-tooltip
|
></el-table-column>
|
<!-- <el-table-column
|
align="center"
|
prop="importantAreaName"
|
label="单位工程"
|
show-overflow-tooltip
|
min-width="150"
|
></el-table-column> -->
|
<el-table-column
|
align="center"
|
prop="applyUnitName"
|
label="申请单位"
|
min-width="180"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="createBy"
|
label="申请人"
|
width="100"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="applyTypeName"
|
label="申请类型"
|
width="100"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="createTime"
|
label="申请时间"
|
show-overflow-tooltip
|
width="170"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="authApproveStatusName"
|
show-overflow-tooltip
|
label="状态"
|
width="100"
|
></el-table-column>
|
<el-table-column align="center" label="操作" width="160">
|
<template #default="scope">
|
<div class="rowBtnDiv">
|
<!-- v-auth="['subscription:approval:approval', 'auth-btn']" -->
|
<el-button
|
v-if="searchData.approvalStatus == 'dealwith'"
|
class="normal-btn"
|
type="success"
|
size="small"
|
plain
|
text
|
@click="handleApproval(scope.row)"
|
>审批
|
</el-button>
|
<!-- v-auth="['subscription:approval:trace', 'auth-btn']" -->
|
<el-button
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
text
|
@click="traceRow(scope.row)"
|
>追踪
|
</el-button>
|
|
<!-- v-auth="['subscription:approval:detail', 'auth-btn']" -->
|
<el-button
|
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
text
|
@click="viewRow(scope.row)"
|
>查看
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="paginationDiv">
|
<el-pagination
|
v-model:currentPage="searchData.page.current"
|
v-model:page-size="searchData.page.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:total="searchData.page.total"
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
size="small"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
export default {
|
name: 'authorizationList',
|
}
|
</script>
|
<script setup lang="ts">
|
import type Node from 'element-plus/es/components/tree/src/model/node'
|
import { Search } from '@element-plus/icons-vue'
|
import router from '@/router'
|
import Table from '@/components/table/index.vue'
|
import { ElMessageBox, ElNotification } from 'element-plus'
|
import productService from '@/api/zhongjian/productApi' // 接口文件
|
import subscriptionApi from '@/api/subscription'
|
import communicationApi from '@/api/communication'
|
import type { FormInstance } from 'element-plus'
|
import moment from 'moment'
|
import { useRoute } from 'vue-router'
|
import Base64 from '@/utils/base64'
|
import bus from '@/utils/mitt'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
const route = useRoute()
|
const loading = ref<boolean>(false)
|
const state = reactive<any>({
|
tableListData: [],
|
resourceOptions: [], // 资源类型下拉
|
regionData: [], // 单位工程下拉
|
productTypeData: [], // 资源类型下拉
|
productTypeChildData: [], // 资源类型子级下拉
|
pageTypeData: 'option', // 上传组件类型
|
dealwithData: 0, // 我的待办
|
completedData: 0, // 我的已办
|
statusOptions:[]
|
})
|
const showInformationDialog = ref<any>()
|
const searchFormRef = ref<any>()
|
const searchData = reactive<any>({
|
name: '', // 方案名称
|
type:'',
|
approvalStatus:'dealwith',
|
authStatus:'',
|
page: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
})
|
const scrollViewContainer=ref()
|
const restClick = () => {
|
searchData.name = '' // 方案名称
|
searchData.type=''
|
searchData.authStatus=''
|
searchData.page = {
|
current: 1,
|
size: 10,
|
total: 0,
|
}
|
state.btnClassShow = 'dealwith'
|
searchData.approvalStatus = 'dealwith'
|
// 获取数据
|
getListDataFun()
|
productListCountUrlFun()
|
}
|
const informationDialogData = reactive<any>({
|
title: '资源使用审批',
|
informationEditType: 'approval',
|
userUseId: '',
|
data: '',
|
})
|
|
// 审批
|
const handleApproval = (row?: any) => {
|
showInformationDialog.value = true
|
informationDialogData.userUseId = row.useId
|
informationDialogData.data = row
|
informationDialogData.informationEditType='approve'
|
informationDialogData.type=row.type
|
informationDialogData.id=row.id
|
informationDialogData.reportId=row.reportId
|
informationDialogData.taskId=row.taskId
|
router.push({
|
path: '/approve/authorizationApply/authorizationApplyApproval',
|
query: {
|
info: Base64.encode(JSON.stringify(informationDialogData)),
|
},
|
})
|
}
|
const btnClick = (type?: any) => {
|
state.btnClassShow = type
|
searchData.approvalStatus = type
|
// 获取list数据
|
getListDataFun()
|
}
|
// 跟踪
|
const traceRow = (row?: any) => {
|
const token = userStore.getAdminToken
|
router.push({
|
path: '/approve/tracePage',
|
query: {
|
info: Base64.encode(
|
JSON.stringify({
|
name: '授权',
|
id: row.id,
|
flowId: row.flowId,
|
token: token,
|
})
|
),
|
},
|
})
|
}
|
// 查看列表信息
|
const viewRow = (row: any) => {
|
const token = userStore.getAdminToken
|
let informationDialogData:any={}
|
informationDialogData.id = row.id
|
informationDialogData.flowId = row.flowId
|
informationDialogData.token = token
|
informationDialogData.userUseId=row.useId
|
informationDialogData.taskId=row.taskId
|
informationDialogData.type=row.type
|
informationDialogData.informationEditType='view'
|
informationDialogData.reportId=row.reportId
|
router.push({
|
path: '/approve/authorizationApply/authorizationApplyApproval',
|
query: {
|
info: Base64.encode(JSON.stringify(informationDialogData)),
|
},
|
})
|
}
|
// 查询
|
const queryInformation = () => {
|
// 获取list数据
|
getListDataFun()
|
productListCountUrlFun()
|
}
|
// 取消按钮回调
|
const closeDialog = () => {
|
// 获取list数据
|
getListDataFun()
|
}
|
|
// table数据
|
const getListDataFun = () => {
|
loading.value=true
|
subscriptionApi.getReportAuthList({ ...searchData }).then((res: any) => {
|
if (res.code == 200) {
|
state.tableListData = [...res.data.records]
|
searchData.page.total = res.data.total
|
loading.value=false
|
}else{
|
loading.value=false
|
}
|
}).catch(()=>{
|
loading.value=false
|
})
|
}
|
// 状态筛选
|
const getStatusOptions = () => {
|
subscriptionApi.getApproveStatusOptions().then((res: any) => {
|
if (res.code == 200) {
|
state.statusOptions = res.data
|
}
|
})
|
}
|
// 下拉数据-资源类型
|
const getResourceOptions = () => {
|
const searchList = {
|
code: 'RESOURCE_MODULE',
|
}
|
communicationApi.getDistSubListByCode(searchList).then((res: any) => {
|
if (res.code == 200) {
|
state.resourceOptions = res.data.sysDictSubList
|
|
}
|
})
|
}
|
|
// 下拉数据-资源类型
|
const productTypeDataFun = () => {
|
const searchList = {
|
parentCode: 'product_type',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.productTypeData = [...res.data]
|
}
|
})
|
}
|
|
// 获取审核数量
|
const productListCountUrlFun = () => {
|
const search = {
|
name: searchData.name,
|
type: searchData.type,
|
authStatus:searchData.authStatus
|
}
|
subscriptionApi.getReportAuthListCount({ ...search }).then((res: any) => {
|
if (res.code == 200) {
|
state.dealwithData=res.data.dealwith
|
state.completedData = res.data.completed
|
}
|
})
|
}
|
// 修改页码
|
const handleSizeChange = (val: number) => {
|
searchData.page.size = val
|
getListDataFun()
|
}
|
const handleCurrentChange = (val: number) => {
|
searchData.page.current = val
|
getListDataFun()
|
}
|
onMounted(() => {
|
searchData.approvalStatus=route.query.type || 'dealwith'
|
// 获取list数据
|
getListDataFun()
|
// 下拉数据-资源类型
|
getResourceOptions()
|
// 下拉数据-资源类型
|
productTypeDataFun()
|
productListCountUrlFun()
|
// 审批状态枚举类
|
getStatusOptions()
|
})
|
onActivated(() => {
|
if(route.query.type){
|
searchData.approvalStatus=route.query.type
|
}
|
// 获取list数据
|
getListDataFun()
|
productListCountUrlFun()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.bodyBox {
|
width: 100%;
|
//height: 700px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.searchBox {
|
width: 100%;
|
// border-radius: 5px;
|
border: 1px solid #dbe5ea;
|
// box-shadow: 0 5px 5px rgba(223, 223, 223, 0.5); // 下
|
display: flex;
|
flex-direction: row;
|
padding-bottom: 10px;
|
padding-left: 10px;
|
|
.formDiv {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
.searchBtn {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
margin-right: 10px;
|
margin-top: 10px;
|
}
|
}
|
|
.btnBox {
|
width: 210px;
|
height: 33px;
|
//background-color: pink;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
|
.btnDivClass {
|
background-color: #2f4589;
|
color: #fff;
|
}
|
|
.btnDiv {
|
width: 100px;
|
height: 33px;
|
border-radius: 5px;
|
border: 1px solid #ebeef5;
|
display: flex;
|
margin-right: 5px;
|
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
font-size: 14px;
|
cursor: pointer;
|
span :nth-child(2) {
|
color: #f04844;
|
}
|
}
|
|
.elFormDiv {
|
width: 100%;
|
height: 100px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
|
.searchFormDiv {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
|
.searchBtnDiv {
|
//width: 20%;
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
}
|
}
|
|
.tableBox {
|
width: 100%;
|
// height: 61vh;
|
margin-top: 20px;
|
// border: 1px solid #f2f2f2;
|
|
display: flex;
|
flex-direction: column;
|
// align-items: center;
|
justify-content: space-between;
|
//margin: -1px;
|
|
.tableDiv {
|
width: 100%;
|
height: 100%;
|
margin: auto 0 auto auto;
|
// box-shadow: 0 5px 5px rgba(223, 223, 223, 0.3); // 下
|
.rowBtnDiv {
|
width: 100%;
|
//height: 50px;
|
//background-color: pink;
|
display: flex;
|
justify-content: center;
|
.normal-btn {
|
//width: 30px;
|
font-size: 14px;
|
padding: 5px 2px !important;
|
}
|
}
|
}
|
|
.paginationDiv {
|
margin-top: 10px;
|
}
|
}
|
|
.buttonDiv {
|
width: 100%;
|
height: 33px;
|
}
|
}
|
.form-item {
|
margin-top: 9px;
|
margin-bottom: 0px;
|
margin-right: 10px;
|
}
|
.numjx {
|
padding-right: 5px;
|
}
|
</style>
|
<style>
|
.info-popover {
|
width: 240px;
|
}
|
</style>
|
|
