Location>code7788 >text

Classic front-end + back-end + table header + table body of the development of practical reference simple template [Collection

Popularity：264 ℃/2024-09-19 11:41:04

Front-end part (Vue 3 + Element Plus)

1. Modifications(List of master production schedules)

a. Adding a query form

Add a query form to the template with inputs for product part number, name, specification, and month and year.

<template>
  <div>
    <!-- Inquiry Form -->
    <el-form :inline="true" :model="filters" class="demo-form-inline">
      <el-form-item label="Product number">
        <el-input v-model="filters.bo_no" placeholder="Please enter the product number."></el-input>
      </el-form-item>
      <el-form-item label="Name of the product">
        <el-input v-model="filters.item_name" placeholder="Please enter the name of the product."></el-input>
      </el-form-item>
      <el-form-item label="Specification">
        <el-input v-model="filters.item_spec" placeholder="Please enter specifications."></el-input>
      </el-form-item>
      <el-form-item label="Years and months">
        <el-date-picker
          v-model="filters.mps_ym"
          type="month"
          placeholder="Select year and month"
          format="yyyy-MM"
          value-format="yyyy-MM"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchMpsList">consult (a document etc)</el-button>
        <el-button @click="resetFilters">reprovision</el-button>
      </el-form-item>
    </el-form>

    <!-- Production schedule list -->
    <el-table :data="mpsList" style="width: 100%" v-loading="loading">
      <el-table-column prop="mps_no" label="Single number." 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="Time of document" width="180" />
      <el-table-column prop="fa_no_name" label="Factory Farewell" width="180" />
      <el-table-column prop="bo_no" label="Product number" width="180" />
      <el-table-column prop="bo_no_name" label="Name of the product" width="180" />
      <el-table-column prop="bo_no_spec" label="Specification" width="180" />
      <el-table-column prop="mps_ym" label="Years and months" width="100" />
      <el-table-column prop="mps_qty" label="Quantity" width="100" />
    </el-table>

    <!-- tab window (in a web browser etc) -->
    <el-pagination
      v-if=""
      background
      :current-page="page"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handlePageChange"
    />

    <!-- Details dialog -->
    <el-dialog :="showDetails" width="80%">
      <template #header>
        <h3>Master production schedule details</h3>
      </template>
      <MPS002HDetail :mps_no="selectedMpsNo" />
    </el-dialog>
  </div>
</template>

b. Modification of the script section

existsetup function, add thefilters data and modify thefetchMpsList function to include query parameters.

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

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 () => {
       = true;
      try {
        const params = {
          page: ,
          page_size: ,
          bo_no: .bo_no,
          item_name: .item_name,
          item_spec: .item_spec,
          mps_ym: .mps_ym,
        };
        const response = await getMPS002(params);
         = ;
         = ;
      } catch (error) {
        ('Error fetching MPS002 list:', error);
      } finally {
         = false;
      }
    };

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

    const showMpsDetails = (mps_no) => {
       = mps_no;
       = true;
    };

    const handlePageChange = (newPage) => {
       = newPage;
      fetchMpsList();
    };

    onMounted(fetchMpsList);

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

2. Modifications(itemized list of material requirements)

a. Adding a query form

<template>
  <div>
    <!-- Inquiry Form -->
    <el-form :inline="true" :model="filters" class="demo-form-inline">
      <el-form-item label="Material number.">
        <el-input v-model="filters.item_no" placeholder="Please enter the material number."></el-input>
      </el-form-item>
      <el-form-item label="Name of the product">
        <el-input v-model="filters.item_name" placeholder="Please enter the name of the product."></el-input>
      </el-form-item>
      <el-form-item label="Specification">
        <el-input v-model="filters.item_spec" placeholder="Please enter specifications."></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchMpsD1List">consult (a document etc)</el-button>
        <el-button @click="resetFilters">reprovision</el-button>
      </el-form-item>
    </el-form>

    <!-- Material Requirements Detailed List -->
    <el-table :data="mpsD1List" style="width: 100%" v-loading="loading">
      <el-table-column prop="item_no" label="Material number." width="180" />
      <el-table-column prop="item_name" label="Name of the product" width="180" />
      <el-table-column prop="item_spec" label="Specification" width="180" />
      <el-table-column prop="item_qty" label="Number of requirements" width="180" />
      <!-- Add more columns -->
    </el-table>

    <!-- tab window (in a web browser etc) -->
    <el-pagination
      v-if=""
      background
      :current-page="page"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handlePageChange"
    />
  </div>
</template>

b. Modification of the script section

<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 () => {
       = true;
      try {
        const params = {
          page: ,
          page_size: ,
          item_no: .item_no,
          item_name: .item_name,
          item_spec: .item_spec,
        };
        const response = await getMPS002D1(params);
         = ;
         = ;
      } catch (error) {
        ('Error fetching MPS002D1 list:', error);
      } finally {
         = false;
      }
    };

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

    const handlePageChange = (newPage) => {
       = newPage;
      fetchMpsD1List();
    };

    onMounted(fetchMpsD1List);

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

Backend component (Django REST Framework)

In order to support the query functionality on the front-end, you need to add filtering functionality to the view on the back-end.

1. ModificationsMPS002HModel views

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

class MPS002HViewSet():
    queryset = ().order_by('-mps_date')
    serializer_class = MPS002HSerializer
    filter_backends = [DjangoFilterBackend, ]
    filterset_fields = ['mps_ym']
    search_fields = ['bo_no__item_no', 'bo_no__item_name', 'bo_no__item_spec']

clarification

  • filter_backends: UseDjangoFilterBackend cap (a poem)SearchFilterThe search can be done by both exact filtering and fuzzy searching.
  • filterset_fields: Fields for precise filtering, here includingmps_ym。
  • search_fields: Fuzzy searched fields, including the associatedbo_no(product code)item_no、item_name、item_spec。

2. ModificationsMPS002D1Model views

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

class MPS002D1ViewSet():
    queryset = ()
    serializer_class = MPS002D1Serializer
    filter_backends = [DjangoFilterBackend, ]
    search_fields = ['item_no__item_no', 'item_no__item_name', 'item_no__item_spec']

clarification

  • search_fields: For material requirement details, it can be based onitem_no(material number),item_name(name of product),item_spec(specification) for fuzzy search.

3. Installation and configurationdjango-filter

If not already installeddjango-filter, needs to be installed first:

pip install django-filter

beginning of Add in:

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

Updating the serializer

Make sure your serializer contains the necessary fields so that the front-end can receive the data correctly.

MPS002HSerializer

from rest_framework import serializers
from .models import MPS002HModel

class MPS002HSerializer():
    fa_no_name = (source='fa_no.fa_name', read_only=True)
    bo_no_name = (source='bo_no.item_name', read_only=True)
    bo_no_spec = (source='bo_no.item_spec', read_only=True)
    bo_no = (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():
    item_name = (source='item_no.item_name', read_only=True)
    item_spec = (source='item_no.item_spec', read_only=True)
    item_no = (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']

Updating API Requests

1. Update front-end API calls

In your API request file, make sure that the query parameters are passed correctly.

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,
  });
}

summarize

With the above steps, we have achieved:

  • forward part of sth.: inMPS002HModel respond in singingMPS002D1Model The query form is added to the list page of the list, which allows you to filter based on the specified fields and pass the query criteria to the backend.

  • back end: In a Django REST Framework view, use thedjango-filter respond in singingSearchFilter Exact filters and fuzzy searches on specified fields are implemented.

  • serializer: Updated the serializer to include information about associated fields, such as product name and specifications, when returning data.

  • API Requests: Ensure that query parameters are correctly sent to the backend via front-end API requests.

In this way, the user can query the master production schedule list on the front-end interface according to the product number, name, specification and year and month, and can also filter the material requirement detail list according to the number, name and specification.

<Previous Next>