|
|
@@ -21,26 +21,56 @@
|
|
|
<el-switch v-model="formData.inStock"></el-switch>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="specs" label="规格">
|
|
|
- <el-table :data="specs" size="small" border stripe>
|
|
|
+ <el-table :data="formData.specs" size="small" border stripe>
|
|
|
<el-table-column prop="name" label="规格名称"></el-table-column>
|
|
|
<el-table-column prop="stock" label="库存"></el-table-column>
|
|
|
- <el-table-column prop="stock" label="原价"></el-table-column>
|
|
|
- <el-table-column prop="stock" label="折扣价"></el-table-column>
|
|
|
- <el-table-column prop="stock" label="商城币"></el-table-column>
|
|
|
+ <el-table-column prop="originalPrice" label="原价"></el-table-column>
|
|
|
+ <el-table-column prop="discountPrice" label="折扣价"></el-table-column>
|
|
|
+ <el-table-column prop="coin" label="商城币"></el-table-column>
|
|
|
<el-table-column label="操作" fixed="right" width="200" align="center">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-button type="primary" size="mini">编辑</el-button>
|
|
|
- <el-button type="danger" size="mini">删除</el-button>
|
|
|
+ <template slot-scope="{ row, $index }">
|
|
|
+ <el-button type="primary" size="mini" @click="editSpec(row, $index)">编辑</el-button>
|
|
|
+ <el-button type="danger" size="mini" @click="delSpec(row, $index)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <el-button type="text" icon="el-icon-plus">添加</el-button>
|
|
|
+ <el-button type="text" icon="el-icon-plus" @click="addSpec">添加</el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button @click="save" :loading="loading" type="primary">保存</el-button>
|
|
|
<el-button @click="del" :loading="loading" type="danger" plain v-if="formData.id">删除</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+
|
|
|
+ <el-dialog title="规格编辑" :visible.sync="showSpecDialog" width="500px">
|
|
|
+ <el-form
|
|
|
+ :model="spec"
|
|
|
+ ref="specForm"
|
|
|
+ :rules="specRules"
|
|
|
+ size="small"
|
|
|
+ label-width="80px"
|
|
|
+ >
|
|
|
+ <el-form-item prop="name" label="规格名称">
|
|
|
+ <el-input v-model="spec.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="stock" label="库存">
|
|
|
+ <el-input-number v-model="spec.stock"></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="originalPrice" label="原价">
|
|
|
+ <el-input-number v-model="spec.originalPrice"></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="discountPrice" label="折扣价">
|
|
|
+ <el-input-number v-model="spec.discountPrice"></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="coin" label="商城币">
|
|
|
+ <el-input-number v-model="spec.coin"></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="showSpecDialog = false" size="small">取消</el-button>
|
|
|
+ <el-button type="primary" @click="saveSpec" size="small">保存</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -50,13 +80,25 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
- specs: [{ name: '规格1', stock: 100 }, { name: '规格2', stock: 100 }, { name: '规格3', stock: 100 }],
|
|
|
- formData: {},
|
|
|
+ formData: {
|
|
|
+ specs: [],
|
|
|
+ },
|
|
|
rules: {
|
|
|
name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
|
|
banner: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
|
|
detail: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
|
|
+ specs: [{ type: 'array', required: true, message: '请添加规格', trigger: 'change' }],
|
|
|
+ },
|
|
|
+ specRules: {
|
|
|
+ name: [{ required: true, message: '请输入规格名称', trigger: 'blur' }],
|
|
|
+ stock: [{ required: true, message: '请输入库存', trigger: 'blur' }],
|
|
|
+ originalPrice: [{ required: true, message: '请输入原价', trigger: 'blur' }],
|
|
|
+ discountPrice: [{ required: true, message: '请输入折扣价', trigger: 'blur' }],
|
|
|
+ coin: [{ required: true, message: '请输入商城币', trigger: 'blur' }],
|
|
|
},
|
|
|
+ showSpecDialog: false,
|
|
|
+ spec: {},
|
|
|
+ specIndex: {},
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -81,16 +123,16 @@ export default {
|
|
|
},
|
|
|
submit() {
|
|
|
this.loading = true;
|
|
|
- this.$http
|
|
|
+ this.$axios
|
|
|
.post('/product/save', this.formData)
|
|
|
.then(res => {
|
|
|
this.loading = false;
|
|
|
- if (res.success) {
|
|
|
- this.formData.id = res.data.id;
|
|
|
+ if (res.data.success) {
|
|
|
+ this.formData.id = res.data.data.id;
|
|
|
this.$message.success('保存成功');
|
|
|
} else {
|
|
|
console.log(res);
|
|
|
- this.$message.error(res.error);
|
|
|
+ this.$message.error(res.data.error);
|
|
|
}
|
|
|
})
|
|
|
.catch(e => {
|
|
|
@@ -121,6 +163,33 @@ export default {
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
+ editSpec(spec, index) {
|
|
|
+ this.spec = { ...spec };
|
|
|
+ this.specIndex = index;
|
|
|
+ this.showSpecDialog = true;
|
|
|
+ },
|
|
|
+ delSpec(spec, index) {
|
|
|
+ this.$confirm('此操作不可恢复, 是否继续删除?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }).then(() => {
|
|
|
+ this.formData.specs.splice(index, 1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addSpec() {
|
|
|
+ this.editSpec({}, this.formData.specs.length);
|
|
|
+ },
|
|
|
+ saveSpec() {
|
|
|
+ this.$refs.specForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.$set(this.formData.specs, this.specIndex, { ...this.spec });
|
|
|
+ this.showSpecDialog = false;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
