<template> <div> <a-row> <a-col :span="24"> <div class="tb-title"> <span>项目组成员 <strong>(注:第一行请填写项目负责人)</strong></span> </div> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="1" class="bg-gray"> <div class="special-middle"> <div>序号</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div class="required">姓名</div> </div> </a-col> <a-col :span="4" class="bg-gray"> <div class="special-middle"> <div class="required">身份证号</div> </div> </a-col> <a-col :span="4" class="bg-gray"> <div class="special-middle"> <div class="required">职称</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div class="required">学历</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div class="required">学位</div> </div> </a-col> <a-col :span="5" class="bg-gray"> <div class="special-middle"> <div class="required">现从事专业</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div class="required">所在单位</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 members" :key="'members'+index" type="flex" class="row_center"> <a-col :span="1"> <div class="special-middle"> <div> {{ index + 1 }} </div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div> <a-form-model-item :prop="'members.' + index + '.name'" :rules="{required: true,message: '*',trigger: 'blur',}"> <a-input v-model="item.name" :maxLength="20" placeholder="姓名" style="width: 90%" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div> <a-form-model-item :prop="'members.' + index + '.certId'" :rules="[{required: true,message: '*',trigger: 'blur',},{ required: true, validator: checkIdentitytionId, trigger: 'blur' }]"> <a-input v-model="item.certId" :maxLength="20" placeholder="身份证号" style="width: 90%" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div> <a-form-model-item :prop="'members.' + index + '.title'" :rules="{required: true, message: '*',trigger: 'change',}"> <para-multi-select v-model="item.title" :width="100" :typeId="7" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div> <a-form-model-item :prop="'members.' + index + '.education'" :rules="{required: true, message: '*',trigger: 'change',}"> <para-select v-model="item.education" :typeId="8" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div> <a-form-model-item :prop="'members.' + index + '.degree'" :rules="{required: true, message: '*',trigger: 'change',}"> <para-select v-model="item.degree" :typeId="9" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="5"> <div class="special-middle"> <div> <a-form-model-item :prop="'members.' + index + '.spec'" :rules="{required: true,message: '*',trigger: 'change',}"> <para-multi-select v-model="item.spec" :width="120" :typeId="57" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div> <a-form-model-item :prop="'members.' + index + '.workUnit'" :rules="{required: true,message: '*',trigger: 'blur',}"> <a-input v-model="item.workUnit" :maxLength="50" placeholder="工作单位" style="width: 90%" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div> <a-button icon="arrow-up" type="primary" shape="circle" size="small" :disabled="index == 0" @click="moveUp(index)"></a-button> <a-button icon="arrow-down" type="primary" shape="circle" size="small" style="margin-left:3px" :disabled="members.length == index + 1" @click="moveDown(index)"></a-button> <a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="removeArray(item)"> <a-button type="link" size="small">[删除]</a-button> </a-popconfirm> </div> </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: 50%" @click="addArray"> <a-icon type="plus" /> 添加 </a-button> </div> </a-col> </a-row> </div> </template> <script> //用法 <proj-group-member :members.sync="formData.members" /> import { checkIdentitytionId } from "@/views/utils/common" const Model = { name: null, certId: null, title: null, education: null, degree: null, spec: null, workUnit: null } export default { name: 'ProjGroupMember', data () { return { } }, props: { members: { type: Array, default: () => { return [] } }, }, components: { }, created () { }, methods: { checkIdentitytionId, moveToTop (item) {//成员置顶 let index = this.members.indexOf(item) if (index !== -1) { this.members.splice(index, 1) this.members.unshift({ ...item }) } }, moveUp (index) { let arr = this.members arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])) }, moveDown (index) { let arr = this.members arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])) }, addArray () {//添加成员 this.members.push({ ...Model }) }, removeArray (item) {//移除成员 let index = this.members.indexOf(item) if (index !== -1) { this.members.splice(index, 1) } }, } } </script>