产品保存

src/api/common.js

 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

@@ -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

@@ -127,7 +127,7 @@ export default {
       })
     },
     toAdd() {
-      this.$refs.addView.showView()
+      this.$refs.addView.loadData()
     },
     toEdit(item) {