146 lines
3.6 KiB
Vue
146 lines
3.6 KiB
Vue
<template>
|
|
<j-modal
|
|
:title="$t('dashboard.quickEnter.custom')"
|
|
:visible="visible"
|
|
:width="1000"
|
|
switchFullscreen
|
|
@ok="handleOk"
|
|
:confirmLoading="loading"
|
|
@cancel="close"
|
|
:cancelText="$t('close')">
|
|
<a-spin :spinning="loading">
|
|
<a-transfer
|
|
class="transfer"
|
|
:data-source="dataSource"
|
|
:titles="titles"
|
|
:show-search="true"
|
|
:filter-option="filterOption"
|
|
:target-keys="targetKeys"
|
|
:row-key="item => item.id"
|
|
:render="item => item.name"
|
|
:listStyle="listStyle"
|
|
:locale="locale"
|
|
@change="handleChange"
|
|
/>
|
|
</a-spin>
|
|
</j-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { getQuickEntryList, saveQuickEntryModuleList } from '@api/dashboard'
|
|
|
|
export default {
|
|
name: 'MenuManageModal',
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
// 穿梭框两侧样式
|
|
listStyle: {
|
|
textAlign: 'left',
|
|
width: '40%',
|
|
height: '100%'
|
|
},
|
|
visible: false,
|
|
// 可选数据和个人展示模块
|
|
titles: [this.$t('dashboard.quickEnter.optionModules'), this.$t('dashboard.quickEnter.personalDisplayModule')],
|
|
// 可选数据
|
|
dataSource: [],
|
|
// 已选数据id
|
|
targetKeys: [],
|
|
// 多语言
|
|
locale: {
|
|
itemUnit: this.$t('dashboard.quickEnter.itemUnit'),
|
|
itemsUnit: this.$t('dashboard.quickEnter.itemsUnit'),
|
|
notFoundContent: this.$t('dashboard.quickEnter.listEmpty'),
|
|
searchPlaceholder: this.$t('dashboard.quickEnter.pleaseEnterSearchContent')
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 打开弹框
|
|
* @param ids - 已经选择的ids
|
|
*/
|
|
show (ids) {
|
|
this.visible = true
|
|
// 清空之前的数据，然后重新请求
|
|
this.dataSource = []
|
|
this.targetKeys = ids || []
|
|
this.getMenuList()
|
|
},
|
|
// 获取菜单列表
|
|
getMenuList () {
|
|
this.loading = true
|
|
getQuickEntryList().then(res => {
|
|
if (res.success) {
|
|
// 穿梭框需要这个格式否则会报错
|
|
this.dataSource = res.result || []
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
}, 1000)
|
|
})
|
|
},
|
|
// 确定
|
|
handleOk () {
|
|
// 最多选择9个模块
|
|
if (this.targetKeys.length > 9) {
|
|
this.$message.warning(this.$t('dashboard.quickEnter.maxSelectedNine'))
|
|
return
|
|
}
|
|
this.loading = true
|
|
saveQuickEntryModuleList({
|
|
permissionIds: this.targetKeys.join(',')
|
|
}).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.$emit('ok')
|
|
this.close()
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 关闭
|
|
close () {
|
|
this.visible = false
|
|
},
|
|
// 穿梭框改变
|
|
handleChange (targetKeys, direction, moveKeys) {
|
|
console.log(targetKeys, direction, moveKeys)
|
|
this.targetKeys = targetKeys
|
|
},
|
|
// 搜索过滤
|
|
filterOption (inputValue, option) {
|
|
return option.description.indexOf(inputValue) > -1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.transfer {
|
|
height: 50vh;
|
|
text-align: center;
|
|
/deep/ .ant-transfer-operation button {
|
|
margin: 20px 0;
|
|
border-radius: 50%;
|
|
}
|
|
/deep/ .ant-transfer-list-header-selected {
|
|
display: inline-flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
width: 94%;
|
|
|
|
.ant-transfer-list-header-title {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
</style>
|