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

医生列表渲染、添加交互逻辑

admin_version1.0_2025_06_26
zq 3 weeks ago
parent
357a2ef094
commit
c1c5e1891b
2 changed files with 174 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      src/views/DoctorInformation.vue
  2. 179
      src/views/HomeView.vue

60
src/views/DoctorInformation.vue
View File

@ -25,11 +25,14 @@
default-text-color="#23242B" hover-text-color="#006AFF" /> default-text-color="#23242B" hover-text-color="#006AFF" />
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div> <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</el-upload> --> </el-upload> -->
<el-upload ref="upload" class="avatar-uploader" :auto-upload="false" accept=".jpg,.png" action="#" :file-list="fileList" :multiple="false" :http-request="customUpload"> <el-upload ref="upload" class="avatar-uploader" :auto-upload="false" accept=".jpg,.png" action="#" :multiple="false" :http-request="customUpload">
<template #trigger> <template #trigger>
<hover-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')" <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')" :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" @click="btnClick" />
</div>
</template> </template>
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div> <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</el-upload> </el-upload>
@ -59,7 +62,7 @@
:options="groupOptions" label="初诊是否审批" required prop="first_visit_audit" :options="groupOptions" label="初诊是否审批" required prop="first_visit_audit"
@change="radioChange" /> @change="radioChange" />
<GuipInput ref="GuipInput" column="column" label="审批人电话" desc="审批人电话、微信，至少填写一项" <GuipInput ref="GuipInput" column="column" label="审批人电话" desc="审批人电话、微信，至少填写一项"
v-model="siteForm.approve_phone" prop="approve_phone" placeholder="请输入" /> v-model="siteForm.approver_phone" prop="approver_phone" placeholder="请输入" />
</div> </div>
<div class="flex-line"></div> <div class="flex-line"></div>
<div class="flex-right"> <div class="flex-right">
@ -76,13 +79,19 @@
default-text-color="#23242B" hover-text-color="#006AFF" @click="btnClick" /> default-text-color="#23242B" hover-text-color="#006AFF" @click="btnClick" />
<div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div> <div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
</el-upload> --> </el-upload> -->
<el-upload ref="upload1" class="avatar-uploader" :auto-upload="false" action="#" :multiple="false" :http-request="customUpload"> <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> <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-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.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" @click="handleUploadClick" />
</div>
</template> </template>
<div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div> <div slot="tip" class="el-upload__tip desc">审批人微信二维码，大小2M以内</div>
</el-upload> </el-upload>
</div> </div>
</GuipFormItem> </GuipFormItem>
@ -142,6 +151,7 @@ export default {
fileList: [ fileList: [
// { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' } // { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' }
], ],
fileList1:[],
options_payword: [{ options_payword: [{
value: '选项1', value: '选项1',
label: '黄金糕' label: '黄金糕'
@ -160,7 +170,7 @@ export default {
}], }],
groupOptions: [ groupOptions: [
{ label: '需审批', value: '1' }, { label: '需审批', value: '1' },
{ label: '不需审批', value: '2' }, { label: '不需审批', value: '0' },
], ],
formData: null, formData: null,
siteForm: { siteForm: {
@ -241,6 +251,12 @@ export default {
url: response.data.avator url: response.data.avator
}]; }];
} }
if (response.data.avator) {
this.fileList = [{
name: 'avator',
url: response.data.avator
}];
}
} }
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')
@ -320,11 +336,15 @@ export default {
}, },
submitForm(form) { submitForm(form) {
let props = {}; let props = {};
let url = {
siteForm:'/api/admin/get_doctor_baseinfo',
siteForm1:'/api/admin/set_doctor_desc',
siteForm2:'',
}
if (form == 'siteForm') { if (form == 'siteForm') {
this.$refs[form].validate((valid) => { this.$refs[form].validate((valid) => {
if (valid) { if (valid) {
props = { props = {
did: this.doctorId,
name: this.siteForm.doctor_name, name: this.siteForm.doctor_name,
idcard: this.siteForm.idcard, idcard: this.siteForm.idcard,
avatar_file: this.siteForm.avator, avatar_file: this.siteForm.avator,
@ -334,17 +354,26 @@ export default {
return false; return false;
} }
}); });
} else { } else if(form == 'siteForm1') {
props = { props = {
did: this.doctorId,
desc: form.doctor_desc, desc: form.doctor_desc,
detail: form.doctor_detail, detail: form.doctor_detail,
label: form.label label: form.label
} }
}else{
props = {
first_visit_audit: form.first_visit_audit,
approver_phone: form.approver_phone,
approver_wechat: form.approver_wechat
}
} }
this.$http('POST', '/supernew/ajax_get_type_batch_list', props).then(response => { if(this.doctorId){
props.did = this.doctorId;
}
this.$http('POST', url[form], props).then(response => {
if (response.code == 0) { if (response.code == 0) {
this.$Message.success('修改成功') this.$Message.success('修改成功')
this.fetchDoctorData()
} }
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')
@ -360,7 +389,7 @@ export default {
label: this.oldForm.label, label: this.oldForm.label,
} }
} else { } else if(type== 'siteForm') {
this.siteForm = { this.siteForm = {
...this.siteForm, ...this.siteForm,
name: this.oldForm.name, name: this.oldForm.name,
@ -368,6 +397,13 @@ export default {
avatar_file: this.oldForm.avatar_file, avatar_file: this.oldForm.avatar_file,
phone: this.oldForm.phone 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) { confirmClick(type) {
@ -383,7 +419,9 @@ export default {
transition: all .5s; transition: all .5s;
border: 1px solid transparent; border: 1px solid transparent;
} }
.uploadImg{
width: 150px;
}
.special-form-item { .special-form-item {
.el-form-item__label { .el-form-item__label {
margin-bottom: 12px; margin-bottom: 12px;

179
src/views/HomeView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="min-width pagePadding " style="background: #F5F7FA;" > <div class="min-width pagePadding " style="background: #F5F7FA;">
<p class="pageTitle bold mb24">基础信息</p> <p class="pageTitle bold mb24">基础信息</p>
<div class="doctor-list-wrap "> <div class="doctor-list-wrap ">
<p class="pageTitle">医生列表</p> <p class="pageTitle">医生列表</p>
@ -7,7 +7,8 @@
<div class="selectAllTable-wrap flex-between mt32"> <div class="selectAllTable-wrap flex-between mt32">
<div class="left flex"> <div class="left flex">
<div class="checkboxAll"> <div class="checkboxAll">
<el-checkbox @change="handleTotalCheckAllChange" v-model="allChecked" :indeterminate="isIndeterminate">全选</el-checkbox> <el-checkbox @change="handleTotalCheckAllChange" v-model="allChecked"
:indeterminate="isIndeterminate">全选</el-checkbox>
</div> </div>
<span class="totalCount">共{{ totalNum }}条，已选{{ selectNum }}条</span> <span class="totalCount">共{{ totalNum }}条，已选{{ selectNum }}条</span>
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }" <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
@ -19,7 +20,7 @@
<div class="right flex"> <div class="right flex">
<span>搜索医生</span> <span>搜索医生</span>
<GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px" <GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px"
placeholder="输入姓名" @blur="inputBlur" v-model="doctorName"/> placeholder="输入姓名" @blur="inputBlur" v-model="doctorName" />
<GuipButton @click="addDoctor" size="form">新增医生</GuipButton> <GuipButton @click="addDoctor" size="form">新增医生</GuipButton>
</div> </div>
</div> </div>
@ -30,54 +31,53 @@
<el-avatar :src="item.avatar"></el-avatar> <el-avatar :src="item.avatar"></el-avatar>
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<span>{{ item.phone }}</span> <span>{{ item.phone }}</span>
<GuipSwitch :modelValue="Boolean(item.status)" @change="onSwitchChange(item,index)"> <GuipSwitch :modelValue="Boolean(item.status)" @change="onSwitchChange(item, index)">
</GuipSwitch> </GuipSwitch>
<GuipButton type="text" @click="editDoctor(item,index)">编辑</GuipButton> <GuipButton type="text" @click="editDoctor(item, index)">编辑</GuipButton>
</div> </div>
<div class="right"> <div class="right">
<GuipButton type="system" size="form" @click="addHospital(item)">添加医院</GuipButton> <GuipButton type="system" size="form" @click="addHospital(item)">添加医院</GuipButton>
</div> </div>
</div> </div>
<GuipTable :tableData="item.list" style="width: 100%" :ref="(el) => setPopoverRef(index, el)" @selection-change="handleSelectionChange(index,$event)" <GuipTable :tableData="item.departs" style="width: 100%" :ref="(el) => setPopoverRef(index, el)"
:show-header="false" :loading="loading" > @selection-change="handleSelectionChange(index, $event)" :show-header="false"
:loading="loading">
<el-table-column type="selection" width="135"> <el-table-column type="selection" width="135">
</el-table-column> </el-table-column>
<el-table-column prop="hos" label="出诊医院" min-width="295"> <el-table-column prop="depart_name" label="出诊医院" min-width="295">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex cell_render"> <div class="flex cell_render">
<span>{{ scope.row.hos[0] }}项</span> <span>{{ scope.row.depart_name }}</span>
<span v-if="scope.row.hos.length">（ 等{{ scope.row.hos.length }}个 ）</span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="nums" label="项目个数" min-width="165"> <el-table-column prop="project_count" label="项目个数" min-width="135">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex cell_render"> <div class="flex cell_render">
<span>{{ scope.row.nums }}项</span> <span>{{ scope.row.project_count }}项</span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="group" label="组别" min-width="165"> <el-table-column prop="classify_count" label="组别" min-width="135">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex cell_render"> <div class="flex cell_render">
{{ scope.row.group }}分组 {{ scope.row.classify_count }}分组
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="setMenu" label="套餐" min-width="165"> <el-table-column prop="classify_count" label="套餐" min-width="165">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex cell_render"> <div class="flex cell_render">
{{ scope.row.setMenu }}分组 {{ scope.row.classify_count }}分组
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="time" label="时间" min-width="200"> </el-table-column> <el-table-column prop="create" label="时间" min-width="250"> </el-table-column>
<el-table-column prop="stock" fixed="right" min-width="110"> <el-table-column prop="stock" fixed="right" min-width="110">
<template slot-scope="scope"> <template slot-scope="scope">
<GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange1(scope.row)"> <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="onSwitchChange1(scope.row)"></GuipSwitch>
</GuipSwitch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" min-width="120px"> <el-table-column label="操作" fixed="right" min-width="120px">
@ -106,7 +106,69 @@ import { mapState } from 'vuex';
export default { export default {
data() { data() {
return { return {
tableSelections:[],//已选中数据 list: {
approver_phone: "18888888888",
code: "en4b1v",
create: "2025-05-19 16:20:58",
desc: "擅长运用麦粒灸治疗疑难杂症，特别是恶性肿瘤的治疗，显著改善患者免疫状态。",
detail: "北京中医药大学中医临床特聘专家，师从师怀堂和谢锡亮两大中医泰斗，从事针灸临床50余年，善治免疫系统及其它病症如：各种肿瘤癌症，血小板减少或增多，白细胞减少，经常性感冒、支气管哮喘、过敏性紫癜、妇女尿失禁、夜尿增多，痤疮，急慢性肠炎、痛风、颈椎管狭窄、颈肩腰腿痛、疲劳综合征、失眠，及小儿夜啼、厌食和发育不良等症。",
first_visit_audit: "1",
id: "1",
idcard: "510322197808271433",
label: "",
name: "张小琪",
phone: "18888888888",
uid: "46",
departs: {
1: [
{
classify_count: 3,
create: "2025-05-29 16:37:28",
depart_id: "1",
depart_name: "中医科",
doctor_id: "1",
hid: "1",
hispital_name: "武丽娜中医针灸",
id: "1",
is_fixed: "1",
project_count: 24,
status: "1",
type: "0"
}
],
2: [
{
classify_count: 3,
create: "2025-05-29 16:37:28",
depart_id: "12",
depart_name: "中医科",
doctor_id: "1",
hid: "1",
hispital_name: "武丽娜中医针灸",
id: "1",
is_fixed: "1",
project_count: 24,
status: "1",
type: "0"
},
{
classify_count: 3,
create: "2025-05-29 16:37:28",
depart_id: "11",
depart_name: "中医科",
doctor_id: "1",
hid: "1",
hispital_name: "武丽娜中医针灸",
id: "1",
is_fixed: "1",
project_count: 24,
status: "1",
type: "0"
},
]
}
},
tableSelections: [],//已选中数据
tableData: [ tableData: [
{ {
sort: 1 sort: 1
@ -119,7 +181,7 @@ export default {
checked1: false, checked1: false,
totalNum: 0, totalNum: 0,
selectNum: 0, selectNum: 0,
doctorName:'', doctorName: '',
isIndeterminate: false, isIndeterminate: false,
doctorList: [ doctorList: [
{ {
@ -216,11 +278,10 @@ export default {
}, },
created() { created() {
store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏 store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
this.calculateTotalNum()
}, },
mounted(){ mounted() {
store.commit('SET_CUSTOMIZE', false); store.commit('SET_CUSTOMIZE', false);
store.commit('SET_SLIDER_MENU','menuData'); store.commit('SET_SLIDER_MENU', 'menuData');
this.getInitData() this.getInitData()
}, },
render() { render() {
@ -232,30 +293,37 @@ export default {
}, },
methods: { methods: {
// 初始化请求 // 初始化请求
getInitData(){ getInitData() {
// this.$store.dispatch('showLoading')
this.$http('POST', '/api/admin/doctor_depart_list', { this.$http('POST', '/api/admin/doctor_depart_list', {
}).then(response => { }).then(response => {
if (response.code == 0) { if (response.code == 0 && Object.values(response.data).length > 0) {
this.doctorList = response.data const list = Object.values(response.data).map(item => {
this.$store.dispatch('hideLoading') return {
...item,
checked:false,
departs: item.departs ? Object.values(item.departs).flat() : []
}
})
this.doctorList = list
console.log(list,this.doctorList,'this.doctorList====');
this.calculateTotalNum()
} }
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')
}) })
}, },
inputBlur(val){ inputBlur(val) {
console.log(val,''); console.log(val, '');
this.getInitData() this.getInitData()
}, },
// 计算总条数 // 计算总条数
calculateTotalNum() { calculateTotalNum() {
this.totalNum = this.doctorList.reduce((total, doctor) => { this.totalNum = this.doctorList.reduce((total, doctor) => {
return total + (doctor.list ? doctor.list.length : 0); return total + (doctor.departs ? doctor.departs.length : 0);
}, 0); }, 0);
}, },
handleClick(row){ handleClick(row) {
console.log(row); console.log(row);
// 跳转编辑页面 // 跳转编辑页面
}, },
@ -328,18 +396,19 @@ export default {
}, },
batchOperate(type) { batchOperate(type) {
// this.tableSelections // this.tableSelections
console.log(this.tableSelections,'this.tableSelections----');
if (type == '1') { if (type == '1') {
// 禁用 // 禁用
this.getInitData() // this.getInitData()
} else { } else {
// 启用 // 启用
} }
}, },
onSwitchChange(item,index) { onSwitchChange(item, index) {
item.status = item.status == 0 ? 1 : 0; item.status = item.status == 0 ? 1 : 0;
console.log(index,item,'===='); console.log(index, item, '====');
this.$set(this.doctorList, item) this.$set(this.doctorList, item)
// let depart_ids = '' // let depart_ids = ''
@ -369,14 +438,14 @@ export default {
// // } // // }
// }) // })
// 生成的URL：/doctorInformation?doctorId=123&from=home // 生成的URL：/doctorInformation?doctorId=123&from=home
}, },
addHospital(item) { addHospital(item) {
// this.$router.push(`/hosInformation?doctorId=${item.id}`) // this.$router.push(`/hosInformation?doctorId=${item.id}`)
this.$router.push({ this.$router.push({
name: '医院信息', name: '医院信息',
query: { doctorId: item.id } query: { doctorId: item.id }
}) })
}, },
editDoctor(item) { editDoctor(item) {
@ -396,19 +465,20 @@ export default {
}, },
// 单个表格的选择变化 // 单个表格的选择变化
handleSelectionChange(index, selection) { handleSelectionChange(index, selection) {
console.log(index,selection,'=====');
// 更新当前表格的选中状态 // 更新当前表格的选中状态
this.doctorList[index].checked = selection.length === this.doctorList[index].list.length; this.doctorList[index].checked = selection.length === this.doctorList[index].departs.length;
this.tableSelections[index] = selection; this.tableSelections[index] = selection;
// 更新全局状态 // 更新全局状态
this.updateGlobalSelection(); this.updateGlobalSelection();
}, },
// 单个表格的全选/取消 // 单个表格的全选/取消
handleCheckAllChange(index) { handleCheckAllChange(index) {
const table = this.doctorList[index]; const table = this.doctorList[index];
const tableRef = this.getPopoverRef(index); const tableRef = this.getPopoverRef(index);
if (table.checked) { if (table.checked) {
// 全选当前表格 // 全选当前表格
tableRef.$refs.guiptable.toggleAllSelection(); tableRef.$refs.guiptable.toggleAllSelection();
@ -416,11 +486,11 @@ export default {
// 取消当前表格全选 // 取消当前表格全选
tableRef.$refs.guiptable.clearSelection(); tableRef.$refs.guiptable.clearSelection();
} }
// 更新全局状态 // 更新全局状态
this.updateGlobalSelection(); this.updateGlobalSelection();
}, },
// 总全选控制 // 总全选控制
handleTotalCheckAllChange() { handleTotalCheckAllChange() {
if (this.allChecked) { if (this.allChecked) {
@ -440,22 +510,22 @@ export default {
} }
}); });
} }
// 更新全局状态 // 更新全局状态
this.updateGlobalSelection(); this.updateGlobalSelection();
}, },
// 更新全局选中状态 // 更新全局选中状态
updateGlobalSelection() { updateGlobalSelection() {
// 计算总选中数 // 计算总选中数
this.selectNum = Object.values(this.tableSelections).reduce((total, selection) => { this.selectNum = Object.values(this.tableSelections).reduce((total, selection) => {
return total + (selection ? selection.length : 0); return total + (selection ? selection.length : 0);
}, 0); }, 0);
// 计算总全选状态 // 计算总全选状态
const allTables = this.doctorList.length; const allTables = this.doctorList.length;
const checkedTables = this.doctorList.filter(table => table.checked).length; const checkedTables = this.doctorList.filter(table => table.checked).length;
this.allChecked = checkedTables === allTables && allTables > 0; this.allChecked = checkedTables === allTables && allTables > 0;
this.isIndeterminate = checkedTables > 0 && checkedTables < allTables; this.isIndeterminate = checkedTables > 0 && checkedTables < allTables;
}, },
@ -515,6 +585,7 @@ export default {
} }
} }
::v-deep .el-form-item { ::v-deep .el-form-item {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }

Write Preview
Loading…
Cancel
Save