yudao-init/src/views/report/completionStatusIntrBM/components/bmSearchBarComplete.vue

<!-- 只使用于指标完成情况对标页面 -->
<template>
  <el-form :model="form" :inline="true" ref="bmSearchBarForm" class="blueTip">
    <el-form-item label="时间维度" prop="type">
      <el-select
        size="small"
        v-model="form.type"
        placeholder="请选择"
        style="width: 100px"
      >
        <el-option
          v-for="item in typeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-show="form.type === 0" label="时间" prop="dayTime">
      <el-date-picker
        size="small"
        :clearable="false"
        v-model="form.dayTime"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        style="width: 150px"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item v-show="form.type === 1" label="时间" prop="weekTime">
      <el-date-picker
        v-model="form.weekTime"
        :clearable="false"
        type="week"
        format="yyyy-MM-dd"
        placeholder="选择周"
        value-format="yyyy-MM-dd"
        style="width: 150px"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item v-show="form.type === 2" label="时间" prop="monthTime">
      <el-date-picker
        v-model="form.monthTime"
        :clearable="false"
        type="month"
        placeholder="选择月份"
        value-format="yyyy-MM-dd"
        style="width: 150px"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item v-show="form.type === 3" label="时间" prop="yearTime">
      <el-date-picker
        v-model="form.yearTime"
        :clearable="false"
        type="year"
        placeholder="选择年份"
        value-format="yyyy-MM-dd"
        style="width: 150px"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="getDataList('search')"
        >查询</el-button
      >
      <el-divider direction="vertical"></el-divider>
      <el-button
        type="primary"
        size="small"
        plain
        @click="getDataList('export')"
        >导出</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script>
import moment from "moment";
export default {
  name: "bmSearchBarComplete",
  data() {
    return {
      form: {
        type: 2,
        dayTime: moment().format("yyyy-MM-DD"),
        weekTime: moment().format("yyyy-MM-DD"),
        monthTime: moment().format("yyyy-MM-DD"),
        yearTime: moment().format("yyyy-MM-DD"),
      },
      typeList: [
        { id: 0, name: "日" },
        { id: 1, name: "周" },
        { id: 2, name: "月" },
        { id: 3, name: "年" },
      ],
    };
  },
  methods: {
    getDataList(val) {
      let params = {};
      switch (this.form.type) {
        case 0:
          params.startDate = this.form.dayTime;
          break;
        case 1:
          params.startDate = this.form.weekTime;
          break;
        case 2:
          params.startDate = this.form.monthTime;
          break;
        case 3:
          params.startDate = this.form.yearTime;
          break;
        default:
          break;
      }
      params.type = this.form.type;
      if (!params.startDate) {
        this.$message.warning("时间不能为空");
        return;
      }
      if (val === "search") {
        this.$emit("getSearch", params);
      } else {
        this.$emit("handleExport", params);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-divider--vertical {
  height: 24px;
}
.blueTip::before {
  display: inline-block;
  content: "";
  width: 4px;
  height: 18px;
  background: #0b58ff;
  border-radius: 1px;
  margin-right: 8px;
  margin-top: 8px;
}
</style>