420 lines
12 KiB
Vue
420 lines
12 KiB
Vue
<!-- 标准法规库 - 动态&资料 -->
|
|
<template>
|
|
<div class="searchForm" v-loading="loading">
|
|
<div
|
|
v-for="(item,index) in searchOption"
|
|
class="searchRow"
|
|
:key="index"
|
|
:ref="item.needOpen ? 'searchRowRef' : ''"
|
|
:class="{ 'needOpen': item.needOpen && item.enoughData && !item.openStatus}"
|
|
>
|
|
<span class="searchLabel">{{item.label}}:</span>
|
|
<div class="searchData">
|
|
<span
|
|
v-for="(option, optionIndex) in item.data"
|
|
:key="optionIndex"
|
|
@click="selectOPtion(option.value,index)"
|
|
:class="{ 'active': item.selectValue.includes(option.value) }"
|
|
>{{option.label}}</span>
|
|
</div>
|
|
<span
|
|
v-if="item.needOpen && item.enoughData"
|
|
class="openBtn"
|
|
@click="openRow(item)"
|
|
>{{ item.openStatus ? '收缩' : '展开' }}</span>
|
|
</div>
|
|
<div class="searchRow" style="margin:15px 21px 0 0;border:none;">
|
|
<el-form class="label-input-form" style="width: 100%;display: flex;" >
|
|
<el-form-item label="科目"
|
|
prop="dicTypeName"
|
|
class="my-form-item add-form-item">
|
|
<el-input v-model="subject" placeholder="请输入内容"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="生效日期"
|
|
prop="dicTypeName"
|
|
class="my-form-item add-form-item">
|
|
<el-date-picker
|
|
v-model="startDate"
|
|
type="daterange"
|
|
range-separator="—"
|
|
value-format="yyyy-MM-dd"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button icon="el-icon-search" type="primary" class="searchAngNewBtn" @click="reloadTable()"></el-button>
|
|
<el-button type="primary" @click="clearAllSearch()" class="searchAngNewBtn">清空查询</el-button>
|
|
</div>
|
|
<!-- <div class="searchRow" style="margin:15px 0">-->
|
|
<!-- <span class="searchLabel">科目:</span>-->
|
|
<!-- <el-input v-model="subject" placeholder="请输入内容" size="small" style="width:200px"></el-input>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="searchRow">-->
|
|
<!-- <span class="searchLabel">生效日期:</span>-->
|
|
<!-- <el-date-picker-->
|
|
<!-- v-model="startDate"-->
|
|
<!-- type="daterange"-->
|
|
<!-- size="small"-->
|
|
<!-- range-separator="至"-->
|
|
<!-- value-format="yyyy-MM-dd"-->
|
|
<!-- start-placeholder="开始日期"-->
|
|
<!-- end-placeholder="结束日期"-->
|
|
<!-- ></el-date-picker>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="searchBtn">-->
|
|
<!-- <el-button icon="el-icon-search" type="primary" class="searchAngNewBtn" @click="reloadTable()"></el-button>-->
|
|
<!-- <el-button type="primary" @click="clearAllSearch()" class="searchAngNewBtn">清空查询</el-button>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const all = {label: '全部', value: 'all'}
|
|
export default {
|
|
name: 'searchForm',
|
|
props: {
|
|
keywordsValue: ''
|
|
},
|
|
data () {
|
|
return {
|
|
subject: '',
|
|
startDate: '',
|
|
loading: true,
|
|
// 搜索行数据
|
|
searchOption: [
|
|
{
|
|
label: '区域',
|
|
data: [],
|
|
selectValue: ['all']
|
|
},
|
|
{
|
|
label: '国家',
|
|
data: [],
|
|
// 是否需要展开
|
|
needOpen: true,
|
|
openStatus: false,
|
|
enoughData: false,
|
|
selectValue: ['all']
|
|
},
|
|
{
|
|
label: '来源类型',
|
|
data: [{label: '全部', value: 'all'}, {label: '强制法规', value: 'QZFG'}, {label: '机构测评', value: 'JGPC'}, {label: '市场要求', value: 'SCXQ'}, {label: '顾客需求', value: 'GKXQ'}, {label: '竞争策略', value: 'JZCL'}, {label: '部件专属要求', value: 'ZSXQ'}, {label: '其他', value: 'other'}],
|
|
selectValue: ['all']
|
|
},
|
|
{
|
|
label: '车辆类型',
|
|
data: [{label: '全部', value: 'all'}, {label: 'M1', value: 'M1'}, {label: 'M2', value: 'M2'}, {label: 'N1', value: 'N1'}, {label: 'N2', value: 'N2'}],
|
|
selectValue: ['all']
|
|
},
|
|
{
|
|
label: '车辆品类',
|
|
data: [{label: '全部', value: 'all'}, {label: '三厢轿车', value: 'SXJC'}, {label: '两厢轿车', value: 'LXJC'}, {label: '承载式SUV', value: 'CZSUV'}, {label: '非承载式SUV', value: 'FCZSUV'}, {label: '皮卡', value: 'PK'}, {label: '轻客', value: 'QK'}, {label: '轻货', value: 'QH'}],
|
|
selectValue: ['all']
|
|
},
|
|
{
|
|
label: '领域',
|
|
data: [],
|
|
selectValue: ['all']
|
|
},
|
|
{
|
|
label: '子领域',
|
|
data: [],
|
|
selectValue: ['all'],
|
|
// 是否需要展开
|
|
needOpen: true,
|
|
enoughData: false,
|
|
openStatus: false
|
|
},
|
|
// {
|
|
// label: '系统',
|
|
// data: [],
|
|
// selectValue: ['all']
|
|
// },
|
|
// {
|
|
// label: '总成',
|
|
// data: [],
|
|
// selectValue: ['all']
|
|
// },
|
|
// {
|
|
// label: '部件',
|
|
// data: [],
|
|
// selectValue: ['all']
|
|
// },
|
|
{
|
|
label: '部门',
|
|
data: [],
|
|
selectValue: ['all']
|
|
}
|
|
]
|
|
}
|
|
},
|
|
created () {
|
|
this.getOptionData()
|
|
},
|
|
methods: {
|
|
/*
|
|
*@description: 获取选项数据
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-27 10:47:29
|
|
*/
|
|
getOptionData () {
|
|
this.$http.get('sys/org/getTree', {}, {_this: this}, res => {
|
|
this.searchOption[7].data = res.data.map(item => {
|
|
return {
|
|
label: item.orgName,
|
|
value: item.id
|
|
}
|
|
})
|
|
this.searchOption[7].data.unshift(all)
|
|
})
|
|
this.$http.get('sys/dictype/getDicTypeListCode', {}, {_this: this}, res => {
|
|
Object.keys(res.data).forEach(item => {
|
|
switch (item) {
|
|
case 'REGION' :
|
|
this.searchOption[0].data = res.data[item]
|
|
this.searchOption[0].data.unshift(all)
|
|
break
|
|
case 'COUNTRY' :
|
|
this.searchOption[1].data = res.data[item]
|
|
this.searchOption[1].data.unshift(all)
|
|
break
|
|
case 'AREA' :
|
|
this.searchOption[5].data = res.data[item]
|
|
this.searchOption[5].data.unshift(all)
|
|
break
|
|
case 'SUBAREA' :
|
|
this.searchOption[6].data = res.data[item]
|
|
this.searchOption[6].data.unshift(all)
|
|
break
|
|
// case 'RELATESYSTEM' :
|
|
// this.searchOption[7].data = res.data[item]
|
|
// this.searchOption[7].data.unshift(all)
|
|
// break
|
|
// case 'RELATEASSEM' :
|
|
// this.searchOption[8].data = res.data[item]
|
|
// this.searchOption[8].data.unshift(all)
|
|
// break
|
|
// case 'RELATEPARTS' :
|
|
// this.searchOption[9].data = res.data[item]
|
|
// this.searchOption[9].data.unshift(all)
|
|
// break
|
|
}
|
|
})
|
|
this.ifHaveEnoughData()
|
|
this.loading = false
|
|
})
|
|
},
|
|
/*
|
|
*@description: 点击选项
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-18 17:14:17
|
|
*/
|
|
selectOPtion (value, index) {
|
|
let optionArr = this.searchOption[index]['selectValue']
|
|
let optionIndex = optionArr.indexOf(value)
|
|
// 取消选中
|
|
if (optionIndex !== -1) {
|
|
// 只有全部不取消
|
|
if (!(optionArr.length === 1 && value === 'all')) {
|
|
optionArr.splice(optionIndex, 1)
|
|
}
|
|
// 取消之后没有选中的了，选中全部
|
|
if (optionArr.length === 0) {
|
|
optionArr.push('all')
|
|
}
|
|
} else {
|
|
if (value === 'all') {
|
|
optionArr.splice(0, optionArr.length)
|
|
optionArr.push('all')
|
|
} else {
|
|
optionArr.push(value)
|
|
if (optionArr[0] === 'all') {
|
|
optionArr.shift()
|
|
}
|
|
}
|
|
}
|
|
this.handleOptionClick(optionArr, index)
|
|
},
|
|
/*
|
|
*@description:处理选项点击
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-27 13:50:21
|
|
*/
|
|
handleOptionClick (value, index) {
|
|
// 区域
|
|
if (index === 0 || index === 5 || index === 7 || index === 8) {
|
|
this.loading = true
|
|
this.regionChange(value, index)
|
|
}
|
|
this.reloadTable()
|
|
},
|
|
/*
|
|
*@description: 区域改变
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-27 11:32:22
|
|
*/
|
|
regionChange (value, index) {
|
|
// 全部
|
|
if (value[0] === 'all') {
|
|
this.$http.get('sys/dictype/getDicTypeListCode', {}, {_this: this}, res => {
|
|
this.searchOption[index + 1].data = index === 0 ? res.data['COUNTRY'] : res.data['SUBAREA']
|
|
this.searchOption[index + 1].data.unshift(all)
|
|
this.ifHaveEnoughData()
|
|
this.loading = false
|
|
})
|
|
} else {
|
|
this.$http.get('sys/dictype/getDicTypeByParentCodes', {
|
|
dicTypeCode: value.toString()
|
|
}, {
|
|
_this: this
|
|
}, res => {
|
|
if (res.ok) {
|
|
this.searchOption[index + 1].data = res.data
|
|
this.searchOption[index + 1].data.unshift(all)
|
|
this.searchOption[index + 1].selectValue = ['all']
|
|
this.ifHaveEnoughData()
|
|
this.loading = false
|
|
}
|
|
})
|
|
}
|
|
},
|
|
/*
|
|
*@description: 搜索数据
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-27 15:38:13
|
|
*/
|
|
reloadTable () {
|
|
let searchdata = this.searchOption.map(item => item.selectValue)
|
|
let data = {}
|
|
const keys = ['regionList', 'countryList', 'sourceTypeList', 'carTypeList', 'carCategoryList', 'areaList', 'subAreaList', 'departmentList']
|
|
keys.forEach((key, index) => {
|
|
if (searchdata[index][0] !== 'all') {
|
|
data[key] = searchdata[index]
|
|
}
|
|
})
|
|
data['allSubjects'] = this.subject ? this.subject : null
|
|
data['effectiveDate1'] = this.startDate[0] ? this.startDate[0] : null
|
|
data['effectiveDate2'] = this.startDate[1] ? this.startDate[1] : null
|
|
this.$emit('searchData', data)
|
|
},
|
|
/*
|
|
*@description: 点击展开
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-18 17:14:33
|
|
*/
|
|
openRow (item) {
|
|
item.openStatus = !item.openStatus
|
|
},
|
|
/*
|
|
*@description:重置
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-18 17:14:52
|
|
*/
|
|
clearAllSearch () {
|
|
Object.keys(this.searchOption).forEach(key => {
|
|
this.searchOption[key].selectValue = ['all']
|
|
})
|
|
this.startDate = ''
|
|
this.subject = ''
|
|
},
|
|
/*
|
|
*@description:判断数据是否大于一行
|
|
*@modifyContent:
|
|
*@author: 刘志超
|
|
*@date: 2020-09-18 17:15:55
|
|
*/
|
|
ifHaveEnoughData () {
|
|
this.searchOption[1].enoughData = false
|
|
this.searchOption[6].enoughData = false
|
|
this.$nextTick(function () {
|
|
let cur = this.$refs['searchRowRef']
|
|
cur.forEach((dom, index) => {
|
|
// 数据足够多的时候才需要显示展开
|
|
if (dom.clientHeight > 40) {
|
|
// 这里searchOption里的index是写死的
|
|
index === 0 ? this.searchOption[1].enoughData = true : this.searchOption[6].enoughData = true
|
|
} else {
|
|
index === 0 ? this.searchOption[1].enoughData = false : this.searchOption[6].enoughData = false
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.searchForm {
|
|
padding: 10px;
|
|
.my-form-item {
|
|
display: flex;
|
|
margin-right: 10px;
|
|
margin-bottom: 0;
|
|
}
|
|
.needOpen {
|
|
max-height: 35px;
|
|
overflow: hidden;
|
|
}
|
|
.searchRow {
|
|
border-bottom: 1px dashed #efefef;
|
|
font-size: 15px;
|
|
line-height: 35px;
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: 5px;
|
|
|
|
.searchLabel {
|
|
flex-shrink: 0;
|
|
flex-basis: 80px;
|
|
}
|
|
|
|
.searchData {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.openBtn {
|
|
flex-shrink: 0;
|
|
color:#3391ce;
|
|
// align-self: flex-end;
|
|
}
|
|
|
|
span {
|
|
margin-right: 15px;
|
|
padding: 0px 7px;
|
|
transition: all 0.3s ease;
|
|
user-select: none;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
.searchBtn {
|
|
margin-top: 20px;
|
|
}
|
|
.active {
|
|
background: #3391ce;
|
|
color: #fff;
|
|
line-height: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
.searchForm {
|
|
.el-range-separator {
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
.el-table th {
|
|
background: rgb(248, 248, 249) !important;
|
|
}
|
|
</style>
|