272 lines
8.4 KiB
Vue
272 lines
8.4 KiB
Vue
<!-- MES 杂项出库单行列表子组件 -->
|
|
<template>
|
|
<div class="overflow-hidden">
|
|
<el-button v-if="isUpdate" type="primary" plain @click="openForm('create')" class="mb-10px">
|
|
<Icon icon="ep:plus" class="mr-5px" /> 添加物料
|
|
</el-button>
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="list"
|
|
:stripe="true"
|
|
:show-overflow-tooltip="true"
|
|
border
|
|
:row-key="(row: any) => row.id"
|
|
>
|
|
<el-table-column label="物料编码" align="center" prop="itemCode" min-width="120" />
|
|
<el-table-column label="物料名称" align="center" prop="itemName" min-width="140" />
|
|
<el-table-column label="规格型号" align="center" prop="specification" min-width="120" />
|
|
<el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
|
|
<el-table-column label="出库数量" align="center" prop="quantity" width="100" />
|
|
<el-table-column label="批次编码" align="center" prop="batchCode" min-width="120" />
|
|
<el-table-column label="仓库" align="center" prop="warehouseName" min-width="120" />
|
|
<el-table-column label="库区" align="center" prop="locationName" min-width="120" />
|
|
<el-table-column label="库位" align="center" prop="areaName" min-width="120" />
|
|
<el-table-column
|
|
v-if="isUpdate"
|
|
label="操作"
|
|
align="center"
|
|
width="120"
|
|
fixed="right"
|
|
>
|
|
<template #default="scope">
|
|
<el-button link type="primary" @click="openForm('update', scope.row.id)">
|
|
编辑
|
|
</el-button>
|
|
<el-button link type="danger" @click="handleDelete(scope.row.id)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<Pagination
|
|
:total="total"
|
|
v-model:page="queryParams.pageNo"
|
|
v-model:limit="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 添加/编辑行弹窗 -->
|
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
:rules="formRules"
|
|
label-width="110px"
|
|
v-loading="formLoading"
|
|
>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="物料" prop="itemId">
|
|
<MdItemSelect
|
|
v-model="formData.itemId"
|
|
placeholder="请选择物料"
|
|
class="!w-1/1"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="出库数量" prop="quantity">
|
|
<el-input-number
|
|
v-model="formData.quantity"
|
|
:precision="2"
|
|
:min="0.01"
|
|
controls-position="right"
|
|
class="!w-1/1"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="批次编码" prop="batchCode">
|
|
<el-input v-model="formData.batchCode" placeholder="请输入批次编码" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="仓库" prop="warehouseId">
|
|
<WmWarehouseSelect
|
|
v-model="formData.warehouseId"
|
|
@change="handleWarehouseChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="库区" prop="locationId">
|
|
<WmWarehouseLocationSelect
|
|
v-model="formData.locationId"
|
|
:warehouse-id="formData.warehouseId"
|
|
@change="handleLocationChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="库位" prop="areaId">
|
|
<WmWarehouseAreaSelect
|
|
v-model="formData.areaId"
|
|
:location-id="formData.locationId"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { WmMiscIssueLineApi, WmMiscIssueLineVO } from '@/api/mes/wm/miscissue/line'
|
|
import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
|
|
import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
|
|
import WmWarehouseLocationSelect from '@/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue'
|
|
import WmWarehouseAreaSelect from '@/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue'
|
|
|
|
defineOptions({ name: 'MiscIssueLineList' })
|
|
|
|
const props = defineProps<{
|
|
issueId: number
|
|
formType: string
|
|
}>()
|
|
|
|
const { t } = useI18n() // 国际化
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
const isUpdate = computed(() => ['create', 'update'].includes(props.formType)) // 是否为编辑模式
|
|
|
|
// ==================== 列表 ====================
|
|
const loading = ref(false) // 列表的加载中
|
|
const list = ref<WmMiscIssueLineVO[]>([]) // 行列表
|
|
const total = ref(0) // 列表的总页数
|
|
const queryParams = reactive({
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
issueId: undefined as number | undefined
|
|
})
|
|
|
|
/** 查询行列表 */
|
|
const getList = async () => {
|
|
loading.value = true
|
|
try {
|
|
queryParams.issueId = props.issueId
|
|
const data = await WmMiscIssueLineApi.getMiscIssueLinePage(queryParams)
|
|
list.value = data.list
|
|
total.value = data.total
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
/** 删除按钮操作 */
|
|
const handleDelete = async (id: number) => {
|
|
try {
|
|
await message.delConfirm()
|
|
await WmMiscIssueLineApi.deleteMiscIssueLine(id)
|
|
message.success(t('common.delSuccess'))
|
|
await getList()
|
|
} catch {}
|
|
}
|
|
|
|
// ==================== 添加/编辑表单 ====================
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
const dialogTitle = ref('') // 弹窗的标题
|
|
const formLoading = ref(false) // 表单的加载中
|
|
const lineFormType = ref('') // 行表单的类型
|
|
const formData = ref({
|
|
id: undefined,
|
|
issueId: undefined as number | undefined,
|
|
itemId: undefined,
|
|
quantity: undefined,
|
|
batchCode: undefined,
|
|
warehouseId: undefined,
|
|
locationId: undefined,
|
|
areaId: undefined,
|
|
remark: undefined
|
|
})
|
|
const formRules = reactive({
|
|
itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
|
|
quantity: [
|
|
{ required: true, message: '出库数量不能为空', trigger: 'blur' },
|
|
{ type: 'number', min: 0.01, message: '出库数量必须大于等于0.01', trigger: 'blur' }
|
|
]
|
|
})
|
|
const formRef = ref() // 表单 Ref
|
|
|
|
/** 仓库变化时，清空库区和库位 */
|
|
const handleWarehouseChange = () => {
|
|
formData.value.locationId = undefined
|
|
formData.value.areaId = undefined
|
|
}
|
|
|
|
/** 库区变化时，清空库位 */
|
|
const handleLocationChange = () => {
|
|
formData.value.areaId = undefined
|
|
}
|
|
|
|
/** 打开表单弹窗 */
|
|
const openForm = async (type: string, id?: number) => {
|
|
dialogVisible.value = true
|
|
dialogTitle.value = type === 'create' ? '添加物料出库单行' : '修改物料出库单行'
|
|
lineFormType.value = type
|
|
resetForm()
|
|
if (id) {
|
|
formLoading.value = true
|
|
try {
|
|
formData.value = await WmMiscIssueLineApi.getMiscIssueLine(id)
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
}
|
|
|
|
/** 提交表单 */
|
|
const submitForm = async () => {
|
|
await formRef.value.validate()
|
|
formLoading.value = true
|
|
try {
|
|
const data = { ...formData.value, issueId: props.issueId } as unknown as WmMiscIssueLineVO
|
|
if (lineFormType.value === 'create') {
|
|
await WmMiscIssueLineApi.createMiscIssueLine(data)
|
|
message.success(t('common.createSuccess'))
|
|
} else {
|
|
await WmMiscIssueLineApi.updateMiscIssueLine(data)
|
|
message.success(t('common.updateSuccess'))
|
|
}
|
|
dialogVisible.value = false
|
|
await getList()
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
|
|
/** 重置表单 */
|
|
const resetForm = () => {
|
|
formData.value = {
|
|
id: undefined,
|
|
issueId: undefined,
|
|
itemId: undefined,
|
|
quantity: undefined,
|
|
batchCode: undefined,
|
|
warehouseId: undefined,
|
|
locationId: undefined,
|
|
areaId: undefined,
|
|
remark: undefined
|
|
}
|
|
formRef.value?.resetFields()
|
|
}
|
|
|
|
/** 初始化 */
|
|
onMounted(async () => {
|
|
await getList()
|
|
})
|
|
</script>
|