You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
494 lines
20 KiB
494 lines
20 KiB
<template>
|
|
<div class="site-setting-wrap pagePadding min-flex-right">
|
|
<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">
|
|
<el-form-item prop="avator" label="" class="special-form-item">
|
|
<template #label>
|
|
<div class="custom-label flex">
|
|
医生照片
|
|
<img class="labelImg" src="@/assets/require.svg" alt="">
|
|
<el-tooltip content="这是提示信息">
|
|
<img class="labelImg" src="@/assets/form_qua_ic.svg" alt="">
|
|
</el-tooltip>
|
|
</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>
|
|
</el-form-item>
|
|
<GuipInput ref="GuipInput" column="column" :required="true" label="医生姓名"
|
|
v-model="siteForm.doctor_name" prop="doctor_name" placeholder="请输入" />
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<GuipInput ref="GuipInput" column="column" :required="true" label="身份证号码"
|
|
v-model="siteForm.idcard" prop="idcard" placeholder="请输入" />
|
|
<GuipInput ref="GuipInput" column="column" :required="true" label="手机号码"
|
|
v-model="siteForm.phone" prop="phone" placeholder="常用手机号" />
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick('siteForm')" @confirm="submitForm('siteForm')" />
|
|
|
|
</div>
|
|
<div class="siteMessage flex-common" id="siteMessage2">
|
|
<p class="littleTitle mb32">初诊审批</p>
|
|
<el-form :model="siteForm" :rules="siteFormrules2" ref="siteForm2">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<GuipRadio v-model="siteForm.first_visit_audit" class="mb12" column="column"
|
|
:options="groupOptions" label="初诊是否审批" required prop="first_visit_audit"
|
|
@change="radioChange" />
|
|
<GuipInput ref="GuipInput" column="column" label="审批人电话" desc="审批人电话、微信，至少填写一项"
|
|
v-model="siteForm.approver_phone" prop="approver_phone" placeholder="请输入" />
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<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')"
|
|
: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" />
|
|
</div>
|
|
</template>
|
|
<div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
|
|
|
|
</el-upload>
|
|
</div>
|
|
</GuipFormItem>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
|
|
</div>
|
|
<div class="siteMessage flex-common" id="siteMessage2">
|
|
<h3>个人介绍</h3>
|
|
<el-form :model="siteForm" ref="siteForm1">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<GuipInput column="column" v-model="siteForm.doctor_desc" prop="doctor_desc" label="一句话介绍"
|
|
width="100%" height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit />
|
|
<GuipTextarea label="详细介绍" column="column" v-model="siteForm.doctor_detail" prop="doctor_detail"
|
|
width="100%" autosize placeholder="请输入描述内容" maxlength="不限" show-word-limit />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="submitForm('siteForm1')" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import HoverButton from '@/components/HoverButton.vue';
|
|
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 {
|
|
// 站点设置
|
|
name: '',
|
|
props: [''],
|
|
components: {
|
|
HoverButton,
|
|
GuipFormItem,
|
|
GuipRadio,
|
|
GuipInput,
|
|
GuipSelect,
|
|
GuipTextarea,
|
|
GroupFormBtns
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
doctorId: '',
|
|
fileList: [
|
|
// { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' }
|
|
],
|
|
fileList1:[],
|
|
options_payword: [{
|
|
value: '选项1',
|
|
label: '黄金糕'
|
|
}, {
|
|
value: '选项2',
|
|
label: '双皮奶'
|
|
}, {
|
|
value: '选项3',
|
|
label: '蚵仔煎'
|
|
}, {
|
|
value: '选项4',
|
|
label: '龙须面'
|
|
}, {
|
|
value: '选项5',
|
|
label: '北京烤鸭'
|
|
}],
|
|
groupOptions: [
|
|
{ label: '需审批', value: '1' },
|
|
{ label: '不需审批', value: '0' },
|
|
],
|
|
formData: null,
|
|
siteForm: {
|
|
doctor_name: '',
|
|
idcard: '',
|
|
phone: '',
|
|
avator: '',
|
|
doctor_desc: '',
|
|
doctor_detail: '',
|
|
label: '',
|
|
first_visit_audit: '1',
|
|
approve_phone: ''
|
|
},
|
|
oldForm: {},
|
|
siteFormrules2: {
|
|
first_visit_audit: [
|
|
{ required: true, message: '请选择初诊审批设置', trigger: 'change' }
|
|
]
|
|
},
|
|
siteFormrules: {
|
|
doctor_name: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
{
|
|
pattern: /^1[3-9]\d{9}$/,
|
|
message: '请输入正确的手机号码',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
idcard: [
|
|
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
|
{
|
|
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
|
|
message: '请输入正确的身份证号码',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
avator: [
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (!this.fileList.length && !this.siteForm.avator) {
|
|
callback(new Error('请上传医生照片'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'change'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
mounted() {
|
|
const doctor_id = this.$route.query.doctor_id; // 获取 id 参数
|
|
this.doctorId = doctor_id;
|
|
if (doctor_id) {
|
|
// 请求医生信息
|
|
this.fetchDoctorData(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
|
|
}];
|
|
}
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, '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();
|
|
},
|
|
|
|
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);
|
|
},
|
|
radioChange(data) {
|
|
console.log(data, 'radio--data');
|
|
},
|
|
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);
|
|
}
|
|
});
|
|
},
|
|
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.formData.append('extraParam', 'value')
|
|
},
|
|
// 上传图片
|
|
handleAvatarSuccess(res, file) {
|
|
this.imageUrl1 = URL.createObjectURL(file.raw);
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
console.log(file, '=====file');
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
if (!isJPG) {
|
|
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
}
|
|
return isJPG && isLt2M;
|
|
},
|
|
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()
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, '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,
|
|
}
|
|
|
|
} 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
|
|
}
|
|
}
|
|
},
|
|
confirmClick(type) {
|
|
console.log(type, '确认');
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.siteMessage {
|
|
border-radius: 4px;
|
|
transition: all .5s;
|
|
border: 1px solid transparent;
|
|
}
|
|
.uploadImg{
|
|
width: 150px;
|
|
}
|
|
.special-form-item {
|
|
.el-form-item__label {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.custom-label {
|
|
gap: 6px;
|
|
}
|
|
}
|
|
|
|
.addStore {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.qqCode-wrap {
|
|
margin-bottom: 14px;
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
|
|
.labelImg {
|
|
opacity: .7;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.avatar-uploader {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.avatar-desc {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
|
|
.site-setting-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
#siteMessage2 {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.domain-wrap {
|
|
.domain-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
.domain-item p:last-child {
|
|
padding-left: 23px;
|
|
color: #8A9099;
|
|
}
|
|
|
|
p {
|
|
text-align: left;
|
|
line-height: 18px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.domain-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
</style>
|