经典前端+后端+表头+表身的开发实战参考简易模板【珍藏】-6ren

经典前端+后端+表头+表身的开发实战参考简易模板【珍藏】

转载作者：撒哈拉更新时间：2024-09-13 16:21:11

前端部分（Vue 3 + Element Plus）

1. 修改 `MPS002HList.vue`（主生产计划列表）

a. 添加查询表单

在模板中添加查询表单，包含产品料号、品名、规格和年月的输入项.

<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.mps_no)">
            {{ 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 :visible.sync="showDetails" width="80%">
      <template #header>
        <h3>主生产计划详情</h3>
      </template>
      <MPS002HDetail :mps_no="selectedMpsNo" />
    </el-dialog>
  </div>
</template>

b. 修改脚本部分

在 setup 函数中，添加 filters 数据，并修改 fetchMpsList 函数以包含查询参数.

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

export default {
  components: { MPS002HDetail },
  setup() {
    const mpsList = ref([]);
    const page = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const loading = ref(false);
    const showDetails = ref(false);
    const selectedMpsNo = 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 = (mps_no) => {
      selectedMpsNo.value = mps_no;
      showDetails.value = true;
    };

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

    onMounted(fetchMpsList);

    return {
      mpsList,
      page,
      pageSize,
      total,
      loading,
      showDetails,
      selectedMpsNo,
      filters,
      fetchMpsList,
      resetFilters,
      showMpsDetails,
      handlePageChange,
    };
  },
};
</script>

2. 修改 `MPS002D1List.vue`（物料需求明细列表）

a. 添加查询表单

<template>
  <div>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="filters" class="demo-form-inline">
      <el-form-item label="料号">
        <el-input v-model="filters.item_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>
        <el-button type="primary" @click="fetchMpsD1List">查询</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 物料需求明细列表 -->
    <el-table :data="mpsD1List" style="width: 100%" v-loading="loading">
      <el-table-column prop="item_no" label="料号" width="180" />
      <el-table-column prop="item_name" label="品名" width="180" />
      <el-table-column prop="item_spec" label="规格" width="180" />
      <el-table-column prop="item_qty" label="需求数量" width="180" />
      <!-- 添加更多列 -->
    </el-table>

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

b. 修改脚本部分。

<script>
import { ref, onMounted } from 'vue';
import { getMPS002D1 } from '@/api/mpsApp/MPS002D1Model';

export default {
  setup() {
    const mpsD1List = ref([]);
    const page = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const loading = ref(false);

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

    const fetchMpsD1List = async () => {
      loading.value = true;
      try {
        const params = {
          page: page.value,
          page_size: pageSize.value,
          item_no: filters.value.item_no,
          item_name: filters.value.item_name,
          item_spec: filters.value.item_spec,
        };
        const response = await getMPS002D1(params);
        mpsD1List.value = response.data.results;
        total.value = response.data.count;
      } catch (error) {
        console.error('Error fetching MPS002D1 list:', error);
      } finally {
        loading.value = false;
      }
    };

    const resetFilters = () => {
      filters.value = {
        item_no: '',
        item_name: '',
        item_spec: '',
      };
      fetchMpsD1List();
    };

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

    onMounted(fetchMpsD1List);

    return {
      mpsD1List,
      page,
      pageSize,
      total,
      loading,
      filters,
      fetchMpsD1List,
      resetFilters,
      handlePageChange,
    };
  },
};
</script>

后端部分（Django REST Framework）

为了支持前端的查询功能，需要在后端的视图中添加筛选功能.

1. 修改 `MPS002HModel` 的视图

from rest_framework import viewsets, filters
from django_filters.rest_framework import DjangoFilterBackend
from .models import MPS002HModel
from .serializers import MPS002HSerializer

class MPS002HViewSet(viewsets.ModelViewSet):
    queryset = MPS002HModel.objects.all().order_by('-mps_date')
    serializer_class = MPS002HSerializer
    filter_backends = [DjangoFilterBackend, filters.SearchFilter]
    filterset_fields = ['mps_ym']
    search_fields = ['bo_no__item_no', 'bo_no__item_name', 'bo_no__item_spec']

说明

filter_backends：使用 DjangoFilterBackend 和 SearchFilter，可以实现精确过滤和模糊搜索。
filterset_fields：精确过滤的字段，这里包括 mps_ym。
search_fields：模糊搜索的字段，包括关联的 bo_no（产品料号）的 item_no、item_name、item_spec。

2. 修改 `MPS002D1Model` 的视图

from rest_framework import viewsets, filters
from django_filters.rest_framework import DjangoFilterBackend
from .models import MPS002D1Model
from .serializers import MPS002D1Serializer

class MPS002D1ViewSet(viewsets.ModelViewSet):
    queryset = MPS002D1Model.objects.all()
    serializer_class = MPS002D1Serializer
    filter_backends = [DjangoFilterBackend, filters.SearchFilter]
    search_fields = ['item_no__item_no', 'item_no__item_name', 'item_no__item_spec']

说明

search_fields：对于物料需求明细，可以根据 item_no（料号）、item_name（品名）、item_spec（规格）进行模糊搜索。

3. 安装和配置 `django-filter`

如果还没有安装 django-filter，需要先安装:

pip install django-filter

并在 settings.py 中添加:

REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': ['django_filters.rest_framework.DjangoFilterBackend']
}

更新序列化器

确保您的序列化器包含必要的字段，以便前端能够正确接收数据.

`MPS002HSerializer`

from rest_framework import serializers
from .models import MPS002HModel

class MPS002HSerializer(serializers.ModelSerializer):
    fa_no_name = serializers.CharField(source='fa_no.fa_name', read_only=True)
    bo_no_name = serializers.CharField(source='bo_no.item_name', read_only=True)
    bo_no_spec = serializers.CharField(source='bo_no.item_spec', read_only=True)
    bo_no = serializers.CharField(source='bo_no.item_no', read_only=True)

    class Meta:
        model = MPS002HModel
        fields = ['id', 'mps_no', 'mps_date', 'fa_no', 'fa_no_name', 'bo_no', 'bo_no_name', 'bo_no_spec', 'mps_ym', 'mps_qty']

MPS002D1Serializer 。

from rest_framework import serializers
from .models import MPS002D1Model

class MPS002D1Serializer(serializers.ModelSerializer):
    item_name = serializers.CharField(source='item_no.item_name', read_only=True)
    item_spec = serializers.CharField(source='item_no.item_spec', read_only=True)
    item_no = serializers.CharField(source='item_no.item_no', read_only=True)

    class Meta:
        model = MPS002D1Model
        fields = ['id', 'mps_no', 'item_no', 'item_name', 'item_spec', 'item_qty', 'rmk']

更新 API 请求

1. 更新前端 API 调用

在您的 API 请求文件中，确保查询参数能够正确传递.

`MPS002HModel` API

import request from '@/utils/request';
const baseUrl = '/mpsApp/MPS002HModel/';

export function getMPS002(params) {
  return request({
    url: baseUrl,
    method: 'get',
    params,
  });
}

MPS002D1Model API 。

import request from '@/utils/request';
const baseUrl = '/mpsApp/MPS002D1Model/';

export function getMPS002D1(params) {
  return request({
    url: baseUrl,
    method: 'get',
    params,
  });
}

总结

通过上述步骤，我们实现了:

前端：在 MPS002HModel 和 MPS002D1Model 的列表页面中添加了查询表单，可以根据指定的字段进行筛选，并将查询条件传递给后端.
后端：在 Django REST Framework 的视图中，使用 django-filter 和 SearchFilter 实现了对指定字段的精确过滤和模糊搜索.
序列化器：更新了序列化器，以便在返回数据时包含关联字段的信息，如品名和规格.
API 请求：确保查询参数能够正确地通过前端 API 请求发送到后端.

这样，用户就可以在前端界面上根据产品料号、品名、规格和年月对主生产计划列表进行查询，也可以在物料需求明细列表中根据料号、品名、规格进行筛选.

最后此篇关于经典前端+后端+表头+表身的开发实战参考简易模板【珍藏】的文章就讲到这里了,如果你想了解更多关于经典前端+后端+表头+表身的开发实战参考简易模板【珍藏】的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：二分图最大权完美匹配

文章推荐：面试官：线程池遇到未处理的异常会崩溃吗？

文章推荐：学习高校课程-软件设计模式-OOP和UML类图OOP与Java（lec1）

文章推荐： ArgoWorkflow教程(四)---Workflow&日志归档

没有调整元素大小的 jquery 端
我有一个使用 css 列的下拉菜单，当我使用 jquery slide() 时，它会调整下拉框的大小，并重排内容直到达到完整高度。这是一个工作示例 https://codepen.io/peterg
c# - WPF ScrollViewer 端
我有一个带有嵌套 ScrollViewer 的 Expander，如下所示: 代码(简化版)
php - Javascript 端 RequestHandler
我想在所有 ajax 调用之后调用一些 javascript 函数。我知道如何调用每个单独的 ajax 调用中的函数，如下所示: function xyz() { if (window.XMLHttp
android - 如何通过多部分实体方法将值从应用程序传递到 api 端？
我想将值从应用程序端传递到 api。在此 api 调用中传递图像、名字、电子邮件、电话和位置。在 Debug模式下，检查值不会被传递。代码下方 File file = null;
Django reportlab 插入分页符 html 端
我正在尝试在使用reportlab生成的pdf中的表格后插入分页符，我正在使用以下函数生成pdf: def render_to_pdf(template_src, context_dict): t
osx-mavericks - 终止连接 CBPeripheralManager 端
CBPeripheralManager 是否有推荐的方法来终止连接。到目前为止我发现的最好的方法就是干脆不响应动态值，然后 BLE 堆栈似乎关闭了连接，但这似乎很粗糙。一定有更好的方法吗？最佳答案
jQuery getJSON 不适用于 REST 端
我的 API 的 REST 端位于以下地址:http://test.jll.aplikacje-dedykowane.pl/rest/warehouse/all 。现在，我尝试返回在此页面准备的 JS
android - C++ 信号处理程序无法通知 Java 端
我有以下 CPP 代码。我想做的是，当我的 native 端发生错误时，我会通知 Java 该错误。我用了How can I catch SIGSEGV (segmentation fault) an
django - 你如何限制列表对象模板端，而不是 View 端
限制对象的方法之一是像这样给函数添加限制 def ten_objects(): obj = Model.objects.all()[0:10] # limit to 10 retur
java - Web 端、移动开发、独立应用程序该走哪条路？
我目前在电信公司实习，这是一个专业，也是本科生。我有很多选择。据我所知，我知道独立应用程序端的 c、c++、c#、java 语言，在移动端我尝试进入 android 世界，也知道 php、mysql、
html - CSS中border-bottom的 flex 端
我想让我的边框底部看起来像这样: 有一个 flex 的末端。目前它看起来像这样: 我尝试使用的 CSS 是 border-bottom-right-radius: 10px;。代码如下所示:
显示错误的 Flutter 项目的 Android 端
我有一个 Flutter 项目，突然间，据我所知，我没有做任何特别的事情..Android 端开始显示错误，我完全迷路了，我完全不知道哪里出了问题，也不知道为什么会这样。这就是我打开 android
android - 传递自定义对象的数组列表以从 android 响应 native 端
我有一个自定义对象列表 (List) 。我需要将此数据发送到 React Native 端以显示在平面列表中。我该怎么做？这个列表出现在类 NativeToReact(reactContext:Re
java - 为什么这个 JNI 程序不将浮点值复制回 Java 端？
我有这个代码: #if defined(NOT_STANDALONE) JNIEXPORT void JNICALL sumTraces (JNIEnv* env, jclass caller,
python - 如何自定义 Django 模型的 python 端？
我有一个定义一对多模型关系的 Django 应用程序。模型如下所示: from django.db import models # Create your models here. class Str
javascript - 单击 iframe 中的某些链接时如何更新 iframe 端？
我有以下代码，它根据 IFrame 内容的大小调整 IFrame 的大小: function setIframeHeight(id) {
javascript - 如何创建自定义过滤器 angularjs javascript Controller 端？
如何创建自定义过滤器 angularjs javascript Controller 端？我想通过 SegmentId 在名为段的数组中搜索，以创建过滤器，该过滤器通过 SegmentId 在段数组搜
java - 无法在 Netbeans 中查看 Jframe 端
我的代码在 netbeans 8.0.2 中我几乎尝试了所有方法，但没有结果。请帮助我。如何在 netbeans 中显示它？最佳答案您只需单击源包(源文件)，它就会显示您的项目文件。关于java
c++ - 将结构与 std140 对齐，CPU 端
我想这是纯 C++ 问题和 OpenGL 问题之间的一种交叉。我有一个统一的缓冲区，并在其中分配 sizeof(ShaderData) 字节的空间。我在着色器的 GPU 端使用 std140 布局。
hadoop - 理解在 Hadoop 中合并到 reduce 端
我对 Hadoop 中 reduce 端的文件合并过程的理解有问题，因为它在“Hadoop:权威指南”(Tom White)中有所描述。引用它: When all the map outputs ha

撒哈拉

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城