init

src/views/material-manage/report/components/search-bar.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-04-26 12:55:21
+ * @LastEditTime: 2021-05-25 16:41:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\material-manage\report\components\search-bar.vue
+-->
+<template>
+  <div class="container">
+    <span class="label-name">{{ $t('module.materialManager.report.Keyword') }}</span>
+    <el-input
+      v-model="key"
+      :placeholder="$t('module.materialManager.report.placeholderkeywords')"
+      :clearable="true"
+      :style="{
+        width: inputWidth + 'px',
+        maxWidth: '100%',
+        marginRight: '16px'
+      }"
+    />
+    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
+      {{ "btn.search" | i18nFilter }}
+    </el-button>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    lableName: {
+      type: String,
+      default: '关键字'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    inputWidth: {
+      type: Number,
+      default: 180
+    }
+  },
+  data() {
+    return {
+      key: '',
+      dts: ['', '']
+    }
+  },
+  methods: {
+    handleSearch() {
+      const param = {
+        key: this.key
+      }
+      this.$emit('on-search', param)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  padding: 4px 40px;
+  background-color: #eee;
+  .label-name {
+    margin-right: 8px;
+    font-size: 14px;
+  }
+}
+</style>