<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/iview.css" />
<script type="text/javascript" src="js/vue.min.js" ></script>
<script type="text/javascript" src="js/iview.min.js" ></script>
</head>
<body>
<div id="app">
<i-form ref="issueInfo" :model="issueInfo":rules="clueValidate">
<Row>
<i-col span="8" offset="2">
<form-item label="接收类型" prop="JSLX">
<radio-group v-model="issueInfo.JSLX" @on-change="jslx">
<Radio label="01">城市接收</Radio>
<Radio label="02">个人接收</Radio>
</radio-group>
</form-item>
</i-col>
</Row>
<Row style="margin-top: 2em;">
<i-col span="8" offset="2">
<form-item label="城市" prop="company">
<i-select v-model="issueInfo.company" @on-change="v=>{companyChange(v,'type')}" :multiple='issueInfo.multipleSelection' label-in-value='true' >
<i-option v-for='(item,index) in companyList' :key='item.value' :value='item.value'>{{item.label}}</i-option>
</i-select>
</form-item>
</i-col>
<i-col span="8" offset="2" v-show='issueInfo.show'>
<form-item label="人" prop="person">
<i-select v-model="issueInfo.person" @on-change="v=>{personChange(v,'type')}">
<i-option v-for='(item,index) in personList' :key='index' :value='item.value'>
{{item.label}}
</i-option>
</i-select>
</form-item>
</i-col>
</Row>
<Row>
<i-col span="23">
<i-button size="large" type="default" style="float: right;margin-left: 1em;" @click="handleReset('formInline')">重置</i-button>
<i-button size="large" type="primary" style="float: right;" @click="handleSubmit('issueInfo')">查询</i-button>
</i-col>
</Row>
<Row>
<i-col span="21" offset="2">
<div style="background: #C5C8CE;margin-top: 2em;">
<form-item label="选择人:">
<div>
</div>
</form-item>
<div v-show="issueInfo.selectionUnit">
<form-item label="选择单位:">
<span v-for="(item,index) in issueInfo.dwList" :key="index" :value="item">
{{item}}
</span>
</form-item>
</div>
</div>
</i-col>
</Row>
</i-form>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
issueInfo:{
company:'',
person:'',
JSLX:'01',
show:false,
selectionUnit:true,
multipleSelection:true,
dwList:'',
},
personAllList:[],
companyList:[
{value:'01',label:'天津'},{value:'02',label:'北京'},{value:'03',label:'河北'},
],
personList:[],
clueValidate:{
JSLX:[
{ required: true, message: '请输入案件编号', trigger: 'change', }
],
company:[
{ required: true, message: '请输入侦查类别', trigger: 'change',type:'array' }
],
person:[
{ required: true, message: '请输入提供线索日期', trigger: 'change' }
]
},
},
methods:{
companyChange(value){
console.log(value)
if(this.issueInfo.JSLX=="01"){
var name=[];
for(var i = 0; i < value.length; i++){
name.push(value[i].label);
};
this.issueInfo.dwList=name;
}else if(this.issueInfo.JSLX=="02"){//lcsz 选个人
this.personList=[]; // 清空数组
//拿到companyList数据里面的value做判断
if(value.value=="01"){ // 判断我的value是天津北京还是河北。
this.personAllList=[{value:"tj1",label:"天津1",parentCom:"01"},{value:"tj2",label:"天津2",parentCom:"01"},]
}else if(value.value=="02"){
this.personAllList=[{value:"bj1",label:"北京1",parentCom:"02"},{value:"bj2",label:"北京2",parentCom:"02"},]
}else if(value.value=="03"){
this.personAllList=[{value:"hb1",label:"河北1",parentCom:"03"},{value:"hb2",label:"河北2",parentCom:"03"},]
};
for(let i=0;i<this.personAllList.length;i++){
let obj=new Object();
obj.label=this.personAllList[i].label;
obj.value=this.personAllList[i].value;
this.personList.push(obj);
}
}
},
personChange(value){
},
handleSubmit(name){
this.$refs[name].validate((valid) => {
if (valid) {
alert(111);
}else{
alert(222);
}
})
},
jslx(name){
if(name=="01"){
this.issueInfo.show=false;
this.issueInfo.multipleSelection=true;
this.clueValidate.company=[{ required: true, message: '请输入侦查类别', trigger: 'change',type:'array' }];
this.issueInfo.selectionUnit=false;
this.issueInfo.company=[];
}else{
this.issueInfo.show=true;
this.issueInfo.multipleSelection=false;
this.clueValidate.company=[{ required: true, message: '请输入侦查类别', trigger: 'change'}];
this.issueInfo.company="";
}
}
}
})
</script>
</body>
</html>