|
|
|
|
<template>
|
|
|
|
|
<div class="min-width" style="background: #F5F7FA;">
|
|
|
|
|
<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('1')">批量禁用</GuipButton>
|
|
|
|
|
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
|
|
|
|
|
@click="batchOperate('2')">
|
|
|
|
|
批量启用</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.avatar"></el-avatar>
|
|
|
|
|
<span class="name">{{ item.name }}</span>
|
|
|
|
|
<span>{{ item.phone }}</span>
|
|
|
|
|
<GuipSwitch :modelValue="item.status" @change="onSwitchChange(item,index)">
|
|
|
|
|
</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.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>
|
|
|
|
|
|
|
|
|
|
<el-table-column prop="group" label="组别" min-width="165">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="flex cell_render">
|
|
|
|
|
{{ 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>
|
|
|
|
|
</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';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
tableSelections:[],//已选中数据
|
|
|
|
|
tableData: [
|
|
|
|
|
{
|
|
|
|
|
sort: 1
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
popoverRefs: {},
|
|
|
|
|
loading: false,
|
|
|
|
|
switchValue: true,
|
|
|
|
|
checked: false,
|
|
|
|
|
checked1: false,
|
|
|
|
|
totalNum: 0,
|
|
|
|
|
selectNum: 0,
|
|
|
|
|
doctorName:'',
|
|
|
|
|
isIndeterminate: false,
|
|
|
|
|
doctorList: [
|
|
|
|
|
// {
|
|
|
|
|
// id: 10,
|
|
|
|
|
// checked: false,
|
|
|
|
|
// name: '一二',
|
|
|
|
|
// idcard: '532524198711223615',
|
|
|
|
|
// desc: '就哈哈哈哈，嗷跳舞',
|
|
|
|
|
// detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
|
|
|
|
|
// tag: '专业',
|
|
|
|
|
// phone: '17785748373',
|
|
|
|
|
// avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
|
|
|
|
// status: true,
|
|
|
|
|
// list: [
|
|
|
|
|
// {
|
|
|
|
|
// hos: [
|
|
|
|
|
// '第三人民医院 针灸科',
|
|
|
|
|
// '第一人民医院 中医科',
|
|
|
|
|
// ],
|
|
|
|
|
// time: '2054 - 10 - 03',
|
|
|
|
|
// status: true,
|
|
|
|
|
// group: '2',
|
|
|
|
|
// setMenu: '4',
|
|
|
|
|
// nums: '88',
|
|
|
|
|
// checked: false,
|
|
|
|
|
// },
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 10,
|
|
|
|
|
// checked: false,
|
|
|
|
|
// name: '一二',
|
|
|
|
|
// idcard: '532524198711223615',
|
|
|
|
|
// desc: '就哈哈哈哈，嗷跳舞',
|
|
|
|
|
// detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
|
|
|
|
|
// tag: '专业',
|
|
|
|
|
// phone: '17785748373',
|
|
|
|
|
// avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
|
|
|
|
// status: false,
|
|
|
|
|
// list: [
|
|
|
|
|
// {
|
|
|
|
|
// hos: [
|
|
|
|
|
// '第三人民医院 针灸科',
|
|
|
|
|
// '第一人民医院 中医科',
|
|
|
|
|
// ],
|
|
|
|
|
// time: '2054 - 10 - 03',
|
|
|
|
|
// status: true,
|
|
|
|
|
// group: '2',
|
|
|
|
|
// setMenu: '4',
|
|
|
|
|
// nums: '88',
|
|
|
|
|
// checked: false,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// hos: [
|
|
|
|
|
// '第三人民医院 针灸科',
|
|
|
|
|
// '第一人民医院 中医科',
|
|
|
|
|
// ],
|
|
|
|
|
// time: '2054 - 10 - 03',
|
|
|
|
|
// status: true,
|
|
|
|
|
// group: '2',
|
|
|
|
|
// setMenu: '4',
|
|
|
|
|
// nums: '88',
|
|
|
|
|
// checked: false,
|
|
|
|
|
// },
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// id: 10,
|
|
|
|
|
// checked: false,
|
|
|
|
|
// name: '一二',
|
|
|
|
|
// idcard: '532524198711223615',
|
|
|
|
|
// desc: '就哈哈哈哈，嗷跳舞',
|
|
|
|
|
// detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
|
|
|
|
|
// tag: '专业',
|
|
|
|
|
// phone: '17785748373',
|
|
|
|
|
// avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
|
|
|
|
// status: false,
|
|
|
|
|
// list: [
|
|
|
|
|
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
allChecked: false,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
// GuipToolTip,
|
|
|
|
|
// SvgIcon,
|
|
|
|
|
GuipInput,
|
|
|
|
|
GuipButton,
|
|
|
|
|
GuipSwitch,
|
|
|
|
|
GuipTable,
|
|
|
|
|
// CustomDropdown
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
|
|
|
|
|
this.calculateTotalNum()
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
this.getInitData()
|
|
|
|
|
},
|
|
|
|
|
render() {
|
|
|
|
|
console.log("组件重新渲染");
|
|
|
|
|
return 'a';
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 初始化请求
|
|
|
|
|
getInitData(){
|
|
|
|
|
this.$store.dispatch('showLoading')
|
|
|
|
|
this.$http('POST', '/api/admin/doctor_depart_list', {
|
|
|
|
|
// doctorName:this.doctorName
|
|
|
|
|
},{
|
|
|
|
|
headers:{
|
|
|
|
|
'AUTHADMIN' :'b10346e6-5003-4644-8e48-e14f49874338'
|
|
|
|
|
}
|
|
|
|
|
}).then(response => {
|
|
|
|
|
if (response.code == 0) {
|
|
|
|
|
this.$store.dispatch('hideLoading')
|
|
|
|
|
this.doctorList = response.data
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
console.error(error, 'error')
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
inputBlur(val){
|
|
|
|
|
console.log(val,'');
|
|
|
|
|
this.getInitData()
|
|
|
|
|
},
|
|
|
|
|
// 计算总条数
|
|
|
|
|
calculateTotalNum() {
|
|
|
|
|
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('已取消编辑');
|
|
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
|
this.$set(this.doctorList, row)
|
|
|
|
|
},
|
|
|
|
|
batchOperate(type) {
|
|
|
|
|
// this.tableSelections
|
|
|
|
|
if (type == '1') {
|
|
|
|
|
// 禁用
|
|
|
|
|
this.getInitData()
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
// 启用
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onSwitchChange(item,index) {
|
|
|
|
|
console.log(index, '====');
|
|
|
|
|
// 更新医生启用状态
|
|
|
|
|
this.$http('POST', '/supernew/ajax_get_type_batch_list', {
|
|
|
|
|
id:item.id
|
|
|
|
|
}).then(response => {
|
|
|
|
|
if (response.code == 0) {
|
|
|
|
|
this.doctorList = response.data
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
console.error(error, 'error')
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
addDoctor() {
|
|
|
|
|
this.$router.push(`/doctorInformation`)
|
|
|
|
|
},
|
|
|
|
|
addHospital(item) {
|
|
|
|
|
this.$router.push(`/hosInformation?doctorId=${item.id}`)
|
|
|
|
|
},
|
|
|
|
|
editDoctor(item) {
|
|
|
|
|
this.$router.push(`/doctorInformation?id=${item.id}`)
|
|
|
|
|
},
|
|
|
|
|
// 单个表格的选择变化
|
|
|
|
|
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>
|
|
|
|
|
<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 {
|
|
|
|
|
margin: 12px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
