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

医生列表

admin_version1.0_2025_06_26
zq 1 month ago
parent
0307aa2f66
commit
0b0f71c6ae
3 changed files with 359 additions and 120 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. 12
      src/store/index.js
  2. 9
      src/style/theme/common.scss
  3. 458
      src/views/HomeView.vue

12
src/store/index.js
View File

@ -132,9 +132,16 @@ export default new Vuex.Store({
} }
] ]
} }
] ],
pageName:'医生管理'
}, },
actions: { actions: {
SET_PAGENAME({
commit
}) {
commit('SET_PAGENAME');
},
SET_HEADER({ SET_HEADER({
commit commit
}) { }) {
@ -199,6 +206,9 @@ export default new Vuex.Store({
SET_PAGETITLE(state, title) { SET_PAGETITLE(state, title) {
state.pageTitle = title; state.pageTitle = title;
}, },
SET_PAGENAME(state, name) {
state.pageName = name;
},
SET_ADDSERVICELIST(state, list) { SET_ADDSERVICELIST(state, list) {
state.addServiceList = list; state.addServiceList = list;
} }

9
src/style/theme/common.scss
View File

@ -13,6 +13,15 @@ body {
padding: 0; padding: 0;
} }
} }
.pageTitle{
font-family: Microsoft YaHei UI;
font-size: 14px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
text-align: left;
}
/* 隐藏全局滚动条 */ /* 隐藏全局滚动条 */
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;

458
src/views/HomeView.vue
View File

@ -3,42 +3,89 @@
<div class="doctor-list-wrap "> <div class="doctor-list-wrap ">
<p class="pageTitle">医生列表</p> <p class="pageTitle">医生列表</p>
<el-form> <el-form>
<div class="selectAllTable-wrap flex-between"> <div class="selectAllTable-wrap flex-between mt32">
<div class="left flex"> <div class="left flex">
<div class="checkboxAll"> <div class="checkboxAll">
<el-checkbox @change="handleCheckAllChange" <el-checkbox @change="handleTotalCheckAllChange" v-model="allChecked" :indeterminate="isIndeterminate">全选</el-checkbox>
v-model="checked">全选</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'}" @click="batchOperate('1')">批量禁用</GuipButton> <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
<GuipButton type="ignore" :btnstyle="{width:'99px',height:'32px'}" @click="batchOperate('2')">批量启用</GuipButton> @click="batchOperate('1')">批量禁用</GuipButton>
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
@click="batchOperate('2')">
批量启用</GuipButton>
</div> </div>
<div class="right flex mt32"> <div class="right flex">
<span>搜索医生</span> <span>搜索医生</span>
<GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px" placeholder="输入姓名" /> <GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px"
placeholder="输入姓名" />
<GuipButton @click="addDoctor" size="form">新增医生</GuipButton> <GuipButton @click="addDoctor" size="form">新增医生</GuipButton>
</div> </div>
</div> </div>
<div class="tableList mt32"> <div class="tableList mt32" v-for="(item, index) in doctorList" :key="index">
<div class="top flex-between mb24"> <div class="top flex-between mb24">
<div class="left left1 flex"> <div class="left left1 flex">
<el-checkbox @change="handleCheckAllChange(1)" <el-checkbox @change="handleCheckAllChange(index)" v-model="item.checked"></el-checkbox>
v-model="checked1"></el-checkbox> <el-avatar :src="item.avatar"></el-avatar>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> <span class="name">{{ item.name }}</span>
<span class="name">张虎</span> <span>{{ item.phone }}</span>
<span>13788990987</span> <GuipSwitch :modelValue="item.status" @change="onSwitchChange(index)">
<GuipSwitch :modelValue="switchValue" @change="onSwitchChange(1)"> </GuipSwitch>
</GuipSwitch> <GuipButton type="text" @click="editDoctor(index)">编辑</GuipButton>
<GuipButton type="text" @click="editDoctor(1)">编辑</GuipButton> </div>
</div> <div class="right">
<div class="right"> <GuipButton type="system" size="form" @click="addHospital(index)">添加医院</GuipButton>
<GuipButton type="system" size="form" @click="addHospital(1)">添加医院</GuipButton> </div>
</div> </div>
<GuipTable :tableData="item.list" style="width: 100%" :ref="(el) => setPopoverRef(index, el)" @selection-change="handleSelectionChange(index,$event)"
:show-header="false" :loading="loading" >
<el-table-column type="selection" width="135">
</el-table-column>
<el-table-column prop="hos" label="出诊医院" min-width="295">
<template slot-scope="scope">
<div class="flex cell_render">
<span>{{ scope.row.hos[0] }}项</span>
<span v-if="scope.row.hos.length">（ 等{{ scope.row.hos.length }}个 ）</span>
</div>
</template>
</el-table-column>
<el-table-column prop="nums" label="项目个数" min-width="165">
<template slot-scope="scope">
<div class="flex cell_render">
<span>{{ scope.row.nums }}项</span>
</div>
</template>
</el-table-column>
</div> <el-table-column prop="group" label="组别" min-width="165">
<GuipTable :multiple="true" :tableData="tableData" style="width: 100%" ref="table_1" <template slot-scope="scope">
:show-header="false" :loading="loading"> <div class="flex cell_render">
<el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column> {{ scope.row.group }}分组
</div>
</template>
</el-table-column>
<el-table-column prop="setMenu" label="套餐" min-width="165">
<template slot-scope="scope">
<div class="flex cell_render">
{{ scope.row.setMenu }}分组
</div>
</template>
</el-table-column>
<el-table-column prop="time" label="时间" min-width="200"> </el-table-column>
<el-table-column prop="stock" fixed="right" min-width="110">
<template slot-scope="scope">
<GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange1(scope.row)">
</GuipSwitch>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" min-width="120px">
<template slot-scope="scope">
<div class="flex">
<el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
</div>
</template>
</el-table-column>
</GuipTable> </GuipTable>
</div> </div>
</el-form> </el-form>
@ -46,7 +93,7 @@
</div> </div>
</template> </template>
<script> <script>
const cityOptions = ['上海', '北京', '广州', '深圳']; // const cityOptions = ['上海', '北京', '广州', '深圳'];
import store from '@/store'; import store from '@/store';
import GuipTable from '@/components/GuipTable.vue'; import GuipTable from '@/components/GuipTable.vue';
// import SvgIcon from '@/components/SvgIcon.vue'; // import SvgIcon from '@/components/SvgIcon.vue';
@ -57,107 +104,102 @@ import GuipInput from '@/components/GuipInput.vue';
export default { export default {
data() { data() {
return { return {
tableSelections:[],//已选中数据
tableData: [ tableData: [
{ {
sort:1 sort: 1
} }
], ],
loading:false, popoverRefs: {},
switchValue:true, loading: false,
checked:false, switchValue: true,
checked1:false, checked: false,
checked1: false,
totalNum: 0, totalNum: 0,
selectNum: 0, selectNum: 0,
isIndeterminate:true, isIndeterminate: false,
doctorList:[ doctorList: [
{ {
id:10, id: 10,
name:'一二', checked: false,
idcard:'532524198711223615', name: '一二',
desc:'就哈哈哈哈，嗷跳舞', idcard: '532524198711223615',
detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。', desc: '就哈哈哈哈，嗷跳舞',
tag:'专业', detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
phone:'17785748373', tag: '专业',
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', phone: '17785748373',
status:true, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
list:[ status: true,
list: [
{ {
hos:[ hos: [
'第三人民医院 针灸科', '第三人民医院 针灸科',
'第一人民医院 中医科', '第一人民医院 中医科',
], ],
time:'2054 - 10 - 03', time: '2054 - 10 - 03',
status:true, status: true,
group:'2组', group: '2',
setMenu:'4套餐', setMenu: '4',
nums:'88项', nums: '88',
checked:false, checked: false,
}, },
] ]
}, },
{ {
id:10, id: 10,
name:'一二', checked: false,
idcard:'532524198711223615', name: '一二',
desc:'就哈哈哈哈，嗷跳舞', idcard: '532524198711223615',
detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。', desc: '就哈哈哈哈，嗷跳舞',
tag:'专业', detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
phone:'17785748373', tag: '专业',
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', phone: '17785748373',
status:false, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
list:[ status: false,
list: [
{ {
hos:[ hos: [
'第三人民医院 针灸科', '第三人民医院 针灸科',
'第一人民医院 中医科', '第一人民医院 中医科',
], ],
time:'2054 - 10 - 03', time: '2054 - 10 - 03',
status:true, status: true,
group:'2组', group: '2',
setMenu:'4套餐', setMenu: '4',
nums:'88项', nums: '88',
checked:false, checked: false,
}, },
{ {
hos:[ hos: [
'第三人民医院 针灸科', '第三人民医院 针灸科',
'第一人民医院 中医科', '第一人民医院 中医科',
], ],
time:'2054 - 10 - 03', time: '2054 - 10 - 03',
status:true, status: true,
group:'2组', group: '2',
setMenu:'4套餐', setMenu: '4',
nums:'88项', nums: '88',
checked:false, checked: false,
}, },
] ]
}, },
{ {
id:10, id: 10,
name:'一二', checked: false,
idcard:'532524198711223615', name: '一二',
desc:'就哈哈哈哈，嗷跳舞', idcard: '532524198711223615',
detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。', desc: '就哈哈哈哈，嗷跳舞',
tag:'专业', detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
phone:'17785748373', tag: '专业',
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', phone: '17785748373',
status:false, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
list:[ status: false,
{ list: [
hos:[
'第三人民医院 针灸科',
'第一人民医院 中医科',
],
time:'2054 - 10 - 03',
status:true,
group:'2组',
setMenu:'4套餐',
nums:'88项',
checked:false,
},
] ]
}, },
] ],
allChecked: false,
} }
}, },
components: { components: {
@ -171,55 +213,230 @@ export default {
}, },
created() { created() {
store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏 store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
this.calculateTotalNum()
}, },
computed: { computed: {
}, },
methods: { methods: {
handleCheckAllChange(val) { // 计算总条数
this.checkedCities = val ? cityOptions : []; calculateTotalNum() {
this.isIndeterminate = false; this.totalNum = this.doctorList.reduce((total, doctor) => {
return total + (doctor.list ? doctor.list.length : 0);
}, 0);
},
handleClick(row){
console.log(row);
// 跳转编辑页面
},
setPopoverRef(index, el) {
if (el) {
this.popoverRefs[index] = el
}
},
//获取当前实例
getPopoverRef(index) {
return this.popoverRefs[index]
},
// 点击价格单元格时触发
handlePriceClick(row, index, type) {
// 关闭其他行的弹框
this.popoverFlag = true;
this.doctorList.forEach((item, i) => {
if (i !== index) {
item[type + 'PopoverVisible'] = false;
}
});
// 打开当前行的弹框
row[type + 'PopoverVisible'] = true;
row['edit_' + type] = row[type]
// row.edit_price = row.price; // 初始化输入框的值
},
// 保存价格
savePrice(row, type) {
if (type == 'price' && row.edit_price === '') {
this.$message.warning('价格不能为空');
return;
}
if (type == 'word' && row.word && row.editWord === '') {
this.$message.warning('字符不能为空');
return;
}
if (row.edit_word) {
row.word = row.edit_word
}
row[type] = row['edit_' + type]; // 更新价格
row[type + 'PopoverVisible'] = false; // 关闭弹框
this.$message.success('保存成功');
this.$set(this.doctorList, row)
console.log('保存价格：', this.doctorList, row.price);
// 这里可以调用接口保存修改后的价格
},
// 取消编辑
cancelEdit(row, type) {
row[type + 'PopoverVisible'] = false;
this.popoverFlag = false
// row[type + '_popover'] = false; // 关闭弹框
this.$Message.info('已取消编辑');
}, },
batchOperate(type){ popshow() {
if(type== '1'){ var ariaEls = document.querySelectorAll('.el-popover')
ariaEls.forEach((item) => {
item.removeAttribute('aria-hidden')
})
ariaEls = document.querySelectorAll('.el-radio__original')
ariaEls.forEach((item) => {
item.removeAttribute('aria-hidden')
})
},
onSwitchChange1(row) {
console.log(row, '------flag');
row.status = !row.status;
this.$set(this.doctorList, row)
},
// handleCheckAllChange(val) {
// this.checkedCities = val ? cityOptions : [];
// this.isIndeterminate = false;
// },
// handleCheckAllChange(val) {
// if (val == 'all') {
// console.log(this.allChecked, '-----allchecked');
// var i = 0;
// while (i < this.doctorList.length) {
// this.doctorList[i].checked = this.allChecked;
// this.getPopoverRef(i).$refs.guiptable.toggleAllSelection();
// i++
// }
// } else {
// this.getPopoverRef(val).$refs.guiptable.toggleAllSelection();
// }
// },
batchOperate(type) {
if (type == '1') {
// 禁用 // 禁用
}else{ } else {
// 启用 // 启用
} }
}, },
onSwitchChange(index){ onSwitchChange(index) {
console.log(index,'===='); console.log(index, '====');
}, },
addDoctor(){ addDoctor() {
console.log('添加医生'); console.log('添加医生');
}, },
addHospital(index){ addHospital(index) {
console.log(index,'===='); console.log(index, '====');
},
editDoctor(index) {
console.log(index, '====');
}, },
editDoctor(index){ // 单个表格的选择变化
console.log(index,'===='); handleSelectionChange(index, selection) {
// 更新当前表格的选中状态
this.doctorList[index].checked = selection.length === this.doctorList[index].list.length;
this.tableSelections[index] = selection;
// 更新全局状态
this.updateGlobalSelection();
},
// 单个表格的全选/取消
handleCheckAllChange(index) {
const table = this.doctorList[index];
const tableRef = this.getPopoverRef(index);
if (table.checked) {
// 全选当前表格
tableRef.$refs.guiptable.toggleAllSelection();
} else {
// 取消当前表格全选
tableRef.$refs.guiptable.clearSelection();
}
// 更新全局状态
this.updateGlobalSelection();
},
// 总全选控制
handleTotalCheckAllChange() {
if (this.allChecked) {
// 总全选：只选中未全选的表格
this.doctorList.forEach((table, index) => {
if (!table.checked) {
this.doctorList[index].checked = true;
this.getPopoverRef(index).$refs.guiptable.toggleAllSelection();
}
});
} else {
// 取消总全选：只取消已全选的表格
this.doctorList.forEach((table, index) => {
if (table.checked) {
this.doctorList[index].checked = false;
this.getPopoverRef(index).$refs.guiptable.clearSelection();
}
});
}
// 更新全局状态
this.updateGlobalSelection();
},
// 更新全局选中状态
updateGlobalSelection() {
// 计算总选中数
this.selectNum = Object.values(this.tableSelections).reduce((total, selection) => {
return total + (selection ? selection.length : 0);
}, 0);
// 计算总全选状态
const allTables = this.doctorList.length;
const checkedTables = this.doctorList.filter(table => table.checked).length;
this.allChecked = checkedTables === allTables && allTables > 0;
this.isIndeterminate = checkedTables > 0 && checkedTables < allTables;
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-avatar{ ::v-deep .el-avatar {
width: 26px; width: 26px;
height: 26px; height: 26px;
} }
::v-deep .el-table {
min-height: auto;
}
::v-deep .custom-popover {
position: fixed !important;
max-height: 290px;
overflow-y: auto;
margin-top: 0 !important;
margin-left: 0 !important;
transform: none !important;
}
.doctor-list-wrap { .doctor-list-wrap {
margin: 12px; margin: 12px;
background: #fff; background: #fff;
padding: 32px 36px; padding: 32px 36px;
height: 100%; height: 100%;
border-radius: 4px; border-radius: 4px;
.left,.right{
.left,
.right {
align-items: center; align-items: center;
} }
.selectAllTable-wrap{
.selectAllTable-wrap {
align-items: center; align-items: center;
.totalCount{
.totalCount {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
line-height: 13px; line-height: 13px;
@ -227,18 +444,21 @@ export default {
color: #8A9099; color: #8A9099;
margin-left: 12px; margin-left: 12px;
} }
.right{
.right {
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #626573; color: #626573;
} }
} }
.left1{
.left1 {
gap: 12px; gap: 12px;
} }
.el-form-item{
.el-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save