Skip to content

S
sensorConsult
Commit a39fef88 authored by zhanglw's avatar zhanglw
Browse files
Options

产品保存

parent ba532b9d
Hide whitespace changes
Inline Side-by-side
Showing with 271 additions and 51 deletions
src/api/common.js
View file @ a39fef88
import request from '@/utils/request'
import qs from 'qs'
export const HttpReq = {
// 后台管理接口列表
......@@ -6,7 +7,7 @@ export const HttpReq = {
// 上传营业执照图片
uploadBusinessLicense: function(data) {
return request({
url: '/api/bsw/users/updateBusinessLicense',
url: '/api/bsw/users/uploadBusinessLicense',
method: 'post',
data: data
}).then((res) => {
......@@ -23,23 +24,103 @@ export const HttpReq = {
})
},
// 获取行政区划
findAreaByCodeAndType: function(param) {
findAreaByCodeAndType: function(params) {
return request({
url: '/api/bsw/users/findAreaByCodeAndType',
method: 'get',
params: param
url: '/api/bsw/users/findAreaByCodeAndType?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
// 获取行政区划
// 添加客户信息
addCustomer: function(data) {
return request({
url: '/api/bsw/users/addCustomer',
method: 'POST',
method: 'post',
data: data
}).then((res) => {
return res
})
},
// 修改客户信息
updateCustomerDetail: function(data) {
return request({
url: '/api/bsw/users/updateCustomerDetail',
method: 'put',
data: data
}).then((res) => {
return res
})
},
// 获取客户列表
queryCustomer: function(params) {
return request({
url: '/api/bsw/users/queryCustomer?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
// 客户信息详情
queryCustomerDetail: function(params) {
return request({
url: '/api/bsw/users/queryCustomerDetail?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
// 批量禁用启用客户
userEnableDisable: function(data) {
return request({
url: '/api/bsw/users/enableDisable',
method: 'put',
data: data
}).then((res) => {
return res
})
},
// 客户信息审核
reviewCustomer: function(data) {
return request({
url: '/api/bsw/users/reviewCustomer',
method: 'put',
data: data
}).then((res) => {
return res
})
}
},
// 上传产品图片
uploadProductPic: function(data) {
return request({
url: '/api/bsw/product/uploadProductPic',
method: 'post',
data: data
}).then((res) => {
return res
})
},
deleteProductPic: function(data) {
return request({
url: '/api/bsw/product/deleteProductPic',
method: 'delete',
data: data
}).then((res) => {
return res
})
},
// 联想查询供应商名称
associateQueryEnterpriseName: function(params) {
return request({
url: '/api/bsw/product/associateQueryEnterpriseName?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
// 添加产品详情
addProduct: function(data) {
return request({
url: '/api/bsw/product/addProduct',
method: 'post',
data: data
}).then((res) => {
return res
})
},
xxx: null
}
}
src/views/backstage/productMgt/productTabulate/add.vue
View file @ a39fef88
......@@ -42,10 +42,109 @@
</el-form-item>
</div>
</el-form-item>
<el-form-item label="产品属性：" class="form-cell">
<div class="cell-box" />
<el-form-item v-if="formData.productType&&formData.productType<5" label="产品属性：" class="form-cell">
<div class="cell-box" style="max-width: 600px">
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">品牌</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeBrand" placeholder="品牌" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">消耗电流</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeConsumptionCurrent" placeholder="消耗电流" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">产品名</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeProductName" placeholder="产品名" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">额定功率</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeRatedPower" placeholder="额定功率" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">型号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeModel" placeholder="型号" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">反应时间</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeReactionTime" placeholder="反应时间" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">工作电压</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeWorkingVoltage" placeholder="工作电压" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">封装</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeEncapsulation" placeholder="封装" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">质量保证</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeQualityAssurance" placeholder="质量保证" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">产地</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeProducingArea" placeholder="产地" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">数量</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeNumber" placeholder="数量" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">颜色</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeColor" placeholder="颜色" />
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">适用场景</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeApplicableScenarios" placeholder="适用场景" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeBatchNumber" placeholder="批号" />
</el-col>
</el-row>
</div>
</el-form-item>
<el-form-item label="产品价格区间（元）：" required class="form-cell" style="margin: 0">
<el-form-item label="产品价格区间（元）：" class="form-cell" style="margin: 0">
<div class="cell-box" style="display: flex">
<el-form-item prop="minPrice">
<el-input v-model.number="formData.minPrice" placeholder="价格区间下限" class="cell-input" style="width: 180px" />
......@@ -102,7 +201,7 @@
</el-dialog>
</div>
</el-form-item>
<el-form-item label="产品概述：" class="form-cell" prop="describe">
<el-form-item label="产品概述：" class="form-cell" prop="productDescribe">
<div class="cell-box">
<div ref="editor" class="editor" />
</div>
......@@ -135,6 +234,9 @@ export default {
dicts: ['product_rank', 'product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7'],
data() {
const checkPrice = (rule, value, callback) => {
if (!value) {
return callback()
}
if (!Number.isInteger(value)) {
return callback(new Error('请输入数字值'))
}
......@@ -151,7 +253,7 @@ export default {
return {
uploadHeaders: { 'Authorization': getToken() },
imgSrcStart: process.env.VUE_APP_BASE_API,
isInitCompleted: false, // 组件是否已完全加载
editor: false, // 富文本对象
dialogImageUrl: '',
dialogImageVisible: false,
visible: false,
......@@ -172,26 +274,40 @@ export default {
maxPrice: null, // 价格区间-大
productFeature: null, // 产品特点
productPic: '', // 产品图片
describe: '', // 产品描述（富文本）
productDescribe: '', // 产品描述（富文本）
notes: null, // 其他说明
letterOfCommitment: false, // 交易保障承诺
attributeBrand: '', // 属性-品牌
attributeConsumptionCurrent: '', // 属性-消耗电流
attributeProductName: '', // 属性-产品名称
attributeRatedPower: '', // 属性-额定功率
attributeModel: '', // 属性-型号
attributeReactionTime: '', // 属性-反应时间
attributeWorkingVoltage: '', // 属性-工作电压
attributeEncapsulation: '', // 属性-封装
attributeQualityAssurance: '', // 属性-质量保证
attributeProducingArea: '', // 属性-产地
attributeNumber: '', // 属性-数量
attributeColor: '', // 属性-颜色
attributeApplicableScenarios: '', // 属性-品牌
attributeBatchNumber: '', // 属性-批号
rank: '1' // 产品品级
},
rules: {
customerName: { required: true, message: '请填写供应商名称', trigger: 'blur' },
productName: { required: true, message: '请填写产品名称', trigger: 'blur' },
productType: { required: true, message: '请选择产品分类', trigger: 'blur' },
// customerName: { required: true, message: '请填写供应商名称', trigger: 'blur' },
// productName: { required: true, message: '请填写产品名称', trigger: 'blur' },
// productType: { required: true, message: '请选择产品分类', trigger: 'blur' },
// productPic: { required: true, message: '请上传产品图片', trigger: 'blur' },
// productDescribe: { required: true, message: '请填写产品概述', trigger: 'blur' },
// letterOfCommitment: { required: true, message: '请勾选交易保障承诺', trigger: 'blur' },
minPrice: [
{ required: true, message: '请填写产品价格区间下限', trigger: 'blur' },
// { required: true, message: '请填写产品价格区间下限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
],
maxPrice: [
{ required: true, message: '请填写产品价格区间上限', trigger: 'blur' },
// { required: true, message: '请填写产品价格区间上限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
],
productPic: { required: true, message: '请上传产品图片', trigger: 'blur' },
describe: { required: true, message: '请填写产品概述', trigger: 'blur' },
letterOfCommitment: { required: true, message: '请勾选交易保障承诺', trigger: 'blur' }
]
}
}
},
......@@ -274,34 +390,11 @@ export default {
},
showView() {
this.visible = true
if (this.isInitCompleted) {
return
}
this.$nextTick(() => {
const _this = this
const editor = new E(this.$refs.editor)
editor.config.zIndex = 5
editor.config.customUploadImg = function(files, insert) {
files.forEach(image => {
upload(_this.imagesUploadApi, image).then(res => {
const data = res.data
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
insert(url)
})
})
}
editor.config.onchange = (html) => {
this.formData.describe = html
}
editor.create()
// 初始化数据
editor.txt.html(this.formData.describe)
this.isInitCompleted = true
})
},
hideView() {
this.$refs.uploadCom.clearFiles()
this.$refs.formViewRef.resetFields()
this.editor.txt.clear()
this.productSubTypeOpts = []
this.productFeature = []
this.visible = false
......@@ -310,10 +403,24 @@ export default {
this.hideView()
},
submitForm() {
console.log(this.formData, this.formData.describe)
this.$refs.formViewRef.validate(valid => {
if (valid) {
console.log(this.formData)
HttpReq.backstageApi.addProduct(this.formData).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
if (res.code === 200) {
this.cancelView()
this.$parent.loadData()
}
})
} else {
this.$message({
message: '表单信息有误，请核对无误后提交！',
type: 'error'
})
}
})
},
......@@ -322,13 +429,45 @@ export default {
this.productSubTypeOpts = this.dict['product_type_' + this.formData.productType]
},
loadData() {
this.showView()
if (this.editor) {
return
}
this.$nextTick(() => {
const _this = this
const editor = new E(this.$refs.editor)
editor.config.zIndex = 5
editor.config.customUploadImg = function(files, insert) {
files.forEach(image => {
upload(_this.imagesUploadApi, image).then(res => {
const data = res.data
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
insert(url)
})
})
}
editor.config.onchange = (html) => {
this.formData.productDescribe = html
}
editor.create()
// 初始化数据
editor.txt.html(this.formData.productDescribe)
this.editor = editor
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.grid-content {
border: 1px solid rgba(100, 100, 100, 0.3);
padding: 0;
}
.grid-label {
background: #dedede;
padding: 0 10px;
}
.editor{
text-align:left;
width: 680px;
......
src/views/backstage/productMgt/productTabulate/index.vue
View file @ a39fef88
......@@ -127,7 +127,7 @@ export default {
})
},
toAdd() {
this.$refs.addView.showView()
this.$refs.addView.loadData()
},
toEdit(item) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment