调整页面分页，添加校验

dy

2025-04-19 8cb11828de128c3a96521b7e998a181bb3c3cfb1

调整页面分页，添加校验

 src/api/basicData/materialManagement/materialManagement.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
import request from '@/utils/request'

// æŸ¥è¯¢ç‰©æ–™ç®¡ç†åˆ—表
export function listMaterialManagement(query) {
  return request({
    url: '/aps/materialManagement/list',
    method: 'get',
    params: query
  })
}

// æŸ¥è¯¢ç‰©æ–™ç®¡ç†è¯¦ç»†
export function getMaterialManagement(id) {
  return request({
    url: '/materialManagement/materialManagement/' + id,
    method: 'get'
  })
}

// æ–°å¢žç‰©æ–™ç®¡ç†
export function addMaterialManagement(data) {
  return request({
    url: '/materialManagement/materialManagement',
    method: 'post',
    data: data
  })
}

// ä¿®æ”¹ç‰©æ–™ç®¡ç†
export function updateMaterialManagement(data) {
  return request({
    url: '/materialManagement/materialManagement',
    method: 'put',
    data: data
  })
}

// åˆ é™¤ç‰©æ–™ç®¡ç†
export function delMaterialManagement(id) {
  return request({
    url: '/materialManagement/materialManagement/' + id,
    method: 'delete'
  })
}

 src/api/basicData/materialStorageManagement/materialStorageManagement.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
import request from '@/utils/request'

// æŸ¥è¯¢ç‰©æ–™åº“存管理列表
export function listMaterialStorageManagement(query) {
  return request({
    url: '/aps/materialStorageManagement/list',
    method: 'get',
    params: query
  })
}

// æŸ¥è¯¢ç‰©æ–™åº“存管理详细
export function getMaterialStorageManagement(id) {
  return request({
    url: '/materialStorageManagement/materialStorageManagement/' + id,
    method: 'get'
  })
}

// æ–°å¢žç‰©æ–™åº“存管理
export function addMaterialStorageManagement(data) {
  return request({
    url: '/materialStorageManagement/materialStorageManagement',
    method: 'post',
    data: data
  })
}

// ä¿®æ”¹ç‰©æ–™åº“存管理
export function updateMaterialStorageManagement(data) {
  return request({
    url: '/materialStorageManagement/materialStorageManagement',
    method: 'put',
    data: data
  })
}

// åˆ é™¤ç‰©æ–™åº“存管理
export function delMaterialStorageManagement(id) {
  return request({
    url: '/materialStorageManagement/materialStorageManagement/' + id,
    method: 'delete'
  })
}

 src/api/basicData/plant.js

@@ -42,3 +42,13 @@
    method: 'delete'
  })
}


// æŸ¥è¯¢å·¥åŽ‚管理列表
export function listAll_plant(query) {
  return request({
    url: '/aps/aps_plant/listAll',
    method: 'get',
    params: query
  })
}

 src/api/basicData/shop.js

@@ -42,3 +42,12 @@
    method: 'delete'
  })
}

// æŸ¥è¯¢è½¦é—´åˆ—表
export function listAll_shop(query) {
  return request({
    url: '/aps/aps_shop/listAll',
    method: 'get',
    params: query
  })
}

 src/components/HxlhTable/index.vue

@@ -139,18 +139,18 @@
    return []
    }
},
 expandConfig: {
    type: Object,
    default: () => {
      return {lazy: false}
    }
  },
  subGridOptions: {
    type:Object,
    default :()=>{
      return {}
    }
expandConfig: {
  type: Object,
  default: () => {
    return {lazy: false}
  }
},
subGridOptions: {
  type:Object,
  default :()=>{
    return {}
  }
}
})


@@ -230,6 +230,24 @@
// å®šä¹‰ footData è®¡ç®—属性
const footData = computed(() => props.mxTableFootData);

