|
|
<template>
|
|
|
<div class="dv-repair-panel">
|
|
|
<div class="dv-repair-panel__header">
|
|
|
<div class="dv-repair-panel__title">
|
|
|
<span>{{ dialogTitle }}</span>
|
|
|
<dict-tag
|
|
|
v-if="formType === 'detail' && formData.status !== undefined"
|
|
|
class="ml-8px"
|
|
|
:type="DICT_TYPE.ERP_AUDIT_STATUS"
|
|
|
:value="formData.status"
|
|
|
/>
|
|
|
</div>
|
|
|
<el-button text @click="closeForm">
|
|
|
<Icon icon="ep:close" />
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<div class="dv-repair-dialog" v-loading="formLoading">
|
|
|
<el-form
|
|
|
ref="formRef"
|
|
|
:model="formData"
|
|
|
:rules="formRules"
|
|
|
label-width="auto"
|
|
|
:disabled="disabled"
|
|
|
>
|
|
|
<el-form-item prop="code">
|
|
|
<template #label>
|
|
|
<span>
|
|
|
{{ t('ErpStock.Out.no') }}
|
|
|
<el-tooltip :content="t('ErpStock.Out.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.Out.outType')" prop="outType">
|
|
|
<el-select
|
|
|
v-model="formData.outType"
|
|
|
clearable
|
|
|
filterable
|
|
|
:placeholder="t('ErpStock.Out.placeholderOutType')"
|
|
|
class="!w-1/1"
|
|
|
@change="handleOutTypeChange"
|
|
|
>
|
|
|
<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.Out.outTime')" prop="outTime">
|
|
|
<el-date-picker
|
|
|
v-model="formData.outTime"
|
|
|
type="date"
|
|
|
value-format="x"
|
|
|
:placeholder="t('ErpStock.Out.placeholderOutTime')"
|
|
|
class="!w-1/1"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item :label="t('ErpStock.Out.stockUser')" prop="stockUserId">
|
|
|
<el-select
|
|
|
v-model="formData.stockUserId"
|
|
|
clearable
|
|
|
filterable
|
|
|
:placeholder="t('ErpStock.Out.placeholderStockUser')"
|
|
|
class="!w-1/1"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in userList"
|
|
|
:key="String(item.id)"
|
|
|
:label="item.nickname"
|
|
|
:value="String(item.id)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item :label="t('ErpStock.Out.remark')" prop="remark">
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
v-model="formData.remark"
|
|
|
:rows="1"
|
|
|
:placeholder="t('ErpStock.Out.placeholderRemark')"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item :label="t('ErpStock.Out.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.Out.list')" name="item">
|
|
|
<StockOutItemForm
|
|
|
ref="itemFormRef"
|
|
|
:items="formData.items"
|
|
|
:out-type="formData.outType"
|
|
|
:disabled="disabled"
|
|
|
/>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane v-if="showAuditRecordTab" :label="t('ErpStock.Out.auditRecord')" name="auditRecord">
|
|
|
<el-table
|
|
|
v-loading="auditRecordLoading"
|
|
|
:data="auditRecordList"
|
|
|
:stripe="true"
|
|
|
:show-overflow-tooltip="true"
|
|
|
>
|
|
|
<el-table-column type="index" :label="t('ErpStock.Out.index')" align="center" width="80" />
|
|
|
<el-table-column :label="t('ErpStock.Out.operator')" align="center" prop="creatorName" min-width="120" />
|
|
|
<el-table-column :label="t('ErpStock.Out.operateTime')" align="center" prop="createTime" :formatter="dateFormatter" min-width="180" />
|
|
|
<el-table-column :label="t('ErpStock.Out.operateAction')" align="center" min-width="120">
|
|
|
<template #default="{ row }">
|
|
|
{{ formatAuditAction(row) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column :label="t('ErpStock.Out.operateDesc')" align="center" prop="remark" min-width="180" />
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</ContentWrap>
|
|
|
</div>
|
|
|
<div class="dv-repair-footer">
|
|
|
<el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
|
|
|
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
|
|
|
{{ t('common.ok') }}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
|
|
import { dateFormatter, getNowDateTime } from '@/utils/formatTime'
|
|
|
import { StockOutApi, StockOutApproveRecordVO, StockOutVO } from '@/api/erp/stock/out'
|
|
|
import StockOutItemForm from './components/StockOutItemForm.vue'
|
|
|
import { getSimpleUserList, type UserVO } from '@/api/system/user'
|
|
|
|
|
|
/** ERP 其它入库单 表单 */
|
|
|
defineOptions({ name: 'StockOutForm' })
|
|
|
|
|
|
const { t } = useI18n() // 国际化
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
|
|
const dialogTitle = ref('') // 弹窗的标题
|
|
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
|
|
|
const formData = ref({
|
|
|
id: undefined,
|
|
|
outTime: undefined,
|
|
|
outType: undefined,
|
|
|
remark: undefined,
|
|
|
fileUrl: '',
|
|
|
items: [],
|
|
|
isCode: undefined,
|
|
|
no: undefined,
|
|
|
stockUserId: undefined,
|
|
|
status: undefined
|
|
|
})
|
|
|
const formRules = reactive({
|
|
|
outTime: [{ required: true, message: t('ErpStock.Out.validatorOutTimeRequired'), trigger: 'blur' }],
|
|
|
outType: [{ required: true, message: t('ErpStock.Out.validatorOutTypeRequired'), trigger: 'blur' }],
|
|
|
stockUserId: [{ required: true, message: t('ErpStock.Out.validatorStockUserRequired'), trigger: 'change' }]
|
|
|
})
|
|
|
const disabled = computed(() => formType.value === 'detail')
|
|
|
const formRef = ref() // 表单 Ref
|
|
|
const userList = ref<UserVO[]>([]) // 经办人列表
|
|
|
const WAREHOUSE_DOCUMENT_TYPES = 'warehouse_document_types'
|
|
|
const options = computed(() => getStrDictOptions(WAREHOUSE_DOCUMENT_TYPES))
|
|
|
watch(options, (items) => {
|
|
|
if (formType.value === 'create' && !formData.value.outType && items.length) {
|
|
|
formData.value.outType = items[0].value
|
|
|
}
|
|
|
})
|
|
|
/** 子表的表单 */
|
|
|
const subTabsName = ref('item')
|
|
|
const itemFormRef = ref()
|
|
|
const auditRecordLoading = ref(false)
|
|
|
const auditRecordList = ref<StockOutApproveRecordVO[]>([])
|
|
|
const showAuditRecordTab = computed(() => formType.value === 'detail' && Number(formData.value.status) !== 0)
|
|
|
|
|
|
// 用于取消未完成的异步操作
|
|
|
const openRequestId = ref(0)
|
|
|
|
|
|
/** 关闭表单 */
|
|
|
const closeForm = () => {
|
|
|
openRequestId.value++
|
|
|
emit('closed')
|
|
|
}
|
|
|
|
|
|
/** 打开弹窗 */
|
|
|
const open = async (type: string, id?: number) => {
|
|
|
const currentRequestId = ++openRequestId.value
|
|
|
dialogTitle.value = t('action.' + type)
|
|
|
formType.value = type
|
|
|
subTabsName.value = 'item'
|
|
|
resetForm()
|
|
|
// 修改时，设置数据
|
|
|
if (id) {
|
|
|
formLoading.value = true
|
|
|
try {
|
|
|
formData.value = await StockOutApi.getStockOut(id)
|
|
|
formData.value.stockUserId = normalizeUserId(formData.value.stockUserId)
|
|
|
if (type === 'detail' && Number(formData.value.status) !== 0) {
|
|
|
await getAuditRecordList(id)
|
|
|
}
|
|
|
if (currentRequestId !== openRequestId.value) return
|
|
|
} finally {
|
|
|
formLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
userList.value = await getSimpleUserList()
|
|
|
}
|
|
|
|
|
|
const getAuditRecordList = async (id: number) => {
|
|
|
auditRecordLoading.value = true
|
|
|
try {
|
|
|
auditRecordList.value = await StockOutApi.getApproveRecordList(id)
|
|
|
} finally {
|
|
|
auditRecordLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const formatAuditAction = (row: StockOutApproveRecordVO) => {
|
|
|
if (row.actionType === 'SUBMIT') return t('ErpStock.Out.submitAudit')
|
|
|
if (row.actionType === 'AUDIT') return t('ErpStock.Out.auditApprove')
|
|
|
return row.actionType || '-'
|
|
|
}
|
|
|
|
|
|
const normalizeUserId = (value: any) => {
|
|
|
if (value === undefined || value === null || value === '') return undefined
|
|
|
return String(value)
|
|
|
}
|
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
|
|
|
const handleOutTypeChange = () => {
|
|
|
formData.value.items = []
|
|
|
nextTick(() => {
|
|
|
itemFormRef.value?.resetItems?.()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
/** 提交表单 */
|
|
|
const emit = defineEmits(['success', 'closed']) // 定义 success 事件，用于操作成功后的回调
|
|
|
const submitForm = async () => {
|
|
|
// 校验表单
|
|
|
await formRef.value.validate()
|
|
|
await itemFormRef.value.validate()
|
|
|
// 提交请求
|
|
|
formLoading.value = true
|
|
|
try {
|
|
|
const data = formData.value as unknown as StockOutVO
|
|
|
if (formType.value === 'create') {
|
|
|
await StockOutApi.createStockOut(data)
|
|
|
message.success(t('common.createSuccess'))
|
|
|
} else {
|
|
|
await StockOutApi.updateStockOut(data)
|
|
|
message.success(t('common.updateSuccess'))
|
|
|
}
|
|
|
emit('success')
|
|
|
closeForm()
|
|
|
} finally {
|
|
|
formLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 重置表单 */
|
|
|
const resetForm = () => {
|
|
|
formData.value = {
|
|
|
id: undefined,
|
|
|
outTime: getNowDateTime().valueOf(),
|
|
|
outType: options.value[0]?.value,
|
|
|
remark: undefined,
|
|
|
fileUrl: undefined,
|
|
|
items: [],
|
|
|
isCode: true,
|
|
|
no: undefined,
|
|
|
stockUserId: undefined,
|
|
|
status: undefined
|
|
|
}
|
|
|
auditRecordList.value = []
|
|
|
formRef.value?.resetFields()
|
|
|
}
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
openRequestId.value++
|
|
|
})
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.dv-repair-panel {
|
|
|
background: #fff;
|
|
|
border-radius: 12px;
|
|
|
box-shadow: var(--el-box-shadow-light);
|
|
|
}
|
|
|
|
|
|
.dv-repair-panel__header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 16px 20px;
|
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
}
|
|
|
|
|
|
.dv-repair-panel__title {
|
|
|
color: #1f2937;
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.dv-repair-dialog {
|
|
|
max-height: calc(100vh - 220px);
|
|
|
padding: 20px 20px 0;
|
|
|
padding-right: 16px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.dv-repair-footer {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
gap: 12px;
|
|
|
width: 100%;
|
|
|
padding: 16px 20px 20px;
|
|
|
border-top: 1px solid #ebeef5;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
.dv-repair-dialog :deep(.el-col) {
|
|
|
max-width: 100%;
|
|
|
flex: 0 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.dv-repair-panel__header {
|
|
|
padding: 14px 16px;
|
|
|
}
|
|
|
|
|
|
.dv-repair-dialog {
|
|
|
max-height: none;
|
|
|
padding: 16px 16px 0;
|
|
|
overflow-y: visible;
|
|
|
}
|
|
|
|
|
|
.dv-repair-footer {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|