<template>
<div>
<a-form-model ref="form" :model="formModel">
<a-row>
<a-col :span="24" style="border-top: 0px; text-align: center">
<div class="main-title">
<span>申报人才科研成绩</span>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="24" class="bg-gray">
<div>
<span>1、主要科研成果获奖情况（按获奖时间顺序填写，含专利、新药证书等不超过15项。）</span>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>序号</div>
</div>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div>时间</div>
</div>
</a-col>
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>成果名称</div>
</div>
</a-col>
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>授奖部门及等级</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>本人排名</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in gainList" :key="'gainList'+index" type="flex" class="row_center">
<a-col :span="2">{{ item.showIndex }}</a-col>
<a-col :span="4">
<a-form-model-item :prop="`gainList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'change',}">
<a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :prop="`gainList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item :prop="`gainList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<a-form-model-item :prop="`gainList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteGainArray(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<a-button type="dashed" style="width: 20%" @click="addGainArray()">
<a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
</a-button>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="24" class="bg-gray">
<div>
<span>2、发表的主要科研论文（按时间顺序填写，不超过15篇，SCI论文等外文论文需提供影响因子证明（科技部门批准机构开具的证明））</span>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>序号</div>
</div>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div>时间</div>
</div>
</a-col>
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>论文名称</div>
</div>
</a-col>
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>发表刊物</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>本人排名</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in thesisList" :key="'thesisList'+index" type="flex" class="row_center">
<a-col :span="2">{{ item.showIndex }}</a-col>
<a-col :span="4">
<a-form-model-item :prop="`thesisList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :prop="`thesisList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item :prop="`thesisList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<a-form-model-item :prop="`thesisList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteThesisArray(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<a-button type="dashed" style="width: 20%" @click="addThesisArray()">
<a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
</a-button>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="24" class="bg-gray">
<div>
<span>3、出版的专著和教材（按出版时间顺序填写，不超过15本。）</span>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>序号</div>
</div>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div>时间</div>
</div>
</a-col>
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>专著及教材</div>
</div>
</a-col>
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>出版社</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>本人排名</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in appearList" :key="'appearList'+index" type="flex" class="row_center">
<a-col :span="2">{{ item.showIndex }}</a-col>
<a-col :span="4">
<a-form-model-item :prop="`appearList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :prop="`appearList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item :prop="`appearList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<a-form-model-item :prop="`appearList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteAppearArray(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<a-button type="dashed" style="width: 20%" @click="addAppearArray()">
<a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
</a-button>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="24" class="bg-gray">
<div>
<span>4、承担的课题（按立项时间顺序填写，不超过15项。）</span>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>序号</div>
</div>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div>时间</div>
</div>
</a-col>
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>课题名称</div>
</div>
</a-col>
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>项目来源</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>本人排名</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in courseList" :key="'courseList'+index" type="flex" class="row_center">
<a-col :span="2">{{ item.showIndex }}</a-col>
<a-col :span="4">
<a-form-model-item :prop="`courseList.${index}.gainDate`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.gainDate" style="width: 140px" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :prop="`courseList.${index}.gainName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainName" :maxLength="50" placeholder="成果名称" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item :prop="`courseList.${index}.gainDescription`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainDescription" :maxLength="100" placeholder="授奖部门及等级" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<a-form-model-item :prop="`courseList.${index}.gainRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.gainRemark" :maxLength="50" placeholder="本人排名" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteCourseArray(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<a-button type="dashed" style="width: 20%" @click="addCourseArray()">
<a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
</a-button>
</div>
</a-col>
</a-row>
</a-form-model>
</div>
</template>
<script>
import moment from "moment";
const Gain = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f01', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }
const Thesis = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f02', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }
const Appear = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f03', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }
const Course = { id: null, talentId: null, gainType: 'dff44c90-ff10-11ef-b6cb-0c42a1380f04', gainDate: null, gainName: null, gainDescription: null, gainRemark: null, showIndex: null, }
export default {
name: "scientificGainEdit",
props: {
scientificList: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
gainList: [],
thesisList: [],
appearList: [],
courseList: [],
formModel: {
gainList: [],
thesisList: [],
appearList: [],
courseList: [],
}
};
},
created() {
if (this.scientificList && this.scientificList.length > 0) {
this.gainList = this.scientificList
.filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f01')
.sort((a, b) => a.showIndex - b.showIndex)
this.thesisList = this.scientificList
.filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f02')
.sort((a, b) => a.showIndex - b.showIndex)
this.appearList = this.scientificList
.filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f03')
.sort((a, b) => a.showIndex - b.showIndex)
this.courseList = this.scientificList
.filter(item => item.gainType === 'dff44c90-ff10-11ef-b6cb-0c42a1380f04')
.sort((a, b) => a.showIndex - b.showIndex)
this.formModel.gainList = this.gainList
this.formModel.thesisList = this.thesisList
this.formModel.appearList = this.appearList
this.formModel.courseList = this.courseList
} else {
this.gainList = []
this.thesisList = []
this.appearList = []
this.courseList = []
this.formModel.gainList = []
this.formModel.thesisList = []
this.formModel.appearList = []
this.formModel.courseList = []
}
},
methods: {
addGainArray() {
const newItem = {
...Gain,
showIndex: this.gainList.length + 1
}
this.gainList.push(newItem);
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate()
})
},
deleteGainArray(item) {
let index = this.gainList.indexOf(item)
if (index !== -1) {
this.gainList.splice(index, 1)
}
},
addThesisArray() {
const newItem = {
...Thesis,
showIndex: this.thesisList.length + 1
}
this.thesisList.push(newItem)
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate()
})
},
deleteThesisArray(item) {
let index = this.thesisList.indexOf(item)
if (index !== -1) {
this.thesisList.splice(index, 1)
}
},
addAppearArray() {
const newItem = {
...Appear,
showIndex: this.appearList.length + 1
}
this.appearList.push(newItem)
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate()
})
},
deleteAppearArray(item) {
let index = this.appearList.indexOf(item)
if (index !== -1) {
this.appearList.splice(index, 1)
}
},
addCourseArray() {
const newItem = {
...Course,
showIndex: this.courseList.length + 1
}
this.courseList.push(newItem)
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate()
})
},
deleteCourseArray(item) {
let index = this.courseList.indexOf(item)
if (index !== -1) {
this.courseList.splice(index, 1)
}
},
mergeScientificList() {
this.scientificList.length = 0
const allLists = [
...this.gainList.map((item, index) => {
const newItem = { ...item }
newItem.showIndex = index + 1
return newItem
}),
...this.thesisList.map((item, index) => {
const newItem = { ...item }
newItem.showIndex = index + 1
return newItem
}),
...this.appearList.map((item, index) => {
const newItem = { ...item }
newItem.showIndex = index + 1
return newItem
}),
...this.courseList.map((item, index) => {
const newItem = { ...item }
newItem.showIndex = index + 1
return newItem
})
]
this.scientificList.push(...allLists)
return this.scientificList
}
},
watch: {
gainList: {
handler(val) {
this.formModel.gainList = val
},
deep: true,
immediate: true
},
thesisList: {
handler(val) {
this.formModel.thesisList = val
},
deep: true,
immediate: true
},
appearList: {
handler(val) {
this.formModel.appearList = val
},
deep: true,
immediate: true
},
courseList: {
handler(val) {
this.formModel.courseList = val
},
deep: true,
immediate: true
},
}
};
</script>