/* const data = computed(() => {
  if (!props.page) {
    return;
  }
  const total = props.page.total; 
  const currentPage = tablePage.value.currentPage;
  const pageSize = tablePage.value.pageSize;
  let start = (currentPage - 1) * pageSize;
  let end = start + pageSize;
  if (end > total) {
    end = total;
  }
  const tableData = [];
  for (let i = start; i < end; i++) {
    tableData.push(props.data[i]);
  }
  return tableData;
}); */
</script>

<style lang="scss">

 src/views/basicData/apsPlant/index.vue

@@ -43,32 +43,21 @@
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="aps_plantList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="工厂名称" align="center" prop="plantName" />
      <el-table-column label="工厂编码" align="center" prop="plantCode" />
      <el-table-column label="启用状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="aps_plant_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['plant:edit']">修改</el-button>
<!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['aps_plant:aps_plant:remove']">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <HxlhTable
        style="width: 100%"
        :columns="columns"
        :data="aps_plantList"
        :loading="loading"
        :height="height"
        :page="page"
        @changePageNo="changePageNo"
        @changePageSize="changePageSize"
        @on-checkbox="handleCheckboxChange"
    >
      <template #buttons="{row}">
        <vxe-button mode="text" @click="handleUpdate(row)" v-hasPermi="['plant:edit']" >编辑</vxe-button>
      </template>
    </HxlhTable>

    <!-- æ·»åŠ æˆ–修改工厂管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -102,10 +91,14 @@

<script setup name="Aps_plant">
import { listAps_plant, getAps_plant, delAps_plant, addAps_plant, updateAps_plant } from "@/api/basicData/plant";
import HxlhTable from '@/components/HxlhTable'

const { proxy } = getCurrentInstance();
const { aps_plant_status } = proxy.useDict('aps_plant_status');

const height = ref(document.documentElement.clientHeight - 170 + "px;");
const plantNameRules = ref(null);
const plantCodeRules = ref(null);
const dataForm = ref();
const aps_plantList = ref([]);
const open = ref(false);
const loading = ref(true);
@@ -128,9 +121,53 @@
  rules: {
    plantName: [
      { required: true, message: "工厂名称不能为空", trigger: "blur" },
      {
        validator: async (rule, value, callback) => {
          if (!value) {
            return callback();
          }
          try {
            if(value === plantNameRules.value){
              callback();
            }else{
              const isExists = await checkPlantNameExists(value);
              if (isExists) {
                return callback(new Error('该工厂名称已存在，请更换'));
              } else {
                callback();
              }
            }
          } catch (error) {
            return callback(new Error('校验用户名时发生错误，请稍后重试'));
          }
        },
        trigger: 'blur'
      }
    ],
    plantCode: [
      { required: true, message: "工厂编码不能为空", trigger: "blur" },
      {
        validator: async (rule, value, callback) => {
          if (!value) {
            return callback();
          }
          try {
            if(value === plantCodeRules.value){
              callback();
            }else{
              const isExists = await checkPlantCodeExists(value);
              if (isExists) {
                return callback(new Error('该工厂编码已存在，请更换'));
              } else {
                callback();
              }
            }
          } catch (error) {
            return callback(new Error('校验用户名时发生错误，请稍后重试'));
          }
        },
        trigger: 'blur'
      }
    ],
    status: [
      { required: true, message: "启用状态不能为空", trigger: "blur" },
@@ -140,12 +177,46 @@

const { queryParams, form, rules } = toRefs(data);

// åˆ†é¡µå±žæ€§
const page = ref({
  total: 0,
  current: 1,
  size: 10
});

// è¡¨æ ¼é…ç½® 
const columns = ref([
  { type: 'checkbox', width: 60, align:"center"},
  { type: 'seq', title: '序号', width: 60 },
  {
    title: '工厂名称',
    field: 'plantName',
  },
  {
    title: '工厂编码',
    field: 'plantCode',
  },
  {
    title: '启用状态',
    field: 'status',
  },
  {
    title: '创建者',
    field: 'createBy',
  },
  {
    title: '创建时间',
    field: 'createTime',
  },
  { title: '操作', width: 100, fixed:"right", slots: { default: 'buttons' } }
]);

/** æŸ¥è¯¢å·¥åŽ‚管理列表 */
function getList() {
  loading.value = true;
  listAps_plant(queryParams.value).then(response => {
    aps_plantList.value = response.rows;
    total.value = response.total;
    page.value.total = response.total;
    loading.value = false;
  });
}
@@ -169,6 +240,8 @@
    updateTime: null
  };
  proxy.resetForm("aps_plantRef");
  plantNameRules.value = null;
  plantCodeRules.value = null;
}

