You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
1.9 KiB
106 lines
1.9 KiB
<script>
|
|
import { deepCopy } from "@/utils"
|
|
import formBuilder from '@/utils/formBuilder'
|
|
export default {
|
|
props: {
|
|
readable: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
},
|
|
writeable: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
},
|
|
originalForm: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
required: true
|
|
},
|
|
subForm: {
|
|
type: Map,
|
|
default: () => new Map()
|
|
},
|
|
device: {
|
|
type: String,
|
|
default: 'desktop',
|
|
required: true
|
|
},
|
|
fields: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
},
|
|
fileList: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
required: true
|
|
},
|
|
scriptContent: String
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
file: {}
|
|
}
|
|
},
|
|
methods: {
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
info(newVal) {
|
|
let keys = newVal.map(i => i.name)
|
|
keys.forEach(key => {
|
|
this.form[key] = ''
|
|
})
|
|
},
|
|
originalForm(newVal) {
|
|
this.form = deepCopy(newVal)
|
|
},
|
|
fileList(newVal) {
|
|
this.file = deepCopy(newVal)
|
|
},
|
|
scriptContent(newVal) {
|
|
if(newVal) {
|
|
try {
|
|
new Function(newVal).bind(this)()
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
render(h) {
|
|
const authFields = this.fields.map(field => ({
|
|
...field,
|
|
_readable: this.readable.indexOf(field.id) !== -1,
|
|
_writeable: this.writeable.indexOf(field.id) !== -1
|
|
}))
|
|
return h('el-form', {
|
|
class: 'form',
|
|
props: {
|
|
model: this.form,
|
|
'label-position': 'top'
|
|
}
|
|
},authFields.map(field => formBuilder.bind(this)(this.device, field, h)))
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.form {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-gap: 20px;
|
|
}
|
|
::v-deep .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
::v-deep .el-form-item__label {
|
|
padding-bottom: 0;
|
|
}
|
|
</style>
|