refactor(editor): 过滤弃用的TinyMCE插件并优化商品编辑流程

This commit is contained in:
pikachu1995@126.com
2026-08-26 10:07:11 +08:00
parent 457eda829d
commit 404492b7a3
13 changed files with 70 additions and 251 deletions

View File

@@ -1,8 +1,9 @@
<template> <template>
<el-dialog width="800" v-model="enableMap"> <el-dialog width="800" title="选择收件地区" v-model="enableMap">
<el-radio-group @change="changeMap" v-model="mapDefault" type="button"> <!-- 高德未开启时只有一种选法不必再露出切换项 -->
<el-radio-group v-if="aMapSwitch" @change="changeMap" v-model="mapDefault" type="button">
<el-radio label="select">级联选择</el-radio> <el-radio label="select">级联选择</el-radio>
<el-radio label="map" v-if="aMapSwitch">高德地图</el-radio> <el-radio label="map">高德地图</el-radio>
</el-radio-group> </el-radio-group>
<div> <div>
<div v-if="mapDefault === 'select'"> <div v-if="mapDefault === 'select'">

View File

@@ -2,13 +2,21 @@ import plugins from "./plugins";
import toobar from "./toolbar"; import toobar from "./toolbar";
const localCDN = window.location.origin + process.env.BASE_URL + "tinymce"; //本地引入兼容子路径部署publicPath const localCDN = window.location.origin + process.env.BASE_URL + "tinymce"; //本地引入兼容子路径部署publicPath
const DEPRECATED_TINYMCE_PLUGINS = new Set(["template"]);
export function resolveTinymcePlugins(list = plugins) {
const names = Array.isArray(list) ? list : String(list || "").split(/[ ,]+/);
return names.filter((name) => name && !DEPRECATED_TINYMCE_PLUGINS.has(name)).join(" ");
}
export const initEditor = { export const initEditor = {
base_url: localCDN, base_url: localCDN,
height: "400px", height: "400px",
language: "zh-Hans", language: "zh-Hans",
menubar: "file edit view format table", // 菜单:指定应该出现哪些菜单 menubar: "file edit view format table", // 菜单:指定应该出现哪些菜单
toolbar: toobar, // 分组工具栏控件 toolbar: toobar, // 分组工具栏控件
plugins:plugins, // 插件(比如: advlist | link | image | preview等) plugins: resolveTinymcePlugins(plugins),
object_resizing: false, // 是否禁用表格图片大小调整 object_resizing: false, // 是否禁用表格图片大小调整
end_container_on_empty_block: true, // enter键 分块 end_container_on_empty_block: true, // enter键 分块
powerpaste_word_import: "merge", // 是否保留word粘贴样式 clean | merge powerpaste_word_import: "merge", // 是否保留word粘贴样式 clean | merge

View File

@@ -9,7 +9,7 @@
</div> </div>
</template> </template>
<script> <script>
import { initEditor } from "@/components/editor/config"; import { initEditor, resolveTinymcePlugins } from "@/components/editor/config";
import uploadImage from "@/components/editor/upload-image.vue"; import uploadImage from "@/components/editor/upload-image.vue";
export default { export default {
components:{uploadImage}, components:{uploadImage},
@@ -100,7 +100,7 @@ export default {
}); });
}, },
..._this.initEditor, ..._this.initEditor,
plugins: resolveTinymcePlugins(_this.initEditor.plugins),
height:this.height height:this.height
}); });
}, },

View File

