<template>
<div>
<a-row>
<a-col :span="24">
<div class="tb-title">
<span>项目组成员 <strong>(注：项目负责人填写到第一行)</strong><a-button type="primary" size="small" style="margin-left:18px;" @click="addMember">添加成员</a-button></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="1" class="bg-gray">
<div class="special-middle">
<div>姓名</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div>性别</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div>出生年月</div>
</div>
</a-col>
<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>证件号码</div>
</div>
</a-col>
<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>国别或地区</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>工作单位</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div>职称</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div>最高学位</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div>电子邮箱</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div>手机</div>
</div>
</a-col>
<!-- <a-col :span="1" class="bg-gray">
<div class="special-middle">
<div >电话</div>
</div>
</a-col>
<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>项目分工</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-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<div>
<a-row v-for="(item, index) in dataList" :key="'memberEdit'+index" type="flex" class="row_center">
<a-col :span="1">
<div class="special-middle">
<div>
{{ index + 1 }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.name }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.sex }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ moment(item.birthday).format('YYYY-MM-DD') }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.certificateTypeName }}
</div>
</div>
</a-col>
<a-col :span="2">
<div class="special-middle">
<div>
{{ item.certId }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.nationName }}
</div>
</div>
</a-col>
<a-col :span="2">
<div class="special-middle">
<div>
{{ item.country }}
</div>
</div>
</a-col>
<a-col :span="2">
<div class="special-middle">
<div>
{{ item.workUnit }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.titleName }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.degreeName }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.email }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.mobile }}
</div>
</div>
</a-col>
<!-- <a-col :span="1">
<div class="special-middle">
<div>
{{ item.telephone }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
{{ item.fax }}
</div>
</div>
</a-col> -->
<a-col :span="2">
<div class="special-middle">
<div>
{{ item.projWork }}
</div>
</div>
</a-col>
<a-col :span="2">
<div class="special-middle">
<div>
{{ item.forMonths }}
</div>
</div>
</a-col>
<a-col :span="2">
<div class="special-middle">
<div>
{{ item.specName }}
</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="memberUp(index)"></a-button>
<a-button icon="arrow-down" type="primary" shape="circle" size="small" style="margin-left:5px;" :disabled="dataList.length == index + 1" @click="menberDown(index)"></a-button>
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeMembers(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
<a-button type="link" size="small" @click="editMember(item,index)">修改</a-button>
</div>
</div>
</a-col>
</a-row>
</div>
<a-modal v-model="visibleEdit" v-if="visibleEdit" title="项目组成员（添加/修改）" width="60%" :footer="null" :dialog-style="{ top: '20%' }" destroyOnClose :maskClosable="false">
<member-edit :memObject.sync="memObject" @close="closeWindow" />
</a-modal>
</div>
</template>
<script>
//用法 <proj-group-member :members.sync="formData.members" />
import memberEdit from '@/views/report/project/components/memberEdit'
import moment from 'moment'
const Member = {
name: null,
sex: null,
birthday: null,
certificateType: null,
certificateTypeName: null,
certId: null,
nation: null,
nationName: null,
country: null,
workUnit: null,
title: null,
titleName: null,
degree: null,
degreeName: null,
email: null,
mobile: null,
telephone: null,
fax: null,
projWork: null,
forMonths: null,
spec: null,
specName: null
}
export default {
name: 'projectMemberEdit',
data () {
return {
memObject: {},
isEdit: false,
memIndex: 0,
visibleEdit: false,
}
},
props: {
dataList: {
type: Array,
default: () => {
return []
}
},
},
components: {
memberEdit
},
created () {
},
methods: {
moment,
closeWindow (value) {
if (!this.isEdit) {
this.memObject = {}
this.dataList.push(value)
this.visibleEdit = false
} else {
this.dataList.splice(this.memIndex, 1, value);
this.memObject = {}
this.memIndex = 0
this.isEdit = false
this.visibleEdit = false
}
},
editMember (obj, index) {
this.memObject = obj
this.isEdit = true
this.memIndex = index
this.visibleEdit = true
},
addMember () {//添加成员
this.memObject = { ...Member }
this.visibleEdit = true
},
removeMembers (item) {//移除成员
let index = this.dataList.indexOf(item)
if (index !== -1) {
this.dataList.splice(index, 1)
}
},
memberToTop (item) {//成员置顶
let index = this.dataList.indexOf(item)
if (index !== -1) {
this.dataList.splice(index, 1)
this.dataList.unshift({ ...item })
}
},
memberUp (index) {
let arr = this.dataList
arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
},
menberDown (index) {
let arr = this.dataList
arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
}
}
}
</script>
<style scoped lang="less">
</style>