320 lines
8.6 KiB
Vue
320 lines
8.6 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div style="height: calc(100vh - 200px)">
|
||
|
|
<obj-table-plus
|
||
|
|
ref="oTable"
|
||
|
|
style="height: 100%"
|
||
|
|
:tableCols="tableCols"
|
||
|
|
: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="changeModule"
|
||
|
|
class="filter-item"
|
||
|
|
style="width: 200px"
|
||
|
|
v-model="formInline.module"
|
||
|
|
placeholder="请选择模块"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in [
|
||
|
|
{
|
||
|
|
label: '菜市场',
|
||
|
|
value: 'market',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '摊铺',
|
||
|
|
value: 'shop',
|
||
|
|
},
|
||
|
|
]"
|
||
|
|
: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.module === 'shop'"
|
||
|
|
label="摊铺"
|
||
|
|
>
|
||
|
|
<el-select
|
||
|
|
class="filter-item"
|
||
|
|
style="width: 200px"
|
||
|
|
v-model="formInline.ownerId"
|
||
|
|
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>
|
||
|
|
<el-button type="primary" @click="$refs.oTable.reload()"
|
||
|
|
>查询</el-button
|
||
|
|
>
|
||
|
|
<el-button type="primary" @click="Reset">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">
|
||
|
|
<el-tab-pane
|
||
|
|
v-for="item in statusList"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:name="item.value"
|
||
|
|
></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>
|
||
|
|
</template>
|
||
|
|
</obj-table-plus>
|
||
|
|
</div>
|
||
|
|
<!-- 轮播图 -->
|
||
|
|
<addOrUpdate
|
||
|
|
ref="addOrUpdate"
|
||
|
|
@queryList="$refs.oTable.reload()"
|
||
|
|
></addOrUpdate>
|
||
|
|
<!-- 排序 -->
|
||
|
|
<setSorting
|
||
|
|
@queryList="$refs.oTable.reload()"
|
||
|
|
ref="setSorting"
|
||
|
|
></setSorting>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import setSorting from "./popup/set-sorting.vue";
|
||
|
|
import addOrUpdate from "./popup/add-or-update.vue";
|
||
|
|
import { mapState } from "vuex";
|
||
|
|
export default {
|
||
|
|
components: { addOrUpdate, setSorting },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeName: "5",
|
||
|
|
advanceSellStatus: "",
|
||
|
|
dataList: [],
|
||
|
|
formInline: {
|
||
|
|
type: 0,
|
||
|
|
ownerId: "",
|
||
|
|
module: "shop",
|
||
|
|
},
|
||
|
|
tableProp: {
|
||
|
|
"auto-resize": true,
|
||
|
|
border: true,
|
||
|
|
height: "auto",
|
||
|
|
"row-id": "id",
|
||
|
|
"show-overflow": false,
|
||
|
|
},
|
||
|
|
selectList: [],
|
||
|
|
type: [
|
||
|
|
{
|
||
|
|
value: 0,
|
||
|
|
label: "菜市场分类",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 1,
|
||
|
|
label: "云店分类",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.formInline = {
|
||
|
|
type: 0,
|
||
|
|
ownerId: this.shopId,
|
||
|
|
module: "shop",
|
||
|
|
};
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.oTable.reload();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// getData() {
|
||
|
|
// this.$api.mer_admin
|
||
|
|
// .storeList({ marketId: this.formInline.marketId })
|
||
|
|
// .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);
|
||
|
|
},
|
||
|
|
changeModule(e) {
|
||
|
|
if (e === "shop") {
|
||
|
|
this.formInline.ownerId = this.shopId;
|
||
|
|
} else {
|
||
|
|
this.formInline.ownerId = this.marketId;
|
||
|
|
}
|
||
|
|
console.log(e);
|
||
|
|
},
|
||
|
|
queryList(pageNo, pageSize) {
|
||
|
|
this.$api.mer_admin
|
||
|
|
.bannerPage({
|
||
|
|
pageNumber: pageNo,
|
||
|
|
pageSize: pageSize,
|
||
|
|
...this.formInline,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
console.log(res);
|
||
|
|
this.$refs.oTable.complete(
|
||
|
|
res.data.data.data,
|
||
|
|
Number(res.data.data.total)
|
||
|
|
);
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
this.$refs.oTable.complete(false);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
Reset() {
|
||
|
|
this.formInline = {
|
||
|
|
type: 0,
|
||
|
|
ownerId: this.shopId,
|
||
|
|
};
|
||
|
|
this.$refs.oTable.reload();
|
||
|
|
},
|
||
|
|
//排序
|
||
|
|
setSort() {
|
||
|
|
this.$refs.setSorting.init(this.dataList);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
tableCols() {
|
||
|
|
return [
|
||
|
|
// { type: "checkbox", width: "60px", fixed: "left" },
|
||
|
|
{ type: "seq", width: "60px", align: "center", title: "序号" },
|
||
|
|
{
|
||
|
|
title: "名称",
|
||
|
|
align: "center",
|
||
|
|
width: "120px",
|
||
|
|
field: "title",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "轮播图",
|
||
|
|
align: "center",
|
||
|
|
field: "startTime",
|
||
|
|
type: "jsx",
|
||
|
|
render: ({ row }) => {
|
||
|
|
return (
|
||
|
|
<el-image
|
||
|
|
style="width: 60px; height: 60px"
|
||
|
|
src={row.img}
|
||
|
|
preview-src-list={[row.img]}
|
||
|
|
></el-image>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "状态",
|
||
|
|
align: "center",
|
||
|
|
field: "status",
|
||
|
|
type: "jsx",
|
||
|
|
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
|
||
|
|
.bannerDelete({ 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", [
|
||
|
|
"isMerchant",
|
||
|
|
"marketList",
|
||
|
|
"storeList",
|
||
|
|
"marketId",
|
||
|
|
"shopId",
|
||
|
|
]),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|