index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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. //
  59. getFormItemDisabled(prop, value) {
  60. if (typeof prop.disabled === "function") {
  61. return prop.disabled(value);
  62. }
  63. if (typeof prop.disabled === "boolean") {
  64. return prop.disabled;
  65. }
  66. },
  67. // 继承el-table的Method
  68. extendMethod() {
  69. const refMethod = Object.entries(this.$refs["superForm"]);
  70. for (const [key, value] of refMethod) {
  71. if (!(key.includes("$") || key.includes("_"))) {
  72. this[key] = value;
  73. }
  74. }
  75. },
  76. },
  77. created() {},
  78. mounted() {
  79. this.extendMethod();
  80. },
  81. destroyed() {},
  82. };
  83. </script>
  84. <template>
  85. <el-form
  86. ref="superForm"
  87. v-bind="$attrs"
  88. v-on="$listeners"
  89. :model="innerValue"
  90. @submit.native.prevent
  91. >
  92. <el-row :gutter="24" style="display: flex; flex-wrap: wrap">
  93. <el-col
  94. v-for="({ item, attr }, index) in innerColumns"
  95. :key="index"
  96. :span="item.span"
  97. >
  98. <el-form-item
  99. :prop="item.key"
  100. :label="item.title"
  101. :required="getFormItemRequired(item, innerValue)"
  102. >
  103. <slot :name="item.key" :row="innerValue" :item="item" :attr="attr">
  104. <component
  105. v-if="attr.is === 'el-select'"
  106. v-bind="attr"
  107. v-model="innerValue[item.key]"
  108. style="width: 100%"
  109. >
  110. <template>
  111. <el-option
  112. v-for="item in dict.type[attr.dictName]"
  113. :key="item.value"
  114. :label="item.label"
  115. :value="item.value"
  116. >
  117. </el-option>
  118. </template>
  119. </component>
  120. <component
  121. v-else-if="attr.is === 'el-popover-select-v2'"
  122. v-bind="attr"
  123. v-model="innerValue[item.key]"
  124. :source.sync="innerValue"
  125. style="width: 100%"
  126. >
  127. </component>
  128. <component
  129. v-else-if="attr.is === 'el-popover-multiple-select-v2'"
  130. v-bind="attr"
  131. v-model="innerValue[item.key]"
  132. :source.sync="innerValue"
  133. style="width: 100%"
  134. >
  135. </component>
  136. <component
  137. v-else-if="attr.is === 'el-popover-tree-select'"
  138. v-bind="attr"
  139. v-model="innerValue[item.key]"
  140. :source.sync="innerValue"
  141. style="width: 100%"
  142. >
  143. </component>
  144. <component
  145. v-else-if="attr.is === 'el-popover-multiple-tree-select'"
  146. v-bind="attr"
  147. v-model="innerValue[item.key]"
  148. :source.sync="innerValue"
  149. style="width: 100%"
  150. >
  151. </component>
  152. <component
  153. v-else
  154. v-bind="attr"
  155. v-model="innerValue[item.key]"
  156. :disabled="getFormItemDisabled(attr, innerValue)"
  157. style="width: 100%"
  158. >
  159. </component>
  160. </slot>
  161. </el-form-item>
  162. </el-col>
  163. </el-row>
  164. </el-form>
  165. </template>
  166. <style scoped></style>