仓库信息高级查询

zs

2025-05-19 1225fbcf6dd197c39853e2cb0f70c7318836abcb

 HIAWms/hiawms_web/src/widgets/WmsStoreInfo/Views/Pages/WmsArea/WmsArea.tsx

@@ -14,6 +14,9 @@
  getWmsEnumData,
  getStoreDataList,
} from '@/widgets/HIAWms/Models/Service/WmsMaterialDrawer'
// 引入公共选项配置
import { FILTER_MODE_OPTIONS_STRING } from '@/components/DyFormForHighQuery/DyFormForHighQueryOptions'
import WmsAreaQueryDrawer from '../Dialog/WmsAreaQueryDrawer/WmsAreaQueryDrawer'

interface RenderTableType {
  url?: string
@@ -35,6 +38,7 @@
      dataSource,
      contextMenu,
      dialogConfig,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
@@ -45,6 +49,7 @@
      onRowClick,
      onConfirmWmsArea,
      onCheck,
      onAdvancedQuery,
      onAddWmsArea,
      onExport,
      openDetail,
@@ -52,44 +57,38 @@
      onBeforeUpload,
    } = useWmsArea(props, ctx)

    //定义高级查询引用
    const wmsAreaQueryDrawerRef = ref(null)
    // 新增的查询条件
    const queryForm = ref({
      areaNo: '',
      areaName: '',
      areaType: '',
      areaStatus: '',
      filter: '',
      searchVal: '',
      str_searchFormInputAttrs: [],
      searchVal_FilterMode: '',
    })

    const queryParams = computed(() => ({
      ...queryForm.value,
      areaType: queryForm.value.areaType || '', // 处理下拉
      areaStatus: queryForm.value.areaStatus || '',
    }))
    //定义整体模糊查询的列数组(注意：必须大小写跟后端的实体类属性名一致，否则会导致匹配不对的问题)
    const _searchFormInputAttrs = ref(['AreaNo', 'AreaName'])
    const searchFormInputAttrs_Placeholder = ref('请输入库区编号/库区名称')

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

    // 获取枚举数据
    const fetchEnumData = async () => {
      try {
        // 获取物料类型枚举
        const areaTypeData = await getWmsEnumData({
          EnumName: 'AreaTypeEnum',
        const areaStatusEnumData = await getWmsEnumData({
          EnumName: 'AreaStatusEnum',
        })
        enumOptions.areaType = areaTypeData.map((item) => ({
        enumOptions.areaStatus = areaStatusEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))

        // 获取采购类型枚举
        const areaStatusData = await getWmsEnumData({
          EnumName: 'AreaStatusEnum',
        const areaTypeEnumData = await getWmsEnumData({
          EnumName: 'AreaTypeEnum',
        })
        enumOptions.areaStatus = areaStatusData.map((item) => ({
        enumOptions.areaType = areaTypeEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
@@ -98,28 +97,80 @@
      }
    }

    // 定义响应式查询数据
    const _curHighQueryData = ref({
      searchVal: '',
      str_searchFormInputAttrs: [],
      searchVal_FilterMode: '',
    })
    // 组件挂载时获取枚举数据
    onMounted(() => {
      fetchEnumData()
      queryForm.value.searchVal_FilterMode =
        FILTER_MODE_OPTIONS_STRING[0]?.value || ''
      _curHighQueryData.value.searchVal_FilterMode =
        queryForm.value.searchVal_FilterMode
      _curHighQueryData.value.str_searchFormInputAttrs =
        _searchFormInputAttrs.value
    })

    // 新增的查询方法
    const handleQuery = async () => {
      // tableRef.value.getTableList()
      tableRef.value.getList(queryParams.value)
    // 新版的查询方法（主页面中的按钮【查询】）
    const handleQueryForMain = async () => {
      _curHighQueryData.value.searchVal = queryForm.value.searchVal
      _curHighQueryData.value.searchVal_FilterMode =
        queryForm.value.searchVal_FilterMode
      _curHighQueryData.value.str_searchFormInputAttrs =
        _searchFormInputAttrs.value
      tableRef.value.getList(_curHighQueryData.value)
    }

    // 重置查询条件
    // 新版的查询方法（高级查询中的按钮【查询】）
    const handleQuery = async (extraParams = {}) => {
      let filteredData = commonGetHighQueryForm(extraParams)
      commonSaveCurHighQueryData(filteredData)
      tableRef.value.getList(filteredData)
    }
    // 新版的查询重置
    const resetQuery = () => {
      queryForm.value = {
        areaNo: '',
        areaName: '',
        areaType: '',
        areaStatus: '',
        filter: '',
      }
      queryForm.value.searchVal = ''
      queryForm.value.searchVal_FilterMode =
        FILTER_MODE_OPTIONS_STRING[0]?.value || ''
      queryForm.value.str_searchFormInputAttrs = _searchFormInputAttrs.value
    }

    //新版的导出方法
    const handleExport = () => {
      onExport(_curHighQueryData.value)
    }
    // 新版的查询弹出框关闭方法
    const closeQuery = (extraParams = {}) => {
      let filteredData = commonGetHighQueryForm(extraParams)
      console.log('closeQuery方法')
      console.log(filteredData)
      commonSaveCurHighQueryData(filteredData)
    }
    //保存查询值
    const commonSaveCurHighQueryData = (filteredData = {}) => {
      _curHighQueryData.value = { ..._curHighQueryData.value, ...filteredData }
      _curHighQueryData.value.searchVal = queryForm.value.searchVal
      _curHighQueryData.value.searchVal_FilterMode =
        queryForm.value.searchVal_FilterMode
      _curHighQueryData.value.str_searchFormInputAttrs =
        _searchFormInputAttrs.value
    }
    //获取高级查询弹出框的查询值
    const commonGetHighQueryForm = (extraParams = {}) => {
      // 过滤掉 undefined 的值
      let filteredData = Object.assign(
        {},
        ...Object.entries(extraParams).map(([key, value]) =>
          value !== undefined ? { [key]: value } : {}
        )
      )
      //组合模糊查询
      filteredData.searchVal = queryForm.value.searchVal
      filteredData.searchVal_FilterMode = queryForm.value.searchVal_FilterMode
      filteredData.str_searchFormInputAttrs = _searchFormInputAttrs.value
      return filteredData
    }
    /**
     * @returns 表格
     */
@@ -187,94 +238,17 @@
            sort={sort.value}
            onConfirm={onConfirmWmsArea}
          />
          {/* 新增的查询表单 */}
          <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.areaNo}
                placeholder="请输入库区编码"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="库区名称">
              <ElInput
                v-model={queryForm.value.areaName}
                placeholder="请输入库区名称"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="库位类型">
              <ElSelect
                v-model={queryForm.value.areaType}
                placeholder="请选择托盘类型"
                clearable
                loading={enumOptions.areaType.length === 0}
                class={styles.formItem}
              >
                {enumOptions.areaType.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="库区状态">
              <ElSelect
                v-model={queryForm.value.areaStatus}
                placeholder="请选择托盘状态"
                clearable
                loading={enumOptions.areaStatus.length === 0}
                class={styles.formItem}
              >
                {enumOptions.areaStatus.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            {/* <ElFormItem label="日期范围">
              <ElDatePicker
                v-model={queryForm.value.dateRange}
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
              />
            </ElFormItem> */}
            <ElFormItem>
              <IconButton type="primary" icon="search" onClick={handleQuery}>
                查询
              </IconButton>
              <IconButton
                style="margin-left: 10px;"
                icon="refresh"
                onClick={resetQuery}
              >
                重置
              </IconButton>
            </ElFormItem>
          </ElForm>
          {/* 高级查询 */}
          <WmsAreaQueryDrawer
            ref="wmsAreaQueryDrawerRef"
            v-model={dialogConfigForQuery.visible}
            title={dialogConfigForQuery.title}
            row={current.value}
            sort={sort.value}
            onConfirmQuery={handleQuery}
            onRestQuery={resetQuery}
            onClose={closeQuery}
          />

          <div class={styles.headerContent}>
            <div class={styles.header}>
@@ -287,6 +261,7 @@
                添加
              </IconButton>
              <el-divider direction="vertical" />

              <el-upload
                v-permission="wmsArea-import"
                name="file"
@@ -304,20 +279,65 @@
              <IconButton
                v-permission="wmsArea-output"
                icon="out"
                onClick={onExport}
                onClick={handleExport}
              >
                导出
              </IconButton>
            </div>
            {/* <Search
              placeholder="请输入关键字"
              v-model={search.value}
              onConfirm={onSearch}
              style={{ marginTop: '-1px' }}
            /> */}
            <ElFormItem style={{ marginTop: '15px' }}>
              <ElFormItem label="关键字">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content={searchFormInputAttrs_Placeholder.value}
                  placement="top-start"
                >
                  <ElInput
                    v-model={queryForm.value.searchVal}
                    placeholder={searchFormInputAttrs_Placeholder.value}
                    clearable
                    class={styles.formItem}
                  />
                </el-tooltip>
              </ElFormItem>
              <ElFormItem label="" style="width:100px;">
                <ElSelect
                  v-model={queryForm.value.searchVal_FilterMode}
                  placeholder="请选择"
                  class={styles.formItem}
                >
                  {FILTER_MODE_OPTIONS_STRING.map((option) => (
                    <ElOption
                      key={option.value}
                      label={option.label}
                      value={option.value}
                    />
                  ))}
                </ElSelect>
              </ElFormItem>
              <IconButton
                type="primary"
                icon="search"
                onClick={handleQueryForMain}
              >
                查询
              </IconButton>
              {/* <IconButton style="" icon="refresh" onClick={resetQuery}> 
                重置 
              </IconButton> */}
              <IconButton
                v-permission="wmsArea-add"
                icon="search"
                onClick={onAdvancedQuery}
                type="primary"
              >
                高级查询
              </IconButton>
            </ElFormItem>
          </div>

          <RenderBaseTable
            url="/api/v1/HIAWms/wmsArea"
            url="/api/v1/HIAWms/wmsArea/page"
            dataSource={dataSource}
            isChecked={true}
            isDrag={true}