zq
3 months ago
8 changed files with 350 additions and 236 deletions
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 11 KiB |
@ -1,5 +1,244 @@ |
|||||
<template> |
<template> |
||||
<view> |
<div class="min-width" style="background: #F5F7FA;"> |
||||
kasjdkashdkjsahjk |
<div class="doctor-list-wrap "> |
||||
</view> |
<p class="pageTitle">医生列表</p> |
||||
|
<el-form> |
||||
|
<div class="selectAllTable-wrap flex-between"> |
||||
|
<div class="left flex"> |
||||
|
<div class="checkboxAll"> |
||||
|
<el-checkbox @change="handleCheckAllChange" |
||||
|
v-model="checked">全选</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 mt32"> |
||||
|
<span>搜索医生</span> |
||||
|
<GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px" placeholder="输入姓名" /> |
||||
|
<GuipButton @click="addDoctor" size="form">新增医生</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tableList mt32"> |
||||
|
<div class="top flex-between mb24"> |
||||
|
<div class="left left1 flex"> |
||||
|
<el-checkbox @change="handleCheckAllChange(1)" |
||||
|
v-model="checked1"></el-checkbox> |
||||
|
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> |
||||
|
<span class="name">张虎</span> |
||||
|
<span>13788990987</span> |
||||
|
<GuipSwitch :modelValue="switchValue" @change="onSwitchChange(1)"> |
||||
|
</GuipSwitch> |
||||
|
<GuipButton type="text" @click="editDoctor(1)">编辑</GuipButton> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<GuipButton type="system" size="form" @click="addHospital(1)">添加医院</GuipButton> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<GuipTable :multiple="true" :tableData="tableData" style="width: 100%" ref="table_1" |
||||
|
:show-header="false" :loading="loading"> |
||||
|
<el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column> |
||||
|
</GuipTable> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</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 { |
||||
|
tableData: [ |
||||
|
{ |
||||
|
sort:1 |
||||
|
} |
||||
|
], |
||||
|
loading:false, |
||||
|
switchValue:true, |
||||
|
checked:false, |
||||
|
checked1:false, |
||||
|
totalNum: 0, |
||||
|
selectNum: 0, |
||||
|
isIndeterminate:true, |
||||
|
doctorList:[ |
||||
|
{ |
||||
|
id:10, |
||||
|
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, |
||||
|
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, |
||||
|
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, |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
// GuipToolTip, |
||||
|
// SvgIcon, |
||||
|
GuipInput, |
||||
|
GuipButton, |
||||
|
GuipSwitch, |
||||
|
GuipTable, |
||||
|
// CustomDropdown |
||||
|
}, |
||||
|
created() { |
||||
|
store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏 |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleCheckAllChange(val) { |
||||
|
this.checkedCities = val ? cityOptions : []; |
||||
|
this.isIndeterminate = false; |
||||
|
}, |
||||
|
batchOperate(type){ |
||||
|
if(type== '1'){ |
||||
|
// 禁用 |
||||
|
|
||||
|
}else{ |
||||
|
// 启用 |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onSwitchChange(index){ |
||||
|
console.log(index,'===='); |
||||
|
}, |
||||
|
addDoctor(){ |
||||
|
console.log('添加医生'); |
||||
|
}, |
||||
|
addHospital(index){ |
||||
|
console.log(index,'===='); |
||||
|
}, |
||||
|
editDoctor(index){ |
||||
|
console.log(index,'===='); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-avatar{ |
||||
|
width: 26px; |
||||
|
height: 26px; |
||||
|
} |
||||
|
.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> |
||||
Loading…
Reference in new issue