/** æœç´¢æŒ‰é’®æ“ä½œ */
@@ -204,15 +277,18 @@
  const _id = row.id || ids.value
  disabled.value = true;
  getAps_plant(_id).then(response => {
    dataForm.value = response.data;
    form.value = response.data;
    open.value = true;
    title.value = "修改工厂管理";
    plantNameRules.value = form.value.plantName;
    plantCodeRules.value = form.value.plantCode;
  });
}

/** æäº¤æŒ‰é’® */
function submitForm() {
  proxy.$refs["aps_plantRef"].validate(valid => {
const submitForm = async () => {
  await proxy.$refs["aps_plantRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateAps_plant(form.value).then(response => {
@@ -249,5 +325,57 @@
  }, `aps_plant_${new Date().getTime()}.xlsx`)
}

/** æ£€æŸ¥å·¥åŽ‚名字重复 */
const checkPlantNameExists = async (value) => {
  return new Promise((resolve) => {
    queryParams.value = {};
    queryParams.value.plantName = value;
    listAps_plant(queryParams.value).then(response => {
      if(response.total === 0){
        resolve(false);
      }else{
        resolve(true);
      }
    });
    queryParams.value = {};
  });
};

/** æ£€æŸ¥å·¥åŽ‚编码重复 */
const checkPlantCodeExists = async (value) => {
  return new Promise((resolve) => {
    queryParams.value = {};
    queryParams.value.plantCode = value;
    listAps_plant(queryParams.value).then(response => {
      if(response.total === 0){
        resolve(false);
      }else{
        resolve(true);
      }
    });
    queryParams.value = {};
  });
};

function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
  getList();
}

function changePageSize(pageSize) {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = pageSize;
  getList();
}

// å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
const handleCheckboxChange = (data) => {
  ids.value = data.records.map(item => item.id);
  single.value = data.records.length != 1;
  multiple.value = !data.records.length;
};

getList();
</script>

 src/views/basicData/apsShop/index.vue

@@ -34,41 +34,31 @@
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="aps_shopList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="车间名称" align="center" prop="shopName" />
      <el-table-column label="车间代码" align="center" prop="shopCode" />
      <el-table-column label="工厂代码" align="center" prop="plantCode" />
      <el-table-column label="启用状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="aps_plant_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['shop:edit']">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <HxlhTable
        style="width: 100%"
        :columns="columns"
        :data="aps_shopList"
        :loading="loading"
        :height="height"
        :page="page"
        @changePageNo="changePageNo"
        @changePageSize="changePageSize"
        @on-checkbox="handleCheckboxChange"
    >
      <template #buttons="{row}">
        <vxe-button mode="text" @click="handleUpdate(row)" v-hasPermi="['plant:edit']" >编辑</vxe-button>
      </template>
    </HxlhTable>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- æ·»åŠ æˆ–修改车间对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="aps_shopRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="车间名称" prop="shopName">
          <el-input v-model="form.shopName" placeholder="请输入车间名称" />
          <el-input v-model="form.shopName" placeholder="请输入车间名称" ref="shopNameInputRef"/>
        </el-form-item>
        <el-form-item label="车间代码" prop="shopCode">
          <el-input v-model="form.shopCode" placeholder="请输入车间代码" :disabled=shopCodeDisabled  />
          <el-input v-model="form.shopCode" placeholder="请输入车间代码" :disabled=shopCodeDisabled ref="shopCodeInputRef" />

        </el-form-item>
        <el-form-item label="工厂编码" prop="plantCode">
@@ -107,10 +97,15 @@
<script setup name="Aps_shop">
import { listAps_shop, getAps_shop, delAps_shop, addAps_shop, updateAps_shop } from "@/api/basicData/shop";
import { listAps_plant } from "@/api/basicData/plant";
import { ref } from "vue";
import HxlhTable from '@/components/HxlhTable'

const { proxy } = getCurrentInstance();
const { aps_plant_status } = proxy.useDict('aps_plant_status');

const height = ref(document.documentElement.clientHeight - 170 + "px;");
const shopNameRules = ref(null);
const shopCodeRules = ref(null);
const plantCodeRules = ref(null);
const aps_shopList = ref([]);
const open = ref(false);
const loading = ref(true);
@@ -135,9 +130,53 @@
  rules: {
    shopName: [
      { required: true, message: "车间名称不能为空", trigger: "blur" },
      {
        validator: async (rule, value, callback) => {
          if (!value) {
            return callback();
          }
          try {
            if(value === shopNameRules.value && plantCodeRules.value === form.value.plantCode){
              callback();
            }else{
              const isExists = await checkShopNameExists(value);
              if (isExists) {
                return callback(new Error('车间名称已存在，请更换'));
              } else {
                callback();
              }
            }
          } catch (error) {
            return callback(new Error('校验用户名时发生错误，请稍后重试'));
          }
        },
        trigger: 'blur'
      }
    ],
    shopCode: [
      { required: true, message: "车间编码不能为空", trigger: "blur" },
      {
        validator: async (rule, value, callback) => {
          if (!value) {
            return callback();
          }
          try {
            if(form.value.shopCode){
              callback();
            }else{
              const isExists = await checkShopCodeExists(value);
              if (isExists) {
                return callback(new Error('该车间编码已存在，请更换'));
              } else {
                callback();
              }
            }
          } catch (error) {
            return callback(new Error('校验用户名时发生错误，请稍后重试'));
          }
        },
        trigger: 'blur'
      }
    ],
    plantCode: [
      { required: true, message: "工厂编码不能为空", trigger: "blur" },
@@ -150,12 +189,50 @@

const { queryParams, form, rules } = toRefs(data);

// åˆ†é¡µå±žæ€§
const page = ref({
  total: 0,
  current: 1,
  size: 10
});

// è¡¨æ ¼é…ç½® 
const columns = ref([
  { type: 'checkbox', width: 60, align:"center"},
  { type: 'seq', title: '序号', width: 60 },
  {
    title: '车间名称',
    field: 'shopName',
  },
  {
    title: '车间代码',
    field: 'shopCode',
  },
  {
    title: '工厂代码',
    field: 'plantCode',
  },
  {
    title: '启用状态',
    field: 'status',
  },
  {
    title: '创建者',
    field: 'createBy',
  },
  {
    title: '创建时间',
    field: 'createTime',
  },
  { title: '操作', width: 100, fixed:"right", slots: { default: 'buttons' } }
]);

/** æŸ¥è¯¢è½¦é—´åˆ—表 */
function getList() {
  loading.value = true;
  listAps_shop(queryParams.value).then(response => {
    aps_shopList.value = response.rows;
    total.value = response.total;
    page.value.total = response.total;
    loading.value = false;
  });
}
@@ -180,6 +257,9 @@
    updateTime: null
  };
  proxy.resetForm("aps_shopRef");
  shopNameRules.value = null;
  shopCodeRules.value = null;
  plantCodeRules.value = null;
}

/** æœç´¢æŒ‰é’®æ“ä½œ */
@@ -218,6 +298,9 @@
    form.value = response.data;
    open.value = true;
    title.value = "修改车间";
    shopNameRules.value = form.value.shopName;
    shopCodeRules.value = form.value.shopCode;
    plantCodeRules.value = form.value.plantCode;
  });
}

