390 lines
10 KiB
Vue
390 lines
10 KiB
Vue
<!-- 标准法规库 - 动态&资料 -->
|
|
<template>
|
|
<div id="queryDynamicInformation" class="v-class">
|
|
<div class="query-dynamic-information-left">
|
|
<div class="dynamic-search">
|
|
<div class="dynamic-search-header">
|
|
<span class="back" title="返回" @click="back">
|
|
<i class="el-icon-back"></i>
|
|
</span>
|
|
<h5>资料中心搜索</h5>
|
|
</div>
|
|
<div class="dynamic-search-line"></div>
|
|
<div class="dynamic-search-center search-area">
|
|
<el-form
|
|
ref="dynamic"
|
|
:modal="dynamic"
|
|
class=""
|
|
label-width="100px"
|
|
inline
|
|
@submit.native.prevent
|
|
>
|
|
<el-form-item label="" prop="keyWord" class="search-item">
|
|
<el-input
|
|
class="winput"
|
|
v-model="dynamic.keyWord"
|
|
@keyup.enter.native="querySearchWords"
|
|
clearable
|
|
placeholder="请输入查找关键字"
|
|
:maxlength="100"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="openData" class="search-item">
|
|
<el-date-picker
|
|
class="winput"
|
|
v-model="dynamic.openData"
|
|
type="date"
|
|
:editable="false"
|
|
placeholder="请选择开始时间"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="closeData" class="search-item">
|
|
<el-date-picker
|
|
class="winput"
|
|
v-model="dynamic.closeData"
|
|
type="date"
|
|
:editable="false"
|
|
placeholder="请选择结束时间"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item class="wbtn">
|
|
<el-button
|
|
type="primary"
|
|
round
|
|
size="small"
|
|
@click="querySearchWords"
|
|
>查询</el-button
|
|
>
|
|
<el-button size="small" @click="empty">清空</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="query-dynamic-information-right">
|
|
<div class="result">{{ result }}</div>
|
|
<has-no-data
|
|
pClass="substance"
|
|
:tips="substanceTips"
|
|
v-if="substance.length === 0"
|
|
>
|
|
</has-no-data>
|
|
<!-- 相关动态 -->
|
|
<div class="substance" v-else>
|
|
<div
|
|
v-for="(sub, index) in substance"
|
|
:key="index"
|
|
@click="informationDetails(sub)"
|
|
>
|
|
<div class="substance-title">
|
|
<i v-show="isNew(sub.pubTime)" class="newI">new</i>
|
|
<i class="el-icon-document-copy" />
|
|
<span :title="sub.title">{{ sub.title }}</span>
|
|
</div>
|
|
<div class="substance-date">
|
|
<!-- <p>{{ sub.contentTxt }}</p>
|
|
<span v-if="sub.pubTime != null && sub.pubTime !== ''">{{
|
|
$dateFormat(new Date(sub.pubTime), "yyyy-MM-dd")
|
|
}}</span> -->
|
|
<span class="time">{{ getDate(sub.pubTime) }}</span>
|
|
</div>
|
|
</div>
|
|
<loading :loading="loading">正在查找相关动态...</loading>
|
|
</div>
|
|
<pagination
|
|
:total="total"
|
|
@pageChange="pageChange"
|
|
@pageSizeChange="pageSizeChange"
|
|
></pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'DynamicInformationMore',
|
|
data () {
|
|
return {
|
|
// 头部搜索框
|
|
dynamic: {
|
|
keyWord: '',
|
|
openData: '',
|
|
closeData: ''
|
|
},
|
|
result: '全部资料',
|
|
value11: '',
|
|
substance: [],
|
|
page: 1, // 当前页数
|
|
total: 0, // 总条数
|
|
loading: false,
|
|
queryFlag: false, // 是否查找
|
|
searchFlag: false
|
|
}
|
|
},
|
|
methods: {
|
|
moreClick () {
|
|
|
|
},
|
|
// new
|
|
isNew (pubTime) {
|
|
if (pubTime != null && pubTime !== '' && pubTime !== undefined) {
|
|
pubTime = pubTime.replace(new RegExp(/-/gm), '/')
|
|
return (
|
|
new Date().getTime() - new Date(pubTime).getTime() <
|
|
7 * 24 * 3600 * 1000
|
|
)
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
/**
|
|
* @description: 日期转换
|
|
* @author: chenxiaoxi
|
|
* @date: 2018/11/01 10:20:12
|
|
*/
|
|
dateFormat (date) {
|
|
let year = new Date(date).getFullYear()
|
|
let month = new Date(date).getMonth() + 1
|
|
let day = new Date(date).getDate()
|
|
return (
|
|
year +
|
|
'-' +
|
|
(month < 10 ? '0' + month : month) +
|
|
'-' +
|
|
(day < 10 ? '0' + day : day)
|
|
)
|
|
},
|
|
getDate (date) {
|
|
return date !== undefined && date != null ? date.split(' ')[0] : ''
|
|
},
|
|
queryKeyWords () {
|
|
// let search = JSON.stringify(this.dynamic)
|
|
let obj = {}
|
|
obj.keyWord = this.dynamic.keyWord
|
|
obj.openData = this.dynamic.openData
|
|
? this.dateFormat(this.dynamic.openData, 'yyyy-MM-dd')
|
|
: ''
|
|
obj.closeData = this.dynamic.closeData
|
|
? this.dateFormat(this.dynamic.closeData, 'yyyy-MM-dd')
|
|
: ''
|
|
let search = JSON.stringify(obj)
|
|
this.$store.commit('setDynamicSearchHistory', search)
|
|
this.queryFlag = true
|
|
this.$http.get(
|
|
'lawss/msgDynamicInfo/page',
|
|
{
|
|
pubTime1: this.dynamic.openData
|
|
? this.dateFormat(this.dynamic.openData, 'yyyy-MM-dd')
|
|
: '',
|
|
pubTime2: this.dynamic.closeData
|
|
? this.dateFormat(this.dynamic.closeData, 'yyyy-MM-dd')
|
|
: '',
|
|
title: this.dynamic.keyWord,
|
|
page: this.page,
|
|
pageSize: this.$store.getters.userInfo.configContent
|
|
},
|
|
{
|
|
_this: this,
|
|
loading: 'loading'
|
|
},
|
|
(res) => {
|
|
this.substance = res.data.list
|
|
this.total = res.data.count
|
|
},
|
|
(e) => {}
|
|
)
|
|
},
|
|
// 查询
|
|
querySearchWords () {
|
|
// this.page = 1
|
|
this.result = '搜索结果 '
|
|
this.queryKeyWords()
|
|
},
|
|
// 清空
|
|
empty () {
|
|
this.dynamic.keyWord = ''
|
|
this.dynamic.openData = ''
|
|
this.dynamic.closeData = ''
|
|
this.result = '最近资料'
|
|
this.queryKeyWords()
|
|
},
|
|
/**
|
|
* @description:条件查找动态
|
|
* @author: zhaochunfeng
|
|
* @date: 2018/10/29 11:09:25
|
|
*/
|
|
// 页码改变的回调
|
|
pageChange (page) {
|
|
this.page = page
|
|
this.querySearchWords()
|
|
},
|
|
// 每页跳数改变回调
|
|
pageSizeChange () {
|
|
this.querySearchWords()
|
|
},
|
|
// 查看详情
|
|
informationDetails (information) {
|
|
this.$store.commit('setDetailMap', this.$route.path)
|
|
const route = this.$router.resolve({
|
|
name: 'DynamicInfomationDetails2',
|
|
query: {
|
|
id: information.id,
|
|
pageType: information.msgType + '_MSG'
|
|
}
|
|
})
|
|
// console.log(route)
|
|
window.open(route.href, '_blank')
|
|
},
|
|
// 返回
|
|
back () {
|
|
this.$router.push('/dynamicInformation')
|
|
}
|
|
},
|
|
components: {},
|
|
props: {},
|
|
computed: {
|
|
...mapGetters(['getRoleModule']),
|
|
// 查找提示
|
|
substanceTips () {
|
|
return this.queryFlag === true ? '未找到相关动态' : '请输入您的查找条件'
|
|
}
|
|
},
|
|
watch: {
|
|
$route: {
|
|
deep: true,
|
|
handler (val) {
|
|
this.queryFlag = false
|
|
}
|
|
},
|
|
loading (val) {
|
|
if (val) {
|
|
$('.substance').css('overflow-y', 'hidden')
|
|
} else {
|
|
$('.substance').css('overflow-y', 'auto')
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.dynamic.keyWord = this.$route.query.keywords
|
|
this.dynamic.openData = this.$route.query.startTime
|
|
this.dynamic.closeData = this.$route.query.endTime
|
|
// 如果有一个条件不为空,则进行查找
|
|
this.queryKeyWords()
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import "~@/assets/styles/style";
|
|
@import "~@/assets/styles/mixins";
|
|
#queryDynamicInformation {
|
|
.flex();
|
|
padding: 15px;
|
|
height: 100%;
|
|
background: #ffffff;
|
|
overflow-y: auto;
|
|
.query-dynamic-information-left {
|
|
.flex();
|
|
justify-content: center;
|
|
margin-right: 10px;
|
|
width: 280px;
|
|
.dynamic-search {
|
|
width: 280px;
|
|
.dynamic-search-header {
|
|
.flex();
|
|
padding-bottom: 5px;
|
|
h5 {
|
|
flex: 1;
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
.dynamic-search-line {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: @boxBgColor;
|
|
margin-bottom: 5px;
|
|
}
|
|
.dynamic-search-center {
|
|
.search-btn {
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 32px;
|
|
font-size: 12px;
|
|
}
|
|
.winput {
|
|
/deep/.el-input__inner {
|
|
width: 250px;
|
|
}
|
|
}
|
|
.wbtn {
|
|
/deep/.el-button--small {
|
|
width: 122px;
|
|
}
|
|
}
|
|
/deep/.el-input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
h5 {
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.query-dynamic-information-right {
|
|
flex: 1;
|
|
position: relative;
|
|
height: 100%;
|
|
border: 1px solid #ddd;
|
|
overflow-x: auto;
|
|
.substance {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(~"100% - 81px");
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
overflow-y: auto;
|
|
& > div {
|
|
.flex();
|
|
justify-content: space-between;
|
|
.substance-title {
|
|
display: flex;
|
|
padding: 10px 5px;
|
|
max-width: 80%;
|
|
& > span {
|
|
display: inline-block;
|
|
margin-left: 3px;
|
|
width: 100%;
|
|
.ellipsis();
|
|
}
|
|
}
|
|
.substance-title:hover {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
color: @baseColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.result {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
color: #3d3d3d;
|
|
}
|
|
.newI {
|
|
font-style: italic;
|
|
color: #e4393c;
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|