<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="单位工程:">-->
|
<!-- <el-select-->
|
<!-- style="width: 200px;"-->
|
<!-- clearable-->
|
<!-- multiple-->
|
<!-- collapse-tags-->
|
<!-- collapse-tags-tooltip-->
|
<!-- v-model="searchData.importantAreaIdList"-->
|
<!-- placeholder="请选择单位工程"-->
|
<!-- >-->
|
<!-- <el-option-->
|
<!-- v-for="item in state.regionData"-->
|
<!-- :key="item.id"-->
|
<!-- :label="item.name"-->
|
<!-- :value="item.id"-->
|
<!-- />-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<!-- <br /> -->
|
<el-form-item label="知识类型" class="form-item">
|
<!-- <el-col :span="12"> -->
|
<el-select
|
style="width: 170px; margin-right: 10px"
|
clearable
|
v-model="searchData.typeId"
|
placeholder="请选择知识类型"
|
@change="typeIdChange"
|
@clear="typeIdClear"
|
>
|
<el-option
|
v-for="item in state.resultTypeData"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
<!-- </el-col>
|
<el-col :span="12"> -->
|
<el-select
|
style="width: 170px"
|
clearable
|
multiple
|
collapse-tags
|
collapse-tags-tooltip
|
v-model="searchData.typeChildIdList"
|
placeholder="请选择知识类型子级"
|
>
|
<el-option
|
v-for="item in state.resultTypeChildData"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
<!-- </el-col> -->
|
</el-form-item>
|
<!-- <el-form-item label="知识类型子级:">-->
|
<!-- <el-select-->
|
<!-- style="width: 200px;"-->
|
<!-- clearable-->
|
<!-- multiple-->
|
<!-- collapse-tags-->
|
<!-- collapse-tags-tooltip-->
|
<!-- v-model="searchData.typeChildIdList"-->
|
<!-- placeholder="请选择知识类型子级"-->
|
<!-- >-->
|
<!-- <el-option-->
|
<!-- v-for="item in state.resultTypeChildData"-->
|
<!-- :key="item.id"-->
|
<!-- :label="item.name"-->
|
<!-- :value="item.id"-->
|
<!-- />-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="产业阶段:" class="treeSelectDiv">-->
|
<!-- <el-select-->
|
<!-- style="width: 213px;"-->
|
<!-- clearable-->
|
<!-- v-model="searchData.businessProcessId"-->
|
<!-- placeholder="请选择产业阶段"-->
|
<!-- >-->
|
<!-- <el-option-->
|
<!-- v-for="item in state.companyListType"-->
|
<!-- :key="item.id"-->
|
<!-- :label="item.name"-->
|
<!-- :value="item.id"-->
|
<!-- @change="importantAreaIdListch(item.id)"-->
|
<!-- />-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="场景方向:">-->
|
<!-- <el-select-->
|
<!-- style="width: 200px;"-->
|
<!-- clearable-->
|
<!-- v-model="searchData.sceneId"-->
|
<!-- placeholder="请选择场景方向"-->
|
<!-- >-->
|
<!-- <el-option-->
|
<!-- v-for="item in state.selectDatacjfx"-->
|
<!-- :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" style="z-index: 99">
|
<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="行业领域"
|
show-overflow-tooltip
|
width="120"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="importantAreaName"
|
label="单位工程"
|
show-overflow-tooltip
|
width="120"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="typeName"
|
label="知识类型"
|
show-overflow-tooltip
|
width="120"
|
></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"
|
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="['approval:result:approval', 'auth-btn']" -->
|
<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:result:trace', 'auth-btn']" -->
|
<el-button
|
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
text
|
@click="traceRow(scope.row)"
|
>追踪
|
</el-button>
|
|
<!-- v-auth="['approval:result: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="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: 'resultApproval',
|
}
|
</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 achievementService from '@/api/zhongjian/achievementApi' // 接口文件
|
import approvalService from '@/api/zhongjian/approvalApi' // 接口文件
|
import type { FormInstance } from 'element-plus'
|
import moment from 'moment'
|
import Base64 from '@/utils/base64'
|
import bus from '@/utils/mitt'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
const state = reactive<any>({
|
tableListData: [],
|
pageConfig: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
//--------
|
btnClassShow: 'dealwith', // class动态显示
|
directionData: [], // 行业领域下拉
|
regionData: [], // 单位工程下拉
|
resultTypeData: [], // 知识类型下拉
|
resultTypeChildData: [], // 知识类型子级下拉
|
// companyListType: [], // 产业阶段下拉
|
// regionData: [], // 场景方向下拉
|
dealwithData: 0, // 我的待办
|
completedData: 0, // 我的已办
|
})
|
const indusreialAreaRef=ref()
|
const searchFormRef = ref<any>()
|
const searchData = reactive<any>({
|
parentId: '', // 左侧id
|
approvalStatus: 'dealwith', // 审核状态
|
name: '', // 方案名称
|
industrialChainId: '', // 行业领域
|
importantAreaIdList: [], // 单位工程
|
importantDistrictIdList:[],
|
typeId: '', // 知识类型
|
typeChildIdList: [], // 知识类型子级
|
// businessProcessId: '', // 产业阶段
|
// sceneId: '', // 场景方向
|
// dateValue: '', // 开始结束日期年度
|
startDate: '', // 年度开始时间
|
endDate: '', // 年度结束时间
|
page: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
})
|
const loading=ref()
|
const restClick = () => {
|
searchData.parentId = '' // 左侧id
|
searchData.name = '' // 方案名称
|
searchData.industrialChainId = '' // 行业领域
|
searchData.importantDistrictIdList=[]
|
searchData.dateValue = ''
|
searchData.startDate = ''
|
searchData.endDate = ''
|
state.directionData=[]
|
searchData.importantAreaIdList=[]
|
searchData.typeId=''
|
searchData.typeChildIdList=[]
|
state.resultTypeChildData=[]
|
indusreialAreaRef.value.clearData()
|
|
searchData.page = {
|
current: 1,
|
size: 10,
|
total: 0,
|
}
|
|
state.btnClassShow = 'dealwith'
|
searchData.approvalStatus = 'dealwith'
|
|
// 获取数据
|
getListDataFun()
|
}
|
|
// 更新数据
|
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 getImportantDistrictIdList=(obj:any)=>{
|
searchData.industrialChainId=obj.industrialChainId
|
searchData.importantDistrictIdList=obj.importantDistrictIdList
|
searchData.importantAreaIdList=obj.importantAreaIdList
|
}
|
// 跟踪
|
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 objInfo:any={
|
token:token,
|
flowId:row.flowId,
|
id: row.id,
|
informationEditType:'view',
|
backPath:'/approve/resultManage/resultApproval'
|
}
|
router.push({
|
path: '/safety/safetyArchive/fileBoxNewDetail',
|
query: {
|
info: Base64.encode(JSON.stringify(objInfo)),
|
},
|
})
|
}
|
// 查询
|
const queryInformation = () => {
|
// 获取list数据
|
getListDataFun()
|
}
|
// 取消按钮回调
|
const closeDialog = () => {
|
// 获取list数据
|
getListDataFun()
|
}
|
|
// table数据
|
const getListDataFun = () => {
|
searchData.page = { ...state.pageConfig }
|
loading.value=true
|
approvalService.resultTableListUrl({ ...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
|
// 获取审核数量
|
resultListCountUrlFun()
|
}
|
loading.value=false
|
}).catch(()=>{
|
loading.value=false
|
})
|
}
|
// 产业阶段下拉数据
|
const companyListUrlFun = () => {
|
const searchList = {
|
parentCode: 'important_code',
|
}
|
achievementService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.companyListType = [...res.data]
|
}
|
})
|
}
|
|
// 产业阶段下拉点击
|
const importantAreaIdListch = (id?: any) => {
|
searchData.businessProcessId = id // 产业阶段
|
}
|
|
// 下拉数据-场景方向
|
const cjfxListUrlqyFun = () => {
|
const searchList = {
|
parentCode: 'scope_code',
|
}
|
achievementService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.regionData = [...res.data]
|
}
|
})
|
}
|
|
// 下拉数据-知识类型方向
|
const resultTypeDataFun = () => {
|
const searchList = {
|
parentCode: 'result_type',
|
}
|
achievementService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.resultTypeData = [...res.data]
|
}
|
})
|
}
|
|
// 知识类型change
|
const typeIdChange = () => {
|
// 下拉数据-知识类型子级清空
|
searchData.typeChildIdList = []
|
state.resultTypeChildData = []
|
if (searchData.typeId != '') {
|
// 下拉数据-知识类型子级
|
resultTypeChildDataFun()
|
}
|
}
|
// 知识类型清空
|
const typeIdClear = () => {
|
// 下拉数据-知识类型子级清空
|
searchData.typeChildIdList = []
|
state.resultTypeChildData = []
|
}
|
|
// 下拉数据-知识类型子级
|
const resultTypeChildDataFun = () => {
|
const searchList = {
|
parentId: searchData.typeId,
|
}
|
achievementService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.resultTypeChildData = [...res.data]
|
}
|
})
|
}
|
|
// 获取审核数量
|
const resultListCountUrlFun = () => {
|
const search = {
|
name: searchData.name,
|
industrialChainId: searchData.industrialChainId,
|
importantAreaIdList: searchData.importantAreaIdList,
|
importantDistrictIdList: searchData.importantDistrictIdList,
|
typeId: searchData.typeId,
|
typeChildIdList: searchData.typeChildIdList,
|
startDate: searchData.startDate,
|
endDate: searchData.endDate,
|
}
|
approvalService.resultListCountUrl({ ...search }).then((res: any) => {
|
if (res.code == 200) {
|
// dealwithData
|
// completedData
|
res.data.forEach((item) => {
|
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('routerBack2', (e) => {
|
// 获取list数据
|
getListDataFun()
|
})
|
|
// 用监听的写法-home跳转传参
|
bus.on('routerHomezs', (e) => {
|
// dealwith 待办
|
// completed 已办
|
|
if (e == 1) {
|
setTimeout(() => {
|
state.btnClassShow = 'dealwith'
|
|
searchData.approvalStatus = 'dealwith'
|
// 获取list数据
|
getListDataFun()
|
})
|
}
|
if (e == 2) {
|
setTimeout(() => {
|
state.btnClassShow = 'completed'
|
|
searchData.approvalStatus = 'completed'
|
// 获取list数据
|
getListDataFun()
|
})
|
}
|
})
|
onMounted(() => {
|
// 获取list数据
|
getListDataFun()
|
|
// 下拉数据-行业领域
|
indusreialAreaRef.value.getData('product')
|
|
// 下拉数据-知识类型方向
|
resultTypeDataFun()
|
|
})
|
onActivated(() => {
|
// 获取list数据
|
getListDataFun()
|
})
|
</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;
|
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 {
|
//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;
|
display: flex;
|
justify-content: center;
|
.normal-btn {
|
//width: 30px;
|
font-size: 14px;
|
padding: 5px 2px !important;
|
}
|
}
|
}
|
|
.paginationDiv {
|
margin-top: 10px;
|
}
|
}
|
}
|
|
.treeSelectDiv {
|
width: 300px;
|
height: 40px;
|
z-index: 100;
|
}
|
|
.buttonDiv {
|
width: 100%;
|
height: 33px;
|
}
|
.form-item {
|
margin-top: 9px;
|
margin-bottom: 0px;
|
margin-right: 10px;
|
}
|
.numjx {
|
padding-right: 5px;
|
}
|
</style>
|
