shuhi-ui/src/views/data/universities/components/universities-edit.vue

<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ paddingBottom: '8px' }">
    <ProSearch :columns="columns" v-model:form="form" ref="searchRef">
      <el-col :span="6" style="min-width: 160px">
        <el-button style="width: 80px" type="primary" plain @click="search"
          >查询</el-button
        >
        <el-button style="width: 80px" type="info" @click="reset"
          >重置</el-button
        >
      </el-col>
    </ProSearch>
  </ele-card>
</template>

<script setup>
  import { reactive, ref, defineEmits } from 'vue';
  import { useFormData } from '@/utils/use-form-data';
  import ProSearch from '@/components/CommonPage/ProSearch.vue';

  const emit = defineEmits(['search']);
  const columns = reactive([
    { tag: 'el-input', label: '书名', prop: 'bookName', span: 4 },
    { tag: 'el-input', label: '条码', prop: 'code', span: 4 },
    {
      tag: 'el-input',
      label: '作者',
      prop: 'senderAddress',
      span: 4
    },
    { tag: 'el-input', label: '出版社', prop: 'userName', span: 4 },
    {
      tag: 'el-select',
      label: '人工核实',
      prop: 'receivingWarehouse',
      span: 3
    },
    { tag: 'el-select', label: '是否套装', prop: 'allOrders', span: 3 },
    {
      tag: 'el-select',
      label: '商品标记',
      prop: 'logisticsCompany',
      span: 3
    }
  ]);

  const initKeys = {};
  for (let i = 0; i < columns.length; i++) {
    initKeys[columns[i].prop] = '';
  }

  /** 表单数据 */
  const [form, resetFields] = useFormData({
    ...initKeys
  });

  const searchRef = ref(null);
  /** 搜索 */
  const search = () => {
    emit('search', { ...form });
  };

  /** 重置 */
  const reset = () => {
    resetFields();
    search();
  };
</script>