| | |
| | | > |
| | | <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 |
| | |
| | | </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> |
| | |
| | | title="规格型号" |
| | | width="400px" |
| | | @close="closeModelDia" |
| | | @keydown.enter.prevent |
| | | > |
| | | <el-form |
| | | :model="modelForm" |
| | |
| | | v-model="modelForm.model" |
| | | placeholder="请输入规格型号" |
| | | clearable |
| | | @keydown.enter.prevent |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | v-model="modelForm.unit" |
| | | placeholder="请输入单位" |
| | | clearable |
| | | @keydown.enter.prevent |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | 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: { |
| | |
| | | proxy.$refs.formRef.resetFields(); |
| | | productDia.value = false; |
| | | }; |
| | | // 封装一个安全的确认框,彻底阻止Enter键触发 |
| | | const safeConfirm = (message, title) => { |
| | | // 标记是否是鼠标点击(点击按钮会触发focus事件) |
| | | let isMouseClick = false; |
| | | |
| | | return new Promise((resolve, reject) => { |
| | | const box = ElMessageBox.confirm(message, title, { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | beforeClose: (action, instance, done) => { |
| | | if (action === "confirm") { |
| | | // 只有鼠标点击时才允许确认 |
| | | if (isMouseClick) { |
| | | done(); |
| | | resolve(); |
| | | } else { |
| | | // Enter键触发时阻止 |
| | | done(false); |
| | | } |
| | | } else { |
| | | // 取消操作直接允许 |
| | | done(); |
| | | reject(); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | // 监听确认按钮的focus事件(鼠标点击会触发,Enter键不会) |
| | | setTimeout(() => { |
| | | const confirmBtn = document.querySelector('.el-message-box__btns .el-button--primary'); |
| | | if (confirmBtn) { |
| | | confirmBtn.addEventListener('focus', () => { |
| | | isMouseClick = true; |
| | | }); |
| | | } |
| | | }, 0); // 延迟获取,确保DOM已渲染 |
| | | }); |
| | | }; |
| | | // 删除产品 |
| | | // 删除产品 |
| | | const remove = (node, data) => { |
| | | let ids = []; |
| | | ids.push(data.id); |
| | | ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "删除提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | let ids = [data.id]; |
| | | // 使用封装的safeConfirm |
| | | safeConfirm("选中的内容将被删除,是否确认删除?", "删除提示") |
| | | .then(() => { |
| | | // 确认删除逻辑 |
| | | tableLoading.value = true; |
| | | delProduct(ids) |
| | | .then((res) => { |
| | |
| | | }).then((res) => { |
| | | console.log("res", res); |
| | | tableData.value = res.records; |
| | | total.value = res.total; |
| | | page.total = res.total; |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | |
| | | proxy.$modal.msgWarning("请选择数据"); |
| | | return; |
| | | } |
| | | ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "删除提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | safeConfirm("选中的内容将被删除,是否确认删除?", "删除提示") |
| | | .then(() => { |
| | | tableLoading.value = true; |
| | | delProductModel(ids) |
| | |
| | | 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> |