| | |
| | | > |
| | | <template #default="{ node, data }"> |
| | | <div class="custom-tree-node"> |
| | | <span>{{ node.label }}</span> |
| | | <span class="tree-node-content"> |
| | | <el-icon class="orange-icon"> |
| | | <component :is="data.children && data.children.length > 0 |
| | | ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" /> |
| | | </el-icon> |
| | | {{ data.label }} |
| | | </span> |
| | | <div> |
| | | <el-button |
| | | type="primary" |
| | |
| | | > |
| | | 编辑 |
| | | </el-button> |
| | | <el-button type="primary" link @click="openProDia('add', data)"> |
| | | <el-button type="primary" link @click="openProDia('add', data)" :disabled="node.level >= 3"> |
| | | 添加产品 |
| | | </el-button> |
| | | <el-button |
| | |
| | | <div class="right"> |
| | | <div style="margin-bottom: 10px" v-if="isShowButton"> |
| | | <el-button type="primary" @click="openModelDia('add')"> |
| | | 新增规格型号 |
| | | 新增产品高度 |
| | | </el-button> |
| | | <ImportExcel @uploadSuccess="getModelList" /> |
| | | <el-button |
| | |
| | | </el-button> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :isSelection="true" |
| | | :handleSelectionChange="handleSelectionChange" |
| | | @selection-change="handleSelectionChange" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination" |
| | | :total="total" |
| | | ></PIMTable> |
| | | </div> |
| | | <el-dialog v-model="productDia" title="产品" width="400px"> |
| | | <el-dialog v-model="productDia" title="产品" width="400px" @keydown.enter.prevent> |
| | | <el-form |
| | | :model="form" |
| | | label-width="140px" |
| | |
| | | v-model="form.productName" |
| | | placeholder="请输入产品名称" |
| | | clearable |
| | | @keydown.enter.prevent |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-dialog> |
| | | <el-dialog |
| | | v-model="modelDia" |
| | | title="规格型号" |
| | | title="产品高度" |
| | | width="400px" |
| | | @close="closeModelDia" |
| | | @keydown.enter.prevent |
| | | > |
| | | <el-form |
| | | :model="modelForm" |
| | |
| | | > |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="规格型号:" prop="model"> |
| | | <el-form-item label="产品高度:" prop="model"> |
| | | <el-input |
| | | v-model="modelForm.model" |
| | | placeholder="请输入规格型号" |
| | | placeholder="请输入产品高度" |
| | | clearable |
| | | @keydown.enter.prevent |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="单位:" prop="unit"> |
| | | <el-form-item label="高度单位:" prop="unit"> |
| | | <el-input |
| | | v-model="modelForm.unit" |
| | | placeholder="请输入单位" |
| | | placeholder="请输入高度单位" |
| | | clearable |
| | | @keydown.enter.prevent |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | const expandedKeys = ref([]); |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "规格型号", |
| | | label: "产品高度", |
| | | prop: "model", |
| | | }, |
| | | { |
| | | label: "单位", |
| | | label: "高度单位", |
| | | prop: "unit", |
| | | }, |
| | | { |
| | |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const isShowButton = ref(false); |
| | | const total = ref(0); |
| | | const selectedRows = ref([]); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | total: 0, |
| | | }); |
| | | const data = reactive({ |
| | | form: { |
| | |
| | | form.value.productName = data.productName; |
| | | } |
| | | }; |
| | | // 打开规格型号弹框 |
| | | // 打开产品高度弹框 |
| | | const openModelDia = (type, data) => { |
| | | modelOperationType.value = type; |
| | | modelDia.value = true; |
| | |
| | | proxy.$refs.formRef.resetFields(); |
| | | productDia.value = false; |
| | | }; |
| | | |
| | | // 删除产品 |
| | | const remove = (node, data) => { |
| | | let ids = []; |
| | |
| | | }).then((res) => { |
| | | console.log("res", res); |
| | | tableData.value = res.records; |
| | | total.value = res.total; |
| | | page.total = res.total; |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | |
| | | font-size: 14px; |
| | | padding-right: 8px; |
| | | } |
| | | .tree-node-content { |
| | | display: flex; |
| | | align-items: center; /* 垂直居中 */ |
| | | height: 100%; |
| | | } |
| | | .orange-icon { |
| | | color: orange; |
| | | font-size: 18px; |
| | | margin-right: 8px; /* 图标与文字之间加点间距 */ |
| | | } |
| | | </style> |