Skip to content

Y
yn-science-front
Commit b56e34b2 authored by wangxl's avatar wangxl
Browse files
Options

444

parent 8c66eed9
Show whitespace changes
Inline Side-by-side
Showing with 392 additions and 116 deletions
src/views/report/project/components/memberEdit.vue 0 → 100644
View file @ b56e34b2
<template>
<div class="app-content" style="height: 50vh;overflow: auto;">
<a-spin :spinning="loading" style="width: 100%;height: 100%;">
<div class="page-content">
<a-form-model ref="form" :model="formData" :rules="rules" style="border-top: 0px" class="from-table font-line-space">
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">姓名</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="name">
<a-input v-model="formData.name" :maxLength="20" placeholder="姓名" style="width: 40%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">证件类型</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="certificateType">
<para-select v-model="formData.certificateType" :typeId="49" :width="120" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">证件号码</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="certId">
<a-input v-model="formData.certId" :maxLength="20" placeholder="证件号" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">性别</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="sex">
<base-select v-model="formData.sex" :type="16" :isAll="true" :width="120" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">出生年月</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="birthday">
<a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.birthday" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">民族</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="nation">
<para-select v-model="formData.nation" :typeId="11" :width="120" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">国别或地区</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="country">
<a-input v-model="formData.country" :maxLength="50" placeholder="国别或地区" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">工作单位</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="workUnit">
<a-input v-model="formData.workUnit" :maxLength="50" placeholder="工作单位" style="width: 60%" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">最高学位</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="degree">
<para-select v-model="formData.degree" :typeId="9" :width="120" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">从事专业</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="spec">
<para-multi-select v-model="formData.spec" :typeId="42" :width="120" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">职称</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="title">
<para-multi-select v-model="formData.title" :typeId="7" :width="120" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">电子邮箱</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="email">
<a-input v-model="formData.email" :maxLength="50" placeholder="电子邮箱" style="width: 60%" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">手机</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="mobile">
<a-input v-model="formData.mobile" :maxLength="20" placeholder="手机" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<!-- <a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">电话</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="telephone">
<a-input v-model="formData.telephone" :maxLength="20" placeholder="电话号码" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">传真</div>
</div>
</a-col>
<a-col :span="20">
<a-form-model-item prop="fax">
<a-input v-model="formData.fax" :maxLength="20" placeholder="传真" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row> -->
<a-row type="flex">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">项目分工</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="projWork">
<a-input v-model="formData.projWork" :maxLength="20" placeholder="项目分工" style="width: 60%" />
</a-form-model-item>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div class="required">每年工作（月）</div>
</div>
</a-col>
<a-col :span="8">
<a-form-model-item prop="forMonths">
<a-input-number v-model="formData.forMonths" :min="0" :step="0.1" style="width: 60%" />
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</div>
<div class="page-footer">
<a-button style="margin-left: 10px" type="primary" @click="submit">保存</a-button>
</div>
</a-spin>
</div>
</template>
<script>
import { getType } from '@/views/utils/auth'
import paraMultiSelect from '@/views/components/common/paraMultiSelect'
import paraSelect from '@/views/components/common/paraSelect'
import baseSelect from '@/views/components/common/baseSelect'
export default {
name: "memberEdit",
components: {
paraMultiSelect, paraSelect, baseSelect
},
data () {
return {
formData1: {
name: null,
sex: null,
birthday: null,
certificateType: null,
certId: null,
nation: null,
country: null,
workUnit: null,
title: null,
degree: null,
email: null,
mobile: null,
telephone: null,
fax: null,
projWork: null,
forMonths: null,
spec: null
},
rules: {
name: [{ required: true, message: '*', trigger: 'blur' },],
sex: [{ required: true, message: '*', trigger: 'change' },],
birthday: [{ required: true, message: '*', trigger: 'change' },],
certificateType: [{ required: true, message: '*', trigger: 'change' },],
certId: [{ required: true, message: '*', trigger: 'blur' },],
nation: [{ required: true, message: '*', trigger: 'change' },],
country: [{ required: true, message: '*', trigger: 'blur' },],
workUnit: [{ required: true, message: '*', trigger: 'blur' },],
title: [{ required: true, message: '*', trigger: 'change' },],
degree: [{ required: true, message: '*', trigger: 'change' },],
email: [{ required: true, message: '*', trigger: 'blur' },],
mobile: [{ required: true, message: '*', trigger: 'blur' },],
telephone: [{ required: true, message: '*', trigger: 'blur' },],
fax: [{ required: true, message: '*', trigger: 'blur' },],
projWork: [{ required: true, message: '*', trigger: 'blur' },],
forMonths: [{ required: true, message: '*', trigger: 'blur' },],
spec: [{ required: true, message: '*', trigger: 'change' },],
},
loading: false,
}
},
props: {
members: {
type: Array,
default: () => {
return []
}
},
formData: {
type: Object,
default: () => {
return {}
}
},
},
created () {
},
methods: {
submit () {
this.$refs.form.validate(valid => {
if (valid) {
this.$emit('close', 'value')
} else {
this.$message.error('项目信息未填写完全！')
return false
}
})
},
},
}
</script>
<style scoped lang="less">
::v-deep .ant-spin-container {
width: 100%;
height: 100%;
}
.page-content {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.page-footer {
width: 100%;
height: 40px;
line-height: 40px;
background: rgb(248, 248, 248);
text-align: center;
}
</style>
src/views/report/project/components/projectMemberEdit.vue
View file @ b56e34b2
......@@ -3,273 +3,239 @@
<a-row>
<a-col :span="24">
<div class="tb-title">
<span>项目组成员 <strong>(注：项目负责人填写到第一行)</strong></span>
<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">
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div>序号</div>
</div>
</a-col> -->
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">姓名</div>
<div>姓名</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">性别</div>
<div>性别</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">出生年月</div>
<div>出生年月</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">证件类型</div>
<div>证件类型</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div class="required">证件号码</div>
<div>证件号码</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">民族</div>
<div>民族</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div class="required">国别或地区</div>
<div>国别或地区</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div class="required">工作单位</div>
<div>工作单位</div>
</div>
</a-col>
<a-col :span="3" class="bg-gray">
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">职称</div>
<div>职称</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">最高学位</div>
<div>最高学位</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">电子邮箱</div>
<div>电子邮箱</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">手机</div>
<div>手机</div>
</div>
</a-col>
<!-- <a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">电话</div>
<div >电话</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<div class="special-middle">
<div class="required">传真</div>
<div >传真</div>
</div>
</a-col> -->
<a-col :span="1" class="bg-gray">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div class="required">项目分工</div>
<div>项目分工</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div class="required">每年工作（月）</div>
<div>每年工作（月）</div>
</div>
</a-col>
<a-col :span="3" class="bg-gray">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div class="required">从事专业</div>
<div>从事专业</div>
</div>
</a-col>
<a-col :span="1" class="bg-gray">
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(member, index) in members" :key="index" type="flex" class="row_center table_list">
<!-- <a-col :span="1">
<a-row v-for="(member, index) in members" :key="index" type="flex" class="row_center">
<a-col :span="1">
<div class="special-middle">
<div>
{{ index + 1 }}
</div>
</div>
</a-col> -->
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.name'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.name" :maxLength="20" placeholder="姓名" style="width: 100%" />
</a-form-model-item>
{{ member.name }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.sex'" :rules="{required: true,message: '*',trigger: 'change',}">
<base-select v-model="member.sex" :type="16" :isAll="true" style="width: 100%" />
</a-form-model-item>
{{ member.sex }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.birthday'" :rules="{required: true,message: '*',trigger: 'change',}">
<a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="member.birthday" style="width: 100%" />
</a-form-model-item>
{{ member.birthday }}
</div>
</div>
</a-col>
<a-col :span="2">
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.certificateType'" :rules="{required: true,message: '*',trigger: 'blur',}">
<para-select v-model="member.certificateType" :typeId="49" style="width: 100%" />
</a-form-model-item>
{{ member.certificateTypeName }}
</div>
</div>
</a-col>
<a-col :span="2">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.certId'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.certId" :maxLength="20" placeholder="证件号" style="width: 100%" />
</a-form-model-item>
{{ member.certId }}
</div>
</div>
</a-col>
<a-col :span="2">
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.nation'" :rules="{required: true,message: '*',trigger: 'change',}">
<para-select v-model="member.nation" :typeId="11" style="width: 100%" />
</a-form-model-item>
{{ member.nation }}
</div>
</div>
</a-col>
<a-col :span="1">
<a-col :span="2">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.country'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.country" :maxLength="50" placeholder="国别或地区" style="width: 100%" />
</a-form-model-item>
{{ member.country }}
</div>
</div>
</a-col>
<a-col :span="1">
<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="member.workUnit" :maxLength="50" placeholder="工作单位" style="width: 100%" />
</a-form-model-item>
{{ member.workUnit }}
</div>
</div>
</a-col>
<a-col :span="3">
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.title'" :rules="{required: true,message: '*',trigger: 'change',}">
<para-multi-select v-model="member.title" :width="105" :typeId="7" style="width: 100%" />
</a-form-model-item>
{{ member.titleName }}
</div>
</div>
</a-col>
<a-col :span="2">
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.degree'" :rules="{required: true,message: '*',trigger: 'change',}">
<para-select v-model="member.degree" :typeId="9" style="width: 100%" />
</a-form-model-item>
{{ member.degreeName }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.email'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.email" :maxLength="50" placeholder="电子邮箱" style="width: 100%" />
</a-form-model-item>
{{ member.email }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.mobile'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.mobile" :maxLength="20" placeholder="手机" style="width: 100%" />
</a-form-model-item>
{{ member.mobile }}
</div>
</div>
</a-col>
<!-- <a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.telephone'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.telephone" :maxLength="20" placeholder="电话号码" style="width: 80%" />
</a-form-model-item>
{{ member.telephone }}
</div>
</div>
</a-col>
<a-col :span="1">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.fax'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.fax" :maxLength="20" placeholder="传真" style="width: 80%" />
</a-form-model-item>
{{ member.fax }}
</div>
</div>
</a-col> -->
<a-col :span="1">
<a-col :span="2">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.projWork'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input v-model="member.projWork" :maxLength="20" placeholder="项目分工" style="width: 100%" />
</a-form-model-item>
{{ member.projWork }}
</div>
</div>
</a-col>
<a-col :span="1">
<a-col :span="2">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.forMonths'" :rules="{required: true,message: '*',trigger: 'blur',}">
<a-input-number v-model="member.forMonths" :min="0" :step="0.1" style="width: 100%" />
</a-form-model-item>
{{ member.forMonths }}
</div>
</div>
</a-col>
<a-col :span="3">
<a-col :span="2">
<div class="special-middle">
<div>
<a-form-model-item :prop="'members.' + index + '.spec'" :rules="{required: true,message: '*',trigger: 'change',}">
<para-multi-select v-model="member.spec" :width="105" :typeId="42" style="width: 100%" />
</a-form-model-item>
{{ member.specName }}
</div>
</div>
</a-col>
<a-col :span="1">
<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="members.length == index + 1" @click="menberDown(index)"></a-button> -->
<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="members.length == index + 1" @click="menberDown(index)"></a-button>
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeMembers(member)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
......@@ -277,26 +243,16 @@
</div>
</a-col>
</a-row>
<a-row v-if="members && members.length < 10" type="flex">
<a-col :span="24" style="text-align: center;">
<div class="special-middle">
<div>
<a-button type="dashed" style="width: 50%" @click="addMembers">
<a-icon type="plus" /> 添加
</a-button>
</div>
</div>
</a-col>
</a-row>
<a-modal v-model="visibleEdit" v-if="visibleEdit" title="项目组成员（添加/修改）" width="60%" :footer="null" :dialog-style="{ top: '20%' }" destroyOnClose :maskClosable="false">
<member-edit :members.sync="members" :formData.sync="memObject" @close="closeWindow" />
</a-modal>
</div>
</template>
<script>
//用法 <proj-group-member :members.sync="formData.members" />
import paraMultiSelect from '@/views/components/common/paraMultiSelect'
import paraSelect from '@/views/components/common/paraSelect'
import baseSelect from '@/views/components/common/baseSelect'
import memberEdit from '@/views/report/project/components/memberEdit'
const Member = { name: null, sex: null, birthday: null, certificateType: null, certId: null, nation: null, country: null, workUnit: null, title: null, degree: null, email: null, mobile: null, telephone: null, fax: null, projWork: null, forMonths: null, spec: null }
......@@ -304,7 +260,8 @@ export default {
name: 'projectMemberEdit',
data () {
return {
memObject: {},
visibleEdit: false
}
},
props: {
......@@ -316,12 +273,20 @@ export default {
},
},
components: {
paraMultiSelect, paraSelect, baseSelect
memberEdit
},
created () {
},
methods: {
closeWindow (value) {
this.memObject = {}
this.visibleEdit = false
},
addMember () {//添加成员
this.memObject = { ...Member }
this.visibleEdit = true
},
removeMembers (item) {//移除成员
let index = this.members.indexOf(item)
if (index !== -1) {
......@@ -335,10 +300,6 @@ export default {
this.members.unshift({ ...item })
}
},
addMembers () {//添加成员
Member.showIndex = this.members.length + 1
this.members.push({ ...Member })
},
memberUp (index) {
let arr = this.members
arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
......@@ -351,6 +312,7 @@ export default {
}
</script>
<style scoped lang="less">
::v-deep .table_list {
.ant-col {
padding: 0px 0px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment