gaoluyang
4 天以前 bbedc2e50e3ebc382afadd373ddcef858edea288
src/views/basicData/product/index.vue
@@ -40,7 +40,13 @@
        >
          <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"
@@ -49,7 +55,7 @@
                >
                  编辑
                </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
@@ -83,17 +89,17 @@
        </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"
@@ -108,6 +114,7 @@
                v-model="form.productName"
                placeholder="请输入产品名称"
                clearable
                @keydown.enter.prevent
              />
            </el-form-item>
          </el-col>
@@ -125,6 +132,7 @@
      title="规格型号"
      width="400px"
      @close="closeModelDia"
      @keydown.enter.prevent
    >
      <el-form
        :model="modelForm"
@@ -140,6 +148,7 @@
                v-model="modelForm.model"
                placeholder="请输入规格型号"
                clearable
                @keydown.enter.prevent
              />
            </el-form-item>
          </el-col>
@@ -151,6 +160,7 @@
                v-model="modelForm.unit"
                placeholder="请输入单位"
                clearable
                @keydown.enter.prevent
              />
            </el-form-item>
          </el-col>
@@ -220,11 +230,11 @@
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: {
@@ -309,16 +319,53 @@
  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) => {
@@ -381,7 +428,7 @@
  }).then((res) => {
    console.log("res", res);
    tableData.value = res.records;
    total.value = res.total;
    page.total = res.total;
    tableLoading.value = false;
  });
};
@@ -394,11 +441,7 @@
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
  safeConfirm("选中的内容将被删除,是否确认删除?", "删除提示")
    .then(() => {
      tableLoading.value = true;
      delProductModel(ids)
@@ -476,4 +519,14 @@
  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>