报表2页面

src/views/report/completionStatusIntrBM/components/bmSearchBarComplete.vue

@@ -0,0 +1,138 @@
+<!-- 只使用于指标完成情况对标页面 -->
+<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
+        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"
+        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"
+        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"
+        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"
+        >查询</el-button
+      >
+      <el-divider direction="vertical"></el-divider>
+      <el-button type="primary" size="small" plain @click="handleExport"
+        >导出</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() {
+      console.log(this.form);
+      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;
+      this.$emit("getSearch", params);
+    },
+    handleExport() {
+      this.$emit("handleExport");
+    },
+  },
+};
+</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>