<template>
|
<a-card
|
:loading='cardLoading'
|
:bordered='false'
|
title='停机原因分类'
|
style='height: 100%;'
|
>
|
<a-spin :spinning='loading'>
|
<a-alert
|
type='info'
|
:showIcon='true'
|
style='margin-right: 54px;'
|
>
|
<div slot='message'>
|
当前：<span v-if='this.currSelected.title'>{{ getCurrSelectedTitle() }}</span>
|
<a
|
v-if='this.currSelected.title'
|
style='margin-left: 10px'
|
@click='onClearSelected'
|
>取消</a>
|
</div>
|
</a-alert>
|
<div class='drawer-bootom-button'>
|
<a-dropdown
|
:trigger="['click']"
|
placement='bottomCenter'
|
>
|
<a-menu slot='overlay'>
|
<a-menu-item
|
key='1'
|
@click='expandAll'
|
>展开所有
|
</a-menu-item>
|
<a-menu-item
|
key='2'
|
@click='closeAll'
|
>合并所有
|
</a-menu-item>
|
<a-menu-item
|
key='3'
|
@click='refreshTree'
|
>刷新
|
</a-menu-item>
|
</a-menu>
|
<a-button>
|
<a-icon type='bars' />
|
</a-button>
|
</a-dropdown>
|
</div>
|
<a-input-search
|
@search='handleSearch'
|
style='width:100%;margin-top: 10px'
|
placeholder='检索 停机原因分类编号/名称'
|
allowClear
|
v-model='searchInput'
|
@change='handleChange'
|
/>
|
<!-- showLine -->
|
<a-tree
|
showLine
|
ref='tree'
|
:checkStrictly='checkStrictly'
|
:expandedKeys.sync='expandedKeys'
|
:selectedKeys='selectedKeys'
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
:treeData='treeDataSource'
|
:autoExpandParent='autoExpandParent'
|
@select='onSelect'
|
@expand='onExpand'
|
slots='{}'
|
>
|
<template
|
slot='title'
|
slot-scope='{ title, parentId, entity, key}'
|
>
|
<span v-if='title.indexOf(searchValue) > -1'>
|
{{ title.substr(0, title.indexOf(searchValue)) }}
|
<span class='replaceSearch'>{{ searchValue }}</span>
|
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
|
</span>
|
<span v-else>{{ title }}</span>
|
<a-dropdown
|
v-if='entity'
|
:trigger="['click']"
|
placement='bottomCenter'
|
>
|
<a-menu slot='overlay'>
|
<a-menu-item v-if='key!=-1'>
|
<a
|
href='javascript:;'
|
@click='handleEdit(entity)'
|
>编辑</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a
|
href='javascript:;'
|
@click='handleAdd(entity)'
|
>
|
添加
|
<span v-if='key!=-1'>
|
子
|
</span>
|
类别
|
</a>
|
</a-menu-item>
|
<a-menu-item v-if='key!=-1'>
|
<a-popconfirm
|
title='确定删除吗?'
|
@confirm='() => handleDelete(entity.id)'
|
>
|
<a>删除</a>
|
</a-popconfirm>
|
</a-menu-item>
|
<!-- <a-menu-item v-if="entity.status==1 && key!=-1">
|
<a-popconfirm
|
title="确定禁用吗?"
|
@confirm="() => handleActive(entity.id)"
|
>
|
<a>禁用</a>
|
</a-popconfirm>
|
</a-menu-item>
|
|
<a-menu-item v-if="entity.status==0">
|
<a-popconfirm
|
title="确定启用吗?"
|
@confirm="() => handleActive(entity.id)"
|
>
|
<a>启用</a>
|
</a-popconfirm>
|
</a-menu-item> -->
|
</a-menu>
|
<span :style="{position: 'absolute',right: 0}">
|
<a-icon type='down' />
|
</span>
|
</a-dropdown>
|
</template>
|
</a-tree>
|
</a-spin>
|
<shut-down-cause-category-model
|
ref='modalForm'
|
@ok='modalFormOk'
|
:nodeSelected='currSelected'
|
></shut-down-cause-category-model>
|
</a-card>
|
</template>
|
|
<script>
|
import { getAction, postAction, deleteAction, requestPut } from '@/api/manage'
|
import ShutDownCauseCategoryModel from './ShutDownCauseCategoryModel'
|
import Tooltip from 'ant-design-vue/es/tooltip'
|
|
export default {
|
name: 'ShutdownCauseCategoryLeft',
|
props: ['value'],
|
components: {
|
ShutDownCauseCategoryModel,
|
Tooltip
|
},
|
data() {
|
return {
|
searchInput: '',
|
cardLoading: false,
|
loading: false,
|
treeDataSource: [],
|
selectedKeys: [],
|
expandedKeys: [],
|
url: {
|
loadShutdownCauseCategoryTree: '/eam/shutdownCauseCategory/loadTree',
|
delete: '/eam/shutdownCauseCategory/delete',
|
list: '/eam/shutdownCauseCategory/list'
|
},
|
searchValue: '',
|
dataList: [],
|
autoExpandParent: true,
|
checkStrictly: true,
|
allTreeKeys: [],
|
currSelected: {},
|
hiding: false
|
}
|
},
|
created() {
|
this.queryTreeData()
|
this.closeAll()
|
},
|
methods: {
|
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title
|
},
|
|
onClearSelected() {
|
this.hiding = true
|
this.currSelected = {}
|
this.selectedKeys = []
|
},
|
|
onSelect(selectedKeys, e) {
|
this.hiding = false
|
let record = e.node.dataRef
|
this.currSelected = Object.assign({}, record)
|
this.selectedKeys = [record.key]
|
this.$emit('clickTreeNode', this.currSelected)
|
},
|
|
onExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
queryTreeData() {
|
this.loading = true
|
this.cardLoading = true
|
getAction(this.url.loadShutdownCauseCategoryTree).then((res) => {
|
if (res.success) {
|
this.dataList = []
|
this.allTreeKeys = []
|
this.currSelected = {}
|
this.treeDataSource = res.result
|
this.generateList(res.result)
|
} else {
|
this.$message.warn(res.message)
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
},
|
|
handleChange() {
|
let search = this.searchInput
|
let expandedKeys = this.dataList
|
.map(item => {
|
if (item.title.indexOf(search) > -1) {
|
return this.getParentKey(item.key, this.treeDataSource)
|
}
|
return null
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i)
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: search,
|
autoExpandParent: true
|
})
|
},
|
|
handleSearch(value) {
|
let search = value
|
let expandedKeys = this.dataList
|
.map(item => {
|
if (item.title.indexOf(search) > -1) {
|
return this.getParentKey(item.key, this.treeDataSource)
|
}
|
return null
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i)
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: search,
|
autoExpandParent: true
|
})
|
},
|
|
getParentKey(key, tree) {
|
let parentKey
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i]
|
if (node.children) {
|
if (node.children.some(item => item.key === key)) {
|
parentKey = node.key
|
} else if (
|
this.getParentKey(key, node.children)) {
|
parentKey = this.getParentKey(key, node.children)
|
}
|
}
|
}
|
return parentKey
|
},
|
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
const key = node.key
|
const title = node.title
|
this.dataList.push({ key, title: title })
|
this.allTreeKeys.push(key)
|
if (node.children) {
|
this.generateList(node.children)
|
}
|
}
|
},
|
|
expandAll() {
|
this.expandedKeys = this.allTreeKeys
|
},
|
|
closeAll() {
|
this.expandedKeys = ['-1']
|
},
|
|
refreshTree() {
|
this.queryTreeData()
|
},
|
|
handleAdd(entity) {
|
if (entity.id) {
|
this.$refs.modalForm.add(entity.id)
|
} else {
|
this.$refs.modalForm.add('-1')
|
}
|
this.$refs.modalForm.title = '新增停机原因分类'
|
this.$refs.modalForm.disableSubmit = false
|
},
|
|
handleEdit(entity) {
|
this.$refs.modalForm.edit(entity)
|
this.$refs.modalForm.title = '编辑停机原因分类'
|
this.$refs.modalForm.disableSubmit = false
|
},
|
handleDelete(id) {
|
let that = this
|
getAction(that.url.list, { parentId: id }).then((res) => {
|
if (res.success) {
|
|
if (res.result.records.length == 0) {
|
deleteAction(that.url.delete, { id: id }).then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.currSelected.title = ''
|
that.queryTreeData()
|
} else {
|
that.$message.warning('当前停机原因分类被' + res.message + '条停机原因引用，无法执行删除操作！')
|
}
|
})
|
} else {
|
that.$message.warning('当前停机原因分类有' + res.result.records.length + '条子类别信息，无法执行删除操作！')
|
}
|
} else {
|
that.$message.warning('系统错误！')
|
}
|
})
|
},
|
|
handleActive(id) {
|
if (!this.url.active) {
|
this.$message.error('请设置url.active属性!')
|
return
|
}
|
let that = this
|
requestPut(that.url.active, {}, { id: id }).then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.queryTreeData()
|
} else {
|
that.$message.warning(res.message)
|
}
|
})
|
},
|
|
modalFormOk(val) {
|
// 新增/修改 成功时，重载列表
|
this.queryTreeData()
|
}
|
|
},
|
//监听
|
watch: {
|
// currSelected(val) {//监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
|
// this.$bus.$emit('getCurrSelected', val)
|
// },
|
},
|
mounted() {
|
}
|
}
|
</script>
|
|
<style>
|
.replaceSearch {
|
color: #00090f;
|
font-weight: bold;
|
background-color: rgb(204, 204, 204);
|
}
|
|
/* .ant-select-disabled {
|
color: rgba(241, 16, 16, 0.25);
|
}
|
.ant-select-disabled .ant-select-selection {
|
background: #a76b6b;
|
} */
|
/*隐藏树的默认icon*/
|
.ant-tree-switcher-noop {
|
display: none !important;
|
}
|
|
/*隐藏树的默认竖线*/
|
.ant-tree.ant-tree-show-line li:not(:last-child):before {
|
border-left: 0px;
|
}
|
|
.ant-card-body .table-operator {
|
margin: 15px;
|
}
|
|
.anty-form-btn {
|
width: 100%;
|
text-align: center;
|
}
|
|
.anty-form-btn button {
|
margin: 0 5px;
|
}
|
|
.anty-node-layout .ant-layout-header {
|
padding-right: 0;
|
}
|
|
.header {
|
padding: 0 8px;
|
}
|
|
.header button {
|
margin: 0 3px;
|
}
|
|
.ant-modal-cust-warp {
|
height: 100%;
|
}
|
|
.ant-modal-cust-warp .ant-modal-body {
|
height: calc(100% - 110px) !important;
|
overflow-y: auto;
|
}
|
|
.ant-modal-cust-warp .ant-modal-content {
|
height: 90% !important;
|
overflow-y: hidden;
|
}
|
|
/** Button按钮间距 */
|
.ant-btn {
|
margin-left: 3px;
|
}
|
|
.ant-alert {
|
padding: 5px 15px 5px 37px;
|
}
|
|
.drawer-bootom-button {
|
position: absolute;
|
top: 1px;
|
/* padding: 10px 16px; */
|
text-align: left;
|
right: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
</style>
|
