叫料

zs

2025-05-12 7baa0d978e41f395891753b208d805bc02edee38

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

@@ -1,299 +1,153 @@
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import { defineComponent, onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import BaseTable from '@/components/Table/Table'
import styles from './WmsMaterialContainer.module.scss'
import { useWmsMaterialContainer } from '../../../Controllers/WmsMaterialContainer'
import IconButton from '@/components/IconButton/IconButton'
import WmsMaterialContainerDrawer from '../Dialog/WmsMaterialContainerDrawer/WmsMaterialContainerDrawer'
import WmsMaterialContainerQueryDrawer from '../Dialog/WmsMaterialContainerQueryDrawer/WmsMaterialContainerQueryDrawer'
import Search from '@/components/Search/Search'
import { columns } from './Config'
import TdButton from '@/components/TdButton/TdButton'
import { vPermission } from '@/libs/Permission/Permission'
import { getWmsEnumData } from '@/widgets/WmsMaterialContainer/Models/Service/WmsMaterialContainerDrawer'
import {
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElForm,
  ElFormItem,
  ElButton,
  ElSelect,
  ElOption,
  ElMessage,
} from 'element-plus'
import { injectModel } from '@/libs/Provider/Provider'

interface RenderTableType {
  url?: string
  dataSource: Ref<any[]>
  isDrag?: boolean
  isChecked?: boolean
  isHidePagination?: boolean
  params?: Record<string, any>
  autoHeight?: boolean
}
import {
  getPlaceNoForStockList,
  getMaterialModelList,
  instock,
} from '@/widgets/WmsMaterialContainer/Models/Service/WmsMaterialContainer'
import { Message } from '@element-plus/icons-vue/dist/types'

export default defineComponent({
  name: 'WmsMaterialContainer',
  directives: {
    permission: vPermission,
  },
  setup(props, ctx) {
    const {
      dataSource,
      contextMenu,
      dialogConfig,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
      sort,
      headers,
      onError,
      onSearch,
      onRowClick,
      onConfirmWmsMaterialContainer,
      onCheck,
      onAddWmsMaterialContainer,
      onAdvancedQuery,
      onExport,
      openDetail,
      onSuccess,
      onBeforeUpload,
    } = useWmsMaterialContainer(props, ctx)

    //定义高级查询引用
    const wmsMaterialContainerQueryDrawerRef = ref(null)
    // 新增的查询条件
  setup() {
    // 查询表单数据
    const queryForm = ref({
      searchVal: '',
      str_searchFormInputAttrs: [],
      materialModel: '',
      placeNo: '',
      materialBatch: '',
      stockNumber: '',
    })
    //定义整体模糊查询的列数组(注意：必须大小写跟后端的实体类属性名一致，否则会导致匹配不对的问题)
    const _searchFormInputAttrs = ref(['MaterialId'])
    const searchFormInputAttrs_Placeholder = ref('请输入物料Id')

    // 动态枚举选项
    const enumOptions = reactive({})
    // 数据源
    const modelOptions = ref<Array<{ value: string; label: string }>>([])
    const placeNoOptions = ref<Array<{ value: string; label: string }>>([])

    // 获取枚举数据
    const fetchEnumData = async () => {
      try {
      } catch (error) {
        console.error('获取枚举数据失败:', error)
      }
    }

    // 组件挂载时获取枚举数据
    onMounted(() => {
      fetchEnumData()
      // 组件挂载后获取型号列表和库位号列表
      getModelList()
      getPlaceNoList()
    })

    // 定义响应式查询数据
    const _curHighQueryData = ref({
      searchVal: '',
      str_searchFormInputAttrs: [],
    })
    // 新版的查询方法（主页面中的按钮【查询】）
    const handleQueryForMain = async () => {
      _curHighQueryData.value.searchVal = queryForm.value.searchVal
      _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.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 handlePalletize = () => {
      console.log('组盘操作', queryForm.value)
      // 这里添加组盘逻辑
    }

    /**
     * @returns 表格
     */
    const RenderBaseTable = (props: RenderTableType) => {
      const {
        url,
        dataSource,
        isDrag,
        isChecked,
        isHidePagination,
        params,
        autoHeight,
      } = props
    // 组盘入库操作
    const handlePalletizeStorage = () => {
      console.log('组盘入库操作', queryForm.value)
      instock(queryForm.value), resetQueryForm()
      ElMessage.success({
        message: '组盘入库成功',
        type: 'success',
      })
      // 这里添加组盘入库逻辑
    }

      return (
        <div
          class={{
            [styles.wmsMaterialContainerList]: true,
          }}
        >
          <BaseTable
            ref={tableRef}
            url={url}
            sortUrlTpl="/api/v1/HIAWms/wmsMaterialContainer/{id}/adjustsort/{sort}"
            v-model:dataSource={dataSource.value}
            columns={columns}
            contextMenu={contextMenu}
            params={params}
            isDrag={isDrag}
            isChecked={isChecked}
            autoHeight={autoHeight}
            onCheck={onCheck}
            onRowClick={onRowClick}
            isHidePagination={isHidePagination}
            pageSize={20}
            v-slots={{
              name: ({ row }: any) => {
                return row?.name ? (
                  <TdButton
                    onClick={() => openDetail(row)}
                    text={<span style="color:#5a84ff">详情</span>}
                    icon="scale"
                    tip={row?.name}
                    hover
                  >
                    {row?.name}
                  </TdButton>
                ) : (
                  '-'
                )
              },
            }}
          ></BaseTable>
        </div>
      )
    const resetQueryForm = () => {
      queryForm.value.materialModel = ''
      queryForm.value.placeNo = ''
      queryForm.value.materialBatch = ''
      queryForm.value.stockNumber = ''
    }

    const getModelList = async () => {
      const models = await getMaterialModelList()
      modelOptions.value = models.map((item: string) => ({
        value: item.materialModel,
        label: item.materialModelDesc,
      }))
    }

    const getPlaceNoList = async () => {
      const placeNos = await getPlaceNoForStockList(2)
      console.log('库位号列表:', placeNos)
      placeNoOptions.value = placeNos.map((item: string) => ({
        value: item.placeNo,
        label: item.placeNoDesc,
      }))
    }

    return () => {
      return (
        <div class={styles.wmsMaterialContainerContent}>
          {/* 添加/编辑 */}
          <WmsMaterialContainerDrawer
            v-model={dialogConfig.visible}
            title={dialogConfig.title}
            row={current.value}
            sort={sort.value}
            onConfirm={onConfirmWmsMaterialContainer}
          />
          {/* 高级查询 */}
          <WmsMaterialContainerQueryDrawer
            ref="wmsMaterialContainerQueryDrawerRef"
            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="wmsMaterialContainer-add"
                icon="add-p"
                onClick={onAddWmsMaterialContainer}
                type="primary"
          <ElForm label-position="top" class={styles.h5Form}>
            <ElFormItem label="型号">
              <ElSelect
                v-model={queryForm.value.materialModel}
                placeholder="请选择型号"
                clearable
                class={styles.formInput}
              >
                添加
              </IconButton>
              <el-divider direction="vertical" />

              <el-divider direction="vertical" />
              {/* <el-upload
                v-permission="wmsMaterialContainer-import"
                name="file"
                accept=".xlsx,.xls,.csv"
                show-file-list={false}
                onError={onError}
                onSuccess={onSuccess}
                before-upload={onBeforeUpload}
                headers={headers.value}
                action="/api/v1/HIAWms/wmsMaterialContainer/import"
              >
                <IconButton icon="in">导入</IconButton>
              </el-upload>

              <IconButton
                v-permission="wmsMaterialContainer-output"
                icon="out"
                onClick={handleExport}
              >
                导出
              </IconButton> */}
            </div>
            <ElFormItem style={{ marginTop: '15px' }}>
              <ElFormItem label="关键字">
                <ElInput
                  v-model={queryForm.value.searchVal}
                  placeholder={searchFormInputAttrs_Placeholder.value}
                  clearable
                  class={styles.formItem}
                />
              </ElFormItem>
              <IconButton
                type="primary"
                icon="search"
                onClick={handleQueryForMain}
              >
                查询
              </IconButton>
              {/* <IconButton style="" icon="refresh" onClick={resetQuery}> 
                重置 
              </IconButton> */}
              <IconButton
                v-permission="wmsMaterialContainer-add"
                icon="search"
                onClick={onAdvancedQuery}
                type="primary"
              >
                高级查询
              </IconButton>
                {modelOptions.value.map((item) => (
                  <ElOption
                    key={item.value}
                    label={item.label}
                    value={item.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
          </div>

          <RenderBaseTable
            url="/api/v1/HIAWms/wmsMaterialContainer/page"
            dataSource={dataSource}
            isChecked={true}
            isDrag={true}
          />
            <ElFormItem label="库位号">
              <ElSelect
                v-model={queryForm.value.placeNo}
                placeholder="请选择库位号"
                clearable
                class={styles.formInput}
              >
                {placeNoOptions.value.map((item) => (
                  <ElOption
                    key={item.value}
                    label={item.label}
                    value={item.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="批次号">
              <ElInput
                v-model={queryForm.value.materialBatch}
                placeholder="请输入批次号"
                clearable
                class={styles.formInput}
              />
            </ElFormItem>
            <ElFormItem label="数量">
              <ElInput
                v-model={queryForm.value.stockNumber}
                placeholder="请输入数量"
                clearable
                class={styles.formInput}
              />
            </ElFormItem>
            <div class={styles.buttonGroup}>
              {/* <ElButton
                type="primary"
                onClick={handlePalletize}
                class={styles.actionButton}
              >
                组盘
              </ElButton> */}
              <ElButton
                type="success"
                onClick={handlePalletizeStorage}
                class={styles.actionButton}
              >
                组盘入库
              </ElButton>
            </div>
          </ElForm>
        </div>
      )
    }