665 lines
17 KiB
Vue
665 lines
17 KiB
Vue
<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"
|
||
@keyup.enter="getSearch()"
|
||
/>
|
||
<label @click="getSearch()">搜索</label>
|
||
</div>
|
||
<!-- 分类搜索 -->
|
||
<div class="select-box">
|
||
<select name="type" v-model="type_value" @change="scree()">
|
||
<option value="组织类型">组织类型</option>
|
||
<template v-for="(type,index) in types">
|
||
<option :key="index" :value="index">{{type}}</option>
|
||
</template>
|
||
</select>
|
||
|
||
<select name="year" v-model="year_value" @change="scree()">
|
||
<option value="年检时间">年检时间</option>
|
||
<template v-for="(year,index) in years">
|
||
<option :key="index" :value="index">{{year}}</option>
|
||
</template>
|
||
</select>
|
||
|
||
<select name="condition" v-model="year_status" @change="scree()">
|
||
<option value="年检结果">年检结果</option>
|
||
<option value="0">不合格</option>
|
||
<option value="1">合格</option>
|
||
</select>
|
||
</div>
|
||
<!-- 搜索记录 -->
|
||
<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>
|
||
</template>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<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="(info,index) in conversion"
|
||
:key="index"
|
||
:class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
|
||
class="tr"
|
||
>
|
||
<td>{{info.name}}</td>
|
||
<td>{{info.unicode}}</td>
|
||
<td>{{info.society_type}}</td>
|
||
<td>{{info.legal_person}}</td>
|
||
<td>{{info.reg_time}}</td>
|
||
<td v-if="info.status == '白名单'" style="color:#2fd63f">正常</td>
|
||
<td v-if="info.status == '黑名单'" style="color:#e13232">异常</td>
|
||
</tr>
|
||
</template>
|
||
<template v-if="searchValue.length > 0">
|
||
<tr
|
||
class="tr"
|
||
v-for="(info,index) in searchValue"
|
||
:key="index"
|
||
:class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
|
||
>
|
||
<td>{{info.name}}</td>
|
||
<td>{{info.unicode}}</td>
|
||
<td>{{info.society_type}}</td>
|
||
<td>{{info.legal_person}}</td>
|
||
<td>{{info.reg_time}}</td>
|
||
<td v-if="info.status == '白名单'" style="color:#2fd63f">正常</td>
|
||
<td v-if="info.status == '黑名单'" style="color:#e13232">异常</td>
|
||
</tr>
|
||
</template>
|
||
</table>
|
||
</div>
|
||
<!-- 分页按钮 -->
|
||
<div class="page">
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
:pager-count="5"
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="totalCount"
|
||
></el-pagination>
|
||
</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: [],
|
||
record: [],
|
||
types: [],
|
||
years: '',
|
||
year_status: '年检结果',
|
||
type_value: '组织类型',
|
||
year_value: '年检时间',
|
||
bgData: [],
|
||
arr1: [],
|
||
arr0: [],
|
||
conversion: [],
|
||
pageSize: 1,
|
||
currentPage: 1,
|
||
totalCount: 1,
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {
|
||
record(newVal, oldVal) { }
|
||
},
|
||
methods: {
|
||
/** 筛选函数 */
|
||
scree() {
|
||
this.currentPage = 1;
|
||
if (this.sub == 0) {
|
||
this.sub = ''
|
||
} else if (this.sub == 1) {
|
||
this.sub = 0
|
||
} else {
|
||
this.sub = 1
|
||
}
|
||
this.getData(this.type_value, this.years[this.year_value], this.year_status, this.sub, this.currentPage);
|
||
if (this.sub == '') {
|
||
this.sub = 0
|
||
} else if (this.sub == 0) {
|
||
this.sub = 1
|
||
} else {
|
||
this.sub = 2
|
||
}
|
||
},
|
||
/** 删除单条数据 */
|
||
del(index) {
|
||
let delArr = this.record.splice(index, 1)
|
||
},
|
||
/** 调用搜索函数 */
|
||
searchRecord(str) {
|
||
this.getSearch(str)
|
||
},
|
||
|
||
/** 名单切换 */
|
||
btn(index) {
|
||
let s = this.sub;
|
||
s = index;
|
||
this.sub = s;
|
||
this.currentPage = 1;
|
||
switch (this.sub) {
|
||
case 0:
|
||
this.getData(this.type_value, this.years[this.year_value], this.year_status);
|
||
break;
|
||
case 1: this.getData(this.type_value, this.years[this.year_value], this.year_status, 0);
|
||
break;
|
||
case 2:
|
||
this.getData(this.type_value, this.years[this.year_value], this.year_status, 1);
|
||
break;
|
||
}
|
||
},
|
||
/** 获取后台数据 */
|
||
getData(type = this.type_value, year = this.years[this.year_value], yearStatus = this.year_status, status = '', page = this.currentPage) {
|
||
if (type == "组织类型") {
|
||
type = ''
|
||
// this.type_value = ''
|
||
}
|
||
|
||
if (year == '年检时间') {
|
||
year = ''
|
||
// this.years[this.year_value] = ''
|
||
}
|
||
|
||
if (yearStatus == '年检结果') {
|
||
yearStatus = ''
|
||
// this.year_status = ''
|
||
}
|
||
let _this = this
|
||
console.log(type);
|
||
|
||
this.$http({
|
||
method: 'post',
|
||
url: 'v1/society/society',
|
||
data: {
|
||
type: type,
|
||
year: year,
|
||
yearStatus: yearStatus,
|
||
status: status,
|
||
page: page
|
||
}
|
||
}).then(res => {
|
||
if (res.data.data.code !== 200) {
|
||
return;
|
||
}
|
||
// if (this.page == 1) {
|
||
if (res.data.data.data.info.length == 0) {
|
||
alert('您所查询的数据暂时没有！')
|
||
return;
|
||
} else {
|
||
_this.conversion = res.data.data.data.info
|
||
_this.totalCount = res.data.data.data.allPage
|
||
// console.log(_this.conversion);
|
||
}
|
||
_this.page++
|
||
})
|
||
// eslint-disable-next-line handle-callback-err
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
|
||
// console.log(this.type_value);
|
||
|
||
if (this.type_value === '') {
|
||
this.type_value = '组织类型'
|
||
}
|
||
|
||
if (this.years[this.year_value] === '') {
|
||
this.year_value = '年检时间'
|
||
}
|
||
|
||
if (this.year_status === '') {
|
||
this.year_status = '年检结果'
|
||
}
|
||
},
|
||
/** 获取类型 */
|
||
getDataG() {
|
||
let _this = this
|
||
this.$http({
|
||
method: 'get',
|
||
url: 'v1/society/get-type',
|
||
params: {}
|
||
}).then(res => {
|
||
if (res.data.code !== 200) {
|
||
return;
|
||
}
|
||
_this.types = res.data.data.type
|
||
_this.years = res.data.data.year
|
||
})
|
||
// eslint-disable-next-line handle-callback-err
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
/** 搜索函数 */
|
||
getSearch(str) {
|
||
this.searchValue = [];
|
||
|
||
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.bgData, this.searchVal)
|
||
|
||
if (searchData != undefined && searchData != '') {
|
||
this.searchValue = searchData
|
||
this.searchVal = "";
|
||
} else {
|
||
this.$message('您搜索的内容暂无~')
|
||
}
|
||
},
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.getPackData();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val;
|
||
this.getData()
|
||
this.getPackData();
|
||
},
|
||
getPackData() { }
|
||
},
|
||
created() {
|
||
this.getDataG()
|
||
this.getData()
|
||
},
|
||
mounted() { }
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.wrapper {
|
||
min-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;
|
||
|
||
.page {
|
||
margin-top: 60px;
|
||
height: 36px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
/deep/ .el-pagination.is-background .el-pager li {
|
||
color: #333 !important;
|
||
}
|
||
|
||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||
background-color: #e60012;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/deep/ .el-icon.el-icon-arrow-left::before {
|
||
content: '上一页';
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 1px;
|
||
color: #666;
|
||
}
|
||
|
||
/deep/ .el-pagination .btn-prev {
|
||
width: 80px;
|
||
}
|
||
|
||
/deep/ .el-pagination .btn-next {
|
||
width: 80px;
|
||
}
|
||
|
||
/deep/ .el-icon.el-icon-arrow-right::before {
|
||
content: '下一页';
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 1px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.box-table {
|
||
width: 100%;
|
||
margin-top: -25px;
|
||
|
||
table {
|
||
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;
|
||
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;
|
||
box-sizing: border-box;
|
||
|
||
&:nth-of-type(1) {
|
||
width: 86px;
|
||
}
|
||
&:nth-of-type(2) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(3) {
|
||
width: 240px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(4) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(5) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(6) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(7) {
|
||
width: 140px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
}
|
||
|
||
.bgcz {
|
||
background-color: #f6fafd;
|
||
}
|
||
.bgcbz {
|
||
background-color: #fff;
|
||
}
|
||
|
||
td {
|
||
border: none !important;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
height: 40px;
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
box-sizing: border-box;
|
||
color: #595959;
|
||
|
||
&:nth-of-type(1) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(2) {
|
||
width: 240px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(3) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(4) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(5) {
|
||
width: 160px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
&:nth-of-type(6) {
|
||
width: 140px;
|
||
border-left: 1px solid #dcebf6 !important;
|
||
}
|
||
/*
|
||
&: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: 121px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
margin-bottom: 25px;
|
||
|
||
.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') 90% center no-repeat;
|
||
background-size: 14px 8px;
|
||
// width: 170px;
|
||
padding: 0 30px;
|
||
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>
|