|
|
|
@ -1,145 +1,172 @@
|
|
|
|
|
<template>
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 页面卡片容器 -->
|
|
|
|
|
<el-card class="form-container" shadow="never">
|
|
|
|
|
<el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
|
|
|
|
|
<!-- 表单定义 -->
|
|
|
|
|
<el-form :model="brand" :rules="rules" ref="brandForm" label-width="150px">
|
|
|
|
|
<!-- 品牌名称输入框 -->
|
|
|
|
|
<el-form-item label="品牌名称:" prop="name">
|
|
|
|
|
<el-input v-model="brand.name"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 品牌首字母输入框 -->
|
|
|
|
|
<el-form-item label="品牌首字母:">
|
|
|
|
|
<el-input v-model="brand.firstLetter"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 品牌LOGO上传组件 -->
|
|
|
|
|
<el-form-item label="品牌LOGO:" prop="logo">
|
|
|
|
|
<single-upload v-model="brand.logo"></single-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 品牌专区大图上传组件 -->
|
|
|
|
|
<el-form-item label="品牌专区大图:">
|
|
|
|
|
<single-upload v-model="brand.bigPic"></single-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 品牌故事文本域 -->
|
|
|
|
|
<el-form-item label="品牌故事:">
|
|
|
|
|
<el-input
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
type="textarea"
|
|
|
|
|
v-model="brand.brandStory"
|
|
|
|
|
:autosize="true"></el-input>
|
|
|
|
|
:autosize="true"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 排序输入框(数字类型) -->
|
|
|
|
|
<el-form-item label="排序:" prop="sort">
|
|
|
|
|
<el-input v-model.number="brand.sort"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 是否显示单选按钮组 -->
|
|
|
|
|
<el-form-item label="是否显示:">
|
|
|
|
|
<el-radio-group v-model="brand.showStatus">
|
|
|
|
|
<el-radio :label="1">是</el-radio>
|
|
|
|
|
<el-radio :label="0">否</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 品牌制造商单选按钮组 -->
|
|
|
|
|
<el-form-item label="品牌制造商:">
|
|
|
|
|
<el-radio-group v-model="brand.factoryStatus">
|
|
|
|
|
<el-radio :label="1">是</el-radio>
|
|
|
|
|
<el-radio :label="0">否</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 提交和重置按钮 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
|
|
|
|
|
<el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
|
|
|
|
|
<el-button type="primary" @click="onSubmit('brandForm')">提交</el-button>
|
|
|
|
|
<el-button v-if="!isEdit" @click="resetForm('brandForm')">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-card>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {createBrand, getBrand, updateBrand} from '@/api/brand'
|
|
|
|
|
import SingleUpload from '@/components/Upload/singleUpload'
|
|
|
|
|
const defaultBrand={
|
|
|
|
|
bigPic: '',
|
|
|
|
|
brandStory: '',
|
|
|
|
|
factoryStatus: 0,
|
|
|
|
|
firstLetter: '',
|
|
|
|
|
logo: '',
|
|
|
|
|
name: '',
|
|
|
|
|
showStatus: 0,
|
|
|
|
|
sort: 0
|
|
|
|
|
};
|
|
|
|
|
export default {
|
|
|
|
|
name: 'BrandDetail',
|
|
|
|
|
components:{SingleUpload},
|
|
|
|
|
import { createBrand, getBrand, updateBrand } from "@/api/brand";
|
|
|
|
|
import SingleUpload from "@/components/Upload/singleUpload";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "BrandDetail", // 组件名称
|
|
|
|
|
components: {
|
|
|
|
|
SingleUpload, // 注册上传组件
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
// 是否编辑模式的标志
|
|
|
|
|
isEdit: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
// 定义表单默认数据和校验规则
|
|
|
|
|
const defaultBrand = {
|
|
|
|
|
bigPic: "", // 品牌大图
|
|
|
|
|
brandStory: "", // 品牌故事
|
|
|
|
|
factoryStatus: 0, // 是否品牌制造商
|
|
|
|
|
firstLetter: "", // 品牌首字母
|
|
|
|
|
logo: "", // 品牌LOGO
|
|
|
|
|
name: "", // 品牌名称
|
|
|
|
|
showStatus: 0, // 是否显示
|
|
|
|
|
sort: 0, // 排序
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
brand:Object.assign({}, defaultBrand),
|
|
|
|
|
brand: Object.assign({}, defaultBrand), // 表单数据初始化
|
|
|
|
|
rules: {
|
|
|
|
|
name: [
|
|
|
|
|
{required: true, message: '请输入品牌名称', trigger: 'blur'},
|
|
|
|
|
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
|
|
|
|
|
{ required: true, message: "请输入品牌名称", trigger: "blur" },
|
|
|
|
|
{ min: 2, max: 140, message: "长度在 2 到 140 个字符", trigger: "blur" },
|
|
|
|
|
],
|
|
|
|
|
logo: [
|
|
|
|
|
{required: true, message: '请输入品牌logo', trigger: 'blur'}
|
|
|
|
|
],
|
|
|
|
|
sort: [
|
|
|
|
|
{type: 'number', message: '排序必须为数字'}
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
logo: [{ required: true, message: "请输入品牌logo", trigger: "blur" }],
|
|
|
|
|
sort: [{ type: "number", message: "排序必须为数字" }],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// 根据编辑模式加载数据
|
|
|
|
|
if (this.isEdit) {
|
|
|
|
|
getBrand(this.$route.query.id).then(response => {
|
|
|
|
|
this.brand = response.data;
|
|
|
|
|
getBrand(this.$route.query.id).then((response) => {
|
|
|
|
|
this.brand = response.data; // 加载品牌数据
|
|
|
|
|
});
|
|
|
|
|
}else{
|
|
|
|
|
this.brand = Object.assign({},defaultBrand);
|
|
|
|
|
} else {
|
|
|
|
|
this.brand = Object.assign({}, this.defaultBrand); // 重置表单
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 提交表单
|
|
|
|
|
onSubmit(formName) {
|
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
this.$confirm('是否提交数据', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
this.$confirm("是否提交数据", "提示", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
}).then(() => {
|
|
|
|
|
if (this.isEdit) {
|
|
|
|
|
updateBrand(this.$route.query.id, this.brand).then(response => {
|
|
|
|
|
// 编辑模式下更新品牌数据
|
|
|
|
|
updateBrand(this.$route.query.id, this.brand).then(() => {
|
|
|
|
|
this.$refs[formName].resetFields();
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '修改成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration:1000
|
|
|
|
|
message: "修改成功",
|
|
|
|
|
type: "success",
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
this.$router.back();
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
createBrand(this.brand).then(response => {
|
|
|
|
|
// 新增品牌数据
|
|
|
|
|
createBrand(this.brand).then(() => {
|
|
|
|
|
this.$refs[formName].resetFields();
|
|
|
|
|
this.brand = Object.assign({},defaultBrand);
|
|
|
|
|
this.brand = Object.assign({}, this.defaultBrand);
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '提交成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration:1000
|
|
|
|
|
message: "提交成功",
|
|
|
|
|
type: "success",
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '验证失败',
|
|
|
|
|
type: 'error',
|
|
|
|
|
duration:1000
|
|
|
|
|
message: "验证失败",
|
|
|
|
|
type: "error",
|
|
|
|
|
duration: 1000,
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 重置表单
|
|
|
|
|
resetForm(formName) {
|
|
|
|
|
this.$refs[formName].resetFields();
|
|
|
|
|
this.brand = Object.assign({},defaultBrand);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.brand = Object.assign({}, this.defaultBrand);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
/* 添加自定义样式(如需要) */
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|