详情页面

zs

2025-05-13 e8d564377d20526c643f00132ccc3466360f9c5b

 HIAWms/hiawms_web/src/widgets/WmsMaterialStock/Views/Pages/WmsMaterialStock/WmsMaterialStock.tsx

@@ -5,20 +5,22 @@
import { useWmsMaterialStock } from '../../../Controllers/WmsMaterialStock'
import IconButton from '@/components/IconButton/IconButton'
import WmsMaterialStockDrawer from '../Dialog/WmsMaterialStockDrawer/WmsMaterialStockDrawer'
import WmsMaterialStockQueryDrawer from '../Dialog/WmsMaterialStockQuery/WmsMaterialStockQueryDrawer'
import Search from '@/components/Search/Search'
import { columns } from './Config'
import TdButton from '@/components/TdButton/TdButton'
import { vPermission } from '@/libs/Permission/Permission'
import dayjs from 'dayjs'
import { getWmsEnumData } from '@/widgets/WmsTask/Models/Service/WmsTaskDrawer'
import {
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElForm,
  ElFormItem,
  ElInput,
  ElOption,
  ElSelect,
} from 'element-plus'
import { getWmsEnumData } from '@/widgets/HIAWms/Models/Service/WmsMaterialDrawer'
import { injectModel } from '@/libs/Provider/Provider'

