611 lines
19 KiB
Java
611 lines
19 KiB
Java
<template>
|
|
<div class="search-con-text">
|
|
<div class="search-text-wrap">
|
|
<div class="text-left">
|
|
<div class="text-left-wrap">
|
|
<div v-for="item in searchOption" :key="item.id">
|
|
<div class="text-left-select">
|
|
<span class="text-sel">{{item.value}}</span>
|
|
<a-select class="text-select" :default-value="item.option[0].value" style="width: 120px"
|
|
@change="handleChange">
|
|
<a-select-option v-for="opt in item.option" :value="opt.value">
|
|
{{opt.value}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-left-select">
|
|
<span class="text-sel">发布日期</span>
|
|
<a-date-picker class="text-select" @change="onChange"/>
|
|
</div>
|
|
<div class="text-left-select">
|
|
<span class="text-sel">标准实施日期</span>
|
|
<a-date-picker class="text-select" @change="onChange"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="search-text-list">
|
|
<div class="search-text-title">
|
|
<span>检索范围：</span>
|
|
<span>纯电动</span>
|
|
<div class="search-header-right">
|
|
<a-icon type="appstore" class="header-list" :title="$t('list')" :class="{'header-list-active':isTrue }"
|
|
@click="selectListModel('list')"></a-icon>
|
|
<a-icon type="unordered-list" class="header-list" :title="$t('paragraph')"
|
|
:class="{'header-list-active':!isTrue }"
|
|
@click="selectListModel('unord')"></a-icon>
|
|
</div>
|
|
</div>
|
|
<a-table
|
|
v-if="isTrue"
|
|
ref="table"
|
|
size="middle"
|
|
:scroll="{x: true}"
|
|
rowKey="id"
|
|
:data-source="tableData"
|
|
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
|
:columns="columns"
|
|
>
|
|
<span slot="operation" slot-scope="record">
|
|
<a @click="Collection(record)" class="text-operation">
|
|
{{!record.collectFlag || record.collectFlag == 0 ? $t('Collection') :$t('CancelCollection')}}
|
|
</a>
|
|
<a @click="subscribe(record)" class="text-operation">
|
|
{{!record.subscribeFlag || record.subscribeFlag == 0 ? $t('subscribe') :$t('CancelSubscribe')}}
|
|
</a>
|
|
<a @click="handleCompare(record)" class="text-operation"> {{$t('Push')}}</a>
|
|
</span>
|
|
<!-- 字符串超长截取省略号显示-->
|
|
<!-- <span slot="templateContent" slot-scope="text">-->
|
|
<!-- <j-ellipsis :value="text" :length="25"/>-->
|
|
<!-- </span>-->
|
|
</a-table>
|
|
<div v-if="!isTrue" class="box-content">
|
|
<a-checkbox-group v-model="checkboxText">
|
|
<li v-for="item in conList" :key="item.id">
|
|
<div style="margin-bottom: 10px;position: relative">
|
|
<a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
|
|
<div class="text-text-right"
|
|
@click="checkedClick(item)"
|
|
:class="{ 'null-input':item.checked }">
|
|
<div class="text-header">
|
|
<span>{{item.type}}</span>
|
|
<span>{{item.number}}</span>
|
|
<span>{{item.title}}</span>
|
|
</div>
|
|
<div class="text-content">
|
|
{{item.content}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</a-checkbox-group>
|
|
</div>
|
|
<div class="page">
|
|
<a-pagination
|
|
:show-total="total => $t('total')+` ${total} `+$t('strip')"
|
|
show-quick-jumper
|
|
show-size-changer
|
|
:page-size.sync="pageSize"
|
|
:total="total"
|
|
@change="pageOnChange"
|
|
@showSizeChange="SizeChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<libraryPush
|
|
:url="url"
|
|
ref="libraryPushRef"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import eventBUs from '../../../../common/event'
|
|
import { getAction, postAction } from '@/api/manage'
|
|
import libraryPush from '@/components/libraryPush/index'
|
|
|
|
export default {
|
|
name: 'DocumentLibrary',
|
|
components: {
|
|
libraryPush
|
|
},
|
|
data() {
|
|
return {
|
|
searchOption: [
|
|
{
|
|
id: 1,
|
|
label: 'categary',
|
|
value: '适用区域',
|
|
option: [
|
|
{
|
|
label: 'china',
|
|
value: '中国'
|
|
},
|
|
{
|
|
label: 'english',
|
|
value: '英国'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
label: 'type',
|
|
value: '类别',
|
|
option: [
|
|
{
|
|
label: 'china',
|
|
value: '中国'
|
|
},
|
|
{
|
|
label: 'english',
|
|
value: '英国'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
label: 'stand',
|
|
value: '标准体系',
|
|
option: [
|
|
{
|
|
label: 'china',
|
|
value: '中国'
|
|
},
|
|
{
|
|
label: 'english',
|
|
value: '英国'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 4,
|
|
label: 'state',
|
|
value: '状态',
|
|
option: [
|
|
{
|
|
label: 'china',
|
|
value: '中国'
|
|
},
|
|
{
|
|
label: 'english',
|
|
value: '英国'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 5,
|
|
label: 'trial',
|
|
value: '适用范围',
|
|
option: [
|
|
{
|
|
label: 'china',
|
|
value: '中国'
|
|
},
|
|
{
|
|
label: 'english',
|
|
value: '英国'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 6,
|
|
label: 'funArea',
|
|
value: '功能领域',
|
|
option: [
|
|
{
|
|
label: 'china',
|
|
value: '中国'
|
|
},
|
|
{
|
|
label: 'english',
|
|
value: '英国'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 7,
|
|
label: 'techArea',
|
|
value: '技术领域',
|
|
option: [
|
|
{
|
|
label: 'china',
|
|
value: '中国'
|
|
},
|
|
{
|
|
label: 'english',
|
|
value: '英国'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
tableData: [
|
|
{}
|
|
],
|
|
url: {
|
|
pullMessage: 'document/bussDocumentLibraryEO/pullMessage'//推送
|
|
},
|
|
columns: [
|
|
{
|
|
title: this.$t('standard'),
|
|
align: 'center',
|
|
dataIndex: 'templateCode'
|
|
},
|
|
{
|
|
title: this.$t('title'),
|
|
align: 'center',
|
|
dataIndex: 'templateName'
|
|
},
|
|
{
|
|
title: this.$t('fileName'),
|
|
align: 'center',
|
|
dataIndex: 'template'
|
|
},
|
|
{
|
|
title: this.$t('status'),
|
|
align: 'center',
|
|
dataIndex: 'templateCon'
|
|
},
|
|
{
|
|
title: this.$t('zoneOfApplication'),
|
|
align: 'center',
|
|
dataIndex: 'templateCont'
|
|
},
|
|
{
|
|
title: this.$t('functionalAreas'),
|
|
align: 'center',
|
|
dataIndex: 'templateContent1'
|
|
},
|
|
{
|
|
title: this.$t('technicalField'),
|
|
align: 'center',
|
|
dataIndex: 'templateContent2'
|
|
},
|
|
{
|
|
title: this.$t('releaseTime'),
|
|
align: 'center',
|
|
dataIndex: 'releaseTime'
|
|
},
|
|
{
|
|
title: this.$t('standardImplementationTime'),
|
|
align: 'center',
|
|
dataIndex: 'standardImplementationTime'
|
|
},
|
|
{
|
|
title: this.$t('operation'),
|
|
align: 'center',
|
|
fixed: 'right',
|
|
width: 200,
|
|
scopedSlots: { customRender: 'operation' }
|
|
}
|
|
],
|
|
selectedRowKeys: [],
|
|
isTrue: true,
|
|
checkboxText: [],
|
|
conList: [
|
|
{
|
|
id: 1,
|
|
type: '文档库',
|
|
number: 'GB20999-2019',
|
|
title: '内饰件阻燃特性',
|
|
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
|
|
},
|
|
{
|
|
id: 2,
|
|
type: '文档库',
|
|
number: 'GB20999-2019',
|
|
title: '内饰件阻燃特性',
|
|
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
|
|
},
|
|
{
|
|
id: 3,
|
|
type: '文档库',
|
|
number: 'GB20999-2019',
|
|
title: '内饰件阻燃特性',
|
|
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
|
|
},
|
|
{
|
|
id: 4,
|
|
type: '文档库',
|
|
number: 'GB20999-2019',
|
|
title: '内饰件阻燃特性',
|
|
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
|
|
},
|
|
{
|
|
id: 5,
|
|
type: '文档库',
|
|
number: 'GB20999-2019',
|
|
title: '内饰件阻燃特性',
|
|
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
|
|
}
|
|
],
|
|
total: 0,
|
|
pageSize: 10,
|
|
pageNo: 1
|
|
}
|
|
},
|
|
watch: {
|
|
checkboxText: function(value) {
|
|
this.conList.forEach(val => {
|
|
val.checked = false
|
|
})
|
|
if (value.length > 0) {
|
|
this.conList.forEach(val => {
|
|
value.forEach(res => {
|
|
if (res === val.id) {
|
|
val.checked = true
|
|
}
|
|
})
|
|
})
|
|
}
|
|
this.conList = [...this.conList]
|
|
}
|
|
},
|
|
methods: {
|
|
handleChange() {
|
|
|
|
},
|
|
onChange(date, dateString) {
|
|
// console.log(date, dateString);
|
|
},
|
|
selectListModel(val) {
|
|
this.isTrue = val == 'list' ? true : false
|
|
},
|
|
onSelectChange() {
|
|
|
|
},
|
|
checkedClick(item) {
|
|
if (item.checked) {
|
|
this.checkboxText = this.checkboxText.filter(res => {
|
|
return res !== item.id
|
|
})
|
|
} else {
|
|
this.checkboxText.push(item.id)
|
|
}
|
|
},
|
|
pageOnChange(page, pageSize) {
|
|
this.pageNo = page
|
|
},
|
|
SizeChange(page, pageSize) {
|
|
this.pageNo = 1
|
|
this.pageSize = pageSize
|
|
},
|
|
//收藏按钮
|
|
Collection(val) {
|
|
let _this = this
|
|
this.$confirm({
|
|
content: val.collectFlag == 0 || !val.collectFlag ? _this.$t('ConfirmCollection') : _this.$t('cancelConfirmCollection'),
|
|
onOk() {
|
|
let url = ''
|
|
if (val.collectFlag == 0 || !val.collectFlag) {
|
|
url = 'document/bussDocumentLibraryEO/addCollect'
|
|
} else {
|
|
url = 'document/bussDocumentLibraryEO/cancelCollect'
|
|
}
|
|
getAction(url, { id: val.id }).then((res) => {
|
|
if (res.success) {
|
|
_this.$message.success(_this.$t('OperationSuccessful'))
|
|
} else {
|
|
_this.$message.warning(_this.$t('operationFailed'))
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//订阅按钮
|
|
subscribe(val) {
|
|
let _this = this
|
|
this.$confirm({
|
|
content: val.subscribeFlag == 0 || !val.subscribeFlag ? _this.$t('ConfirmSubscribe') : _this.$t('cancelConfirmSubscribe'),
|
|
onOk() {
|
|
let url = ''
|
|
if (val.subscribeFlag == 0 || !val.subscribeFlag) {
|
|
url = 'document/bussDocumentLibraryEO/addSubscribe'
|
|
} else {
|
|
url = 'document/bussDocumentLibraryEO/cancelSubscribe'
|
|
}
|
|
getAction(url, { id: val.id }).then((res) => {
|
|
if (res.success) {
|
|
_this.$message.success(_this.$t('OperationSuccessful'))
|
|
} else {
|
|
_this.$message.warning(_this.$t('operationFailed'))
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//推送
|
|
handleCompare(val) {
|
|
let item = JSON.parse(JSON.stringify(val))
|
|
this.$nextTick(() => {
|
|
this.$refs.libraryPushRef.visible = true
|
|
this.$refs.libraryPushRef.tableKey = item.id.split(',')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.table .ant-table-column-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ant-table td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.checkbox-left .ant-checkbox-inner {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
line-height: 18px !important;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
|
|
.search-con-text {
|
|
|
|
.search-text-wrap {
|
|
margin-top: -27px;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
.text-left {
|
|
width: 358px;
|
|
padding: 24px 24px 24px 0;
|
|
box-sizing: border-box;
|
|
|
|
.text-left-wrap {
|
|
|
|
.text-left-select {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
line-height: 32px;
|
|
|
|
.text-sel {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #000F16;
|
|
text-align: right;
|
|
margin-right: 14px;
|
|
width: 83px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.text-select {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-right {
|
|
width: 100%;
|
|
position: relative;
|
|
padding: 26px 0 22px 24px;
|
|
box-sizing: border-box;
|
|
border-left: 2px solid #E6E7EC;
|
|
|
|
.search-text-title {
|
|
padding: 0 0 24px 0;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #040B29;
|
|
}
|
|
|
|
.search-header-right {
|
|
float: right;
|
|
margin-top: -7px;
|
|
|
|
a-icon {
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.65);
|
|
cursor: pointer;
|
|
padding: 2px 5px;
|
|
border-right: none;
|
|
}
|
|
|
|
a-icon:last-child {
|
|
border-right: 1px solid rgba(0, 0, 0, 0.65);
|
|
}
|
|
|
|
.header-list {
|
|
font-size: 20px;
|
|
border: 1px solid gray;
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.header-list:hover {
|
|
color: #00B3BE;
|
|
border: 1px solid #00B3BE;
|
|
}
|
|
|
|
.header-list-active {
|
|
border: 1px solid #00B3BE;
|
|
color: #00B3BE;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-text-list {
|
|
ul {
|
|
padding: 0 0 0 18px;
|
|
margin: 0;
|
|
|
|
li {
|
|
list-style: none;
|
|
|
|
.text-content {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #040B29;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox-left {
|
|
float: left;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.text-text-right {
|
|
padding: 19px 28px;
|
|
box-sizing: border-box;
|
|
margin-left: 38px;
|
|
}
|
|
|
|
.null-input {
|
|
background-color: #F2F4F8;
|
|
}
|
|
|
|
.text-header {
|
|
margin-bottom: 11px;
|
|
|
|
span {
|
|
margin-right: 52px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #040B29;
|
|
}
|
|
}
|
|
|
|
.text-content {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #040B29;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.box-content {
|
|
padding: 0 0 0 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.page {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.text-operation {
|
|
margin-right: 8px;
|
|
}
|
|
</style> |