276 lines
6.9 KiB
Vue
276 lines
6.9 KiB
Vue
<template>
|
||
<div>
|
||
<obj-modal
|
||
ref="modal"
|
||
labelWidth="150px"
|
||
:modalCols="modalCols"
|
||
:modalConfig="modalConfig"
|
||
:modalData="modalData"
|
||
:modalHandles="modalHandles"
|
||
>
|
||
<template slot="dialog__after"> </template>
|
||
</obj-modal>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { debounce, cloneDeep } from "lodash";
|
||
import { Divider } from "element-ui";
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
isAdd: true,
|
||
//表格属性
|
||
modalConfig: {
|
||
title: "",
|
||
show: false,
|
||
width: "700px",
|
||
},
|
||
modalData: {},
|
||
settingId: "",
|
||
form: {},
|
||
fileList: [],
|
||
};
|
||
},
|
||
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 = {
|
||
ownerId: row.ownerId,
|
||
title: "",
|
||
module: row.module,
|
||
type: 0,
|
||
status: true,
|
||
app: 1,
|
||
img: "",
|
||
};
|
||
this.fileList = [];
|
||
this.modalConfig.title = "添加轮播图";
|
||
this.isAdd = true;
|
||
},
|
||
update: () => {
|
||
this.modalConfig.title = "编辑轮播图";
|
||
this.isAdd = false;
|
||
},
|
||
};
|
||
},
|
||
init(row) {
|
||
this.modalData = row;
|
||
this.fileList = [
|
||
{
|
||
name: "轮播图",
|
||
url: this.modalData.img,
|
||
},
|
||
];
|
||
},
|
||
},
|
||
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 = res.data;
|
||
this.$refs.modal.validate();
|
||
};
|
||
const handleRemove = (file, fileList) => {
|
||
console.log(file, fileList);
|
||
this.fileList = [];
|
||
this.modalData.img = "";
|
||
};
|
||
return (
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
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>
|
||
</style> |