|
@@ -1,26 +1,45 @@
|
|
<template>
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="app-container">
|
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
|
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
|
|
- <el-menu-item index="1">编辑分类</el-menu-item>
|
|
|
|
|
|
+ <el-menu-item index="1"><router-link to="/goods/category">商品分类</router-link></el-menu-item>
|
|
|
|
+ <el-menu-item index="2">编辑分类</el-menu-item>
|
|
</el-menu>
|
|
</el-menu>
|
|
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width:400px; margin:30px 0 0 50px;">
|
|
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width:400px; margin:30px 0 0 50px;">
|
|
<el-form-item label="分类名称" prop="classifyName">
|
|
<el-form-item label="分类名称" prop="classifyName">
|
|
<el-input v-model="temp.classifyName" />
|
|
<el-input v-model="temp.classifyName" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="图标" prop="classifyImage">
|
|
|
|
|
|
+ <!--<el-form-item label="图标" prop="classifyImage">
|
|
<el-input v-model="temp.classifyImage" />
|
|
<el-input v-model="temp.classifyImage" />
|
|
|
|
+ </el-form-item>-->
|
|
|
|
+ <el-form-item label="图标:" prop="classifyImage">
|
|
|
|
+ <div class="form-el-upload">
|
|
|
|
+ <el-upload
|
|
|
|
+ class="avatar-uploader"
|
|
|
|
+ accept="image/jpeg,image/gif,image/png"
|
|
|
|
+ action="https://www-b.caimei365.com/register/imageUpload.action"
|
|
|
|
+ :show-file-list="false"
|
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
|
+ :multiple="false"
|
|
|
|
+ :limit="1"
|
|
|
|
+ >
|
|
|
|
+ <img v-if="temp.classifyImage" :src="temp.classifyImage" class="avatar">
|
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
|
+ <div slot="tip" class="el-upload__tip">注意:请上传jpg/png格式的图片,最大不超过5M</div>
|
|
|
|
+ </el-upload>
|
|
|
|
+ </div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="排序值" prop="sort">
|
|
<el-form-item label="排序值" prop="sort">
|
|
<el-input v-model="temp.sort" type="number" />
|
|
<el-input v-model="temp.sort" type="number" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="邮费是否到付" prop="postage">
|
|
|
|
- <el-select v-model="temp.postage" class="filter-item" placeholder="请选择">
|
|
|
|
|
|
+ <el-form-item label="邮费是否到付" prop="postageToPay">
|
|
|
|
+ <el-select v-model="temp.postageToPay" class="filter-item" placeholder="请选择" value="">
|
|
<el-option label="是" value="1" />
|
|
<el-option label="是" value="1" />
|
|
- <el-option label="否" value="0" />
|
|
|
|
|
|
+ <el-option label="否" value="2" />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="status">
|
|
<el-form-item label="状态" prop="status">
|
|
- <el-select v-model="temp.status" class="filter-item" placeholder="请选择">
|
|
|
|
|
|
+ <el-select v-model="temp.status" class="filter-item" placeholder="请选择" value="">
|
|
<el-option label="启用" value="1" />
|
|
<el-option label="启用" value="1" />
|
|
<el-option label="停用" value="2" />
|
|
<el-option label="停用" value="2" />
|
|
</el-select>
|
|
</el-select>
|
|
@@ -33,65 +52,136 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { updateCategory } from '@/api/goods'
|
|
|
|
|
|
+import { getClassify, saveClassify } from '@/api/goods'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
msg: '编辑分类',
|
|
msg: '编辑分类',
|
|
- activeIndex: '1',
|
|
|
|
|
|
+ activeIndex: '2',
|
|
rules: {
|
|
rules: {
|
|
classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
|
classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
|
sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
|
sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
|
- classifyImage: [{ type: 'file', required: true, message: '请上传分类图标', trigger: 'change' }],
|
|
|
|
|
|
+ // classifyImage: [{ type: 'file', required: true, message: '请上传分类图标', trigger: 'change' }],
|
|
postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
|
|
postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
|
|
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
|
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
|
},
|
|
},
|
|
temp: {
|
|
temp: {
|
|
- id: 1,
|
|
|
|
- organizeID: this.userOrganizeID,
|
|
|
|
- classifyName: '针剂',
|
|
|
|
- classifyImage: 'dfgdfsgsd',
|
|
|
|
- sort: 60,
|
|
|
|
|
|
+ id: '',
|
|
|
|
+ organizeID: this.organizeID,
|
|
|
|
+ classifyName: '',
|
|
|
|
+ classifyImage: '',
|
|
|
|
+ sort: '',
|
|
status: 1,
|
|
status: 1,
|
|
- postage: 1,
|
|
|
|
- addTime: new Date(),
|
|
|
|
- updateTime: new Date(),
|
|
|
|
|
|
+ postageToPay: 2,
|
|
|
|
+ addTime: '',
|
|
|
|
+ updateTime: '',
|
|
delFlag: 0
|
|
delFlag: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ classifyId: function() {
|
|
|
|
+ return window.location.href.split('/').reverse()[0]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.getDetail()
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
|
|
+ getDetail() {
|
|
|
|
+ getClassify({ id: this.classifyId }).then(response => {
|
|
|
|
+ const { data } = response
|
|
|
|
+ this.temp = data
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$router.push({ path: this.redirect })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
updateData() {
|
|
updateData() {
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
if (valid) {
|
|
if (valid) {
|
|
- const tempData = Object.assign({}, this.temp)
|
|
|
|
- tempData.updateTime = +new Date(tempData.updateTime)
|
|
|
|
- updateCategory(tempData).then(() => {
|
|
|
|
- for (const v of this.list) {
|
|
|
|
- if (v.id === this.temp.id) {
|
|
|
|
- const index = this.list.indexOf(v)
|
|
|
|
- this.list.splice(index, 1, this.temp)
|
|
|
|
- break
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- this.dialogFormVisible = false
|
|
|
|
|
|
+ saveClassify(this.temp).then(response => {
|
|
this.$notify({
|
|
this.$notify({
|
|
- title: 'Success',
|
|
|
|
- message: '更新成功',
|
|
|
|
- type: 'success',
|
|
|
|
|
|
+ title: response.code * 1 === 1 ? 'Success' : 'Error',
|
|
|
|
+ message: response.code * 1 === 1 ? '修改分类成功' : response.msg,
|
|
|
|
+ type: response.code * 1 === 1 ? 'success' : 'error',
|
|
duration: 2000
|
|
duration: 2000
|
|
})
|
|
})
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
|
+ this.getBase64(file.raw).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ })
|
|
|
|
+ const fileName = file.name
|
|
|
|
+ const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
|
|
|
|
+ if (regex.test(fileName.toLowerCase())) {
|
|
|
|
+ this.form.imageUrl = URL.createObjectURL(file.raw)
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('请选择图片文件')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
|
+ const isLt5M = file.size / 1024 / 1024 < 5
|
|
|
|
+ if (!isLt5M) {
|
|
|
|
+ this.$message.error('上传头像图片大小不能超过 5MB!')
|
|
|
|
+ }
|
|
|
|
+ return isLt5M
|
|
|
|
+ },
|
|
|
|
+ getBase64(file) {
|
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
|
+ const reader = new FileReader()
|
|
|
|
+ let imgResult = ''
|
|
|
|
+ reader.readAsDataURL(file)
|
|
|
|
+ reader.onload = function() {
|
|
|
|
+ imgResult = reader.result
|
|
|
|
+ }
|
|
|
|
+ reader.onerror = function(error) {
|
|
|
|
+ reject(error)
|
|
|
|
+ }
|
|
|
|
+ reader.onloadend = function() {
|
|
|
|
+ resolve(imgResult)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
- .is-active {
|
|
|
|
- border-bottom: 2px solid #409eff;
|
|
|
|
- color: #303133;
|
|
|
|
- }
|
|
|
|
|
|
+.avatar-uploader .el-upload {
|
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ position: relative;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+}
|
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
|
+ border-color: #409EFF;
|
|
|
|
+}
|
|
|
|
+.avatar-uploader-icon {
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ color: #8c939d;
|
|
|
|
+ width: 178px;
|
|
|
|
+ height: 178px;
|
|
|
|
+ line-height: 178px;
|
|
|
|
+ text-align: center;
|
|
|
|
+}
|
|
|
|
+.avatar {
|
|
|
|
+ width: 178px;
|
|
|
|
+ height: 178px;
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+.el-form-item__label{
|
|
|
|
+ text-align: right !important;
|
|
|
|
+}
|
|
|
|
+.form-el-upload{
|
|
|
|
+ width: 180px;
|
|
|
|
+}
|
|
|
|
+.el-upload__tip{
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ color: red;
|
|
|
|
+ text-align: left;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|