183 lines
5.6 KiB
Vue
183 lines
5.6 KiB
Vue
<!-- 融合服务--组合能力 -->
|
|
<template>
|
|
<div class="content-box">
|
|
<div class="title">
|
|
{{ title }}
|
|
</div>
|
|
<div class="no-data loading-box" v-loading="loading" v-if="loading">
|
|
</div>
|
|
<div v-if="!loading">
|
|
<div v-for="(item, index) in dataInfo" :key="index">
|
|
<el-form-item label="能力类别" prop="">
|
|
<el-select v-model="item.type" placeholder="请选择能力类别"
|
|
@change="(data) => filterSelect(data, item)" :disabled="disabledType">
|
|
<el-option v-for="val in typeOptions" :key="val.value" :label="val.value" :value="val.value">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select style="margin-left: 20px" v-model="item.resourceId" placeholder="请选择能力"
|
|
:disabled="disabledType">
|
|
<el-option v-for="val in item.abilityOptions" :key="val.id" :label="val.name" :value="val.id">
|
|
</el-option>
|
|
</el-select>
|
|
<el-button style="margin-left:10px" @click="deleteItem(dataInfo, index)" type="danger" size="small"
|
|
v-if="!disabledType && dataInfo.length > 1">删除
|
|
</el-button>
|
|
<el-button style="margin-left:10px" size="small"
|
|
v-if="!disabledType && index == dataInfo.length - 1" @click="addItem(dataInfo, 0)"
|
|
type="primary">添加
|
|
</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
dataForm: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '组合能力'
|
|
},
|
|
// 是否可编辑
|
|
disabledType: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
typeOptions: [
|
|
{
|
|
value: '',
|
|
},
|
|
{
|
|
value: '数据资源',
|
|
},
|
|
{
|
|
value: '组件服务',
|
|
},
|
|
{
|
|
value: '应用资源',
|
|
},
|
|
{
|
|
value: '基础设施',
|
|
},
|
|
{
|
|
value: '知识库',
|
|
},
|
|
],
|
|
dataInfo: [],
|
|
abilityArray: [],
|
|
abilityArrayCopy: [],
|
|
loading: false,
|
|
}
|
|
},
|
|
watch: {
|
|
dataInfo: {
|
|
handler(newVal) {
|
|
this.dataInfo = newVal;
|
|
let arr = newVal.map((v, index) => {
|
|
return {
|
|
sequence: index,
|
|
resourceId: v.resourceId,
|
|
}
|
|
})
|
|
this.$emit('update', {
|
|
title: this.title,
|
|
list: arr
|
|
})
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
async getDataInfo(dataForm) {
|
|
await this.getAbility()
|
|
let arr = []
|
|
let attrValue = dataForm.fuseResourceList || []
|
|
if (attrValue.length > 0) {
|
|
attrValue.map(v => {
|
|
let _obj = {
|
|
type: v.resource && v.resource.type,
|
|
resourceId: v.resourceId,
|
|
}
|
|
this.filterSelect(v.resource && v.resource.type, _obj)
|
|
arr.push(_obj)
|
|
})
|
|
} else {
|
|
arr = []
|
|
arr.push({
|
|
type: "",
|
|
resourceId: "",
|
|
abilityOptions: []
|
|
})
|
|
}
|
|
this.dataInfo = arr;
|
|
this.$nextTick(() => {
|
|
console.log(999, this.dataInfo)
|
|
})
|
|
},
|
|
// 新增
|
|
addItem(list) {
|
|
list.push({
|
|
type: "",
|
|
resourceId: "",
|
|
abilityOptions: []
|
|
})
|
|
},
|
|
// 删除
|
|
deleteItem(list, index) {
|
|
list.splice(index, 1)
|
|
},
|
|
// 获取能力
|
|
getAbility() {
|
|
return new Promise((resolve, reject) => {
|
|
this.loading = true;
|
|
this.$http.get(`/resource/list`, {}).then(({ data: res }) => {
|
|
this.loading = false;
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.abilityArray = res.data || []
|
|
this.abilityArrayCopy = res.data || []
|
|
resolve(res)
|
|
}).catch((err) => {
|
|
this.loading = false;
|
|
this.$message.error(err)
|
|
reject(err)
|
|
})
|
|
})
|
|
},
|
|
filterSelect(type, item) {
|
|
let arr = this.abilityArrayCopy.filter(v => v.type == type)
|
|
let selectArray = this.dataInfo.map(v => v.resourceId) || [];
|
|
// 过滤掉已选的
|
|
item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content-box {
|
|
margin-bottom: 20px;
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.loading-box {
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
</style> |