fix: 轮播图样式处理
This commit is contained in:
parent
477519867e
commit
e33b666e2f
|
|
@ -1,130 +1,64 @@
|
|||
<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 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-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 class="page-container">
|
||||
<el-card class="search-card" shadow="never">
|
||||
<el-form :model="formInline" :inline="true" ref="searchForm" class="search-form" size="small">
|
||||
<el-form-item label="应用" prop="app">
|
||||
<el-select v-model="formInline.app" placeholder="请选择应用" style="width: 200px">
|
||||
<el-option v-for="item in application" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery" icon="el-icon-search" size="small">查询</el-button>
|
||||
<el-button @click="Reset" icon="el-icon-refresh" size="small">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<div class="table-container">
|
||||
<div style="margin-bottom: 15px">
|
||||
<el-button type="primary" size="small" @click="addBanner">新增轮播图</el-button>
|
||||
<el-button type="primary" size="small" @click="setSort">排序</el-button>
|
||||
</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">
|
||||
<template slot-scope="scope">
|
||||
<el-image style="width: 60px; height: 60px" :src="scope.row.img.split(',')[0]" :preview-src-list="scope.row.img.split(',')"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status ? 'success' : 'info'">{{ scope.row.status ? "已启用" : "已禁用" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<addOrUpdate
|
||||
ref="addOrUpdate"
|
||||
@queryList="$refs.oTable.reload()"
|
||||
></addOrUpdate>
|
||||
<addOrUpdate ref="addOrUpdate" @queryList="queryList"></addOrUpdate>
|
||||
<!-- 排序 -->
|
||||
<setSorting
|
||||
@queryList="$refs.oTable.reload()"
|
||||
ref="setSorting"
|
||||
></setSorting>
|
||||
<setSorting @queryList="queryList" ref="setSorting"></setSorting>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -136,32 +70,16 @@ export default {
|
|||
components: { addOrUpdate, setSorting },
|
||||
data() {
|
||||
return {
|
||||
activeName: "5",
|
||||
advanceSellStatus: "",
|
||||
dataList: [],
|
||||
formInline: {
|
||||
type: 0,
|
||||
ownerId: "",
|
||||
module: "",
|
||||
app: 1,
|
||||
},
|
||||
tableProp: {
|
||||
"auto-resize": true,
|
||||
border: true,
|
||||
height: "auto",
|
||||
"row-id": "id",
|
||||
"show-overflow": false,
|
||||
},
|
||||
selectList: [],
|
||||
type: [
|
||||
{
|
||||
value: 0,
|
||||
label: "菜市场分类",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "云店分类",
|
||||
},
|
||||
],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
application: [
|
||||
{ label: "用户端", value: 1 },
|
||||
{
|
||||
|
|
@ -176,9 +94,7 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
if (
|
||||
JSON.parse(sessionStorage.getItem("userInfo")).role === "ROLE_MANAGER"
|
||||
) {
|
||||
if (JSON.parse(sessionStorage.getItem("userInfo")).role === "ROLE_MANAGER") {
|
||||
this.formInline = {
|
||||
type: 0,
|
||||
ownerId: this.marketId,
|
||||
|
|
@ -193,170 +109,90 @@ export default {
|
|||
app: 1,
|
||||
};
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.oTable.reload();
|
||||
});
|
||||
this.queryList();
|
||||
},
|
||||
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);
|
||||
handleQuery() {
|
||||
this.page = 1;
|
||||
this.queryList();
|
||||
},
|
||||
changeModule(e) {
|
||||
if (e === "shop") {
|
||||
this.formInline.ownerId = this.shopId;
|
||||
} else {
|
||||
this.formInline.ownerId = this.marketId;
|
||||
}
|
||||
console.log(e);
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
queryList() {
|
||||
this.$api.mer_admin
|
||||
.bannerPage({
|
||||
pageNumber: pageNo,
|
||||
pageSize: pageSize,
|
||||
pageNumber: this.page,
|
||||
pageSize: this.limit,
|
||||
...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);
|
||||
this.dataList = res.data.data.data;
|
||||
this.total = Number(res.data.data.total);
|
||||
});
|
||||
},
|
||||
Reset() {
|
||||
this.formInline = {
|
||||
type: 0,
|
||||
ownerId: this.shopId,
|
||||
module: "shop",
|
||||
app: 1,
|
||||
};
|
||||
this.$refs.oTable.reload();
|
||||
addBanner() {
|
||||
this.$refs.addOrUpdate.toggle().add(this.formInline);
|
||||
},
|
||||
updateBanner(row) {
|
||||
this.$refs.addOrUpdate.toggle(row).update();
|
||||
},
|
||||
deleteBanner(row) {
|
||||
this.$api.mer_admin.bannerDelete({ id: row.id }).then((res) => {
|
||||
this.queryList();
|
||||
});
|
||||
},
|
||||
Reset() {
|
||||
if (JSON.parse(sessionStorage.getItem("userInfo")).role === "ROLE_MANAGER") {
|
||||
this.formInline = {
|
||||
type: 0,
|
||||
ownerId: this.marketId,
|
||||
module: "market",
|
||||
app: 1,
|
||||
};
|
||||
} else {
|
||||
this.formInline = {
|
||||
type: 0,
|
||||
ownerId: this.shopId,
|
||||
module: "shop",
|
||||
app: 1,
|
||||
};
|
||||
}
|
||||
this.handleQuery();
|
||||
},
|
||||
//排序
|
||||
setSort() {
|
||||
this.$refs.setSorting.init(this.dataList);
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.limit = val;
|
||||
this.queryList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.queryList();
|
||||
},
|
||||
},
|
||||
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.split(",")[0]}
|
||||
preview-src-list={row.img.split(",")}
|
||||
></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",
|
||||
]),
|
||||
...mapState("userData", ["isMerchant", "marketList", "storeList", "marketId", "shopId"]),
|
||||
},
|
||||
};
|
||||
</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,62 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<obj-modal
|
||||
ref="modal"
|
||||
labelWidth="150px"
|
||||
class="popup"
|
||||
:modalCols="modalCols"
|
||||
:modalConfig="modalConfig"
|
||||
:modalData="modalData"
|
||||
:modalHandles="modalHandles"
|
||||
>
|
||||
<template slot="dialog__after"> </template>
|
||||
</obj-modal>
|
||||
</div>
|
||||
<el-dialog :title="modalConfig.title" :visible.sync="modalConfig.show" width="700px" @close="handleClose">
|
||||
<el-form ref="dataForm" :model="modalData" :rules="rules" label-width="150px">
|
||||
<el-form-item label="轮播图名称" prop="title">
|
||||
<el-input v-model="modalData.title" placeholder="请输入轮播图名称" maxlength="30" style="width: 100%;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="modalData.status" active-text="启用" inactive-text="禁用"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用" prop="app">
|
||||
<el-select v-model="modalData.app" placeholder="请选择应用" style="width: 100%;">
|
||||
<el-option v-for="item in applicationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="img">
|
||||
<div :class="{ 'hide-uploader': fileList.length > 0 }">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="$api.mer_admin.uploadFile()"
|
||||
:headers="{ token: 'Bearer ' + $cookie.get('token') }"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
:limit="1"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="modalConfig.show = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce, cloneDeep } from "lodash";
|
||||
import { Divider } from "element-ui";
|
||||
import { cloneDeep } from "lodash";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isAdd: true,
|
||||
//表格属性
|
||||
modalConfig: {
|
||||
title: "",
|
||||
show: false,
|
||||
width: "700px",
|
||||
},
|
||||
modalData: {},
|
||||
settingId: "",
|
||||
form: {},
|
||||
modalData: {
|
||||
title: "",
|
||||
status: true,
|
||||
app: 1,
|
||||
img: "",
|
||||
},
|
||||
fileList: [],
|
||||
applicationOptions: [
|
||||
{ label: "用户", value: 1 },
|
||||
{ label: "商家", value: 2 },
|
||||
{ label: "专员", value: 3 },
|
||||
],
|
||||
rules: {
|
||||
title: [{ required: true, message: "请输入轮播图名称", trigger: "blur" }],
|
||||
app: [{ required: true, message: "请选择应用", trigger: "change" }],
|
||||
img: [{ required: true, message: "请上传商品图片", trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
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;
|
||||
}
|
||||
this.modalConfig.show = !this.modalConfig.show;
|
||||
if (e) {
|
||||
this.init(cloneDeep(e));
|
||||
}
|
||||
return {
|
||||
add: (row) => {
|
||||
console.log(row);
|
||||
this.modalData = {
|
||||
ownerId: row.ownerId,
|
||||
title: "",
|
||||
|
|
@ -78,213 +96,55 @@ export default {
|
|||
},
|
||||
init(row) {
|
||||
this.modalData = row;
|
||||
this.fileList = row.img.split(",").map((item) => {
|
||||
return {
|
||||
name: "轮播图",
|
||||
url: item,
|
||||
};
|
||||
this.fileList = row.img
|
||||
? [{
|
||||
name: "轮播图",
|
||||
url: row.img,
|
||||
}]
|
||||
: [];
|
||||
},
|
||||
handleClose() {
|
||||
this.$refs.dataForm.resetFields();
|
||||
this.fileList = [];
|
||||
this.modalData = {
|
||||
title: "",
|
||||
status: true,
|
||||
app: 1,
|
||||
img: "",
|
||||
};
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.modalData.img = res.data;
|
||||
this.fileList = [{ name: file.name, url: res.data }];
|
||||
this.$refs.dataForm.validateField("img");
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.modalData.img = "";
|
||||
this.fileList = [];
|
||||
this.$refs.dataForm.validateField("img");
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const apiCall = this.isAdd ? this.$api.mer_admin.bannerAdd(this.modalData) : this.$api.mer_admin.bannerUpdate(this.modalData);
|
||||
apiCall.then(() => {
|
||||
this.modalConfig.show = false;
|
||||
this.$emit("queryList");
|
||||
this.$message.success(`${this.isAdd ? "添加" : "编辑"}成功`);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
modalCols() {
|
||||
return [
|
||||
{
|
||||
label: "轮播图名称",
|
||||
prop: "title",
|
||||
type: "Input",
|
||||
required: true,
|
||||
maxlength: "30",
|
||||
rules: {
|
||||
required: true,
|
||||
message: "请输入轮播图名称",
|
||||
trigger: "blur",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: "分类",
|
||||
// prop: "type",
|
||||
// maxlength: "30",
|
||||
// rules: {
|
||||
// required: true,
|
||||
// message: "请输入轮播图名称",
|
||||
// trigger: "blur",
|
||||
// },
|
||||
// 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>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "轮播图",
|
||||
prop: "img",
|
||||
required: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: "请上传商品图片",
|
||||
trigger: "blur",
|
||||
},
|
||||
type: "jsx",
|
||||
render: () => {
|
||||
const handleAvatarSuccess = (res, file, fileList) => {
|
||||
console.log(res, fileList);
|
||||
this.modalData.img = fileList
|
||||
.map((item) => {
|
||||
return item.response.data;
|
||||
})
|
||||
.join(",");
|
||||
console.log(this.modalData.img);
|
||||
this.$refs.modal.validate();
|
||||
};
|
||||
const handleRemove = (file, fileList) => {
|
||||
console.log(file, fileList);
|
||||
this.modalData.img = fileList
|
||||
.map((item) => {
|
||||
return item.response.data;
|
||||
})
|
||||
.join(",");
|
||||
};
|
||||
return (
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
limit={3}
|
||||
action={this.$api.mer_admin.uploadFile()}
|
||||
{...{
|
||||
props: {
|
||||
"on-success": handleAvatarSuccess,
|
||||
"on-remove": handleRemove,
|
||||
},
|
||||
}}
|
||||
headers={{
|
||||
token: "Bearer " + this.$cookie.get("token"),
|
||||
}}
|
||||
multiple={true}
|
||||
file-list={this.fileList}
|
||||
list-type="picture"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
只能上传jpg/png文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
modalHandles() {
|
||||
return [
|
||||
{
|
||||
label: "取消",
|
||||
handle: () => {
|
||||
this.toggle();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "确认",
|
||||
type: "primary",
|
||||
submit: true,
|
||||
handle: () => {
|
||||
console.log(this.modalData);
|
||||
if (this.isAdd) {
|
||||
this.$api.mer_admin.bannerAdd(this.modalData).then((res) => {
|
||||
this.toggle();
|
||||
this.$emit("queryList");
|
||||
});
|
||||
} else {
|
||||
this.$api.mer_admin.bannerUpdate(this.modalData).then((res) => {
|
||||
this.toggle();
|
||||
this.$emit("queryList");
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
asyncComputed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup ::v-deep .el-dialog__body {
|
||||
overflow-y: scroll !important;
|
||||
height: 65vh !important;
|
||||
.el-select,
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
.hide-uploader ::v-deep .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue