You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

241 lines
7.1 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1080">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="auto"
v-loading="formLoading"
:disabled="disabled"
>
<el-form-item prop="code">
<template #label>
<span>
{{ t('ErpStock.In.no') }}
<el-tooltip :content="t('ErpStock.In.no')" placement="top">
<Icon icon="ep:question-filled" />
</el-tooltip>
</span>
</template>
<el-row :gutter="10" style="width: 100%">
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
<el-input
:disabled="formData.isCode == true || formType === 'update'"
v-model="formData.no"
:placeholder="t('common.code')"
/>
</el-col>
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
<div>
<el-switch
v-model="formData.isCode"
:disabled="formType === 'update'"
/>
</div>
</el-col>
</el-row>
</el-form-item>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item :label="t('ErpStock.In.inType')" prop="inType">
<el-select
v-model="formData.inType"
clearable
filterable
:placeholder="t('ErpStock.In.placeholderInType')"
class="!w-1/1"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('ErpStock.In.inTime')" prop="inTime">
<el-date-picker
v-model="formData.inTime"
type="date"
value-format="x"
:placeholder="t('ErpStock.In.placeholderInTime')"
class="!w-1/1"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="供应商" prop="supplierId">
<el-select
v-model="formData.supplierId"
clearable
filterable
placeholder="请选择供应商"
class="!w-1/1"
>
<el-option
v-for="item in supplierList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="8">
<el-form-item :label="t('ErpStock.In.remark')" prop="remark">
<el-input
type="textarea"
v-model="formData.remark"
:rows="1"
:placeholder="t('ErpStock.In.placeholderRemark')"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('ErpStock.In.file')" prop="fileUrl">
<UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 子表的表单 -->
<ContentWrap>
<el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
<el-tab-pane :label="t('ErpStock.In.list')" name="item">
<StockInItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
</el-tab-pane>
</el-tabs>
</ContentWrap>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
{{ t('common.ok') }}
</el-button>
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { StockInApi, StockInVO } from '@/api/erp/stock/in'
import StockInItemForm from './components/StockInItemForm.vue'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
/** ERP */
defineOptions({ name: 'StockInForm' })
const { t } = useI18n() //
const message = useMessage() //
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
const formLoading = ref(false) // 12
const formType = ref('') // create - update - detail -
const formData = ref({
id: undefined,
supplierId: undefined,
inTime: undefined,
inType: undefined,
remark: undefined,
fileUrl: '',
items: [],
isCode: undefined,
no: undefined
})
const formRules = reactive({
inTime: [{ required: true, message: t('ErpStock.In.validatorInTimeRequired'), trigger: 'blur' }],
inType: [{ required: true, message: t('ErpStock.In.validatorInTypeRequired'), trigger: 'blur' }]
})
const disabled = computed(() => formType.value === 'detail')
const formRef = ref() // 表单 Ref
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const options = [
{
value: '其他入库',
label: t('ErpStock.In.tabOther')
},
{
value: '备件入库',
label: t('ErpStock.In.tabPart')
},
// {
// value: '原料入库',
// label: '原料入库',
// },
{
value: '产品入库',
label: t('ErpStock.In.tabProduct')
},
// {
// value: '生产入库',
// label: '生产入库',
// disabled: true,
// },
]
/** 子表的表单 */
const subTabsName = ref('item')
const itemFormRef = ref()
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await StockInApi.getStockIn(id)
} finally {
formLoading.value = false
}
}
// 加载供应商列表
supplierList.value = await SupplierApi.getSupplierSimpleList()
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
await itemFormRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as StockInVO
if (formType.value === 'create') {
await StockInApi.createStockIn(data)
message.success(t('common.createSuccess'))
} else {
await StockInApi.updateStockIn(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
supplierId: undefined,
inTime: undefined,
remark: undefined,
fileUrl: undefined,
items: [],
isCode: true,
no: undefined
}
formRef.value?.resetFields()
}
</script>