|
|
@@ -0,0 +1,130 @@
|
|
|
+<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>
|
zhh