<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.productionStageId"
|
placeholder="请选择产业阶段"
|
@change="cyjdChange"
|
@clear="productionStageIdClear"
|
>
|
<el-option
|
v-for="item in state.cyjdOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="行业板块" class="form-item">
|
<el-select
|
style="width: 220px"
|
clearable
|
v-model="searchData.businessCategoryId"
|
placeholder="请选择行业板块"
|
>
|
<el-option
|
v-for="item in state.directionData"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="相关节点" class="form-item">
|
<el-input
|
v-model="searchData.processName"
|
placeholder="请输入相关节点"
|
clearable
|
style="width: 220px"
|
/>
|
</el-form-item>
|
<el-form-item label="提交时间" class="form-item">
|
<el-date-picker
|
v-model="rangeDate"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
:disabled-date="disabledDate"
|
end-placeholder="结束日期"
|
style="width: 220px"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
clearable
|
@change="dateChange"
|
@clear="clearDate"
|
/>
|
</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 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: state.btnClassShow == 'dealwith' }"
|
@click="btnClick('dealwith')"
|
>
|
<span class="numjx">我的待办</span>
|
<span>{{ state.dealwithData }}</span>
|
</div>
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: state.btnClassShow == '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-loading="loading"
|
v-tableHeight
|
border
|
stripe
|
style="width: 100%"
|
size="large"
|
:header-cell-style="{
|
textAlign: 'center',
|
backgroundColor: '#fff',
|
color: '#333',
|
}"
|
>
|
<el-table-column
|
align="center"
|
prop="productionStage"
|
label="产业阶段"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="businessCategory"
|
label="行业板块"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="processNames"
|
label="相关节点"
|
min-width="120"
|
show-overflow-tooltip
|
>
|
<template #default="scope">
|
{{ scope.row.processNames?.join(',') }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="operateTypeNames"
|
label="操作类型"
|
min-width="70"
|
show-overflow-tooltip
|
> <template #default="scope">
|
{{ scope.row.operateTypeNames?.join(',') }}
|
</template></el-table-column>
|
<el-table-column
|
align="center"
|
prop="createBy"
|
label="申请人"
|
width="120"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="unitName"
|
label="申请单位"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="createTime"
|
label="提交时间"
|
width="170"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="approvalStatusName"
|
label="状态"
|
width="100"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column align="center" label="操作" width="160">
|
<template #default="scope">
|
<div class="rowBtnDiv">
|
<el-button
|
v-if="searchData.approvalStatus == 'dealwith'"
|
class="normal-btn"
|
type="success"
|
plain
|
text
|
@click="approverRow(scope.row)"
|
>审批
|
</el-button>
|
<el-button
|
class="normal-btn"
|
type="primary"
|
plain
|
text
|
@click="traceRow(scope.row)"
|
>追踪
|
</el-button>
|
<el-button
|
class="normal-btn"
|
type="primary"
|
plain
|
text
|
@click="viewRow(scope.row)"
|
>查看
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="paginationDiv">
|
<el-pagination
|
v-model:currentPage="state.pageConfig.current"
|
v-model:page-size="state.pageConfig.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:total="state.pageConfig.total"
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
size="small"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
export default {
|
name: 'graphAuthorizationList',
|
}
|
</script>
|
<script setup lang="ts">
|
import router from '@/router'
|
import optionService from '@/api/zhongjian/optionApi' // 接口文件
|
import mindmapService from '@/api/mindMap' // 接口文件
|
import moment from 'moment'
|
import Base64 from '@/utils/base64'
|
import { useRoute } from 'vue-router'
|
import bus from '@/utils/mitt'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
const route = useRoute()
|
const loading = ref<boolean>(false)
|
// 新增/编辑能耗费用弹窗内容
|
const informationDialog = ref()
|
interface parameterListDataType {
|
id?: string
|
parameterCode: string //
|
parameterName: string //
|
sort: number
|
}
|
const state = reactive<any>({
|
tableListData: [],
|
pageConfig: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
//--------
|
btnClassShow: 'dealwith', // class动态显示
|
directionData: [], // 行业领域下拉
|
regionData: [], // 单位工程下拉
|
dealwithData: 0, // 我的待办
|
completedData: 0, // 我的已办
|
routeData: {}, // 路由传参
|
cyjdOptions:[],
|
searchData:{
|
approvalStatus: 'dealwith', // 审核状态
|
productionStageId: '', // 产业阶段
|
businessCategoryId: '', // 行业板块
|
startDate: '', // 年度开始时间
|
endDate: '', // 年度结束时间
|
processName:'',
|
page: {
|
current: 1,
|
size: 10,
|
total: 0,
|
}
|
}
|
})
|
const { searchData }=toRefs(state)
|
|
const searchFormRef = ref<any>()
|
const rangeDate = ref()
|
const disabledDate = (time: Date) => {
|
return time.getTime() > Date.now()
|
}
|
const dateChange = (val: any) => {
|
if (val) {
|
state.searchData.startDate = val[0]
|
state.searchData.endDate = val[1]
|
} else {
|
state.searchData.startDate = ''
|
state.searchData.endDate = ''
|
}
|
}
|
const restClick = () => {
|
state.searchData={
|
productionStageId: '', // 产业阶段
|
businessCategoryId:'',//行业板块
|
approvalStatus:'dealwith',
|
startDate:'',
|
endDate:'',
|
processName:'',
|
page:{
|
current: 1,
|
size: 10,
|
total: 0,
|
}
|
}
|
state.directionData=[]
|
rangeDate.value=[]
|
state.btnClassShow = 'dealwith'
|
// 获取数据
|
getListDataFun()
|
}
|
// 查看列表信息
|
const viewRow = (row: any) => {
|
const token = userStore.getAdminToken
|
router.push({
|
path: '/approve/graphAuthorization/graphAuthorizationDetail',
|
query: {
|
info: Base64.encode(
|
JSON.stringify({
|
token:token,
|
id: row.id,
|
flowId:row.flowId,
|
taskId: row.taskId,
|
type:'view',//必传，分辨新增还是查看还是审批
|
})
|
)
|
}
|
})
|
}
|
// 更新数据
|
const updataFun = () => {
|
// 获取数据
|
getListDataFun()
|
}
|
const approverRow = (row?: any) => {
|
router.push({
|
path: '/approve/graphAuthorization/graphAuthorizationDetail',
|
query: {
|
info: Base64.encode(
|
JSON.stringify({
|
id: row.id,
|
taskId: row.taskId,
|
type:'approve',//必传，分辨新增还是查看还是审批
|
})
|
)
|
}
|
})
|
}
|
|
// 跟踪
|
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 queryInformation = () => {
|
state.pageConfig.current=1
|
// 获取list数据
|
getListDataFun()
|
}
|
// 取消按钮回调
|
const closeDialog = () => {
|
state.pageConfig.current=1
|
// 获取list数据
|
getListDataFun()
|
}
|
|
// table数据
|
const getListDataFun = () => {
|
state.searchData.page = { ...state.pageConfig }
|
loading.value=true
|
mindmapService.getAtlasProcessApprovalList({ ...state.searchData }).then((res: any) => {
|
if (res.code == 200) {
|
state.tableListData = [...res.data.records]
|
state.pageConfig.total = res.data.total
|
// 获取审核数量
|
schemeListCountUrlFun()
|
}
|
loading.value=false
|
}).catch(()=>{
|
loading.value=false
|
})
|
}
|
|
// 下拉数据-产业链方向
|
const categoryListUrlFun = () => {
|
const searchList = {
|
parentCode: 'business_direction',
|
}
|
optionService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.directionData = [...res.data]
|
}
|
})
|
}
|
// 下拉数据-产业阶段
|
const getDictCYJD = () => {
|
const searchList = {
|
parentCode: 'important_code',
|
}
|
mindmapService.getCYJDOptions({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.cyjdOptions = [...res.data]
|
}
|
})
|
}
|
// 产业链下拉点击
|
const cyjdChange = (val:any) => {
|
if(val){
|
// 重点区域
|
categoryListUrlqyFun(val)
|
}else{
|
state.directionData=[]
|
state.searchData.businessCategoryId=''
|
}
|
}
|
//产业链清空
|
const productionStageIdClear = () => {
|
state.searchData.businessCategoryId=''
|
}
|
|
// 下拉数据-行业板块
|
const categoryListUrlqyFun = (stageId:string) => {
|
const searchList = {
|
stageId:stageId,
|
level:2
|
}
|
mindmapService.getAtlasProcessByParentlevel({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.directionData = [...res.data]
|
}
|
})
|
}
|
// 获取审核数量
|
const schemeListCountUrlFun = () => {
|
const {productionStageId,businessCategoryId,processName,approvalStatus,startDate,endDate}= state.searchData
|
const search = {
|
productionStageId,
|
businessCategoryId,
|
approvalStatus,
|
startDate,
|
endDate,
|
processName,
|
}
|
mindmapService.getAtlasProcessApprovalListCount({ ...search }).then((res: any) => {
|
if (res.code == 200) {
|
state.dealwithData = res.data.dealwith
|
state.completedData = res.data.completed
|
}
|
})
|
}
|
|
// 修改页码
|
const handleSizeChange = (val: number) => {
|
state.pageConfig.size = val
|
getListDataFun()
|
}
|
const handleCurrentChange = (val: number) => {
|
state.pageConfig.current = val
|
getListDataFun()
|
}
|
// ----------------------------------------------
|
const btnClick = (type?: any) => {
|
state.btnClassShow = type
|
state.searchData.approvalStatus = type
|
// 获取list数据
|
getListDataFun()
|
}
|
// 清除时间
|
const clearDate = () => {
|
state.searchData.startDate = ''
|
state.searchData.endDate = ''
|
rangeDate.value=[]
|
}
|
|
// 用监听的写法-解决back更新数据
|
bus.on('routerBack1', (e) => {
|
// 获取list数据
|
getListDataFun()
|
})
|
|
// 用监听的写法-home跳转传参
|
bus.on('routerHomebg', (e) => {
|
// dealwith 待办
|
// completed 已办
|
|
if (e == 1) {
|
nextTick(() => {
|
state.btnClassShow = 'dealwith'
|
state.searchData.approvalStatus = 'dealwith'
|
})
|
// 获取list数据
|
// getListDataFun()
|
}
|
if (e == 2) {
|
nextTick(() => {
|
state.btnClassShow = 'completed'
|
state.searchData.approvalStatus = 'completed'
|
})
|
|
// 获取list数据
|
// getListDataFun()
|
}
|
})
|
onMounted(() => {
|
state.btnClassShow = route.query.type || 'dealwith'
|
state.searchData.approvalStatus=route.query.type || 'dealwith'
|
// 获取list数据
|
getListDataFun()
|
// 下拉数据
|
getDictCYJD()
|
})
|
onActivated(() => {
|
if(route.query.type){
|
state.btnClassShow = route.query.type
|
state.searchData.approvalStatus=route.query.type
|
}
|
// 获取list数据
|
getListDataFun()
|
})
|
onUnmounted(() => {
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.bodyBox {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.searchBox {
|
width: 100%;
|
// border-radius: 5px;
|
border: 1px solid #ebeef5;
|
// box-shadow: 0 5px 5px rgba(223, 223, 223, 0.3); // 下
|
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;
|
|
// .btnDiv {
|
// width: 4vw;
|
// height: 3.5vh;
|
// font-size: 0.8vw;
|
// }
|
}
|
}
|
|
.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;
|
margin-right: 5px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
font-size: 14px;
|
//color: #919399;
|
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 {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
}
|
}
|
|
.tableBox {
|
width: 100%;
|
// height: 61.5vh;
|
margin-top: 15px;
|
// 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;
|
display: flex;
|
justify-content: center;
|
.normal-btn {
|
//width: 30px;
|
font-size: 14px;
|
padding: 5px 2px !important;
|
}
|
}
|
}
|
|
.paginationDiv {
|
margin-top: 10px;
|
}
|
}
|
|
.buttonDiv {
|
width: 100%;
|
height: 37px;
|
}
|
}
|
.form-item {
|
margin-top: 9px;
|
margin-bottom: 0px;
|
margin-right: 10px;
|
}
|
.numjx {
|
padding-right: 5px;
|
}
|
</style>
|
<style>
|
.info-popover {
|
width: 240px;
|
}
|
</style>
|
