index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <script>
  2. export default {
  3. name: "SuperForm",
  4. props: {
  5. value: {
  6. type: [Object],
  7. required: true,
  8. },
  9. dict: {
  10. type: [Object],
  11. required: true,
  12. },
  13. columns: {
  14. type: [Array],
  15. required: true,
  16. },
  17. },
  18. components: {
  19. ElFileUpload: () => import("@/components/FileUpload/index.vue"),
  20. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  21. ElPopoverMultipleSelectV2: () =>
  22. import("@/components/popover-select-v2/multiple.vue"),
  23. ElPopoverTreeSelect: () =>
  24. import("@/components/popover-tree-select/index.vue"),
  25. ElPopoverMultipleTreeSelect: () =>
  26. import("@/components/popover-tree-select/multiple.vue"),
  27. },
  28. data() {
  29. const { columns } = this.$props;
  30. const innerColumns = columns;
  31. return {
  32. drawer: false,
  33. visible: false,
  34. innerColumns: innerColumns,
  35. };
  36. },
  37. computed: {
  38. innerValue: {
  39. get() {
  40. return this.value;
  41. },
  42. set(value) {
  43. this.$emit("input", value);
  44. },
  45. },
  46. },
  47. watch: {},
  48. methods: {
  49. //
  50. getFormItemRequired(prop, value) {
  51. if (typeof prop.required === "function") {
  52. return prop.required(value);
  53. }
  54. if (typeof prop.required === "boolean") {
  55. return prop.required;
  56. }
  57. },
  58. // 继承el-table的Method
  59. extendMethod() {
  60. const refMethod = Object.entries(this.$refs["superForm"]);
  61. for (const [key, value] of refMethod) {
  62. if (!(key.includes("$") || key.includes("_"))) {
  63. this[key] = value;
  64. }
  65. }
  66. },
  67. },
  68. created() {},
  69. mounted() {
  70. this.extendMethod();
  71. },
  72. destroyed() {},
  73. };
  74. </script>
  75. <template>
  76. <el-form
  77. ref="superForm"
  78. v-bind="$attrs"
  79. v-on="$listeners"
  80. :model="innerValue"
  81. @submit.native.prevent
  82. >
  83. <el-row :gutter="24" style="display: flex; flex-wrap: wrap">
  84. <el-col
  85. v-for="({ item, attr }, index) in innerColumns"
  86. :key="index"
  87. :span="item.span"
  88. >
  89. <el-form-item
  90. :prop="item.key"
  91. :label="item.title"
  92. :required="getFormItemRequired(item, innerValue)"
  93. >
  94. <slot :name="item.key" :row="innerValue" :item="item" :attr="attr">
  95. <component
  96. v-if="attr.is === 'el-select'"
  97. v-bind="attr"
  98. v-model="innerValue[item.key]"
  99. style="width: 100%"
  100. >
  101. <template>
  102. <el-option
  103. v-for="item in dict.type[attr.dictName]"
  104. :key="item.value"
  105. :label="item.label"
  106. :value="item.value"
  107. >
  108. </el-option>
  109. </template>
  110. </component>
  111. <component
  112. v-else-if="attr.is === 'el-popover-select-v2'"
  113. v-bind="attr"
  114. v-model="innerValue[item.key]"
  115. :source.sync="innerValue"
  116. style="width: 100%"
  117. >
  118. </component>
  119. <component
  120. v-else-if="attr.is === 'el-popover-multiple-select-v2'"
  121. v-bind="attr"
  122. v-model="innerValue[item.key]"
  123. :source.sync="innerValue"
  124. style="width: 100%"
  125. >
  126. </component>
  127. <component
  128. v-else-if="attr.is === 'el-popover-tree-select'"
  129. v-bind="attr"
  130. v-model="innerValue[item.key]"
  131. :source.sync="innerValue"
  132. style="width: 100%"
  133. >
  134. </component>
  135. <component
  136. v-else-if="attr.is === 'el-popover-multiple-tree-select'"
  137. v-bind="attr"
  138. v-model="innerValue[item.key]"
  139. :source.sync="innerValue"
  140. style="width: 100%"
  141. >
  142. </component>
  143. <component
  144. v-else
  145. v-bind="attr"
  146. v-model="innerValue[item.key]"
  147. style="width: 100%"
  148. >
  149. </component>
  150. </slot>
  151. </el-form-item>
  152. </el-col>
  153. </el-row>
  154. </el-form>
  155. </template>
  156. <style scoped></style>