|
@@ -1,6 +1,9 @@
|
|
|
<template>
|
|
|
<div class="m-container">
|
|
|
- <h2>{{ pageType == "create" ? '添加' : '修改' }}商品</h2>
|
|
|
+ <h2>
|
|
|
+ <el-page-header @back="onCancel" :content="(pageType == 'create' ? '添加' : '修改') + '商品'"></el-page-header>
|
|
|
+ </h2>
|
|
|
+
|
|
|
<div class="m-core">
|
|
|
<el-form :model="form" :rules="rules" ref="form" label-width="120px" style="width: 500px">
|
|
|
<el-form-item label="品牌" prop="brand">
|
|
@@ -9,27 +12,23 @@
|
|
|
<el-form-item label="商品名称" prop="name">
|
|
|
<el-input v-model="form.name"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="商品分类" prop="goodsClassId">
|
|
|
- <el-select v-model="form.goodsClassId">
|
|
|
- <el-option label="乐器" value="in"></el-option>
|
|
|
- <el-option label="辅件" value="in"></el-option>
|
|
|
- <el-option label="教材" value="in"></el-option>
|
|
|
- <el-option label="教谱" value="in"></el-option>
|
|
|
+ <el-form-item label="商品分类" prop="type">
|
|
|
+ <el-select v-model="form.type">
|
|
|
+ <el-option label="乐器" value="INSTRUMENT"></el-option>
|
|
|
+ <el-option label="辅件" value="ACCESSORIES"></el-option>
|
|
|
+ <el-option label="教材" value="TEACHING"></el-option>
|
|
|
+ <el-option label="教谱" value="STAFF"></el-option>
|
|
|
+ <el-option label="其它" value="OTHER"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品类型" prop="goodsCategoryId">
|
|
|
<el-select v-model="form.goodsCategoryId">
|
|
|
- <el-option-group
|
|
|
- v-for="group in categoryList"
|
|
|
- :key="group.label"
|
|
|
- :label="group.label">
|
|
|
- <el-option
|
|
|
- v-for="item in group.options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-option-group>
|
|
|
+ <el-option
|
|
|
+ v-for="item in categoryList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品型号" prop="specification">
|
|
@@ -47,7 +46,8 @@
|
|
|
<el-form-item label="商品图片" prop="image">
|
|
|
<el-upload
|
|
|
class="avatar-uploader"
|
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ action="/web-server/uploadFile"
|
|
|
+ :headers="headers"
|
|
|
:show-file-list="false"
|
|
|
:on-success="handleAvatarSuccess"
|
|
|
:before-upload="beforeAvatarUpload">
|
|
@@ -59,24 +59,40 @@
|
|
|
<el-input type="textarea" v-model="form.desc" ></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button @click="onSubmit" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
|
|
|
- <el-button @click="onCancel">取消</el-button>
|
|
|
+ <el-button @click="onSubmit('form')" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
|
|
|
+ <el-button @click="onReSet('form')">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { categoryListTree } from '@/api/shopManager'
|
|
|
+import { categoryListTree, goodsAdd, goodsUpdate, goodsSingleQuery } from '@/api/businessManager'
|
|
|
+import store from '@/store'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
categoryList: [],
|
|
|
pageType: this.$route.query.type,
|
|
|
+ organId: store.getters.organ,
|
|
|
+ headers: {
|
|
|
+ Authorization: getToken()
|
|
|
+ },
|
|
|
form: {
|
|
|
+ // brand: 'xxxl',
|
|
|
+ // name: '长号',
|
|
|
+ // type: 'INSTRUMENT',
|
|
|
+ // goodsCategoryId: 7,
|
|
|
+ // specification: 'xxxeed',
|
|
|
+ // marketPrice: 10000,
|
|
|
+ // groupPurchasePrice: 9000,
|
|
|
+ // discountPrice: 8000,
|
|
|
+ // image: null,
|
|
|
+ // desc: 'C调、法式键、曲列、E键、白铜按键、台湾镍白'
|
|
|
brand: null,
|
|
|
name: null,
|
|
|
- goodsClassId: null,
|
|
|
+ type: null,
|
|
|
goodsCategoryId: null,
|
|
|
specification: null,
|
|
|
marketPrice: null,
|
|
@@ -88,27 +104,83 @@ export default {
|
|
|
rules: {
|
|
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
|
|
name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
|
|
- goodsClassId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
|
|
|
+ type: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
|
|
|
goodsCategoryId: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
|
|
|
specification: [{ required: true, message: '请输入商品型号', trigger: 'blur' }],
|
|
|
marketPrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
|
|
|
groupPurchasePrice: [{ required: true, message: '请输入商品团购价', trigger: 'blur' }],
|
|
|
discountPrice: [{ required: true, message: '请输入商品采购价', trigger: 'blur' }],
|
|
|
- image: [{ required: true, message: '请tfr', trigger: 'blur' }],
|
|
|
+ image: [{ required: true, message: '请选择图片', trigger: 'blur' }],
|
|
|
desc: [{ required: true, message: '请输入商品描述', trigger: 'blur' }]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.getList()
|
|
|
this.getCatagory()
|
|
|
},
|
|
|
methods: {
|
|
|
- onSubmit() {
|
|
|
-
|
|
|
+ onSubmit(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.pageType == 'create') {
|
|
|
+ if(this.form.id) { // 判断有没有Id,如果有则删除
|
|
|
+ delete this.form.id
|
|
|
+ }
|
|
|
+ this.form.status = 'YES' // 默认上架
|
|
|
+ goodsAdd(this.form).then(res => {
|
|
|
+ this.messageTips('添加', res)
|
|
|
+ })
|
|
|
+ } else if (this.pageType == 'update') {
|
|
|
+ goodsUpdate(this.form).then(res => {
|
|
|
+ this.messageTips('修改', res)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ messageTips(title, res) {
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: title + '成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.$router.push('/orderManager/shopManager')
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
},
|
|
|
onCancel() {
|
|
|
this.$router.push('/orderManager/shopManager')
|
|
|
},
|
|
|
+ onReSet(formName) {
|
|
|
+ this.$refs[formName].resetFields()
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ if(this.pageType == 'create') return false
|
|
|
+ goodsSingleQuery(this.$route.query.id).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if(res.code == 200) {
|
|
|
+ let result = res.data
|
|
|
+ console.log(result)
|
|
|
+ this.form = {
|
|
|
+ id: result.id,
|
|
|
+ brand: result.brand,
|
|
|
+ name: result.name,
|
|
|
+ type: result.type,
|
|
|
+ goodsCategoryId: result.goodsCategoryId,
|
|
|
+ specification: result.specification,
|
|
|
+ marketPrice: result.marketPrice,
|
|
|
+ groupPurchasePrice: result.groupPurchasePrice,
|
|
|
+ discountPrice: result.discountPrice,
|
|
|
+ image: result.image,
|
|
|
+ desc: result.desc
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
getCatagory() {
|
|
|
categoryListTree({
|
|
|
delFlag: 0,
|
|
@@ -117,39 +189,35 @@ export default {
|
|
|
let result = res.data
|
|
|
if(res.code == 200) {
|
|
|
let tempArray = []
|
|
|
- result.rows.forEach((item, index) => {
|
|
|
- let subject = []
|
|
|
- if(item.goodsCategories) {
|
|
|
- item.goodsCategories.forEach(s => {
|
|
|
- subject.push({
|
|
|
- value: s.id,
|
|
|
- label: s.name
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- tempArray[index] = {
|
|
|
- label: item.name,
|
|
|
- options: subject
|
|
|
- }
|
|
|
+ result.rows.forEach(row => {
|
|
|
+ tempArray.push({
|
|
|
+ label: row.name,
|
|
|
+ value: row.id
|
|
|
+ })
|
|
|
})
|
|
|
this.categoryList = tempArray
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
handleAvatarSuccess(res, file) {
|
|
|
- this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ this.form.image = res.data.url
|
|
|
+
|
|
|
},
|
|
|
beforeAvatarUpload(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ const imageType = {
|
|
|
+ 'image/png': true,
|
|
|
+ 'image/jpeg': true
|
|
|
+ }
|
|
|
+ const isImage = imageType[file.type]
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
+ if (!isImage) {
|
|
|
+ this.$message.error('只能上传图片格式!')
|
|
|
}
|
|
|
if (!isLt2M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
|
}
|
|
|
- return isJPG && isLt2M;
|
|
|
+ return isImage && isLt2M;
|
|
|
},
|
|
|
}
|
|
|
}
|