医生信息页面交互

src/views/DoctorInformation.vue

@@ -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" 
+                                <div class="avator-wrapper flex">
-                                action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :on-change="handleFileChange" :auto-upload="false"
+                                    <img v-if="doctorAvatorUrl" :src="doctorAvatorUrl" alt="" class="uploadImg">
-                                    :before-upload="beforeAvatarUpload">
+                                    <hover-button  :button-text="doctorAvatorUrl?'重新上传':'开始上传'" :default-icon="require('../assets/upLoad_grey.svg')"
-                                    <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" />
+                                    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>
-                                    </template>
+                                </div>
+                            </div>
+
+                            <div class="qqCode-wrap right">
                                 <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
-                                </el-upload>
                             </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"
+                                <div class="avator-wrapper">
-                                    action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
+                                    <div class="flex" style="position: relative;">
-                                    :on-remove="handleRemove" :on-success="handleAvatarSuccess"
+                                        <img v-if="approverWechatUrl" :src="approverWechatUrl" class="uploadImg">
-                                    :before-upload="beforeAvatarUpload">
+                                        <hover-button :button-text="(approverWechatUrl ? '重新上传':'微信二维码')" :default-icon="require('../assets/upLoad_grey.svg')"
-                                    <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" />
+                                        default-text-color="#23242B" hover-text-color="#006AFF" />
-                                    <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" />
-                                        </div>
-                                    </template>
-                                    <div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
 
+                                        <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>
+                                    </div>
+
+                                    <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
+                        <GuipInput ref="GuipInput" column="column"  label="个人标签"
-                            :options="options_payword" placeholder="点击选择">
+                            v-model="siteForm.label" prop="name" placeholder="请输入" />
-                        </GuipSelect>
                     </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: '',
+                did:0,
+                name: '',
                 idcard: ' ',
                 phone: '',
                 avator: '',
                 doctor_desc: '',
                 doctor_detail: '',
                 label: '',
-                first_visit_audit: '1',
+                approver_phone:'',
-                approve_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) {
+        if (doctor_id) this.getDoctorData(doctor_id);
-            // 请求医生信息
-            this.fetchDoctorData(doctor_id);
-        }
     },
     methods: {
-        fetchDoctorData(id) {
+        setDoctorDesc() {
-            this.$http('POST', '/api/admin/get_doctor_baseinfo', {
+            if(!this.doctorId) {
-                did: id
+                this.$message.error('请先设置医生基础信息')
-            }).then(response => {
+                return;
-                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
-                        }];
-                    }
             }
+
+            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) {
+        getDoctorData(doctor_id) {
-            console.log(e,'------e====');
+            this.$http('POST', '/api/admin/get_doctor_baseinfo', {did:doctor_id}).then(response => {
-            e.preventDefault();
+                if (response.code != 0) {
-            this.$refs.upload.$el.querySelector('input[type="file"]').click();
+                    this.$message.error(response.msg)
-        },
+                    return;
-        btnClick(e) {
+                }
-            console.log(e,'------e====');
+                this.siteForm = response.data
-            e.preventDefault();
+                this.siteForm.did = doctor_id;
-            this.$refs.upload1.$el.querySelector('input[type="file"]').click();
+                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) {
+                this.$message.success(response.msg)
-            // 自定义上传逻辑
+                var data = response.data
-            const formData = new FormData();
+                if(this.doctorId) return;
-            console.log(params.file,'-222----');
+                setTimeout(() => {
-            formData.append('file', params.file);
+                    location.href = location.href+'?doctor_id='+data.doctor_id
-            // this.$http.post('/api/upload', formData).then()
+                }, 800);
-        },
+            }).catch(error => {
-        handleRemove(file, fileList) {
+                console.error(error, 'error')
-            console.log(file, fileList);
+                this.$message.error('设置失败')
-        },
+            })
-        handlePreview(file) {
-            console.log(file);
         },
-        radioChange(data) {
+        setDoctorBaseInfoUpload(param) {
-            console.log(data, 'radio--data');
+            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() {
+        submitDoctorBaseInfo() {
-            return new Promise((resolve) => {
+            if(this.doctorAvatoFile.length == 0) {
-                if (this.fileList.length) {
+                if(this.doctorId) {
-                    const formData = new FormData();
+                    this.setDoctorInfo(this.siteForm)
-                    formData.append('file', this.fileList[0].raw);
+                    return;
-                    this.$http.post('/api/upload', formData).then(res => {
+                }
-                        resolve(res.data.url);
+                this.$message.error('请上传医生照片')
-                    });
+                return;
-                } else {
-                    resolve(this.siteForm.avator);
             }
-            });
-        },
-        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.$refs.avatorUpload.submit();
-            this.formData.append('extraParam', 'value')
+        },
+        clearDocotorAvatorFiles(){
+            this.doctorAvatorUrl = '';
+            this.doctorAvatoFile = []
+            this.$refs.avatorUpload.clearFiles();
         },
-        // 上传图片
+        clearApproverWechatFiles(){
-        handleAvatarSuccess(res, file) {
+            this.approverWechatUrl = '';
-            this.imageUrl1 = URL.createObjectURL(file.raw);
+            this.approverWechatFile = []
+            this.$refs.approverWechatUpload.clearFiles();
         },
-        beforeAvatarUpload(file) {
+        setApproverWechatUpload(param) {
-            console.log(file, '=====file');
+            let fileObj = param.file
-            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+            let fd = new FormData()
-            const isLt2M = file.size / 1024 / 1024 < 2;
 
-            if (!isJPG) {
+            fd.append('approver_wechat', fileObj)
-                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
+            var siteForm = this.siteForm
-            }
+            fd.append('did', this.doctorId)
-            if (!isLt2M) {
+            fd.append('first_visit_audit', siteForm.first_visit_audit)
-                this.$message.error('上传头像图片大小不能超过 2MB!');
+            fd.append('approver_phone', siteForm.approver_phone)
-            }
+            this.setApproverWechat(fd)
-            return isJPG && isLt2M;
         },
-        submitForm(form) {
+        setApproverWechat(param) {
-            let props = {};
+            this.$http('POST', '/api/admin/set_doctor_approver', param).then(response => {
-            let url = {
+                if (response.code != 0) {
-                siteForm:'/api/admin/get_doctor_baseinfo',
+                    this.$message.error(response.msg)
-                siteForm1:'/api/admin/set_doctor_desc',
+                    return;
-                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()
                 }
+
+                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) {
+        submitApproverWechat() {
-            // siteForm
+            if(!this.doctorId) {
-            if (type == 'siteForm1') {
+                this.$message.error('请先设置医生基础信息')
-                this.siteForm = {
+                return;
-                    ...this.siteForm,
-                    doctor_desc: this.oldForm.doctor_desc,
-                    doctor_detail: this.oldForm.doctor_detail,
-                    label: this.oldForm.label,
-                }
-
-            } 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);
+        },
+        radioChange(data) {
+            console.log(data, 'radio--data');
         },
-        confirmClick(type) {
+        cancelClick(type) {
-            console.log(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;