修复后台-权限管理-用户管理:搜索bug

This commit is contained in:
guoyue 2022-10-22 14:29:43 +08:00
parent b226e777f7
commit 49b41ce8e6
1 changed files with 40 additions and 41 deletions

View File

@ -1,42 +1,36 @@
<template>
<div>
<el-input v-model="showDeptName" :placeholder="placeholder" @focus="deptDialog">
<el-button slot="append" icon="el-icon-search" @click="deptDialog"></el-button>
</el-input>
<el-input :value="value" style="display: none"></el-input>
<el-dialog :visible.sync="visibleDept" width="30%" :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-button type="default">{{ $t('query') }}</el-button>
</el-form-item>
</el-form>
<el-tree
class="filter-tree"
:data="deptList"
: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 v-if="query" 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="showDeptName" :placeholder="placeholder" @focus="deptDialog">
<el-button slot="append" icon="el-icon-search" @click="deptDialog"></el-button>
</el-input>
<el-input :value="value" style="display: none"></el-input>
<el-dialog :visible.sync="visibleDept" width="30%" :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-button type="default">{{ $t('query') }}</el-button>
</el-form-item>
</el-form>
<el-tree class="filter-tree" :data="deptList" :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 v-if="query" 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>
<script>
export default {
name: 'RenDeptTree',
data () {
data() {
return {
filterText: '',
visibleDept: false,
@ -56,15 +50,20 @@ export default {
placeholder: String
},
watch: {
filterText (val) {
filterText(val) {
this.$refs.tree.filter(val)
},
deptName (val) {
deptName(val) {
this.showDeptName = val
},
visibleDept(val) {
if (!val) {
this.filterText = ''
}
}
},
methods: {
deptDialog () {
deptDialog() {
this.expandedKeys = null
if (this.$refs.tree) {
this.$refs.tree.setCurrentKey(null)
@ -72,11 +71,11 @@ export default {
this.visibleDept = true
this.getDeptList(this.value)
},
filterNode (value, data) {
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
getDeptList (id) {
getDeptList(id) {
return this.$http.get('/sys/dept/list').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
@ -86,14 +85,14 @@ export default {
this.$refs.tree.setCurrentKey(id)
this.expandedKeys = [id]
})
}).catch(() => {})
}).catch(() => { })
},
cancelHandle () {
cancelHandle() {
this.visibleDept = false
this.deptList = []
this.filterText = ''
},
clearHandle () {
clearHandle() {
this.$emit('input', '')
this.$emit('update:deptName', '')
this.showDeptName = ''
@ -101,7 +100,7 @@ export default {
this.deptList = []
this.filterText = ''
},
commitHandle () {
commitHandle() {
const node = this.$refs.tree.getCurrentNode()
if (!node) {
this.$message.error(this.$t('dept.chooseerror'))