任务管理及模板修改

zs

2025-05-07 58497c4d028c306e98249ccdff2bf86dd3b4ee87

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

@@ -1,324 +1,336 @@
import { computed, defineComponent, onMounted, reactive, ref } from 'vue' 
import type { Ref } from 'vue' 
import BaseTable from '@/components/Table/Table' 
import styles from './WmsTask.module.scss' 
import { useWmsTask } from '../../../Controllers/WmsTask' 
import IconButton from '@/components/IconButton/IconButton' 
import WmsTaskDrawer from '../Dialog/WmsTaskDrawer/WmsTaskDrawer' 
import WmsTaskQueryDrawer from '../Dialog/WmsTaskQueryDrawer/WmsTaskQueryDrawer' 
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/WmsTask/Models/Service/WmsTaskDrawer' 
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: 'WmsTask', 
  directives: { 
    permission: vPermission, 
  }, 
  setup(props, ctx) { 
    const { 
      dataSource, 
      contextMenu, 
      dialogConfig, 
      dialogConfigForQuery, 
      tableRef, 
      current, 
      search, 
      sort, 
      headers, 
      onError, 
      onSearch, 
      onRowClick, 
      onConfirmWmsTask, 
      onCheck, 
      onAddWmsTask, 
      onAdvancedQuery, 
      onExport, 
      openDetail, 
      onSuccess, 
      onBeforeUpload, 
    } = useWmsTask(props, ctx) 
 
    //定义高级查询引用 
   const wmsTaskQueryDrawerRef=ref(null); 
    // 新增的查询条件 
    const queryForm = ref({ 
      searchVal: '', 
      str_searchFormInputAttrs:[] 
    }) 
    //定义整体模糊查询的列数组(注意：必须大小写跟后端的实体类属性名一致，否则会导致匹配不对的问题) 
    const _searchFormInputAttrs = ref([ 
     'TaskNo', 'ContainerNo' 
    ]); 
    const searchFormInputAttrs_Placeholder = ref('请输入任务编码/托盘编码'); 
     
 
    // 动态枚举选项 
    const enumOptions = reactive({ 
      taskType: [] as Array<{label: string; value: any }>, 
taskStatus: [] as Array<{label: string; value: any }>, 
sonTaskType: [] as Array<{label: string; value: any }>,  
    }) 
 
    // 获取枚举数据 
    const fetchEnumData = async () => { 
      try { 
        const taskTypeEnumData = await getWmsEnumData({ 
 EnumName: 'TaskTypeEnum', 
}) 
enumOptions.taskType = taskTypeEnumData.map((item) => ({ 
  label: item.description, 
  value: item.value, 
})) 
const wmsTaskStatusData = await getWmsEnumData({ 
 EnumName: 'WmsTaskStatus', 
}) 
enumOptions.taskStatus = wmsTaskStatusData.map((item) => ({ 
  label: item.description, 
  value: item.value, 
})) 
const sonTaskTypeEnumData = await getWmsEnumData({ 
 EnumName: 'SonTaskTypeEnum', 
}) 
enumOptions.sonTaskType = sonTaskTypeEnumData.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.wmsTaskList]: true, 
          }} 
        > 
          <BaseTable 
            ref={tableRef} 
            url={url} 
            sortUrlTpl="/api/v1/HIAWms/wmsTask/{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.wmsTaskContent}> 
          {/* 添加/编辑 */} 
          <WmsTaskDrawer 
            v-model={dialogConfig.visible} 
            title={dialogConfig.title} 
            row={current.value} 
            sort={sort.value} 
            onConfirm={onConfirmWmsTask} 
          /> 
          {/* 高级查询 */} 
          <WmsTaskQueryDrawer 
            ref="wmsTaskQueryDrawerRef" 
            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="wmsTask-add" 
                icon="add-p" 
                onClick={onAddWmsTask} 
                type="primary" 
              > 
                添加 
              </IconButton> 
              <el-divider direction="vertical" /> 
 
              <el-divider direction="vertical" /> 
              <el-upload 
                v-permission="wmsTask-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/wmsTask/import" 
              > 
                <IconButton icon="in">导入</IconButton> 
              </el-upload> 
 
              <IconButton 
                v-permission="wmsTask-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> 
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import type { Ref } from 'vue'
import BaseTable from '@/components/Table/Table'
import styles from './WmsTask.module.scss'
import { useWmsTask } from '../../../Controllers/WmsTask'
import IconButton from '@/components/IconButton/IconButton'
import WmsTaskDrawer from '../Dialog/WmsTaskDrawer/WmsTaskDrawer'
import WmsTaskQueryDrawer from '../Dialog/WmsTaskQueryDrawer/WmsTaskQueryDrawer'
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/WmsTask/Models/Service/WmsTaskDrawer'
import dayjs from 'dayjs'
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: 'WmsTask',
  directives: {
    permission: vPermission,
  },
  setup(props, ctx) {
    const {
      dataSource,
      contextMenu,
      dialogConfig,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
      sort,
      headers,
      onError,
      onSearch,
      onRowClick,
      onConfirmWmsTask,
      onCheck,
      onAddWmsTask,
      onAdvancedQuery,
      onExport,
      openDetail,
      onSuccess,
      onBeforeUpload,
    } = useWmsTask(props, ctx)

    //定义高级查询引用
    const wmsTaskQueryDrawerRef = ref(null)
    // 新增的查询条件
    const queryForm = ref({
      searchVal: '',
      str_searchFormInputAttrs: [],
    })
    //定义整体模糊查询的列数组(注意：必须大小写跟后端的实体类属性名一致，否则会导致匹配不对的问题)
    const _searchFormInputAttrs = ref(['TaskNo', 'ContainerNo'])
    const searchFormInputAttrs_Placeholder = ref('请输入任务编码/托盘编码')

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

    // 获取枚举数据
    const fetchEnumData = async () => {
      try {
        const taskTypeEnumData = await getWmsEnumData({
          EnumName: 'TaskTypeEnum',
        })
        enumOptions.taskType = taskTypeEnumData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        const wmsTaskStatusData = await getWmsEnumData({
          EnumName: 'WmsTaskStatus',
        })
        enumOptions.taskStatus = wmsTaskStatusData.map((item) => ({
          label: item.description,
          value: item.value,
        }))
        const sonTaskTypeEnumData = await getWmsEnumData({
          EnumName: 'SonTaskTypeEnum',
        })
        enumOptions.sonTaskType = sonTaskTypeEnumData.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.wmsTaskList]: true,
          }}
        >
          <BaseTable
            ref={tableRef}
            url={url}
            sortUrlTpl="/api/v1/HIAWms/wmsTask/{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={{
              creationTime: ({ row }: any) => {
                return (
                  <div>
                    {row.creationTime != null
                      ? dayjs(row.creationTime).format('YYYY-MM-DD HH:mm:ss')
                      : '-'}
                  </div>
                )
              },
              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.wmsTaskContent}>
          {/* 添加/编辑 */}
          <WmsTaskDrawer
            v-model={dialogConfig.visible}
            title={dialogConfig.title}
            row={current.value}
            sort={sort.value}
            onConfirm={onConfirmWmsTask}
          />
          {/* 高级查询 */}
          <WmsTaskQueryDrawer
            ref="wmsTaskQueryDrawerRef"
            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="wmsTask-add"
                icon="add-p"
                onClick={onAddWmsTask}
                type="primary"
              >
                添加
              </IconButton>
              <el-divider direction="vertical" />

              <el-divider direction="vertical" />
              <el-upload
                v-permission="wmsTask-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/wmsTask/import"
              >
                <IconButton icon="in">导入</IconButton>
              </el-upload>

              <IconButton
                v-permission="wmsTask-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="wmsTask-add" 
                icon="search" 
                onClick={onAdvancedQuery} 
                type="primary" 
              > 
                高级查询 
              </IconButton> 
            </ElFormItem> 
          </div> 
 
          <RenderBaseTable 
            url="/api/v1/HIAWms/wmsTask/page" 
            dataSource={dataSource} 
            isChecked={true} 
            isDrag={true} 
          /> 
        </div> 
      ) 
    } 
  }, 
}) 
              </IconButton> */}
              <IconButton
                v-permission="wmsTask-add"
                icon="search"
                onClick={onAdvancedQuery}
                type="primary"
              >
                高级查询
              </IconButton>
            </ElFormItem>
          </div>

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