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>
|