<template>
|
<!--
|
作者：luoyiming
|
时间：2019-10-26
|
描述：商品管理-商品编辑-规格/库存-多规格-表格
|
-->
|
<div class="mt16">
|
<el-form-item label="规格明细：" v-if="form.model.spec_many && form.model.spec_many.spec_list.length > 0">
|
<div>
|
批量设置
|
<el-input size="small" v-model="batchData.product_price" placeholder="销售价" style="width: 160px;padding-left: 4px;"></el-input>
|
<el-input size="small" v-model="batchData.line_price" placeholder="划线价" style="width: 160px;padding-left: 4px;"></el-input>
|
<el-input size="small" v-model="batchData.settlement_price" placeholder="结算价" style="width: 160px;padding-left: 4px;"></el-input>
|
<el-input size="small" v-model="batchData.stock_num" placeholder="库存" style="width: 160px;padding-left: 4px;"></el-input>
|
<el-input size="small" v-model="batchData.product_weight" placeholder="重量" style="width: 160px;padding-left: 4px;"></el-input>
|
<el-button size="small" @click="onSubmitBatchData">应用</el-button>
|
</div>
|
<!--多规格表格-->
|
<div >
|
<el-table size="mini" :data="form.model.spec_many.spec_list" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
|
<el-table-column :label="item.group_name" :key="item.group_name" v-for="(item, index) in form.model.spec_many.spec_attr">
|
<template slot-scope="scope">
|
{{ scope.row.rows[index].spec_value }}
|
</template>
|
</el-table-column>
|
<el-table-column label="规格图片">
|
<template slot-scope="scope">
|
<img v-img-url="scope.row.spec_form.image_path" alt="" width="35" height="35" @click="chooseSpecImage(scope.$index)" />
|
</template>
|
</el-table-column>
|
<el-table-column label="产品编码">
|
<template slot-scope="scope">
|
<el-form-item label="" style="margin-bottom: 0;"><el-input size="small" prop="product_no" v-model="scope.row.spec_form.product_no"></el-input></el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="销售价">
|
<template slot-scope="scope">
|
<el-form-item
|
label=""
|
:rules="[{ required: true, message: ' ' }]"
|
:prop="'model.spec_many.spec_list.' + scope.$index + '.spec_form.product_price'"
|
style="margin-bottom: 0;"
|
>
|
<el-input size="small" prop="product_price" v-model="scope.row.spec_form.product_price"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="划线价">
|
<template slot-scope="scope">
|
<el-form-item label="" style="margin-bottom: 0;"><el-input size="small" prop="line_price" v-model="scope.row.spec_form.line_price"></el-input></el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="结算价">
|
<template slot-scope="scope">
|
<el-form-item label="" style="margin-bottom: 0;"><el-input size="small" prop="settlement_price" v-model="scope.row.spec_form.settlement_price"></el-input></el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="库存">
|
<template slot-scope="scope">
|
<el-form-item
|
label=""
|
:rules="[{ required: true, message: ' ' }]"
|
:prop="'model.spec_many.spec_list.' + scope.$index + '.spec_form.stock_num'"
|
style="margin-bottom: 0;"
|
>
|
<el-input size="small" prop="stock_num" v-model="scope.row.spec_form.stock_num"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="重量(kg)">
|
<template slot-scope="scope">
|
<el-form-item
|
label=""
|
:rules="[{ required: true, message: ' ' }]"
|
:prop="'model.spec_many.spec_list.' + scope.$index + '.spec_form.product_weight'"
|
style="margin-bottom: 0;"
|
>
|
<el-input size="small" prop="product_weight" v-model="scope.row.spec_form.product_weight"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
<!--上传图片组件-->
|
<Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
|
</div>
|
</template>
|
|
<script>
|
import PorductApi from '@/api/product.js';
|
import Upload from '@/components/file/Upload';
|
export default{
|
components:{
|
Upload
|
},
|
data() {
|
return {
|
/*批量设置sku属性*/
|
batchData: {
|
product_price: '',
|
line_price: '',
|
stock_num: '',
|
product_weight: ''
|
},
|
/*图片是否打开*/
|
isupload: false,
|
//上传图片选择的下标
|
spec_index: -1
|
};
|
},
|
inject: ['form'],
|
created() {
|
|
},
|
methods: {
|
|
/*表格跨行*/
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
var spec_attr = this.form.model.spec_many.spec_attr;
|
// 规格组合总数 (table行数)
|
var totalRow = 1;
|
//比如2个规格,只有第一列有多行
|
if (columnIndex < spec_attr.length - 1) {
|
let startRowIndex = columnIndex + 1;
|
let endRowIndex = spec_attr.length - 1;
|
for (var i = startRowIndex; i <= endRowIndex; i++) {
|
totalRow *= spec_attr[i].spec_items.length;
|
}
|
if (rowIndex % totalRow === 0) {
|
return {
|
rowspan: totalRow,
|
colspan: 1
|
};
|
} else {
|
return {
|
rowspan: 0,
|
colspan: 0
|
};
|
}
|
}
|
},
|
|
/*批量设置sku属性*/
|
onSubmitBatchData: function() {
|
var self = this;
|
self.form.model.spec_many.spec_list.forEach(function(value) {
|
for (var key in self.batchData) {
|
if (self.batchData.hasOwnProperty(key) && self.batchData[key]) {
|
self.$set(value.spec_form, key, self.batchData[key]);
|
}
|
}
|
});
|
},
|
|
/*选择图片*/
|
chooseSpecImage: function(spec_index) {
|
this.isupload = true;
|
this.spec_index = spec_index;
|
},
|
|
/*返回图片*/
|
returnImgsFunc(e) {
|
this.isupload = false;
|
this.$set(this.form.model.spec_many.spec_list[this.spec_index].spec_form, 'image_id', e[0]['file_id']);
|
this.$set(this.form.model.spec_many.spec_list[this.spec_index].spec_form, 'image_path', e[0]['file_path']);
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