@@ -268,6 +351,91 @@
    loading.value = false;
  });
}

/** æ£€æŸ¥è½¦é—´åå­—重复 */
const checkShopNameExists = async (value) => {
  return new Promise((resolve) => {
    queryParams.value = {};
    queryParams.value.shopName = value;
    queryParams.value.plantCode = form.value.plantCode;
    listAps_shop(queryParams.value).then(response => {
      console.log(response);
      if(response.total === 0){
        resolve(false);
      }else{
        resolve(true);
      }
    });
    queryParams.value = {};
  });
};

/** æ£€æŸ¥è½¦é—´ç¼–码重复 */
const checkShopCodeExists = async (value) => {
  return new Promise((resolve) => {
    queryParams.value = {};
    queryParams.value.shopCode = value;
    queryParams.value.plantCode = form.value.plantCode;
    listAps_shop(queryParams.value).then(response => {
      if(response.total === 0){
        resolve(false);
      }else{
        resolve(true);
      }
    });
    queryParams.value = {};
  });
};

getPlantList();
getList();

const shopNameInputRef = ref(null);
const aps_shopRef = ref(null);

watch(() => form.value.shopName, (newValue, oldValue) => {
  nextTick(() => {
    if (newValue!== oldValue && proxy.$refs["aps_shopRef"] != null) {
      proxy.$refs["aps_shopRef"].validateField('shopCode');
    }
  });
});

