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

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> </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>

View File

@@ -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>

View File

@@ -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