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.
495 lines
18 KiB
495 lines
18 KiB
<template>
|
|
<div class="min-width pagePadding " style="background: #F5F7FA;" v-if="pageShow">
|
|
<div class="doctor-list-wrap ">
|
|
<p class="pageTitle">医生列表</p>
|
|
<el-form>
|
|
<div class="selectAllTable-wrap flex-between mt32">
|
|
<div class="left flex">
|
|
<div class="checkboxAll">
|
|
<el-checkbox @change="handleTotalCheckAllChange" v-model="allChecked"
|
|
:indeterminate="isIndeterminate">全选</el-checkbox>
|
|
</div>
|
|
<span class="totalCount">共{{ totalNum }}条，已选{{ selectNum }}条</span>
|
|
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
|
|
@click="batchOperate('0')">批量禁用</GuipButton>
|
|
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
|
|
@click="batchOperate('1')">
|
|
批量启用</GuipButton>
|
|
</div>
|
|
<div class="right flex">
|
|
<span>搜索医生</span>
|
|
<GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px"
|
|
placeholder="输入姓名" @blur="inputBlur" v-model="doctorName" />
|
|
<GuipButton @click="addDoctor" size="form">新增医生</GuipButton>
|
|
</div>
|
|
</div>
|
|
<div class="tableList mt32" v-for="(item, index) in doctorList" :key="index">
|
|
|
|
<div class="top flex-between mb24">
|
|
<div class="left left1 flex">
|
|
<el-checkbox @change="handleCheckAllChange(index)" v-model="item.checked"></el-checkbox>
|
|
<el-avatar :src="item.avator" v-if="item.avator"></el-avatar>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span>{{ item.phone }}</span>
|
|
<GuipSwitch :value="Boolean(Number(item.status))" @change="onSwitchChange(item, index)" :active-value="true" :inactive-value="false"></GuipSwitch>
|
|
|
|
<GuipButton type="text" @click="editDoctor(item, index)">编辑</GuipButton>
|
|
</div>
|
|
<div class="right">
|
|
<GuipButton type="system" size="form" @click="addHospital(item)">添加医院</GuipButton>
|
|
</div>
|
|
</div>
|
|
|
|
<GuipTable :tableData="item.departs" 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="depart_name" label="出诊医院" min-width="295">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
<span>{{ scope.row.hispital_name }} {{ scope.row.depart_name }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="project_count" label="项目个数" min-width="135">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
<span>{{ scope.row.project_count }}项</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="classify_count" label="组别" min-width="135">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
{{ scope.row.classify_count }}分组
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="classify_count" label="套餐" min-width="165">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
{{ scope.row.package_count }}套餐
|
|
</div>
|
|
</template>
|
|
</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">
|
|
<template slot-scope="scope">
|
|
<GuipSwitch :value="scope.row.status" active-value="1" inactive-value="0" @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>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// const cityOptions = ['上海', '北京', '广州', '深圳'];
|
|
import store from '@/store';
|
|
import GuipTable from '@/components/GuipTable.vue';
|
|
// import SvgIcon from '@/components/SvgIcon.vue';
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
import GuipSwitch from '@/components/GuipSwitch.vue';
|
|
import GuipInput from '@/components/GuipInput.vue';
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: {
|
|
approver_phone: "",
|
|
code: "",
|
|
create: "",
|
|
desc: "",
|
|
detail: "",
|
|
first_visit_audit: "",
|
|
id: "",
|
|
idcard: "",
|
|
label: "",
|
|
name: "",
|
|
phone: "",
|
|
uid: "",
|
|
departs: {}
|
|
},
|
|
tableSelections: [],//已选中数据
|
|
tableData: [
|
|
{
|
|
sort: 1
|
|
}
|
|
],
|
|
popoverRefs: {},
|
|
loading: false,
|
|
switchValue: true,
|
|
checked: false,
|
|
checked1: false,
|
|
totalNum: 0,
|
|
selectNum: 0,
|
|
doctorName: '',
|
|
isIndeterminate: false,
|
|
doctorList: false,
|
|
allChecked: false,
|
|
pageShow:false
|
|
}
|
|
},
|
|
components: {
|
|
// GuipToolTip,
|
|
// SvgIcon,
|
|
GuipInput,
|
|
GuipButton,
|
|
GuipSwitch,
|
|
GuipTable,
|
|
// CustomDropdown
|
|
},
|
|
created() {
|
|
const { authtoken } = this.$route.query;
|
|
if(authtoken) {
|
|
localStorage.setItem('authtoken', authtoken);
|
|
location.href = '/'
|
|
return;
|
|
}
|
|
store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
|
|
},
|
|
mounted() {
|
|
store.commit('SET_CUSTOMIZE', false);
|
|
store.commit('SET_SLIDER_MENU', 'menuData');
|
|
this.getInitData()
|
|
},
|
|
computed: {
|
|
...mapState(['menuData']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
methods: {
|
|
// 初始化请求
|
|
getInitData() {
|
|
this.$http('POST', '/api/admin/doctor_depart_list', {
|
|
name: this.doctorName
|
|
}).then(response => {
|
|
if (response.code == 0) {
|
|
const list = Object.values(response.data).map(item => {
|
|
return {
|
|
...item,
|
|
checked:false,
|
|
departs: item.departs ? Object.values(item.departs).flat() : []
|
|
}
|
|
})
|
|
this.doctorList = list
|
|
this.calculateTotalNum()
|
|
this.pageShow = true
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
inputBlur(val) {
|
|
console.log(val, '');
|
|
this.getInitData()
|
|
},
|
|
// 计算总条数
|
|
calculateTotalNum() {
|
|
this.totalNum = this.doctorList.reduce((total, doctor) => {
|
|
return total + (doctor.departs ? doctor.departs.length : 0);
|
|
}, 0);
|
|
},
|
|
handleClick(row) {
|
|
this.$router.push({
|
|
name: '医院信息',
|
|
query: { doctor_id: row.doctor_id,depart_id:row.depart_id }
|
|
})
|
|
// 跳转编辑页面
|
|
},
|
|
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('已取消编辑');
|
|
},
|
|
popshow() {
|
|
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 == 0 ? 1 : 0;
|
|
this.$http('POST', '/api/admin/depart_mutil_option', {
|
|
depart_index_ids:row.id,
|
|
status:row.status
|
|
}).then(response => {
|
|
if (response.code == 0) {
|
|
this.$message.success(response.msg);
|
|
}else{
|
|
this.$message.error(response.msg);
|
|
}
|
|
this.getInitData()
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
this.$message.error('操作失败');
|
|
})
|
|
|
|
this.$set(this.doctorList, row)
|
|
},
|
|
batchOperate(status) {
|
|
console.log(this.tableSelections,'this.tableSelections----');
|
|
if(!this.tableSelections || this.tableSelections.length <= 0) {
|
|
this.$message.error('未选择要'+(status == '0' ? '禁用':'启用')+'的科室')
|
|
return;
|
|
}
|
|
|
|
var tableSelections = this.tableSelections.flat()
|
|
|
|
var depart_index_ids = '';
|
|
for(var i=0; i< tableSelections.length;i++) {
|
|
if(!depart_index_ids) {
|
|
depart_index_ids = tableSelections[i].id
|
|
continue;
|
|
}
|
|
depart_index_ids += ','+tableSelections[i].id
|
|
}
|
|
|
|
this.$http('POST', '/api/admin/depart_mutil_option', {
|
|
depart_index_ids:depart_index_ids,
|
|
status:status
|
|
}).then(response => {
|
|
if (response.code == 0) {
|
|
this.$message.success(response.msg);
|
|
}else{
|
|
this.$message.error(response.msg);
|
|
}
|
|
location.reload()
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
this.$message.error('操作失败');
|
|
})
|
|
},
|
|
onSwitchChange(item, index) {
|
|
item.status = item.status == 0 ? 1 : 0;
|
|
console.log(index, item, '====');
|
|
this.$set(this.doctorList, item)
|
|
|
|
this.$http('POST', '/api/admin/set_doctor_status', {
|
|
doctor_id:item.id,
|
|
status:item.status
|
|
}).then(response => {
|
|
if (response.code == 0) {
|
|
this.$message.success(response.msg);
|
|
}else{
|
|
this.$message.error(response.msg);
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
this.$message.error('操作失败');
|
|
})
|
|
},
|
|
addDoctor() {
|
|
this.$router.push({
|
|
name: '医生信息',
|
|
})
|
|
// this.$router.push({
|
|
// name: '医生信息',
|
|
// // query: {
|
|
// // doctorId: 123,
|
|
// // from: 'home'
|
|
// // }
|
|
// })
|
|
|
|
// 生成的URL：/doctorInformation?doctorId=123&from=home
|
|
|
|
},
|
|
addHospital(item) {
|
|
this.$router.push({
|
|
name: '医院信息',
|
|
query: { doctor_id: item.id }
|
|
})
|
|
},
|
|
editDoctor(item) {
|
|
this.$router.push({
|
|
name: '医生信息',
|
|
query: { doctor_id: item.id}
|
|
})
|
|
},
|
|
// 单个表格的选择变化
|
|
handleSelectionChange(index, selection) {
|
|
// 更新当前表格的选中状态
|
|
this.doctorList[index].checked = selection.length === this.doctorList[index].departs.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>
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-avatar {
|
|
width: 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 {
|
|
background: #fff;
|
|
padding: 32px 36px;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
|
|
.left,
|
|
.right {
|
|
align-items: center;
|
|
}
|
|
|
|
.selectAllTable-wrap {
|
|
align-items: center;
|
|
|
|
.totalCount {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
line-height: 13px;
|
|
letter-spacing: 0.08em;
|
|
color: #8A9099;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.right {
|
|
letter-spacing: 0.08em;
|
|
color: #626573;
|
|
}
|
|
}
|
|
|
|
.left1 {
|
|
gap: 12px;
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .el-form-item {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
</style>
|