zq
2 weeks ago
3 changed files with 389 additions and 177 deletions
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,216 +1,421 @@ |
|||
<template> |
|||
<div class="demo-wrap min-flex-right"> |
|||
<div class="flex-between"> |
|||
<h2>站点列表</h2> |
|||
<el-form :model="form"> |
|||
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%" |
|||
:options="options_payword" /> |
|||
<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> |
|||
</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=" flex-common" id=""> |
|||
<el-form> |
|||
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" |
|||
style="width: 100%" :key="random()"> |
|||
<el-table-column type="index" label="排序" width="100"> |
|||
</el-table-column> |
|||
<!-- 其他列 --> |
|||
<el-table-column prop="name" label="站点简称" width="210"> |
|||
<template slot-scope="scope"> |
|||
<a class="name_link flex cell_render" :href="scope.row.link" target="_blank"> |
|||
{{ scope.row.name }} |
|||
<img class="edit_icon" src="@/assets/site/form_link.svg" alt=""> |
|||
</a> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="registerDate" label="注册时间"></el-table-column> |
|||
<el-table-column prop="count" label="6月订单数" sortable width="230"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.count }} |
|||
<span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{ |
|||
scope.row.percentage }}%上年持平</span> |
|||
<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.approve_phone" prop="approve_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> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="price" label="8月订单数" sortable></el-table-column> |
|||
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService" |
|||
:filter-method="filterHandler"> |
|||
</el-table-column> |
|||
<el-table-column prop="status" label="状态" width="195"></el-table-column> |
|||
<!-- <el-table-column fixed="right" label="操作" width="182"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button> |
|||
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|||
:total="tableData.length"> |
|||
</el-pagination> |
|||
</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 request from "./utils/request"; |
|||
import GuipSelect from '@/components/GuipSelect.vue' |
|||
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, |
|||
// GuipSelectFilter, |
|||
GuipTextarea, |
|||
GroupFormBtns |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
phoneService: [ |
|||
{ |
|||
text: '不限', |
|||
value: '0' |
|||
}, |
|||
{ |
|||
text: 'H5', |
|||
value: '1' |
|||
}, |
|||
{ |
|||
text: '小程序', |
|||
value: '2' |
|||
}, |
|||
{ |
|||
text: 'H5以及小程序', |
|||
value: '3' |
|||
}, |
|||
], |
|||
currentPage: 1, //当前页 |
|||
pageSize: 2, //每页的容量 |
|||
total: 0, //列表总数 |
|||
options_payword: [ |
|||
{ |
|||
label: '按篇', value: '0' |
|||
}, |
|||
{ |
|||
label: '按字符', value: '1' |
|||
}, |
|||
doctorId: '', |
|||
fileList: [ |
|||
// { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' } |
|||
], |
|||
options: [ |
|||
{ label: '选项1', value: '1' }, |
|||
{ label: '选项2', value: '2' }, |
|||
{ label: '选项3', value: '3' }, |
|||
// 更多选项... |
|||
options_payword: [{ |
|||
value: '选项1', |
|||
label: '黄金糕' |
|||
}, { |
|||
value: '选项2', |
|||
label: '双皮奶' |
|||
}, { |
|||
value: '选项3', |
|||
label: '蚵仔煎' |
|||
}, { |
|||
value: '选项4', |
|||
label: '龙须面' |
|||
}, { |
|||
value: '选项5', |
|||
label: '北京烤鸭' |
|||
}], |
|||
groupOptions: [ |
|||
{ label: '需审批', value: '1' }, |
|||
{ label: '不需审批', value: '2' }, |
|||
], |
|||
filteredOptions: this.options, |
|||
|
|||
phoneServicelist: |
|||
{ |
|||
0: '不限', |
|||
1: ' H5', |
|||
2: '小程序', |
|||
3: '无手机服务' |
|||
|
|||
formData: null, |
|||
siteForm: { |
|||
doctor_name: '', |
|||
idcard: '', |
|||
phone: '', |
|||
avator: '', |
|||
doctor_desc: '', |
|||
doctor_detail: '', |
|||
label: '', |
|||
first_visit_audit:'1', |
|||
approve_phone:'' |
|||
}, |
|||
tableData: [ |
|||
{ |
|||
name: '哈哈哈', |
|||
link: 'http://www.chachongz.com', |
|||
registerDate: '2025.02.18', |
|||
group: '1', |
|||
phoneService: '1', |
|||
status: '1',//配置中中 |
|||
price: 10, |
|||
count: 23432, |
|||
percentage: '2.5' |
|||
|
|||
}, |
|||
{ |
|||
name: '知网学诚教育', |
|||
link: 'http://new.checkcopy.com', |
|||
registerDate: '2025.02.18', |
|||
group: '2', |
|||
phoneService: '2', |
|||
status: '0',//运行中 |
|||
price: 20, |
|||
count: 3432, |
|||
percentage: '17.5' |
|||
}, |
|||
{ |
|||
name: '哈哈哈111', |
|||
link: 'http://www.chachongz.com', |
|||
registerDate: '2025.02.18', |
|||
group: '1', |
|||
phoneService: '1', |
|||
status: '1',//配置中中 |
|||
price: 10, |
|||
count: 7868, |
|||
percentage: '2.5' |
|||
|
|||
}, |
|||
{ |
|||
name: '知网学诚教育2222', |
|||
link: 'http://new.checkcopy.com', |
|||
registerDate: '2025.02.18', |
|||
group: '2', |
|||
phoneService: '2', |
|||
status: '0',//运行中 |
|||
price: 20, |
|||
count: 32432, |
|||
percentage: '17.5' |
|||
}, |
|||
], |
|||
form: { |
|||
payword: '0', |
|||
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() { |
|||
// this.ai2() |
|||
// this.$refs.scrollContainer.scrollTo(0) |
|||
const id = this.$route.query.id; // 获取 id 参数 |
|||
this.doctorId = id; |
|||
if (id) { |
|||
// 请求医生信息 |
|||
this.fetchDoctorData(id); |
|||
} |
|||
}, |
|||
methods: { |
|||
// ai2() { |
|||
// this.$http('POST', 'https://www.90616.com/ajax_get_ai_services').then(response => { |
|||
// console.log(response, '000') |
|||
// }) |
|||
// .catch(error => { |
|||
// console.error(error, '22-----') |
|||
// }) |
|||
// }, |
|||
|
|||
// 列筛选 |
|||
filterHandler(value, row, column) { |
|||
const property = column['property']; |
|||
if (value == 0) { |
|||
return row[property] != value |
|||
} |
|||
return row[property] === value; |
|||
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 |
|||
}]; |
|||
} |
|||
} |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
btnClick() { |
|||
}, |
|||
// 自定义搜索筛选 |
|||
customFilter(keyword, options) { |
|||
if (!keyword) return options |
|||
return options.filter(item => { |
|||
// 自定义筛选逻辑 |
|||
return item.label.includes(keyword) || item.value.includes(keyword) |
|||
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') |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
// 上传图片 |
|||
handleAvatarSuccess(res, file) { |
|||
this.imageUrl1 = URL.createObjectURL(file.raw); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
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; |
|||
}, |
|||
random() { |
|||
var randomNumber = Math.random(); |
|||
return randomNumber |
|||
submitForm(form) { |
|||
let props= {}; |
|||
if (form == 'siteForm') { |
|||
this.$refs[form].validate((valid) => { |
|||
if (valid) { |
|||
props = { |
|||
did: this.doctorId, |
|||
name: this.siteForm.doctor_name, |
|||
idcard: this.siteForm.idcard, |
|||
avatar_file: this.siteForm.avator, |
|||
phone: this.siteForm.phone |
|||
} |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
} else { |
|||
props = { |
|||
did: this.doctorId, |
|||
desc: form.doctor_desc, |
|||
detail: form.doctor_detail, |
|||
label: form.label |
|||
} |
|||
} |
|||
this.$http('POST', '/supernew/ajax_get_type_batch_list', props).then(response => { |
|||
if (response.code == 0) { |
|||
this.$Message.success('修改成功') |
|||
} |
|||
}).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 { |
|||
this.siteForm = { |
|||
...this.siteForm, |
|||
name: this.oldForm.name, |
|||
idcard: this.oldForm.idcard, |
|||
avatar_file: this.oldForm.avatar_file, |
|||
phone: this.oldForm.phone |
|||
} |
|||
} |
|||
}, |
|||
confirmClick(type) { |
|||
console.log(type, '确认'); |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.demo-wrap { |
|||
<style lang="scss"> |
|||
.siteMessage { |
|||
border-radius: 4px; |
|||
transition: all .5s; |
|||
border: 1px solid transparent; |
|||
} |
|||
.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%; |
|||
letter-spacing: 0.08em; |
|||
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> |
|||
Loading…
Reference in new issue