hi-ucs/back/src/views/modules/ability/bsabilityai-relate-applicat...

130 lines
3.1 KiB
Vue

<template>
<div>
<el-dialog
:visible.sync="visible"
title="关联应用"
@close="close"
:close-on-click-modal="false"
:close-on-press-escape="false"
:key="showKey"
>
<div class="relate-application-content">
<el-transfer
v-model="transferValue"
filterable
:filter-method="filterMethod"
filter-placeholder="请输入应用名称"
:titles="['未关联应用名称', '已关联应用名称']"
:props="{
key: 'id',
label: 'name'
}"
:data="transferData"
></el-transfer>
</div>
<template slot="footer">
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="confirmSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
components: {
},
data () {
return {
showKey: 0,
visible: true,
transferData: [], //穿梭框所有数据
transferValue: [], //已关联的数据id
}
},
props: {
relateInfo: {
type: Object,
default: {}
}
},
computed: {
},
methods: {
close () {
this.$emit('isShowRelatePopup', false)
},
// 表单提交
confirmSubmitHandle: debounce(
function () {
this.$http.post('/dataResourceRel/saveDataResourceRel', {
linkType: this.relateInfo.linkType || 2,
id: this.relateInfo.id,
referenceIds: this.transferValue
}).then(({ data: res }) => {
if(res.code == 0) {
this.$message.success('关联成功!')
} else {
this.$message.error('关联失败,请联系管理员!')
}
this.$emit('isShowRelatePopup', false);
}).catch(() => { })
},
1000,
{ leading: true, trailing: false }
),
filterMethod(query, item) {
return item.name && item.name.indexOf(query) > -1;
}
},
mounted () {
if(this.relateInfo && this.relateInfo.responseData) {
const alreadLinkedArr = this.relateInfo.responseData.alreadLinked || [];
this.transferData = alreadLinkedArr.concat(this.relateInfo.responseData.notLinked || []);
alreadLinkedArr.length && alreadLinkedArr.forEach(item => {
this.transferValue.push(item.id);
});
}
}
}
</script>
<style lang="scss" scoped>
.icon-input ::v-deep .el-input__inner {
cursor: pointer;
}
::v-deep .el-dialog__body {
height: 580px;
overflow: auto;
}
::v-deep .el-checkbox-button__inner {
width: 130px;
margin: 0 10px 5px;
border-left: unset !important;
border-radius: unset !important;
border: 1px solid #dcdfe6 !important;
}
.relate-application-content {
height: 100%;
::v-deep .el-transfer {
height: 100%;
}
::v-deep .el-transfer-panel {
width: 39.5%;
height: 100%;
}
::v-deep .el-transfer-panel__body {
height: 100%;
}
::v-deep .el-transfer-panel__list.is-filterable {
height: calc(100% - 102px);
}
}
</style>