193 lines
3.8 KiB
Vue
193 lines
3.8 KiB
Vue
<template>
|
|
<FilterComponent :filter-items="items" :filter-model="model" theme="light" @handle="handle" />
|
|
<TableComponent style="height: calc(100% - 60px);" v-loading="loading" :data="listData" :columns="columns" :config="config" :operate="operate" theme="light"
|
|
size="large" @handle="handle" />
|
|
<DialogComponent v-if="detail.visible" :title="detail.title[detail.type]" :modal="true" width="500"
|
|
@close="closeDetail">
|
|
<DetailComponent :data="detail.data" :type="detail.type" :tree="treeOptions" @close="closeDetail" />
|
|
</DialogComponent>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { getDept, delDept, listDeptExcludeChild } from '@/api/system'
|
|
import { handleTree } from '@/utils/common'
|
|
import FilterComponent from '@/components/Filter/index2.vue'
|
|
import TableComponent from '@/components/Table/index.vue'
|
|
import DialogComponent from '@/components/Dialog/index.vue'
|
|
import DetailComponent from './detail.vue'
|
|
|
|
const items = [
|
|
{
|
|
label: '部门名称',
|
|
prop: 'deptName',
|
|
type: 'input'
|
|
},
|
|
{
|
|
name: '查询',
|
|
prop: 'query',
|
|
theme: 'primary',
|
|
type: 'button',
|
|
permission: [ 'system:dept:query' ]
|
|
},
|
|
{
|
|
name: '新增',
|
|
prop: 'add',
|
|
theme: 'success',
|
|
type: 'button',
|
|
permission: [ 'system:dept:add' ]
|
|
}
|
|
]
|
|
|
|
let model = {
|
|
deptName: ''
|
|
}
|
|
|
|
const loading = ref(false)
|
|
const listData = ref([])
|
|
const treeOptions = ref([])
|
|
|
|
const columns = [
|
|
{
|
|
label: '部门名称',
|
|
prop: 'deptName'
|
|
},
|
|
{
|
|
label: '负责人',
|
|
prop: 'leader'
|
|
},
|
|
{
|
|
label: '联系电话',
|
|
prop: 'phone'
|
|
},
|
|
{
|
|
label: '邮箱',
|
|
prop: 'email'
|
|
},
|
|
{
|
|
label: '排序',
|
|
prop: 'orderNum'
|
|
}
|
|
]
|
|
|
|
const config = {
|
|
width: 120,
|
|
rowKey: 'deptId'
|
|
}
|
|
|
|
const operate = [
|
|
{
|
|
label: '编辑',
|
|
prop: 'edit',
|
|
theme: 'primary',
|
|
permission: [ 'system:dept:edit' ]
|
|
},
|
|
{
|
|
label: '删除',
|
|
prop: 'delete',
|
|
theme: 'danger',
|
|
permission: [ 'system:dept:remove' ]
|
|
}
|
|
]
|
|
|
|
const detail = reactive({
|
|
visible: false,
|
|
title: {
|
|
add: '部门新增',
|
|
check: '部门查看',
|
|
edit: '部门编辑'
|
|
},
|
|
type: 'add',
|
|
data: {}
|
|
})
|
|
|
|
/**
|
|
* 获取数据
|
|
*/
|
|
const initData = () => {
|
|
loading.value = true
|
|
getDept(model).then(res => {
|
|
if(res.code === 200) {
|
|
listData.value = handleTree(res.data, 'deptId')
|
|
}else{
|
|
ElMessage.error(res.msg || '查询失败！')
|
|
}
|
|
}).finally(() => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 删除部门
|
|
* @param id 部门ID
|
|
*/
|
|
const deleteData = (id) => {
|
|
delDept(id).then(() => {
|
|
ElMessage.success('删除成功！')
|
|
initData()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 按钮操作
|
|
* @param type 操作类型
|
|
* @param data 数据
|
|
*/
|
|
const handle = (type, data) => {
|
|
|
|
switch (type) {
|
|
case 'query':
|
|
model = { ...data }
|
|
initData()
|
|
break
|
|
case 'add':
|
|
treeOptions.value = listData.value
|
|
detail.visible = true
|
|
detail.type = 'add'
|
|
detail.data = {}
|
|
break
|
|
case 'check':
|
|
case 'edit':
|
|
listDeptExcludeChild(data.deptId).then(res => {
|
|
treeOptions.value = handleTree(res.data, 'deptId')
|
|
})
|
|
detail.type = type
|
|
detail.data = { ...data }
|
|
detail.visible = true
|
|
break
|
|
case 'delete': {
|
|
ElMessageBox.confirm(
|
|
'是否删除该条数据?',
|
|
'提示',
|
|
{
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}
|
|
).then(() => {
|
|
deleteData(data.deptId)
|
|
})
|
|
break
|
|
}
|
|
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 关闭详情弹窗
|
|
* @param refresh 是否刷新数据
|
|
*/
|
|
const closeDetail = (refresh) => {
|
|
detail.visible = false
|
|
if (refresh) {
|
|
initData()
|
|
}
|
|
}
|
|
|
|
initData()
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|