zhangqi
/
acupuncture_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

医生信息页面交互

admin_version1.0_2025_06_26
kuaileWu 3 weeks ago
parent
a9bff29e3e
commit
81faf43e71
1 changed files with 224 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 438
      src/views/DoctorInformation.vue

438
src/views/DoctorInformation.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="site-setting-wrap pagePadding min-flex-right">
<div class="site-setting-wrap pagePadding min-flex-right doctor-information">
<div class="siteMessage flex-common" id="siteMessage1">
<h3>基础信息</h3>
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
<div class="flex-wrap">
<div class="flex-left">
<div class="flex-left special-form-item">
<el-form-item prop="avator" label="" class="special-form-item">
<template #label>
<div class="custom-label flex">
@ -16,30 +16,38 @@
</div>
</template>
<div class="qqCode-wrap right">
<!-- <el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" :multiple="false"
action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :on-change="handleFileChange" :auto-upload="false"
:before-upload="beforeAvatarUpload">
<hover-button slot="trigger" button-text="重新上传"
:default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')"
default-text-color="#23242B" hover-text-color="#006AFF" />
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</el-upload> -->
<el-upload ref="upload" class="avatar-uploader" :auto-upload="false" accept=".jpg,.png" action="#" :multiple="false" :http-request="customUpload">
<template #trigger>
<div class="flex">
<img v-if="siteForm.avator" :src="siteForm.avator" alt="" class="uploadImg">
<hover-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')"
default-text-color="#23242B" hover-text-color="#006AFF" @click="btnClick" />
</div>
</template>
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</el-upload>
<div class="avator-wrapper flex">
<img v-if="doctorAvatorUrl" :src="doctorAvatorUrl" alt="" class="uploadImg">
<hover-button :button-text="doctorAvatorUrl?'重新上传':'开始上传'" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')"
default-text-color="#23242B" hover-text-color="#006AFF">
</hover-button>
<div class="info-upload-wrapper" @click="clearDocotorAvatorFiles">
<el-upload
:on-change="handleAvatarChange"
action="#"
list-type="picture-card"
:multiple="false"
:http-request="setDoctorBaseInfoUpload"
:limit="Number(1)"
ref="avatorUpload"
:auto-upload="false"
>
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</div>
</div>
</div>
<div class="qqCode-wrap right">
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</div>
</el-form-item>
<GuipInput ref="GuipInput" column="column" :required="true" label="医生姓名"
v-model="siteForm.doctor_name" prop="doctor_name" placeholder="请输入" />
v-model="siteForm.name" prop="name" placeholder="请输入" />
</div>
<div class="flex-line"></div>
<div class="flex-right">
@ -50,7 +58,7 @@
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick('siteForm')" @confirm="submitForm('siteForm')" />
<GroupFormBtns @cancel="cancelClick('siteForm')" @confirm="submitDoctorBaseInfo" />
</div>
<div class="siteMessage flex-common" id="siteMessage2">
@ -69,36 +77,37 @@
<GuipFormItem column="column" label="审批人微信">
<span class="desc" slot="formRight">审批人电话、微信，至少填写一项</span>
<div class="qqCode-wrap right" slot="formDom">
<!-- <el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" :multiple="false"
action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
:on-remove="handleRemove" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<hover-button button-text="微信二维码"
:default-icon="require('../assets/upLoad_grey.svg')"
<div class="avator-wrapper">
<div class="flex" style="position: relative;">
<img v-if="approverWechatUrl" :src="approverWechatUrl" class="uploadImg">
<hover-button :button-text="(approverWechatUrl ? '重新上传':'微信二维码')" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')"
default-text-color="#23242B" hover-text-color="#006AFF" @click="btnClick" />
<div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
</el-upload> -->
<el-upload ref="upload1" class="avatar-uploader" :auto-upload="false" action="#" :multiple="false" :file-list="fileList1" :http-request="customUpload">
<!-- <div class="flex">
</div> -->
<template #trigger>
<div class="flex">
<img v-if="siteForm.approver_wechat" :src="siteForm.approver_wechat" alt="" class="uploadImg">
<hover-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')"
default-text-color="#23242B" hover-text-color="#006AFF" @click="handleUploadClick" />
default-text-color="#23242B" hover-text-color="#006AFF" />
<div class="info-upload-wrapper" @click="clearApproverWechatFiles" style="width: 177px;left: 0;display: flex;justify-content: flex-start;overflow: hidden;">
<el-upload
:on-change="handleApproverWechatChange"
action="#"
list-type="picture-card"
:multiple="false"
:http-request="setApproverWechatUpload"
:limit="Number(1)"
ref="approverWechatUpload"
:auto-upload="false"
>
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</div>
</template>
<div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
</div>
</el-upload>
<div slot="tip" class="el-upload__tip desc" style="margin-top:8px;">批人微信二维码，大小2M以内</div>
</div>
</div>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
<GroupFormBtns @cancel="cancelClick" @confirm="submitApproverWechat" />
</div>
<div class="siteMessage flex-common" id="siteMessage2">
<h3>个人介绍</h3>
@ -112,13 +121,12 @@
</div>
<div class="flex-line"></div>
<div class="flex-right">
<GuipSelect column="column" label="个人标签" desc="展示给患者，体现您的专业性" v-model="siteForm.label" multiple
:options="options_payword" placeholder="点击选择">
</GuipSelect>
<GuipInput ref="GuipInput" column="column" label="个人标签"
v-model="siteForm.label" prop="name" placeholder="请输入" />
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="submitForm('siteForm1')" />
<GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="setDoctorDesc" />
</div>
</div>
</template>
@ -129,7 +137,6 @@ import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipTextarea from '@/components/GuipTextarea.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipRadio from '@/components/GuipRadio.vue';
export default {
// 站点设置
@ -140,10 +147,8 @@ export default {
GuipFormItem,
GuipRadio,
GuipInput,
GuipSelect,
GuipTextarea,
GroupFormBtns
},
data() {
return {
@ -152,6 +157,10 @@ export default {
// { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' }
],
fileList1:[],
doctorAvatoFile:[],
doctorAvatorUrl: '',
approverWechatUrl:'',
approverWechatFile:[],
options_payword: [{
value: '选项1',
label: '黄金糕'
@ -174,15 +183,17 @@ export default {
],
formData: null,
siteForm: {
doctor_name: '',
idcard: '',
did:0,
name: '',
idcard: ' ',
phone: '',
avator: '',
doctor_desc: '',
doctor_detail: '',
label: '',
first_visit_audit: '1',
approve_phone: ''
approver_phone:'',
approver_wechat:'',
first_visit_audit: '',
},
oldForm: {},
siteFormrules2: {
@ -191,7 +202,7 @@ export default {
]
},
siteFormrules: {
doctor_name: [
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
phone: [
@ -226,202 +237,185 @@ export default {
}
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
...mapState(['pageTitle'])
},
mounted() {
const doctor_id = this.$route.query.doctor_id; // 获取 id 参数
const doctor_id = this.$route.query.doctor_id;
this.doctorId = doctor_id;
if (doctor_id) {
// 请求医生信息
this.fetchDoctorData(doctor_id);
}
if (doctor_id) this.getDoctorData(doctor_id);
},
methods: {
fetchDoctorData(id) {
this.$http('POST', '/api/admin/get_doctor_baseinfo', {
did: id
}).then(response => {
if (response.code == 0) {
let obj = JSON.parse(JSON.stringify(this.siteForm))
this.oldForm = { ...obj, ...response.data }
this.siteForm = { ...this.siteForm, ...response.data }
if (response.data.avator) {
this.fileList = [{
name: 'avator',
url: response.data.avator
}];
}
if (response.data.avator) {
this.fileList = [{
name: 'avator',
url: response.data.avator
}];
}
setDoctorDesc() {
if(!this.doctorId) {
this.$message.error('请先设置医生基础信息')
return;
}
var obj = new Object()
obj.did = this.doctorId
obj.desc = this.siteForm.doctor_desc
obj.detail = this.siteForm.doctor_detail
obj.label = this.siteForm.label
this.$http('POST', '/api/admin/set_doctor_desc', obj).then(response => {
if (response.code != 0) {
this.$message.error(response.msg)
return;
}
this.$message.success(response.msg)
}).catch(error => {
console.error(error, 'error')
this.$message.error('设置失败')
})
},
handleUploadClick(e) {
console.log(e,'------e====');
e.preventDefault();
this.$refs.upload.$el.querySelector('input[type="file"]').click();
},
btnClick(e) {
console.log(e,'------e====');
e.preventDefault();
this.$refs.upload1.$el.querySelector('input[type="file"]').click();
getDoctorData(doctor_id) {
this.$http('POST', '/api/admin/get_doctor_baseinfo', {did:doctor_id}).then(response => {
if (response.code != 0) {
this.$message.error(response.msg)
return;
}
this.siteForm = response.data
this.siteForm.did = doctor_id;
this.siteForm.name = this.siteForm.doctor_name
this.doctorAvatorUrl = this.siteForm.avator
this.approverWechatUrl = this.siteForm.approver_wechat
}).catch(error => {
console.error(error, 'error')
this.$message.error('设置失败')
})
},
setDoctorInfo(param) {
this.$http('POST', '/api/admin/set_doctor_baseinfo', param).then(response => {
if (response.code != 0) {
this.$message.error(response.msg)
return;
}
customUpload(params) {
// 自定义上传逻辑
const formData = new FormData();
console.log(params.file,'-222----');
formData.append('file', params.file);
// this.$http.post('/api/upload', formData).then()
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
this.$message.success(response.msg)
var data = response.data
if(this.doctorId) return;
setTimeout(() => {
location.href = location.href+'?doctor_id='+data.doctor_id
}, 800);
}).catch(error => {
console.error(error, 'error')
this.$message.error('设置失败')
})
},
radioChange(data) {
console.log(data, 'radio--data');
setDoctorBaseInfoUpload(param) {
let fileObj = param.file
let fd = new FormData()
fd.append('avatar_file', fileObj)
var siteForm = this.siteForm
fd.append('did', this.doctorId)
fd.append('name', siteForm.name)
fd.append('phone', siteForm.phone)
fd.append('idcard', siteForm.idcard)
this.setDoctorInfo(fd)
},
uploadAvatar() {
return new Promise((resolve) => {
if (this.fileList.length) {
const formData = new FormData();
formData.append('file', this.fileList[0].raw);
this.$http.post('/api/upload', formData).then(res => {
resolve(res.data.url);
});
} else {
resolve(this.siteForm.avator);
submitDoctorBaseInfo() {
if(this.doctorAvatoFile.length == 0) {
if(this.doctorId) {
this.setDoctorInfo(this.siteForm)
return;
}
});
},
handleFileChange(file, fileList) {
console.log(file, fileList, '======file');
this.siteForm.avator = fileList.length ? 'uploaded' : '';
this.$refs.siteForm.validateField('avator');
this.fileList = fileList
// 创建FormData对象
this.formData = new FormData()
fileList.forEach(item => {
this.formData.append('files', item.raw)
})
this.$message.error('请上传医生照片')
return;
}
// 可以在这里添加其他表单数据
this.formData.append('extraParam', 'value')
this.$refs.avatorUpload.submit();
},
clearDocotorAvatorFiles(){
this.doctorAvatorUrl = '';
this.doctorAvatoFile = []
this.$refs.avatorUpload.clearFiles();
},
// 上传图片
handleAvatarSuccess(res, file) {
this.imageUrl1 = URL.createObjectURL(file.raw);
clearApproverWechatFiles(){
this.approverWechatUrl = '';
this.approverWechatFile = []
this.$refs.approverWechatUpload.clearFiles();
},
beforeAvatarUpload(file) {
console.log(file, '=====file');
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
setApproverWechatUpload(param) {
let fileObj = param.file
let fd = new FormData()
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
fd.append('approver_wechat', fileObj)
var siteForm = this.siteForm
fd.append('did', this.doctorId)
fd.append('first_visit_audit', siteForm.first_visit_audit)
fd.append('approver_phone', siteForm.approver_phone)
this.setApproverWechat(fd)
},
submitForm(form) {
let props = {};
let url = {
siteForm:'/api/admin/get_doctor_baseinfo',
siteForm1:'/api/admin/set_doctor_desc',
siteForm2:'',
}
if (form == 'siteForm') {
this.$refs[form].validate((valid) => {
if (valid) {
props = {
name: this.siteForm.doctor_name,
idcard: this.siteForm.idcard,
avatar_file: this.siteForm.avator,
phone: this.siteForm.phone
}
} else {
return false;
}
});
} else if(form == 'siteForm1') {
props = {
desc: form.doctor_desc,
detail: form.doctor_detail,
label: form.label
}
}else{
props = {
first_visit_audit: form.first_visit_audit,
approver_phone: form.approver_phone,
approver_wechat: form.approver_wechat
}
}
if(this.doctorId){
props.did = this.doctorId;
}
this.$http('POST', url[form], props).then(response => {
if (response.code == 0) {
this.$Message.success('修改成功')
this.fetchDoctorData()
setApproverWechat(param) {
this.$http('POST', '/api/admin/set_doctor_approver', param).then(response => {
if (response.code != 0) {
this.$message.error(response.msg)
return;
}
this.$message.success(response.msg)
var data = response.data
if(this.doctorId) return;
setTimeout(() => {
location.href = location.href+'?doctor_id='+data.doctor_id
}, 800);
}).catch(error => {
console.error(error, 'error')
this.$message.error('设置失败')
})
},
cancelClick(type) {
// siteForm
if (type == 'siteForm1') {
this.siteForm = {
...this.siteForm,
doctor_desc: this.oldForm.doctor_desc,
doctor_detail: this.oldForm.doctor_detail,
label: this.oldForm.label,
}
submitApproverWechat() {
if(!this.doctorId) {
this.$message.error('请先设置医生基础信息')
return;
}
} else if(type== 'siteForm') {
this.siteForm = {
...this.siteForm,
name: this.oldForm.name,
idcard: this.oldForm.idcard,
avatar_file: this.oldForm.avatar_file,
phone: this.oldForm.phone
}
}else {
this.siteForm = {
...this.siteForm,
first_visit_audit: this.oldForm.first_visit_audit,
approver_phone: this.oldForm.approver_phone,
approver_wechat: this.oldForm.approver_wechat
}
if(this.approverWechatFile.length == 0) {
this.setApproverWechat(this.siteForm)
return;
}
this.$refs.approverWechatUpload.submit();
},
handleApproverWechatChange(file, fileList) {
console.log(file, fileList)
this.approverWechatFile = file
this.approverWechatUrl = URL.createObjectURL(file.raw);
},
handleAvatarChange(file, fileList) {
console.log(file, fileList)
this.doctorAvatoFile = file
this.doctorAvatorUrl = URL.createObjectURL(file.raw);
},
confirmClick(type) {
console.log(type, '确认');
radioChange(data) {
console.log(data, 'radio--data');
},
cancelClick(type) {
console.log(type)
}
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.info-upload-wrapper ::v-deep .el-upload-list.el-upload-list--picture-card{
display: none;
}
.siteMessage {
border-radius: 4px;
transition: all .5s;
border: 1px solid transparent;
}
.uploadImg{
width: 150px;
margin-right: 20px;
}
.special-form-item ::v-deep .el-form-item__label{
margin-bottom: 12px;
}
.special-form-item {
.el-form-item__label {
margin-bottom: 12px;
@ -437,10 +431,26 @@ export default {
}
.qqCode-wrap {
margin-top: 12px;
margin-bottom: 14px;
display: flex;
width: 100%;
justify-content: flex-start;
.avator-wrapper{
position: relative;
.info-upload-wrapper{
position: absolute;
display: flex;
justify-content: flex-end;
top: 50%;
margin-top: -19px;
right: 0;
height: 38px;
width: 118px;
overflow: hidden;
opacity: 0;
}
}
.labelImg {
opacity: .7;

Write Preview
Loading…
Cancel
Save