修复切换组件时,数据的设置数据不更新的问题
This commit is contained in:
@@ -11,7 +11,7 @@
|
|||||||
</ai-dialog-btn>
|
</ai-dialog-btn>
|
||||||
</div>
|
</div>
|
||||||
<template v-else-if="source.dataType === 'staticData'">
|
<template v-else-if="source.dataType === 'staticData'">
|
||||||
<table-editor label="设置数据" v-model="tableData" :configs.sync="colConfigs" @data="changeData"/>
|
<table-editor label="设置数据" v-model="staticDataOps.tableData" :configs.sync="staticDataOps.colConfigs" @data="changeData"/>
|
||||||
</template>
|
</template>
|
||||||
<config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
|
<config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
|
||||||
<ai-select v-model="source.sourceDataId" placeholder="请选择数据源" :instance="instance"
|
<ai-select v-model="source.sourceDataId" placeholder="请选择数据源" :instance="instance"
|
||||||
@@ -50,8 +50,6 @@ export default {
|
|||||||
dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
|
dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
|
||||||
content: "",
|
content: "",
|
||||||
loading: false,
|
loading: false,
|
||||||
tableData: [],
|
|
||||||
colConfigs: []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -64,6 +62,40 @@ export default {
|
|||||||
get() {
|
get() {
|
||||||
return this.options
|
return this.options
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
staticDataOps() {
|
||||||
|
const columnProp = "name", ops = {colConfigs: [], tableData: []}
|
||||||
|
if (Array.isArray(this.options.staticData)) {
|
||||||
|
const columns = []
|
||||||
|
ops.colConfigs = []
|
||||||
|
this.options.staticData.map((row, i) => {
|
||||||
|
const prop = `c${i || ""}`
|
||||||
|
ops.colConfigs.push({label: row[columnProp] || row.key, prop})
|
||||||
|
Object.entries(row).map(([k, v]) => {
|
||||||
|
console.log("梳理数据单元:", k, v)
|
||||||
|
if (/^v/.test(k) && k != "value") {
|
||||||
|
const item = ops.tableData[k.substring(1) || 0] || {}
|
||||||
|
item[prop] = v
|
||||||
|
ops.tableData[k.substring(1) || 0] = item
|
||||||
|
} else if (![columnProp, 'key'].includes(k)) {
|
||||||
|
const index = columns.findIndex(e => k == e)
|
||||||
|
if (index > -1) {
|
||||||
|
const item = ops.tableData[index] || {}
|
||||||
|
item[prop] = v
|
||||||
|
ops.tableData[index] = item
|
||||||
|
} else {
|
||||||
|
columns.push(k)
|
||||||
|
const newIndex = columns.length - 1
|
||||||
|
const item = ops.tableData[newIndex] || {}
|
||||||
|
item[prop] = v
|
||||||
|
ops.tableData[newIndex] = item
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
ops.tableData = ops.tableData.map(e => ({...e, $cellEdit: false}))
|
||||||
|
}
|
||||||
|
return ops
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -72,43 +104,7 @@ export default {
|
|||||||
new DvCompData(this.source.dataType, this.source, this.instance).getData().then(data => {
|
new DvCompData(this.source.dataType, this.source, this.instance).getData().then(data => {
|
||||||
this.source[this.source.dataType] = data
|
this.source[this.source.dataType] = data
|
||||||
})
|
})
|
||||||
},
|
|
||||||
initStaticDataProps() {
|
|
||||||
const columnProp = "name"
|
|
||||||
if (Array.isArray(this.options.staticData)) {
|
|
||||||
const columns = []
|
|
||||||
this.options.staticData.map((row, i) => {
|
|
||||||
const prop = `c${i || ""}`
|
|
||||||
this.colConfigs.push({label: row[columnProp] || row.key, prop})
|
|
||||||
Object.entries(row).map(([k, v]) => {
|
|
||||||
if (/^v/.test(k)) {
|
|
||||||
const item = this.tableData[k.substring(1) || 0] || {}
|
|
||||||
item[prop] = v
|
|
||||||
this.tableData[k.substring(1) || 0] = item
|
|
||||||
} else if (![columnProp, 'key'].includes(k)) {
|
|
||||||
const index = columns.findIndex(e => k == e)
|
|
||||||
console.log(index)
|
|
||||||
if (index > -1) {
|
|
||||||
const item = this.tableData[index] || {}
|
|
||||||
item[prop] = v
|
|
||||||
this.tableData[index] = item
|
|
||||||
} else {
|
|
||||||
columns.push(k)
|
|
||||||
const newIndex = columns.length - 1
|
|
||||||
const item = this.tableData[newIndex] || {}
|
|
||||||
item[prop] = v
|
|
||||||
this.tableData[newIndex] = item
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.tableData = this.tableData.map(e => ({...e, $cellEdit: false}))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
created() {
|
|
||||||
//新版静态数据
|
|
||||||
this.initStaticDataProps()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -15,7 +15,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
records: [],
|
|
||||||
form: {}
|
form: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -44,7 +43,8 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
columns: v => v.configs
|
columns: v => v.configs,
|
||||||
|
records: v => v.tableData.map(e => ({$cellEdit: true, ...e}))
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
rowSave(form, done) {
|
rowSave(form, done) {
|
||||||
@@ -74,16 +74,13 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
|
||||||
this.records = this.tableData.map(e => ({$cellEdit: true, ...e}))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="tableEditor">
|
<section class="tableEditor">
|
||||||
<avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave" @row-del="rowDel">
|
<avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave" @row-del="rowDel">
|
||||||
<template v-for="c in columns" :slot="`${c.prop}Header`" slot-scope="{column = {}}">
|
<template v-for="col in columns" :slot="`${col.prop}Header`" slot-scope="{column = {}}">
|
||||||
<el-input class="headerInput" v-model="column.label" clearable placeholder="请输入列名" @change="$emit('update:configs', columns)"/>
|
<el-input class="headerInput" v-model="column.label" clearable placeholder="请输入列名" @change="$emit('update:configs', columns)"/>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="label" v-slot:menuLeft>
|
<template v-if="label" v-slot:menuLeft>
|
||||||
|
|||||||
@@ -85,7 +85,7 @@
|
|||||||
@dragstop="(x, y) => onDrag(x, y,item)"
|
@dragstop="(x, y) => onDrag(x, y,item)"
|
||||||
@resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
|
@resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
|
||||||
@activated="onActivated(index)"
|
@activated="onActivated(index)"
|
||||||
@click.native.stop="activeIndex = index"
|
@click.native.stop
|
||||||
v-for="(item, index) in componentList"
|
v-for="(item, index) in componentList"
|
||||||
:key="index">
|
:key="index">
|
||||||
<div class="coordinate" v-show="activeIndex === index">
|
<div class="coordinate" v-show="activeIndex === index">
|
||||||
@@ -237,7 +237,7 @@ import {mapActions} from "vuex"
|
|||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "designDashboard",
|
name: "viewport",
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
setCurLayer: this.setCurLayer
|
setCurLayer: this.setCurLayer
|
||||||
|
|||||||
Reference in New Issue
Block a user