pengjun
2 years ago
4 changed files with 349 additions and 73 deletions
-
70package-lock.json
-
3package.json
-
347src/components/patientRegister/ContactPerson.vue
-
2src/components/patientRegister/PatientRegisterItem.vue
@ -0,0 +1,347 @@ |
|||
<template> |
|||
<div> |
|||
<div style="display:flex"> |
|||
<div style="width: 95%;"> |
|||
<el-table :data="customerOrg.contactPersonList" border height="150" row-key="id" size="small" |
|||
class="el-table__body-wrapper tbody" highlight-current-row @row-click="rowClick" |
|||
ref="customerOrg.contactPersonList"> |
|||
<el-table-column prop="displayName" label="姓名" /> |
|||
<el-table-column prop="title" label="职务" /> |
|||
<el-table-column prop="remark" label="备注" /> |
|||
<el-table-column prop="creatorName" label="创建者" width="" /> |
|||
<el-table-column prop="creationTime" label="创建时间" width="200"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.creationTime | dateFormat }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="lastModifierName" label="修改者" /> |
|||
<el-table-column prop="lastModificationTime" label="修改时间" width="200"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.lastModificationTime | dateFormat }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<el-table :data="customerOrg.contactMethodList" border height="150" row-key="id" size="small" |
|||
class="el-table__body-wrapper tbody" highlight-current-row @row-click="rowClickMethod" |
|||
ref="customerOrg.contactMethodList"> |
|||
<el-table-column prop="contactMethodType" label="类型"> |
|||
<template slot-scope="scope"> |
|||
<div>{{scope.row.contactMethodType==='0' ? '手机':'邮箱'}}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="contactMethodValue" label="联系方式" /> |
|||
<el-table-column prop="creatorName" label="创建者" width="" /> |
|||
<el-table-column prop="creationTime" label="创建时间" width="200"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.creationTime | dateFormat }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="lastModifierName" label="修改者" /> |
|||
<el-table-column prop="lastModificationTime" label="修改时间" width="200"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.lastModificationTime | dateFormat }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div style="margin-left: 10px; margin-top: 5%"> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="primary" @click="add">新增</el-button> |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="success" @click="edit">编辑</el-button> |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="danger" @click="del">删除</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 联系人 --> |
|||
<el-dialog :title="formTitle" :visible.sync="dialogContactPerson" width="480"> |
|||
<el-form :model="form" ref="form" label-width="100px" :rules="rules"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="联系人"> |
|||
<el-input v-model="form.displayName"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="职务"> |
|||
<el-input v-model="form.title"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="备注"> |
|||
<el-input v-model="form.remark"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="5"> |
|||
<el-form-item label="创建者"> |
|||
<el-input v-model="form.creatorName" disabled></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="创建时间" style="margin-left: -5%"> |
|||
<el-input :value="form.creationTime | dateFormat" disabled style="width: 90%"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item label="修改者" style="margin-left: -25%"> |
|||
<el-input v-model="form.creatorName" disabled></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="修改时间" style="margin-left: -5%"> |
|||
<el-input :value="form.lastModificationTime | dateFormat" disabled style="width: 90%"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-divider/> |
|||
<el-table :data="customerOrg.contactMethodList" border height="300" row-key="id" size="small" |
|||
class="el-table__body-wrapper tbody" highlight-current-row ref="contactMethod"> |
|||
<el-table-column prop="contactMethodType" label="类型"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="customerOrg.contactMethodList[scope.$index].contactMethodType"> |
|||
<el-option |
|||
v-for="item in Methodtypes" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="contactMethodValue" label="联系方式"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="customerOrg.contactMethodList[scope.$index].contactMethodValue" required/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="right" label="操作" width="60"> |
|||
<template slot-scope="scope"> |
|||
<i class="el-icon-delete" @click="deleteRow(scope.$index)" size="medium"></i> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogContactPerson = false">取 消</el-button> |
|||
<el-button type="success" @click="addMethod">新增联系方式</el-button> |
|||
<el-button type="primary" @click="submit">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import { mapState } from 'vuex' |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { objCopy } from '../../utlis/proFunc' |
|||
export default { |
|||
components: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
personId:'', |
|||
form: {}, //联系人表单信息 |
|||
formTitle:'新增', |
|||
dialogContactPerson: false, //联系人弹窗 显示控制 |
|||
|
|||
Methodtypes:[ |
|||
//{ value: '',label: '所有订单状态' }, |
|||
{ value: '0',label: '电话' }, |
|||
{ value: '1',label: '邮箱' }, |
|||
], |
|||
|
|||
rules: { |
|||
displayName: [ |
|||
{ required: true, message: "请输入名称", trigger: "blur" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
}, |
|||
|
|||
//挂载完成 |
|||
mounted() { |
|||
|
|||
}, |
|||
|
|||
computed:{ |
|||
...mapState(['customerOrg']), |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
//获取联系人列表 |
|||
getContactPersonList(customerOrgId){ |
|||
getapi(`/api/app/contact-person/in-customer-org-id/${customerOrgId}`).then( |
|||
(res) => { |
|||
//console.log('res.data',res.data) |
|||
this.customerOrg.contactPersonList = res.data |
|||
} |
|||
); |
|||
}, |
|||
|
|||
//获取联系方式列表 |
|||
//api/app/contact-method/in-contact-person-id?ContactPersonId=3a0c08ad-4304-138b-d9e6-a7338739dfc4' \ |
|||
getContactMethodList(ContactPersonId){ |
|||
getapi('/api/app/contact-method/in-contact-person-id',{ContactPersonId}).then( |
|||
(res) => { |
|||
//console.log('res.data',res.data) |
|||
this.customerOrg.contactMethodList = res.data |
|||
} |
|||
); |
|||
}, |
|||
|
|||
//联系人 相关操作 |
|||
add() { |
|||
//this.$message.success("新增 addContactPerson"); |
|||
if(!this.customerOrg.customerOrgId){ |
|||
alert("没有体检单位信息") |
|||
return |
|||
} |
|||
this.form = {customerOrgId:this.customerOrg.customerOrgId} |
|||
this.dialogContactPerson = true |
|||
this.formTitle = "新增" |
|||
this.personId = '' |
|||
this.customerOrg.contactMethodList = [] |
|||
}, |
|||
|
|||
edit() { |
|||
//this.$message.success("编辑 editContactPerson"); |
|||
if(!this.customerOrg.customerOrgId){ |
|||
alert("没有体检单位信息") |
|||
return |
|||
}else if(!this.personId){ |
|||
alert("请先选择要编辑的联系人") |
|||
return |
|||
} |
|||
this.dialogContactPerson = true |
|||
this.formTitle = "编辑" |
|||
}, |
|||
|
|||
//删除联系人行 |
|||
del() { |
|||
//this.$message.success("删除 delContactPerson"); |
|||
if(!this.personId){ |
|||
alert("请先选择要编辑的联系人") |
|||
return |
|||
} |
|||
deletapi(`/api/app/contact-person/${this.personId}`).then( |
|||
(res) => { |
|||
this.personId = '' |
|||
this.getContactPersonList(this.customerOrg.customerOrgId) |
|||
this.customerOrg.contactMethodList = [] |
|||
this.$message.success("操作成功！"); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
//删除联系方式行 |
|||
deleteRow (index){ |
|||
this.customerOrg.contactMethodList.splice(index, 1) |
|||
}, |
|||
|
|||
//联系人信息提交 |
|||
submit(){ |
|||
let body = { |
|||
customerOrgId:'', |
|||
displayName: "", |
|||
title: "", |
|||
remark: "", |
|||
} |
|||
objCopy(this.form,body) |
|||
console.log('body',body) |
|||
if(this.formTitle === '新增'){ |
|||
postapi('/api/app/contact-person',body).then( |
|||
(res) => { |
|||
//console.log('api/app/contact-person') |
|||
this.personId = res.data.id |
|||
this.formTitle = '编辑' |
|||
return deletapi(`/api/app/contact-method/many/${this.personId}`) |
|||
} |
|||
).then( |
|||
(res) => { |
|||
//console.log(`deletapi api/app/contact-method/${this.personId}`) |
|||
let contactMethod = [] //联系方式form表单数据 |
|||
this.customerOrg.contactMethodList.forEach((item, index) => { |
|||
contactMethod.push({ |
|||
contactMethodValue: item.contactMethodValue, |
|||
contactMethodType: item.contactMethodType, |
|||
contactPersonId: this.personId |
|||
}) |
|||
}); |
|||
return postapi('/api/app/contact-method/many',contactMethod) |
|||
} |
|||
).then( |
|||
(res) => { |
|||
//console.log('api/app/contact-method/many') |
|||
this.getContactPersonList(this.customerOrg.customerOrgId) |
|||
this.$message.success("操作成功！"); |
|||
} |
|||
); |
|||
}else{ |
|||
putapi(`/api/app/contact-person/${this.personId}`,body).then( |
|||
(res) => { |
|||
//console.log(`/api/app/contact-person/${this.personId}`) |
|||
return deletapi(`/api/app/contact-method/many/${this.personId}`) |
|||
} |
|||
).then( |
|||
(res) => { |
|||
console.log(`deletapi api/app/contact-method/${this.personId}`) |
|||
let contactMethod = [] //联系方式form表单数据 |
|||
this.customerOrg.contactMethodList.forEach((item, index) => { |
|||
contactMethod.push({ |
|||
contactMethodValue: item.contactMethodValue, |
|||
contactMethodType: item.contactMethodType, |
|||
contactPersonId: this.personId |
|||
}) |
|||
}); |
|||
return postapi('/api/app/contact-method/many',contactMethod) |
|||
} |
|||
).then( |
|||
(res) => { |
|||
//console.log('api/app/contact-method/many') |
|||
this.getContactPersonList(this.customerOrg.customerOrgId) |
|||
this.$message.success("操作成功！"); |
|||
} |
|||
); |
|||
} |
|||
|
|||
}, |
|||
|
|||
//新增联系方式 |
|||
addMethod(){ |
|||
this.customerOrg.contactMethodList.push({ |
|||
contactMethodValue: "", |
|||
contactMethodType: "0", |
|||
contactPersonId: this.personId |
|||
}) |
|||
}, |
|||
|
|||
rowClick(row){ |
|||
console.log('row',row) |
|||
// this.$message.success("rowClick"); |
|||
this.form = row |
|||
this.personId = row.id |
|||
this.getContactMethodList(row.id) |
|||
}, |
|||
|
|||
rowClickMethod(row){ |
|||
this.$message.success("rowClickMethod"); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue