546 lines
17 KiB
Vue
546 lines
17 KiB
Vue
<template>
|
||
<!-- 预警区域 -->
|
||
<div class="warning-wrapper">
|
||
<!-- tab切换 -->
|
||
<a-tabs type="card" class="card-tabs" @change="warningTabChange" size="large">
|
||
<a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.name"></a-tab-pane>
|
||
</a-tabs>
|
||
<!--这里的scroll.y必须有，后面用媒体查询进行样式覆盖-->
|
||
<div class="table-warpper">
|
||
<a-table
|
||
ref="table"
|
||
size="middle"
|
||
:rowKey="(_, index) => index"
|
||
class="table"
|
||
:scroll="{ x: '100%', y: '40vh' }"
|
||
:columns="showColumns"
|
||
:dataSource="dataSource"
|
||
:pagination="ipagination"
|
||
@change="handleTableChange"
|
||
:loading="loading">
|
||
<template slot="text" slot-scope="text">
|
||
<a-tooltip overlay-class-name="tooltip-style">
|
||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
<!-- 标准号、标准名称 -->
|
||
<template v-slot:standard="text, record">
|
||
<a-tooltip overlay-class-name="tooltip-style">
|
||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||
<a v-if="text" class="link-a" @click="detailClick(record)">{{ text }}</a>
|
||
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
<!-- 企标号、企标名称 -->
|
||
<template v-slot:enStandard="text, record">
|
||
<a-tooltip overlay-class-name="tooltip-style">
|
||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||
<a v-if="text" class="link-a" @click="enStandardDetailClick(record)">{{ text }}</a>
|
||
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
<!-- 清单编号、清单名称 -->
|
||
<template v-slot:list="text, record">
|
||
<a-tooltip overlay-class-name="tooltip-style">
|
||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||
<a v-if="text" class="link-a" @click="listDetailClick(record)">{{ text }}</a>
|
||
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
<!-- 解读信息 -->
|
||
<template v-slot:interpretingInformation="text, record">
|
||
<a v-if="record.splitInfoId" class="link-a" @click="previewStandardResolutionSheet(record.splitInfoId)">{{ $t('view') }}</a>
|
||
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
<!-- 标准分解单-->
|
||
<standard-resolution-sheet-modal ref="standardResolutionSheetModal" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { StandardSource } from '@/enums/commonEnums'
|
||
import { getMarketRegulationsList } from '../../../api/api'
|
||
import {
|
||
getHomeNewStandard,
|
||
getNewestEnterStandard,
|
||
getNewestEnterEnStandard,
|
||
getWillImplementStandards
|
||
} from '@api/dashboard'
|
||
import StandardResolutionSheetModal
|
||
from '@views/standardRegulationLibrary/foreignStandard/detail/modules/StandardResolutionSheetModal'
|
||
|
||
export default {
|
||
name: 'SearchAndWarningCard',
|
||
components: { StandardResolutionSheetModal },
|
||
data () {
|
||
return {
|
||
tabList: [
|
||
// 最新入库标准
|
||
{ key: 'lastStorageStandards', name: this.$t('dashboard.tableList.newWarehousingStandards') },
|
||
// 市场更新情况
|
||
{ key: 'marketUpdates', name: this.$t('dashboard.tableList.marketUpdates') },
|
||
// 最新入库企标
|
||
{ key: 'lastStorageEnterpriseStandard', name: this.$t('dashboard.tableList.newWarehousingEnterpriseStandards') },
|
||
// 最新解读标准
|
||
{ key: 'latestInterpretationStandards', name: this.$t('dashboard.tableList.newInterpretationStandards') },
|
||
// 将实施标准
|
||
{ key: 'implementStandards', name: this.$t('dashboard.tableList.implementStandards') }
|
||
],
|
||
warningTab: '', // 预警当前tab
|
||
loading: false,
|
||
columns: [
|
||
{ // 标准编号(跳外标或判断)
|
||
title: this.$t('standardNumber'),
|
||
align: 'left',
|
||
dataIndex: 'standardNumber',
|
||
width: 120,
|
||
scopedSlots: { customRender: 'standard' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[0].key,
|
||
this.tabList[3].key,
|
||
this.tabList[4].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 标准名称(跳外标或判断)
|
||
title: this.$t('standardName'),
|
||
align: 'left',
|
||
dataIndex: 'standardName',
|
||
width: 180,
|
||
scopedSlots: { customRender: 'standard' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[0].key,
|
||
this.tabList[3].key,
|
||
this.tabList[4].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 标准编号(跳企标)
|
||
title: this.$t('standardNumber'),
|
||
align: 'left',
|
||
dataIndex: 'standardNumber',
|
||
width: 120,
|
||
scopedSlots: { customRender: 'enStandard' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[2].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 标准名称(跳企标)
|
||
title: this.$t('standardName'),
|
||
align: 'left',
|
||
dataIndex: 'standardName',
|
||
width: 180,
|
||
scopedSlots: { customRender: 'enStandard' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[2].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 解读信息
|
||
title: this.$t('dashboard.tableList.interpretationInfo'),
|
||
align: 'left',
|
||
dataIndex: 'interpretingInformation',
|
||
width: 180,
|
||
scopedSlots: { customRender: 'interpretingInformation' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[3].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 新生产车实施日期
|
||
title: this.$t('dashboard.advancedSearch.newProduceMaterialDate'),
|
||
align: 'left',
|
||
dataIndex: 'newProductImplDate',
|
||
width: 140,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[0].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 新认证车实施日期
|
||
title: this.$t('dashboard.advancedSearch.newAttestationMaterialDate'),
|
||
align: 'left',
|
||
dataIndex: 'newAuthImplDate',
|
||
width: 140,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[0].key,
|
||
this.tabList[4].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 发布日期
|
||
title: this.$t('dashboard.advancedSearch.releaseDate'),
|
||
align: 'left',
|
||
dataIndex: 'releaseDate',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[2].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 实施日期
|
||
title: this.$t('dashboard.advancedSearch.materialDate'),
|
||
align: 'left',
|
||
dataIndex: 'implementationDate',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[2].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 标准状态
|
||
title: this.$t('standardState'),
|
||
align: 'left',
|
||
dataIndex: 'standardState_dictText',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[0].key,
|
||
this.tabList[2].key,
|
||
this.tabList[4].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 代替标准编号
|
||
title: this.$t('dashboard.tableList.substituteStandardNumber'),
|
||
align: 'left',
|
||
dataIndex: 'substituteStandardNumber',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[2].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
// 市场更新情况start
|
||
{ // 国家/地区
|
||
title: this.$t('standardRegulationLibrary.marketRegulationsList.countryRegion'),
|
||
align: 'left',
|
||
dataIndex: 'country_dictText',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[1].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 清单编号
|
||
title: this.$t('standardRegulationLibrary.marketRegulationsList.listNumber'),
|
||
align: 'left',
|
||
dataIndex: 'manifestNo',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'list' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[1].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 清单名称
|
||
title: this.$t('standardRegulationLibrary.marketRegulationsList.listName'),
|
||
align: 'left',
|
||
dataIndex: 'manifestName',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'list' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[1].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 清单版本
|
||
title: this.$t('standardRegulationLibrary.marketRegulationsList.listVersion'),
|
||
align: 'left',
|
||
dataIndex: 'manifestVersion',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[1].key
|
||
].includes(this.warningTab)
|
||
}
|
||
},
|
||
{ // 驾驶位置
|
||
title: this.$t('standardRegulationLibrary.marketRegulationsList.drivingPosition'),
|
||
align: 'left',
|
||
dataIndex: 'drivePosition_dictText',
|
||
width: 100,
|
||
scopedSlots: { customRender: 'text' },
|
||
show: () => {
|
||
return [
|
||
this.tabList[1].key
|
||
].includes(this.warningTab)
|
||
}
|
||
}
|
||
// 市场更新情况end
|
||
],
|
||
showColumns: [],
|
||
dataSource: [],
|
||
/* 分页参数 */
|
||
ipagination: {
|
||
current: 1,
|
||
pageSize: 10,
|
||
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
|
||
showTotal: (total, range) => {
|
||
return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
|
||
},
|
||
showQuickJumper: true,
|
||
showSizeChanger: true,
|
||
total: 0
|
||
},
|
||
url: {
|
||
list: '/laws/localTool/standardEarlyWarning/newModelImplementation'
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
// 默认选中第一个
|
||
this.warningTabChange(this.tabList[0].key)
|
||
// this.loadData(1)
|
||
},
|
||
methods: {
|
||
/**
|
||
* 查看标准分解单
|
||
*/
|
||
previewStandardResolutionSheet (id) {
|
||
this.$refs.standardResolutionSheetModal.open(id)
|
||
},
|
||
// 回车跳标题检索
|
||
searchInputEnter () {
|
||
const { href } = this.$router.resolve({
|
||
path: '/generalSearch',
|
||
query: {
|
||
type: 'title',
|
||
resourceType: this.resourceType,
|
||
searchValue: this.searchValue
|
||
}
|
||
})
|
||
window.open(href, '_blank')
|
||
},
|
||
// 点击跳转到一般检索页
|
||
toSearchWindow (type) {
|
||
const { href } = this.$router.resolve({
|
||
path: '/generalSearch',
|
||
query: {
|
||
type: type,
|
||
resourceType: this.resourceType,
|
||
searchValue: this.searchValue
|
||
}
|
||
})
|
||
window.open(href, '_blank')
|
||
},
|
||
// 点击跳转到高级检索页
|
||
toAdvancedSearch () {
|
||
const { href } = this.$router.resolve({
|
||
path: '/advancedSearch'
|
||
})
|
||
window.open(href, '_blank')
|
||
},
|
||
// 预警tab切换
|
||
warningTabChange (value) {
|
||
this.dataSource = []
|
||
this.warningTab = value
|
||
this.showColumns = this.columns.filter(col => col.show ? col.show() : true).map(item => {
|
||
return Object.assign({}, item, { show: undefined })
|
||
})
|
||
this.loadData(1)
|
||
},
|
||
// 跳转详情
|
||
detailClick (record) {
|
||
let path
|
||
// 根据来源跳转不同的详情页
|
||
if (record.source) {
|
||
switch (record.source + '') {
|
||
// 外来标准
|
||
case StandardSource.FOREIGN.value:
|
||
path = '/standardRegulationLibrary/foreignStandardDetailPage'
|
||
break
|
||
// 企标
|
||
case StandardSource.ENTERPRISE.value:
|
||
path = '/enterpriseStandardLibrary/enterpriseStandardDetail'
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
} else {
|
||
// 没有来源就是外标
|
||
path = '/standardRegulationLibrary/foreignStandardDetailPage'
|
||
}
|
||
this.$openPageNewSheet({
|
||
path,
|
||
query: {
|
||
id: record.standardId || record.id
|
||
}
|
||
})
|
||
},
|
||
// 企标详情
|
||
enStandardDetailClick (record) {
|
||
this.$openPageNewSheet({
|
||
path: '/enterpriseStandardLibrary/enterpriseStandardDetail',
|
||
query: {
|
||
id: record.id
|
||
}
|
||
})
|
||
},
|
||
// 市场清单详情
|
||
listDetailClick (record) {
|
||
this.$openPageNewSheet({
|
||
path: '/standardRegulationLibrary/marketRegulationsList/marketRegulationsDetailPage',
|
||
query: {
|
||
title: this.$t('view'),
|
||
ids: record.id
|
||
}
|
||
})
|
||
},
|
||
handleTableChange (pagination) {
|
||
this.ipagination = pagination
|
||
this.loadData()
|
||
},
|
||
loadData (arg) {
|
||
// 加载数据 若传入参数1则加载第一页的内容
|
||
if (arg === 1) {
|
||
this.ipagination.current = 1
|
||
}
|
||
const params = {}// 查询条件
|
||
params.pageNo = this.ipagination.current
|
||
params.pageSize = this.ipagination.pageSize
|
||
params.columns = 'createTime'
|
||
params.order = 'desc'
|
||
this.loading = true
|
||
// TODO: 暂时没有对接接口
|
||
// let url = this.url.list
|
||
let func = null
|
||
switch (this.warningTab) {
|
||
case 'lastStorageStandards': // 最新入库标准
|
||
func = getNewestEnterStandard
|
||
break
|
||
case 'marketUpdates': // 市场更新情况
|
||
func = getMarketRegulationsList
|
||
params.manifestStatus = '1' // 已发布
|
||
params.homeFlag = '1' // 标识首页的查询
|
||
break
|
||
case 'lastStorageEnterpriseStandard': // 最新入库企标
|
||
func = getNewestEnterEnStandard
|
||
break
|
||
case 'latestInterpretationStandards': // 最新解读标准
|
||
func = getHomeNewStandard
|
||
break
|
||
case 'implementStandards': // 将实施标准
|
||
func = getWillImplementStandards
|
||
break
|
||
}
|
||
func(params).then((res) => {
|
||
if (res.success) {
|
||
this.dataSource = res.result.records || res.result
|
||
if (res.result.total) {
|
||
this.ipagination.total = res.result.total
|
||
} else {
|
||
this.ipagination.total = 0
|
||
}
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
// 预警容器
|
||
.warning-wrapper {
|
||
height: calc(100vh - 406px);
|
||
}
|
||
|
||
// tab样式
|
||
.card-tabs {
|
||
|
||
/deep/.ant-tabs-bar {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/deep/&.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
|
||
border: none;
|
||
margin-right: 10px;
|
||
border-radius: 8px 8px 0 0;
|
||
position: relative;
|
||
|
||
&:not(.ant-tabs-tab-active) {
|
||
background-color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
&.ant-tabs-tab-active::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 40px;
|
||
height: 1px;
|
||
background-color: @primary-color;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
// 预警tab切换
|
||
.tab-wrapper {
|
||
width: 664px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
// 表格样式
|
||
.table-warpper {
|
||
// 内容高度 = 该部分整体高度 - tab高度
|
||
height: calc(100% - 44px);
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
|
||
/deep/.ant-table-placeholder {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/deep/ .ant-table-thead > tr > th {
|
||
background-color: #fff;
|
||
}
|
||
|
||
/deep/ .ant-table-row .ant-table-row-cell-break-word {
|
||
border: none;
|
||
|
||
&:first-child {
|
||
border-radius: 8px 0 0 8px;
|
||
}
|
||
&:last-child {
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
}
|
||
}
|
||
@media screen and (max-width: 1366px) {
|
||
.warning-wrapper {
|
||
height: calc(100vh - 226px);
|
||
}
|
||
}
|
||
</style>
|