<template>
|
<div class="bodyBoxParent">
|
<!-- 产品提报-->
|
<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>
|
</div>
|
<div class="searchBtn"></div>
|
</div>
|
<div class="buttonDiv">
|
<el-row>
|
<el-col :span="6">
|
<!-- v-auth="['submission:product:create', 'auth-btn']" -->
|
<el-button
|
type="primary"
|
icon="CirclePlus"
|
@click="addDataInformation"
|
>新增产品提报
|
</el-button>
|
</el-col>
|
<el-col :span="18" align="right">
|
<div class="btnBox">
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: state.btnClassShow == 5 }"
|
@click="btnClick(5)"
|
>
|
<span class="numjx">全部</span>
|
<span> {{ state.numCountSum }} </span>
|
</div>
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: state.btnClassShow == 4 }"
|
@click="btnClick(4)"
|
>
|
<span class="numjx">草稿箱</span>
|
<span>{{ state.approStatus4 }}</span>
|
</div>
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: state.btnClassShow == 3 }"
|
@click="btnClick(3)"
|
>
|
<span class="numjx">已驳回</span>
|
<span>{{ state.approStatus3 }}</span>
|
</div>
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: state.btnClassShow == 2 }"
|
@click="btnClick(2)"
|
>
|
<span class="numjx">已通过</span>
|
<span>{{ state.approStatus2 }}</span>
|
</div>
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: state.btnClassShow == 1 }"
|
@click="btnClick(1)"
|
>
|
<span class="numjx">审批中</span>
|
<span>{{ state.approStatus1 }}</span>
|
</div>
|
<div
|
class="btnDiv"
|
:class="{ btnDivClass: state.btnClassShow == 0 }"
|
@click="btnClick(0)"
|
>
|
<span class="numjx">待审批</span>
|
<span>{{ state.approStatus0 }}</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',
|
}"
|
@selection-change="handleSelectionChange"
|
>
|
<!-- <el-table-column align="center" type="selection" width="55"/>-->
|
<el-table-column
|
align="center"
|
prop="name"
|
label="产品名称"
|
min-width="100"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="industrialChainName"
|
label="行业领域"
|
width="140"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="importantAreaName"
|
label="单位工程"
|
min-width="100"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="technologyTypeName"
|
label="产品技术类型"
|
width="120"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="typeName"
|
label="产品业务类型"
|
width="160"
|
show-overflow-tooltip
|
>
|
<template #default="scope">
|
{{scope.row.businessTypeFirstName }} / {{ scope.row.businessTypeName }} / {{ scope.row.businessTypeThirdName }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="businessProcessName"
|
label="产业阶段"
|
width="120"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="submissionUnit"
|
label="提报单位"
|
min-width="100"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="createTime"
|
label="提报时间"
|
width="165"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="approStatusName"
|
label="状态"
|
width="90"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column align="center" label="操作" width="160">
|
<template #default="scope">
|
<div class="rowBtnDiv">
|
<el-button
|
v-if="isVisitEdit(scope.row)"
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
text
|
@click="editRow(scope.row)"
|
>编辑
|
</el-button>
|
<!-- v-auth="['submission:product:delete', 'auth-btn']" -->
|
<el-button
|
class="normal-btn"
|
type="danger"
|
size="small"
|
plain
|
text
|
v-if="isVisitEdit(scope.row)"
|
@click="deleteRow(scope.row)"
|
>删除
|
</el-button>
|
<!-- v-auth="['submission:product:detail', 'auth-btn']" -->
|
<el-button
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
text
|
@click="viewRow(scope.row)"
|
>查看
|
</el-button>
|
<!-- v-auth="['submission:product:revocate', 'auth-btn']" -->
|
<el-button
|
v-if="isVisitWithdraw(scope.row)"
|
class="normal-btn"
|
type="primary"
|
size="small"
|
plain
|
|
text
|
@click="handleSetWithdraw(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: 'meritRatingManage',
|
}
|
</script>
|
<script setup lang="ts">
|
import router from '@/router'
|
import {returnProductDetailPath} from '@/utils/common'
|
import { ElMessageBox, ElNotification } from 'element-plus'
|
import productService from '@/api/zhongjian/productApi' // 接口文件
|
import moment from 'moment'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import Base64 from '@/utils/base64'
|
interface parameterListDataType {
|
id?: string
|
parameterCode: string //
|
parameterName: string //
|
sort: number
|
}
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
const indusreialAreaRef=ref()
|
const userRoles = ref()
|
const state = reactive<any>({
|
terminalCategoryName: '', // 点击的名字
|
parentGroupId: '',
|
classifyLeftTreeListData: [],
|
tableListData: [],
|
pageConfig: {
|
current: 1,
|
size: 10,
|
total: 0,
|
},
|
btnClassShow: 5,
|
approStatus0: 0, // 待审批
|
approStatus1: 0, // 审批中
|
approStatus2: 0, // 已通过
|
approStatus3: 0, // 已驳回
|
approStatus4: 0, // 草稿箱
|
approStatus5: 0, // 全部
|
directionData: [], // 行业领域下拉
|
regionData: [], // 单位工程下拉
|
productTypeData: [], // 产品类型下拉
|
productTypeChildData: [], // 产品类型子级下拉
|
numCountSum: 0,
|
pageTypeData: 'option', // 上传组件类型
|
userId:userStore.getUserId,
|
productTechnologyCategory:[],
|
productBusinessCategory:[]
|
})
|
// 全选
|
const selectIdArr = ref<string[]>([])
|
const handleSelectionChange = (val: any) => {
|
selectIdArr.value = val && val.map((item:any) => item.id)
|
}
|
// 编辑按钮是可用
|
const isVisitEdit=computed(()=>{
|
return function(item:any){
|
if(item.approStatus==4
|
||item.approStatus==3
|
||userRoles.value.includes('unit-admin')>0
|
||userRoles.value.includes('sys-admin')>0
|
||state.userId=='1'
|
){
|
return true
|
}else{
|
return false
|
}
|
}
|
})
|
// 是否展示撤回
|
const isVisitWithdraw=computed(()=>{
|
return function(item:any){
|
if(item.approStatus==0
|
&&item.createUserId==state.userId
|
){
|
return true
|
}else{
|
return false
|
}
|
}
|
})
|
const searchFormRef = ref<any>()
|
const searchData = reactive<any>({
|
approStatus: '', // 审核状态
|
name: '', // 方案名称
|
industrialChainId: '', // 行业领域
|
importantAreaId: '', // 单位工程
|
importantAreaIdList: [], // 单位工程三级
|
importantDistrictIdList:[], // 单位工程二级
|
typeId: '', // 产品类型
|
typeChildIdList: [], // 产品类型子级
|
startDate: '', // 年度开始时间
|
endDate: '', // 年度结束时间
|
technologyTypeId:'',
|
businessTypeFirstId:'',
|
businessTypeId:'',
|
businessTypeThirdId:'',
|
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 getImportantDistrictIdList=(obj:any)=>{
|
searchData.industrialChainId=obj.industrialChainId
|
searchData.importantDistrictIdList=obj.importantDistrictIdList
|
searchData.importantAreaIdList=obj.importantAreaIdList
|
}
|
|
const handleSetWithdraw = (row: any) => {
|
ElMessageBox.confirm('确定要撤回吗?', '提醒', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
productService.setWithdraw({ id: row.id }).then((res: any) => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '撤回成功！',
|
})
|
// 更新
|
updataFun()
|
} else {
|
}
|
})
|
})
|
.catch(() => {})
|
}
|
const restClick = () => {
|
searchData.name = '' // 方案名称
|
searchData.industrialChainId = '' // 行业领域
|
searchData.importantAreaId = '' // 单位工程
|
searchData.importantAreaIdList = [] // 单位工程
|
state.regionData = []
|
searchData.typeId = '' // 产品类型
|
searchData.typeChildIdList = [] // 产品类型子级
|
state.productTypeChildData = []
|
searchData.dateValue = ''
|
searchData.startDate = ''
|
searchData.endDate = ''
|
searchData.importantDistrictIdList=[] // 单位工程二级
|
searchData.technologyTypeId=''
|
searchData.businessTypeFirstId=''
|
searchData.businessTypeId=''
|
searchData.businessTypeThirdId=''
|
searchData.businessTypeIdCopy=''
|
searchData.page = {
|
current: 1,
|
size: 10,
|
total: 0,
|
}
|
state.btnClassShow = 5
|
searchData.approStatus = 5
|
indusreialAreaRef.value.clearData()
|
businessTypeIdRef.value.clearData()
|
// 获取数据
|
getListDataFun()
|
}
|
// 更新数据
|
const updataFun = () => {
|
// 获取数据
|
getListDataFun()
|
}
|
|
// 关于新增弹出框数据
|
interface customerDataType {
|
title: string
|
informationEditType: string
|
id?: string | number
|
backPath?:string
|
flowId?:string
|
token?:string
|
createUserId:string
|
}
|
|
const informationDialogData = reactive<customerDataType>({
|
title: '新增分类参数',
|
informationEditType: 'add',
|
backPath:'',
|
createUserId:''
|
})
|
|
// 新增
|
const addDataInformation = () => {
|
localStorage.setItem('addEditType3', 'add')
|
informationDialogData.informationEditType = 'add'
|
localStorage.setItem('productputid', '')
|
informationDialogData.flowId = ''
|
informationDialogData.token = ''
|
informationDialogData.backPath="/safety/performance/meritRatingManage"
|
console.log('informationDialogData',informationDialogData)
|
router.push({
|
path: "/safety/performance/meritRatingNewDetail",
|
query: {
|
info: Base64.encode(JSON.stringify(informationDialogData)),
|
},
|
})
|
}
|
|
// 编辑列表信息
|
const editRow = (row: any) => {
|
localStorage.setItem('addEditType3', 'edit')
|
informationDialogData.informationEditType = 'edit'
|
const token = userStore.getAdminToken
|
localStorage.setItem('productputid', row.id)
|
informationDialogData.id=row.id
|
informationDialogData.flowId = row.flowId
|
informationDialogData.token = token
|
informationDialogData.backPath='/safety/performance/meritRatingManage'
|
informationDialogData.createUserId = row.createUserId
|
router.push({
|
path: returnProductDetailPath(row.dataSource,'edit'),
|
query: {
|
info: Base64.encode(JSON.stringify(informationDialogData)),
|
},
|
})
|
}
|
|
// 查看列表信息
|
const viewRow = (row: any) => {
|
localStorage.setItem('addEditType3', 'view')
|
informationDialogData.informationEditType = 'view'
|
const token = userStore.getAdminToken
|
informationDialogData.id = row.id
|
informationDialogData.flowId = row.flowId
|
informationDialogData.token = token
|
informationDialogData.backPath='/safety/performance/meritRatingManage'
|
router.push({
|
path: returnProductDetailPath(row.dataSource,'view'),
|
query: {
|
info: Base64.encode(JSON.stringify(informationDialogData)),
|
},
|
})
|
}
|
|
// 删除列表信息
|
const deleteRow = (row: any) => {
|
ElMessageBox.confirm('确定要删除勾吗?', '提醒', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
productService.deleteListUrl({ id: row.id }).then((res: any) => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '删除成功！',
|
})
|
// 更新
|
updataFun()
|
} else {
|
}
|
})
|
})
|
.catch(() => {})
|
}
|
|
// 查询
|
const queryInformation = () => {
|
// 获取list数据
|
getListDataFun()
|
}
|
|
// table数据
|
const getListDataFun = () => {
|
// 处理点击的全部的值
|
if (searchData.approStatus == 5) {
|
searchData.approStatus = null
|
}
|
searchData.page = { ...state.pageConfig }
|
productService.optionListUrl({ ...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
|
|
// 获取审核数量
|
getOptionListCountFun()
|
}
|
})
|
}
|
// 获取审核数量
|
const getOptionListCountFun = () => {
|
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,
|
}
|
productService.optionListCountUrl({ ...search }).then((res: any) => {
|
if (res.code == 200) {
|
state.numCountSum = 0
|
state.approStatus0 = 0
|
state.approStatus1 = 0
|
state.approStatus2 = 0
|
state.approStatus3 = 0
|
state.approStatus4 = 0
|
state.approStatus5 = 0
|
|
// approStatus0
|
const listData = [...res.data]
|
listData.forEach((item: any) => {
|
// 全部
|
state.numCountSum += item.numCount
|
|
if (item.approStatus == '0') {
|
state.approStatus0 = item.numCount
|
}
|
if (item.approStatus == '1') {
|
state.approStatus1 = item.numCount
|
}
|
if (item.approStatus == '2') {
|
state.approStatus2 = item.numCount
|
}
|
if (item.approStatus == '3') {
|
state.approStatus3 = item.numCount
|
}
|
if (item.approStatus == '4') {
|
state.approStatus4 = item.numCount
|
}
|
if (item.approStatus == '5') {
|
state.approStatus5 = item.numCount
|
}
|
})
|
}
|
})
|
}
|
|
// 修改页码
|
const handleSizeChange = (val: number) => {
|
state.pageConfig.size = val
|
getListDataFun()
|
}
|
const handleCurrentChange = (val: number) => {
|
state.pageConfig.current = val
|
getListDataFun()
|
}
|
|
// ----------------------------------------------
|
|
const btnClick = (num?: any) => {
|
state.btnClassShow = num
|
searchData.approStatus = num
|
// 获取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 = ''
|
}
|
}
|
// 产品技术类型
|
const getProductTechnologyType=()=>{
|
productService
|
.getProductDict({
|
parentCode: 'ProductTechnologyType',
|
})
|
.then((res: any) => {
|
state.productTechnologyCategory = res.data
|
})
|
}
|
onMounted(() => {
|
userRoles.value = userStore.getRoleCodes
|
// 获取list数据
|
getListDataFun()
|
// 产品技术类型
|
getProductTechnologyType()
|
// 行业领域 单位工程联动
|
indusreialAreaRef.value.getData('product')
|
})
|
onActivated(() => {
|
// 获取list数据
|
getListDataFun()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.bodyBoxParent {
|
width: 100%;
|
//height: 700px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.searchBox {
|
width: 100%;
|
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;
|
|
// .btnDiv {
|
// width: 4vw;
|
// height: 3.5vh;
|
// font-size: 0.8vw;
|
// }
|
}
|
}
|
|
.btnBox {
|
width: 650px;
|
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;
|
line-height: 34px;
|
border-radius: 5px;
|
margin-right: 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: 50vh;
|
margin-top: 9px;
|
// border: 1px solid #dbe5ea;
|
// box-shadow: 0 5px 5px rgba(223, 223, 223, 0.3); // 下
|
display: flex;
|
flex-direction: column;
|
// align-items: center;
|
justify-content: space-between;
|
//margin: -1px;
|
|
.tableDiv {
|
width: 100%;
|
height: 100%;
|
margin: auto 0 auto auto;
|
|
.rowBtnDiv {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
flex-wrap: wrap;
|
.rowspn {
|
display: flex;
|
}
|
.normal-btn {
|
//width: 30px;
|
font-size: 14px;
|
padding: 5px 2px !important;
|
}
|
}
|
}
|
|
.paginationDiv {
|
margin-top: 10px;
|
}
|
}
|
|
.buttonDiv {
|
width: 100%;
|
height: 33px;
|
margin-top: 9px;
|
}
|
|
.hangye {
|
position: relative;
|
}
|
|
.hengDiv {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
color: #dcdfe6;
|
position: absolute;
|
top: 7%;
|
right: -22%;
|
font-size: 20px;
|
}
|
|
.hangye2 {
|
position: relative;
|
}
|
|
.hengDiv2 {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
color: #dcdfe6;
|
position: absolute;
|
top: 8%;
|
right: -13%;
|
font-size: 20px;
|
}
|
}
|
.form-item {
|
margin-top: 9px;
|
margin-bottom: 0px;
|
margin-right: 10px;
|
}
|
.numjx {
|
padding-right: 5px;
|
}
|
</style>
|
