<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="responsibleXNo" label="负责rk_T" width="110" align="center">
|
<template slot-scope="{ row }">
|
<el-tag v-if="row.responsibleXNo" size="mini" type="success">{{ row.responsibleXNo }}</el-tag>
|
<span v-else class="muted">未设置</span>
|
</template>
|
</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-column label="操作" width="120" align="center" fixed="right">
|
<template slot-scope="{ row }">
|
<el-button type="text" icon="el-icon-setting" v-permission="'system:organization:ext'" @click="openExt(row)">扩展属性</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<el-dialog :title="'扩展属性设置 - ' + (currentDept.name || '')" :visible.sync="extVisible" width="520px" append-to-body :close-on-click-modal="false">
|
<el-form label-width="105px" v-loading="extLoading">
|
<el-form-item label="负责rk_T">
|
<el-select v-model="extForm.responsibleXNo" clearable filterable placeholder="请选择rk_X号" style="width:100%">
|
<el-option v-for="item in xNumbers" :key="item" :label="item" :value="item"></el-option>
|
</el-select>
|
<div class="field-tip">该值新增故障时作为rk_X号默认值，以部门设置为准。</div>
|
</el-form-item>
|
</el-form>
|
<template slot="footer">
|
<el-button @click="extVisible = false">取消</el-button>
|
<el-button type="primary" :loading="extSaving" @click="saveExt">保存</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
export default {
|
name: 'OrganizationManage',
|
data() {
|
return {
|
loading: false,
|
rows: [],
|
keyword: '',
|
deptType: '',
|
extVisible: false,
|
extLoading: false,
|
extSaving: false,
|
currentDept: {},
|
extForm: { responsibleXNo: '' },
|
xNumbers: []
|
}
|
},
|
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(); this.loadXNumbers() },
|
methods: {
|
load() {
|
this.loading = true
|
api.get('/system/depts').then(res => {
|
this.rows = res.data || []
|
}).finally(() => { this.loading = false })
|
},
|
loadXNumbers() {
|
api.get('/system/tree/product/x-numbers').then(res => { this.xNumbers = res.data || [] })
|
},
|
openExt(row) {
|
this.currentDept = { ...row }
|
this.extForm = { responsibleXNo: row.responsibleXNo || '' }
|
this.extVisible = true
|
this.extLoading = true
|
api.get('/system/depts/' + row.id + '/ext').then(res => {
|
const data = res.data || {}
|
this.extForm = { responsibleXNo: data.responsibleXNo || '' }
|
}).finally(() => { this.extLoading = false })
|
},
|
saveExt() {
|
if (!this.currentDept.id) return
|
this.extSaving = true
|
api.put('/system/depts/' + this.currentDept.id + '/ext', this.extForm).then(() => {
|
this.$message.success('扩展属性设置成功')
|
this.extVisible = false
|
this.load()
|
}).finally(() => { this.extSaving = 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; }
|
.muted { color: #a3afbc; font-size: 12px; }
|
.field-tip { margin-top: 4px; color: #7b8a99; font-size: 12px; line-height: 18px; }
|
</style>
|
