fix: 公告内容排版处理

This commit is contained in:
lzhizhao 2025-10-01 20:04:04 +08:00
parent 8dbaa7aa36
commit 477519867e
3 changed files with 209 additions and 474 deletions

View File

@ -71,7 +71,7 @@
</el-row> </el-row>
</el-card> </el-card>
<el-card class="table-card" shadow="never"> <div class="table-container">
<div style="margin-bottom: 15px;"> <div style="margin-bottom: 15px;">
<el-button type="primary" size="small" @click="addProduct">添加商品</el-button> <el-button type="primary" size="small" @click="addProduct">添加商品</el-button>
<el-button :disabled="selectList.length <= 0" type="danger" size="small" @click="deleteProduct">批量删除</el-button> <el-button :disabled="selectList.length <= 0" type="danger" size="small" @click="deleteProduct">批量删除</el-button>
@ -169,7 +169,7 @@
:total="pagination.total" :total="pagination.total"
class="pagination-container" class="pagination-container"
></el-pagination> ></el-pagination>
</el-card> </div>
<!-- 添加或编辑 --> <!-- 添加或编辑 -->
<add-or-update @queryList="fetchData" ref="addOrUpdate"></add-or-update> <add-or-update @queryList="fetchData" ref="addOrUpdate"></add-or-update>

View File

