<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-input
|
v-model="searchData.name"
|
placeholder="请输入标杆名称"
|
clearable
|
style="width: 170px"
|
/>
|
</el-form-item>
|
<el-form-item label="行业领域" class="form-item">
|
<indusreialArea ref="indusreialAreaRef" @returnData="getImportantDistrictIdList"></indusreialArea>
|
</el-form-item>
|
<el-form-item label="标杆类型" class="form-item">
|
<el-select
|
style="width: 170px"
|
clearable
|
multiple
|
collapse-tags
|
collapse-tags-tooltip
|
v-model="searchData.typeIdList"
|
placeholder="请选择标杆类型"
|
>
|
<el-option
|
v-for="item in state.schemeTypeData"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="提报年度" class="form-item">
|
<el-date-picker
|
style="width: 170px"
|
v-model="searchData.dateValue"
|
placeholder="请选择年度"
|
type="year"
|
range-separator="-"
|
format="YYYY"
|
value-format="YYYY"
|
@change="dateChange"
|
clearable
|
@blur="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" type="selection" width="55"/>-->
|
<el-table-column
|
align="center"
|
prop="name"
|
label="标杆名称"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="industrialChainName"
|
label="行业领域"
|
width="120"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="importantAreaName"
|
label="单位工程"
|
width="120"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="typeName"
|
label="标杆类型"
|
width="120"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="submissionUnit"
|
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="approStatusName"
|
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"
|
size="small"
|
plain
|
text
|
@click="submitRow(scope.row)"
|
>审批
|
</el-button>
|
|
<!-- v-auth="['approval:scheme:trace', 'auth-btn']" -->
|
<el-button
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
text
|
@click="traceRow(scope.row)"
|
>追踪
|
</el-button>
|
<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="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: 'schemeApproval',
|
}
|
</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 { ElMessageBox, ElNotification } from 'element-plus'
|
import optionService from '@/api/zhongjian/optionApi' // 接口文件
|
import approvalService from '@/api/zhongjian/approvalApi' // 接口文件
|
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动态显示
|
schemeTypeData: [], // 标杆类型下拉
|
dealwithData: 0, // 我的待办
|
completedData: 0, // 我的已办
|
routeData: {}, // 路由传参
|
})
|
const indusreialAreaRef=ref()
|
|
const searchFormRef = ref<any>()
|
const searchData = reactive<any>({
|
approvalStatus: 'dealwith', // 审核状态
|
name: '', // 方案名称
|
industrialChainId: '', // 行业领域方向
|
importantAreaIdList: [], // 单位工程
|
importantDistrictIdList:[],
|
startDate: '', // 年度开始时间
|
endDate: '', // 年度结束时间
|
typeIdList: [], // 标杆类型
|
page: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
})
|
|
const restClick = () => {
|
searchData.name = '' // 方案名称
|
searchData.industrialChainId = '' // 行业领域
|
searchData.importantAreaIdList = [] // 单位工程
|
searchData.importantDistrictIdList=[]
|
searchData.dateValue = ''
|
searchData.startDate = ''
|
searchData.endDate = ''
|
searchData.typeIdList = [] // 标杆类型
|
searchData.page = {
|
current: 1,
|
size: 10,
|
total: 0,
|
}
|
indusreialAreaRef.value.clearData()
|
|
state.regionData=[]
|
state.btnClassShow = 'dealwith'
|
searchData.approvalStatus = 'dealwith'
|
|
// 获取数据
|
getListDataFun()
|
}
|
const getImportantDistrictIdList=(obj:any)=>{
|
searchData.industrialChainId=obj.industrialChainId
|
searchData.importantDistrictIdList=obj.importantDistrictIdList
|
searchData.importantAreaIdList=obj.importantAreaIdList
|
}
|
// 查看列表信息
|
const viewRow = (row: any) => {
|
const token = userStore.getAdminToken
|
let objInfo:any={
|
token:token,
|
flowId:row.flowId,
|
id: row.id,
|
informationEditType:'view',
|
backPath:'/approve/schemeManage/schemeApproval'
|
}
|
router.push({
|
path: '/safety/optionPutManage/optionPutNewDetail',
|
query: {
|
info: Base64.encode(JSON.stringify(objInfo)),
|
},
|
})
|
}
|
// 更新数据
|
const updataFun = () => {
|
// 获取数据
|
getListDataFun()
|
}
|
|
// 标杆审批
|
const submitRow = (row?: any) => {
|
router.push({
|
path: '/approve/approveDetails',
|
query: {
|
info: Base64.encode(
|
JSON.stringify({
|
name: '标杆',
|
id: row.id,
|
taskId: row.taskId, // 任务id
|
informationEditType:'approver',//必传，分辨新增还是查看
|
})
|
),
|
},
|
})
|
}
|
|
// 跟踪
|
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 = () => {
|
searchData.page = { ...state.pageConfig }
|
loading.value=true
|
approvalService.schemeTableListUrl({ ...searchData }).then((res: any) => {
|
if (res.code == 200) {
|
state.tableListData = [...res.data.records]
|
state.pageConfig.current = res.data.current
|
state.pageConfig.size = res.data.size
|
state.pageConfig.total = res.data.total
|
// 获取审核数量
|
schemeListCountUrlFun()
|
}
|
loading.value=false
|
}).catch(()=>{
|
loading.value=false
|
})
|
}
|
// 下拉数据-标杆类型方向
|
const schemeTypeDataFun = () => {
|
const searchList = {
|
parentCode: 'scheme_type',
|
}
|
optionService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.schemeTypeData = [...res.data]
|
}
|
})
|
}
|
|
// 获取审核数量
|
const schemeListCountUrlFun = () => {
|
const search = {
|
name: searchData.name,
|
industrialChainId: searchData.industrialChainId,
|
importantDistrictIdList: searchData.importantDistrictIdList,
|
importantAreaIdList: searchData.importantAreaIdList,
|
typeIdList: searchData.typeIdList,
|
startDate: searchData.startDate,
|
endDate: searchData.endDate,
|
}
|
approvalService.schemeListCountUrl({ ...search }).then((res: any) => {
|
if (res.code == 200) {
|
// dealwithData
|
// completedData
|
res.data.forEach((item:any) => {
|
if (item.approvalStatus == 'dealwith') {
|
state.dealwithData = item.numCount
|
}
|
if (item.approvalStatus == 'completed') {
|
state.completedData = item.numCount
|
}
|
})
|
}
|
})
|
}
|
|
// 修改页码
|
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
|
searchData.approvalStatus = type
|
// 获取list数据
|
getListDataFun()
|
}
|
|
// 选择日期change
|
const dateChange = (val?: any) => {
|
const currentYear = moment().format('YYYY')
|
const currentDate = moment().format('YYYY-MM-DD')
|
|
if (val == currentYear) {
|
searchData.startDate = `${val}-01-01`
|
searchData.endDate = currentDate
|
return
|
}
|
|
if (val != currentYear) {
|
searchData.startDate = `${val}-01-01`
|
searchData.endDate = `${val}-12-31`
|
return
|
}
|
}
|
|
// 清除时间
|
const clearDate = () => {
|
if (!searchData.dateValue) {
|
searchData.startDate = ''
|
searchData.endDate = ''
|
}
|
}
|
|
// 用监听的写法-解决back更新数据
|
bus.on('routerBack1', (e) => {
|
// 获取list数据
|
getListDataFun()
|
})
|
|
// 用监听的写法-home跳转传参
|
bus.on('routerHomebg', (e) => {
|
// dealwith 待办
|
// completed 已办
|
|
if (e == 1) {
|
nextTick(() => {
|
state.btnClassShow = 'dealwith'
|
searchData.approvalStatus = 'dealwith'
|
})
|
// 获取list数据
|
// getListDataFun()
|
}
|
if (e == 2) {
|
nextTick(() => {
|
state.btnClassShow = 'completed'
|
searchData.approvalStatus = 'completed'
|
})
|
|
// 获取list数据
|
// getListDataFun()
|
}
|
})
|
|
onBeforeMount(() => {})
|
|
onMounted(() => {
|
// 获取list数据
|
getListDataFun()
|
// 下拉数据-标杆类型
|
schemeTypeDataFun()
|
indusreialAreaRef.value.getData('benchmark')
|
})
|
onActivated(() => {
|
// 获取list数据
|
getListDataFun()
|
})
|
onUnmounted(() => {
|
// bus.off("routerHomebg")
|
})
|
</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>
|
