|
|
@ -1,49 +1,65 @@ |
|
|
|
<template> |
|
|
|
<div class="ren-region"> |
|
|
|
<el-input v-model="showName" :placeholder="placeholder" @focus="treeDialog"> |
|
|
|
<el-button slot="append" icon="el-icon-search" @click="treeDialog"></el-button> |
|
|
|
</el-input> |
|
|
|
<el-input :value="value" style="display: none"></el-input> |
|
|
|
<el-dialog :visible.sync="visibleTree" width="360px" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false"> |
|
|
|
<el-form size="mini" :inline="true"> |
|
|
|
<el-form-item :label="$t('keyword')"> |
|
|
|
<el-input v-model="filterText"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="default">{{ $t('query') }}</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-tree |
|
|
|
class="filter-tree" |
|
|
|
:data="dataList" |
|
|
|
:default-expanded-keys="expandedKeys" |
|
|
|
:props="{ label: 'name', children: 'children' }" |
|
|
|
:expand-on-click-node="false" |
|
|
|
:filter-node-method="filterNode" |
|
|
|
:highlight-current="true" |
|
|
|
node-key="id" |
|
|
|
ref="tree"> |
|
|
|
</el-tree> |
|
|
|
<template slot="footer"> |
|
|
|
<el-button type="default" @click="cancelHandle()" size="mini">{{ $t('cancel') }}</el-button> |
|
|
|
<el-button type="info" @click="clearHandle()" size="mini">{{ $t('clear') }}</el-button> |
|
|
|
<el-button type="primary" @click="commitHandle()" size="mini">{{ $t('confirm') }}</el-button> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
<el-input v-model="showName" |
|
|
|
:placeholder="placeholder" |
|
|
|
@focus="treeDialog"> |
|
|
|
<el-button slot="append" |
|
|
|
icon="el-icon-search" |
|
|
|
@click="treeDialog"></el-button> |
|
|
|
</el-input> |
|
|
|
<el-input :value="value" |
|
|
|
style="display: none"></el-input> |
|
|
|
<el-dialog :visible.sync="visibleTree" |
|
|
|
width="360px" |
|
|
|
:modal="false" |
|
|
|
:title="placeholder" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:close-on-press-escape="false"> |
|
|
|
<el-form size="mini" |
|
|
|
:inline="true"> |
|
|
|
<el-form-item :label="$t('keyword')"> |
|
|
|
<el-input v-model="filterText"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="default">{{ $t('query') }}</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-tree class="filter-tree" |
|
|
|
:data="dataList" |
|
|
|
:default-expanded-keys="expandedKeys" |
|
|
|
:props="{ label: 'name', children: 'children' }" |
|
|
|
:expand-on-click-node="false" |
|
|
|
:filter-node-method="filterNode" |
|
|
|
:highlight-current="true" |
|
|
|
node-key="id" |
|
|
|
ref="tree"> |
|
|
|
</el-tree> |
|
|
|
<template slot="footer"> |
|
|
|
<el-button type="default" |
|
|
|
@click="cancelHandle()" |
|
|
|
size="mini">{{ $t('cancel') }}</el-button> |
|
|
|
<el-button type="info" |
|
|
|
@click="clearHandle()" |
|
|
|
size="mini">{{ $t('clear') }}</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
@click="commitHandle()" |
|
|
|
size="mini">{{ $t('confirm') }}</el-button> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style lang="scss"> |
|
|
|
.ren-region { |
|
|
|
.filter-tree { |
|
|
|
max-height: 230px; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.el-dialog__body { |
|
|
|
padding: 0px 0px 0px 20px; |
|
|
|
} |
|
|
|
.el-dialog__footer { |
|
|
|
padding: 10px 20px 8px 20px; |
|
|
|
} |
|
|
|
.filter-tree { |
|
|
|
max-height: 230px; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.el-dialog__body { |
|
|
|
padding: 0px 0px 0px 20px; |
|
|
|
} |
|
|
|
.el-dialog__footer { |
|
|
|
padding: 10px 20px 8px 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
<script> |
|
|
@ -99,7 +115,7 @@ export default { |
|
|
|
this.$refs.tree.setCurrentKey(id) |
|
|
|
this.expandedKeys = [id] |
|
|
|
}) |
|
|
|
}).catch(() => {}) |
|
|
|
}).catch(() => { }) |
|
|
|
}, |
|
|
|
cancelHandle () { |
|
|
|
this.visibleTree = false |
|
|
|