QR/laws_chery_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【update 首页】首页样式及高级搜索

Browse Source
This commit is contained in:
danshihao
2024-06-26 18:59:58 +08:00
parent e40a403d16
commit 87c76abddc
58 changed files with 1043 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/modules/SearchAndWarningCard.vue
+249 -192
View File
@@ -1,35 +1,19 @@
<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必须有，后面用媒体查询进行样式覆盖-->
<!-- 预警区域 -->
<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="columns"
:columns="showColumns"
:dataSource="dataSource"
:pagination="ipagination"
@change="handleTableChange"
@@ -58,132 +42,221 @@
</template>
</a-table>
</div>
</a-card>
</div>
</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
tabList: [
{ key: 'lastStorageStandards', name: '最新入库标准' },
{ key: 'marketUpdates', name: '市场更新情况' },
{ key: 'lastStorageEnterpriseStandard', name: '最新入库企标' },
{ key: 'latestInterpretationStandards', name: '最新解读标准' },
{ key: 'implementStandards', name: '将实施标准' }
],
warningTab: '', // 预警当前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' }
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[0].key,
this.tabList[4].key
].includes(this.warningTab)
}
},
{
title: '标准号',
title: '标准编号',
align: 'left',
dataIndex: 'standardNumber',
width: 120,
scopedSlots: { customRender: 'standard' }
scopedSlots: { customRender: 'standard' },
show: () => {
return [
this.tabList[0].key,
this.tabList[2].key,
this.tabList[3].key,
this.tabList[4].key
].includes(this.warningTab)
}
},
{
title: '标准名称',
align: 'left',
dataIndex: 'standardName',
width: 180,
scopedSlots: { customRender: 'standard' }
scopedSlots: { customRender: 'standard' },
show: () => {
return [
this.tabList[0].key,
this.tabList[2].key,
this.tabList[3].key,
this.tabList[4].key
].includes(this.warningTab)
}
},
{
title: '新车型实施日期',
title: '解读信息',
align: 'left',
dataIndex: 'newModelImplementationDate',
dataIndex: 'interpretingInformation',
width: 180,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[3].key
].includes(this.warningTab)
}
},
{
title: '新生产车实施日期',
align: 'left',
dataIndex: 'newProduceModelImplementationDate',
width: 140,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[0].key
].includes(this.warningTab)
}
},
{
title: '新认证车实施日期',
align: 'left',
dataIndex: 'newAuthenticationModelImplementationDate',
width: 140,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[0].key,
this.tabList[4].key
].includes(this.warningTab)
}
},
{
title: '发布日期',
align: 'left',
dataIndex: 'releaseDate',
width: 100,
scopedSlots: { customRender: 'text' }
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[2].key
].includes(this.warningTab)
}
},
{
title: '实施日期',
align: 'left',
dataIndex: 'implementationDate',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[2].key
].includes(this.warningTab)
}
},
{
title: '标准状态',
align: 'left',
dataIndex: 'status_dictText',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[0].key,
this.tabList[2].key,
this.tabList[4].key
].includes(this.warningTab)
}
},
{
title: '代替标准编号',
align: 'left',
dataIndex: 'standardNumber2',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[2].key
].includes(this.warningTab)
}
},
// 市场更新情况start
{
title: '国家/地区',
align: 'left',
dataIndex: 'country',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[1].key
].includes(this.warningTab)
}
},
{
title: '清单编号',
align: 'left',
dataIndex: 'listNumber',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[1].key
].includes(this.warningTab)
}
},
{
title: '清单名称',
align: 'left',
dataIndex: 'listName',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[1].key
].includes(this.warningTab)
}
},
{
title: '清单版本',
align: 'left',
dataIndex: 'listVersion',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[1].key
].includes(this.warningTab)
}
},
{
title: '驾驶位置',
align: 'left',
dataIndex: 'drivingPosition',
width: 100,
scopedSlots: { customRender: 'text' },
show: () => {
return [
this.tabList[1].key
].includes(this.warningTab)
}
}
// 市场更新情况end
],
showColumns: [],
dataSource: [],
/* 分页参数 */
ipagination: {
@@ -198,26 +271,16 @@ export default {
total: 0
},
url: {
newModelWarningList: '/laws/localTool/standardEarlyWarning/newModelImplementation',
inProductionWarningList: '/laws/localTool/standardEarlyWarning/onTheProduction',
enStandardImplementList: '/laws/localTool/standardEarlyWarning/latestImplementEs',
enStandardPublishList: '/laws/localTool/standardEarlyWarning/latestReleaseEs'
list: '/laws/localTool/standardEarlyWarning/newModelImplementation'
}
}
},
mounted () {
this.initResourceTypeOptions()
this.loadData(1)
// 默认选中第一个
this.warningTabChange(this.tabList[0].key)
// this.loadData(1)
},
methods: {
// 获取资源类型下拉框数据
initResourceTypeOptions () {
ajaxGetDictItems('resource_type').then(res => {
if (res.success) {
this.resourceTypeOptions = res.result
}
})
},
// 回车跳标题检索
searchInputEnter () {
const { href } = this.$router.resolve({
@@ -252,19 +315,9 @@ export default {
// 预警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.showColumns = this.columns.filter(col => col.show ? col.show() : true).map(item => {
return Object.assign({}, item, { show: undefined })
})
this.loadData(1)
},
// 跳转详情
@@ -314,16 +367,8 @@ export default {
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
}
// TODO: 暂时没有对接接口
let url = this.url.list
getAction(url, params).then((res) => {
if (res.success) {
this.dataSource = res.result.records || res.result
@@ -344,18 +389,40 @@ export default {
</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;
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 {
@@ -364,35 +431,25 @@ export default {
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;
// 表格样式
.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;
}
}
.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;
@media screen and (max-width: 1366px) {
.warning-wrapper {
height: calc(100vh - 226px);
}
}
// 通过媒体查询覆盖表格高度
.table /deep/ .ant-table-scroll .ant-table-body {