<el-form-item label="成果专利">
<el-button size="small" @click="addTab(editableTabsValue)" plain>
点击添加
</el-button>
</el-form-item>
<el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" style="margin: 20px 40px;">
<el-tab-pane
v-for="(item, index) in releaseRuleForm.fjList"
:key="item.fjIndex"
:label="item.name == '' ? '附件' + (index + 1) : item.name"
:name="item.fjIndex">
<el-form-item label="名称" :prop="'fjList.' + index + '.name'">
<el-input v-model="item.name"/>
</el-form-item>
<el-form-item label="人员" :prop="'fjList.' + index + '.user'">
<!--<el-input v-model="item.user"/>-->
<el-tag
:key="tag"
v-for="tag in item.users"
closable
:disable-transitions="false"
@close="item.users.splice(item.users.indexOf(tag));handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="(dynamicTags.indexOf(inputValue) == -1 && inputValue) ? item.users.push(inputValue):'';handleInputConfirm()"
@blur="(dynamicTags.indexOf(inputValue) == -1 && inputValue) ? item.users.push(inputValue):'';handleInputConfirm()"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">添加人员</el-button>
</el-form-item>
<el-form-item label="单位" :prop="'fjList.' + index + '.dept'">
<el-input v-model="item.dept"/>
</el-form-item>
<el-form-item label="类型" :prop="'fjList.' + index + '.type'">
<el-radio-group v-model="item.type">
<el-radio
v-for="it in cgTypeList"
:label="it.dictLabel"
/>
</el-radio-group>
</el-form-item>
<el-form-item label="附件" :prop="'fjList.' + index + '.photo'">
<ImageUpload v-model="item.photo"/>
</el-form-item>
</el-tab-pane>
</el-tabs>
//动态添加专利信息表单
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.releaseRuleForm.fjList.push({
fjIndex:newTabName,
name:'',
users:[],
dept:'',
depts:[],
type:'',
photo:'',
})
this.editableTabsValue = newTabName;
},
removeTab(targetName) {
let tabs = this.releaseRuleForm.fjList;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.fjIndex === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.fjIndex;
}
}
});
}
this.editableTabsValue = activeName;
this.releaseRuleForm.fjList = tabs.filter((tab => tab.fjIndex !== targetName));
},
添加成功后的数据
ruleForm:{
name:'',
fjList:[
{
name:'张三,李四',//后台要接受逗号分隔的数据
users:['张三','李四'],
dept:'单位1,单位2',
depts:['单位1','单位2'],
type:'专利',
photo:'',
},
{
name:'王五,赵六',//后台要接受逗号分隔的数据
users:['王五','赵六'],
dept:'单位4,单位2',
depts:['单位4','单位2'],
type:'实用新型',
photo:'',
}
]
}