<template>
|
<div class="page">
|
<div class="page-title">
|
<div>
|
<h2>组织机构</h2>
|
<p>部门树表来源于 SYS_DEPT；DEPT_TYPE 为 cj 的部门即承修单位</p>
|
</div>
|
<el-button icon="el-icon-refresh" @click="load">刷新</el-button>
|
</div>
|
|
<div class="toolbar">
|
<el-input v-model="keyword" placeholder="部门名称 / 部门编码 / 负责人" clearable style="width:280px"></el-input>
|
<el-select v-model="deptType" clearable placeholder="部门类型" style="width:160px">
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
<el-button type="primary" icon="el-icon-search" @click="load">查询</el-button>
|
<div class="spacer"></div>
|
<span class="summary">共 {{ rows.length }} 个部门，其中承修单位 {{ contractorCount }} 个</span>
|
</div>
|
|
<div class="table-panel">
|
<el-table
|
v-loading="loading"
|
:data="filteredTree"
|
row-key="id"
|
border
|
stripe
|
default-expand-all
|
height="calc(100vh - 245px)"
|
:tree-props="{ children: 'children' }"
|
>
|
<el-table-column prop="name" label="部门名称" min-width="260"></el-table-column>
|
<el-table-column prop="deptCode" label="部门编码" width="150"></el-table-column>
|
<el-table-column label="部门类型" width="130" align="center">
|
<template slot-scope="{ row }">
|
<el-tag v-if="row.deptType === 'cj'" size="mini" type="success">承修单位</el-tag>
|
<el-tag v-else size="mini" type="info">{{ row.deptType || '-' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="leader" label="负责人" width="120"></el-table-column>
|
<el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
|
<el-table-column prop="orderNum" label="排序" width="80" align="center"></el-table-column>
|
<el-table-column label="状态" width="90" align="center">
|
<template slot-scope="{ row }">
|
<el-tag size="mini" :type="row.status === '1' ? 'info' : 'success'">{{ row.status === '1' ? '停用' : '正常' }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
export default {
|
name: 'OrganizationManage',
|
data() {
|
return {
|
loading: false,
|
rows: [],
|
keyword: '',
|
deptType: ''
|
}
|
},
|
computed: {
|
typeOptions() {
|
const values = Array.from(new Set(this.rows.map(item => item.deptType).filter(Boolean))).sort()
|
return values.map(value => ({ value, label: value === 'cj' ? '承修单位' : value }))
|
},
|
contractorCount() {
|
return this.rows.filter(item => item.deptType === 'cj').length
|
},
|
tree() {
|
return this.buildTree(this.rows)
|
},
|
filteredTree() {
|
const keyword = this.keyword.trim().toLowerCase()
|
const type = this.deptType
|
const hit = node => {
|
const textOk = !keyword || [node.name, node.deptCode, node.leader]
|
.some(value => String(value || '').toLowerCase().includes(keyword))
|
const typeOk = !type || node.deptType === type
|
return textOk && typeOk
|
}
|
const walk = nodes => nodes.reduce((result, node) => {
|
const children = walk(node.children || [])
|
if (hit(node) || children.length) {
|
result.push({ ...node, children })
|
}
|
return result
|
}, [])
|
return walk(this.tree)
|
}
|
},
|
created() { this.load() },
|
methods: {
|
load() {
|
this.loading = true
|
api.get('/system/depts').then(res => {
|
this.rows = res.data || []
|
}).finally(() => { this.loading = false })
|
},
|
buildTree(rows) {
|
const nodes = rows.map(row => ({ ...row, children: [] }))
|
const map = new Map(nodes.map(node => [String(node.id), node]))
|
const roots = []
|
nodes.forEach(node => {
|
const parentId = node.parentId == null ? null : String(node.parentId)
|
if (parentId && parentId !== String(node.id) && map.has(parentId)) {
|
map.get(parentId).children.push(node)
|
} else {
|
roots.push(node)
|
}
|
})
|
const sortNodes = list => {
|
list.sort((left, right) => (Number(left.orderNum) || 0) - (Number(right.orderNum) || 0)
|
|| String(left.name || '').localeCompare(String(right.name || ''), 'zh'))
|
list.forEach(item => sortNodes(item.children || []))
|
}
|
sortNodes(roots)
|
return roots
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.summary { color: #6d7f91; font-size: 13px; }
|
</style>
|
