index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <div class="tool-bar-wrap">
  3. <div class="tool-bar-item"
  4. v-show="showPickerSlots">
  5. <slot name="picker" />
  6. </div>
  7. <div class="tool-bar-item"
  8. v-for="(field, index) in text"
  9. :key="field">
  10. <p class="label">{{label[index]}}</p>
  11. <a-input v-model:value="fields[field]"
  12. :placeholder="label[index]" />
  13. </div>
  14. <slot />
  15. <div class="tool-bar-item">
  16. <a-button type="primary"
  17. :loading="loading"
  18. @click="onConfirm">
  19. <template #icon>
  20. <search-outlined />
  21. </template>
  22. 查询
  23. </a-button>
  24. <slot name="exbutton" />
  25. </div>
  26. </div>
  27. </template>
  28. <script lang="ts">
  29. import { defineComponent, PropType, ref, watch, watchEffect } from "vue";
  30. import { SearchOutlined } from "@ant-design/icons-vue";
  31. // TODO 可以考虑之后通过json生成
  32. const ToolBar = defineComponent({
  33. components: {
  34. SearchOutlined,
  35. },
  36. props: {
  37. text: {
  38. type: Object as PropType<string[]>,
  39. default: () => ref<string[]>([]),
  40. },
  41. label: {
  42. type: Object as PropType<string[]>,
  43. default: () => ref<string[]>([]),
  44. },
  45. loading: {
  46. type: Boolean,
  47. default: false,
  48. },
  49. },
  50. emits: ["update:loading", "confirm"],
  51. setup(props, { emit, slots }) {
  52. const fields = ref<{ [key: string]: string }>({});
  53. let loading = ref(props.loading);
  54. let showPickerSlots = ref(!!slots.picker);
  55. props.text.forEach((field) => {
  56. fields.value[field] = "";
  57. });
  58. watchEffect(() => (loading.value = props.loading));
  59. const onConfirm = () => {
  60. loading.value = true;
  61. emit("update:loading", loading.value);
  62. emit("confirm", fields.value);
  63. };
  64. return { fields, showPickerSlots, loading, onConfirm };
  65. },
  66. });
  67. export default ToolBar;
  68. </script>
  69. <style lang="scss">
  70. .tool-bar-wrap {
  71. @include flex($space: flex-start, $align: flex-end);
  72. flex-flow: row wrap;
  73. border-bottom: 1px solid #d4d4d4;
  74. margin-bottom: 10px;
  75. .tool-bar-item {
  76. width: 22%;
  77. font-size: 14px;
  78. color: #333;
  79. box-sizing: border-box;
  80. padding: 10px 15px;
  81. .label {
  82. text-align: left;
  83. margin-bottom: 5px;
  84. }
  85. &.tool-bar-range-item {
  86. width: 30%;
  87. }
  88. }
  89. }
  90. </style>