<template>
<div class="form-container">
<Form
ref="classForm"
:model="form"
:rules="rules"
>
<div v-for="(items,index) in subjectListInner" :key="index">
<FormItem
label=""
>
<Select
v-model="items.project"
clearable
style="width:200px; margin-right: 30px;"
placeholder="请选择所属项目"
@on-change="val => handleChange('project', val, index)"
>
<Option
v-for="item in items.projectList"
:key="item.value"
:value="item.value"
>{
{
item.label }}</Option>
</Select>
<Select
v-model="items.firstSubject"
:disabled="items.project === ''"
clearable
style="width:200px; margin-right: 30px;"
placeholder="一级科目"
@on-change="val => handleChange('first', val, index)"
>
<Option
v-for="item in items.firstSubjectOptions"
:key="item.id"
:value="item.id"
>{
{
item.name }}</Option>
</Select>
<Select
v-if="items.secondSubjectOptions"
v-model="items.secondSubject"
:disabled="items.firstSubject === ''"
clearable
style="width:200px"
placeholder="二级科目"
@on-change="val => handleChange('second', val, index)"
>
<Option
v-for="item in items.secondSubjectOptions"
:key="item.id"
:value="item.id"
>{
{
item.name }}</Option>
</Select>
<span @click="handleDelete(index)">
<Icon type="md-remove" size="24" />
</span>
</FormItem>
</div>
<span @click="add">
<Icon type="md-add" size="24" />
</span>
</Form>
</div>
</template>
<script>
export default {
props: {
subject: {
type: Array,
default: () => {
return [];
}
},
firstsubjectoptions: {
type: Array,
default: () => {
return [];
}
},
secondsubjectoptions: {
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
form: {
project: '', // 所属项目
firstSubject: '', // 一级科目
firstSubjectDesc: '', // 一级科目描述
secondSubject: '', // 二级科目
secondSubjectDesc: '' // 二级科目描述
},
rules: {
firstSubject: {
required: true,
message: '请选择科目'
}
},
// 项目
projectList: [{
value: '公务员',
label: '公务员'
}, {
value: '事业单位',
label: '事业单位'
}],
subjectListInner: this.subject || []
};
},
watch: {
subject(newVal, oldval) {
// console.log('e1', JSON.stringify(newval) + JSON.stringify(oldval));
// 引用类型 故深拷贝一份 做隔离
this.subjectListInner = JSON.parse(JSON.stringify(newVal));
for (let i = 0; i < this.subjectListInner.length; i++) {
this.$set(this.subjectListInner[i], 'projectList', this.projectList);
this.$set(this.subjectListInner[i], 'firstSubjectOptions', this.firstsubjectoptions);
this.$set(this.subjectListInner[i], 'secondSubjectOptions', this.secondsubjectoptions);
const firstItem = this.subjectListInner[i].firstSubjectOptions.find(item => item.id === this.subjectListInner[i].firstSubject);
this.$set(this.subjectListInner[i], 'secondSubjectOptions', firstItem ? firstItem.twoSubject : null);
}
},
firstsubjectoptions(newval, oldval) {
for (let i = 0; i < this.subjectListInner.length; i++) {
this.$set(this.subjectListInner[i], 'projectList', this.projectList);
this.$set(this.subjectListInner[i], 'firstSubjectOptions', newval);
this.$set(this.subjectListInner[i], 'secondSubjectOptions', this.secondsubjectoptions);
const firstItem = this.subjectListInner[i].firstSubjectOptions.find(item => item.id === this.subjectListInner[i].firstSubject);
this.$set(this.subjectListInner[i], 'secondSubjectOptions', firstItem ? firstItem.twoSubject : null);
}
}
},
created() {
},
mounted() {
},
methods: {
emitChange() {
const temp = [];
for (let index = 0; index < this.subjectListInner.length; index++) {
const element = this.subjectListInner[index];
const subjectJson = {
project: element.project || '', firstSubject: element.firstSubject || '', firstSubjectDesc: element.firstSubjectDesc || '', secondSubject: element.secondSubject || '', secondSubjectDesc: element.secondSubjectDesc || '' };
temp.push(subjectJson);
}
this.$emit('subjectChange', temp);
},
add() {
this.subjectListInner.push({
project: '', projectList: this.projectList, firstSubject: null, firstSubjectDesc: '', firstSubjectOptions: this.firstsubjectoptions, secondSubject: null, secondSubjectDesc: '', secondSubjectOptions: [] });
this.emitChange();
},
handleDelete(index) {
this.subjectListInner.splice(index, 1);
this.emitChange();
},
// 一级考点变化函数
handleChange(type, val, index) {
if (type === 'project') {
this.subjectListInner[index].firstSubject = '';
this.subjectListInner[index].firstSubjectDesc = '';
this.subjectListInner[index].secondSubject = '';
this.subjectListInner[index].secondSubjectDesc = '';
} else if (type === 'first') {
this.subjectListInner[index].secondSubject = '';
this.subjectListInner[index].secondSubjectDesc = '';
if (val) {
const firstItem = this.subjectListInner[index].firstSubjectOptions.find(item => item.id === val);
this.subjectListInner[index].firstSubjectDesc = firstItem.name;
this.subjectListInner[index].secondSubjectOptions = firstItem.twoSubject;
}
} else if (type === 'second' && this.subjectListInner[index].secondSubjectOptions && val) {
const secondItem = this.subjectListInner[index].secondSubjectOptions.find(item => item.id === val);
this.subjectListInner[index].secondSubjectDesc = secondItem.name;
}
this.emitChange();
}
}
};
</script>
<style scoped>
</style>
changeSubject(e) {
console.log('e8', e);
// this.form.subject = e;
this.$set(this.form, 'subject', e);
console.log('e9', this.form.subject);
}
<MutilItemSelect :subject="form.subject" :firstsubjectoptions="firstSubjectOptions" :secondsubjectoptions="secondSubjectOptions" @subjectChange="changeSubject" />
自定义组件 引用类型造成的问题
猜你喜欢
转载自blog.csdn.net/sinat_36017053/article/details/121420614
今日推荐
周排行