mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-09-20 20:02:05 +08:00
refactor(editor): 过滤弃用的TinyMCE插件并优化商品编辑流程
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<el-dialog width="800" v-model="enableMap">
|
||||
<el-radio-group @change="changeMap" v-model="mapDefault" type="button">
|
||||
<el-dialog width="800" title="选择收件地区" v-model="enableMap">
|
||||
<!-- 高德未开启时只有一种选法,不必再露出切换项 -->
|
||||
<el-radio-group v-if="aMapSwitch" @change="changeMap" v-model="mapDefault" type="button">
|
||||
<el-radio label="select">级联选择</el-radio>
|
||||
<el-radio label="map" v-if="aMapSwitch">高德地图</el-radio>
|
||||
<el-radio label="map">高德地图</el-radio>
|
||||
</el-radio-group>
|
||||
<div>
|
||||
<div v-if="mapDefault === 'select'">
|
||||
|
||||
@@ -2,13 +2,21 @@ import plugins from "./plugins";
|
||||
import toobar from "./toolbar";
|
||||
|
||||
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 = {
|
||||
base_url: localCDN,
|
||||
height: "400px",
|
||||
language: "zh-Hans",
|
||||
menubar: "file edit view format table", // 菜单:指定应该出现哪些菜单
|
||||
toolbar: toobar, // 分组工具栏控件
|
||||
plugins:plugins, // 插件(比如: advlist | link | image | preview等)
|
||||
plugins: resolveTinymcePlugins(plugins),
|
||||
object_resizing: false, // 是否禁用表格图片大小调整
|
||||
end_container_on_empty_block: true, // enter键 分块
|
||||
powerpaste_word_import: "merge", // 是否保留word粘贴样式 clean | merge
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { initEditor } from "@/components/editor/config";
|
||||
import { initEditor, resolveTinymcePlugins } from "@/components/editor/config";
|
||||
import uploadImage from "@/components/editor/upload-image.vue";
|
||||
export default {
|
||||
components:{uploadImage},
|
||||
@@ -100,7 +100,7 @@ export default {
|
||||
});
|
||||
},
|
||||
..._this.initEditor,
|
||||
|
||||
plugins: resolveTinymcePlugins(_this.initEditor.plugins),
|
||||
height:this.height
|
||||
});
|
||||
},
|
||||
|
||||
@@ -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) => {
|
||||
return getRequest(`/goods/categoryParameters/${id}`, params);
|
||||
|
||||
@@ -34,18 +34,6 @@ export const result = [{
|
||||
component: "goods/goods-seller/goods",
|
||||
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",
|
||||
level: 2,
|
||||
|
||||
@@ -52,18 +52,6 @@ export const otherRouter = {
|
||||
name: "goods-operation-edit",
|
||||
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 */
|
||||
{
|
||||
path: "card-key-pool",
|
||||
|
||||
@@ -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>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
@@ -20,7 +20,6 @@ export default {
|
||||
return {
|
||||
/** 当前激活步骤:1 填写详情,2 发布成功 */
|
||||
activestep: 1,
|
||||
firstData: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -208,7 +208,7 @@
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeVideoUpload"
|
||||
:on-success="handleSuccessGoodsVideo"
|
||||
:on-error="() => { loadingVideo = false }"
|
||||
:on-error="handleGoodsVideoUploadError"
|
||||
>
|
||||
<el-button :loading="loadingVideo" type="primary" link>
|
||||
{{ loadingVideo ? "正在上传..." : `${baseInfoForm.goodsVideo ? "已" : ""}上传视频` }}
|
||||
@@ -578,12 +578,6 @@ export default {
|
||||
vuedraggable,
|
||||
ossManage,
|
||||
},
|
||||
props: {
|
||||
firstData: {
|
||||
default: {},
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
/** 卡密商品:库存只读展示 quantity,提交时 quantity 传 0(FR-S-01 / P-02) */
|
||||
isECouponGoods() {
|
||||
@@ -630,6 +624,19 @@ export default {
|
||||
goodsVideo: "",
|
||||
showContent: false,
|
||||
loadingVideo: false,
|
||||
beforeVideoUpload: (file) => {
|
||||
const allowed = /\.(avi|wmv|mpeg|mp4|mov)$/i;
|
||||
if (!allowed.test((file && file.name) || "")) {
|
||||
this.$Message.error("仅支持 avi、wmv、mpeg、mp4、mov 格式的视频");
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
this.handleVideoMaxSize(file);
|
||||
return false;
|
||||
}
|
||||
this.loadingVideo = true;
|
||||
return true;
|
||||
},
|
||||
listImages: [],
|
||||
newSkuValues: [],
|
||||
contentImage: "",
|
||||
@@ -870,6 +877,9 @@ export default {
|
||||
desc: "视频大小不能超过10MB",
|
||||
});
|
||||
},
|
||||
handleGoodsVideoUploadError() {
|
||||
this.loadingVideo = false;
|
||||
},
|
||||
parseOssSelectionUrl(item) {
|
||||
if (!item) return "";
|
||||
if (typeof item === "string") {
|
||||
@@ -1361,14 +1371,9 @@ export default {
|
||||
});
|
||||
},
|
||||
// 编辑时获取商品信息
|
||||
async GET_GoodData(id, draftId) {
|
||||
let response = {};
|
||||
if (draftId) {
|
||||
response = await API_GOODS.getDraftGoodsDetail(draftId);
|
||||
} else {
|
||||
response = await API_GOODS.getGoods(id);
|
||||
this.goodsId = response.result.id;
|
||||
}
|
||||
async GET_GoodData(id) {
|
||||
const response = await API_GOODS.getGoods(id);
|
||||
this.goodsId = response.result.id;
|
||||
|
||||
response.result.recommend
|
||||
? (response.result.recommend = 1)
|
||||
@@ -2467,15 +2472,11 @@ export default {
|
||||
};
|
||||
this.GET_ShipTemplate()
|
||||
this.loadCategoryList();
|
||||
if (this.$route.query.id || this.$route.query.draftId) {
|
||||
// 编辑商品、模板
|
||||
this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
|
||||
if (this.$route.query.id) {
|
||||
this.GET_GoodData(this.$route.query.id);
|
||||
} else if (this.$route.query.copyId) {
|
||||
// 复制商品
|
||||
this.GET_GoodData(this.$route.query.copyId);
|
||||
} else if (this.firstData.tempId) {
|
||||
// 选择模板
|
||||
this.GET_GoodData("", this.firstData.tempId);
|
||||
} else {
|
||||
// 新增商品
|
||||
this.GET_GoodsUnit();
|
||||
|
||||
@@ -32,11 +32,11 @@
|
||||
type="circle"
|
||||
:width="120"
|
||||
:stroke-width="5"
|
||||
:percentage="userData.serviceScore * 20"
|
||||
:percentage="scorePercent(userData.serviceScore)"
|
||||
color="#fecb89"
|
||||
>
|
||||
<template #default>
|
||||
<p class="bold">{{ userData.serviceScore }}分</p>
|
||||
<p class="bold">{{ formatScore(userData.serviceScore) }}分</p>
|
||||
</template>
|
||||
</el-progress>
|
||||
<h5>服务得分</h5>
|
||||
@@ -46,11 +46,11 @@
|
||||
type="circle"
|
||||
:width="120"
|
||||
:stroke-width="5"
|
||||
:percentage="userData.deliveryScore * 20"
|
||||
:percentage="scorePercent(userData.deliveryScore)"
|
||||
color="#a7c5eb"
|
||||
>
|
||||
<template #default>
|
||||
<p class="bold">{{ userData.deliveryScore }}分</p>
|
||||
<p class="bold">{{ formatScore(userData.deliveryScore) }}分</p>
|
||||
</template>
|
||||
</el-progress>
|
||||
<h5>交货得分</h5>
|
||||
@@ -60,11 +60,11 @@
|
||||
type="circle"
|
||||
:width="120"
|
||||
:stroke-width="5"
|
||||
:percentage="userData.descriptionScore * 20"
|
||||
:percentage="scorePercent(userData.descriptionScore)"
|
||||
color="#848ccf"
|
||||
>
|
||||
<template #default>
|
||||
<p class="bold">{{ userData.descriptionScore }}分</p>
|
||||
<p class="bold">{{ formatScore(userData.descriptionScore) }}分</p>
|
||||
</template>
|
||||
</el-progress>
|
||||
<h5>评价得分</h5>
|
||||
@@ -249,7 +249,7 @@ export default {
|
||||
topGoodsData: [],
|
||||
afterSaleNumData: {},
|
||||
procurementStatusCount: {},
|
||||
userData: "",
|
||||
userData: {},
|
||||
notices: "",
|
||||
noticesDetail: {
|
||||
title: "",
|
||||
@@ -301,9 +301,20 @@ export default {
|
||||
if (t < y) return "compare-down";
|
||||
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() {
|
||||
const userInfo = JSON.parse(Cookies.get("userInfoSeller"));
|
||||
this.userData = userInfo;
|
||||
try {
|
||||
this.userData = JSON.parse(Cookies.get("userInfoSeller") || "{}") || {};
|
||||
} catch (e) {
|
||||
this.userData = {};
|
||||
}
|
||||
|
||||
const res = await getHomeNotice();
|
||||
if (res.success) {
|
||||
|
||||
@@ -1,13 +1,21 @@
|
||||
import plugins from "./plugins";
|
||||
import toobar from "./toolbar";
|
||||
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 = {
|
||||
base_url: localCDN,
|
||||
height: "400px",
|
||||
language: "zh-Hans",
|
||||
menubar: "file edit view format table", // 菜单:指定应该出现哪些菜单
|
||||
toolbar: toobar, // 分组工具栏控件
|
||||
plugins:plugins, // 插件(比如: advlist | link | image | preview等)
|
||||
plugins: resolveTinymcePlugins(plugins),
|
||||
object_resizing: false, // 是否禁用表格图片大小调整
|
||||
end_container_on_empty_block: true, // enter键 分块
|
||||
powerpaste_word_import: "merge", // 是否保留word粘贴样式 clean | merge
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<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";
|
||||
export default {
|
||||
@@ -97,7 +97,7 @@ export default {
|
||||
});
|
||||
},
|
||||
..._this.initEditor,
|
||||
|
||||
plugins: resolveTinymcePlugins(_this.initEditor.plugins),
|
||||
height:this.height
|
||||
});
|
||||
},
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user