Commit d8e6cfad by 郑艺斌

fix: 修复字典管理弹出滚动问题

parent 6e374532
<template> <template>
<div style="padding:10px"> <div style="padding:10px; height: calc(100% - 80px);">
<vxe-toolbar :refresh="{query: refreshList}" custom> <vxe-toolbar :refresh="{query: refreshList}" custom>
<template #buttons> <template #buttons>
<el-button type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button> <el-button type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
<el-button v-if="hasPermission('sys:dict:del')" type="danger" size="small" icon="el-icon-delete" @click="del()" :disabled="$refs.dictValueTable && $refs.dictValueTable.getCheckboxRecords().length === 0" plain>删除</el-button> <el-button v-if="hasPermission('sys:dict:del')" type="danger" size="small" icon="el-icon-delete" @click="del()"
</template> :disabled="$refs.dictValueTable && $refs.dictValueTable.getCheckboxRecords().length === 0" plain>删除
</vxe-toolbar> </el-button>
<vxe-table </template>
border="inner" </vxe-toolbar>
auto-resize <vxe-table border="inner" auto-resize resizable height="auto" :scroll-y="{ enabled: false }" :loading="loading"
resizable size="small" ref="dictValueTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
height="auto" :print-config="{}" :import-config="{}" :export-config="{}" :sort-config="{remote:true}" :data="dataList"
:loading="loading" :checkbox-config="{}">
size="small" <vxe-column type="seq" width="40"></vxe-column>
ref="dictValueTable" <vxe-column type="checkbox" width="40px"></vxe-column>
show-header-overflow <vxe-column field="label" title="标签">
show-overflow <template slot-scope="scope">
highlight-hover-row <el-link type="primary" :underline="false" v-if="hasPermission('sys:dict:edit')" @click="edit(scope.row.id)">
:menu-config="{}" {{scope.row.label}}</el-link>
:print-config="{}" <span v-else>{{scope.row.label}}</span>
:import-config="{}" </template>
:export-config="{}" </vxe-column>
:sort-config="{remote:true}" <vxe-column title="键值" field="value"></vxe-column>
:data="dataList" <vxe-column title="排序" field="sort"></vxe-column>
:checkbox-config="{}"> <vxe-column title="操作" width="250px" fixed="right" align="center">
<vxe-column type="seq" width="40"></vxe-column> <template slot-scope="scope">
<vxe-column type="checkbox" width="40px"></vxe-column> <el-button v-if="hasPermission('sys:dict:edit')" type="text" size="small" @click="edit(scope.row.id)">
<vxe-column 修改
field="label" </el-button>
title="标签"> <el-divider direction="vertical"></el-divider>
<template slot-scope="scope"> <el-button v-if="hasPermission('sys:dict:del')" type="text" size="small" @click="del(scope.row.id)">
<el-link type="primary" :underline="false" v-if="hasPermission('sys:dict:edit')" @click="edit(scope.row.id)">{{scope.row.label}}</el-link> 删除
<span v-else>{{scope.row.label}}</span> </el-button>
</template> </template>
</vxe-column > </vxe-column>
<vxe-column title="键值" field="value"></vxe-column> </vxe-table>
<vxe-column title="排序" field="sort"></vxe-column>
<vxe-column title="操作" width="250px" fixed="right" align="center">
<template slot-scope="scope">
<el-button v-if="hasPermission('sys:dict:edit')" type="text" size="small" @click="edit(scope.row.id)">
修改
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button v-if="hasPermission('sys:dict:del')" type="text" size="small" @click="del(scope.row.id)">
删除
</el-button>
</template>
</vxe-column>
</vxe-table>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<dict-value-form ref="dictValueForm" @refreshDataList="refreshList"></dict-value-form> <dict-value-form ref="dictValueForm" @refreshDataList="refreshList"></dict-value-form>
</div> </div>
</template> </template>
<script> <script>
import DictValueForm from './DictValueForm' import DictValueForm from './DictValueForm'
import DictService from '@/api/sys/DictService' import DictService from '@/api/sys/DictService'
export default { export default {
data () { data () {
return { return {
dataList: [], dataList: [],
dictTypeId: '', dictTypeId: '',
loading: false loading: false
}
},
props: ['dictTypeTitle'],
components: {
DictValueForm
},
dictService: null,
created () {
this.dictService = new DictService()
},
methods: {
// 获取数据列表
refreshList (dictTypeId) {
this.loading = true
if (dictTypeId) {
this.dictTypeId = dictTypeId
} }
this.dictService.getDictValue(this.dictTypeId).then(({ data }) => {
this.dataList = data
this.loading = false
})
}, },
props: ['dictTypeTitle'], // 新增
components: { add () {
DictValueForm this.dictVisible = true
this.$nextTick(() => {
this.$refs.dictValueForm.init('add', { dictValueId: '', dictTypeId: this.dictTypeId })
})
}, },
dictService: null, // 修改
created () { edit (id) {
this.dictService = new DictService() this.dictVisible = true
this.$nextTick(() => {
this.$refs.dictValueForm.init('edit', { dictValueId: id, dictTypeId: this.dictTypeId })
})
}, },
methods: { // 删除
// 获取数据列表 del (id) {
refreshList (dictTypeId) { let ids = id || this.$refs.dictValueTable.getCheckboxRecords().map(item => {
this.loading = true return item.id
if (dictTypeId) { }).join(',')
this.dictTypeId = dictTypeId this.$confirm(`确定删除所选项吗?`, '提示', {
} confirmButtonText: '确定',
this.dictService.getDictValue(this.dictTypeId).then(({data}) => { cancelButtonText: '取消',
this.dataList = data type: 'warning'
this.loading = false }).then(() => {
}) this.dictService.deleteDictValue(ids).then(({ data }) => {
}, this.$message.success(data)
// 新增 this.refreshList()
add () { this.$dictUtils.refreshDictList()
this.dictVisible = true
this.$nextTick(() => {
this.$refs.dictValueForm.init('add', {dictValueId: '', dictTypeId: this.dictTypeId})
})
},
// 修改
edit (id) {
this.dictVisible = true
this.$nextTick(() => {
this.$refs.dictValueForm.init('edit', {dictValueId: id, dictTypeId: this.dictTypeId})
}) })
}, })
// 删除 },
del (id) { closeRight () {
let ids = id || this.$refs.dictValueTable.getCheckboxRecords().map(item => { this.$emit('closeRight')
return item.id
}).join(',')
this.$confirm(`确定删除所选项吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.dictService.deleteDictValue(ids).then(({data}) => {
this.$message.success(data)
this.refreshList()
this.$dictUtils.refreshDictList()
})
})
},
closeRight () {
this.$emit('closeRight')
}
} }
} }
}
</script> </script>
...@@ -91,7 +91,9 @@ export default { ...@@ -91,7 +91,9 @@ export default {
captchaImg: '', captchaImg: '',
inputForm: { inputForm: {
username: 'admin', username: 'admin',
// username: '',
password: 'admin', password: 'admin',
// password: '',
uuid: '', uuid: '',
code: '' code: ''
}, },
......
...@@ -150,6 +150,9 @@ export default { ...@@ -150,6 +150,9 @@ export default {
}, },
// 表格新增 // 表格新增
tableDataADD () { tableDataADD () {
if (!this.formData.childDtoList) {
this.$set(this.formData, 'childDtoList', [])
}
this.formData.childDtoList.push({}) this.formData.childDtoList.push({})
}, },
// 表格删除 // 表格删除
...@@ -186,4 +189,5 @@ export default { ...@@ -186,4 +189,5 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment