| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div style="text-align: right; margin-bottom: 10px;"> |
| | | <el-button type="info" |
| | | plain |
| | | icon="Upload" |
| | | @click="handleImport" |
| | | v-hasPermi="['product:bom:import']">导入</el-button> |
| | | <el-button type="warning" |
| | | plain |
| | | icon="Download" |
| | | @click="handleExport" |
| | | :disabled="selectedRows.length !== 1" |
| | | v-hasPermi="['product:bom:export']">导出</el-button> |
| | | <el-button type="primary" |
| | | @click="handleAdd">新增</el-button> |
| | | <el-button type="danger" |
| | | plain |
| | | @click="handleBatchDelete" |
| | | :disabled="selectedRows.length === 0">删除</el-button> |
| | | <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"> |
| | | <!-- 搜索区域 --> |
| | | <div class="search-form"> |
| | | <el-form :inline="true" |
| | | :model="searchForm"> |
| | | <el-form-item label="产品类型" |
| | | style="margin-bottom: 0px !important;"> |
| | | <el-select v-model="searchForm.dictCode" |
| | | style="width: 200px;" |
| | | placeholder="请选择产品类型" |
| | | clearable> |
| | | <el-option v-for="option in productTypeOptions" |
| | | :key="option.dictCode" |
| | | :label="option.dictLabel" |
| | | :value="option.dictCode" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item style="margin-bottom: 0px !important;"> |
| | | <el-button type="primary" |
| | | @click="handleSearch">搜索</el-button> |
| | | <el-button @click="handleReset">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <!-- 按钮区域 --> |
| | | <div> |
| | | <el-button type="info" |
| | | plain |
| | | icon="Upload" |
| | | @click="handleImport" |
| | | v-hasPermi="['product:bom:import']">导入</el-button> |
| | | <el-button type="warning" |
| | | plain |
| | | icon="Download" |
| | | @click="handleExport" |
| | | :disabled="selectedRows.length !== 1" |
| | | v-hasPermi="['product:bom:export']">导出</el-button> |
| | | <el-button type="primary" |
| | | @click="handleAdd">新增</el-button> |
| | | <el-button type="danger" |
| | | plain |
| | | @click="handleBatchDelete" |
| | | :disabled="selectedRows.length === 0">删除</el-button> |
| | | </div> |
| | | </div> |
| | | <PIMTable rowKey="id" |
| | | :column="tableColumn" |
| | |
| | | :model="form" |
| | | :rules="rules" |
| | | label-width="120px"> |
| | | <el-form-item label="产品名称" |
| | | prop="productModelId"> |
| | | <el-button type="primary" |
| | | @click="showProductSelectDialog = true"> |
| | | {{ form.productName || '选择产品' }}-{{ form.productModelName }} |
| | | </el-button> |
| | | <el-form-item label="产品类型" |
| | | prop="dictCode"> |
| | | <el-select v-model="form.dictCode" |
| | | placeholder="请选择产品类型" |
| | | clearable> |
| | | <el-option v-for="option in productTypeOptions" |
| | | :key="option.dictCode" |
| | | :label="option.dictLabel" |
| | | :value="option.dictCode" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="版本号" |
| | | prop="version"> |
| | |
| | | @click="handleSubmit">确定</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | <!-- 产品选择弹窗 --> |
| | | <ProductSelectDialog v-model="showProductSelectDialog" |
| | | @confirm="handleProductSelect" |
| | | single /> |
| | | <!-- BOM导入对话框 --> |
| | | <ImportDialog ref="uploadRef" |
| | | v-model="upload.open" |
| | |
| | | :on-progress="handleFileUploadProgress" |
| | | :on-success="handleFileSuccess" |
| | | :show-download-template="true" |
| | | :show-product-type-select="true" |
| | | @confirm="submitFileForm" |
| | | @download-template="handleDownloadTemplate" |
| | | @close="handleImportClose" /> |
| | |
| | | import { useRouter } from "vue-router"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue"; |
| | | import ImportDialog from "@/components/Dialog/ImportDialog.vue"; |
| | | import ImportDialog from "./ImportDialog.vue"; |
| | | import { getDicts } from "@/api/system/dict/data"; |
| | | |
| | | const router = useRouter(); |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | minWidth: 140, |
| | | }, |
| | | { |
| | | label: "产品编码", |
| | | prop: "productCode", |
| | | label: "产品类型", |
| | | prop: "dictLabel", |
| | | dataType: "tag", |
| | | formatType: params => { |
| | | if (params == "3.5砌块") { |
| | | return "warning"; |
| | | } else if (params == "5.0砌块") { |
| | | return "primary"; |
| | | } else if (params == "板材") { |
| | | return "success"; |
| | | } else { |
| | | return "info"; |
| | | } |
| | | }, |
| | | }, |
| | | // { |
| | | // label: "产品编码", |
| | | // prop: "productCode", |
| | | |
| | | minWidth: 160, |
| | | }, |
| | | { |
| | | label: "产品名称", |
| | | prop: "productName", |
| | | // minWidth: 160, |
| | | // }, |
| | | // { |
| | | // label: "产品名称", |
| | | // prop: "productName", |
| | | |
| | | minWidth: 160, |
| | | }, |
| | | { |
| | | label: "规格型号", |
| | | prop: "productModelName", |
| | | minWidth: 140, |
| | | }, |
| | | // minWidth: 160, |
| | | // }, |
| | | // { |
| | | // label: "规格型号", |
| | | // prop: "productModelName", |
| | | // minWidth: 140, |
| | | // }, |
| | | { |
| | | label: "版本号", |
| | | prop: "version", |
| | | width: 100, |
| | | }, |
| | | { |
| | | label: "备注", |
| | |
| | | const data = reactive({ |
| | | form: { |
| | | id: undefined, |
| | | productName: "", |
| | | productModelName: "", |
| | | productModelId: "", |
| | | dictCode: "", |
| | | remark: "", |
| | | version: "", |
| | | }, |
| | | rules: { |
| | | productModelId: [ |
| | | { required: true, message: "请选择产品", trigger: "change" }, |
| | | dictCode: [ |
| | | { required: true, message: "请选择产品类型", trigger: "change" }, |
| | | ], |
| | | version: [{ required: true, message: "请输入版本号", trigger: "blur" }], |
| | | }, |
| | | searchForm: { |
| | | dictCode: "", |
| | | }, |
| | | productTypeOptions: [], |
| | | }); |
| | | |
| | | const { form, rules } = toRefs(data); |
| | | const { form, rules, searchForm, productTypeOptions } = toRefs(data); |
| | | |
| | | // 表格选择数据 |
| | | const handleSelectionChange = selection => { |
| | |
| | | getList(); |
| | | }; |
| | | |
| | | // 获取产品类型字典 |
| | | const getProductTypeOptions = () => { |
| | | getDicts("product_type") |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | productTypeOptions.value = res.data; |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | console.error("获取产品类型字典失败:", err); |
| | | }); |
| | | }; |
| | | |
| | | // 搜索 |
| | | const handleSearch = () => { |
| | | getList(); |
| | | }; |
| | | |
| | | // 重置 |
| | | const handleReset = () => { |
| | | searchForm.value.dictCode = ""; |
| | | getList(); |
| | | }; |
| | | |
| | | // 查询列表 |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | listPage({ |
| | | current: page.current, |
| | | size: page.size, |
| | | dictCode: searchForm.value.dictCode, |
| | | }) |
| | | .then(res => { |
| | | const records = res?.data?.records || []; |
| | |
| | | operationType.value = "add"; |
| | | Object.assign(form.value, { |
| | | id: undefined, |
| | | productName: "", |
| | | productModelName: "", |
| | | productModelId: "", |
| | | dictCode: "", |
| | | remark: "", |
| | | version: "", |
| | | }); |
| | |
| | | operationType.value = "edit"; |
| | | Object.assign(form.value, { |
| | | id: row.id, |
| | | productName: row.productName || "", |
| | | productModelName: row.productModelName || "", |
| | | productModelId: row.productModelId || "", |
| | | dictCode: row.dictCode || "", |
| | | remark: row.remark || "", |
| | | version: row.version || "", |
| | | }); |
| | |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getProductTypeOptions(); |
| | | getList(); |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .search-form { |
| | | :deep(.search-form) { |
| | | margin-bottom: 0px !important; |
| | | } |
| | | } |
| | | </style> |