interface RenderTableType {
  url?: string
@@ -40,6 +42,7 @@
      dataSource,
      contextMenu,
      dialogConfig,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
@@ -51,91 +54,82 @@
      onConfirmWmsMaterialStock,
      onCheck,
      onAddWmsMaterialStock,
      onAdvancedQuery,
      onExport,
      openDetail,
      onSuccess,
      onBeforeUpload,
    } = useWmsMaterialStock(props, ctx)

    //定义高级查询引用
    const wmsMaterialStockDetailQueryDrawerRef = ref(null)
    // 新增的查询条件
    const queryForm = ref({
      containerNo: '',
      materialNo: '',
      materialName: '',
      containerType: '',
      containerStatus: '',
      searchVal: '',
      storageTypeNo: 1,
      placeStatus: '',
      placeNo: '',
      isLock: '',
      emptyContainer: '',
      dateRange: [],
      filter: '',
      str_searchFormInputAttrs: [],
    })

    const queryParams = computed(() => ({
      ...queryForm.value,
      containerType: queryForm.value.containerType || '', // 处理下拉
      containerStatus: queryForm.value.containerStatus || '',
      storageTypeNo: queryForm.value.storageTypeNo || 1, // 处理下拉
      placeStatus: queryForm.value.placeStatus || '',
      islock: queryForm.value.isLock || '',
      emptyContainer: queryForm.value.emptyContainer || '',
      startTime: queryForm.value.dateRange[0] || '',
      endTime: queryForm.value.dateRange[1] || '',
    }))
    //定义整体模糊查询的列数组(注意：必须大小写跟后端的实体类属性名一致，否则会导致匹配不对的问题)
    const _searchFormInputAttrs = ref(['OrderNo', 'MaterialNo', 'MaterialId'])
    const searchFormInputAttrs_Placeholder = ref('请输入单据号/物料编号/物料ID')

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

    // 获取枚举数据
    const fetchEnumData = async () => {
      try {
        // 获取物料类型枚举
        const containerTypeData = await getWmsEnumData({
          EnumName: 'ContainerTypeEnum',
        })
        enumOptions.containerType = containerTypeData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        // 获取物料类型枚举
        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 containerStatusData = await getWmsEnumData({
        const containerStatusEnumData = await getWmsEnumData({
          EnumName: 'ContainerStatusEnum',
        })
        enumOptions.containerStatus = containerStatusData.map((item) => ({
        enumOptions.containerStatus = containerStatusEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))

        const yesNoData = await getWmsEnumData({
        const containerTypeEnumData = await getWmsEnumData({
          EnumName: 'ContainerTypeEnum',
        })
        enumOptions.containerType = containerTypeEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        const placeStatusEnumData = await getWmsEnumData({
          EnumName: 'PlaceStatusEnum',
        })
        enumOptions.placeStatus = placeStatusEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        const placeTypeEnumData = await getWmsEnumData({
          EnumName: 'PlaceTypeEnum',
        })
        enumOptions.storageTypeNo = placeTypeEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        const materialCheckStatusEnumData = await getWmsEnumData({
          EnumName: 'MaterialCheckStatusEnum',
        })
        enumOptions.checkStatus = materialCheckStatusEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        const yesNoEnumData = await getWmsEnumData({
          EnumName: 'YesNoEnum',
        })
        enumOptions.yesOrNo = yesNoData.map((item) => ({
        enumOptions.isLock = yesNoEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        enumOptions.emptyContainer = yesNoEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
@@ -147,33 +141,72 @@
    // 组件挂载时获取枚举数据
    onMounted(() => {
      fetchEnumData()
      handleQuery()

      tableRef.value = {
        dataSource: [],
      }
      handleQueryForMain()
    })

    // 新增的查询方法
    const handleQuery = async () => {
      console.log('查询条件:', queryParams.value)
      // tableRef.value.getTableList()
      tableRef.value.getList(queryParams.value)
    // 定义响应式查询数据
    const _curHighQueryData = ref({
      searchVal: '',
      str_searchFormInputAttrs: [],
    })
    // 新版的查询方法（主页面中的按钮【查询】）
    const handleQueryForMain = async () => {
      _curHighQueryData.value.searchVal = queryForm.value.searchVal
      _curHighQueryData.value.str_searchFormInputAttrs =
        _searchFormInputAttrs.value
      if (!_curHighQueryData.value?.storageTypeNo) {
        _curHighQueryData.value.storageTypeNo = 1
      }
      tableRef.value.getList(_curHighQueryData.value)
    }
    // 新版的查询方法（高级查询中的按钮【查询】）
    const handleQuery = async (extraParams = {}) => {
      let filteredData = commonGetHighQueryForm(extraParams)
      commonSaveCurHighQueryData(filteredData)
      tableRef.value.getList(filteredData)
    }
    // 新版的查询重置
    const resetQuery = () => {
      queryForm.value.searchVal = ''
      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.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.str_searchFormInputAttrs = _searchFormInputAttrs.value
      return filteredData
    }

    // 重置查询条件
    const resetQuery = () => {
      queryForm.value = {
        containerNo: '',
        materialNo: '',
        materialName: '',
        containerType: '',
        containerStatus: '',
        storageTypeNo: 1,
        placeStatus: '',
        placeNo: '',
        isLock: '',
        emptyContainer: '',
        dateRange: [],
        filter: '',
      }
    }
    /**
     * @returns 表格
     */
@@ -187,20 +220,17 @@
        params,
        autoHeight,
      } = props
      props.params = {
        ...queryParams.value,
        ...params,
      }

      return (
        <div
          class={{
            [styles.wmsMaterialStockList]: true,
            [styles.wmsMaterialStockDetailList]: true,
          }}
        >
          <BaseTable
            ref={tableRef}
            url={url}
            sortUrlTpl="/api/v1/HIAWms/wmsMaterialStock/{id}/adjustsort/{sort}"
            sortUrlTpl="/api/v1/HIAWms/wmsMaterialStockDetail/{id}/adjustsort/{sort}"
            v-model:dataSource={dataSource.value}
            columns={columns}
            contextMenu={contextMenu}
@@ -218,6 +248,57 @@
                  <div>
                    {row.inStockTime != null
                      ? dayjs(row.inStockTime).format('YYYY-MM-DD HH:mm:ss')
                      : '-'}
                  </div>
                )
              },
              isDisabled: ({ row }: any) => {
                return (
                  <div>
                    {row.isDisabled != null
                      ? row.isDisabled
                        ? '是'
                        : '否'
                      : '-'}
                  </div>
                )
              },
              creationTime: ({ row }: any) => {
                return (
                  <div>
                    {row.creationTime != null
                      ? dayjs(row.creationTime).format('YYYY-MM-DD HH:mm:ss')
                      : '-'}
                  </div>
                )
              },
              lastModificationTime: ({ row }: any) => {
                return (
                  <div>
                    {row.lastModificationTime != null
                      ? dayjs(row.lastModificationTime).format(
                          'YYYY-MM-DD HH:mm:ss'
                        )
                      : '-'}
                  </div>
                )
              },
              isDeleted: ({ row }: any) => {
                return (
                  <div>
                    {row.isDeleted != null
                      ? row.isDeleted
                        ? '是'
                        : '否'
                      : '-'}
                  </div>
                )
              },
              deletionTime: ({ row }: any) => {
                return (
                  <div>
                    {row.deletionTime != null
                      ? dayjs(row.deletionTime).format('YYYY-MM-DD HH:mm:ss')
                      : '-'}
                  </div>
                )
@@ -242,9 +323,10 @@
        </div>
      )
    }

    return () => {
      return (
        <div class={styles.wmsMaterialStockContent}>
        <div class={styles.wmsMaterialStockDetailContent}>
          {/* 添加/编辑 */}
          <WmsMaterialStockDrawer
            v-model={dialogConfig.visible}
@@ -253,183 +335,22 @@
            sort={sort.value}
            onConfirm={onConfirmWmsMaterialStock}
          />
          {/* 新增的查询表单 */}
          <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.materialNo}
                placeholder="请输入物料编码"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="物料名称">
              <ElInput
                v-model={queryForm.value.materialName}
                placeholder="请输入物料名称"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="托盘编码">
              <ElInput
                v-model={queryForm.value.containerNo}
                placeholder="请输入托盘编码"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="托盘类型">
              <ElSelect
                v-model={queryForm.value.containerType}
                placeholder="请选择托盘类型"
                clearable
                loading={enumOptions.containerType.length === 0}
                class={styles.formItem}
              >
                {enumOptions.containerType.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="托盘状态">
              <ElSelect
                v-model={queryForm.value.containerStatus}
                placeholder="请选择托盘状态"
                clearable
                loading={enumOptions.containerStatus.length === 0}
                class={styles.formItem}
              >
                {enumOptions.containerStatus.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="库位编号">
              <ElInput
                v-model={queryForm.value.placeNo}
                placeholder="请输入库位编号"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="库位类型">
              <ElSelect
                v-model={queryForm.value.storageTypeNo}
                placeholder="请选择托盘类型"
                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.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 label="日期范围">
              <ElDatePicker
                v-model={queryForm.value.dateRange}
                type="datetimerange"
                range-separator="至"
                show-now="true"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              />
            </ElFormItem>
            <ElFormItem>
              <IconButton type="primary" icon="search" onClick={handleQuery}>
                查询
              </IconButton>
              <IconButton
                style="margin-left: 10px;"
                icon="refresh"
                onClick={resetQuery}
              >
                重置
              </IconButton>
            </ElFormItem>
          </ElForm>
          {/* 高级查询 */}
          <WmsMaterialStockQueryDrawer
            ref="wmsMaterialStockDetailQueryDrawerRef"
            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}>
              <IconButton
                v-permission="wmsMaterialStock-add"
                v-permission="wmsMaterialStockDetail-add"
                icon="add-p"
                onClick={onAddWmsMaterialStock}
                type="primary"
@@ -437,8 +358,9 @@
                添加
              </IconButton>
              <el-divider direction="vertical" />
              <el-upload
                v-permission="wmsMaterialStock-import"

              {/* <el-upload
                v-permission="wmsMaterialStockDetail-import"
                name="file"
                accept=".xlsx,.xls,.csv"
                show-file-list={false}
@@ -446,28 +368,58 @@
                onSuccess={onSuccess}
                before-upload={onBeforeUpload}
                headers={headers.value}
                action="/api/v1/HIAWms/wmsMaterialStock/import"
                action="/api/v1/HIAWms/wmsMaterialStockDetail/import"
              >
                <IconButton icon="in">导入</IconButton>
              </el-upload>
              </el-upload> */}

              <IconButton
                v-permission="wmsMaterialStock-output"
                v-permission="wmsMaterialStockDetail-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>
              <IconButton
                type="primary"
                icon="search"
                onClick={handleQueryForMain}
              >
                查询
              </IconButton>
              {/* <IconButton style="" icon="refresh" onClick={resetQuery}> 
                重置 
              </IconButton> */}
              <IconButton
                v-permission="wmsMaterialStock-add"
                icon="search"
                onClick={onAdvancedQuery}
                type="primary"
              >
                高级查询
              </IconButton>
            </ElFormItem>
          </div>

          <RenderBaseTable
            url="/api/v1/HIAWms/wmsMaterialStock"
            url="/api/v1/HIAWms/wmsmaterialstock/"
            dataSource={dataSource}
            isChecked={true}
            isDrag={true}