SZYGM1.0/src/components/minheader/index.vue

<template>
  <div
    :class="isStatus || isStatuser ? 'flex' : 'flex-end'"
    class="data-table-btn"
  >
    <div v-if="isStatus || isStatuser" class="vStatus flex-act">
      <slot name="header" />
      <el-date-picker
        v-if="isTime"
        v-model="startTime"
        type="date"
        placeholder="开始日期"
        size="default"
      >
      </el-date-picker>
      <el-date-picker
        v-if="isTime"
        class="L12"
        size="default"
        v-model="endTime"
        type="date"
        placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <!-- <div class="">
      <el-date-picker v-model="startTime" type="date" placeholder="选择日期">
      </el-date-picker>
      <el-date-picker v-model="endTime" type="date" placeholder="选择日期">
      </el-date-picker>
    </div> -->
    <div v-if="isBtn" class="rb">
      <template v-if="isSearch">
        <!-- <div class="serlog">
          <div class="log"></div>
        </div> -->
        <!-- <el-input
          v-model="input"
          class="inputcas"
          placeholder="请输入您要搜索的内容"
          clearable
        /> -->
        <Search @clear="clear" @search="search" />
        <!-- <el-button type="danger" size="default" class="br L12">搜索</el-button> -->
      </template>
      <template v-if="isSlot">
        <el-button
          type="danger"
          size="default"
          class="br L12"
          @click="addslot()"
          >1个插槽</el-button
        >
      </template>
      <template v-if="isJournal">
        <el-button
          size="default"
          plain
          class="btn-white P12"
          @click="addJournal()"
          >查看日志</el-button
        >
      </template>
      <template v-if="isMeasure">
        <el-button size="default" plain class="btn-white br" @click="addBbut()"
          >测试</el-button
        >
      </template>
      <template v-if="isPreser">
        <el-button
          type="danger"
          size="default"
          class="br L12"
          @click="preserBtn"
          >保存</el-button
        >
      </template>
      <template v-if="isAuth">
        <el-button size="default" plain class="btn-white br" @click="addBbut()"
          >新增</el-button
        >
      </template>
      <template v-if="isShow">
        <img
          class="btn-img"
          src="@/assets/baggage/ic_setting.png"
          title="列设置"
          @click="show"
        />
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import Search from "@/components/search/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  //是否显示新增按钮
  isBtn: {
    type: Boolean,
    default: true,
  },
  //是否启用权限按钮
  isAuth: {
    type: Boolean,
    default: false,
  },
  //是否显示状态
  isStatus: {
    type: Boolean,
    default: false,
  },
  //是否显示名称
  isStatuser: {
    type: Boolean,
    default: false,
  },
  //是否显示搜索
  isSearch: {
    type: Boolean,
    default: false,
  },
  //是否显示保存
  isPreser: {
    type: Boolean,
    default: false,
  },
  //是否显示测试
  isMeasure: {
    type: Boolean,
    default: false,
  },
  //是否显示日志
  isJournal: {
    type: Boolean,
    default: false,
  },
  //是否显示插槽
  isSlot: {
    type: Boolean,
    default: false,
  },
  //是否显示列设置
  isShow: {
    type: Boolean,
    default: false,
  },
  //是否显示时间
  isTime: {
    type: Boolean,
    default: false,
  },
});
//搜索内容
const input = ref("");
const startTime = ref<String>(""); //时间
const endTime = ref<String>(""); //时间
const emits = defineEmits([
  "addForm",
  "preserForm",
  "addJournalForm",
  "addslotForm",
  "showForm",
]);
const addBbut = () => {
  emits("addForm");
};
const search = (val) => {
  ElMessage.success(`搜索成功：${val}`);
};
const clear = () => {
  ElMessage.success(`清除`);
};
//保存
const preserBtn = () => {
  emits("preserForm");
};
//日志
const addJournal = () => {
  emits("addJournalForm");
};
//插槽
const addslot = () => {
  emits("addslotForm");
};
//列设置
const show = () => {
  emits("showForm");
};
</script>
<style lang="scss" scoped>
.data-table-btn {
  line-height: 32px;
  margin-bottom: 20px;
}
.inputcas {
  width: 240px;
  height: 32px;
  background: #ffffff;
  // border: 1px solid #d2d6df;
  // box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: none;
  // box-shadow: 0 0 0 0;
}
::v-deep .el-input__wrapper {
  box-shadow: none;
}
.rb {
  display: flex;
  align-items: center;
}
.serlog {
  width: 32px;
  height: 32px;
  background: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  > .log {
    width: 14px;
    height: 14px;
    background: url("../../assets/header/ic_search_top.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 16px;
  }
}
.btn-img {
  cursor: pointer;
}
</style>