kd-aiot-frontend-eom/src/views/purchasingManage/purchaseNeedManage/components/product-search.vue

<!-- 搜索表单 -->
<template>
    <el-form
      size="small"
      label-width="60px"
      class="ele-form-search"
      @keyup.enter.native="search"
      @submit.native.prevent
    >
      <el-row :gutter="10">

        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="编码">
            <el-input
              clearable
              size="small"
              v-model="where.code"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="名称">
            <el-input
              clearable
              size="small"
              v-model="where.name"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="型号">
            <el-input
              clearable
              size="small"
              v-model="where.modelType"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="search"
            >
              查询
            </el-button>

            <el-button
              @click="reset"
              icon="el-icon-refresh"
              class="ele-btn-icon"
              size="medium"
              >重置</el-button
            >

            <slot></slot>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="牌号">
            <el-input
              clearable
              size="small"
              v-model="where.brandNum"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </template>

  <script>
    export default {
      data() {
        // 默认表单数据
        const defaultWhere = {
          name: '',
          code: '',
          brandNum: '',
          modelType: ''
        };
        return {
          defaultWhere,
          // 表单数据
          where: { ...defaultWhere },
          loading:false
        };
      },
      computed: {
        // 是否开启响应式布局
        styleResponsive() {
          return this.$store.state.theme.styleResponsive;
        }
      },
      methods: {
        /* 搜索 */
        search() {
          this.$emit('search', this.where);
        },
        /*  重置 */
        reset() {
          this.where = { ...this.defaultWhere };
          this.search();
        },

      }
    };
  </script>