'增加关联应用弹窗'
This commit is contained in:
parent
f082474aba
commit
51d8da99ef
|
|
@ -0,0 +1,129 @@
|
|||
<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.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>
|
||||
|
|
@ -99,6 +99,7 @@
|
|||
<el-button type="text" size="small" @click="showDocument(scope.row)"
|
||||
>开发文档</el-button
|
||||
>
|
||||
<el-button type="text" size="small" @click="showRelateApplication(scope.row)">关联应用</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -119,6 +120,7 @@
|
|||
ref="addOrUpdate"
|
||||
@refreshDataList="getDataList"
|
||||
></add-or-update>
|
||||
<relate-application v-if="relateApplicationVisible" ref="relateApplication" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
|
@ -128,6 +130,7 @@ import mixinViewModule from "@/mixins/view-module";
|
|||
import AddOrUpdate from "./bsabilityai-add-or-update";
|
||||
import dictionaries from "@/utils/dictionaries";
|
||||
import qs from "qs";
|
||||
import RelateApplication from "./bsabilityai-relate-application.vue"
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data() {
|
||||
|
|
@ -151,11 +154,19 @@ export default {
|
|||
type: "组件服务",
|
||||
},
|
||||
qp: false,
|
||||
// 关联应用弹窗
|
||||
relateApplicationVisible: false,
|
||||
relateInfo: {
|
||||
id: '',
|
||||
responseData: {},
|
||||
linkType: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
RelateApplication
|
||||
},
|
||||
created() {
|
||||
this.dataForm.name = "";
|
||||
|
|
@ -312,6 +323,23 @@ export default {
|
|||
this.qp = true;
|
||||
}
|
||||
},
|
||||
// 点击关联应用按钮
|
||||
showRelateApplication(row){
|
||||
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
|
||||
if( res && res.data ) {
|
||||
this.relateApplicationVisible = true;
|
||||
this.relateInfo = {
|
||||
id: row.id,
|
||||
responseData: res.data,
|
||||
linkType: '2'
|
||||
};
|
||||
}
|
||||
}).catch(() => { })
|
||||
},
|
||||
// 是否展示关联应用弹窗
|
||||
handleIsShowRelatePopup(type) {
|
||||
this.relateApplicationVisible = type;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue