<template>
|
<div class="bodyBox">
|
<!-- 产品审批-->
|
<div class="searchBox">
|
<div class="formDiv">
|
<el-form
|
:inline="true"
|
:model="searchData"
|
ref="searchFormRef"
|
label-width="100px"
|
>
|
<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
|
v-model="searchData.technologyTypeId"
|
placeholder="请选择产品技术类型"
|
>
|
<el-option
|
v-for="item in state.productTechnologyCategory"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产品业务类型" class="form-item">
|
<businessTypeTreeSelect ref="businessTypeIdRef" @treeChange="getBusinessTypeIdChange"></businessTypeTreeSelect>
|
</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-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.productTypeChildData"-->
|
<!-- :key="item.id"-->
|
<!-- :label="item.name"-->
|
<!-- :value="item.id"-->
|
<!-- />-->
|
<!-- </el-select>-->
|
<!-- </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
|
min-width="140"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="industrialChainName"
|
label="行业领域"
|
show-overflow-tooltip
|
min-width="120"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="importantAreaName"
|
label="单位工程"
|
show-overflow-tooltip
|
min-width="120"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="typeName"
|
show-overflow-tooltip
|
label="产品类型"
|
min-width="120"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="submissionUnit"
|
label="提报单位"
|
show-overflow-tooltip
|
min-width="140"
|
></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="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:product: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:product:trace', 'auth-btn']" -->
|
<el-button
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
text
|
@click="traceRow(scope.row)"
|
>追踪
|
</el-button>
|
<!-- v-auth="['approval:product: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: 'productApproval',
|
}
|
</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 approvalService from '@/api/zhongjian/approvalApi' // 接口文件
|
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'
|
import {returnProductDetailPath} from '@/utils/common'
|
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
const route = useRoute()
|
|
const loading = ref<boolean>(false)
|
|
const state = reactive<any>({
|
tableListData: [],
|
pageConfig: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
//--------
|
btnClassShow: 'dealwith', // class动态显示
|
directionData: [], // 行业领域下拉
|
regionData: [], // 单位工程下拉
|
productTypeData: [], // 产品类型下拉
|
productTypeChildData: [], // 产品类型子级下拉
|
pageTypeData: 'option', // 上传组件类型
|
dealwithData: 0, // 我的待办
|
completedData: 0, // 我的已办
|
productTechnologyCategory:[]
|
})
|
const indusreialAreaRef=ref()
|
const searchFormRef = ref<any>()
|
const searchData = reactive<any>({
|
approvalStatus: 'dealwith', // 审核状态
|
name: '', // 方案名称
|
industrialChainId: '', // 行业领域
|
importantAreaId: '', // 单位工程
|
importantAreaIdList: [], // 单位工程
|
importantDistrictIdList:[],
|
technologyTypeId:'',
|
businessTypeFirstId:'',
|
businessTypeId:'',
|
businessTypeThirdId:'',
|
startDate: '', // 年度开始时间
|
endDate: '', // 年度结束时间
|
page: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
})
|
const businessTypeIdRef=ref()
|
const getBusinessTypeIdChange=(data:any)=>{
|
searchData.businessTypeFirstId=data.businessTypeFirstId
|
searchData.businessTypeId=data.businessTypeId
|
searchData.businessTypeThirdId=data.businessTypeThirdId
|
}
|
// 查看列表信息
|
const viewRow = (row: any) => {
|
const token = userStore.getAdminToken
|
let objInfo:any={
|
token:token,
|
flowId:row.flowId,
|
id: row.id,
|
informationEditType:'view',
|
backPath:'/approve/productManage/productApproval'
|
}
|
router.push({
|
path:returnProductDetailPath(row.dataSource,'view'),
|
query: {
|
info: Base64.encode(JSON.stringify(objInfo)),
|
},
|
})
|
}
|
const restClick = () => {
|
searchData.name = '' // 方案名称
|
searchData.industrialChainId = '' // 行业领域
|
searchData.importantAreaId = '' // 单位工程
|
searchData.importantAreaIdList = [] // 单位工程
|
searchData.importantDistrictIdList=[] // 单位工程二级
|
searchData.typeId = '' // 产品类型
|
searchData.typeChildIdList = [] // 产品类型子级
|
searchData.dateValue = ''
|
searchData.startDate = ''
|
state.regionData=[]
|
state.productTypeChildData=[]
|
searchData.technologyTypeId=''
|
searchData.businessTypeFirstId=''
|
searchData.businessTypeId=''
|
searchData.businessTypeThirdId=''
|
searchData.businessTypeIdCopy=''
|
searchData.endDate = ''
|
searchData.page = {
|
current: 1,
|
size: 10,
|
total: 0,
|
}
|
indusreialAreaRef.value.clearData()
|
businessTypeIdRef.value.clearData()
|
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
|
dataSource:row.dataSource,
|
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 = () => {
|
// 获取list数据
|
getListDataFun()
|
}
|
// 取消按钮回调
|
const closeDialog = () => {
|
// 获取list数据
|
getListDataFun()
|
}
|
|
// table数据
|
const getListDataFun = () => {
|
searchData.page = { ...state.pageConfig }
|
loading.value=true
|
approvalService.productTableListUrl({ ...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
|
// 获取审核数量
|
productListCountUrlFun()
|
}
|
loading.value=false
|
}).catch(()=>{
|
loading.value=false
|
})
|
}
|
const getImportantDistrictIdList=(obj:any)=>{
|
searchData.industrialChainId=obj.industrialChainId
|
searchData.importantDistrictIdList=obj.importantDistrictIdList
|
searchData.importantAreaIdList=obj.importantAreaIdList
|
}
|
|
// 获取审核数量
|
const productListCountUrlFun = () => {
|
const search = {
|
name: searchData.name,
|
industrialChainId: searchData.industrialChainId,
|
importantAreaId: searchData.importantAreaId,
|
importantAreaIdList: searchData.importantAreaIdList,
|
importantDistrictIdList: searchData.importantDistrictIdList,
|
typeId: searchData.typeId,
|
typeChildIdList: searchData.typeChildIdList,
|
startDate: searchData.startDate,
|
endDate: searchData.endDate,
|
businessTypeFirstId: searchData.businessTypeFirstId,
|
businessTypeId: searchData.businessTypeId,
|
businessTypeThirdId: searchData.businessTypeThirdId,
|
technologyTypeId: searchData.technologyTypeId,
|
}
|
approvalService.productListCountUrl({ ...search }).then((res: any) => {
|
if (res.code == 200) {
|
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 = ''
|
}
|
}
|
|
// 用监听的写法-解决页面滚动问题-未触底
|
bus.on('routerBack3', (e) => {
|
// 获取list数据
|
getListDataFun()
|
})
|
|
// 用监听的写法-home跳转传参
|
bus.on('routerHomecp', (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()
|
})
|
}
|
})
|
// 产品技术类型
|
const getProductTechnologyType=()=>{
|
productService
|
.getProductDict({
|
parentCode: 'ProductTechnologyType',
|
})
|
.then((res: any) => {
|
state.productTechnologyCategory = res.data
|
})
|
}
|
onMounted(() => {
|
// 获取list数据
|
getListDataFun()
|
// 下拉数据-行业领域 单位工程联动
|
indusreialAreaRef.value.getData('product')
|
// 下拉数据-产品类型
|
getProductTechnologyType()
|
})
|
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%;
|
// height: 110px;
|
// border-radius: 5px;
|
border: 1px solid #dbe5ea;
|
// 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;
|
}
|
}
|
|
.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: 60.6vh;
|
margin-top: 20px;
|
|
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%;
|
display: flex;
|
justify-content: center;
|
//height: 50px;
|
//background-color: pink;
|
|
.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>
|
