用于研究 多选
作者：互联网
<template>
<div ref="estableBody">
<el-row style="margin-bottom:10px;">
<el-col :span="3">
<label>所属单位</label>
<el-select v-model="selectDwMc" size="mini" class="ajlbselect" ref="checkDw" :clearable="true" :multiple="true" placeholder="请选择" @clear="clearSelectDw" @remove-tag="clearSelectDw">
<el-input
size="mini"
class="searchCaseLbbmInput"
type="small"
placeholder="输入关键字进行过滤"
v-model="searchText"
clearable>
</el-input>
<el-option :value="unitData.nlist" style="height: auto">
<el-tree v-if="unitData.length" style="max-height:325px;overflow: auto" default-expand-all :data="unitData" node-key="NodeId" :default-checked-keys="unitData.nlist" ref="unittree" show-checkbox class="caseTypesTree" :expand-on-click-node="true" highlight-current :props="defaultProps" :check-strictly="true" @check="handleCheckDwChange" :filter-node-method="filterNode"></el-tree>
</el-option>
</el-select>
</el-col >
<el-col :span="3">
<label>部门受案号</label>
<el-input style="width:calc(100% - 10px);" v-model="searchForm.caseNumber" filterable placeholder="输入部门受案号" size="mini" clearable></el-input>
</el-col>
<el-col :span="3">
<label>案件名称</label>
<el-input style="width:calc(100% - 10px);" v-model="searchForm.caseName" filterable placeholder="输入案件名称" size="mini" clearable></el-input>
</el-col>
<el-col :span="3" style="min-height:20px;" v-if="ajlb&&ajlb.length">
<label>案件类别</label>
<el-select size="mini" style="width:calc(100% - 10px);" v-model="searchForm.ajlb" filterable placeholder="输入案件类别" clearable>
<el-option
v-for="item in ajlb"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<label>受理日期</label>
<el-date-picker style="width:calc(100% - 10px);" size="mini" class=""
v-model="searchForm.timeRange"
type="daterange"
:picker-options="pickerOptions2"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
</el-col>
<el-col :span="3" style="min-height:20px;" v-if="wslb&&wslb.length">
<label>文书类别</label>
<el-select size="mini" style="width:calc(100% - 10px);" v-model="searchForm.wslb" filterable placeholder="请选择" clearable>
<el-option
v-for="item in wslb"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-col>
<el-col :span="3" style="min-height:20px;">
<label >罪名</label>
<el-select v-model="searchForm.ay" v-if="!ayList.length" class="aySelect" size="mini" ref="checkCaseType" placeholder="罪名" style="width:100%;" clearable @clear="ayClear">
<el-input
size="mini"
style="width:calc(100% - 20px);margin-left:10px;margin-bottom:10px;"
class="searchCaseTypeInput"
type="small"
placeholder="输入关键字进行过滤"
v-model="searchText1"
clearable>
</el-input>
<el-option :value="searchForm.aykey" style="height: auto">
<el-tree v-if="ayTree.length" :data="ayTree" node-key="bm" ref="tree" class="caseTypesTree" :expand-on-click-node="true" highlight-current :current-node-key="searchForm.aykey" :props="{children:'children',label:'mc'}" @node-click="handleNode" :filter-node-method="filterNode1"></el-tree>
</el-option>
</el-select>
<el-select size="mini" v-if="ayList.length" style="width:calc(100% - 10px);" v-model="searchForm.ay" filterable placeholder="输入罪名查找" clearable>
<el-option
v-for="item in ayList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-col>
<el-col :span="3" style="float:right;text-align:right;line-height:40px;">
<el-button size="mini" type="primary" @click="confirm">查询</el-button>
<el-button size="mini" type="default" @click="clear">重置</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
import aysjys from '@/assets/json/ays.json'
import dwsjys from "@/assets/json/dws.json"
import {queryDwlist} from "@/api/tyyw";
import logoUrl from "@/assets/shortLogo.png";
export default {
name: 'es-query',
props:{
ayList:{
type:Array,
default:()=>{
return []
}
},
ajlb:{
type:Array,
default:()=>{
return ['一审公诉案件','一审公诉案件(未检)','审查逮捕案件','审查逮捕案件(未检)','未成年人特别程序案件','二审上诉案件','二审上诉案件（未检)','二审抗诉案件','二审抗诉案件（未检)','法院决定再（提）审案件','附条件不起诉案件','发回一审重审案件','法院决定再审案件']
}
},
wslb:{
type:Array,
default:()=>{
return []
}
},
},
data () {
return {
tableWidth:500,
tableHeight:500,
logoUrl:logoUrl,
searchForm:{
// orgNo:"(\"320503\" OR \"320505\")",
// orgNo:320505,
orgNo:null,
ay:null,
timeRange:[],
Keywords:[],
wslb:[],
caseNumber:null,
caseName:null,
ajlb:null,
aykey:null
},
showUnitPopver:false,
selectDwMc:[],
searchText:null,
searchText1:null,
ayTree:[],
unitData:[],
unitMcs:{},
defaultProps:{
"children":"children",
"label":"NodeText"
},
popoverVisible:false,
popoverUnder:false,
pickerOptions2: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
}
},
components:{
},
mounted(){
console.log(this.ayList,6667,this.ajlb, this.resDataAll)
let vm = this;
let res = aysjys;
let ays = res.data.objects;
this.ayTree = this.treeDataTranslate(ays, 'dm', 'fdm')
console.log(this.ayTree);
this.init();
},
activated(){
let vm = this;
},
watch: {
searchText(val) {
this.$refs.unittree.filter(val);
},
searchText1(val){
this.$refs.tree.filter(val);
}
},
methods: {
init(){
this.getUnitData();
},
getUnitData(){
let vm = this;
queryDwlist(null,{hideloading:true,notip:true,timeout:500}).then(res=>{
let list = res.data.data;
let unitMcs = {};
list.map((v)=>{
unitMcs[v.NodeId] = v.NodeText;
})
vm.unitMcs = unitMcs;
vm.unitData = vm.treeDataTranslate(list,"NodeId","PNodeId");
},error=>{
let res = dwsjys;
let list = res.data;
let nlist = [];
let unitMcs = {};
list.map((v)=>{
if(!unitMcs[v.NodeId]&&(v.NodeId==window.SITE_CONFIG["dwbm"]||v.PNodeId==window.SITE_CONFIG["dwbm"])){
unitMcs[v.NodeId] = v.NodeText;
delete v.children;
nlist.push(v);
}
})
vm.unitData = [];
vm.unitMcs = unitMcs;
vm.unitData = vm.treeDataTranslate(nlist,"NodeId","PNodeId");
})
},
filterNode(value, data) {
if (!value) return true;
return data.NodeText.indexOf(value) !== -1;
},
handleCheckDwChange(data,checked){
let vm = this;
vm.unitData.nlist= checked.checkedKeys;
vm.selectDwMc = checked.checkedKeys.length?(checked.checkedKeys.length>1?[vm.unitMcs[checked.checkedKeys[0]],(checked.checkedKeys.length-1)]:[vm.unitMcs[checked.checkedKeys[0]]]):[];
console.log(data,checked,vm.selectDwMc,vm.unitMcs,6969,vm.searchForm.orgNo);
let value =[]
vm.unitData.nlist.map((v,index)=>{
let one =`\"${v}\"`;
let OR ='OR';
if(index!==vm.unitData.nlist.length-1){
one +=OR;
}
value.push(one);
})
let org =value.join("");
let orgn='';
if(org.indexOf('OR')!=-1){
orgn=`(${org})`
}else{
orgn=org.split()
orgn.map((v,index)=>{
orgn=v.split("\"")[1]
})
}
vm.searchForm.orgNo=orgn
vm.showUnitPopver = false;
},
filterNode1(value, data) {
if (!value) return true;
return data.mc.indexOf(value) !== -1;
},
handleNode(data,node){
console.log(data);
this.searchForm.aykey = data.bm;
this.searchForm.ay = data.mc;
this.$refs["checkCaseType"].blur();
},
ayClear(){
this.searchForm.aykey = null;
this.searchForm.ay = null;
},
confirm(){
this.$emit("esQueryFormComplete",this.searchForm);
},
clearSelectDw(){
let vm=this;
this.$refs.unittree.setCheckedKeys([]);
vm.searchForm.orgNo=null;
this.selectDwMc = [];
},
clear(){
this.searchForm = {
orgNo:null,
ay:null,
timeRange:[],
Keywords:null,
wslb:[],
caseNumber:null,
caseName:null,
ajlb:null,
}
this.$refs.unittree.setCheckedKeys([]);
this.selectDwMc =[];
this.$emit("esQueryFormComplete",{});
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-popper.el-autocomplete-suggestion{
.popper__arrow::after{
border-width:6px!important;
}
}
.search {
margin-left: 40px;
}
.search .sear-box{
display: inline-block;
width: 558px;
height: 36px;
border: 2px solid #c4c7ce;
border-radius: 10px 0 0 10px;
border-right: 0;
overflow: visible;
vertical-align: middle;
}
.search .sear-box input{
outline: 0;
font: 16px/18px arial;
padding: 10px 0 10px 14px;
margin: 0;
width: 484px;
background: transparent;
border: 0;
}
.search .btn{
display:inline-block;
vertical-align: middle;
width: 112px;
cursor: pointer;
height: 40px;
line-height: 41px;
line-height: 40px\9;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 17px;
box-shadow: none;
font-weight: 400;
color: #fff;
text-align: center;
}
.info {
padding-left: 60px;
line-height: 30px;
font-size: 14px;
}
.info ul li {
list-style: none;
cursor: pointer;
}
.info ul li.cur{
color: #4e71f2;
}
</style>
标签：多选,研究,unitMcs,vm,start,let,用于,null,data 来源： https://blog.csdn.net/m0_49515138/article/details/121861488