index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <script>
  2. export default {
  3. name: "SuperSearch",
  4. props: {
  5. value: {
  6. type: [Object],
  7. require: true,
  8. },
  9. dict: {
  10. type: [Object],
  11. require: true,
  12. },
  13. columns: {
  14. type: [Array],
  15. require: true,
  16. },
  17. },
  18. components: {
  19. ElDraggable: () => import("@/components/draggable/index.vue"),
  20. ElFileUpload: () => import("@/components/FileUpload/index.vue"),
  21. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  22. ElPopoverMultipleSelectV2: () =>
  23. import("@/components/popover-select-v2/multiple.vue"),
  24. ElPopoverTreeSelect: () =>
  25. import("@/components/popover-tree-select/index.vue"),
  26. ElPopoverMultipleTreeSelect: () =>
  27. import("@/components/popover-tree-select/multiple.vue"),
  28. },
  29. data() {
  30. const { columns } = this.$props;
  31. const innerColumns = columns.map(({ item, attr }) => ({
  32. attr,
  33. item: { ...item, hidden: true, span: item.span || 6 },
  34. }));
  35. return {
  36. drawer: false,
  37. visible: false,
  38. innerColumns: innerColumns,
  39. };
  40. },
  41. computed: {
  42. innerValue: {
  43. get() {
  44. return this.value;
  45. },
  46. set(value) {
  47. this.$emit("input", value);
  48. },
  49. },
  50. showColumns: {
  51. get() {
  52. return this.innerColumns.filter(({ item }) => item.hidden);
  53. },
  54. set() {},
  55. },
  56. height: {
  57. get() {
  58. const maxMultiples = Math.ceil(
  59. this.innerColumns
  60. .map(({ item }) => item.span)
  61. .reduce((prev, curr) => {
  62. return prev + curr;
  63. }) / 24
  64. );
  65. const multiples = this.visible ? maxMultiples : 1;
  66. return multiples * 47 + "px";
  67. },
  68. set() {},
  69. },
  70. },
  71. watch: {},
  72. methods: {
  73. onVisible() {
  74. this.visible = !this.visible;
  75. },
  76. },
  77. created() {},
  78. mounted() {},
  79. destroyed() {},
  80. };
  81. </script>
  82. <template>
  83. <el-form
  84. ref="superForm"
  85. v-bind="$attrs"
  86. v-on="$listeners"
  87. :model="innerValue"
  88. label-width="auto"
  89. label-position="right"
  90. @submit.native.prevent
  91. >
  92. <el-row
  93. :gutter="24"
  94. :style="{ height }"
  95. style="overflow: hidden; transition: 250ms; display: flex"
  96. class="px-3"
  97. >
  98. <el-row :gutter="20" style="flex: 1; display: flex; flex-wrap: wrap">
  99. <el-col
  100. v-for="({ item, attr }, index) in showColumns"
  101. :key="index"
  102. :span="item.span"
  103. >
  104. <el-form-item :prop="item.key" :label="item.title">
  105. <component
  106. v-if="attr.is === 'el-input'"
  107. v-bind="attr"
  108. v-model="innerValue[item.key]"
  109. @keyup.enter.native="$emit('submit')"
  110. style="width: 100%"
  111. >
  112. </component>
  113. <component
  114. v-if="attr.is === 'el-select'"
  115. v-bind="attr"
  116. v-model="innerValue[item.key]"
  117. @change="$emit('submit')"
  118. style="width: 100%"
  119. >
  120. <template>
  121. <el-option
  122. v-for="item in dict.type[attr.dictName]"
  123. :key="item.value"
  124. :label="item.label"
  125. :value="item.value"
  126. >
  127. </el-option>
  128. </template>
  129. </component>
  130. <component
  131. v-if="attr.is === 'el-date-picker'"
  132. v-bind="attr"
  133. v-model="innerValue[item.key]"
  134. @change="$emit('submit')"
  135. style="width: 100%"
  136. >
  137. </component>
  138. <component
  139. v-if="attr.is === 'el-popover-select-v2'"
  140. v-bind="attr"
  141. v-model="innerValue[item.key]"
  142. :source.sync="innerValue"
  143. @change="$emit('submit')"
  144. style="width: 100%"
  145. >
  146. </component>
  147. <component
  148. v-if="attr.is === 'el-popover-multiple-select-v2'"
  149. v-bind="attr"
  150. v-model="innerValue[item.key]"
  151. :source.sync="innerValue"
  152. @change="$emit('submit')"
  153. style="width: 100%"
  154. >
  155. </component>
  156. <component
  157. v-if="attr.is === 'el-popover-tree-select'"
  158. v-bind="attr"
  159. v-model="innerValue[item.key]"
  160. :source.sync="innerValue"
  161. @change="$emit('submit')"
  162. style="width: 100%"
  163. >
  164. </component>
  165. <component
  166. v-if="attr.is === 'el-popover-multiple-tree-select'"
  167. v-bind="attr"
  168. v-model="innerValue[item.key]"
  169. :source.sync="innerValue"
  170. @change="$emit('submit')"
  171. style="width: 100%"
  172. >
  173. </component>
  174. </el-form-item>
  175. </el-col>
  176. </el-row>
  177. <el-row style="width: fit-content; text-align: right" class="ml-5">
  178. <el-button :size="$attrs.size" type="primary" @click="$emit('submit')">
  179. 搜索
  180. </el-button>
  181. <el-button :size="$attrs.size" @click="$emit('reset')">
  182. 重置
  183. </el-button>
  184. <!-- <el-button :size="$attrs.size" @click="visible = !visible">
  185. {{ visible ? "展开" : "收起" }}
  186. </el-button> -->
  187. </el-row>
  188. </el-row>
  189. <el-divider class="m-0" style="cursor: pointer" @click="visible = !visible">
  190. <i
  191. class="el-icon-d-arrow-left"
  192. style="transition: 250ms"
  193. :style="{ transform: `rotate(${visible ? 90 : -90}deg)` }"
  194. ></i>
  195. </el-divider>
  196. </el-form>
  197. </template>
  198. <style scoped></style>