库存信息页面

zs

2025-05-05 11bff3e93067768199bab9bfff37e8eae17d8d92

 HIAWms/web/src/widgets/WmsStoreInfo/Views/Pages/WmsPlace/WmsPlace.tsx

@@ -1,4 +1,4 @@
import { defineComponent } from 'vue'
import { defineComponent, onMounted, ref, computed, reactive } from 'vue'
import type { Ref } from 'vue'
import BaseTable from '@/components/Table/Table'
import styles from './WmsPlace.module.scss'
@@ -9,6 +9,12 @@
import { columns } from './Config'
import TdButton from '@/components/TdButton/TdButton'
import { vPermission } from '@/libs/Permission/Permission'
import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus'
import {
  getWmsEnumData,
  getAreaAreaDataList,
  getAisleDataList,
} from '@/widgets/HIAWms/Models/Service/WmsMaterialDrawer'

interface RenderTableType {
  url?: string
@@ -46,6 +52,118 @@
      onSuccess,
      onBeforeUpload,
    } = useWmsPlace(props, ctx)

    // 新增的查询条件
    const queryForm = ref({
      placeNo: '',
      storageTypeNo: '',
      placeStatus: '',
      areaCode: '',
      aisle: '',
      islock: '',
      emptyContainer: '',
      filter: '',
    })

    const queryParams = computed(() => ({
      ...queryForm.value,
      storageTypeNo: queryForm.value.storageTypeNo || '', // 处理下拉
      placeStatus: queryForm.value.placeStatus || '',
    }))

    // 动态枚举选项
    const enumOptions = reactive({
      storageTypeNo: [] as Array<{ label: string; value: any }>,
      placeStatus: [] as Array<{ label: string; value: any }>,
      yesOrNo: [] as Array<{ label: string; value: any }>,
    })

    let areaTypelist = [] as Array<{ label: string; value: any }>
    let aisleTypelist = [] as Array<{ label: string; value: any }>

    // 获取枚举数据
    const fetchEnumData = async () => {
      try {
        // 获取物料类型枚举
        const storageTypeNoData = await getWmsEnumData({
          EnumName: 'PlaceTypeEnum',
        })
        enumOptions.storageTypeNo = storageTypeNoData.map((item) => ({
          label: item.description,
          value: item.value,
        }))

        // 获取采购类型枚举
        const placeStatusData = await getWmsEnumData({
          EnumName: 'PlaceStatusEnum',
        })
        enumOptions.placeStatus = placeStatusData.map((item) => ({
          label: item.description,
          value: item.value,
        }))

        const yesNoData = await getWmsEnumData({
          EnumName: 'YesNoEnum',
        })
        enumOptions.yesOrNo = yesNoData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
      } catch (error) {
        console.error('获取枚举数据失败:', error)
      }
    }
    const getAreaType = async () => {
      try {
        const areaListData = await getAreaAreaDataList()
        areaTypelist = areaListData.map((item) => ({
          label: item.areaName || '',
          value: item.areaNo || '', // 同上
        }))
      } catch (error) {
        areaTypelist = [] // 失败时重置为空数组
      }
    }

    const getAisleList = async () => {
      try {
        const aisleListData = await getAisleDataList()
        aisleTypelist = aisleListData.map((item) => ({
          label: item.aisleName || '',
          value: item.aisle || '',
        }))
      } catch (error) {
        console.error('获取巷道列表失败:', error)
        aisleTypelist = [] // 失败时重置为空数组
      }
    }
    // 组件挂载时获取枚举数据
    onMounted(() => {
      fetchEnumData()
      getAreaType()
      getAisleList()
    })

    // 新增的查询方法
    const handleQuery = async () => {
      console.log('查询条件:', queryParams.value)
      // tableRef.value.getTableList()
      tableRef.value.getList(queryParams.value)
    }

    // 重置查询条件
    const resetQuery = () => {
      queryForm.value = {
        placeNo: '',
        storageTypeNo: '',
        placeStatus: '',
        aisle: '',
        areaCode: '',
        islock: '',
        emptyContainer: '',
        filter: '',
      }
    }

    /**
     * @returns 表格
@@ -114,6 +232,145 @@
            sort={sort.value}
            onConfirm={onConfirmWmsPlace}
          />
          {/* 新增的查询表单 */}
          <ElForm
            inline
            model={queryForm.value}
            class={styles.queryForm}
            label-width="80px"
          >
            <ElFormItem label="关键字">
              <ElInput
                v-model={queryForm.value.filter}
                placeholder="请输入关键字搜索"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="库位编码">
              <ElInput
                v-model={queryForm.value.placeNo}
                placeholder="请输入库位编码"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="库位类型">
              <ElSelect
                v-model={queryForm.value.storageTypeNo}
                placeholder="请选择托盘类型"
                clearable
                loading={enumOptions.storageTypeNo.length === 0}
                class={styles.formItem}
              >
                {enumOptions.storageTypeNo.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="库位状态">
              <ElSelect
                v-model={queryForm.value.placeStatus}
                placeholder="请选择托盘状态"
                clearable
                loading={enumOptions.placeStatus.length === 0}
                class={styles.formItem}
              >
                {enumOptions.placeStatus.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="库区">
              <ElSelect
                v-model={queryForm.value.areaCode}
                placeholder="请选择库区"
                clearable
                loading={areaTypelist.length === 0}
                class={styles.formItem}
              >
                {areaTypelist.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="巷道">
              <ElSelect
                v-model={queryForm.value.aisle}
                placeholder="请选择库区"
                clearable
                loading={aisleTypelist.length === 0}
                class={styles.formItem}
              >
                {aisleTypelist.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="是否锁定">
              <ElSelect
                v-model={queryForm.value.islock}
                placeholder="请选择是否锁定"
                clearable
                loading={enumOptions.yesOrNo.length === 0}
                class={styles.formItem}
              >
                {enumOptions.yesOrNo.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="是否空托">
              <ElSelect
                v-model={queryForm.value.emptyContainer}
                placeholder="请选择是否空托"
                clearable
                loading={enumOptions.yesOrNo.length === 0}
                class={styles.formItem}
              >
                {enumOptions.yesOrNo.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem>
              <IconButton type="primary" icon="search" onClick={handleQuery}>
                查询
              </IconButton>
              <IconButton
                style="margin-left: 10px;"
                icon="refresh"
                onClick={resetQuery}
              >
                重置
              </IconButton>
            </ElFormItem>
          </ElForm>

          <div class={styles.headerContent}>
            <div class={styles.header}>
              <IconButton