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> |
<template> |
||||
<div class="demo-wrap min-flex-right"> |
<div class="site-setting-wrap pagePadding min-flex-right"> |
||||
<div class="flex-between"> |
<div class="siteMessage flex-common" id="siteMessage1"> |
||||
<h2>站点列表</h2> |
<h3>基础信息</h3> |
||||
<el-form :model="form"> |
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm"> |
||||
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%" |
<div class="flex-wrap"> |
||||
:options="options_payword" /> |
<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> |
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick('siteForm')" @confirm="submitForm('siteForm')" /> |
||||
|
|
||||
</div> |
</div> |
||||
<div class=" flex-common" id=""> |
<div class="siteMessage flex-common" id="siteMessage2"> |
||||
<el-form> |
<p class="littleTitle mb32">初诊审批</p> |
||||
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" |
<el-form :model="siteForm" :rules="siteFormrules2" ref="siteForm2"> |
||||
style="width: 100%" :key="random()"> |
<div class="flex-wrap"> |
||||
<el-table-column type="index" label="排序" width="100"> |
<div class="flex-left"> |
||||
</el-table-column> |
<GuipRadio v-model="siteForm.first_visit_audit" class="mb12" column="column" :options="groupOptions" |
||||
<!-- 其他列 --> |
label="初诊是否审批" required prop="first_visit_audit" @change="radioChange" /> |
||||
<el-table-column prop="name" label="站点简称" width="210"> |
<GuipInput ref="GuipInput" column="column" label="审批人电话" desc="审批人电话、微信，至少填写一项" |
||||
<template slot-scope="scope"> |
v-model="siteForm.approve_phone" prop="approve_phone" placeholder="请输入" /> |
||||
<a class="name_link flex cell_render" :href="scope.row.link" target="_blank"> |
</div> |
||||
{{ scope.row.name }} |
<div class="flex-line"></div> |
||||
<img class="edit_icon" src="@/assets/site/form_link.svg" alt=""> |
<div class="flex-right"> |
||||
</a> |
<GuipFormItem column="column" label="审批人微信" > |
||||
</template> |
<span class="desc" slot="formRight">审批人电话、微信，至少填写一项</span> |
||||
</el-table-column> |
<div class="qqCode-wrap right" slot="formDom"> |
||||
<el-table-column prop="registerDate" label="注册时间"></el-table-column> |
<el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" :multiple="false" |
||||
<el-table-column prop="count" label="6月订单数" sortable width="230"> |
action="https://jsonplaceholder.typicode.com/posts/" |
||||
<template slot-scope="scope"> |
:on-preview="handlePreview" :on-remove="handleRemove" |
||||
<div class="flex"> |
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> |
||||
{{ scope.row.count }} |
<hover-button button-text="微信二维码" |
||||
<span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{ |
:default-icon="require('../assets/upLoad_grey.svg')" |
||||
scope.row.percentage }}%上年持平</span> |
: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> |
</div> |
||||
</template> |
</GuipFormItem> |
||||
</el-table-column> |
</div> |
||||
<el-table-column prop="price" label="8月订单数" sortable></el-table-column> |
</div> |
||||
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService" |
</el-form> |
||||
:filter-method="filterHandler"> |
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" /> |
||||
</el-table-column> |
</div> |
||||
<el-table-column prop="status" label="状态" width="195"></el-table-column> |
<div class="siteMessage flex-common" id="siteMessage2"> |
||||
<!-- <el-table-column fixed="right" label="操作" width="182"> |
<h3>个人介绍</h3> |
||||
<template slot-scope="scope"> |
<el-form :model="siteForm" ref="siteForm1"> |
||||
<div class="flex"> |
<div class="flex-wrap"> |
||||
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button> |
<div class="flex-left"> |
||||
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button> |
<GuipInput column="column" v-model="siteForm.doctor_desc" prop="doctor_desc" label="一句话介绍" |
||||
</div> |
width="100%" height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit /> |
||||
</template> |
<GuipTextarea label="详细介绍" column="column" v-model="siteForm.doctor_detail" prop="doctor_detail" |
||||
</el-table-column> --> |
width="100%" autosize placeholder="请输入描述内容" maxlength="不限" |
||||
</el-table> |
show-word-limit /> |
||||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
</div> |
||||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
<div class="flex-line"></div> |
||||
:total="tableData.length"> |
<div class="flex-right"> |
||||
</el-pagination> |
<GuipSelect column="column" label="个人标签" desc="展示给患者，体现您的专业性" v-model="siteForm.label" multiple |
||||
|
:options="options_payword" placeholder="点击选择"> |
||||
|
</GuipSelect> |
||||
|
</div> |
||||
|
</div> |
||||
</el-form> |
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="submitForm('siteForm1')" /> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
// import request from "./utils/request"; |
import { mapState } from 'vuex'; |
||||
import GuipSelect from '@/components/GuipSelect.vue' |
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 { |
export default { |
||||
// 站点设置 |
// 站点设置 |
||||
name: '', |
name: '', |
||||
props: [''], |
props: [''], |
||||
components: { |
components: { |
||||
|
HoverButton, |
||||
|
GuipFormItem, |
||||
|
GuipRadio, |
||||
|
GuipInput, |
||||
GuipSelect, |
GuipSelect, |
||||
// GuipSelectFilter, |
GuipTextarea, |
||||
|
GroupFormBtns |
||||
|
|
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
phoneService: [ |
doctorId: '', |
||||
{ |
fileList: [ |
||||
text: '不限', |
// { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' } |
||||
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' |
|
||||
}, |
|
||||
], |
], |
||||
options: [ |
options_payword: [{ |
||||
{ label: '选项1', value: '1' }, |
value: '选项1', |
||||
{ label: '选项2', value: '2' }, |
label: '黄金糕' |
||||
{ label: '选项3', value: '3' }, |
}, { |
||||
// 更多选项... |
value: '选项2', |
||||
|
label: '双皮奶' |
||||
|
}, { |
||||
|
value: '选项3', |
||||
|
label: '蚵仔煎' |
||||
|
}, { |
||||
|
value: '选项4', |
||||
|
label: '龙须面' |
||||
|
}, { |
||||
|
value: '选项5', |
||||
|
label: '北京烤鸭' |
||||
|
}], |
||||
|
groupOptions: [ |
||||
|
{ label: '需审批', value: '1' }, |
||||
|
{ label: '不需审批', value: '2' }, |
||||
], |
], |
||||
filteredOptions: this.options, |
formData: null, |
||||
|
siteForm: { |
||||
phoneServicelist: |
doctor_name: '', |
||||
{ |
idcard: '', |
||||
0: '不限', |
phone: '', |
||||
1: ' H5', |
avator: '', |
||||
2: '小程序', |
doctor_desc: '', |
||||
3: '无手机服务' |
doctor_detail: '', |
||||
|
label: '', |
||||
|
first_visit_audit:'1', |
||||
|
approve_phone:'' |
||||
}, |
}, |
||||
tableData: [ |
oldForm: {}, |
||||
{ |
siteFormrules2: { |
||||
name: '哈哈哈', |
first_visit_audit: [ |
||||
link: 'http://www.chachongz.com', |
{ required: true, message: '请选择初诊审批设置', trigger: 'change'} |
||||
registerDate: '2025.02.18', |
] |
||||
group: '1', |
}, |
||||
phoneService: '1', |
siteFormrules: { |
||||
status: '1',//配置中中 |
doctor_name: [ |
||||
price: 10, |
{ required: true, message: '请输入姓名', trigger: 'blur' } |
||||
count: 23432, |
], |
||||
percentage: '2.5' |
phone: [ |
||||
|
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
||||
}, |
{ |
||||
{ |
pattern: /^1[3-9]\d{9}$/, |
||||
name: '知网学诚教育', |
message: '请输入正确的手机号码', |
||||
link: 'http://new.checkcopy.com', |
trigger: 'blur' |
||||
registerDate: '2025.02.18', |
} |
||||
group: '2', |
], |
||||
phoneService: '2', |
idcard: [ |
||||
status: '0',//运行中 |
{ required: true, message: '请输入身份证号', trigger: 'blur' }, |
||||
price: 20, |
{ |
||||
count: 3432, |
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, |
||||
percentage: '17.5' |
message: '请输入正确的身份证号码', |
||||
}, |
trigger: 'blur' |
||||
{ |
} |
||||
name: '哈哈哈111', |
], |
||||
link: 'http://www.chachongz.com', |
avator: [ |
||||
registerDate: '2025.02.18', |
{ |
||||
group: '1', |
validator: (rule, value, callback) => { |
||||
phoneService: '1', |
if (!this.fileList.length && !this.siteForm.avator) { |
||||
status: '1',//配置中中 |
callback(new Error('请上传医生照片')); |
||||
price: 10, |
} else { |
||||
count: 7868, |
callback(); |
||||
percentage: '2.5' |
} |
||||
|
}, |
||||
}, |
trigger: 'change' |
||||
{ |
} |
||||
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', |
|
||||
} |
} |
||||
} |
} |
||||
}, |
}, |
||||
|
computed: { |
||||
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
mounted() { |
mounted() { |
||||
// this.ai2() |
const id = this.$route.query.id; // 获取 id 参数 |
||||
// this.$refs.scrollContainer.scrollTo(0) |
this.doctorId = id; |
||||
|
if (id) { |
||||
|
// 请求医生信息 |
||||
|
this.fetchDoctorData(id); |
||||
|
} |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
// ai2() { |
fetchDoctorData(id) { |
||||
// this.$http('POST', 'https://www.90616.com/ajax_get_ai_services').then(response => { |
this.$http('POST', '/api/admin/get_doctor_baseinfo', { |
||||
// console.log(response, '000') |
did: id |
||||
// }) |
}).then(response => { |
||||
// .catch(error => { |
if (response.code == 0) { |
||||
// console.error(error, '22-----') |
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 = [{ |
||||
filterHandler(value, row, column) { |
name: 'avator', |
||||
const property = column['property']; |
url: response.data.avator |
||||
if (value == 0) { |
}]; |
||||
return row[property] != value |
} |
||||
} |
} |
||||
return row[property] === value; |
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
btnClick() { |
||||
}, |
}, |
||||
// 自定义搜索筛选 |
handleRemove(file, fileList) { |
||||
customFilter(keyword, options) { |
console.log(file, fileList); |
||||
if (!keyword) return options |
}, |
||||
return options.filter(item => { |
handlePreview(file) { |
||||
// 自定义筛选逻辑 |
console.log(file); |
||||
return item.label.includes(keyword) || item.value.includes(keyword) |
}, |
||||
|
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) { |
beforeAvatarUpload(file) { |
||||
this.currentPage = val |
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() { |
submitForm(form) { |
||||
var randomNumber = Math.random(); |
let props= {}; |
||||
return randomNumber |
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> |
</script> |
||||
<style scoped lang="scss"> |
<style lang="scss"> |
||||
.demo-wrap { |
.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%; |
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> |
</style> |
||||
Loading…
Reference in new issue