|
|
|
@ -1,154 +1,28 @@ |
|
|
|
<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 class="min-width pagePadding " style="background: #F5F7FA;"> |
|
|
|
sdjkhfkdskfsdkfjlsdk |
|
|
|
</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 GuipTable from '@/components/GuipTable.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 |
|
|
|
// GuipInput, |
|
|
|
// GuipButton, |
|
|
|
// GuipSwitch, |
|
|
|
// GuipTable, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
const { authtoken } = this.$route.query; |
|
|
|
@ -174,264 +48,21 @@ export default { |
|
|
|
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); |
|
|
|
// const list = Object.values(response.data).map(item => { |
|
|
|
// return { |
|
|
|
// ...item, |
|
|
|
// checked:false, |
|
|
|
// departs: item.departs ? Object.values(item.departs).flat() : [] |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// this.doctorList = list |
|
|
|
// this.pageShow = true |
|
|
|
} |
|
|
|
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> |
|
|
|
|