74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-button type="primary" @click="onOpen" size="small">打开设计</el-button>
|
|
<el-dialog title="表单设计" :visible.sync="dialogVisible" append-to-body width="80%">
|
|
<fc-designer ref="designerRef" height="100vh" :config="{ showSaveBtn: true }" @save="onSave"></fc-designer>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="onConfirm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "index",
|
|
props: {
|
|
value: {
|
|
type: [Object, String],
|
|
required: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
form: {}
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newVal) {
|
|
if (newVal && typeof newVal === "object") {
|
|
this.form = newVal
|
|
} else if (newVal && typeof newVal === "string") {
|
|
try {
|
|
this.form = JSON.parse(newVal)
|
|
} catch (error) {
|
|
this.form = {}
|
|
}
|
|
}
|
|
console.log(this.form)
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
onOpen() {
|
|
this.dialogVisible = true
|
|
this.$nextTick(() => {
|
|
console.log(this.value)
|
|
console.log(this.form)
|
|
console.log(this.$refs.designerRef)
|
|
if (this.$refs.designerRef && this.form) {
|
|
this.$refs.designerRef.setOptions(this.form.options)
|
|
this.$refs.designerRef.setRule(this.form.rule)
|
|
}
|
|
})
|
|
},
|
|
onSave(val) {
|
|
console.log(val)
|
|
this.form = val
|
|
},
|
|
onConfirm() {
|
|
console.log(this.$refs.designerRef)
|
|
this.$emit("input", this.form)
|
|
this.dialogVisible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|