修复切换组件时,数据的设置数据不更新的问题

This commit is contained in:
aixianling
2024-02-28 15:08:09 +08:00
parent 8a1fa07e9b
commit 13b779ff3e
3 changed files with 40 additions and 47 deletions

View File

@@ -11,7 +11,7 @@
</ai-dialog-btn>
</div>
<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>
<config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
<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]})),
content: "",
loading: false,
tableData: [],
colConfigs: []
}
},
computed: {
@@ -64,6 +62,40 @@ export default {
get() {
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: {
@@ -72,44 +104,8 @@ export default {
new DvCompData(this.source.dataType, this.source, this.instance).getData().then(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>
<style scoped lang="scss">

View File

@@ -15,7 +15,6 @@ export default {
},
data() {
return {
records: [],
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: {
rowSave(form, done) {
@@ -74,16 +74,13 @@ export default {
})
}
},
created() {
this.records = this.tableData.map(e => ({$cellEdit: true, ...e}))
}
}
</script>
<template>
<section class="tableEditor">
<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)"/>
</template>
<template v-if="label" v-slot:menuLeft>

View File

@@ -85,7 +85,7 @@
@dragstop="(x, y) => onDrag(x, y,item)"
@resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
@activated="onActivated(index)"
@click.native.stop="activeIndex = index"
@click.native.stop
v-for="(item, index) in componentList"
:key="index">
<div class="coordinate" v-show="activeIndex === index">
@@ -237,7 +237,7 @@ import {mapActions} from "vuex"
import Vue from "vue";
export default {
name: "designDashboard",
name: "viewport",
provide() {
return {
setCurLayer: this.setCurLayer