import { defineComponent, onMounted, ref, computed, reactive } from 'vue'
|
import type { Ref } from 'vue'
|
import BaseTable from '@/components/Table/Table'
|
import styles from './WmsPlace.module.scss'
|
import { useWmsPlace } from '../../../Controllers/WmsPlace'
|
import IconButton from '@/components/IconButton/IconButton'
|
import WmsPlaceDrawer from '../Dialog/WmsPlaceDrawer/WmsPlaceDrawer'
|
import Search from '@/components/Search/Search'
|
import { columns } from './Config'
|
import TdButton from '@/components/TdButton/TdButton'
|
import { vPermission } from '@/libs/Permission/Permission'
|
import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus'
|
import {
|
getWmsEnumData,
|
getAreaAreaDataList,
|
getAisleDataList,
|
} from '@/widgets/HIAWms/Models/Service/WmsMaterialDrawer'
|
|
interface RenderTableType {
|
url?: string
|
dataSource: Ref<any[]>
|
isDrag?: boolean
|
isChecked?: boolean
|
isHidePagination?: boolean
|
params?: Record<string, any>
|
autoHeight?: boolean
|
}
|
|
export default defineComponent({
|
name: 'WmsPlace',
|
directives: {
|
permission: vPermission,
|
},
|
setup(props, ctx) {
|
const {
|
dataSource,
|
contextMenu,
|
dialogConfig,
|
tableRef,
|
current,
|
search,
|
sort,
|
headers,
|
onError,
|
onSearch,
|
onRowClick,
|
onConfirmWmsPlace,
|
onCheck,
|
onAddWmsPlace,
|
onExport,
|
openDetail,
|
onSuccess,
|
onBeforeUpload,
|
} = useWmsPlace(props, ctx)
|
|
// 新增的查询条件
|
const queryForm = ref({
|
placeNo: '',
|
storageTypeNo: '',
|
placeStatus: '',
|
areaCode: '',
|
aisle: '',
|
islock: '',
|
emptyContainer: '',
|
filter: '',
|
})
|
|
const queryParams = computed(() => ({
|
...queryForm.value,
|
storageTypeNo: queryForm.value.storageTypeNo || '', // 处理下拉
|
placeStatus: queryForm.value.placeStatus || '',
|
islock: queryForm.value.islock || '',
|
aisle: queryForm.value.aisle || '',
|
areaCode: queryForm.value.areaCode || '',
|
emptyContainer: queryForm.value.emptyContainer || '',
|
}))
|
|
// 动态枚举选项
|
const enumOptions = reactive({
|
storageTypeNo: [] as Array<{ label: string; value: any }>,
|
placeStatus: [] as Array<{ label: string; value: any }>,
|
yesOrNo: [] as Array<{ label: string; value: any }>,
|
})
|
|
let areaTypelist = [] as Array<{ label: string; value: any }>
|
let aisleTypelist = [] as Array<{ label: string; value: any }>
|
|
// 获取枚举数据
|
const fetchEnumData = async () => {
|
try {
|
// 获取物料类型枚举
|
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 yesNoData = await getWmsEnumData({
|
EnumName: 'YesNoEnum',
|
})
|
enumOptions.yesOrNo = yesNoData.map((item) => ({
|
label: item.description,
|
value: item.value,
|
}))
|
} catch (error) {
|
console.error('获取枚举数据失败:', error)
|
}
|
}
|
const getAreaType = async () => {
|
try {
|
const areaListData = await getAreaAreaDataList()
|
areaTypelist = areaListData.map((item) => ({
|
label: item.areaName || '',
|
value: item.areaNo || '', // 同上
|
}))
|
} catch (error) {
|
areaTypelist = [] // 失败时重置为空数组
|
}
|
}
|
|
const getAisleList = async () => {
|
try {
|
const aisleListData = await getAisleDataList()
|
aisleTypelist = aisleListData.map((item) => ({
|
label: item.aisleName || '',
|
value: item.aisle || '',
|
}))
|
} catch (error) {
|
console.error('获取巷道列表失败:', error)
|
aisleTypelist = [] // 失败时重置为空数组
|
}
|
}
|
// 组件挂载时获取枚举数据
|
onMounted(() => {
|
fetchEnumData()
|
getAreaType()
|
getAisleList()
|
})
|
|
// 新增的查询方法
|
const handleQuery = async () => {
|
console.log('查询条件:', queryParams.value)
|
// tableRef.value.getTableList()
|
tableRef.value.getList(queryParams.value)
|
}
|
|
// 重置查询条件
|
const resetQuery = () => {
|
queryForm.value = {
|
placeNo: '',
|
storageTypeNo: '',
|
placeStatus: '',
|
aisle: '',
|
areaCode: '',
|
islock: '',
|
emptyContainer: '',
|
filter: '',
|
}
|
}
|
|
/**
|
* @returns 表格
|
*/
|
const RenderBaseTable = (props: RenderTableType) => {
|
const {
|
url,
|
dataSource,
|
isDrag,
|
isChecked,
|
isHidePagination,
|
params,
|
autoHeight,
|
} = props
|
|
return (
|
<div
|
class={{
|
[styles.wmsPlaceList]: true,
|
}}
|
>
|
<BaseTable
|
ref={tableRef}
|
url={url}
|
sortUrlTpl="/api/v1/HIAWms/wmsPlace/{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={50}
|
v-slots={{
|
isDisabled: ({ row }: any) => {
|
return (
|
<div>
|
{row.isDisabled != null
|
? row.isDisabled
|
? '是'
|
: '否'
|
: '-'}
|
</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.wmsPlaceContent}>
|
{/* 添加/编辑 */}
|
<WmsPlaceDrawer
|
v-model={dialogConfig.visible}
|
title={dialogConfig.title}
|
row={current.value}
|
sort={sort.value}
|
onConfirm={onConfirmWmsPlace}
|
/>
|
{/* 新增的查询表单 */}
|
<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.placeNo}
|
placeholder="请输入库位编码"
|
clearable
|
class={styles.formItem}
|
/>
|
</ElFormItem>
|
<ElFormItem label="库位类型">
|
<ElSelect
|
v-model={queryForm.value.storageTypeNo}
|
placeholder="请选择托盘类型"
|
clearable
|
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.areaCode}
|
placeholder="请选择库区"
|
clearable
|
loading={areaTypelist.length === 0}
|
class={styles.formItem}
|
>
|
{areaTypelist.map((option) => (
|
<ElOption
|
key={option.value}
|
label={option.label}
|
value={option.value}
|
/>
|
))}
|
</ElSelect>
|
</ElFormItem>
|
<ElFormItem label="巷道">
|
<ElSelect
|
v-model={queryForm.value.aisle}
|
placeholder="请选择库区"
|
clearable
|
loading={aisleTypelist.length === 0}
|
class={styles.formItem}
|
>
|
{aisleTypelist.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>
|
<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="wmsPlace-add"
|
icon="add-p"
|
onClick={onAddWmsPlace}
|
type="primary"
|
>
|
添加
|
</IconButton>
|
<el-divider direction="vertical" />
|
<el-upload
|
v-permission="wmsPlace-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/wmsPlace/import"
|
>
|
<IconButton icon="in">导入</IconButton>
|
</el-upload>
|
|
<IconButton
|
v-permission="wmsPlace-output"
|
icon="out"
|
onClick={onExport}
|
>
|
导出
|
</IconButton>
|
</div>
|
{/* <Search
|
placeholder="请输入关键字"
|
v-model={search.value}
|
onConfirm={onSearch}
|
style={{ marginTop: '-1px' }}
|
/> */}
|
</div>
|
<RenderBaseTable
|
url="/api/v1/HIAWms/wmsPlace"
|
dataSource={dataSource}
|
isChecked={true}
|
isDrag={true}
|
/>
|
</div>
|
)
|
}
|
},
|
})
|
