+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- ![]()
+ ![]()
@@ -147,7 +169,7 @@
import { Message } from 'element-ui'
import { SelectList } from '@/api/product/brand'
import { C_list, C_paramsList } from '@/api/product/category'
-import { add, update } from '@/api/product/product'
+import { add, productDetail, update } from '@/api/product/product'
import RedStar from '@/components/mycomponent/redStar'
export default {
@@ -162,10 +184,10 @@
return {
dialogStatus: false,
myHeaders: { token: getToken() },
- uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile',
- imageUrl: '',
+ imageUrl: this.baseConfig.baseUrl + '/static/',
categoryList: [],
brandList: [],
+ defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
rules: {
productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
@@ -196,8 +218,6 @@
},
paramValueList: [
// { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' },
- // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' },
- // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' }
]
}
},
@@ -213,32 +233,39 @@
methods: {
initDialog(type, row) {
if (type === 'edit') {
- this.addInfo = {
- productCode: row.productCode,
- productName: row.productName,
- brandId: row.brandId,
- categoryId: row.categoryId,
- productPackageSize: row.productPackageSize,
- productStatus: row.productStatus,
- productWeight: row.productWeight,
- productEdition: row.productEdition,
- internationalCode: row.internationalCode,
- productColor: row.productColor,
- productMaterialQuality: row.productMaterialQuality,
- productNetworkMode: row.productNetworkMode,
- productPicture: row.productPicture
- }
- if (row.categoryId) {
- this.fetchParams(row.categoryId)
+ if (row.id) {
+ productDetail({ id: row.id }).then(data => {
+ this.addInfo = {
+ id: data.id,
+ productCode: data.productCode,
+ productName: data.productName,
+ brandId: data.brandId,
+ categoryId: data.categoryId,
+ productPackageSize: data.productPackageSize,
+ productStatus: data.productStatus,
+ productWeight: data.productWeight,
+ productEdition: data.productEdition,
+ internationalCode: data.internationalCode,
+ productColor: data.productColor,
+ productMaterialQuality: data.productMaterialQuality,
+ productNetworkMode: data.productNetworkMode,
+ productPicture: data.productPicture ? this.imageUrl + data.productPicture : '',
+ paramValueList: data.paramValues
+ }
+ // 如果有类型，去获取类型的参数
+ // if (this.addInfo.categoryId) {
+ // this.fetchParams(this.addInfo.categoryId)
+ // }
+ })
}
} else {
+ this.$nextTick(() => {
+ this.$refs['dataForm'].clearValidate()
+ })
this.resetForm()
}
this.dialogStatus = true
},
- close() {
- this.$emit('close')
- },
// 获取品牌列表
fetchBrandList() {
SelectList().then(res => {
@@ -255,16 +282,75 @@
this.categoryList = res.data
})
},
- // 获取品类参数列表
- fetchParams(categoryId) {
- C_paramsList(categoryId).then(res => {
- if (res.code === 200) {
- this.paramValueList = res.data.map(item => {
- return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' }
- })
+ // 图片上传
+ uploadFile(file) {
+ console.log('uploadFile:' + file.file.name)
+ // 转base64
+ this.getBase64(file.file).then(resBase64 => {
+ this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+ })
+ },
+ // 上传前判断文件格式及大小
+ beforeAvatarUpload(file) {
+ const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
+ let res = true
+ console.log(file.size)
+ const isLt2M = file.size / 1024 < 200
+ if (!isJPG) {
+ this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+ res = false
+ }
+ if (!isLt2M) {
+ this.$message.error('上传图片大小不能超过 200KB!')
+ res = false
+ }
+ return res
+ },
+ // 上传成功后回显
+ handleAvatarSuccess(response, file) {
+ console.log('handleSuccess')
+ // const base_url = process.env.BASE_API + '/static/'
+ // if (response.code === 200) {
+ // this.photo = base_url + response.data
+ // } else {
+ // this.$message.warning(response.message)
+ // }
+ },
+ getBase64(file) {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader()
+ let fileResult = ''
+ reader.readAsDataURL(file)
+ // 开始转
+ reader.onload = function() {
+ fileResult = reader.result
+ }
+ // 转 失败
+ reader.onerror = function(error) {
+ reject(error)
+ }
+ // 转 结束 咱就 resolve 出去
+ reader.onloadend = function() {
+ resolve(fileResult)
}
})
},
+ // 获取品类参数列表
+ fetchParams(categoryId) {
+ if (categoryId) {
+ C_paramsList(categoryId).then(res => {
+ if (res.code === 200) {
+ if (res.data.length > 0) {
+ this.paramValueList = res.data.map(item => {
+ const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id)
+ const paramValue = value.length > 0 ? value[0].paramValue : ''
+ return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue }
+ })
+ }
+ }
+ })
+ }
+ },
// 重置表单
resetForm() {
this.addInfo = {
@@ -279,31 +365,21 @@
internationalCode: '',
productColor: '',
productMaterialQuality: '',
- productPicture: ''
+ productPicture: '',
+ paramValueList: []
}
this.paramValueList = []
},
- // 照片上传
- handleAvatarSuccess(res, file) {
- console.log(res, file)
- this.imageUrl = URL.createObjectURL(file.raw)
- console.log(this.imageUrl)
- this.addInfo.productPicture = res.data.fileName
- console.log(this.addInfo.productPicture)
- },
- beforeAvatarUpload(file) {
- const isJPG = file.type === 'image/jpeg'
- const isLt2M = file.size / 1024 / 1024 < 2
- if (!isJPG) {
- this.$message.error('上传头像图片只能是 JPG 格式!')
- }
- if (!isLt2M) {
- this.$message.error('上传头像图片大小不能超过 2MB!')
- }
- return isJPG && isLt2M
+ close() {
+ this.dialogStatus = false
},
// 新增
save() {
+ const index = this.addInfo.productPicture.indexOf(this.imageUrl)
+ if (index > -1) {
+ this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length)
+ }
+ debugger
this.addInfo.paramValueList = this.paramValueList.map(item => {
return {
paramId: item.paramId,
@@ -313,19 +389,15 @@
})
if (this.title === '新增产品') {
add(this.addInfo).then(res => {
- if (res.code === 200) {
- Message.success('保存成功')
- this.$emit('refresh')
- this.close()
- }
+ Message.success('保存成功')
+ this.$emit('refresh')
+ this.dialogStatus = false
})
} else {
update(this.addInfo).then(res => {
- if (res.code === 200) {
- Message.success('更新成功')
- this.$emit('refresh')
- this.close()
- }
+ Message.success('更新成功')
+ this.$emit('refresh')
+ this.dialogStatus = false
})
}
}
@@ -412,6 +484,28 @@
height: 178px;
display: block;
}
+//.avatar-uploader .el-upload {
+// margin-left: 12px;
+// margin-top: 10px;
+// 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: 238px;
+// line-height: 238px;
+// text-align: center;
+//}
+.avatar {
+ margin: 10px;
+ display: block;
+}