@ -1,130 +1,65 @@
<template> <template>
<div> <div class="page-container">
<div style="height: calc(100vh - 200px)"> <el-card class="search-card" shadow="never">
<obj-table-plus <el-form :model="formInline" :inline="true" ref="searchForm" class="search-form" size="small">
ref="oTable" <el-form-item label="应用" prop="app">
style="height: 100%" <el-select v-model="formInline.app" placeholder="请选择应用" style="width: 200px;">
:tableCols="tableCols" <el-option v-for="item in application" :key="item.value" :label="item.label" :value="item.value"></el-option>
:tableProp="tableProp"
@query="queryList"
v-model="dataList"
:tableEvent="tableEvent"
>
<template slot="tableTop">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<!-- <el-form-item label="模块">
<el-select
@change="changePosition"
class="filter-item"
style="width: 200px"
v-model="formInline.position"
placeholder="请选择模块"
>
<el-option
v-for="item in [
{
label: '菜市场详情页',
value: '2',
},
{
label: '摊位详情',
value: '3',
},
]"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="storeList.length > 1 && formInline.position === '3'"
label="摊铺"
>
<el-select
class="filter-item"
style="width: 200px"
v-model="formInline.targetId"
placeholder="请选择摊铺"
>
<el-option
v-for="item in storeList"
:key="item.shopId"
:label="item.shopName"
:value="item.shopId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类型">
<el-select
class="filter-item"
style="width: 200px"
v-model="formInline.type"
placeholder="请选择分类类型"
>
<el-option
v-for="item in type"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="应用">
<el-select
class="filter-item"
style="width: 200px"
v-model="formInline.app"
placeholder="请选择分类类型"
>
<el-option
v-for="item in application"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="$refs.oTable.reload()" <el-button type="primary" @click="handleQuery" icon="el-icon-search" size="small">查询</el-button>
>查询</el-button <el-button @click="Reset" icon="el-icon-refresh" size="small">重置</el-button>
>
<el-button type="primary" @click="Reset">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- <el-tabs v-model="activeName" @tab-click="handleClick"> </el-card>
<el-tab-pane
v-for="item in statusList" <div class="table-container">
:key="item.value" <div style="margin-bottom: 15px;">
:label="item.label" <el-button type="primary" size="small" @click="addBanner">新增公告</el-button>
:name="item.value" <el-button type="primary" size="small" @click="setSort">排序</el-button>
></el-tab-pane>
</el-tabs> -->
<div class="mb-2">
<el-button type="primary" size="small" @click="addBanner"
>新增公告</el-button
>
<el-button type="primary" size="small" @click="setSort"
>排序</el-button
>
</div> </div>
<el-table :data="dataList" style="width: 100%">
<el-table-column type="index" width="60" align="center" label="序号" />
<el-table-column prop="title" label="公告通知" align="center" />
<el-table-column label="位置" align="center" width="120">
<template slot-scope="scope">
<span>{{ getPosition(scope.row.position) }}</span>
</template> </template>
</obj-table-plus> </el-table-column>
<el-table-column label="状态" align="center" width="120">
<template slot-scope="scope">
<el-tag :type="scope.row.status ? 'success' : 'info'">{{ scope.row.status ? "已启用" : "已禁用" }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" align="center" width="80" />
<el-table-column label="操作" fixed="right" align="center" width="220">
<template slot-scope="scope">
<el-button style="margin-right: 10px" size="mini" type="primary" @click="updateBanner(scope.row)">编辑</el-button>
<el-popconfirm @onConfirm="deleteBanner(scope.row)" confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="确定删除吗?">
<el-button size="mini" type="danger" slot="reference">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="pagination-container"
></el-pagination>
</div> </div>
<!-- 轮播图 --> <!-- 轮播图 -->
<addOrUpdate <addOrUpdate ref="addOrUpdate" @queryList="queryList"></addOrUpdate>
ref="addOrUpdate"
@queryList="$refs.oTable.reload()"
></addOrUpdate>
<!-- 排序 --> <!-- 排序 -->
<setSorting <setSorting @queryList="queryList" ref="setSorting"></setSorting>
@queryList="$refs.oTable.reload()"
ref="setSorting"
></setSorting>
</div> </div>
</template> </template>
@ -136,31 +71,15 @@ export default {
components: { addOrUpdate, setSorting }, components: { addOrUpdate, setSorting },
data() { data() {
return { return {
activeName: "5",
advanceSellStatus: "",
dataList: [], dataList: [],
formInline: { formInline: {
targetId: "", targetId: "",
position: "3", position: "3",
app: 1,
}, },
tableProp: { page: 1,
"auto-resize": true, limit: 10,
border: true, total: 0,
height: "auto",
"row-id": "id",
"show-overflow": false,
},
selectList: [],
type: [
{
value: 0,
label: "菜市场分类",
},
{
value: 1,
label: "云店分类",
},
],
application: [ application: [
{ label: "用户端", value: 1 }, { label: "用户端", value: 1 },
{ {
@ -190,51 +109,39 @@ export default {
app: 1, app: 1,
}; };
} }
this.$nextTick(() => { this.queryList();
this.$refs.oTable.reload();
});
}, },
methods: { methods: {
// getData() { handleQuery() {
// this.$api.mer_admin this.page = 1;
// .storeList({ marketId: this.formInline.marketId }) this.queryList();
// .then((res) => {
// this.storeList = res.data.data;
// this.formInline.shopId = res.data.data[0].shopId;
// this.$nextTick(() => {
// this.$refs.oTable.reload();
// });
// });
// },
addBanner() {
this.$refs.addOrUpdate.toggle().add(this.formInline);
}, },
changePosition(e) { queryList() {
console.log(e, this.shopId, this.marketId);
if (e == 3) {
this.formInline.targetId = this.shopId;
} else {
this.formInline.targetId = this.marketId;
}
console.log(e);
},
queryList(pageNo, pageSize) {
this.$api.mer_admin this.$api.mer_admin
.noticePage({ .noticePage({
pageNumber: pageNo, pageNumber: this.page,
pageSize: pageSize, pageSize: this.limit,
...this.formInline, ...this.formInline,
}) })
.then((res) => { .then((res) => {
console.log(res); this.dataList = res.data.data.data;
this.$refs.oTable.complete( this.total = Number(res.data.data.total);
res.data.data.data,
Number(res.data.data.total)
);
}) })
.catch((err) => { .catch((err) => {
this.$refs.oTable.complete(false); // Handle error
});
},
addBanner() {
this.$refs.addOrUpdate.add(this.formInline);
this.$refs.addOrUpdate.toggle();
},
updateBanner(row) {
this.$refs.addOrUpdate.update(row);
this.$refs.addOrUpdate.toggle();
},
deleteBanner(row) {
this.$api.mer_admin.noticeDelete({ id: row.id }).then((res) => {
this.queryList();
}); });
}, },
Reset() { Reset() {
@ -243,112 +150,31 @@ export default {
position: "3", position: "3",
app: 1, app: 1,
}; };
this.$refs.oTable.reload(); this.handleQuery();
}, },
//
setSort() { setSort() {
this.$refs.setSorting.init(this.dataList); this.$refs.setSorting.init(this.dataList);
}, },
handleSizeChange(val) {
this.limit = val;
this.queryList();
}, },
computed: { handleCurrentChange(val) {
tableCols() { this.page = val;
return [ this.queryList();
// { type: "checkbox", width: "60px", fixed: "left" },
{ type: "seq", width: "60px", align: "center", title: "序号" },
{
title: "公告通知",
align: "center",
field: "title",
}, },
{ getPosition(position) {
title: "位置", if (position == "1") {
align: "center",
field: "startTime",
type: "jsx",
width: "120px",
render: ({ row }) => {
let getPosition = (row) => {
if (row == "1") {
return "首页"; return "首页";
} else if (row == "2") { } else if (position == "2") {
return "菜市场详情页"; return "菜市场详情页";
} else if (row == "3") { } else if (position == "3") {
return "摊位详情"; return "摊位详情";
} }
}; return "";
return <span>{getPosition(row.position)}</span>;
}, },
}, },
{ computed: {
title: "状态",
align: "center",
field: "status",
type: "jsx",
width: "120px",
render: ({ row }) => {
return <span>{row.status ? "已启用" : "已禁用"}</span>;
},
},
{
title: "操作",
fixed: "right",
type: "jsx",
align: "center",
width: "220px",
render: ({ row }) => {
let updateBanner = () => {
this.$refs.addOrUpdate.toggle(row).update();
};
let deleteBanner = () => {
this.$api.mer_admin
.noticeDelete({ id: row.id })
.then((res) => {
this.$refs.oTable.reload();
})
.catch((err) => {
this.$refs.oTable.reload();
});
};
let onCancel = () => {};
return (
<div>
<el-button
style="margin-right:10px"
size="mini"
type="primary"
onClick={updateBanner}
>
编辑
</el-button>
<el-popconfirm
onConfirm={deleteBanner}
onCancel={onCancel}
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确定删除吗?"
>
<el-button size="mini" type="danger" slot="reference">
删除
</el-button>
</el-popconfirm>
</div>
);
},
},
];
},
tableEvent() {
return {
"checkbox-all": ({ records, reserves }) => {
this.selectList = [...records, ...reserves];
},
"checkbox-change": ({ records, reserves }) => {
this.selectList = [...records, ...reserves];
},
};
},
...mapState("userData", [ ...mapState("userData", [
"isMerchant", "isMerchant",
"marketList", "marketList",
@ -360,4 +186,24 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped></style> <style scoped>
.page-container {
}
.search-card {
margin-bottom: 15px;
}
.search-form .el-form-item {
margin-bottom: 0;
}
.pagination-container {
margin-top: 20px;
text-align: right;
}
</style>
<style>
.search-form .el-form-item__label {
padding-bottom: 0px !important;
font-size: 14px;
line-height: 32px;
}
</style>

View File

@ -1,218 +1,107 @@
<template> <template>
<div> <el-dialog :title="modalConfig.title" :visible.sync="modalConfig.show" width="700px" @close="handleClose">
<obj-modal <el-form ref="form" :model="modalData" :rules="rules" label-width="150px">
ref="modal" <el-form-item label="排序" prop="sort">
labelWidth="150px" <el-input-number v-model="modalData.sort" controls-position="right" :min="0"></el-input-number>
:modalCols="modalCols" <div class="form-tip">序号越大越靠前显示建议设置为102030等便于后续插入</div>
:modalConfig="modalConfig" </el-form-item>
:modalData="modalData" <el-form-item label="公告内容" prop="title">
:modalHandles="modalHandles" <el-input type="textarea" v-model="modalData.title" :rows="5" maxlength="120"></el-input>
> </el-form-item>
<template slot="dialog__after"> </template> <el-form-item label="状态" prop="status">
</obj-modal> <el-switch v-model="modalData.status" active-text="启用" inactive-text="禁用"></el-switch>
</div> </el-form-item>
<el-form-item label="应用" prop="app">
<el-select v-model="modalData.app" placeholder="请选择应用">
<el-option label="用户" :value="1"></el-option>
<el-option label="商家" :value="2"></el-option>
<el-option label="专员" :value="3"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="toggle"> </el-button>
<el-button type="primary" @click="handleSubmit"> </el-button>
</span>
</el-dialog>
</template> </template>
<script> <script>
import { debounce, cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default { export default {
components: {},
data() { data() {
return { return {
isAdd: true, isAdd: true,
//
modalConfig: { modalConfig: {
title: "", title: "",
show: false, show: false,
width: "700px",
}, },
modalData: {}, modalData: {
settingId: "", sort: 10,
form: {},
};
},
watch: {
"modalConfig.show"(newVal) {
if (!newVal) {
//
setTimeout(() => {
this.$refs.modal.resetFields();
});
}
},
},
methods: {
queryTableData(pageNo, pageSize) {},
toggle(e) {
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
} else {
this.modalConfig.show = false;
}
if (e) {
this.init(cloneDeep(e));
}
return {
add: (row) => {
console.log(row);
this.modalData = {
targetId: row.targetId,
title: "", title: "",
position: row.position,
status: true, status: true,
app: 1, app: 1,
}; targetId: "",
this.fileList = []; position: "",
this.modalConfig.title = "添加公告";
this.isAdd = true;
}, },
update: () => { rules: {
this.modalConfig.title = "编辑公告"; title: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
this.isAdd = false; app: [{ required: true, message: "请选择应用", trigger: "change" }],
}, },
}; };
}, },
methods: {
toggle() {
this.modalConfig.show = !this.modalConfig.show;
},
handleClose() {
this.$refs.form.resetFields();
},
init(row) { init(row) {
this.modalData = row; this.modalData = { ...this.modalData, ...row };
}, },
add(row) {
this.isAdd = true;
this.modalConfig.title = "添加公告";
this.modalData = {
sort: 10,
title: "",
status: true,
app: 1,
targetId: row.targetId,
position: row.position,
};
}, },
computed: { update(row) {
modalCols() { this.isAdd = false;
return [ this.modalConfig.title = "编辑公告";
{ this.init(cloneDeep(row));
label: "公告内容",
prop: "title",
type: "Textarea",
required: true,
maxlength: "120",
rows: "5",
rules: {
required: true,
message: "请输入公告内容",
trigger: "blur",
}, },
}, handleSubmit() {
// { this.$refs.form.validate((valid) => {
// label: "", if (valid) {
// prop: "type", const apiCall = this.isAdd
// maxlength: "30", ? this.$api.mer_admin.noticeAdd(this.modalData)
// rules: { : this.$api.mer_admin.noticeUpdate(this.modalData);
// required: true,
// message: "", apiCall.then(() => {
// trigger: "blur", this.$message.success(this.isAdd ? "添加成功" : "编辑成功");
// },
// type: "jsx",
// render: () => {
// return (
// <el-select
// v-model={this.modalData.type}
// placeholder=""
// >
// {[
// { label: "", value: 0 },
// {
// label: "",
// value: 1,
// },
// ].map((item) => {
// return (
// <el-option
// label={item.label}
// value={item.value}
// ></el-option>
// );
// })}
// </el-select>
// );
// },
// },
{
label: "状态",
prop: "status",
maxlength: "30",
type: "jsx",
render: () => {
return (
<el-switch
v-model={this.modalData.status}
active-text="启用"
inactive-text="禁用"
/>
);
},
},
{
label: "应用",
prop: "app",
maxlength: "30",
rules: {
required: true,
message: "请输入轮播图名称",
trigger: "blur",
},
type: "jsx",
render: () => {
return (
<el-select
v-model={this.modalData.app}
placeholder="请选择销售单位"
>
{[
{ label: "用户", value: 1 },
{
label: "商家",
value: 2,
},
{
label: "专员",
value: 3,
},
].map((item) => {
return (
<el-option
label={item.label}
value={item.value}
></el-option>
);
})}
</el-select>
);
},
},
];
},
modalHandles() {
return [
{
label: "取消",
handle: () => {
this.toggle();
},
},
{
label: "确认",
type: "primary",
submit: true,
handle: () => {
console.log(this.modalData);
if (this.isAdd) {
this.$api.mer_admin.noticeAdd(this.modalData).then((res) => {
this.toggle();
this.$emit("queryList");
});
} else {
this.$api.mer_admin.noticeUpdate(this.modalData).then((res) => {
this.toggle(); this.toggle();
this.$emit("queryList"); this.$emit("queryList");
}); });
} }
});
}, },
}, },
];
},
},
asyncComputed: {},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.form-tip {
color: #999;
font-size: 12px;
line-height: 1.5;
}
</style> </style>