watch(() => form.value.shopCode, (newValue, oldValue) => {
  nextTick(() => {
    if (newValue!== oldValue && proxy.$refs["aps_shopRef"] != null) {
      proxy.$refs["aps_shopRef"].validateField('shopName');
    }
  });
});

watch(() => form.value.plantCode, (newValue, oldValue) => {
    nextTick(() => {
      if (newValue!== oldValue && proxy.$refs["aps_shopRef"] != null) {
        proxy.$refs["aps_shopRef"].validateField('shopName');
        proxy.$refs["aps_shopRef"].validateField('shopCode');
      }
    });
});

function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
  getList();
}

function changePageSize(pageSize) {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = pageSize;
  getList();
}

// å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
const handleCheckboxChange = (data) => {
  ids.value = data.records.map(item => item.id);
  single.value = data.records.length != 1;
  multiple.value = !data.records.length;
};

</script>

 src/views/basicData/materialManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,372 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="料号" prop="itemNumber">
            <el-input
              v-model="queryParams.itemNumber"
              placeholder="请输入料号"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="18" style="text-align: right;">
          <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <HxlhTable
        style="width: 100%"
        :columns="columns"
        :data="materialManagementList"
        :loading="loading"
        :height="height"
        :page="page"
        @changePageNo="changePageNo"
        @changePageSize="changePageSize"
    >
    </HxlhTable>
    
  </div>
</template>

<script setup name="MaterialManagement">
import { listMaterialManagement, getMaterialManagement, delMaterialManagement, addMaterialManagement, updateMaterialManagement } from "@/api/basicData/materialManagement/materialManagement";
import HxlhTable from '@/components/HxlhTable'
import { listAll_plant } from "@/api/basicData/plant";
import { listAll_shop } from "@/api/basicData/shop";
import { status } from "nprogress";
import { onMounted } from "vue";
import axios from 'axios';

const { proxy } = getCurrentInstance();

const { aps_material_status } = proxy.useDict('aps_material_status');
const { aps_professional_affiliation } = proxy.useDict('aps_professional_affiliation');
const { aps_self_made } = proxy.useDict('aps_self_made');
const materialManagementList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const height = ref(document.documentElement.clientHeight - 230 + "px;")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    itemNumber: null,
  },
  rules: {
  }
});

