标准的vue3 elementplus格式,不用export default

<template>
  <div>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="filters" class="demo-form-inline">
      <el-form-item label="产品料号">
        <el-input v-model="filters.bo_no" placeholder="请输入产品料号"></el-input>
      </el-form-item>
      <el-form-item label="品名">
        <el-input v-model="filters.item_name" placeholder="请输入品名"></el-input>
      </el-form-item>
      <el-form-item label="规格">
        <el-input v-model="filters.item_spec" placeholder="请输入规格"></el-input>
      </el-form-item>
      <el-form-item label="年月">
        <el-date-picker
          v-model="filters.mps_ym"
          type="month"
          placeholder="选择年月"
          format="yyyy-MM"
          value-format="yyyy-MM"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchMpsList">查询</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 生产计划列表 -->
    <el-table :data="mpsList" style="width: 100%" v-loading="loading">
      <el-table-column prop="mps_no" label="单号" width="180">
        <template #default="{ row }">
          <el-button type="text" @click="showMpsDetails(row.id)">
            {{ row.mps_no }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="mps_date" label="单据时间" width="180"/>
      <el-table-column prop="fa_no_name" label="厂别" width="180"/>
      <el-table-column prop="bo_no" label="产品料号" width="180"/>
      <el-table-column prop="bo_no_name" label="品名" width="180"/>
      <el-table-column prop="bo_no_spec" label="规格" width="180"/>
      <el-table-column prop="mps_ym" label="年月" width="100"/>
      <el-table-column prop="mps_qty" label="数量" width="100"/>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-if="mpsList.length"
      background
      :current-page="page"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handlePageChange"
    />

    <!-- 详情对话框 -->
    <el-dialog v-model="showDetails" width="80%">
      <template #header>
        <h3>主生产计划详情</h3>
      </template>
      <MPS002HDetail :MPSHeadId="selectedMpsId" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getMPS002 } from '@/api/mpsApp/mps002/mps002';
import MPS002HDetail from './MPS002HDetail.vue';

const mpsList = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const showDetails = ref(false);
const selectedMpsId = ref(null);

const filters = ref({
  bo_no: '',
  item_name: '',
  item_spec: '',
  mps_ym: '',
});

const fetchMpsList = async () => {
  loading.value = true;
  try {
    const params = {
      page: page.value,
      page_size: pageSize.value,
      bo_no: filters.value.bo_no,
      item_name: filters.value.item_name,
      item_spec: filters.value.item_spec,
      mps_ym: filters.value.mps_ym,
    };
    const response = await getMPS002(params);
    mpsList.value = response.data.results;
    total.value = response.data.count;
  } catch (error) {
    console.error('Error fetching MPS002 list:', error);
  } finally {
    loading.value = false;
  }
};

const resetFilters = () => {
  filters.value = {
    bo_no: '',
    item_name: '',
    item_spec: '',
    mps_ym: '',
  };
  fetchMpsList();
};

const showMpsDetails = (id) => {
  selectedMpsId.value = id;
  showDetails.value = true;
};

const handlePageChange = (newPage) => {
  page.value = newPage;
  fetchMpsList();
};

onMounted(fetchMpsList);
</script>

 

细节：

1. <script setup>：使用 <script setup> 简化了组件结构，不再需要 export default，并且响应式变量和函数自动暴露到模板中。
2. 响应式数据：通过 ref 定义响应式数据，如 mpsList、page、filters 等。
3. 生命周期钩子：使用 onMounted 生命周期钩子在组件挂载时加载数据。
4. 函数：将表单查询、重置、分页等功能以函数形式定义，并通过模板中的事件绑定触发这些函数。