|
|
<template>
|
|
|
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
|
|
<el-form
|
|
|
ref="formRef"
|
|
|
:model="formData"
|
|
|
:rules="formRules"
|
|
|
label-width="120px"
|
|
|
v-loading="formLoading"
|
|
|
>
|
|
|
<el-form-item :label="t('MoldManagement.Mold.code')" prop="code">
|
|
|
<el-row :gutter="10" style="width: 100%">
|
|
|
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
|
|
|
<el-input
|
|
|
v-model="formData.code"
|
|
|
:placeholder="t('MoldManagement.Mold.placeholderCode')"
|
|
|
:disabled="formData.isCode == true || formType === 'update'"
|
|
|
/>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
|
|
|
<div>
|
|
|
<el-switch
|
|
|
v-model="formData.isCode"
|
|
|
:disabled="formType === 'update'"
|
|
|
@change="handleCodeAutoChange"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('MoldManagement.Mold.name')" prop="name">
|
|
|
<el-input
|
|
|
v-model="formData.name"
|
|
|
:placeholder="t('MoldManagement.Mold.placeholderName')"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('MoldManagement.Mold.unit')" prop="unitId">
|
|
|
<el-select
|
|
|
v-model="formData.unitId"
|
|
|
clearable
|
|
|
:placeholder="t('MoldManagement.Mold.placeholderUnit')"
|
|
|
class="w-1/1"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="unit in unitList"
|
|
|
:key="unit.id"
|
|
|
:label="unit.name"
|
|
|
:value="unit.id"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="预期寿命" prop="useTime">
|
|
|
<el-input-number
|
|
|
v-model="formData.useTime"
|
|
|
:min="0"
|
|
|
:precision="2"
|
|
|
class="!w-1/1"
|
|
|
placeholder="输入预期寿命(小时)"
|
|
|
/>
|
|
|
</el-form-item> -->
|
|
|
<el-form-item :label="t('MoldManagement.Mold.inTime')" prop="inTime">
|
|
|
<el-date-picker
|
|
|
v-model="formData.inTime"
|
|
|
type="date"
|
|
|
value-format="x"
|
|
|
:placeholder="t('MoldManagement.Mold.placeholderInTime')"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="status">
|
|
|
<template #label>
|
|
|
<span>
|
|
|
{{ t('MoldManagement.Mold.status') }}
|
|
|
<el-tooltip :content="t('MoldManagement.Mold.statusTooltip')" placement="top">
|
|
|
<Icon icon="ep:question-filled" />
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
</template>
|
|
|
<el-radio-group v-model="formData.status" :disabled = "formType == 'create'">
|
|
|
<el-radio
|
|
|
v-for="dict in getIntDictOptions(DICT_TYPE.ERP_MOLD_STATUS)"
|
|
|
:key="dict.value"
|
|
|
:label="dict.value"
|
|
|
>
|
|
|
{{ dict.label }}
|
|
|
</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="formType === 'update'" :label="t('MoldManagement.Mold.qrcode')" prop="qrcodeUrl">
|
|
|
<QrcodeActionCard
|
|
|
:image-url="formData.qrcodeUrl"
|
|
|
:print-id="formData.id"
|
|
|
:print-title="`${formData.name || '模具'}码打印预览`"
|
|
|
:print-paper-width="80"
|
|
|
:print-paper-height="80"
|
|
|
:print-max-width="220"
|
|
|
:empty-text="t('MoldManagement.Mold.qrcodeEmpty')"
|
|
|
:error-text="t('MoldManagement.Mold.qrcodeLoadError')"
|
|
|
:refresh-url="getQrcodeRefreshUrl()"
|
|
|
:refresh-disabled="!formData.id || !formData.code"
|
|
|
refresh-confirm-text="确认刷新该模具二维码吗？"
|
|
|
@refresh-success="handleQrcodeRefreshSuccess"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('MoldManagement.Mold.images')" prop="images">
|
|
|
<UploadImg v-model="formData.images" />
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('MoldManagement.Mold.remark')" prop="remark">
|
|
|
<el-input
|
|
|
v-model="formData.remark"
|
|
|
:placeholder="t('MoldManagement.Mold.placeholderRemark')"
|
|
|
type="textarea"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('MoldManagement.Mold.isEnable')" prop="isEnable">
|
|
|
<el-radio-group v-model="formData.isEnable">
|
|
|
<el-radio
|
|
|
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
|
|
:key="dict.value"
|
|
|
:label="dict.value"
|
|
|
>
|
|
|
{{ dict.label }}
|
|
|
</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="t('MoldManagement.Mold.fileUrl')" prop="fileUrl">
|
|
|
<UploadFile v-model="formData.fileUrl" :limit="1" :isShowTip="false"/>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">
|
|
|
{{ t('action.save') }}
|
|
|
</el-button>
|
|
|
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
|
|
|
</template>
|
|
|
</Dialog>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import { getIntDictOptions, DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
|
|
|
import { MoldBrandApi } from '@/api/erp/mold'
|
|
|
import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
|
|
|
import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
|
|
|
const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表
|
|
|
|
|
|
const { t } = useI18n() // 国际化
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
const dialogTitle = ref('') // 弹窗的标题
|
|
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
const formData = ref({
|
|
|
id: undefined,
|
|
|
code: undefined,
|
|
|
isCode: undefined,
|
|
|
name: undefined,
|
|
|
unitId: undefined,
|
|
|
machineId: undefined,
|
|
|
useTime: undefined,
|
|
|
inTime: undefined,
|
|
|
status: undefined,
|
|
|
images: undefined,
|
|
|
qrcodeUrl: undefined,
|
|
|
remark: undefined,
|
|
|
isEnable: undefined,
|
|
|
fileUrl: '',
|
|
|
brandId: undefined
|
|
|
})
|
|
|
const validateCode = (_rule, value, callback) => {
|
|
|
if (Boolean(formData.value.isCode)) {
|
|
|
callback()
|
|
|
return
|
|
|
}
|
|
|
if (value === undefined || value === null || String(value).trim() === '') {
|
|
|
callback(new Error(t('MoldManagement.Mold.validatorCodeRequired')))
|
|
|
return
|
|
|
}
|
|
|
callback()
|
|
|
}
|
|
|
const formRules = reactive({
|
|
|
code: [
|
|
|
{ validator: validateCode, trigger: ['blur', 'change'] }
|
|
|
],
|
|
|
name: [
|
|
|
{ required: true, message: t('MoldManagement.Mold.validatorNameRequired'), trigger: 'blur' }
|
|
|
],
|
|
|
unitId: [
|
|
|
{ required: true, message: t('MoldManagement.Mold.validatorUnitRequired'), trigger: 'blur' }
|
|
|
],
|
|
|
inTime: [
|
|
|
{ required: true, message: t('MoldManagement.Mold.validatorInTimeRequired'), trigger: 'blur' }
|
|
|
],
|
|
|
isEnable: [
|
|
|
{ required: true, message: t('MoldManagement.Mold.validatorIsEnableRequired'), trigger: 'blur' }
|
|
|
],
|
|
|
brandId: [
|
|
|
{ required: true, message: t('MoldManagement.Mold.validatorBrandRequired'), trigger: 'blur' }
|
|
|
]
|
|
|
})
|
|
|
const formRef = ref() // 表单 Ref
|
|
|
|
|
|
/** 打开弹窗 */
|
|
|
const open = async (type: string, id?: number, brandId: number) => {
|
|
|
dialogVisible.value = true
|
|
|
dialogTitle.value = t('action.' + type)
|
|
|
formType.value = type
|
|
|
resetForm()
|
|
|
formData.value.brandId = brandId
|
|
|
// 修改时，设置数据
|
|
|
if (id) {
|
|
|
formLoading.value = true
|
|
|
try {
|
|
|
formData.value = await MoldBrandApi.getMold(id)
|
|
|
} finally {
|
|
|
formLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 产品单位
|
|
|
unitList.value = await ProductUnitApi.getProductUnitSimpleList()
|
|
|
}
|
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
|
|
|
const handleCodeAutoChange = (value: boolean) => {
|
|
|
if (value) {
|
|
|
formData.value.code = undefined
|
|
|
}
|
|
|
formRef.value?.clearValidate('code')
|
|
|
}
|
|
|
|
|
|
const getQrcodeRefreshUrl = () => {
|
|
|
if (!formData.value.id || !formData.value.code) return ''
|
|
|
return `/erp/mold-brand/regenerate-code?id=${formData.value.id}&code=${encodeURIComponent(String(formData.value.code))}`
|
|
|
}
|
|
|
|
|
|
const handleQrcodeRefreshSuccess = async (data: any) => {
|
|
|
if (!formData.value.id) return
|
|
|
if (data?.qrcodeUrl) {
|
|
|
formData.value.qrcodeUrl = data.qrcodeUrl
|
|
|
return
|
|
|
}
|
|
|
const moldData = await MoldBrandApi.getMold(formData.value.id)
|
|
|
formData.value.qrcodeUrl = moldData?.qrcodeUrl
|
|
|
formData.value.code = moldData?.code ?? formData.value.code
|
|
|
}
|
|
|
|
|
|
/** 提交表单 */
|
|
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
|
const submitForm = async () => {
|
|
|
// 校验表单
|
|
|
await formRef.value.validate()
|
|
|
// 提交请求
|
|
|
formLoading.value = true
|
|
|
try {
|
|
|
const data = formData.value
|
|
|
if (formType.value === 'create') {
|
|
|
await MoldBrandApi.createMold(data)
|
|
|
message.success(t('common.createSuccess'))
|
|
|
} else {
|
|
|
await MoldBrandApi.updateMold(data)
|
|
|
message.success(t('common.updateSuccess'))
|
|
|
}
|
|
|
dialogVisible.value = false
|
|
|
// 发送操作成功的事件
|
|
|
emit('success')
|
|
|
} finally {
|
|
|
formLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 重置表单 */
|
|
|
const resetForm = () => {
|
|
|
formData.value = {
|
|
|
id: undefined,
|
|
|
code: undefined,
|
|
|
isCode: true,
|
|
|
name: undefined,
|
|
|
unitId: undefined,
|
|
|
machineId: undefined,
|
|
|
useTime: 0,
|
|
|
inTime: undefined,
|
|
|
status: 3,
|
|
|
images: undefined,
|
|
|
qrcodeUrl: undefined,
|
|
|
remark: undefined,
|
|
|
isEnable: true,
|
|
|
fileUrl: '',
|
|
|
brandId: undefined
|
|
|
}
|
|
|
formRef.value?.resetFields()
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="scss"></style>
|