import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
|
import type { Ref } from 'vue'
|
import BaseTable from '@/components/Table/Table'
|
import styles from './WmsInOutStockOrder.module.scss'
|
import { useWmsInOutStockOrder } from '../../../Controllers/WmsInOutStockOrder'
|
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/WmsInOutStockOrder/Models/Service/WmsInOutStockOrderDrawer'
|
import dayjs from 'dayjs'
|
import {
|
ElInput,
|
ElSelect,
|
ElOption,
|
ElDatePicker,
|
ElForm,
|
ElFormItem,
|
ElDialog,
|
ElTable,
|
ElTableColumn,
|
ElButton,
|
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
|
}
|
|
export default defineComponent({
|
name: 'WmsInOutStockOrder',
|
directives: {
|
permission: vPermission,
|
},
|
setup(props, ctx) {
|
const {
|
dataSource,
|
contextMenu,
|
tableRef,
|
selection,
|
onRowClick,
|
onCheck,
|
openDetail,
|
} = useWmsInOutStockOrder(props, ctx)
|
|
// 叫料弹窗相关状态
|
const callMaterialDialog = reactive({
|
visible: false,
|
title: '叫料',
|
selectedItems: [] as any[],
|
})
|
|
// 打开叫料弹窗
|
const openCallMaterialDialog = () => {
|
if (selection.value.length === 0) {
|
ElMessage.warning('请至少选择一条记录')
|
return
|
}
|
callMaterialDialog.selectedItems = [...selection.value]
|
console.log('选中的数据:', callMaterialDialog.selectedItems)
|
callMaterialDialog.visible = true
|
}
|
|
// 确认叫料
|
const confirmCallMaterial = () => {
|
// 这里添加叫料逻辑
|
console.log('叫料数据:', callMaterialDialog.selectedItems)
|
ElMessage.success('叫料成功')
|
callMaterialDialog.visible = false
|
}
|
|
/**
|
* @returns 叫料弹窗
|
*/
|
const RenderCallMaterialDialog = () => {
|
return (
|
<ElDialog
|
v-model={callMaterialDialog.visible}
|
title={callMaterialDialog.title}
|
width="70%"
|
v-slots={{
|
footer: () => (
|
<div class={styles.dialogFooter}>
|
<ElButton onClick={() => (callMaterialDialog.visible = false)}>
|
取消
|
</ElButton>
|
<ElButton type="primary" onClick={confirmCallMaterial}>
|
确认叫料
|
</ElButton>
|
</div>
|
),
|
}}
|
>
|
<ElTable data={callMaterialDialog.selectedItems} border>
|
<ElTableColumn prop="orderNo" label="单据号" width="180" />
|
<ElTableColumn prop="materialNo" label="物料编号" width="180" />
|
<ElTableColumn prop="materialName" label="物料名称" />
|
<ElTableColumn prop="materialModel" label="型号" />
|
<ElTableColumn prop="placeNo" label="库位编号" />
|
<ElTableColumn prop="quantity" label="数量" />
|
</ElTable>
|
</ElDialog>
|
)
|
}
|
|
/**
|
* @returns 表格
|
*/
|
const RenderBaseTable = (props: RenderTableType) => {
|
const {
|
url,
|
dataSource,
|
isDrag,
|
isChecked,
|
isHidePagination,
|
params,
|
autoHeight,
|
} = props
|
|
return (
|
<div
|
class={{
|
[styles.wmsInOutStockOrderList]: true,
|
}}
|
>
|
<BaseTable
|
ref={tableRef}
|
url={url}
|
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={{
|
operateTime: ({ row }: any) => {
|
return (
|
<div>
|
{row.operateTime != null
|
? dayjs(row.operateTime).format('YYYY-MM-DD HH:mm:ss')
|
: '-'}
|
</div>
|
)
|
},
|
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.wmsInOutStockOrderContent}>
|
{/* 叫料弹窗 */}
|
<RenderCallMaterialDialog />
|
|
{/* 操作按钮区域 */}
|
<div class={styles.headerContent}>
|
<div class={styles.header}>
|
<ElButton
|
v-permission="wmsInOutStockOrder-call"
|
type="primary"
|
onClick={openCallMaterialDialog}
|
>
|
叫料
|
</ElButton>
|
</div>
|
</div>
|
|
<RenderBaseTable
|
dataSource={dataSource}
|
isChecked={true}
|
isDrag={true}
|
/>
|
</div>
|
)
|
}
|
},
|
})
|