// è¡¨æ ¼é…ç½® 
const columns = ref([
  { type: 'seq', title: '序号', width: 60 },
  {
    title: '料号',
    field: 'itemNumber',
    width: 150,
  },
  {
    title: '物料描述',
    field: 'materialDescription',
    width: 150,
  },
  {
    title: '物料状态',
    field: 'materialStatus',
    width: 150,
    formatter: (({ cellValue, row, column }) => {
      if (cellValue) {
        for(let i=0;i<aps_material_status.value.length;i++){

          if(cellValue===aps_material_status.value[i].value){
            return aps_material_status.value[i].label
          }
        }
      }
      return '';
    })
  },
  {
    title: '物料类型',
    field: 'materialType',
    width: 150,
  },
  {
    title: '专业归属',
    field: 'professionalAffiliation',
    width: 150,
    formatter: (({ cellValue, row, column }) => {
      if (cellValue) {
        for(let i=0;i<aps_professional_affiliation.value.length;i++){
          if(cellValue===aps_professional_affiliation.value[i].value){
            return aps_professional_affiliation.value[i].label
          }
        }
      }
      return '';
    })
  },
  {
    title: '图号',
    field: 'drawingNo',
    width: 150,
  },
  {
    title: '版本',
    field: 'versionNumber',
    width: 150,
  },
  {
    title: '最早可提前生产天数',
    field: 'advanceProductionDays',
    width: 150,
  },
  {
    title: '拆分批量',
    field: 'splitBatch',
    width: 100,
  },
  {
    title: '是否自制',
    field: 'selfMade',
    width: 80,
    formatter: (({ cellValue, row, column }) => {
      if (cellValue) {
        for(let i=0;i<aps_self_made.value.length;i++){
          if(cellValue===aps_self_made.value[i].value){
            return aps_self_made.value[i].label
          }
        }
      }
      return '';
    })
  },
  {
    title: '适用工厂',
    field: 'applicableFactories',
    width: 150,
    formatter: (({ cellValue, row, column }) => {
      if (cellValue) {
        console.log(plantList.value);
        for(let i=0;i<plantList.value.length;i++){
          if(cellValue===plantList.value[i].plantCode){
            return plantList.value[i].plantName
          }
        }
      }
      return '';
    })
  },
  {
    title: '适用车间',
    field: 'applicableWorkshop',
    width: 150,
    formatter: (({ cellValue, row, column }) => {
      if (cellValue) {
        console.log(apsShopList.value);
        for(let i=0;i<apsShopList.value.length;i++){
          if(cellValue===apsShopList.value[i].shopCode){
            return apsShopList.value[i].shopCode
          }
        }
      }
      return '';
    })
  },
  {
    title: '生效日期',
    field: 'effectiveDate',
    width: 100,
  },
  {
    title: '失效日期',
    field: 'expiringDate',
    width: 100,
  },
  {
    title: '集成日期',
    field: 'integrationDate',
    width: 100,
  },
]);

const { queryParams, form, rules } = toRefs(data);

const queryPlants = ref({status: 1});
const plantList = ref([]);
const queryApsShops = ref({status: 1});
const apsShopList = ref([]);

// åˆ†é¡µå±žæ€§
const page = ref({
  total: 0,
  current: 1,
  size: 10
});

/** æŸ¥è¯¢ç‰©æ–™ç®¡ç†åˆ—表 */
function getList() {
  loading.value = true;
  axios.all([
      /** æŸ¥è¯¢å·¥åŽ‚列表 */
      listAll_plant(queryPlants.value),
      /** æŸ¥è¯¢è½¦é—´åˆ—表 */
      listAll_shop(queryApsShops.value),
      listMaterialManagement(queryParams.value)
    ])
    .then(axios.spread((response1, response2, response3) => {
      plantList.value = response1.data;
      apsShopList.value = response2.data;
      materialManagementList.value = response3.rows;
      page.value.total = response3.total;
      loading.value = false;
    }))
    .catch(error => {
      console.error('请求出错:', error);
    });
}

// å–消按钮
function cancel() {
  open.value = false;
  reset();
}

