多维表格
 
 
 
 
 
 

203 lines
4.9 KiB

<template>
<v-container fluid class="wrapper">
<v-row>
<v-col cols="6">
<v-autocomplete
outlined
class="caption"
hide-details
:loading="isRefTablesLoading"
label="Reference Table"
:full-width="false"
v-model="relation.parentTable"
:items="refTables"
item-text="_tn"
item-value="tn"
required
dense
@change="loadColumnList"
></v-autocomplete>
</v-col
>
<v-col cols="6">
<v-autocomplete
outlined
class="caption"
hide-details
:loading="isRefColumnsLoading"
label="Reference Column"
:full-width="false"
v-model="relation.parentColumn"
:items="refColumns"
item-text="_cn"
item-value="cn"
required
dense
ref="parentColumnRef"
@change="onColumnSelect"
></v-autocomplete>
</v-col
>
</v-row>
<v-row>
<v-col cols="6">
<v-autocomplete
outlined
class="caption"
hide-details
label="On Update"
:full-width="false"
v-model="relation.onUpdate"
:items="onUpdateDeleteOptions"
required
dense
:disabled="relation.type !== 'real'"
></v-autocomplete>
</v-col>
<v-col cols="6">
<v-autocomplete
outlined
class="caption"
hide-details
label="On Delete"
:full-width="false"
v-model="relation.onDelete"
:items="onUpdateDeleteOptions"
required
dense
:disabled="relation.type !== 'real'"
></v-autocomplete>
</v-col>
</v-row>
<v-row>
<v-col>
<v-checkbox
false-value="real"
true-value="virtual"
label="Virtual Relation"
:full-width="false"
v-model="relation.type"
required
class="mt-0"
dense
></v-checkbox>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "linked-to-another-options",
props: ['nodes', 'column'],
data: () => ({
refTables: [],
refColumns: [],
relation: {},
isRefTablesLoading: false,
isRefColumnsLoading: false,
onUpdateDeleteOptions: [
"NO ACTION",
"CASCADE",
"RESTRICT",
"SET NULL",
"SET DEFAULT"
],
}),
async created() {
await this.loadTablesList();
this.relation = {
childColumn: this.column.cn,
childTable: this.nodes.tn,
parentTable: this.column.rtn || "",
parentColumn: this.column.rcn || "",
onDelete: "CASCADE",
onUpdate: "CASCADE",
updateRelation: this.column.rtn ? true : false,
type: 'real'
}
},
methods: {
async loadColumnList() {
if (!this.relation.parentTable) return;
this.isRefColumnsLoading = true;
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
env: this.nodes.env,
dbAlias: this.nodes.dbAlias
}, 'columnList', {tn: this.relation.parentTable}])
const columns = result.data.list;
this.refColumns = JSON.parse(JSON.stringify(columns));
if (this.relation.updateRelation && !this.relationColumnChanged) {
//only first time when editing add defaault value to this field
this.relation.parentColumn = this.column.rcn;
this.relationColumnChanged = true;
} else {
//find pk column and assign to parentColumn
const pkKeyColumns = this.refColumns.filter(el => el.pk);
this.relation.parentColumn = (pkKeyColumns[0] || {}).cn || "";
}
this.onColumnSelect();
this.isRefColumnsLoading = false;
},
async loadTablesList() {
this.isRefTablesLoading = true;
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
env: this.nodes.env,
dbAlias: this.nodes.dbAlias
}, 'tableList']);
this.refTables = result.data.list.map(({tn,_tn}) => ({tn,_tn}))
this.isRefTablesLoading = false;
},
async saveRelation() {
try {
let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
{
env: this.nodes.env,
dbAlias: this.nodes.dbAlias
},
this.relation.type === 'real' ? "relationCreate" : 'xcVirtualRelationCreate',
this.relation
]);
} catch (e) {
throw e;
}
},
onColumnSelect() {
const col = this.refColumns.find(c => this.relation.parentColumn === c.cn);
this.$emit('onColumnSelect', col)
}
},
watch: {
'column.cn': (c) => {
this.$set(this.relation, 'childColumn', c);
}
}
}
</script>
<style scoped>
.wrapper {
border: solid 2px #7f828b33;
border-radius: 4px;
}
/deep/ .v-input__append-inner {
margin-top: 4px !important;
}
</style>