Files
foton-laws-system-front/src/components/hzwlComponents/StandardListDrawer.vue
T

706 lines
27 KiB
Vue

<template>
<el-drawer
ref="standard"
title="查询结果"
size="1250px"
:visible.sync="visible"
direction="rtl"
append-to-body
>
<div style="flex: 1" class="drawer-content">
<div style="height: calc(100% - 56px)">
<el-form
:model="searchForm"
inline
class="label-input-form search-area"
style="justify-content: left;"
>
<el-form-item label="标准/政策来源" class="search-item">
<el-select
v-model="searchForm.dataSource"
placeholder="请选择标准/政策来源"
@change="dataSourceChange"
>
<el-option v-for="i in dataSourceOptions" :value="i.value" :label="i.label" />
</el-select>
</el-form-item>
<el-form-item
label="标准编号/政策文号"
style="margin-right:10px"
class="search-item"
>
<el-input
v-model="searchForm.lawNumber"
clearable
placeholder="根据编号查找"
:maxlength="100"
/>
</el-form-item>
<el-form-item
label="标准名称/政策名称"
style="margin-right:10px"
class="search-item"
>
<el-input
v-model="searchForm.lawName"
placeholder="根据名称查找"
clearable
:maxlength="100"
/>
</el-form-item>
<el-form-item>
<el-button
size="mini"
type="primary"
class="common-button-primary"
@click="onSearch"
>
查询
</el-button>
<el-button
class="common-button-default"
size="mini"
@click="onClear"
>
清空
</el-button>
</el-form-item>
</el-form>
<el-table
v-if="showTable"
ref="reviseDrawerTable"
:data="standardData"
tooltip-effect="dark"
style="width: 100%;"
border
height="calc(100% - 51px)"
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px', fontWeight: 'bold', height: '48px'}"
@selection-change="selectionChange"
>
<el-table-column
fixed="left"
type="selection"
width="55"
align="center"
/>
<el-table-column
fixed="left"
type="index"
width="55"
label="序号"
align="center"
>
<template slot-scope="{scope, column, $index}">
{{ ($index + 1) + (searchForm.page - 1) * searchForm.pageSize }}
</template>
</el-table-column>
<div v-if="searchForm.dataSource === 'INLAND'">
<el-table-column
label="标准号"
width="150"
prop="standCode"
>
<template slot-scope="scope">
<a
v-if="scope.row.standYear && textStatusMap[scope.row.textStatus] === '废止'"
class="table-jump"
style="color: #F56C6C"
@click="handlePreview(scope.row)"
>{{ scope.row.standCode }}</a>
<a
v-else-if="scope.row.standYear"
class="table-jump"
style="color: #333333"
@click="handlePreview(scope.row)"
>{{ scope.row.standCode }}</a>
<a
v-else
class="table-jump"
style="color: #333333"
@click="handlePreview(scope.row)"
>{{ scope.row.standCode }}</a>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="standName"
label="标准名称"
min-width="300"
>
<template slot-scope="scope">
<a v-if="textStatusMap[scope.row.textStatus] === '废止'" class="table-jump" style="color: #F56C6C" @click="handlePreview(scope.row)">{{ scope.row.standName }}</a>
<a v-else style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standName }}</a>
</template>
</el-table-column>
<el-table-column
prop="issueTime"
width="120"
label="发布日期"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{ scope.row.issueTime }}</span>
<span v-else>{{ scope.row.issueTime }}</span>
</template>
</el-table-column>
<el-table-column
prop="ssrq"
width="120"
label="实施日期"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{ scope.row.ssrq }}</span>
<span v-else>{{ scope.row.ssrq }}</span>
</template>
</el-table-column>
<el-table-column
prop="xcxssrq"
width="150"
label="新车型实施日期"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{ scope.row.xcxssrq }}</span>
<span v-else>{{ scope.row.xcxssrq }}</span>
</template>
</el-table-column>
<el-table-column
prop="zccssrq"
width="150"
label="在产车实施日期"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{ scope.row.zccssrq }}</span>
<span v-else>{{ scope.row.zccssrq }}</span>
</template>
</el-table-column>
<el-table-column
prop="textStatus"
width="110"
label="标准状态"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{
textStatusMap[scope.row.textStatus]
}}</span>
<span v-else>{{ textStatusMap[scope.row.textStatus] }}</span>
</template>
</el-table-column>
</div>
<div v-if="searchForm.dataSource === 'FOREIGN'">
<el-table-column
label="标准号"
width="150"
prop="standCode"
>
<template slot-scope="scope">
<a
v-if="scope.row.standYear && textStatusMap[scope.row.textStatus] === '废止'"
style="color: #F56C6C"
class="table-jump"
@click="handlePreview(scope.row)"
>{{ scope.row.standCode }}</a>
<a
v-else-if="scope.row.standYear && textStatusMap[scope.row.textStatus] === '——' "
style="color: #409EFF"
class="table-jump"
@click="handlePreview(scope.row)"
>{{ scope.row.standCode }}</a>
<a
v-else-if="scope.row.standYear"
style="color: #333333"
class="table-jump"
@click="handlePreview(scope.row)"
>{{ scope.row.standCode }}</a>
<a
v-else
style="color: #333333"
class="table-jump"
@click="handlePreview(scope.row)"
>{{ scope.row.standCode }}</a>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="standName"
label="标准名称"
min-width="300"
>
<template slot-scope="scope">
<a v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{
scope.row.standName
}}</a>
<a v-else-if="textStatusMap[scope.row.textStatus] === '——' " style="color: #409EFF" class="table-jump" @click="handlePreview(scope.row)">{{
scope.row.standName
}}</a>
<a v-else style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{
scope.row.standName
}}</a>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="standEnName"
label="英文名称"
min-width="300"
>
<template slot-scope="scope">
<a v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{
scope.row.standEnName
}}</a>
<a v-else-if="textStatusMap[scope.row.textStatus] === '——' " style="color: #409EFF" class="table-jump" @click="handlePreview(scope.row)">{{
scope.row.standEnName
}}</a>
<a v-else style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{
scope.row.standEnName
}}</a>
</template>
</el-table-column>
<el-table-column
prop="issueTime"
width="120"
label="发布日期"
>
<template slot-scope="scope">
<div v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">
{{ scope.row.issueTime }}
</div>
<div v-else-if="textStatusMap[scope.row.textStatus] === '——' " style="color: #409EFF">
{{ scope.row.issueTime }}
</div>
<div v-else style="color: #333333">
{{ scope.row.issueTime }}
</div>
</template>
</el-table-column>
<el-table-column
prop="ssrq"
width="120"
label="实施日期"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{
scope.row.ssrq
}}</span>
<span v-else-if="textStatusMap[scope.row.textStatus] === '——' " style="color: #409EFF">{{
scope.row.ssrq
}}</span>
<span v-else style="color: #333333">{{ scope.row.ssrq }}</span>
</template>
</el-table-column>
<el-table-column
prop="xcxssrq"
width="150"
label="新车型实施日期"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{
scope.row.xcxssrq
}}</span>
<span v-else-if="textStatusMap[scope.row.textStatus] === '——' " style="color: #409EFF">{{
scope.row.xcxssrq
}}</span>
<span v-else style="color: #333333">{{
scope.row.xcxssrq
}}</span>
</template>
</el-table-column>
<el-table-column
prop="zccssrq"
width="150"
label="在产车实施日期"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{
scope.row.zccssrq
}}</span>
<span v-else-if="textStatusMap[scope.row.textStatus] === '——' " style="color: #409EFF">{{
scope.row.zccssrq
}}</span>
<span v-else style="color: #333333">{{
scope.row.zccssrq
}}</span>
</template>
</el-table-column>
<el-table-column
prop="textStatus"
width="110"
label="标准状态"
>
<template slot-scope="scope">
<span v-if="textStatusMap[scope.row.textStatus] === '废止'" style="color: #F56C6C">{{
textStatusMap[scope.row.textStatus]
}}</span>
<span v-else-if="textStatusMap[scope.row.textStatus] === '——' " style="color: #409EFF">{{
textStatusMap[scope.row.textStatus]
}}</span>
<span v-else style="color: #333333">{{ textStatusMap[scope.row.textStatus] }}</span>
</template>
</el-table-column>
</div>
<div v-if="searchForm.dataSource === 'FOREIGN_LAWS'">
<el-table-column
show-overflow-tooltip
label="政策文号"
width="150"
>
<template slot-scope="scope">
<a v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsNo }}</a>
<a v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsNo }}</a>
<a v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'" style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsNo }}</a>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="lawsName"
label="中文名称"
min-width="300"
>
<template slot-scope="scope">
<a v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsName }}</a>
<a v-if="scope.row.standStatusShow === '参考' " style="color: #E6A23C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsName }}</a>
<a v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'" style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsName }}</a>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="lawsEnName"
label="英文名称"
min-width="300"
>
<template slot-scope="scope">
<a v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsEnName }}</a>
<a v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsEnName }}</a>
<a v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'" style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsEnName }}</a>
</template>
</el-table-column>
<el-table-column
prop="issueTime"
label="发文日期"
width="120"
>
<template slot-scope="scope">
<span v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C">{{ scope.row.issueTime }}</span>
<span v-if="scope.row.standStatusShow === '参考' " style="color: #E6A23C">{{ scope.row.issueTime }}</span>
<span v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'">{{ scope.row.issueTime }}</span>
</template>
</el-table-column>
<el-table-column
prop="XCXSSRQLAWS"
label="新车实施日期"
width="150"
>
<template slot-scope="scope">
<span v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C">{{ scope.row.putTime }}</span>
<span v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C">{{ scope.row.putTime }}</span>
<span v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'">{{ scope.row.XCXSSRQLAWS }}</span>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="standStatusShow"
label="标准状态"
width="110"
>
<template slot-scope="scope">
<span v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C">
{{ scope.row.standStatusShow }}
</span>
<span v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C">
{{ scope.row.standStatusShow }}
</span>
<span v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'">
{{ scope.row.standStatusShow }}
</span>
</template>
</el-table-column>
</div>
<div v-if="searchForm.dataSource === 'BUSINESS_STAND'">
<el-table-column
show-overflow-tooltip
label="企标编号"
width="150"
>
<template slot-scope="scope">
<a v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standCode }}</a>
<a v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standCode }}</a>
<a v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'" style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standCode }}</a>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="standName"
label="中文名称"
min-width="300"
>
<template slot-scope="scope">
<a v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standName }}</a>
<a v-if="scope.row.standStatusShow === '参考' " style="color: #E6A23C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standName }}</a>
<a v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'" style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standName }}</a>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="standEnName"
label="英文名称"
min-width="300"
>
<template slot-scope="scope">
<a v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standEnName }}</a>
<a v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standEnName }}</a>
<a v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'" style="color: #333333" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standEnName }}</a>
</template>
</el-table-column>
<el-table-column
prop="issueTime"
label="发布日期"
width="120"
>
<template slot-scope="scope">
<span v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C">{{ scope.row.issueTime }}</span>
<span v-if="scope.row.standStatusShow === '参考' " style="color: #E6A23C">{{ scope.row.issueTime }}</span>
<span v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'">{{ scope.row.issueTime }}</span>
</template>
</el-table-column>
<el-table-column
prop="putTime"
label="实施日期"
width="120"
>
<template slot-scope="scope">
<span v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C">{{ scope.row.putTime }}</span>
<span v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C">{{ scope.row.putTime }}</span>
<span v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'">{{ scope.row.putTime }}</span>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="standStatusShow"
label="标准状态"
width="110"
>
<template slot-scope="scope">
<span v-if="scope.row.standStatusShow === '作废'" style="color: #F56C6C">
{{ scope.row.standStatusShow }}
</span>
<span v-if="scope.row.standStatusShow === '参考'" style="color: #E6A23C">
{{ scope.row.standStatusShow }}
</span>
<span v-if="scope.row.standStatusShow !== '作废' && scope.row.standStatusShow !== '参考'">
{{ scope.row.standStatusShow }}
</span>
</template>
</el-table-column>
</div>
</el-table>
</div>
<pagination
:page="searchForm.page"
:total="searchForm.total"
@pageChange="pageChange"
@pageSizeChange="pageSizeChange"
/>
</div>
<div class="drawer-footer">
<el-button
round
class="common-button-primary"
icon="el-icon-check"
type="primary"
@click="onDrag"
>
带入
</el-button>
<el-button
round
class="common-button-default"
icon="el-icon-close"
@click="onCancel"
>
取消
</el-button>
</div>
<loading :loading="loading">数据获取中</loading>
</el-drawer>
</template>
<script>
export default {
name: 'StandardListDrawer',
data () {
const dataSourceOptions = [
{
label: '国内标准库',
value: 'INLAND'
},
{
label: '海外标准库',
value: 'FOREIGN'
},
{
label: '国内外政策库',
value: 'FOREIGN_LAWS'
},
{
label: '企业标准库',
value: 'BUSINESS_STAND'
},
]
const searchForm = {
dataSource: 'INLAND',
standType: 'INLAND',
lawCode: '',
lawName: '',
productType: '',
page: 1,
total: 0,
pageSize: this.$store.getters.userInfo.configContent,
}
return {
searchForm,
initSearchForm: JSON.parse(JSON.stringify(searchForm)),
dataSourceOptions,
standardData: [],
loading: false,
url: {
INLANDFOREIGN: 'sarStandardsInfo/sar-standards-info/getSarStandardsInfoPage',
FOREIGN_LAWS: 'lawss/sarLawsInfo/page',
BUSINESS_STAND: 'lawss/sarBussionessStand/getSarBussionStandPage'
},
textStatusMap: {},
showTable: true,
visible: false,
selectedList: [],
}
},
created () {
this.getDicTypeListCode()
this.getData()
},
methods: {
open () {
this.visible = true
this.searchForm = JSON.parse(JSON.stringify(this.initSearchForm))
this.selectedList = []
this.getData()
},
onCancel () {
this.visible = false
},
getData () {
const config = {
_this: this,
loading: 'loading'
}
let url = this.url.INLANDFOREIGN
switch (this.searchForm.dataSource) {
case 'INLAND':
case 'FOREIGN':
url = this.url.INLANDFOREIGN
break
case 'FOREIGN_LAWS':
url = this.url.FOREIGN_LAWS
break
case 'BUSINESS_STAND':
url = this.url.BUSINESS_STAND
break
}
this.searchForm.standType = this.searchForm.dataSource
this.$http._getData(url, this.searchForm, config).then(res => {
if (res.ok) {
this.standardData = res.data.list
this.searchForm.total = res.data.count
this.showTable = false
this.$nextTick(() => {
this.showTable = true
})
}
})
},
pageChange (page) {
this.searchForm.page = page
this.getData()
},
pageSizeChange (pageSize) {
this.searchForm.pageSize = pageSize
this.getData()
},
dataSourceChange () {
const standType = this.searchForm.dataSource
this.searchForm = JSON.parse(JSON.stringify(this.initSearchForm))
this.searchForm.dataSource = standType
this.searchForm.standType = standType
this.getData()
},
onSearch () {
this.searchForm.page = 1
this.getData()
},
onClear () {
this.getData()
},
getDicTypeListCode () {
this.$http._getData('sys/dictype/getDicTypeListCode').then(res => {
if (res.ok) {
this.dict = { ...res.data }
this.setMap(this.dict.WBZTCLASS, 'textStatusMap')
}
})
},
setMap (data, key) {
data.forEach(item => {
this.$set(this[key], item.value, item.label);
});
},
selectionChange (selection) {
this.selectedList = selection
},
// 点击查看
handlePreview (item) {
let name = '', id = item.id, pageType = ''
if (item.standType === 'INLAND') {
name = 'OtherStandardDetails'
pageType = 'INLAND_STAND'
}else if (item.standType === 'FOREIGN') {
name = 'OtherStandardDetails'
pageType = 'FOREIGN_STAND'
}else if (item.country !== undefined) {
name = 'OtherLawsStandDetails'
pageType = 'LAWS_STAND'
} else {
name = 'OtherBussStandardDetails'
pageType = 'BUSINESS_STAND'
}
const routeUrl = this.$router.resolve({ name, params: { id, pageType } })
window.open(routeUrl.href, '_blank')
},
onDrag () {
this.$emit('dragIn', {
list: this.selectedList,
type: this.searchForm.dataSource
})
this.visible = false
}
}
}
</script>
<style scoped lang="less">
.drawer-content{
padding: 0 19px;
overflow-y: auto;
flex: 1;
position: relative;
}
.drawer-footer {
width: 100%;
padding: 0 20px;
height: 70px;
line-height: 69px;
border-top: 1px solid #e8e8e8;
text-align: right;
background: #fff;
z-index: 999;
}
</style>