// è¡¨å•é‡ç½®
function reset() {
  form.value = {
    id: null,
    itemNumber: null,
    materialDescription: null,
    materialStatus: null,
    materialType: null,
    professionalAffiliation: null,
    drawingNo: null,
    versionNumber: null,
    advanceProductionDays: null,
    splitBatch: null,
    selfMade: null,
    applicableFactories: null,
    applicableWorkshop: null,
    effectiveDate: null,
    expiringDate: null,
    integrationDate: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("materialManagementRef");
}

/** æœç´¢æŒ‰é’®æ“ä½œ */
function handleQuery() {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  getList();
}

/** é‡ç½®æŒ‰é’®æ“ä½œ */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** æ–°å¢žæŒ‰é’®æ“ä½œ */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加物料管理";
}

/** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getMaterialManagement(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改物料管理";
  });
}

/** æäº¤æŒ‰é’® */
function submitForm() {
  proxy.$refs["materialManagementRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateMaterialManagement(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addMaterialManagement(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** åˆ é™¤æŒ‰é’®æ“ä½œ */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除物料管理编号为"' + _ids + '"的数据项？').then(function() {
    return delMaterialManagement(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
function handleExport() {
  proxy.download('materialManagement/materialManagement/export', {
    ...queryParams.value
  }, `materialManagement_${new Date().getTime()}.xlsx`)
}

function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
  getList();
}

function changePageSize(pageSize) {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = pageSize;
  getList();
}

getList();
</script>

 src/views/basicData/materialStorageManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,249 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="料号" prop="itemNumber">
            <el-input
              v-model="queryParams.itemNumber"
              placeholder="请输入料号"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="18" style="text-align: right;">
          <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <HxlhTable
        style="width: 100%"
        :columns="columns"
        :data="materialStorageManagementList"
        :loading="loading"
        :height="height"
        :page="page"
        @on-checkbox="handleCheckboxChange"
        @changePageNo="changePageNo"
        @changePageSize="changePageSize"
    >
    </HxlhTable>
  </div>
</template>

<script setup name="MaterialStorageManagement">
import { listMaterialStorageManagement, getMaterialStorageManagement, delMaterialStorageManagement, addMaterialStorageManagement, updateMaterialStorageManagement } from "@/api/basicData/materialStorageManagement/materialStorageManagement";
import HxlhTable from '@/components/HxlhTable'
import { listAll_plant } from "@/api/basicData/plant";
import axios from 'axios';

const { proxy } = getCurrentInstance();
const materialStorageManagementList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const title = ref("");
const height = ref(document.documentElement.clientHeight - 230 + "px;")
const queryPlants = ref({status: 1});
const plantList = ref([]);

// åˆ†é¡µå±žæ€§
const page = ref({
  total: 0,
  current: 1,
  size: 10
});

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    itemNumber: null,
  },
  rules: {
  }
});

// è¡¨æ ¼é…ç½® 
const columns = ref([
  { type: 'seq', title: '序号', width: 60 },
  {
    title: '料号',
    field: 'itemNumber',
  },
  {
    title: '数量',
    field: 'num',
  },
  {
    title: '适用工厂',
    field: 'applicableFactories',
    formatter: (({ cellValue, row, column }) => {
      if (cellValue) {
        for(let i=0;i<plantList.value.length;i++){
          if(cellValue===plantList.value[i].plantCode){
            return plantList.value[i].plantName
          }
        }
      }
      return '';
    })
  },
  {
    title: '集成日期',
    field: 'integrationDate',
  },
  {
    title: '刷新日期',
    field: 'refreshDate',
  },
]);

const { queryParams, form, rules } = toRefs(data);

/** æŸ¥è¯¢ç‰©æ–™åº“存管理列表 */
function getList() {
  loading.value = true;
  axios.all([
      /** æŸ¥è¯¢å·¥åŽ‚列表 */
      listAll_plant(queryPlants.value),
      listMaterialStorageManagement(queryParams.value)
    ])
    .then(axios.spread((response1, response2) => {
      plantList.value = response1.data;
      materialStorageManagementList.value = response2.rows;
      page.value.total = response2.total;
      loading.value = false;
    }))
    .catch(error => {
      console.error('请求出错:', error);
    });
}

