首页 > 其他分享 >经典前端+后端+表头+表身的开发实战参考简易模板【珍藏】

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

时间：2024-09-13 15:52:21浏览次数：12  
标签：const filters no 表头 表身 value item 模板 name

前端部分（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 请求发送到后端。

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

标签：const,filters,no,表头,表身,value,item,模板,name
From： https://www.cnblogs.com/beichengshiqiao/p/18412335

相关文章

  • 【可变参模板】基类参数包的展开
    一、基类参数包的展开1.1基类参数包的展开C++C++C++是一个支持多继承的语言，因此继承的类也可以是一个基类的......
  • 【可变参模板】可变参类模板
    可变参类模板也和可变参函数模板一样，允许模板定义含有0到多个（任意个）模板参数。可变参类模板参数包的展开方式有多种，以下介绍几种常见的方法。一、递归继承展开1.1类型模板参数包的展开首先先看下面的代码：//类型模板展开//泛化版本template<typename...Args>classmy......
  • PbootCMS模板安全设置与加固方法
    为了确保PbootCMS模板的安全性和稳定性，可以采取一系列的安全设置与加固措施。下面是一些具体的步骤和建议：1.权限设置目录权限：调整关键目录的权限，防止未经授权的写入操作。/apps：禁止写入权限(chmod0555)/config：允许读写权限(chmod0777)/core：禁止写入权限(chmod0555)......
  • PbootCms模板搭建网站，可能会遇到内页无法正常访问的情况
    当你遇到PbootCMS内页无法正常访问的问题时，关闭伪静态并转为兼容模式是一种简单有效的解决方案。以下是详细的步骤：步骤详解登录后台管理系统打开你的PbootCMS网站后台管理系统。使用管理员账号登录。进入设置页面在后台管理系统的左侧导航栏中找到“设置”选项，并点击......
  • PbootCMS模板发布文章显示的默认作者如何修改？
    PbootCMS模板中默认作者的修改可以通过以下步骤完成：1.修改默认作者名称登录后台：登录PbootCMS后台管理界面。点击右上角的作者名称：在后台右上角，点击当前显示的作者名称（如“格展网络”）。进入密码修改页面：在弹出的菜单中选择“密码修改”。修改作者名称：......
  • PbootCMS网站模板如何做好防护
    为了保护PbootCMS网站模板免受攻击和未经授权的访问，可以采取一系列措施来增强其安全性。以下是根据提供的信息整理的一些推荐做法：1.更改敏感文件夹名称更改data文件夹名称：将 data 文件夹重命名，例如改为 mubanbaba@data。修改 config/database.php 文件中相应的地......
  • PbootCMS模板禁止数字id方式访问栏目，如/1/
    在PbootCMS中，如果你希望禁止用户通过直接输入数字ID的方式访问栏目，比如通过URL /1/ 进行访问，可以采取以下几种策略来实现这一目标：1.修改URL规则1.1重写规则配置.htaccess文件：编辑网站根目录下的 .htaccess 文件，增加或修改URL重写规则，使得所有数字ID的访......
  • PbootCMS模板自动清理runtime缓存
    runtime目录的作用runtime 目录位于PbootCMS的安装目录下，主要用于存储系统运行时产生的临时文件和缓存文件。这些文件包括但不限于：缓存文件日志文件临时文件随着时间的推移，runtime 目录中的文件会逐渐增多，占用大量磁盘空间。当文件过多时，会造成系统性能下降，甚至出现一......
  • Pbootcms模板留言“提交成功”的提示语修改
    如果你想要修改PbootCMS模板中留言提交成功后的提示语，可以通过编辑相关控制器文件来实现。具体步骤如下：定位文件：找到 apps/home/controller/MessageController.php 文件。修改提示语：在该文件中找到处理留言提交成功的逻辑，并修改相应的提示语。具体步骤1.定位......
  • [模板题] - 208. 实现 Trie (前缀树)
    题目链接208.实现Trie(前缀树)思路模板题-Trie树题解链接官方题解关键点无时间复杂度\(O(\sum_{i}\#\text{word}_{i})\)空间复杂度\(O(\sum_{i}\#\text{word}_{i})\)代码实现：classTrie:def__init__(self):self.children=[N......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99