|
@@ -0,0 +1,133 @@
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "SuperForm",
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: [Object],
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ dict: {
|
|
|
+ type: [Object],
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ columns: {
|
|
|
+ type: [Array],
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ ElFileUpload: () => import("@/components/FileUpload/index.vue"),
|
|
|
+ ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
|
|
|
+ ElPopoverMultipleSelectV2: () =>
|
|
|
+ import("@/components/popover-select-v2/multiple.vue"),
|
|
|
+ ElPopoverTreeSelect: () =>
|
|
|
+ import("@/components/popover-tree-select/index.vue"),
|
|
|
+ ElPopoverMultipleTreeSelect: () =>
|
|
|
+ import("@/components/popover-tree-select/multiple.vue"),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const { columns } = this.$props;
|
|
|
+ const innerColumns = columns;
|
|
|
+ return {
|
|
|
+ drawer: false,
|
|
|
+ visible: false,
|
|
|
+ innerColumns: innerColumns,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ innerValue: {
|
|
|
+ get() {
|
|
|
+ return this.value;
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ this.$emit("input", value);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ destroyed() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-form
|
|
|
+ ref="superForm"
|
|
|
+ v-bind="$attrs"
|
|
|
+ v-on="$listeners"
|
|
|
+ :model="innerValue"
|
|
|
+ @submit.native.prevent
|
|
|
+ >
|
|
|
+ <el-row :gutter="24" style="display: flex; flex-wrap: wrap">
|
|
|
+ <el-col
|
|
|
+ v-for="({ item, attr }, index) in innerColumns"
|
|
|
+ :key="index"
|
|
|
+ :span="item.span"
|
|
|
+ >
|
|
|
+ <el-form-item :prop="item.key" :label="item.title">
|
|
|
+ <slot :name="item.key" :row="innerValue" :item="item" :attr="attr">
|
|
|
+ <component
|
|
|
+ v-if="attr.is === 'el-select'"
|
|
|
+ v-bind="attr"
|
|
|
+ v-model="innerValue[item.key]"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <el-option
|
|
|
+ v-for="item in dict.type[attr.dictName]"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </template>
|
|
|
+ </component>
|
|
|
+ <component
|
|
|
+ v-else-if="attr.is === 'el-popover-select-v2'"
|
|
|
+ v-bind="attr"
|
|
|
+ v-model="innerValue[item.key]"
|
|
|
+ :source.sync="innerValue"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ <component
|
|
|
+ v-else-if="attr.is === 'el-popover-multiple-select-v2'"
|
|
|
+ v-bind="attr"
|
|
|
+ v-model="innerValue[item.key]"
|
|
|
+ :source.sync="innerValue"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ <component
|
|
|
+ v-else-if="attr.is === 'el-popover-tree-select'"
|
|
|
+ v-bind="attr"
|
|
|
+ v-model="innerValue[item.key]"
|
|
|
+ :source.sync="innerValue"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ <component
|
|
|
+ v-else-if="attr.is === 'el-popover-multiple-tree-select'"
|
|
|
+ v-bind="attr"
|
|
|
+ v-model="innerValue[item.key]"
|
|
|
+ :source.sync="innerValue"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ <component
|
|
|
+ v-else
|
|
|
+ v-bind="attr"
|
|
|
+ v-model="innerValue[item.key]"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ </slot>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped></style>
|