// å–消按钮
function cancel() {
  open.value = false;
  reset();
}

// è¡¨å•é‡ç½®
function reset() {
  form.value = {
    id: null,
    itemNumber: null,
    num: null,
    applicableFactories: null,
    integrationDate: null,
    refreshDate: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("materialStorageManagementRef");
}

/** æœç´¢æŒ‰é’®æ“ä½œ */
function handleQuery() {
  page.value.current = 1;
  getList();
}

/** é‡ç½®æŒ‰é’®æ“ä½œ */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** æ–°å¢žæŒ‰é’®æ“ä½œ */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加物料库存管理";
}

/** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getMaterialStorageManagement(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改物料库存管理";
  });
}

/** æäº¤æŒ‰é’® */
function submitForm() {
  proxy.$refs["materialStorageManagementRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateMaterialStorageManagement(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addMaterialStorageManagement(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** åˆ é™¤æŒ‰é’®æ“ä½œ */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除物料库存管理编号为"' + _ids + '"的数据项？').then(function() {
    return delMaterialStorageManagement(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
function handleExport() {
  proxy.download('materialStorageManagement/materialStorageManagement/export', {
    ...queryParams.value
  }, `materialStorageManagement_${new Date().getTime()}.xlsx`)
}

function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
  getList();
}

function changePageSize(pageSize) {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = pageSize;
  getList();
}

getList();
</script>

 src/views/system/hxlhTable/index.vue

@@ -23,6 +23,8 @@
                        :data="tableData"
                        :loading="loading"
                        :page="page"
                        @changePageNo="changePageNo"
                        @changePageSize="changePageSize"
                    >
                    </HxlhTable>
            </div>
@@ -49,6 +51,8 @@
  { code: '444', name: '赵六', sex: '女' }
]);

const mockData = ref([]);

for (let i = 0; i < 1000; i++) {
    tableData.value.push({
      code: `new${i + 1}`,
@@ -56,6 +60,8 @@
      sex: '未知'
    });
  }



// è¡¨æ ¼é…ç½®
const columns = ref([
@@ -78,17 +84,60 @@
const loading = ref(false);

// åˆ†é¡µå±žæ€§
const page = reactive({
const page = ref({
  total: 1004,
  current: 1,
  size: 10
});

const changePageNo = async (currentPage) => {
  console.log(currentPage);
  page.value.current = currentPage;
  // await fetchData();
}

const changePageSize = async (pageSize) => {
  console.log(pageSize);
  page.value.current = 1;
  page.value.size = pageSize;
  // await fetchData();
}

// æ¨¡æ‹Ÿæ•°æ®åŠ è½½
/* const fetchData = () => {
  // è¿™é‡Œå¯ä»¥æ›¿æ¢ä¸ºå®žé™…çš„ API è¯·æ±‚
  return new Promise((resolve) => {
      const current = page.value.current;
      const pageSize = page.value.size;
      const start = (current - 1) * pageSize;
      let end = start + pageSize;
      if(end > tableData.value.length){
        end = tableData.value.length;
      }
      const data = [];
      for (let i = start; i < end; i++) {
        console.log(tableData.value[i]);
        data.push(tableData.value[i]);
      }
      // æ¨¡æ‹Ÿæ€»è®°å½•æ•°
      // const total = 100;
      mockData.value = data;
      // pagerConfig.value.total = total;
      resolve();
  });
}; */

// ç”Ÿå‘½å‘¨æœŸé’©å­ï¼Œæ›¿ä»£ mounted
onMounted(() => {
  // è¿™é‡Œå¯ä»¥æ”¾ç½®åŽŸæ¥ mounted é’©å­ä¸­çš„代码
});
    

// åˆå§‹åŒ–数据
// const initData = async () => {
//   await fetchData();
// };

// initData();
</script>
  
<style scoped="scoped">