520 lines
15 KiB
Vue
520 lines
15 KiB
Vue
<template>
|
||
<lay-container fluid="true" class="organization-box">
|
||
<div style="display: flex">
|
||
<div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
|
||
<!-- tree -->
|
||
<div v-show="!isFold">
|
||
科室列表
|
||
</div>
|
||
|
||
<lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" v-model:selectedKey="selectedKey"
|
||
:showLine="showLine" :expandKeys="[1, 3, 4]" @node-click="handleClick">
|
||
<template #title="{ data }">
|
||
<span :class="selectedKey == data.id ? 'isChecked' : ''">
|
||
{{ data.title }} {{ data.id }}
|
||
</span>
|
||
</template>
|
||
</lay-tree>
|
||
<div class="isFold" @click="isFold = !isFold">
|
||
<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
|
||
<lay-icon v-else class="layui-icon-right"></lay-icon>
|
||
</div>
|
||
</div>
|
||
<div style="flex: 1; padding: 10px; over-flow: auto">
|
||
<!-- table -->
|
||
<lay-card>
|
||
<lay-form>
|
||
<lay-row>
|
||
<lay-col :md="5">
|
||
<lay-form-item label="用户账号" label-width="80">
|
||
<lay-input v-model="searchQuery.userAccount" placeholder="请输入" size="sm"
|
||
:allow-clear="true" style="width: 98%"></lay-input>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
<lay-col :md="5">
|
||
<lay-form-item label="用户名" label-width="80">
|
||
<lay-input v-model="searchQuery.userName" placeholder="请输入" size="sm"
|
||
:allow-clear="true" style="width: 98%"></lay-input>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
<lay-col :md="5">
|
||
<lay-form-item label="性别" label-width="80">
|
||
<lay-select class="search-input" size="sm" v-model="searchQuery.sex"
|
||
:allow-clear="true" placeholder="请选择">
|
||
<lay-select-option value="man" label="男"></lay-select-option>
|
||
<lay-select-option value="woman" label="女"></lay-select-option>
|
||
</lay-select>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
<lay-col :md="5">
|
||
<lay-form-item label-width="20">
|
||
<lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
|
||
查询
|
||
</lay-button>
|
||
<lay-button size="sm" @click="toReset"> 重置 </lay-button>
|
||
</lay-form-item>
|
||
</lay-col>
|
||
</lay-row>
|
||
</lay-form>
|
||
</lay-card>
|
||
<lay-table :page="page" :height="'100%'" :columns="columns" :loading="loading" :default-toolbar="true"
|
||
:data-source="dataSource" v-model:selected-keys="selectedKeys" @change="change"
|
||
@sortChange="sortChange">
|
||
<template #status="{ row }">
|
||
<lay-switch :model-value="row.status" @change="changeStatus($event, row)"></lay-switch>
|
||
</template>
|
||
<template #role="{ row }">
|
||
<lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
|
||
</template>
|
||
|
||
<template v-slot:toolbar>
|
||
<lay-button size="sm" type="primary" @click="changeVisible11('新增', null)">新增</lay-button>
|
||
<lay-button size="sm" @click="toRemove">删除</lay-button>
|
||
</template>
|
||
<template v-slot:operator="{ row }">
|
||
<lay-button size="xs" border="green" border-style="dashed"
|
||
@click="changeVisible11('编辑', row)">编辑</lay-button>
|
||
<lay-popconfirm content="确定要删除此用户吗?" @confirm="confirm" @cancel="cancel">
|
||
<lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
|
||
</lay-popconfirm>
|
||
</template>
|
||
</lay-table>
|
||
</div>
|
||
</div>
|
||
<lay-layer v-model="visible11" :title="title" :area="['500px', '400px']">
|
||
<div style="padding: 20px">
|
||
<lay-form :model="model11" ref="layFormRef11" required>
|
||
<lay-form-item label="所属科室" prop="department">
|
||
<lay-input v-model="model11.department" disabled></lay-input>
|
||
</lay-form-item>
|
||
<lay-form-item label="级别名称" prop="levelName">
|
||
<lay-input v-model="model11.levelName"></lay-input>
|
||
</lay-form-item>
|
||
<lay-form-item label="名额" prop="quota">
|
||
<lay-input-number v-model="model11.quota" :min="0"></lay-input-number>
|
||
</lay-form-item>
|
||
<lay-form-item label="最高评分" prop="maxScore">
|
||
<lay-input-number v-model="model11.maxScore" :min="0" :max="100"></lay-input-number>
|
||
</lay-form-item>
|
||
</lay-form>
|
||
<div style="width: 100%; text-align: center">
|
||
<lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
|
||
<lay-button size="sm" @click="toCancel">取消</lay-button>
|
||
</div>
|
||
</div>
|
||
</lay-layer>
|
||
</lay-container>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { layer } from '@layui/layui-vue'
|
||
|
||
const data = ref([
|
||
{
|
||
title: '内科',
|
||
id: 1,
|
||
children: [
|
||
{
|
||
title: '呼吸内科',
|
||
id: 2,
|
||
},
|
||
{
|
||
title: '心血管内科',
|
||
id: 3,
|
||
},
|
||
{
|
||
title: '消化内科',
|
||
id: 4,
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '外科',
|
||
id: 5,
|
||
children: [
|
||
{
|
||
title: '普通外科',
|
||
id: 6,
|
||
},
|
||
{
|
||
title: '骨科',
|
||
id: 7,
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '妇产科',
|
||
id: 8,
|
||
},
|
||
{
|
||
title: '儿科',
|
||
id: 9,
|
||
}
|
||
])
|
||
const showLine = ref(false)
|
||
const selectedKey = ref('')
|
||
const selectedNode = ref({
|
||
id: 0,
|
||
title: ''
|
||
})
|
||
const isFold = ref(false)
|
||
const searchQuery = ref({
|
||
userAccount: '',
|
||
userName: '',
|
||
sex: ''
|
||
})
|
||
function toReset() {
|
||
searchQuery.value = {
|
||
userAccount: '',
|
||
userName: '',
|
||
sex: ''
|
||
}
|
||
}
|
||
function handleClick(node: any) {
|
||
selectedNode.value = JSON.parse(JSON.stringify(node))
|
||
page.current = selectedNode.value.id
|
||
change(page)
|
||
}
|
||
function toAdd() {
|
||
visible22.value = true
|
||
}
|
||
function toEdit() {
|
||
model22.value = {
|
||
organization: '1',
|
||
name: '研发部',
|
||
fullName: 'xxxx公司-研发部',
|
||
code: '001',
|
||
type: '1',
|
||
sort: 1,
|
||
remark: '备注'
|
||
}
|
||
visible22.value = true
|
||
}
|
||
function toDelete() {
|
||
if (selectedKey.value == '') {
|
||
layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
|
||
icon: 3,
|
||
time: 2000
|
||
})
|
||
return
|
||
}
|
||
layer.confirm(
|
||
'您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
|
||
{
|
||
title: '提示',
|
||
btn: [
|
||
{
|
||
text: '确定',
|
||
callback: (id: any) => {
|
||
layer.msg('您已成功删除')
|
||
layer.close(id)
|
||
}
|
||
},
|
||
{
|
||
text: '取消',
|
||
callback: (id: any) => {
|
||
layer.msg('您已取消操作')
|
||
layer.close(id)
|
||
}
|
||
}
|
||
]
|
||
}
|
||
)
|
||
}
|
||
|
||
function toSearch() {
|
||
page.current = 1
|
||
change(page)
|
||
}
|
||
|
||
const loading = ref(false)
|
||
const selectedKeys = ref()
|
||
const page = reactive({ current: 1, limit: 10, total: 100 })
|
||
const columns = ref([
|
||
{ title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
|
||
{ title: '编号', width: '80px', key: 'id', fixed: 'left' },
|
||
{ title: '所属科室', width: '120px', key: 'department' },
|
||
{ title: '级别名称', width: '120px', key: 'levelName' },
|
||
{ title: '名额', width: '80px', key: 'quota' },
|
||
{ title: '最高评分', width: '100px', key: 'maxScore' },
|
||
{
|
||
title: '操作',
|
||
width: '150px',
|
||
customSlot: 'operator',
|
||
key: 'operator',
|
||
fixed: 'right'
|
||
}
|
||
])
|
||
const change = (page: any) => {
|
||
loading.value = true
|
||
setTimeout(() => {
|
||
dataSource.value = loadDataSource(page.current, page.limit)
|
||
loading.value = false
|
||
}, 1000)
|
||
}
|
||
const sortChange = (key: any, sort: number) => {
|
||
layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
|
||
}
|
||
const dataSource = ref([
|
||
{
|
||
id: '1',
|
||
department: '呼吸内科',
|
||
levelName: 'A级',
|
||
quota: 3,
|
||
maxScore: 95
|
||
},
|
||
{
|
||
id: '2',
|
||
department: '呼吸内科',
|
||
levelName: 'B级',
|
||
quota: 5,
|
||
maxScore: 90
|
||
},
|
||
{
|
||
id: '3',
|
||
department: '心血管内科',
|
||
levelName: 'A级',
|
||
quota: 2,
|
||
maxScore: 95
|
||
},
|
||
{
|
||
id: '4',
|
||
department: '心血管内科',
|
||
levelName: 'B级',
|
||
quota: 4,
|
||
maxScore: 90
|
||
},
|
||
{
|
||
id: '5',
|
||
department: '消化内科',
|
||
levelName: 'A级',
|
||
quota: 3,
|
||
maxScore: 95
|
||
},
|
||
{
|
||
id: '6',
|
||
department: '消化内科',
|
||
levelName: 'B级',
|
||
quota: 5,
|
||
maxScore: 90
|
||
},
|
||
{
|
||
id: '7',
|
||
department: '普通外科',
|
||
levelName: 'A级',
|
||
quota: 2,
|
||
maxScore: 95
|
||
},
|
||
{
|
||
id: '8',
|
||
department: '普通外科',
|
||
levelName: 'B级',
|
||
quota: 4,
|
||
maxScore: 90
|
||
},
|
||
{
|
||
id: '9',
|
||
department: '骨科',
|
||
levelName: 'A级',
|
||
quota: 2,
|
||
maxScore: 95
|
||
},
|
||
{
|
||
id: '10',
|
||
department: '骨科',
|
||
levelName: 'B级',
|
||
quota: 3,
|
||
maxScore: 90
|
||
}
|
||
])
|
||
const changeStatus = (isChecked: boolean, row: any) => {
|
||
dataSource.value.forEach((item) => {
|
||
if (item.id === row.id) {
|
||
layer.msg('Success', { icon: 1 }, () => {
|
||
item.status = isChecked
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const remove = () => {
|
||
layer.msg(selectedKeys.value, { area: '50%' })
|
||
}
|
||
const loadDataSource = (page: number, pageSize: number) => {
|
||
var response = []
|
||
var startIndex = (page - 1) * pageSize + 1
|
||
var endIndex = page * pageSize
|
||
const levels = ['A级', 'B级', 'C级']
|
||
for (var i = startIndex; i <= endIndex; i++) {
|
||
response.push({
|
||
id: `${i}`,
|
||
department: selectedNode.value.title || '呼吸内科',
|
||
levelName: levels[i % 3],
|
||
quota: Math.floor(Math.random() * 5) + 1, // 1-5的随机数
|
||
maxScore: 90 + (i % 3) * 5 // 90, 95, 100循环
|
||
})
|
||
}
|
||
return response
|
||
}
|
||
const model11 = ref({
|
||
department: '',
|
||
levelName: '',
|
||
quota: 0,
|
||
maxScore: 0
|
||
})
|
||
const layFormRef11 = ref()
|
||
const visible11 = ref(false)
|
||
const title = ref('新增')
|
||
const changeVisible11 = (text: any, row: any) => {
|
||
title.value = text
|
||
if (row != null) {
|
||
let info = JSON.parse(JSON.stringify(row))
|
||
model11.value = info
|
||
} else {
|
||
model11.value = {
|
||
department: '',
|
||
levelName: '',
|
||
quota: 0,
|
||
maxScore: 0
|
||
}
|
||
}
|
||
visible11.value = !visible11.value
|
||
}
|
||
const submit11 = function () {
|
||
layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
|
||
layer.open({
|
||
type: 1,
|
||
title: '表单提交结果',
|
||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
|
||
model
|
||
)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||
shade: false,
|
||
isHtmlFragment: true,
|
||
btn: [
|
||
{
|
||
text: '确认',
|
||
callback(index: any) {
|
||
layer.close(index)
|
||
}
|
||
}
|
||
],
|
||
area: '500px'
|
||
})
|
||
})
|
||
}
|
||
// 清除校验
|
||
const clearValidate11 = function () {
|
||
layFormRef11.value.clearValidate()
|
||
}
|
||
// 重置表单
|
||
const reset11 = function () {
|
||
layFormRef11.value.reset()
|
||
}
|
||
function toRemove() {
|
||
if (selectedKeys.value.length == 0) {
|
||
layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
|
||
return
|
||
}
|
||
layer.confirm('您将删除所有选中的数据？', {
|
||
title: '提示',
|
||
btn: [
|
||
{
|
||
text: '确定',
|
||
callback: (id: any) => {
|
||
layer.msg('您已成功删除')
|
||
layer.close(id)
|
||
}
|
||
},
|
||
{
|
||
text: '取消',
|
||
callback: (id: any) => {
|
||
layer.msg('您已取消操作')
|
||
layer.close(id)
|
||
}
|
||
}
|
||
]
|
||
})
|
||
}
|
||
function toSubmit() {
|
||
layer.msg('保存成功！', { icon: 1, time: 1000 })
|
||
visible11.value = false
|
||
visible22.value = false
|
||
}
|
||
function toCancel() {
|
||
visible11.value = false
|
||
visible22.value = false
|
||
}
|
||
function confirm() {
|
||
layer.msg('您已成功删除')
|
||
}
|
||
function cancel() {
|
||
layer.msg('您已取消操作')
|
||
}
|
||
|
||
const model22 = ref({
|
||
organization: '',
|
||
name: '',
|
||
fullName: '',
|
||
code: '',
|
||
type: '',
|
||
sort: 0,
|
||
remark: ''
|
||
})
|
||
const layFormRef22 = ref()
|
||
const visible22 = ref(false)
|
||
const title22 = ref('新建')
|
||
</script>
|
||
|
||
<style scoped>
|
||
.organization-box {
|
||
width: calc(100vw - 240px);
|
||
height: calc(100vh - 110px);
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.left-tree {
|
||
display: inline-block;
|
||
padding: 20px 15px 0 5px;
|
||
height: 1200px;
|
||
border-right: 1px solid #e6e6e6;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
/* todo layui-tree-entry 设置无效 */
|
||
.layui-tree-entry {
|
||
position: relative;
|
||
padding: 10px 0;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.isFold {
|
||
position: absolute;
|
||
top: 36%;
|
||
right: -10px;
|
||
width: 26px;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
border-radius: 13px;
|
||
background-color: #fff;
|
||
border: 1px solid #e6e6e6;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-input {
|
||
display: inline-block;
|
||
width: 98%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.isChecked {
|
||
display: inline-block;
|
||
background-color: #e8f1ff;
|
||
color: red;
|
||
}
|
||
</style>
|