|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-form :model="formData" :rules="rules" ref="form" label-width="80px"
|
|
|
- label-position="right" size="small">
|
|
|
+ <el-form :model="formData" :rules="rules" ref="form" label-width="100px"
|
|
|
+ label-position="right" size="small">
|
|
|
<el-form-item prop="name" label="商品名称">
|
|
|
<el-input v-model="formData.name"></el-input>
|
|
|
</el-form-item>
|
|
|
@@ -17,9 +17,15 @@
|
|
|
<el-form-item prop="inStock" label="上架">
|
|
|
<el-switch v-model="formData.inStock"></el-switch>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="freeExchange" label="免费礼品">
|
|
|
+ <el-form-item prop="freeExchange" label="免费兑换">
|
|
|
<el-switch v-model="formData.freeExchange"></el-switch>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item prop="limited" label="仅能兑换一次">
|
|
|
+ <el-switch v-model="formData.limited"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="canBuyOriginal" label="可原价购买">
|
|
|
+ <el-switch v-model="formData.canBuyOriginal"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item prop="shippingCost" label="运费">
|
|
|
<el-input-number v-model="formData.shippingCost">
|
|
|
</el-input-number>
|
|
|
@@ -36,12 +42,14 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="coin" label="商城币"></el-table-column>
|
|
|
<el-table-column label="操作" fixed="right" width="200"
|
|
|
- align="center">
|
|
|
+ align="center">
|
|
|
<template slot-scope="{ row, $index }">
|
|
|
<el-button type="primary" size="mini"
|
|
|
- @click="editSpec(row, $index)">编辑</el-button>
|
|
|
+ @click="editSpec(row, $index)">编辑
|
|
|
+ </el-button>
|
|
|
<el-button type="danger" size="mini"
|
|
|
- @click="delSpec(row, $index)">删除</el-button>
|
|
|
+ @click="delSpec(row, $index)">删除
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -55,13 +63,14 @@
|
|
|
<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>
|
|
|
+ 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">
|
|
|
+ size="small" label-width="80px">
|
|
|
<el-form-item prop="name" label="规格名称">
|
|
|
<el-input v-model="spec.name"></el-input>
|
|
|
</el-form-item>
|
|
|
@@ -91,127 +100,131 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: 'productEdit',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: false,
|
|
|
- formData: {
|
|
|
- inStock: true,
|
|
|
- shippingCost: 0,
|
|
|
- specs: [],
|
|
|
+ export default {
|
|
|
+ name: 'productEdit',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ formData: {
|
|
|
+ inStock: true,
|
|
|
+ freeExchange: false,
|
|
|
+ shippingCost: 0,
|
|
|
+ limited: false,
|
|
|
+ canBuyOriginal: true,
|
|
|
+ specs: [],
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{required: true, message: '请输入商品名称', trigger: 'blur'}],
|
|
|
+ cover: [{required: true, message: '请上传首页图', trigger: 'blur'}],
|
|
|
+ banner: [{required: true, message: '请上传Banner图', trigger: 'blur'}],
|
|
|
+ detail: [{required: true, message: '请上传详情图', trigger: 'blur'}],
|
|
|
+ shippingCost: [{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() {
|
|
|
+ if (this.$route.query.id) {
|
|
|
+ this.formData.id = this.$route.query.id;
|
|
|
+ this.$http.get(`/product/${this.$route.query.id}`).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.formData = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ save() {
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.submit();
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- rules: {
|
|
|
- name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
|
|
- cover: [{ required: true, message: '请上传首页图', trigger: 'blur' }],
|
|
|
- banner: [{ required: true, message: '请上传Banner图', trigger: 'blur' }],
|
|
|
- detail: [{ required: true, message: '请上传详情图', trigger: 'blur' }],
|
|
|
- shippingCost: [{ required: true, message: '请填写运费', trigger: 'blur' }],
|
|
|
- specs: [{ type: 'array', required: true, message: '请添加规格', trigger: 'change' }],
|
|
|
+ submit() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$axios
|
|
|
+ .post('/product/save', this.formData)
|
|
|
+ .then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.data.success) {
|
|
|
+ this.formData = res.data.data;
|
|
|
+ this.$message.success('保存成功');
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ this.$message.error(res.data.error);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.loading = false;
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(res.error);
|
|
|
+ });
|
|
|
},
|
|
|
- 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' }],
|
|
|
+ del() {
|
|
|
+ this.$confirm('此操作不可恢复, 是否继续删除?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.loading = true;
|
|
|
+ this.$axios
|
|
|
+ .delete(`/product/${this.formData.id}`)
|
|
|
+ .then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.success('删除成功');
|
|
|
+ this.$router.go(-1);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.loading = false;
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ });
|
|
|
},
|
|
|
- showSpecDialog: false,
|
|
|
- spec: {},
|
|
|
- specIndex: {},
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (this.$route.query.id) {
|
|
|
- this.formData.id = this.$route.query.id;
|
|
|
- this.$http.get(`/product/${this.$route.query.id}`).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.formData = res.data;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- save() {
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.submit();
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- submit() {
|
|
|
- this.loading = true;
|
|
|
- this.$axios
|
|
|
- .post('/product/save', this.formData)
|
|
|
- .then(res => {
|
|
|
- this.loading = false;
|
|
|
- if (res.data.success) {
|
|
|
- this.formData = res.data.data;
|
|
|
- this.$message.success('保存成功');
|
|
|
+ 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 {
|
|
|
- console.log(res);
|
|
|
- this.$message.error(res.data.error);
|
|
|
+ return false;
|
|
|
}
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- this.loading = false;
|
|
|
- console.log(e);
|
|
|
- this.$message.error(res.error);
|
|
|
});
|
|
|
+ },
|
|
|
},
|
|
|
- del() {
|
|
|
- this.$confirm('此操作不可恢复, 是否继续删除?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- this.loading = true;
|
|
|
- this.$axios
|
|
|
- .delete(`/product/${this.formData.id}`)
|
|
|
- .then(res => {
|
|
|
- this.loading = false;
|
|
|
- this.$message.success('删除成功');
|
|
|
- this.$router.go(-1);
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- this.loading = false;
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- })
|
|
|
- .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>
|
|
|
|
|
|
<style lang="less" scoped>
|