fix: 公告内容排版处理
This commit is contained in:
parent
8dbaa7aa36
commit
477519867e
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">序号越大越靠前显示,建议设置为10、20、30等便于后续插入</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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue