From a739f9c889c5d5f8c624e129719360bcd8660a05 Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Thu, 17 Sep 2026 11:33:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(material):=20=E9=87=87=E8=B4=AD=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5=E5=9C=A8=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97=E5=86=85?=
 =?UTF-8?q?=E5=8F=AF=E7=9B=B4=E6=8E=A5=E8=B7=B3=E8=BD=AC=EF=BC=8C=E6=97=A0?=
 =?UTF-8?q?=E9=9C=80=E5=A4=8D=E5=88=B6=E7=BD=91=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

体验问题
----
原先只能在编辑弹窗的输入框里看到网址，要跳转得复制出来、另开标签页、粘贴 ——
多三步，且现场场景下很容易贴错。

改动
----
输入框追加一个常驻的「打开」按钮：点一下在新标签页打开，同时输入框始终可编辑。
非法链接（非 http/https）时按钮置灰 + title 提示；误点给出明确 ElMessage，
不做静默失败。两处（list.vue / buyOdoo.vue）交互一致。

★ 为什么不做「双击解锁编辑」
  1) 双击是**隐藏交互**，没有任何视觉提示，用户不会发现；
  2) 双击在输入框内与「选中文字」冲突（复制片段时会误触发）；
  3) 追加按钮零学习成本，且不牺牲可编辑性 —— 两者目标相同，代价更低。
  链接的「只看不改」需求若有，应走权限（只读渲染），而不是靠双击切换模式。
---
 inventory-web/src/views/material/buyOdoo.vue | 19 +++++++++++++++-
 inventory-web/src/views/material/list.vue    | 23 +++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/inventory-web/src/views/material/buyOdoo.vue b/inventory-web/src/views/material/buyOdoo.vue
index ca3625b..65319ab 100644
--- a/inventory-web/src/views/material/buyOdoo.vue
+++ b/inventory-web/src/views/material/buyOdoo.vue
@@ -540,11 +540,21 @@
             <el-col :span="12">
               <!-- 采购链接：读写共用 material_list:purchaseLink 一个码 -->
               <el-form-item label="采购链接" prop="purchaseLink" v-if="hasFieldPermission('purchaseLink')">
+                <!-- ★ 可编辑 + 可直达（与 list.vue 同款交互）：
+                     不用复制网址另开标签页；链接非法时按钮置灰并提示。 -->
                 <el-input
                     v-model="form.purchaseLink"
                     placeholder="补货用的购买地址，如淘宝/1688 商品链接"
                     clearable
-                />
+                >
+                  <template #append>
+                    <el-button
+                        :disabled="!safeHref(form.purchaseLink)"
+                        :title="safeHref(form.purchaseLink) ? '在新标签页打开' : '请填写以 http:// 或 https:// 开头的链接'"
+                        @click="openLink(form.purchaseLink)"
+                    >打开</el-button>
+                  </template>
+                </el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -1103,6 +1113,13 @@ const safeHref = (url: any): string | null => {
   return /^https?:\/\//i.test(s) ? s : null;
 };
 
+// 编辑弹窗里的「打开」按钮（与 list.vue 同款）。
+const openLink = (url: any) => {
+  const href = safeHref(url);
+  if (!href) return ElMessage.warning('请填写以 http:// 或 https:// 开头的链接');
+  window.open(href, '_blank', 'noopener,noreferrer');
+};
+
 const hasFieldPermission = (field: string) => {
   if (userStore.role === 'SUPER_ADMIN' || userStore.username === 'IRIS') return true;
   const code = permissionMap[field];
diff --git a/inventory-web/src/views/material/list.vue b/inventory-web/src/views/material/list.vue
index 3d5bca4..e719224 100644
--- a/inventory-web/src/views/material/list.vue
+++ b/inventory-web/src/views/material/list.vue
@@ -549,11 +549,24 @@
               <!-- ★ 采购链接：读写共用 material_list:purchaseLink 一个码
                    （与参考价格同模式），无权限者整项不显示 -->
               <el-form-item label="采购链接" prop="purchaseLink" v-if="hasFieldPermission('purchaseLink')">
+                <!-- ★ 可编辑 + 可直达：不必把网址复制出来、另开标签页再粘贴。
+                     刻意**不采用**「双击解锁编辑」—— 双击是隐藏交互，用户发现不了，
+                     而且会与输入框内的「选中文字」冲突；一个常驻的追加按钮
+                     始终可见、始终可编辑，零学习成本。
+                     链接非法（非 http/https）时按钮置灰并给出提示，不做静默失败。 -->
                 <el-input
                     v-model="form.purchaseLink"
                     placeholder="补货用的购买地址，如淘宝/1688 商品链接"
                     clearable
-                />
+                >
+                  <template #append>
+                    <el-button
+                        :disabled="!safeHref(form.purchaseLink)"
+                        :title="safeHref(form.purchaseLink) ? '在新标签页打开' : '请填写以 http:// 或 https:// 开头的链接'"
+                        @click="openLink(form.purchaseLink)"
+                    >打开</el-button>
+                  </template>
+                </el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -1130,6 +1143,14 @@ const safeHref = (url: any): string | null => {
   return /^https?:\/\//i.test(s) ? s : null;
 };
 
+// 编辑弹窗里的「打开」按钮：在表单里直接跳转，不必复制网址另开标签页。
+// 走 safeHref 白名单 —— 非法值给出明确提示，而不是静默无反应。
+const openLink = (url: any) => {
+  const href = safeHref(url);
+  if (!href) return ElMessage.warning('请填写以 http:// 或 https:// 开头的链接');
+  window.open(href, '_blank', 'noopener,noreferrer');
+};
+
 // ★ 附件备注（产品图备注 / 说明书备注）的**写**权限，与读权限分离。
 //   两端必须与后端同口径：
 //     读 → material_list:files        （本区块整体可见，6 个角色）