<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>