| | |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="规格型号" prop="drawingNumber"> |
| | | <el-input |
| | | v-model="modelForm.drawingNumber" |
| | | placeholder="请输入规格型号" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="单位" prop="unit"> |
| | | <el-input |
| | | <el-select |
| | | v-model="modelForm.unit" |
| | | placeholder="请输入单位" |
| | | placeholder="请选择单位" |
| | | clearable |
| | | /> |
| | | style="width: 100%" |
| | | > |
| | | <el-option label="件" value="件" /> |
| | | <el-option label="套" value="套" /> |
| | | <el-option label="台" value="台" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="产品属性" prop="productType"> |
| | | <el-select |
| | |
| | | <el-option label="外购" :value="2" /> |
| | | <el-option label="委外" :value="3" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="工艺路线" prop="routeId"> |
| | | <el-select |
| | | v-model="modelForm.routeId" |
| | | placeholder="请选择工艺路线" |
| | | clearable |
| | | style="width: 100%" |
| | | filterable |
| | | > |
| | | <el-option |
| | | v-for="item in processRouteList" |
| | | :key="item.id" |
| | | :label="item.processRouteName" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="上传图纸" prop="drawingFile"> |
| | | <el-upload |
| | | v-model:file-list="drawingFileList" |
| | | :action="upload.url" |
| | | :headers="upload.headers" |
| | | :data="upload.data" |
| | | :on-success="handleDrawingUploadSuccess" |
| | | :on-remove="handleDrawingRemove" |
| | | :before-upload="handleDrawingBeforeUpload" |
| | | :limit="1" |
| | | accept=".pdf,.jpg,.jpeg,.png,.dwg" |
| | | list-type="picture-card" |
| | | > |
| | | <el-icon class="avatar-uploader-icon"><Plus /></el-icon> |
| | | <template #tip> |
| | | <div class="el-upload__tip"> |
| | | 支持 pdf、jpg、jpeg、png、dwg 格式,大小不超过 10MB |
| | | </div> |
| | | </template> |
| | | </el-upload> |
| | | </el-form-item> |
| | | </el-form> |
| | | </FormDialog> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive } from "vue"; |
| | | import { ref, reactive, onMounted } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import { Plus } from "@element-plus/icons-vue"; |
| | | import { getToken } from "@/utils/auth.js"; |
| | | import { FileUpload } from "@/components/Upload"; |
| | | import FormDialog from "@/components/Dialog/FormDialog.vue"; |
| | | import { |
| | | addOrEditProductModel, |
| | |
| | | productListPage, |
| | | downloadTemplate, |
| | | } from "@/api/basicData/product.js"; |
| | | import { listPage as getProcessRouteList } from "@/api/productionManagement/processRoute.js"; |
| | | import ImportExcel from "./ImportExcel/index.vue"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | const tableLoading = ref(false); |
| | | const selectedRows = ref([]); |
| | | const modelFormRef = ref(); |
| | | const processRouteList = ref([]); |
| | | const drawingFileList = ref([]); |
| | | |
| | | const upload = reactive({ |
| | | url: import.meta.env.VITE_APP_BASE_API + "/file/upload", |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | data: { type: 13 }, |
| | | }); |
| | | |
| | | const queryForm = reactive({ |
| | | productName: "", |
| | |
| | | { |
| | | label: "图纸编号", |
| | | prop: "model", |
| | | minWidth: 150, |
| | | }, |
| | | { |
| | | label: "规格型号", |
| | | prop: "drawingNumber", |
| | | minWidth: 150, |
| | | }, |
| | | { |
| | |
| | | productName: "", |
| | | model: "", |
| | | unit: "", |
| | | drawingNumber: "", |
| | | productType: null, |
| | | routeId: null, |
| | | drawingFile: "", |
| | | tempFileIds: [], |
| | | salesLedgerFiles: [], |
| | | }, |
| | | modelRules: { |
| | | productName: [ |
| | |
| | | { max: 50, message: "产品名称不能超过50个字符", trigger: "blur" }, |
| | | ], |
| | | model: [{ required: true, message: "请输入图纸编号", trigger: "blur" }], |
| | | unit: [{ required: true, message: "请输入单位", trigger: "blur" }], |
| | | drawingNumber: [], |
| | | unit: [{ required: true, message: "请选择单位", trigger: "change" }], |
| | | productType: [{ required: true, message: "请选择产品属性", trigger: "change" }], |
| | | }, |
| | | }); |
| | |
| | | modelForm.value.model = ""; |
| | | modelForm.value.id = ""; |
| | | modelForm.value.unit = ""; |
| | | modelForm.value.drawingNumber = ""; |
| | | modelForm.value.productType = null; |
| | | modelForm.value.routeId = null; |
| | | modelForm.value.drawingFile = ""; |
| | | modelForm.value.tempFileIds = []; |
| | | modelForm.value.salesLedgerFiles = []; |
| | | drawingFileList.value = []; |
| | | if (type === "edit") { |
| | | modelForm.value = { ...data }; |
| | | modelForm.value.tempFileIds = data.tempFileIds || []; |
| | | modelForm.value.salesLedgerFiles = data.salesLedgerFiles || []; |
| | | if (data.drawingFile) { |
| | | drawingFileList.value = [{ |
| | | name: data.drawingFile.split('/').pop(), |
| | | url: data.drawingFile |
| | | }]; |
| | | } |
| | | } |
| | | }; |
| | | |
| | |
| | | proxy.download("/basic/product/downloadTemplate", {}, "产品导入模板.xlsx"); |
| | | }; |
| | | |
| | | getModelList(); |
| | | const getProcessRouteListData = () => { |
| | | getProcessRouteList({ current: 1, size: 1000 }).then((res) => { |
| | | processRouteList.value = res.data.records || []; |
| | | }).catch(() => { |
| | | processRouteList.value = []; |
| | | }); |
| | | }; |
| | | |
| | | const handleDrawingBeforeUpload = (file) => { |
| | | const isAllowed = [ |
| | | 'application/pdf', |
| | | 'image/jpeg', |
| | | 'image/jpg', |
| | | 'image/png', |
| | | 'application/dwg' |
| | | ].includes(file.type) || file.name.endsWith('.dwg'); |
| | | const isLt10M = file.size / 1024 / 1024 < 10; |
| | | |
| | | if (!isAllowed) { |
| | | proxy.$modal.msgError("只能上传 pdf、jpg、jpeg、png、dwg 格式的文件!"); |
| | | return false; |
| | | } |
| | | if (!isLt10M) { |
| | | proxy.$modal.msgError("上传文件大小不能超过 10MB!"); |
| | | return false; |
| | | } |
| | | return true; |
| | | }; |
| | | |
| | | const handleDrawingUploadSuccess = (response, file, fileList) => { |
| | | console.log('上传成功响应', response); |
| | | console.log('response.data', response.data); |
| | | if (response.code === 200) { |
| | | modelForm.value.tempFileIds = [response.data?.tempId]; |
| | | modelForm.value.salesLedgerFiles = [{ |
| | | tempId: response.data?.tempId, |
| | | originalName: response.data?.originalName || file.name, |
| | | tempPath: response.data?.tempPath, |
| | | type: response.data?.type || 13 |
| | | }]; |
| | | proxy.$modal.msgSuccess("上传成功"); |
| | | } else { |
| | | proxy.$modal.msgError(response.msg || "上传失败"); |
| | | } |
| | | }; |
| | | |
| | | const handleDrawingRemove = (file) => { |
| | | modelForm.value.tempFileIds = []; |
| | | modelForm.value.salesLedgerFiles = []; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getModelList(); |
| | | getProcessRouteListData(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | |
| | | margin-top: 16px; |
| | | } |
| | | |
| | | .avatar-uploader-icon { |
| | | font-size: 28px; |
| | | color: #8c939d; |
| | | width: 148px; |
| | | height: 148px; |
| | | text-align: center; |
| | | line-height: 148px; |
| | | } |
| | | |
| | | :deep(.el-upload--picture-card) { |
| | | width: 148px; |
| | | height: 148px; |
| | | } |
| | | |
| | | :deep(.el-upload-list__item) { |
| | | width: 148px; |
| | | height: 148px; |
| | | } |
| | | |
| | | :deep(.el-upload__tip) { |
| | | font-size: 12px; |
| | | color: #909399; |
| | | margin-top: 8px; |
| | | } |
| | | |
| | | :deep(.el-dialog__body) { |
| | | padding: 20px 24px; |
| | | } |