mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
feat(manager): 增强运营后台表单校验与页面体验
- 富文本编辑器支持 Vue3 modelValue 双向绑定 - 补充 lazyLoading 路径别名,跳过已弃用的分销等级菜单 - 完善文章、优惠券活动、砍价活动、商品参数等表单校验 - 修复文章管理布局遮挡、店铺选会员弹窗及操作列分隔符显示问题 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -15,6 +15,10 @@ export default {
|
|||||||
components:{uploadImage},
|
components:{uploadImage},
|
||||||
name: "Tinymce",
|
name: "Tinymce",
|
||||||
props: {
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
@@ -24,6 +28,11 @@ export default {
|
|||||||
default:'500px'
|
default:'500px'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
editorContent() {
|
||||||
|
return this.modelValue ?? this.value ?? "";
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 引入编辑器的配置
|
// 引入编辑器的配置
|
||||||
@@ -41,19 +50,23 @@ export default {
|
|||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value: {
|
editorContent: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
if (!this.hasChange && this.hasInit) {
|
if (!this.hasChange && this.hasInit) {
|
||||||
// 当内容有更改且编辑器已初始化时,更新编辑器的内容
|
// 当内容有更改且编辑器已初始化时,更新编辑器的内容
|
||||||
this.$nextTick(() =>
|
this.$nextTick(() => {
|
||||||
window.tinymce.get(this.tinymceId).setContent(val || "")
|
const editor = window.tinymce?.get(this.tinymceId);
|
||||||
);
|
if (editor) editor.setContent(val || "");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deep: true,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
emitContent(content) {
|
||||||
|
this.$emit("update:modelValue", content);
|
||||||
|
this.$emit("input", content);
|
||||||
|
},
|
||||||
// 数据返回并给富文本框插入图片
|
// 数据返回并给富文本框插入图片
|
||||||
insertImage(arr){
|
insertImage(arr){
|
||||||
arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img src="${v}" >`))
|
arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img src="${v}" >`))
|
||||||
@@ -68,19 +81,16 @@ export default {
|
|||||||
selector: `#${this.tinymceId}`,
|
selector: `#${this.tinymceId}`,
|
||||||
convert_urls: false,
|
convert_urls: false,
|
||||||
init_instance_callback: (editor) => {
|
init_instance_callback: (editor) => {
|
||||||
if (_this.value) {
|
if (_this.editorContent) {
|
||||||
// 如果有初始值,则设置编辑器的内容为初始值
|
// 如果有初始值,则设置编辑器的内容为初始值
|
||||||
this.$nextTick(() => editor.setContent(_this.value));
|
_this.$nextTick(() => editor.setContent(_this.editorContent));
|
||||||
}
|
}
|
||||||
_this.hasInit = true;
|
_this.hasInit = true;
|
||||||
// 监听编辑器内容的变化
|
// 监听编辑器内容的变化
|
||||||
editor.on("NodeChange Change KeyUp SetContent", (event) => {
|
editor.on("NodeChange Change KeyUp SetContent", () => {
|
||||||
if (_this.value) {
|
_this.hasChange = true;
|
||||||
// 内容发生更改
|
// Vue3 v-model 使用 update:modelValue,同时保留 input 兼容旧用法
|
||||||
this.hasChange = true;
|
_this.emitContent(editor.getContent());
|
||||||
}
|
|
||||||
// 通过 input 事件将编辑器的内容传递给父组件
|
|
||||||
this.$emit("input", editor.getContent());
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
setup(editor) {
|
setup(editor) {
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
const viewContext = require.context("@/views", true, /\.vue$/);
|
const viewContext = require.context("@/views", true, /\.vue$/);
|
||||||
|
|
||||||
/** 后端菜单 frontRoute 与前端实际路径不一致时的映射 */
|
/** 后端菜单 frontRoute 与前端实际路径不一致时的映射 */
|
||||||
const VIEW_ALIASES = {};
|
const VIEW_ALIASES = {
|
||||||
|
"customWords/index": "custom-words/index",
|
||||||
|
"sensitiveWords/index": "sensitive-words/index",
|
||||||
|
};
|
||||||
|
|
||||||
function resolveViewPath(url) {
|
function resolveViewPath(url) {
|
||||||
return VIEW_ALIASES[url] || url;
|
return VIEW_ALIASES[url] || url;
|
||||||
|
|||||||
@@ -4,6 +4,15 @@ import Cookies from "js-cookie";
|
|||||||
|
|
||||||
let util = {};
|
let util = {};
|
||||||
|
|
||||||
|
/** 已弃用、前端未实现的菜单 frontRoute,注册路由时跳过 */
|
||||||
|
const DEPRECATED_FRONT_ROUTES = new Set([
|
||||||
|
"distribution/distrbutionGrade",
|
||||||
|
]);
|
||||||
|
|
||||||
|
function isDeprecatedMenu(menu) {
|
||||||
|
return menu.frontRoute && DEPRECATED_FRONT_ROUTES.has(menu.frontRoute);
|
||||||
|
}
|
||||||
|
|
||||||
/** 动态菜单路由 name,用于登出或重新注册时清理 */
|
/** 动态菜单路由 name,用于登出或重新注册时清理 */
|
||||||
util.dynamicRouteNames = [];
|
util.dynamicRouteNames = [];
|
||||||
|
|
||||||
@@ -383,6 +392,9 @@ util.initRouterNode = function(routers, data) {
|
|||||||
// data为所有子菜单数据
|
// data为所有子菜单数据
|
||||||
|
|
||||||
for (let item of data) {
|
for (let item of data) {
|
||||||
|
if (isDeprecatedMenu(item)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
const menu = Object.assign({}, item);
|
const menu = Object.assign({}, item);
|
||||||
const hasChildren = item.children && item.children.length > 0;
|
const hasChildren = item.children && item.children.length > 0;
|
||||||
|
|
||||||
|
|||||||
@@ -25,6 +25,7 @@
|
|||||||
<el-input-number :min="0" v-model="form.sort" style="width: 520px" />
|
<el-input-number :min="0" v-model="form.sort" style="width: 520px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="参数值" prop="options">
|
<el-form-item label="参数值" prop="options">
|
||||||
|
<div class="options-editor">
|
||||||
<el-table :data="form.options" border size="small" style="width: 520px">
|
<el-table :data="form.options" border size="small" style="width: 520px">
|
||||||
<el-table-column label="参数值" min-width="420">
|
<el-table-column label="参数值" min-width="420">
|
||||||
<template #default="{ row, $index }">
|
<template #default="{ row, $index }">
|
||||||
@@ -44,16 +45,17 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<div style="margin-top: 10px">
|
<div class="options-editor__actions">
|
||||||
<el-button type="primary" @click="addOptionRow">新增</el-button>
|
<el-button type="primary" @click="addOptionRow">新增</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="关联分类">
|
<el-form-item label="关联分类" prop="categoryIds">
|
||||||
<el-button @click="openCategoryModal">选择分类</el-button>
|
<el-button @click="openCategoryModal">选择分类</el-button>
|
||||||
<span v-if="selectedCategoryNamesText" style="margin-left: 10px; color: #999; font-size: 12px">
|
<span v-if="selectedCategoryNamesText" style="margin-left: 10px; color: #999; font-size: 12px">
|
||||||
{{ selectedCategoryNamesText }}</span>
|
{{ selectedCategoryNamesText }}</span>
|
||||||
<span v-else style="margin-left: 10px; color: #999; font-size: 12px">
|
<span v-else style="margin-left: 10px; color: #999; font-size: 12px">
|
||||||
已选择{{ selectedCategoryIds.length }}个分类
|
已选择{{ (form.categoryIds || []).length }}个分类
|
||||||
</span>
|
</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
@@ -189,6 +191,28 @@ const buildCategoryIdNameMap = (list, map) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const buildFormState = (source, parameterId) => {
|
||||||
|
const opts = normalizeOptions(source?.options);
|
||||||
|
const options = opts.length > 0 ? opts.map((x) => ({ value: x })) : [{ value: "" }];
|
||||||
|
const categoryList = Array.isArray(source?.categoryParameterList)
|
||||||
|
? source.categoryParameterList
|
||||||
|
: [];
|
||||||
|
const categoryIds = toStringArray(
|
||||||
|
categoryList.map((x) => x && x.categoryId).filter(Boolean)
|
||||||
|
);
|
||||||
|
const formState = {
|
||||||
|
paramName: source?.paramName || "",
|
||||||
|
options,
|
||||||
|
required: normalize01(source?.required, 0),
|
||||||
|
isIndex: normalize01(source?.isIndex, 0),
|
||||||
|
sort: Number(source?.sort ?? 0) || 0,
|
||||||
|
categoryIds,
|
||||||
|
};
|
||||||
|
const id = source?.id || parameterId;
|
||||||
|
if (id) formState.id = id;
|
||||||
|
return formState;
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "parameterEdit",
|
name: "parameterEdit",
|
||||||
data() {
|
data() {
|
||||||
@@ -209,6 +233,7 @@ export default {
|
|||||||
required: 0,
|
required: 0,
|
||||||
isIndex: 0,
|
isIndex: 0,
|
||||||
sort: 0,
|
sort: 0,
|
||||||
|
categoryIds: [],
|
||||||
},
|
},
|
||||||
formValidate: {
|
formValidate: {
|
||||||
paramName: [regular.REQUIRED, regular.VARCHAR5],
|
paramName: [regular.REQUIRED, regular.VARCHAR5],
|
||||||
@@ -216,6 +241,15 @@ export default {
|
|||||||
required: [{ required: true, validator: validateRadioRequired("请选择是否必填"), trigger: "change" }],
|
required: [{ required: true, validator: validateRadioRequired("请选择是否必填"), trigger: "change" }],
|
||||||
isIndex: [{ required: true, validator: validateRadioRequired("请选择是否索引"), trigger: "change" }],
|
isIndex: [{ required: true, validator: validateRadioRequired("请选择是否索引"), trigger: "change" }],
|
||||||
sort: [regular.REQUIRED, regular.INTEGER],
|
sort: [regular.REQUIRED, regular.INTEGER],
|
||||||
|
categoryIds: [
|
||||||
|
{
|
||||||
|
type: "array",
|
||||||
|
required: true,
|
||||||
|
min: 1,
|
||||||
|
message: "请选择关联分类",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -262,15 +296,24 @@ export default {
|
|||||||
back() {
|
back() {
|
||||||
this.$router.push({ name: "goods-parameter" });
|
this.$router.push({ name: "goods-parameter" });
|
||||||
},
|
},
|
||||||
|
syncCategoryIds(ids) {
|
||||||
|
const categoryIds = toStringArray(ids);
|
||||||
|
this.selectedCategoryIds = categoryIds;
|
||||||
|
if (!this.form) this.form = {};
|
||||||
|
this.form.categoryIds = categoryIds;
|
||||||
|
},
|
||||||
touchOptionsValidate() {
|
touchOptionsValidate() {
|
||||||
if (this.$refs.form && this.$refs.form.validateField) {
|
this.$nextTick(() => {
|
||||||
this.$refs.form.validateField("options");
|
const form = this.$refs.form;
|
||||||
|
if (form && typeof form.validateField === "function") {
|
||||||
|
// validateField rejects on failure; catch to avoid dev-server [object Object] overlay
|
||||||
|
form.validateField("options", () => {});
|
||||||
}
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
addOptionRow() {
|
addOptionRow() {
|
||||||
if (!Array.isArray(this.form.options)) this.form.options = [];
|
if (!Array.isArray(this.form.options)) this.form.options = [];
|
||||||
this.form.options.push({ value: "" });
|
this.form.options.push({ value: "" });
|
||||||
this.touchOptionsValidate();
|
|
||||||
},
|
},
|
||||||
removeOptionRow(index) {
|
removeOptionRow(index) {
|
||||||
if (!Array.isArray(this.form.options)) this.form.options = [];
|
if (!Array.isArray(this.form.options)) this.form.options = [];
|
||||||
@@ -290,17 +333,8 @@ export default {
|
|||||||
const res = await getGoodsParamsDetail(parameterId).catch(() => null);
|
const res = await getGoodsParamsDetail(parameterId).catch(() => null);
|
||||||
if (!(res && res.success && res.result)) return;
|
if (!(res && res.success && res.result)) return;
|
||||||
const dto = res.result;
|
const dto = res.result;
|
||||||
const opts = normalizeOptions(dto.options);
|
this.form = buildFormState(dto, parameterId);
|
||||||
this.form = {
|
this.selectedCategoryIds = [...this.form.categoryIds];
|
||||||
id: dto.id || parameterId,
|
|
||||||
paramName: dto.paramName || "",
|
|
||||||
options: opts.map((x) => ({ value: x })),
|
|
||||||
required: normalize01(dto.required, 0),
|
|
||||||
isIndex: normalize01(dto.isIndex, 0),
|
|
||||||
sort: Number(dto.sort ?? 0) || 0,
|
|
||||||
};
|
|
||||||
const list = Array.isArray(dto.categoryParameterList) ? dto.categoryParameterList : [];
|
|
||||||
this.selectedCategoryIds = toStringArray(list.map((x) => x && x.categoryId).filter(Boolean));
|
|
||||||
},
|
},
|
||||||
async openCategoryModal() {
|
async openCategoryModal() {
|
||||||
this.categoryModalVisible = true;
|
this.categoryModalVisible = true;
|
||||||
@@ -320,7 +354,13 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
onCategoryTreeCheckChange(_data, checkedInfo) {
|
onCategoryTreeCheckChange(_data, checkedInfo) {
|
||||||
this.selectedCategoryIds = toStringArray(checkedInfo?.checkedKeys || []);
|
this.syncCategoryIds(checkedInfo?.checkedKeys || []);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const form = this.$refs.form;
|
||||||
|
if (form && typeof form.validateField === "function") {
|
||||||
|
form.validateField("categoryIds", () => {});
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
initForm() {
|
initForm() {
|
||||||
if (this.id) {
|
if (this.id) {
|
||||||
@@ -329,15 +369,8 @@ export default {
|
|||||||
if (cached) {
|
if (cached) {
|
||||||
try {
|
try {
|
||||||
const row = JSON.parse(cached);
|
const row = JSON.parse(cached);
|
||||||
const opts = normalizeOptions(row.options);
|
this.form = buildFormState(row, row.id);
|
||||||
this.form = {
|
this.selectedCategoryIds = [...this.form.categoryIds];
|
||||||
id: row.id,
|
|
||||||
paramName: row.paramName || "",
|
|
||||||
options: opts.map((x) => ({ value: x })),
|
|
||||||
required: normalize01(row.required, 0),
|
|
||||||
isIndex: normalize01(row.isIndex, 0),
|
|
||||||
sort: Number(row.sort ?? 0) || 0,
|
|
||||||
};
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.modalType = 0;
|
this.modalType = 0;
|
||||||
}
|
}
|
||||||
@@ -348,7 +381,7 @@ export default {
|
|||||||
if (!Array.isArray(this.form.options) || this.form.options.length === 0) {
|
if (!Array.isArray(this.form.options) || this.form.options.length === 0) {
|
||||||
this.form.options = [{ value: "" }];
|
this.form.options = [{ value: "" }];
|
||||||
}
|
}
|
||||||
this.selectedCategoryIds = [];
|
this.syncCategoryIds([]);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleSubmit() {
|
handleSubmit() {
|
||||||
@@ -356,7 +389,7 @@ export default {
|
|||||||
if (!valid) return;
|
if (!valid) return;
|
||||||
this.submitLoading = true;
|
this.submitLoading = true;
|
||||||
const options = normalizeOptions(this.form.options);
|
const options = normalizeOptions(this.form.options);
|
||||||
const categoryIds = toStringArray(this.selectedCategoryIds);
|
const categoryIds = toStringArray(this.form.categoryIds);
|
||||||
const payload = {
|
const payload = {
|
||||||
...this.form,
|
...this.form,
|
||||||
options: options.join(","),
|
options: options.join(","),
|
||||||
@@ -404,4 +437,14 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
<style lang="scss">
|
||||||
|
.options-editor {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 520px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-editor__actions {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -44,7 +44,7 @@
|
|||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div v-if="row">
|
<div v-if="row">
|
||||||
<a class="link-text" @click="goEdit(row)">编辑</a>
|
<a class="link-text" @click="goEdit(row)">编辑</a>
|
||||||
<span class="op-split">|</span>|<span class="op-split">|</span>
|
<span class="op-split">|</span>
|
||||||
<a class="link-text" @click="remove(row)">删除</a>
|
<a class="link-text" @click="remove(row)">删除</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="article-page">
|
||||||
<el-row :gutter="10">
|
<div class="article-page__aside">
|
||||||
<el-col :span="4" style="height: 100%">
|
<el-card class="article-category">
|
||||||
<el-card class="article-category mr_10">
|
|
||||||
<el-tree
|
<el-tree
|
||||||
:data="treeData"
|
:data="treeData"
|
||||||
:props="{ label: 'title', children: 'children' }"
|
:props="{ label: 'title', children: 'children' }"
|
||||||
@@ -12,8 +11,8 @@
|
|||||||
@node-click="handleCateChange"
|
@node-click="handleCateChange"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :span="20">
|
<div class="article-page__main">
|
||||||
<el-card class="article-detail">
|
<el-card class="article-detail">
|
||||||
<el-form
|
<el-form
|
||||||
ref="searchForm"
|
ref="searchForm"
|
||||||
@@ -41,6 +40,7 @@
|
|||||||
<el-button v-if="!selected" type="primary" @click="add">添加</el-button>
|
<el-button v-if="!selected" type="primary" @click="add">添加</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="article-table-wrap">
|
||||||
<el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
|
<el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
|
||||||
<el-table-column prop="articleCategoryName" label="分类名称" width="150" />
|
<el-table-column prop="articleCategoryName" label="分类名称" width="150" />
|
||||||
<el-table-column prop="title" label="文章标题" min-width="200" show-overflow-tooltip />
|
<el-table-column prop="title" label="文章标题" min-width="200" show-overflow-tooltip />
|
||||||
@@ -75,6 +75,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||||
<el-pagination
|
<el-pagination
|
||||||
@@ -89,8 +90,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-dialog
|
<el-dialog
|
||||||
v-if="!selected"
|
v-if="!selected"
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
>
|
>
|
||||||
<el-form ref="form" :model="form" label-width="100px">
|
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||||
<el-form-item label="文章标题" prop="title">
|
<el-form-item label="文章标题" prop="title">
|
||||||
<el-input v-model="form.title" clearable style="width: 40%" />
|
<el-input v-model="form.title" clearable style="width: 40%" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -155,6 +155,25 @@ import {
|
|||||||
updateArticleStatus,
|
updateArticleStatus,
|
||||||
} from "@/api/pages";
|
} from "@/api/pages";
|
||||||
import tinymec from "@/components/editor/index.vue";
|
import tinymec from "@/components/editor/index.vue";
|
||||||
|
import { regular } from "@/utils";
|
||||||
|
|
||||||
|
const validateArticleContent = (rule, value, callback) => {
|
||||||
|
const html = String(value || "").trim();
|
||||||
|
if (!html) {
|
||||||
|
callback(new Error("请填写文章内容"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const text = html
|
||||||
|
.replace(/<[^>]+>/g, "")
|
||||||
|
.replace(/ /gi, " ")
|
||||||
|
.trim();
|
||||||
|
const hasImage = /<img[\s>]/i.test(html);
|
||||||
|
if (!text && !hasImage) {
|
||||||
|
callback(new Error("请填写文章内容"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -190,6 +209,12 @@ export default {
|
|||||||
content: "",
|
content: "",
|
||||||
id: "",
|
id: "",
|
||||||
},
|
},
|
||||||
|
formValidate: {
|
||||||
|
title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
|
||||||
|
categoryId: [{ required: true, message: "请选择文章分类", trigger: "change" }],
|
||||||
|
sort: [regular.REQUIRED, regular.INTEGER],
|
||||||
|
content: [{ required: true, validator: validateArticleContent, trigger: "change" }],
|
||||||
|
},
|
||||||
list: [],
|
list: [],
|
||||||
treeValue: "",
|
treeValue: "",
|
||||||
treeData: [],
|
treeData: [],
|
||||||
@@ -213,6 +238,15 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getDefaultForm() {
|
||||||
|
return {
|
||||||
|
openStatus: false,
|
||||||
|
title: "",
|
||||||
|
categoryId: "",
|
||||||
|
sort: 1,
|
||||||
|
content: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
init() {
|
init() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
this.getAllList(0);
|
this.getAllList(0);
|
||||||
@@ -224,8 +258,8 @@ export default {
|
|||||||
handleCateChange(data) {
|
handleCateChange(data) {
|
||||||
if (!data) return;
|
if (!data) return;
|
||||||
const { value, title } = data;
|
const { value, title } = data;
|
||||||
this.list.push({ value, title });
|
this.searchForm.categoryId =
|
||||||
this.searchForm.categoryId = value;
|
value === "0" || value === 0 ? "" : value;
|
||||||
this.searchTreeValue = title;
|
this.searchTreeValue = title;
|
||||||
},
|
},
|
||||||
changeSwitch(v) {
|
changeSwitch(v) {
|
||||||
@@ -308,10 +342,24 @@ export default {
|
|||||||
}
|
}
|
||||||
return arr;
|
return arr;
|
||||||
},
|
},
|
||||||
|
buildArticleSearchParams() {
|
||||||
|
const params = { ...this.searchForm };
|
||||||
|
const categoryId = params.categoryId;
|
||||||
|
if (
|
||||||
|
categoryId === "" ||
|
||||||
|
categoryId === null ||
|
||||||
|
categoryId === undefined ||
|
||||||
|
categoryId === 0 ||
|
||||||
|
categoryId === "0"
|
||||||
|
) {
|
||||||
|
delete params.categoryId;
|
||||||
|
}
|
||||||
|
return params;
|
||||||
|
},
|
||||||
getDataList(val) {
|
getDataList(val) {
|
||||||
if (val) this.form = {};
|
if (val) this.form = {};
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
getArticle(this.searchForm)
|
getArticle(this.buildArticleSearchParams())
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.total = res.result.total;
|
this.total = res.result.total;
|
||||||
@@ -323,6 +371,9 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleSubmit() {
|
handleSubmit() {
|
||||||
|
if (this.$refs.editor?.getContent) {
|
||||||
|
this.form.content = this.$refs.editor.getContent();
|
||||||
|
}
|
||||||
this.$refs.form.validate((valid) => {
|
this.$refs.form.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.submitLoading = true;
|
this.submitLoading = true;
|
||||||
@@ -353,20 +404,17 @@ export default {
|
|||||||
this.modalType = 0;
|
this.modalType = 0;
|
||||||
this.modalTitle = "添加文章";
|
this.modalTitle = "添加文章";
|
||||||
this.treeValue = "";
|
this.treeValue = "";
|
||||||
this.form = {
|
this.form = this.getDefaultForm();
|
||||||
sort: 1,
|
|
||||||
content: "",
|
|
||||||
};
|
|
||||||
this.$refs.form?.resetFields();
|
|
||||||
delete this.form.id;
|
|
||||||
this.modalVisible = true;
|
this.modalVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.form?.clearValidate?.();
|
||||||
|
});
|
||||||
},
|
},
|
||||||
edit(data) {
|
edit(data) {
|
||||||
this.modalType = 1;
|
this.modalType = 1;
|
||||||
this.modalTitle = "编辑文章";
|
this.modalTitle = "编辑文章";
|
||||||
this.treeValue = "";
|
this.treeValue = "";
|
||||||
this.form = { content: "" };
|
this.form = this.getDefaultForm();
|
||||||
this.$refs.form?.resetFields();
|
|
||||||
seeArticle(data.id).then((res) => {
|
seeArticle(data.id).then((res) => {
|
||||||
if (res.result) {
|
if (res.result) {
|
||||||
this.modalVisible = true;
|
this.modalVisible = true;
|
||||||
@@ -402,3 +450,35 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.article-page {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-page__aside {
|
||||||
|
flex: 0 0 220px;
|
||||||
|
width: 220px;
|
||||||
|
min-width: 180px;
|
||||||
|
max-width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-page__main {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-category,
|
||||||
|
.article-detail {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-table-wrap {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -13,11 +13,11 @@
|
|||||||
style="width: 260px"
|
style="width: 260px"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="活动时间" class="activity-time-form-item">
|
<el-form-item label="活动时间" prop="rangeTime" class="activity-time-form-item">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
type="datetimerange"
|
type="datetimerange"
|
||||||
:disabled-date="options.disabledDate"
|
:disabled-date="options.disabledDate"
|
||||||
v-model="rangeTime"
|
v-model="form.rangeTime"
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
start-placeholder="开始时间"
|
start-placeholder="开始时间"
|
||||||
end-placeholder="结束时间"
|
end-placeholder="结束时间"
|
||||||
@@ -184,13 +184,13 @@ export default {
|
|||||||
},
|
},
|
||||||
showCouponSelect: false,
|
showCouponSelect: false,
|
||||||
tempCouponList: [],
|
tempCouponList: [],
|
||||||
rangeTime: "",
|
|
||||||
checkUserList: false,
|
checkUserList: false,
|
||||||
selectedMember: [],
|
selectedMember: [],
|
||||||
form: {
|
form: {
|
||||||
promotionName: "",
|
promotionName: "",
|
||||||
activityScope: "ALL",
|
activityScope: "ALL",
|
||||||
couponActivityType: "REGISTERED",
|
couponActivityType: "REGISTERED",
|
||||||
|
rangeTime: [],
|
||||||
startTime: "",
|
startTime: "",
|
||||||
endTime: "",
|
endTime: "",
|
||||||
memberDTOS: [],
|
memberDTOS: [],
|
||||||
@@ -200,9 +200,15 @@ export default {
|
|||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
selectCouponList: [],
|
selectCouponList: [],
|
||||||
formRule: {
|
formRule: {
|
||||||
promotionName: [{ required: true, message: "活动名称不能为空" }],
|
promotionName: [{ required: true, message: "活动名称不能为空", trigger: "blur" }],
|
||||||
rangeTime: [{ required: true, message: "请选择活动有效期" }],
|
rangeTime: [
|
||||||
description: [{ required: true, message: "请输入范围描述" }],
|
{
|
||||||
|
type: "array",
|
||||||
|
required: true,
|
||||||
|
message: "请选择活动有效期",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -291,39 +297,45 @@ export default {
|
|||||||
this.showCouponSelect = true;
|
this.showCouponSelect = true;
|
||||||
},
|
},
|
||||||
handleSubmit() {
|
handleSubmit() {
|
||||||
if (this.form.couponFrequencyEnum !== "") {
|
if (
|
||||||
if (this.form.activityScope == "ALL") {
|
this.form.couponActivityType === "AUTO_COUPON" &&
|
||||||
this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
|
this.form.activityScope !== "ALL"
|
||||||
this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
|
) {
|
||||||
|
|
||||||
this.$refs.form.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
const params = JSON.parse(JSON.stringify(this.form));
|
|
||||||
this.submitLoading = true;
|
|
||||||
delete params.id;
|
|
||||||
saveActivityCoupon(params).then((res) => {
|
|
||||||
this.submitLoading = false;
|
|
||||||
if (res.success) {
|
|
||||||
this.$Message.success("优惠券活动创建成功");
|
|
||||||
this.closeCurrentPage();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$Message.info("自动发券只能全用户发送");
|
this.$Message.info("自动发券只能全用户发送");
|
||||||
this.form.couponActivityType = "SPECIFY";
|
this.form.couponActivityType = "SPECIFY";
|
||||||
this.form.activityScope = "ALL";
|
this.form.activityScope = "ALL";
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
|
|
||||||
this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
|
|
||||||
|
|
||||||
this.$refs.form.validate((valid) => {
|
this.$refs.form.validate((valid) => {
|
||||||
if (valid) {
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.form.couponActivityItems.length) {
|
||||||
|
this.$Message.warning("请至少选择一张优惠券");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.form.couponActivityType === "SPECIFY" &&
|
||||||
|
this.form.activityScope === "DESIGNATED" &&
|
||||||
|
!this.form.memberDTOS.length
|
||||||
|
) {
|
||||||
|
this.$Message.warning("请选择会员");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [start, end] = this.form.rangeTime;
|
||||||
|
const startDate = start instanceof Date ? start : new Date(start);
|
||||||
|
const endDate = end instanceof Date ? end : new Date(end);
|
||||||
const params = JSON.parse(JSON.stringify(this.form));
|
const params = JSON.parse(JSON.stringify(this.form));
|
||||||
this.submitLoading = true;
|
params.startTime = this.$filters.unixToDate(startDate.getTime() / 1000);
|
||||||
|
params.endTime = this.$filters.unixToDate(endDate.getTime() / 1000);
|
||||||
|
delete params.rangeTime;
|
||||||
delete params.id;
|
delete params.id;
|
||||||
|
|
||||||
|
this.submitLoading = true;
|
||||||
saveActivityCoupon(params).then((res) => {
|
saveActivityCoupon(params).then((res) => {
|
||||||
this.submitLoading = false;
|
this.submitLoading = false;
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
@@ -331,9 +343,7 @@ export default {
|
|||||||
this.closeCurrentPage();
|
this.closeCurrentPage();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
closeCurrentPage() {
|
closeCurrentPage() {
|
||||||
this.$store.commit("removeTag", "add-platform-coupon");
|
this.$store.commit("removeTag", "add-platform-coupon");
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<div class="form-item-view">
|
<div class="form-item-view">
|
||||||
<h4>商品信息</h4>
|
<h4>商品信息</h4>
|
||||||
|
|
||||||
<el-form-item label="选择商品" prop="scopeType">
|
<el-form-item label="选择商品" prop="promotionGoodsList">
|
||||||
<el-button type="primary" @click="openSkuList">选择商品</el-button>
|
<el-button type="primary" @click="openSkuList">选择商品</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
@@ -116,13 +116,30 @@ export default {
|
|||||||
modalType: 0,
|
modalType: 0,
|
||||||
form: {
|
form: {
|
||||||
promotionGoodsList: [],
|
promotionGoodsList: [],
|
||||||
|
rangeTime: [],
|
||||||
},
|
},
|
||||||
id: this.$route.query.id,
|
id: this.$route.query.id,
|
||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
selectedGoods: [],
|
selectedGoods: [],
|
||||||
promotionGoodsList: [],
|
promotionGoodsList: [],
|
||||||
formRule: {
|
formRule: {
|
||||||
rangeTime: [{ required: true, message: "请选择活动时间" }],
|
promotionGoodsList: [
|
||||||
|
{
|
||||||
|
type: "array",
|
||||||
|
required: true,
|
||||||
|
min: 1,
|
||||||
|
message: "请至少选择一个商品",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
rangeTime: [
|
||||||
|
{
|
||||||
|
type: "array",
|
||||||
|
required: true,
|
||||||
|
message: "请选择活动时间",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
disabledDate(date) {
|
disabledDate(date) {
|
||||||
@@ -140,21 +157,23 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
handleSubmit() {
|
handleSubmit() {
|
||||||
this.$refs.form.validate((valid) => {
|
this.$refs.form.validate((valid) => {
|
||||||
if (valid) {
|
if (!valid) {
|
||||||
const params = JSON.parse(JSON.stringify(this.form));
|
|
||||||
if (this.form.rangeTime[0] === "" || this.form.rangeTime[0] === "") {
|
|
||||||
this.$Message.error("请选择活动时间");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
params.startTime = this.$filters.unixToDate(
|
if (!this.form.promotionGoodsList.length) {
|
||||||
this.form.rangeTime[0] / 1000
|
this.$Message.warning("请至少选择一个商品");
|
||||||
);
|
return;
|
||||||
params.endTime = this.$filters.unixToDate(
|
}
|
||||||
this.form.rangeTime[1] / 1000
|
|
||||||
);
|
const params = JSON.parse(JSON.stringify(this.form));
|
||||||
|
const [start, end] = this.form.rangeTime || [];
|
||||||
|
const startDate = start instanceof Date ? start : new Date(start);
|
||||||
|
const endDate = end instanceof Date ? end : new Date(end);
|
||||||
|
params.startTime = this.$filters.unixToDate(startDate.getTime() / 1000);
|
||||||
|
params.endTime = this.$filters.unixToDate(endDate.getTime() / 1000);
|
||||||
delete params.rangeTime;
|
delete params.rangeTime;
|
||||||
|
|
||||||
let checkResult = true;
|
let checkResult = true;
|
||||||
if (this.form.promotionGoodsList.length > 0) {
|
|
||||||
this.form.promotionGoodsList.forEach((res) => {
|
this.form.promotionGoodsList.forEach((res) => {
|
||||||
if (res.stock <= 0 || res.stock > res.quantity) {
|
if (res.stock <= 0 || res.stock > res.quantity) {
|
||||||
checkResult = false;
|
checkResult = false;
|
||||||
@@ -198,7 +217,6 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
if (!checkResult) {
|
if (!checkResult) {
|
||||||
return;
|
return;
|
||||||
@@ -207,11 +225,12 @@ export default {
|
|||||||
saveKanJiaActivityGoods(params).then((res) => {
|
saveKanJiaActivityGoods(params).then((res) => {
|
||||||
this.submitLoading = false;
|
this.submitLoading = false;
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.$Message.success("砍价活动修改成功");
|
this.$Message.success(
|
||||||
|
this.modalType === 1 ? "砍价活动修改成功" : "砍价活动添加成功"
|
||||||
|
);
|
||||||
this.closeCurrentPage();
|
this.closeCurrentPage();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
closeCurrentPage() {
|
closeCurrentPage() {
|
||||||
@@ -232,6 +251,15 @@ export default {
|
|||||||
},
|
},
|
||||||
delGoods(index) {
|
delGoods(index) {
|
||||||
this.form.promotionGoodsList.splice(index, 1);
|
this.form.promotionGoodsList.splice(index, 1);
|
||||||
|
this.touchPromotionGoodsValidate();
|
||||||
|
},
|
||||||
|
touchPromotionGoodsValidate() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const form = this.$refs.form;
|
||||||
|
if (form && typeof form.validateField === "function") {
|
||||||
|
form.validateField("promotionGoodsList", () => {});
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
selectedGoodsData(item) {
|
selectedGoodsData(item) {
|
||||||
let list = [];
|
let list = [];
|
||||||
@@ -252,6 +280,7 @@ export default {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.form.promotionGoodsList = list;
|
this.form.promotionGoodsList = list;
|
||||||
|
this.touchPromotionGoodsValidate();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -62,7 +62,7 @@
|
|||||||
style="width: 260px"
|
style="width: 260px"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="活动时间" prop="rangeTime">
|
<el-form-item label="活动时间" prop="rangeTime" class="kanjia-activity-time-form-item">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
:disabled="onlyView"
|
:disabled="onlyView"
|
||||||
v-model="form.rangeTime"
|
v-model="form.rangeTime"
|
||||||
@@ -72,7 +72,6 @@
|
|||||||
start-placeholder="开始时间"
|
start-placeholder="开始时间"
|
||||||
end-placeholder="结束时间"
|
end-placeholder="结束时间"
|
||||||
:disabled-date="disabledDate"
|
:disabled-date="disabledDate"
|
||||||
style="width: 360px"
|
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div>
|
<div>
|
||||||
@@ -252,4 +251,12 @@ h4 {
|
|||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.kanjia-activity-time-form-item {
|
||||||
|
:deep(.el-date-editor) {
|
||||||
|
width: 360px !important;
|
||||||
|
max-width: 360px;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -370,8 +370,9 @@
|
|||||||
:show-close="true"
|
:show-close="true"
|
||||||
>
|
>
|
||||||
<memberLayout
|
<memberLayout
|
||||||
|
v-if="memberModalFlag"
|
||||||
|
:selectedMember="true"
|
||||||
@callback="callbackMember"
|
@callback="callbackMember"
|
||||||
class="selectedMember"
|
|
||||||
ref="memberLayout"
|
ref="memberLayout"
|
||||||
/>
|
/>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -566,7 +567,6 @@ export default {
|
|||||||
|
|
||||||
//选择会员
|
//选择会员
|
||||||
selectMember() {
|
selectMember() {
|
||||||
this.$refs["memberLayout"].selectedMember = true;
|
|
||||||
this.memberModalFlag = true;
|
this.memberModalFlag = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@
|
|||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<template v-if="row">
|
<template v-if="row">
|
||||||
<a class="link-text" @click="edit(row)">编辑</a>
|
<a class="link-text" @click="edit(row)">编辑</a>
|
||||||
<span class="op-split">|</span>|<span class="op-split">|</span>
|
<span class="op-split">|</span>
|
||||||
<a class="link-text" @click="remove(row)">删除</a>
|
<a class="link-text" @click="remove(row)">删除</a>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user