code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,390 @@
|
||||
<!-- 标准法规库 - 动态&资料 -->
|
||||
<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 round 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;
|
||||
border-radius: 5px;
|
||||
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>
|
||||
Reference in New Issue
Block a user