130 lines
3.1 KiB
Vue
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>
|