kun 9/25 9:21
This commit is contained in:
沈学坤
510
src/views/InformationQuery.vue
Normal file
510
src/views/InformationQuery.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<header-nav :index_num="index_num"></header-nav>
|
||||
<div id="box">
|
||||
<!-- 搜索框 -->
|
||||
<div class="search">
|
||||
<input type="text"
|
||||
placeholder="请输入搜索内容"
|
||||
v-model.trim="searchVal" />
|
||||
<label @click="getSearch()">搜索</label>
|
||||
</div>
|
||||
<!-- 分类搜索 -->
|
||||
<div class="select-box">
|
||||
<select name="type"
|
||||
id>
|
||||
<option value>社会</option>
|
||||
<option value>团体</option>
|
||||
</select>
|
||||
<select name="time"
|
||||
id>
|
||||
<option value>09-18</option>
|
||||
<option value>09-19</option>
|
||||
</select>
|
||||
<select name="year"
|
||||
id>
|
||||
<option value>2017</option>
|
||||
<option value>2019</option>
|
||||
</select>
|
||||
<select name="condition"
|
||||
id>
|
||||
<option value>good</option>
|
||||
<option value>bad</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 搜索记录 -->
|
||||
<template>
|
||||
<div class="record">
|
||||
<div class="list">
|
||||
<span>类型：社会团体</span>
|
||||
<span class="iconfont icon-cuowu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 表格 -->
|
||||
<div class="box-table">
|
||||
<div class="caption">
|
||||
<span v-for="(list,index) in text"
|
||||
:class="sub == index ? 'color' : ''"
|
||||
:key="index"
|
||||
@click="btn(index)">{{list}}</span>
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>社会组织名称</th>
|
||||
<th>统一社会信用代码</th>
|
||||
<th>社会组织类型</th>
|
||||
<th>法定代表人</th>
|
||||
<th>成立登记日期</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
<template v-if="searchValue.length == 0">
|
||||
<tr v-for="(item,index) in sData"
|
||||
:key="index"
|
||||
:class="index % 2 == 0 ? 'bgcbz' : 'bgcz'">
|
||||
<td>{{item.id}}</td>
|
||||
<td>{{item.organization}}</td>
|
||||
<td>{{item.credit}}</td>
|
||||
<td>{{item.type}}</td>
|
||||
<td>{{item.representative}}</td>
|
||||
<td>{{item.date}}</td>
|
||||
<td v-if="item.zt == 0"
|
||||
style="color:#2fd63f">正常</td>
|
||||
<td v-if="item.zt == 1"
|
||||
style="color:#e13232">异常</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="searchValue.length > 0">
|
||||
<tr v-for="(item,index) in searchValue"
|
||||
:key="index"
|
||||
:class="index % 2 == 0 ? 'bgcbz' : 'bgcz'">
|
||||
<td v-html="item.id">{{item.id}}</td>
|
||||
<td v-html="item.organization">{{item.organization}}</td>
|
||||
<td v-html="item.credit">{{item.credit}}</td>
|
||||
<td v-html="item.type">{{item.type}}</td>
|
||||
<td v-html="item.representative">{{item.representative}}</td>
|
||||
<td v-html="item.date">{{item.date}}</td>
|
||||
<td v-if="item.zt == 0"
|
||||
style="color:#2fd63f">正常</td>
|
||||
<td v-if="item.zt == 1"
|
||||
style="color:#e13232">异常</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<footer-nav class="footer"></footer-nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import HeaderNav from "../components/HeaderNav";
|
||||
/* eslint-disable */
|
||||
import FooterNav from "../components/FooterNav";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HeaderNav,
|
||||
FooterNav
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
index_num: 1,
|
||||
text: ["全部", "异常名单", "白名单"],
|
||||
sub: 0,
|
||||
imgUrl: {
|
||||
xa: require("../../static/img/xa.png")
|
||||
},
|
||||
searchVal: "",
|
||||
searchValue: [],
|
||||
sData: [
|
||||
{
|
||||
id: 1,
|
||||
organization: "劳动经济学会",
|
||||
credit: "51100000MJ000035X2",
|
||||
type: "团体",
|
||||
representative: "王五",
|
||||
date: "2019-01-14",
|
||||
zt: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
organization: "华为",
|
||||
credit: "51100000MJ000035X2",
|
||||
type: "社会",
|
||||
representative: "李四",
|
||||
date: "2019-10-14",
|
||||
zt: 1
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
organization: "华为",
|
||||
credit: "51100000MJ000035X2",
|
||||
type: "社会",
|
||||
representative: "李四",
|
||||
date: "2019-10-14",
|
||||
zt: 1
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
organization: "华为",
|
||||
credit: "51100000MJ000035X2",
|
||||
type: "社会",
|
||||
representative: "李四",
|
||||
date: "2019-10-14",
|
||||
zt: 1
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
organization: "华为",
|
||||
credit: "51100000MJ000035X2",
|
||||
type: "社会",
|
||||
representative: "李四",
|
||||
date: "2019-10-14",
|
||||
zt: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
organization: "小米",
|
||||
credit: "51100000MJ000035X2",
|
||||
type: "手机",
|
||||
representative: "张三",
|
||||
date: "2019-11-14",
|
||||
zt: 0
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
/** 搜索函数 */
|
||||
getSearch() {
|
||||
this.searchValue = [];
|
||||
if (this.searchVal === "") {
|
||||
this.$message.warning("请输入搜索内容");
|
||||
return;
|
||||
}
|
||||
this.sData.forEach((item, index) => {
|
||||
if (
|
||||
item.organization.indexOf(this.searchVal) > -1 ||
|
||||
item.credit.indexOf(this.searchVal) > -1 ||
|
||||
item.type.indexOf(this.searchVal) > -1 ||
|
||||
item.representative.indexOf(this.searchVal) > -1 ||
|
||||
item.date.indexOf(this.searchVal) > -1
|
||||
) {
|
||||
this.searchValue.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
if (this.searchValue != "") {
|
||||
this.searchValue.map(item => {
|
||||
//遍历
|
||||
item.organization = this.brightKeyword(item.organization);
|
||||
item.credit = this.brightKeyword(item.credit);
|
||||
item.type = this.brightKeyword(item.type);
|
||||
item.representative = this.brightKeyword(item.representative);
|
||||
item.date = this.brightKeyword(item.date);
|
||||
}); //到这里search方法结束
|
||||
}
|
||||
*/
|
||||
this.searchVal = "";
|
||||
},
|
||||
|
||||
/** 高亮函数 */
|
||||
/*
|
||||
brightKeyword(val) {
|
||||
let keyword = this.searchVal; //获取输入框输入的内容
|
||||
if (val.indexOf(keyword) !== -1) {
|
||||
//判断这个字段中是否包含keyword
|
||||
//如果包含的话，就把这个字段中的那一部分进行替换成html字符
|
||||
return val.replace(keyword, `<mark>${keyword}</mark>`);
|
||||
} else {
|
||||
return val;
|
||||
}
|
||||
val = "";
|
||||
},*/
|
||||
|
||||
btn(index) {
|
||||
let s = this.sub;
|
||||
s = index;
|
||||
this.sub = s;
|
||||
},
|
||||
|
||||
getData() {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.wrapper {
|
||||
width: 1280px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
#box {
|
||||
width: 1200px;
|
||||
background-color: #ffffff;
|
||||
margin: 40px auto 80px;
|
||||
box-sizing: border-box;
|
||||
padding: 35px 30px 86px;
|
||||
|
||||
.box-table {
|
||||
width: 100%;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
th {
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
color: #666666;
|
||||
background-color: #f6fafd;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 86px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
width: 240px;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(5) {
|
||||
width: 160px;
|
||||
}
|
||||
&:nth-of-type(6) {
|
||||
width: 180px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(7) {
|
||||
width: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
.bgcz {
|
||||
background-color: #f6fafd;
|
||||
}
|
||||
.bgcbz {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
color: #595959;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 86px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
width: 240px;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(5) {
|
||||
width: 160px;
|
||||
}
|
||||
&:nth-of-type(6) {
|
||||
width: 180px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(7) {
|
||||
width: 144px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.caption {
|
||||
width: 1140px;
|
||||
height: 38px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
margin-top: 76px;
|
||||
margin-bottom: 30px;
|
||||
padding-left: 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
margin-right: 49px;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 60px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
width: 110px;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
width: 89px;
|
||||
}
|
||||
}
|
||||
|
||||
.color {
|
||||
color: #e60012;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(#e60012, #e60012),
|
||||
linear-gradient(#ff7f7f, #ff7f7f);
|
||||
background-blend-mode: normal, normal;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
bottom: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.list {
|
||||
margin-right: 25px;
|
||||
border-radius: 4px;
|
||||
border: solid 1px #c7c7c7;
|
||||
padding: 10px 24px;
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
color: #666666;
|
||||
|
||||
.iconfont {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
select {
|
||||
color: #666 !important;
|
||||
font-size: 18px;
|
||||
&:nth-of-type(1) {
|
||||
/* 清除默认的箭头样式 */
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
/* 右侧添加小箭头的背景图 */
|
||||
background: url("../../static/img/xa.png") 90px center no-repeat;
|
||||
background-size: 14px 8px;
|
||||
width: 134px;
|
||||
height: 38px;
|
||||
background-color: #f9f8f8;
|
||||
border-radius: 4px;
|
||||
border: solid 1px #c7c7c7;
|
||||
}
|
||||
/* 清除默认的箭头样式 */
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
/* 右侧添加小箭头的背景图 */
|
||||
background: url("../../static/img/xa.png") 126px center no-repeat;
|
||||
background-size: 14px 8px;
|
||||
width: 170px;
|
||||
height: 38px;
|
||||
background-color: #f9f8f8;
|
||||
border-radius: 4px;
|
||||
border: solid 1px #c7c7c7;
|
||||
margin-right: 55px;
|
||||
padding-left: 30px;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
input {
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 2px;
|
||||
color: #666666;
|
||||
padding: 0 18px;
|
||||
box-sizing: border-box;
|
||||
width: 1025px;
|
||||
height: 50px;
|
||||
border: solid 1px #c7c7c7;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 96px;
|
||||
height: 50px;
|
||||
background-color: #e60012;
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 50px;
|
||||
letter-spacing: 0px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user