131 lines
4.5 KiB
Vue
131 lines
4.5 KiB
Vue
<template>
|
|
<div style="margin-top: 50px">
|
|
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="150px" style="width: 520px" size="small">
|
|
<el-form-item label="商品分类：" prop="productCategoryId">
|
|
<el-cascader
|
|
v-model="selectProductCateValue"
|
|
:options="productCateOptions">
|
|
</el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="商品名称：" prop="name">
|
|
<el-input v-model="value.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="副标题：" prop="subTitle">
|
|
<el-input v-model="value.subTitle"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商品品牌：" prop="brandId">
|
|
<el-select v-model="value.brandId" placeholder="请选择品牌">
|
|
<el-option
|
|
v-for="item in brandOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="商品介绍：" prop="description">
|
|
<el-input
|
|
:autoSize="true"
|
|
v-model="value.description"
|
|
type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商品货号：" prop="requiredProp">
|
|
<el-input v-model="value.productSn"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商品售价：" prop="requiredProp">
|
|
<el-input v-model="value.price"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="市场价：">
|
|
<el-input v-model="value.originalPrice"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商品库存：" prop="requiredProp">
|
|
<el-input v-model="value.stock"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="计量单位：">
|
|
<el-input v-model="value.unit"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="商品重量：">
|
|
<el-input v-model="value.weight" style="width: 300px"></el-input>
|
|
<span style="margin-left: 20px">克</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {fetchListWithChildren} from '@/api/productCate'
|
|
import {fetchList as fetchBrandList} from '@/api/brand'
|
|
|
|
export default {
|
|
name: "addProductInfo",
|
|
props: {
|
|
value: Object
|
|
},
|
|
data() {
|
|
return {
|
|
selectProductCateValue: null,
|
|
productCateOptions: [],
|
|
brandOptions: [],
|
|
rules: {
|
|
name: [
|
|
{required: true, message: '请输入商品名称', trigger: 'blur'},
|
|
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
|
|
],
|
|
subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
|
|
productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
|
|
brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
|
|
description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
|
|
requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getProductCateList();
|
|
this.getBrandList();
|
|
},
|
|
watch: {
|
|
selectProductCateValue: function (newValue) {
|
|
if (newValue != null && newValue.length == 2) {
|
|
this.value.productCategoryId = newValue[1];
|
|
} else {
|
|
this.value.productCategoryId = null;
|
|
}
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
getProductCateList() {
|
|
fetchListWithChildren().then(response => {
|
|
let list = response.data;
|
|
this.productCateOptions = [];
|
|
for (let i = 0; i < list.length; i++) {
|
|
let children = [];
|
|
if (list[i].children != null && list[i].children.length > 0) {
|
|
for (let j = 0; j < list[i].children.length; j++) {
|
|
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
|
|
}
|
|
}
|
|
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
|
|
}
|
|
});
|
|
},
|
|
getBrandList() {
|
|
fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
|
|
this.brandOptions = [];
|
|
let brandList = response.data.list;
|
|
for (let i = 0; i < brandList.length; i++) {
|
|
this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.smallInput {
|
|
width: 150px;
|
|
}
|
|
</style>
|