kun 19/10/1/20:45
This commit is contained in:
沈学坤
@@ -15,31 +15,35 @@
|
||||
<!-- 分类搜索 -->
|
||||
<div class="select-box">
|
||||
<select name="type" v-model="screeOut.type" @change="scree()">
|
||||
<option value="类型" disabled style="display:none;">类型</option>
|
||||
<option value="社会">社会</option>
|
||||
<option value="团体">团体</option>
|
||||
</select>
|
||||
<select name="time" v-model="screeOut.date_time" @change="scree()">
|
||||
<option value="登记时间" disabled style="display:none;">登记时间</option>
|
||||
<option value="09-18">09-18</option>
|
||||
<option value="09-19">09-19</option>
|
||||
</select>
|
||||
<select name="year" v-model="screeOut.date_year" @change="scree()">
|
||||
<option value="年检年份" disabled style="display:none;">年检年份</option>
|
||||
<option value="2017">2017</option>
|
||||
<option value="2019">2019</option>
|
||||
</select>
|
||||
<select name="condition" v-model="screeOut.zt" @change="scree()">
|
||||
<option value="0">good</option>
|
||||
<option value="1">bad</option>
|
||||
<option value="年检情况" disabled style="display:none;">年检情况</option>
|
||||
<option value="正常">正常</option>
|
||||
<option value="异常">异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 搜索记录 -->
|
||||
<template>
|
||||
<div class="record">
|
||||
<div class="list">
|
||||
<span>类型：社会团体</span>
|
||||
<span class="iconfont icon-cuowu"></span>
|
||||
<div class="record">
|
||||
<template v-for="(item,index) in record">
|
||||
<div class="list" :key="index" @click="searchRecord(item.nameOf)">
|
||||
<span>{{item.category + '：' + item.nameOf}}</span>
|
||||
<span class="iconfont icon-cuowu" @click="del(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="box-table">
|
||||
<div class="caption">
|
||||
@@ -65,31 +69,31 @@
|
||||
v-for="(item,index) in sData"
|
||||
:key="index"
|
||||
:class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
|
||||
class="tr"
|
||||
>
|
||||
<td>{{item.id}}</td>
|
||||
<td>{{item.organization}}</td>
|
||||
<td>{{item.credit}}</td>
|
||||
<td>{{item.type}}</td>
|
||||
<td>{{item.representative}}</td>
|
||||
<td>{{item.date_year + '-' + item.date_time}}</td>
|
||||
<td v-if="item.zt == 0" style="color:#2fd63f">正常</td>
|
||||
<td v-if="item.zt == 1" style="color:#e13232">异常</td>
|
||||
<td v-if="item.zt == '正常'" style="color:#2fd63f">{{item.zt}}</td>
|
||||
<td v-if="item.zt == '异常'" style="color:#e13232">{{item.zt}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="searchValue.length > 0">
|
||||
<tr
|
||||
class="tr"
|
||||
v-for="(item,index) in searchValue"
|
||||
: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_year + '-' + item.date_time}}</td>
|
||||
<td v-if="item.zt == 0" style="color:#2fd63f">正常</td>
|
||||
<td v-if="item.zt == 1" style="color:#e13232">异常</td>
|
||||
<td v-if="item.zt == '正常'" style="color:#2fd63f">{{item.zt}}</td>
|
||||
<td v-if="item.zt == '异常'" style="color:#e13232">{{item.zt}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
@@ -120,11 +124,12 @@ export default {
|
||||
},
|
||||
searchVal: "",
|
||||
searchValue: [],
|
||||
record: [],
|
||||
screeOut: {
|
||||
type: '',
|
||||
date_time: '',
|
||||
date_year: '',
|
||||
zt: '',
|
||||
type: '类型',
|
||||
date_time: '登记时间',
|
||||
date_year: '年检年份',
|
||||
zt: '年检情况'
|
||||
},
|
||||
sData: [
|
||||
{
|
||||
@@ -135,7 +140,7 @@ export default {
|
||||
representative: "王五",
|
||||
date_time: "09-18",
|
||||
date_year: '2019',
|
||||
zt: 0
|
||||
zt: '正常'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -145,7 +150,7 @@ export default {
|
||||
representative: "李四",
|
||||
date_time: "09-19",
|
||||
date_year: '2017',
|
||||
zt: 1
|
||||
zt: '正常'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@@ -155,7 +160,7 @@ export default {
|
||||
representative: "李四",
|
||||
date_time: "09-19",
|
||||
date_year: '2019',
|
||||
zt: 1
|
||||
zt: '异常'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@@ -165,7 +170,7 @@ export default {
|
||||
representative: "李四",
|
||||
date_time: "09-18",
|
||||
date_year: '2017',
|
||||
zt: 1
|
||||
zt: '异常'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
@@ -175,7 +180,7 @@ export default {
|
||||
representative: "李四",
|
||||
date_time: "09-19",
|
||||
date_year: '2019',
|
||||
zt: 1
|
||||
zt: '正常'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -185,32 +190,94 @@ export default {
|
||||
representative: "张三",
|
||||
date_time: "09-18",
|
||||
date_year: "2017",
|
||||
zt: 0
|
||||
zt: '异常'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
watch: {
|
||||
record(newVal, oldVal) { }
|
||||
},
|
||||
methods: {
|
||||
/** 删除单条数据 */
|
||||
del(index) {
|
||||
let delArr = this.record.splice(index, 1)
|
||||
},
|
||||
/** 调用搜索函数 */
|
||||
searchRecord(str) {
|
||||
this.getSearch(str)
|
||||
},
|
||||
/** 筛选函数 */
|
||||
scree() {
|
||||
if (this.screeOut.type == "类型") {
|
||||
this.screeOut.type = ''
|
||||
} else {
|
||||
this.record.push({ category: '类型', nameOf: this.screeOut.type })
|
||||
}
|
||||
|
||||
if (this.screeOut.date_time == "登记时间") {
|
||||
this.screeOut.date_time = ''
|
||||
} else {
|
||||
this.record.push({ category: '登记时间', nameOf: this.screeOut.date_time })
|
||||
}
|
||||
|
||||
if (this.screeOut.date_year == "年检年份") {
|
||||
this.screeOut.date_year = ''
|
||||
} else {
|
||||
this.record.push({ category: '年检年份', nameOf: this.screeOut.date_year })
|
||||
}
|
||||
|
||||
if (this.screeOut.zt == "年检情况") {
|
||||
this.screeOut.zt = ''
|
||||
} else {
|
||||
this.record.push({ category: '年检情况', nameOf: this.screeOut.zt })
|
||||
}
|
||||
|
||||
/**
|
||||
let hash = {};
|
||||
this.record = this.record.reduce((preVal, curVal) => {
|
||||
hash[curVal.nameOf] ? '' : hash[curVal.nameOf] = true && preVal.push(curVal);
|
||||
return preVal
|
||||
}, [])
|
||||
*/
|
||||
|
||||
this.record = this.$tool.arrayHeavy(this.record, 'nameOf')
|
||||
|
||||
let gData = this.$tool.multiFilter(this.sData, this.screeOut)
|
||||
if (gData != undefined && gData != '') {
|
||||
this.searchValue = gData
|
||||
} else {
|
||||
this.$message('您搜索的内容暂无~')
|
||||
}
|
||||
|
||||
if (this.screeOut.type == "") {
|
||||
this.screeOut.type = '类型'
|
||||
}
|
||||
if (this.screeOut.date_time == "") {
|
||||
this.screeOut.date_time = '登记时间'
|
||||
}
|
||||
if (this.screeOut.date_year == "") {
|
||||
this.screeOut.date_year = '年检年份'
|
||||
}
|
||||
if (this.screeOut.zt == "") {
|
||||
this.screeOut.zt = '年检情况'
|
||||
}
|
||||
},
|
||||
/** 搜索函数 */
|
||||
getSearch() {
|
||||
getSearch(str) {
|
||||
this.searchValue = [];
|
||||
if (this.searchVal === "") {
|
||||
|
||||
if (this.searchVal === "" && str !== "" && str !== undefined && str !== null && str !== 'null') {
|
||||
this.searchVal = str
|
||||
} else if (this.searchVal === "") {
|
||||
this.$message.warning("请输入搜索内容");
|
||||
return;
|
||||
}
|
||||
|
||||
let searchData = this.$tool.setSearch(this.sData, this.searchVal)
|
||||
// console.log(searchData);
|
||||
|
||||
|
||||
if (searchData != undefined && searchData != '') {
|
||||
this.searchValue = searchData
|
||||
@@ -218,18 +285,19 @@ export default {
|
||||
} else {
|
||||
this.$message('您搜索的内容暂无~')
|
||||
}
|
||||
|
||||
// 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);
|
||||
// }
|
||||
// });
|
||||
/*
|
||||
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);
|
||||
}
|
||||
});
|
||||
*/
|
||||
},
|
||||
/** 名单切换 */
|
||||
btn(index) {
|
||||
@@ -264,9 +332,32 @@ export default {
|
||||
|
||||
.box-table {
|
||||
width: 100%;
|
||||
margin-top: -25px;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
width: 1130px;
|
||||
counter-reset: items 0; /* 0 可以省略 */
|
||||
counter-increment: counter-name integer;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tr {
|
||||
counter-increment: items 1; /* 1 同样可以省略 */
|
||||
&:before {
|
||||
content: counter(items);
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
color: #595959;
|
||||
width: 86px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
line-height: 40px;
|
||||
@@ -279,6 +370,7 @@ export default {
|
||||
letter-spacing: 0px;
|
||||
color: #666666;
|
||||
background-color: #f6fafd;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 86px;
|
||||
@@ -286,26 +378,29 @@ export default {
|
||||
&:nth-of-type(2) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
width: 240px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(5) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
|
||||
}
|
||||
&:nth-of-type(6) {
|
||||
width: 180px;
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(7) {
|
||||
width: 144px;
|
||||
width: 140px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -325,35 +420,38 @@ export default {
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
box-sizing: border-box;
|
||||
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(2) {
|
||||
width: 240px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
width: 240px;
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(5) {
|
||||
width: 160px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
}
|
||||
&:nth-of-type(6) {
|
||||
width: 180px;
|
||||
width: 140px;
|
||||
border-left: 1px solid #dcebf6;
|
||||
border-right: 1px solid #dcebf6;
|
||||
}
|
||||
/*
|
||||
&:nth-of-type(7) {
|
||||
width: 144px;
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -424,6 +522,7 @@ export default {
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
color: #666666;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.iconfont {
|
||||
margin-left: 10px;
|
||||
|
||||
Reference in New Issue
Block a user