Initial commit
This commit is contained in:
danshihao
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-wrapper">
|
||||
<a-select class="resource-type-select" v-model="resourceType">
|
||||
<a-select-option value="all">{{ $t('dashboard.generalSearch.all')}}</a-select-option>
|
||||
<a-select-option v-for="item in resourceTypeOptions" :key="item.value" :value="item.value" :title="item.title">
|
||||
{{ item.title }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input v-model="searchValue" :placeholder="$t('pleaseEnter')" @pressEnter="searchInputEnter"></a-input>
|
||||
<a-button type="primary" @click="toSearchWindow('title')">标题检索</a-button>
|
||||
<a-button type="primary" @click="toSearchWindow('fullText')">全文检索</a-button>
|
||||
<a-button type="primary" ghost @click="toAdvancedSearch">高级检索</a-button>
|
||||
</div>
|
||||
<!-- 预警区域 -->
|
||||
<div class="warning-wrapper">
|
||||
<!-- tab切换 -->
|
||||
<div class="tab-wrapper">
|
||||
<div class="tab-div" :class="warningTab === 'newCarType' ? 'curr-tab' : ''" @click="warningTabChange('newCarType')">新车型实施预警</div>
|
||||
<div class="tab-div" :class="warningTab === 'carInProduction' ? 'curr-tab' : ''" @click="warningTabChange('carInProduction')">在产车实施预警</div>
|
||||
<div class="tab-div small-tab-div" :class="warningTab === 'enStandardImplement' ? 'curr-tab small-curr-tab' : ''" @click="warningTabChange('enStandardImplement')">最新发布企标</div>
|
||||
<div class="tab-div small-tab-div" :class="warningTab === 'enStandardPublish' ? 'curr-tab small-curr-tab' : ''" @click="warningTabChange('enStandardPublish')">最新实施企标</div>
|
||||
</div>
|
||||
<!--这里的scroll.y必须有，后面用媒体查询进行样式覆盖-->
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
:rowKey="(_, index) => index"
|
||||
class="table"
|
||||
:scroll="{ x: '100%', y: '40vh' }"
|
||||
:columns="columns"
|
||||
: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>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajaxGetDictItems } from '@/api/api'
|
||||
import { getAction } from '@api/manage'
|
||||
import { StandardSource } from '@/enums/commonEnums'
|
||||
|
||||
const warningColumns = [
|
||||
{
|
||||
title: '来源',
|
||||
align: 'left',
|
||||
dataIndex: 'source_dictText',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '标准号',
|
||||
align: 'left',
|
||||
dataIndex: 'standardNumber',
|
||||
width: 120,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
},
|
||||
{
|
||||
title: '标准名称',
|
||||
align: 'left',
|
||||
dataIndex: 'standardName',
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
},
|
||||
{
|
||||
title: '新车型实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'newModelImplementationDate',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
]
|
||||
|
||||
const enStandardColumns = [
|
||||
{
|
||||
title: '企标编号',
|
||||
align: 'left',
|
||||
dataIndex: 'standardNumber',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'enStandard' }
|
||||
},
|
||||
{
|
||||
title: '企标名称',
|
||||
align: 'left',
|
||||
dataIndex: 'standardName',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'enStandard' }
|
||||
},
|
||||
{
|
||||
title: '标准状态',
|
||||
align: 'left',
|
||||
dataIndex: 'standardState_dictText',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '发布日期',
|
||||
align: 'left',
|
||||
dataIndex: 'releaseDate',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'implementationDate',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'SearchAndWarningCard',
|
||||
data () {
|
||||
return {
|
||||
resourceTypeOptions: [], // 资源类型下拉框数据
|
||||
resourceType: 'all', // 资源类型
|
||||
searchValue: '', // 检索内容
|
||||
warningTab: 'newCarType', // 预警当前tab
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('serialNumber'),
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
align: 'left',
|
||||
dataIndex: 'source_dictText',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '标准号',
|
||||
align: 'left',
|
||||
dataIndex: 'standardNumber',
|
||||
width: 120,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
},
|
||||
{
|
||||
title: '标准名称',
|
||||
align: 'left',
|
||||
dataIndex: 'standardName',
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
},
|
||||
{
|
||||
title: '新车型实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'newModelImplementationDate',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
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: {
|
||||
newModelWarningList: '/laws/localTool/standardEarlyWarning/newModelImplementation',
|
||||
inProductionWarningList: '/laws/localTool/standardEarlyWarning/onTheProduction',
|
||||
enStandardImplementList: '/laws/localTool/standardEarlyWarning/latestImplementEs',
|
||||
enStandardPublishList: '/laws/localTool/standardEarlyWarning/latestReleaseEs'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initResourceTypeOptions()
|
||||
this.loadData(1)
|
||||
},
|
||||
methods: {
|
||||
// 获取资源类型下拉框数据
|
||||
initResourceTypeOptions () {
|
||||
ajaxGetDictItems('resource_type').then(res => {
|
||||
if (res.success) {
|
||||
this.resourceTypeOptions = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
// 回车跳标题检索
|
||||
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.warningTab = value
|
||||
this.dataSource = []
|
||||
if (value === 'newCarType') {
|
||||
this.columns.splice(1, this.columns.length - 1, ...warningColumns)
|
||||
this.columns[4].title = '新车型实施日期'
|
||||
this.columns[4].dataIndex = 'newModelImplementationDate'
|
||||
} else if (value === 'carInProduction') {
|
||||
this.columns.splice(1, this.columns.length - 1, ...warningColumns)
|
||||
this.columns[4].title = '在产车实施日期'
|
||||
this.columns[4].dataIndex = 'onTheProductionDate'
|
||||
} else {
|
||||
// 是企标实施预警或企标发布预警
|
||||
this.columns.splice(1, this.columns.length - 1, ...enStandardColumns)
|
||||
}
|
||||
this.loadData(1)
|
||||
},
|
||||
// 跳转详情
|
||||
detailClick (record) {
|
||||
let path
|
||||
// 根据来源跳转不同的详情页
|
||||
switch (record.source + '') {
|
||||
// 国内
|
||||
case StandardSource.DOMESTIC.value:
|
||||
path = '/standardRegulationLibrary/DomesticStandardDetail'
|
||||
break
|
||||
// 海外
|
||||
case StandardSource.OVERSEAS.value:
|
||||
path = '/standardRegulationLibrary/OverseasStandardDetail'
|
||||
break
|
||||
// 企标
|
||||
case StandardSource.ENTERPRISE.value:
|
||||
path = '/enterpriseStandardLibrary/enterpriseStandardDetail'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
this.$openPageNewSheet({
|
||||
path,
|
||||
query: {
|
||||
id: record.id
|
||||
}
|
||||
})
|
||||
},
|
||||
// 企标详情
|
||||
enStandardDetailClick (record) {
|
||||
this.$openPageNewSheet({
|
||||
path: '/enterpriseStandardLibrary/enterpriseStandardDetail',
|
||||
query: {
|
||||
id: 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
|
||||
let url = ''
|
||||
if (this.warningTab === 'newCarType') {
|
||||
url = this.url.newModelWarningList
|
||||
} else if (this.warningTab === 'carInProduction') {
|
||||
url = this.url.inProductionWarningList
|
||||
} else if (this.warningTab === 'enStandardImplement') {
|
||||
url = this.url.enStandardImplementList
|
||||
} else {
|
||||
url = this.url.enStandardPublishList
|
||||
}
|
||||
getAction(url, 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">
|
||||
.search-wrapper {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: 96px 200px 88px 88px 88px;
|
||||
}
|
||||
.resource-type-select {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
// 预警容器
|
||||
.warning-wrapper {
|
||||
padding: 24px 0;
|
||||
}
|
||||
// 预警tab切换
|
||||
.tab-wrapper {
|
||||
width: 664px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.tab-div {
|
||||
cursor: pointer;
|
||||
width: 176px;
|
||||
height: 32px;
|
||||
background: rgba(245, 245, 245, 0.60);
|
||||
color: #4E5969;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
.small-tab-div {
|
||||
width: 156px;
|
||||
}
|
||||
.curr-tab {
|
||||
width: 176px;
|
||||
height: 44px;
|
||||
line-height: 42px;
|
||||
border-top: 2px solid @primary-color;
|
||||
color: @primary-color;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
//transition-property: width,height,border-top;
|
||||
//transition-duration: 0.1s;
|
||||
//transition-timing-function: ease-in;
|
||||
}
|
||||
.small-curr-tab {
|
||||
width: 156px;
|
||||
}
|
||||
// 通过媒体查询覆盖表格高度
|
||||
.table /deep/ .ant-table-scroll .ant-table-body {
|
||||
max-height: calc(100vh - 20px - 162px - 310px) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user