wms / wms-cloud-ui · Files

<template>
  <div class="top-right-btn">

    <el-row v-if="noSearch">

      <el-tooltip
        class="item"
        effect="dark"
        :content="showSearch ? '隐藏搜索' : '显示搜索'"
      >
        <el-button
          size="mini"
          circle
          icon="el-icon-search"
          @click="toggleSearch()"
        />

      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">

        <el-button
          size="mini"
          circle
          icon="el-icon-refresh"
          @click="refresh()"
        />
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="筛选" placement="top">
        <el-popover
          placement="bottom"
          width="100"
          trigger="click"
          style="margin-left: 10px"
        >
          <el-button
            slot="reference"
            size="mini"
            circle
            icon="el-icon-s-tools"
          ></el-button>

          <el-checkbox-group v-model="selectData">

            <el-checkbox
              v-for="item in col_data"
              :key="item.title"
              :label="item.title"
              :checked="item.istrue"
              style="padding: 4px"

              :disabled="item.disabled"

            />
          </el-checkbox-group>
        </el-popover>
      </el-tooltip>

    </el-row>
    <el-row v-else>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button
          size="mini"
          circle
          icon="el-icon-refresh"
          @click="refresh()"
        />

      </el-tooltip>

       <el-tooltip class="item" effect="dark" content="筛选" placement="top">
        <el-popover
          placement="bottom"
          width="100"
          trigger="click"
          style="margin-left: 10px"
        >
          <el-button
            slot="reference"
            size="mini"
            circle
            icon="el-icon-s-tools"
          ></el-button>

          <el-checkbox-group v-model="selectData">

            <el-checkbox
              v-for="item in col_data"
              :key="item.title"
              :label="item.title"
              :checked="item.istrue"
              style="padding: 4px"

              :disabled="item.disabled"

            />

          </el-checkbox-group>
        </el-popover>
      </el-tooltip>

    </el-row>
  </div>
</template>
<script>
export default {
  name: "RightToolbar",
  data() {

    return {
      show: this.noSearch,

      col_data: this.colData,
      selectData: [],

    };

  },
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },

    noSearch: {
      type: Boolean,

      default: true,

    },

    colData: {
      type: Array,
      default: () => []
    }

  },
  watch: {
    selectData(newVal, oldVal) {
      this.$emit("selectData", newVal);
    },

  },

  methods: {
    //搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);
    },
    //刷新
    refresh() {
      this.$emit("queryTable");

    }

  },
};
</script>