precise_delivery_distribution_front/src/components/tool-bar/index.vue

<template>
  <div class="tool-bar-wrap">
    <div class="tool-bar-item"
         v-show="showPickerSlots">
      <slot name="picker" />
    </div>
    <div class="tool-bar-item"
         v-for="(field, index) in text"
         :key="field">
      <p class="label">{{label[index]}}</p>
      <a-input v-model:value="fields[field]"
               :placeholder="label[index]" />
    </div>
    <slot />
    <div class="tool-bar-item">
      <a-button type="primary"
                :loading="loading"
                @click="onConfirm">
        <template #icon>
          <search-outlined />
        </template>
        查询
      </a-button>
      <slot name="exbutton" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch, watchEffect } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";

// TODO 可以考虑之后通过json生成
const ToolBar = defineComponent({
  components: {
    SearchOutlined,
  },
  props: {
    text: {
      type: Object as PropType<string[]>,
      default: () => ref<string[]>([]),
    },
    label: {
      type: Object as PropType<string[]>,
      default: () => ref<string[]>([]),
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:loading", "confirm"],
  setup(props, { emit, slots }) {
    const fields = ref<{ [key: string]: string }>({});
    let loading = ref(props.loading);
    let showPickerSlots = ref(!!slots.picker);

    props.text.forEach((field) => {
      fields.value[field] = "";
    });

    watchEffect(() => (loading.value = props.loading));

    const onConfirm = () => {
      loading.value = true;
      emit("update:loading", loading.value);
      emit("confirm", fields.value);
    };

    return { fields, showPickerSlots, loading, onConfirm };
  },
});

export default ToolBar;
</script>

<style lang="scss">
.tool-bar-wrap {
  @include flex($space: flex-start, $align: flex-end);
  flex-flow: row wrap;
  border-bottom: 1px solid #d4d4d4;
  margin-bottom: 10px;

  .tool-bar-item {
    width: 22%;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    padding: 10px 15px;

    .label {
      text-align: left;
      margin-bottom: 5px;
    }

    &.tool-bar-range-item {
      width: 30%;
    }
  }
}
</style>