产量对标FTo

src/views/report/components/bmSearchBar.vue

@@ -0,0 +1,136 @@
+<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 === 1" label="时间" prop="dayTime">
+      <el-date-picker
+        size="small"
+        clearable
+        v-model="form.dayTime"
+        type="date"
+        placeholder="选择日期"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 2" label="时间" prop="weekTime">
+      <el-date-picker
+        v-model="form.weekTime"
+        type="week"
+        format="yyyy 第 WW 周"
+        placeholder="选择周"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 3" label="时间" prop="monthTime">
+      <el-date-picker
+        v-model="form.monthTime"
+        type="month"
+        placeholder="选择月份"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 4" label="时间" prop="yearTime">
+      <el-date-picker
+        v-model="form.yearTime"
+        type="year"
+        placeholder="选择年份"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item label="工厂" prop="factory">
+      <el-select
+        size="small"
+        multiple
+        v-model="form.factory"
+        placeholder="请选择"
+        style="width: 250px"
+      >
+        <el-option
+          v-for="item in factoryList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </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>
+export default {
+  name: "bmSearchBar",
+  data() {
+    return {
+      form: {
+        type: 1,
+        dayTime: "",
+        weekTime: "",
+        monthTime: "",
+        yearTime: "",
+        factory: "",
+      },
+      typeList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
+      factoryList: [
+        { id: 1, name: "瑞昌" },
+        { id: 2, name: "邯郸" },
+      ],
+    };
+  },
+  methods: {
+    getDataList() {
+      console.log(this.form);
+      this.$emit("getSearch", this.form);
+    },
+    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>