feat(material): 采购链接在编辑弹窗内可直接跳转,无需复制网址
体验问题 ---- 原先只能在编辑弹窗的输入框里看到网址,要跳转得复制出来、另开标签页、粘贴 —— 多三步,且现场场景下很容易贴错。 改动 ---- 输入框追加一个常驻的「打开」按钮:点一下在新标签页打开,同时输入框始终可编辑。 非法链接(非 http/https)时按钮置灰 + title 提示;误点给出明确 ElMessage, 不做静默失败。两处(list.vue / buyOdoo.vue)交互一致。 ★ 为什么不做「双击解锁编辑」 1) 双击是**隐藏交互**,没有任何视觉提示,用户不会发现; 2) 双击在输入框内与「选中文字」冲突(复制片段时会误触发); 3) 追加按钮零学习成本,且不牺牲可编辑性 —— 两者目标相同,代价更低。 链接的「只看不改」需求若有,应走权限(只读渲染),而不是靠双击切换模式。
This commit is contained in:
@ -540,11 +540,21 @@
|
|||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<!-- 采购链接:读写共用 material_list:purchaseLink 一个码 -->
|
<!-- 采购链接:读写共用 material_list:purchaseLink 一个码 -->
|
||||||
<el-form-item label="采购链接" prop="purchaseLink" v-if="hasFieldPermission('purchaseLink')">
|
<el-form-item label="采购链接" prop="purchaseLink" v-if="hasFieldPermission('purchaseLink')">
|
||||||
|
<!-- ★ 可编辑 + 可直达(与 list.vue 同款交互):
|
||||||
|
不用复制网址另开标签页;链接非法时按钮置灰并提示。 -->
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.purchaseLink"
|
v-model="form.purchaseLink"
|
||||||
placeholder="补货用的购买地址,如淘宝/1688 商品链接"
|
placeholder="补货用的购买地址,如淘宝/1688 商品链接"
|
||||||
clearable
|
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-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -1103,6 +1113,13 @@ const safeHref = (url: any): string | null => {
|
|||||||
return /^https?:\/\//i.test(s) ? s : 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) => {
|
const hasFieldPermission = (field: string) => {
|
||||||
if (userStore.role === 'SUPER_ADMIN' || userStore.username === 'IRIS') return true;
|
if (userStore.role === 'SUPER_ADMIN' || userStore.username === 'IRIS') return true;
|
||||||
const code = permissionMap[field];
|
const code = permissionMap[field];
|
||||||
|
|||||||
@ -549,11 +549,24 @@
|
|||||||
<!-- ★ 采购链接:读写共用 material_list:purchaseLink 一个码
|
<!-- ★ 采购链接:读写共用 material_list:purchaseLink 一个码
|
||||||
(与参考价格同模式),无权限者整项不显示 -->
|
(与参考价格同模式),无权限者整项不显示 -->
|
||||||
<el-form-item label="采购链接" prop="purchaseLink" v-if="hasFieldPermission('purchaseLink')">
|
<el-form-item label="采购链接" prop="purchaseLink" v-if="hasFieldPermission('purchaseLink')">
|
||||||
|
<!-- ★ 可编辑 + 可直达:不必把网址复制出来、另开标签页再粘贴。
|
||||||
|
刻意**不采用**「双击解锁编辑」—— 双击是隐藏交互,用户发现不了,
|
||||||
|
而且会与输入框内的「选中文字」冲突;一个常驻的追加按钮
|
||||||
|
始终可见、始终可编辑,零学习成本。
|
||||||
|
链接非法(非 http/https)时按钮置灰并给出提示,不做静默失败。 -->
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.purchaseLink"
|
v-model="form.purchaseLink"
|
||||||
placeholder="补货用的购买地址,如淘宝/1688 商品链接"
|
placeholder="补货用的购买地址,如淘宝/1688 商品链接"
|
||||||
clearable
|
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-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -1130,6 +1143,14 @@ const safeHref = (url: any): string | null => {
|
|||||||
return /^https?:\/\//i.test(s) ? s : 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 个角色)
|
// 读 → material_list:files (本区块整体可见,6 个角色)
|
||||||
|
|||||||
Reference in New Issue
Block a user