@@ -299,28 +299,6 @@ export function editGoods(goodsId, params) {
}); });
} }
// 获取草稿商品分页列表
export const getDraftGoodsListData = params => {
return getRequest("/goods/draftGoods/page", params);
};
// 获取草稿商品详情
export const getDraftGoodsDetail = id => {
return getRequest(`/goods/draftGoods/${id}`);
};
// 保存草稿商品
export function saveDraftGoods(params) {
return postRequest("/goods/draftGoods/save", params, {
"Content-Type": "application/json"
});
}
// 删除草稿商品
export const deleteDraftGoods = id => {
return deleteRequest(`/goods/draftGoods/${id}`);
};
//查询分类绑定参数信息 //查询分类绑定参数信息
export const getCategoryParamsListDataSeller = (id, params) => { export const getCategoryParamsListDataSeller = (id, params) => {
return getRequest(`/goods/categoryParameters/${id}`, params); return getRequest(`/goods/categoryParameters/${id}`, params);

View File

@@ -34,18 +34,6 @@ export const result = [{
component: "goods/goods-seller/goods", component: "goods/goods-seller/goods",
children: null, children: null,
}, },
{
path: "template-goods",
props: {
type: "TEMPLATE"
},
level: 2,
type: 0,
title: "商品模版",
component: "goods/goods-seller/draftGoods",
name: "template-goods",
children: null,
},
{ {
name: "category", name: "category",
level: 2, level: 2,

View File

@@ -52,18 +52,6 @@ export const otherRouter = {
name: "goods-operation-edit", name: "goods-operation-edit",
component: () => import("@/views/goods/goods-seller/goodsOperation.vue") component: () => import("@/views/goods/goods-seller/goodsOperation.vue")
}, },
{
path: "goods-template-operation-edit",
title: "编辑模版",
name: "goods-template-operation-edit",
component: () => import("@/views/goods/goods-seller/goodsOperation.vue")
},
{
path: "goods-draft-operation-edit",
title: "编辑草稿",
name: "goods-draft-operation-edit",
component: () => import("@/views/goods/goods-seller/goodsOperation.vue")
},
/** 卡密商品E_COUPON卡池管理query: skuId必填, goodsId, goodsName */ /** 卡密商品E_COUPON卡池管理query: skuId必填, goodsId, goodsName */
{ {
path: "card-key-pool", path: "card-key-pool",

View File

@@ -1,163 +0,0 @@
<template>
<div class="search">
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
label-width="70px"
class="search-form mb_10"
@keyup.enter="handleSearch"
>
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px" />
</el-form-item>
<el-form-item label="商品编号" prop="id">
<el-input v-model="searchForm.id" placeholder="商品编号" clearable style="width: 200px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
<el-table-column prop="id" label="编号" min-width="120" />
<el-table-column label="商品原图" width="120" align="center">
<template #default="{ row }">
<img
:src="row.original"
alt="加载图片失败"
style="cursor: pointer; width: 80px; height: 60px; margin: 10px 0; object-fit: contain"
/>
</template>
</el-table-column>
<el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
<el-table-column label="商品价格" width="120">
<template #default="{ row }">
<priceColorScheme :value="row.price || 0" :color="$mainColor" />
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="120" />
<el-table-column label="操作" align="center" width="150">
<template #default="{ row }">
<a class="link-text" @click="editGoods(row)">编辑</a>
<span class="op-split">|</span>
<a class="link-text" @click="removeDraft(row.id)">删除</a>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[10, 20, 50]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
size="small"
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getDraftGoodsListData, deleteDraftGoods } from "@/api/goods";
export default {
name: "goods",
data() {
return {
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 10,
sort: "create_time",
order: "desc",
saveType: "TEMPLATE",
},
data: [],
total: 0,
};
},
methods: {
init() {
this.getDataList();
},
editGoods(v) {
this.$router.push({
name: "goods-template-operation-edit",
query: { draftId: v.id },
});
},
removeDraft(id) {
this.$Modal.confirm({
title: "确认审核",
content: "您确认要删除id为 " + id + " 的模版吗?",
loading: true,
onOk: () => {
deleteDraftGoods(id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除成功");
this.getDataList();
}
});
},
});
},
changePage() {
this.getDataList();
},
changePageSize() {
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
handleReset() {
this.$refs.searchForm.resetFields();
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
getDataList() {
this.loading = true;
getDraftGoodsListData(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
},
},
mounted() {
this.init();
},
watch: {
$route() {
this.init();
},
},
};
</script>
<style lang="scss" scoped>
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.op-split {
margin: 0 8px;
color: #dcdee2;
}
</style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="goods-operation"> <div class="goods-operation">
<!-- 填写商品详细信息含商品类型商品分类 --> <!-- 填写商品详细信息含商品类型商品分类 -->
<second-step ref="second" :firstData="firstData" v-if="activestep === 1"></second-step> <second-step ref="second" v-if="activestep === 1"></second-step>
<!-- 发布完成 --> <!-- 发布完成 -->
<third-step ref="third" v-if="activestep === 2"></third-step> <third-step ref="third" v-if="activestep === 2"></third-step>
</div> </div>
@@ -20,7 +20,6 @@ export default {
return { return {
/** 当前激活步骤1 填写详情2 发布成功 */ /** 当前激活步骤1 填写详情2 发布成功 */
activestep: 1, activestep: 1,
firstData: {},
}; };
}, },
mounted() { mounted() {

View File

@@ -208,7 +208,7 @@
:show-file-list="false" :show-file-list="false"
:before-upload="beforeVideoUpload" :before-upload="beforeVideoUpload"
:on-success="handleSuccessGoodsVideo" :on-success="handleSuccessGoodsVideo"
:on-error="() => { loadingVideo = false }" :on-error="handleGoodsVideoUploadError"
> >
<el-button :loading="loadingVideo" type="primary" link> <el-button :loading="loadingVideo" type="primary" link>
{{ loadingVideo ? "正在上传..." : `${baseInfoForm.goodsVideo ? "已" : ""}上传视频` }} {{ loadingVideo ? "正在上传..." : `${baseInfoForm.goodsVideo ? "已" : ""}上传视频` }}
@@ -578,12 +578,6 @@ export default {
vuedraggable, vuedraggable,
ossManage, ossManage,
}, },
props: {
firstData: {
default: {},
type: Object,
},
},
computed: { computed: {
/** 卡密商品:库存只读展示 quantity提交时 quantity 传 0FR-S-01 / P-02 */ /** 卡密商品:库存只读展示 quantity提交时 quantity 传 0FR-S-01 / P-02 */
isECouponGoods() { isECouponGoods() {
@@ -630,6 +624,19 @@ export default {
goodsVideo: "", goodsVideo: "",
showContent: false, showContent: false,
loadingVideo: false, loadingVideo: false,
beforeVideoUpload: (file) => {
const allowed = /\.(avi|wmv|mpeg|mp4|mov)$/i;
if (!allowed.test((file && file.name) || "")) {
this.$Message.error("仅支持 aviwmvmpegmp4mov 格式的视频");
return false;
}
if (file.size / 1024 / 1024 > 10) {
this.handleVideoMaxSize(file);
return false;
}
this.loadingVideo = true;
return true;
},
listImages: [], listImages: [],
newSkuValues: [], newSkuValues: [],
contentImage: "", contentImage: "",
@@ -870,6 +877,9 @@ export default {
desc: "视频大小不能超过10MB", desc: "视频大小不能超过10MB",
}); });
}, },
handleGoodsVideoUploadError() {
this.loadingVideo = false;
},
parseOssSelectionUrl(item) { parseOssSelectionUrl(item) {
if (!item) return ""; if (!item) return "";
if (typeof item === "string") { if (typeof item === "string") {
@@ -1361,14 +1371,9 @@ export default {
}); });
}, },
// 编辑时获取商品信息 // 编辑时获取商品信息
async GET_GoodData(id, draftId) { async GET_GoodData(id) {
let response = {}; const response = await API_GOODS.getGoods(id);
if (draftId) { this.goodsId = response.result.id;
response = await API_GOODS.getDraftGoodsDetail(draftId);
} else {
response = await API_GOODS.getGoods(id);
this.goodsId = response.result.id;
}
response.result.recommend response.result.recommend
? (response.result.recommend = 1) ? (response.result.recommend = 1)
@@ -2467,15 +2472,11 @@ export default {
}; };
this.GET_ShipTemplate() this.GET_ShipTemplate()
this.loadCategoryList(); this.loadCategoryList();
if (this.$route.query.id || this.$route.query.draftId) { if (this.$route.query.id) {
// 编辑商品、模板 this.GET_GoodData(this.$route.query.id);
this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
} else if (this.$route.query.copyId) { } else if (this.$route.query.copyId) {
// 复制商品 // 复制商品
this.GET_GoodData(this.$route.query.copyId); this.GET_GoodData(this.$route.query.copyId);
} else if (this.firstData.tempId) {
// 选择模板
this.GET_GoodData("", this.firstData.tempId);
} else { } else {
// 新增商品 // 新增商品
this.GET_GoodsUnit(); this.GET_GoodsUnit();

View File

@@ -32,11 +32,11 @@
type="circle" type="circle"
:width="120" :width="120"
:stroke-width="5" :stroke-width="5"
:percentage="userData.serviceScore * 20" :percentage="scorePercent(userData.serviceScore)"
color="#fecb89" color="#fecb89"
> >
<template #default> <template #default>
<p class="bold">{{ userData.serviceScore }}</p> <p class="bold">{{ formatScore(userData.serviceScore) }}</p>
</template> </template>
</el-progress> </el-progress>
<h5>服务得分</h5> <h5>服务得分</h5>
@@ -46,11 +46,11 @@
type="circle" type="circle"
:width="120" :width="120"
:stroke-width="5" :stroke-width="5"
:percentage="userData.deliveryScore * 20" :percentage="scorePercent(userData.deliveryScore)"
color="#a7c5eb" color="#a7c5eb"
> >
<template #default> <template #default>
<p class="bold">{{ userData.deliveryScore }}</p> <p class="bold">{{ formatScore(userData.deliveryScore) }}</p>
</template> </template>
</el-progress> </el-progress>
<h5>交货得分</h5> <h5>交货得分</h5>
@@ -60,11 +60,11 @@
type="circle" type="circle"
:width="120" :width="120"
:stroke-width="5" :stroke-width="5"
:percentage="userData.descriptionScore * 20" :percentage="scorePercent(userData.descriptionScore)"
color="#848ccf" color="#848ccf"
> >
<template #default> <template #default>
<p class="bold">{{ userData.descriptionScore }}</p> <p class="bold">{{ formatScore(userData.descriptionScore) }}</p>
</template> </template>
</el-progress> </el-progress>
<h5>评价得分</h5> <h5>评价得分</h5>
@@ -249,7 +249,7 @@ export default {
topGoodsData: [], topGoodsData: [],
afterSaleNumData: {}, afterSaleNumData: {},
procurementStatusCount: {}, procurementStatusCount: {},
userData: "", userData: {},
notices: "", notices: "",
noticesDetail: { noticesDetail: {
title: "", title: "",
@@ -301,9 +301,20 @@ export default {
if (t < y) return "compare-down"; if (t < y) return "compare-down";
return "compare-flat"; return "compare-flat";
}, },
formatScore(score) {
const n = Number(score);
return Number.isFinite(n) ? n : 0;
},
scorePercent(score) {
const percent = this.formatScore(score) * 20;
return Math.min(100, Math.max(0, Number(percent.toFixed(2))));
},
async init() { async init() {
const userInfo = JSON.parse(Cookies.get("userInfoSeller")); try {
this.userData = userInfo; this.userData = JSON.parse(Cookies.get("userInfoSeller") || "{}") || {};
} catch (e) {
this.userData = {};
}
const res = await getHomeNotice(); const res = await getHomeNotice();
if (res.success) { if (res.success) {

View File

@@ -1,13 +1,21 @@
import plugins from "./plugins"; import plugins from "./plugins";
import toobar from "./toolbar"; import toobar from "./toolbar";
const localCDN = window.location.origin + process.env.BASE_URL + "tinymce"; //本地引入兼容子路径部署publicPath const localCDN = window.location.origin + process.env.BASE_URL + "tinymce"; //本地引入兼容子路径部署publicPath
const DEPRECATED_TINYMCE_PLUGINS = new Set(["template"]);
export function resolveTinymcePlugins(list = plugins) {
const names = Array.isArray(list) ? list : String(list || "").split(/[ ,]+/);
return names.filter((name) => name && !DEPRECATED_TINYMCE_PLUGINS.has(name)).join(" ");
}
export const initEditor = { export const initEditor = {
base_url: localCDN, base_url: localCDN,
height: "400px", height: "400px",
language: "zh-Hans", language: "zh-Hans",
menubar: "file edit view format table", // 菜单:指定应该出现哪些菜单 menubar: "file edit view format table", // 菜单:指定应该出现哪些菜单
toolbar: toobar, // 分组工具栏控件 toolbar: toobar, // 分组工具栏控件
plugins:plugins, // 插件(比如: advlist | link | image | preview等) plugins: resolveTinymcePlugins(plugins),
object_resizing: false, // 是否禁用表格图片大小调整 object_resizing: false, // 是否禁用表格图片大小调整
end_container_on_empty_block: true, // enter键 分块 end_container_on_empty_block: true, // enter键 分块
powerpaste_word_import: "merge", // 是否保留word粘贴样式 clean | merge powerpaste_word_import: "merge", // 是否保留word粘贴样式 clean | merge

View File

@@ -9,7 +9,7 @@
</div> </div>
</template> </template>
<script> <script>
import { initEditor } from "@/views/lili-components/editor/config"; import { initEditor, resolveTinymcePlugins } from "@/views/lili-components/editor/config";
import uploadImage from "@/views/lili-components/editor/upload-image.vue"; import uploadImage from "@/views/lili-components/editor/upload-image.vue";
export default { export default {
@@ -97,7 +97,7 @@ export default {
}); });
}, },
..._this.initEditor, ..._this.initEditor,
plugins: resolveTinymcePlugins(_this.initEditor.plugins),
height:this.height height:this.height
}); });
}, },

View File

@@ -1,4 +1,4 @@
const plugins = [ const plugins = [
'advlist', 'anchor', 'autolink', 'autosave', 'charmap', 'code', 'codesample', 'directionality', 'emoticons', 'fullscreen', 'image', 'importcss', 'insertdatetime', 'link', 'lists', 'media', 'nonbreaking', 'pagebreak', 'preview', 'save', 'searchreplace', 'table', 'template', 'visualblocks', 'visualchars', 'wordcount' 'advlist', 'anchor', 'autolink', 'autosave', 'charmap', 'code', 'codesample', 'directionality', 'emoticons', 'fullscreen', 'image', 'importcss', 'insertdatetime', 'link', 'lists', 'media', 'nonbreaking', 'pagebreak', 'preview', 'save', 'searchreplace', 'table', 'visualblocks', 'visualchars', 'wordcount'
] ]
export default plugins export default plugins