111

schangxiang@126.com

2025-05-06 5e38906b578004f5a7441329cd25e85e50a29020

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Views/Pages/WmsMaterial/WmsMaterial.tsx

@@ -1,321 +1,324 @@
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 WmsMaterialQueryDrawer from '../Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer'
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/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,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
      sort,
      headers,
      onError,
      onSearch,
      onRowClick,
      onConfirmWmsMaterial,
      onCheck,
      onAddWmsMaterial,
      onAdvancedQuery,
      onExport,
      openDetail,
      onSuccess,
      onBeforeUpload,
    } = useWmsMaterial(props, ctx)

    //定义高级查询引用
   const wmsMaterialQueryDrawerRef=ref(null);
    // æ–°å¢žçš„查询条件
    const queryForm = ref({
      searchVal: '',
      str_searchFormInputAttrs:[]
    })
    //定义整体模糊查询的列数组(注意：必须大小写跟后端的实体类属性名一致，否则会导致匹配不对的问题)
    const _searchFormInputAttrs = ref([
      'MaterialCode', 
      'MaterialName', 
      'Remark'
    ]);
    const searchFormInputAttrs_Placeholder = ref('请输入物料编码/物料名称/备注');
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 WmsMaterialQueryDrawer from '../Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer' 
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/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, 
      dialogConfigForQuery, 
      tableRef, 
      current, 
      search, 
      sort, 
      headers, 
      onError, 
      onSearch, 
      onRowClick, 
      onConfirmWmsMaterial, 
      onCheck, 
      onAddWmsMaterial, 
      onAdvancedQuery, 
      onExport, 
      openDetail, 
      onSuccess, 
      onBeforeUpload, 
    } = useWmsMaterial(props, ctx) 
 
    //定义高级查询引用 
   const wmsMaterialQueryDrawerRef=ref(null); 
    // æ–°å¢žçš„查询条件 
    const queryForm = ref({ 
      searchVal: '', 
      str_searchFormInputAttrs:[] 
    }) 
    //定义整体模糊查询的列数组(注意：必须大小写跟后端的实体类属性名一致，否则会导致匹配不对的问题) 
    const _searchFormInputAttrs = ref([ 
     'MaterialCode', 'MaterialName', 'Remark' 
    ]); 
    const searchFormInputAttrs_Placeholder = ref('请输入物料编码/物料名称/备注'); 
     
 
    // åŠ¨æ€æžšä¸¾é€‰é¡¹ 
    const enumOptions = reactive({ 
      purchaseType: [] as Array<{label: string; value: any }>, 
materialType: [] as Array<{label: string; value: any }>, 
isMainBranch: [] as Array<{label: string; value: any }>,  
    }) 
 
    // èŽ·å–枚举数据 
    const fetchEnumData = async () => { 
      try { 
        const purchaseTypeEnumData = await getWmsEnumData({ 
 EnumName: 'PurchaseTypeEnum', 
}) 
enumOptions.purchaseType = purchaseTypeEnumData.map((item) => ({ 
  label: item.description, 
  value: item.value, 
})) 
const materialTypeEnumData = await getWmsEnumData({ 
 EnumName: 'MaterialTypeEnum', 
}) 
enumOptions.materialType = materialTypeEnumData.map((item) => ({ 
  label: item.description, 
  value: item.value, 
})) 
const yesNoEnumData = await getWmsEnumData({ 
 EnumName: 'YesNoEnum', 
}) 
enumOptions.isMainBranch = yesNoEnumData.map((item) => ({ 
  label: item.description, 
  value: item.value, 
})) 
 
      } catch (error) { 
        console.error('获取枚举数据失败:', error) 
      } 
    } 
 
    // ç»„件挂载时获取枚举数据 
    onMounted(() => { 
      fetchEnumData() 
    }) 
 
    // å®šä¹‰å“åº”式查询数据 
    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 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 _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;
    }
   

    /**
     * @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={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>
      )
    }

    return () => {
      return (
        <div class={styles.wmsMaterialContent}>
          {/* æ·»åŠ /编辑 */}
          <WmsMaterialDrawer
            v-model={dialogConfig.visible}
            title={dialogConfig.title}
            row={current.value}
            sort={sort.value}
            onConfirm={onConfirmWmsMaterial}
          />
          {/* é«˜çº§æŸ¥è¯¢ */}
          <WmsMaterialQueryDrawer
            ref="wmsMaterialQueryDrawerRef"
            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="wmsMaterial-add"
                icon="add-p"
                onClick={onAddWmsMaterial}
                type="primary"
              >
                æ·»åŠ 
              </IconButton>
              <el-divider direction="vertical" />

              <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={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="wmsMaterial-add"
                icon="search"
                onClick={onAdvancedQuery}
                type="primary"
              >
                é«˜çº§æŸ¥è¯¢
              </IconButton>
            </ElFormItem>
          </div>

          <RenderBaseTable
            url="/api/v1/hIAWms/wmsMaterial/page"
            dataSource={dataSource}
            isChecked={true}
            isDrag={true}
          />
        </div>
      )
    }
  },
})
 
    /** 
     * @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={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> 
      ) 
    } 
 
    return () => { 
      return ( 
        <div class={styles.wmsMaterialContent}> 
          {/* æ·»åŠ /编辑 */} 
          <WmsMaterialDrawer 
            v-model={dialogConfig.visible} 
            title={dialogConfig.title} 
            row={current.value} 
            sort={sort.value} 
            onConfirm={onConfirmWmsMaterial} 
          /> 
          {/* é«˜çº§æŸ¥è¯¢ */} 
          <WmsMaterialQueryDrawer 
            ref="wmsMaterialQueryDrawerRef" 
            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="wmsMaterial-add" 
                icon="add-p" 
                onClick={onAddWmsMaterial} 
                type="primary" 
              > 
                æ·»åŠ  
              </IconButton> 
              <el-divider direction="vertical" /> 
 
              <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={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="wmsMaterial-add" 
                icon="search" 
                onClick={onAdvancedQuery} 
                type="primary" 
              > 
                é«˜çº§æŸ¥è¯¢ 
              </IconButton> 
            </ElFormItem> 
          </div> 
 
          <RenderBaseTable 
            url="/api/v1/HIAWms/wmsMaterial/page" 
            dataSource={dataSource} 
            isChecked={true} 
            isDrag={true} 
          /> 
        </div> 
      ) 
    } 
  }, 
})