fe-drone-ci/src/views/accounts/relationships.vue

98 lines
2.6 KiB
Vue

<template>
<div class="app-container">
<el-table v-loading="listLoading" :data="buyerAccounts" border fit style="width: 100%">
<el-table-column label="X" align="center">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column v-for="seller in sellerAccounts" :key="seller._id" align="center" :label="seller.name">
<template slot-scope="scope">
<span v-if="relationshipMatrix[`${buyerAccounts[scope.$index].id}-${seller.id}`]">
<span style="color: green">B: Enabled<br></span>
<span v-if="relationshipMatrix[`${buyerAccounts[scope.$index].id}-${seller.id}`].other.enabled_spot" style="color: green">S: Enabled<br></span>
<span v-else style="color: red">S: Disabled<br></span>
</span>
<span v-else style="color: red;">
No Relationship
<br>
<br>
</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { fetchList, fetchRelationships } from '@/api/account'
export default {
name: 'RelationshipList',
data() {
return {
sellerAccounts: [],
buyerAccounts: [],
relationshipMatrix: [],
originalList: null,
list: null,
total: 0,
listLoading: false,
listQuery: {
page: 1,
limit: 20,
buyerAccountId: '',
sellerAccountId: ''
}
}
},
created() {
this.listQuery.platform = 'OLFDE'
this.getList()
},
methods: {
getRemoteAccountList(query) {
query = {}
query.platform = 'OLFDE'
query.limit = 100
},
getList() {
Promise.all([fetchRelationships({ platform: 'OLFDE' }), fetchList({ platform: 'OLFDE', limit: 100 })]).then((results) => {
const allRelationships = results[0].data.relationships
this.sellerAccounts = results[1].data.docs.filter(a => a.type === 'seller').map(v => { return { name: v.name, id: v._id } })
this.buyerAccounts = results[1].data.docs.filter(a => a.type === 'buyer').map(v => { return { name: v.name, id: v._id } })
// Map the seller accounts
const relationshipData = []
allRelationships.forEach((a) => {
relationshipData[`${a.buyer.account_id}-${a.other.account_id}`] = a
})
this.relationshipMatrix = relationshipData
})
},
resetFilter() {
},
handleFilter() {
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>