From b56e34b24cc0725600b7b3235a231aef4f18f852 Mon Sep 17 00:00:00 2001 From: wangxl <123456> Date: Fri, 29 Nov 2024 11:53:07 +0800 Subject: [PATCH] 444 --- .../report/project/components/memberEdit.vue | 314 ++++++++++++++++++ .../project/components/projectMemberEdit.vue | 194 +++++------ 2 files changed, 392 insertions(+), 116 deletions(-) create mode 100644 src/views/report/project/components/memberEdit.vue diff --git a/src/views/report/project/components/memberEdit.vue b/src/views/report/project/components/memberEdit.vue new file mode 100644 index 0000000..2ba44c4 --- /dev/null +++ b/src/views/report/project/components/memberEdit.vue @@ -0,0 +1,314 @@ + +<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> + + diff --git a/src/views/report/project/components/projectMemberEdit.vue b/src/views/report/project/components/projectMemberEdit.vue index c198424..5a42c39 100644 --- a/src/views/report/project/components/projectMemberEdit.vue +++ b/src/views/report/project/components/projectMemberEdit.vue @@ -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; -- 2.18.0