分页样式

zs

2025-04-30 3302e4878166a12aafdf73a9cf7a3f3feece7a5e

 HIAWms/web/src/widgets/HIAWms/Views/Pages/WmsMaterial/WmsMaterial.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,342 @@
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import type { Ref } from 'vue'
import BaseTable from '@/components/Table/Table'
import styles from './WmsMaterial.module.scss'
import { useWmsMaterial } from '../../../Controllers/WmsMaterial'
import IconButton from '@/components/IconButton/IconButton'
import WmsMaterialDrawer from '../Dialog/WmsMaterialDrawer/WmsMaterialDrawer'
import Search from '@/components/Search/Search'
import { columns } from './Config'
import TdButton from '@/components/TdButton/TdButton'
import { vPermission } from '@/libs/Permission/Permission'
import {
  getWmsEnumData,
  getWmsDataList,
} from '@/widgets/HIAWms/Models/Service/WmsMaterialDrawer'
import {
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElForm,
  ElFormItem,
} 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
}

export default defineComponent({
  name: 'WmsMaterial',
  directives: {
    permission: vPermission,
  },
  setup(props, ctx) {
    const {
      dataSource,
      contextMenu,
      dialogConfig,
      tableRef,
      current,
      search,
      sort,
      headers,
      onError,
      onSearch,
      onRowClick,
      onConfirmWmsMaterial,
      onCheck,
      onAddWmsMaterial,
      onExport,
      openDetail,
      onSuccess,
      onBeforeUpload,
    } = useWmsMaterial(props, ctx)

    // æ–°å¢žçš„查询条件
    const queryForm = ref({
      materialCode: '',
      materialName: '',
      materialType: '',
      purchaseType: '',
      filter: '',
    })

    const queryParams = computed(() => ({
      ...queryForm.value,
      materialType: queryForm.value.materialType || '', // å¤„理下拉
      purchaseType: queryForm.value.purchaseType || '',
    }))

    // åŠ¨æ€æžšä¸¾é€‰é¡¹
    const enumOptions = reactive({
      materialType: [] as Array<{ label: string; value: any }>,
      purchaseType: [] as Array<{ label: string; value: any }>,
      isMainBranch: [] as Array<{ label: string; value: any }>,
    })

    // èŽ·å–枚举数据
    const fetchEnumData = async () => {
      try {
        // èŽ·å–物料类型枚举
        const materialTypeData = await getWmsEnumData({
          EnumName: 'MaterialTypeEnum',
        })
        enumOptions.materialType = materialTypeData.map((item) => ({
          label: item.description,
          value: item.value,
        }))

        // èŽ·å–采购类型枚举
        const purchaseTypeData = await getWmsEnumData({
          EnumName: 'PurchaseTypeEnum',
        })
        enumOptions.purchaseType = purchaseTypeData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
      } catch (error) {
        console.error('获取枚举数据失败:', error)
      }
    }

    // ç»„件挂载时获取枚举数据
    onMounted(() => {
      fetchEnumData()
    })

    // æ–°å¢žçš„查询方法
    const handleQuery = async () => {
      console.log('查询条件:', queryParams.value)
      tableRef.value.getTableList()
      // tableRef.value.getList(queryParams.value)
    }

    // é‡ç½®æŸ¥è¯¢æ¡ä»¶
    const resetQuery = () => {
      queryForm.value = {
        materialCode: '',
        materialName: '',
        materialType: '',
        purchaseType: '',
        filter: '',
      }
    }

    /**
     * @returns è¡¨æ ¼
     */
    const RenderBaseTable = (props: RenderTableType) => {
      const {
        url,
        dataSource,
        isDrag,
        isChecked,
        isHidePagination,
        params,
        autoHeight,
      } = props

      return (
        <div
          class={{
            [styles.wmsMaterialList]: true,
          }}
        >
          <BaseTable
            ref={tableRef}
            url={url}
            sortUrlTpl="/api/v1/hIAWms/wmsMaterial/{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={10}
            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>
      )
    }

    return () => {
      return (
        <div class={styles.wmsMaterialContent}>
          {/* æ·»åŠ /编辑 */}
          <WmsMaterialDrawer
            v-model={dialogConfig.visible}
            title={dialogConfig.title}
            row={current.value}
            sort={sort.value}
            onConfirm={onConfirmWmsMaterial}
          />

          {/* æ–°å¢žçš„查询表单 */}
          <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.materialCode}
                placeholder="请输入物料编码"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="物料名称">
              <ElInput
                v-model={queryForm.value.materialName}
                placeholder="请输入物料名称"
                clearable
                class={styles.formItem}
              />
            </ElFormItem>
            <ElFormItem label="物料类型">
              <ElSelect
                v-model={queryForm.value.materialType}
                placeholder="请选择物料类型"
                clearable
                loading={enumOptions.materialType.length === 0}
                class={styles.formItem}
              >
                {enumOptions.materialType.map((option) => (
                  <ElOption
                    key={option.value}
                    label={option.label}
                    value={option.value}
                  />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="采购类型">
              <ElSelect
                v-model={queryForm.value.purchaseType}
                placeholder="请选择采购类型"
                clearable
                loading={enumOptions.purchaseType.length === 0}
                class={styles.formItem}
              >
                {enumOptions.purchaseType.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>

          <div class={styles.headerContent}>
            <div class={styles.header}>
              <IconButton
                v-permission="wmsMaterial-add"
                icon="add-p"
                onClick={onAddWmsMaterial}
                type="primary"
              >
                æ·»åŠ 
              </IconButton>
              <el-divider direction="vertical" />
              <el-upload
                v-permission="wmsMaterial-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/wmsMaterial/import"
              >
                <IconButton icon="in">导入</IconButton>
              </el-upload>

              <IconButton
                v-permission="wmsMaterial-output"
                icon="out"
                onClick={onExport}
              >
                å¯¼å‡º
              </IconButton>
            </div>
            {/* <Search
              placeholder="请输入关键字"
              v-model={search.value}
              onConfirm={onSearch}
              style={{ marginTop: '-1px' }}
            /> */}
          </div>

          <RenderBaseTable
            url="/api/v1/hIAWms/wmsMaterial/page"
            dataSource={dataSource}
            isChecked={true}
            isDrag={true}
          />
        </div>
      )
    }
  },
})