产品富文本

src/views/backstage/customMgt/customTabulate/add.vue

@@ -163,7 +163,7 @@
 </template>
 <script>
 import { getToken } from '@/utils/auth'
-import { HttpReq } from '@/api/common.js'
+import { HttpReq } from '@/api/common'
 
 export default {
   dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],

src/views/backstage/customMgt/customTabulate/edit.vue

@@ -70,7 +70,7 @@
             <img width="100%" :src="dialogImageUrl">
           </el-dialog>
         </div>
-        <div style="clear:both">{{ formData.businessLicense }}</div>
+        <div style="display: none;clear: both">{{ formData.businessLicense }}</div>
       </el-form-item>
       <el-form-item label="统一社会信用代码：" class="form-cell" prop="unifiedSocialCreditCode">
         <div class="cell-box">
@@ -178,7 +178,7 @@
 </template>
 <script>
 import { getToken } from '@/utils/auth'
-import { HttpReq } from '@/api/common.js'
+import { HttpReq } from '@/api/common'
 
 export default {
   dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],

src/views/backstage/customMgt/customTabulate/index.vue

@@ -63,7 +63,7 @@
   </div>
 </template>
 <script>
-import { HttpReq } from '@/api/common.js'
+import { HttpReq } from '@/api/common'
 import DateRangePicker from '@/components/DateRangePicker'
 import addPage from './add'
 import editPage from './edit'

src/views/backstage/customMgt/customTabulate/view.vue

@@ -150,7 +150,7 @@
       </el-form-item>
       <el-form-item v-if="!isReview && formData.status!=='3'" label="审核意见：" class="form-cell">
         <div class="cell-box">
-          <div class="cell-textarea">{{ formData.reviewContent }}</div>
+          <div class="cell-textarea">{{ formData.reviewComments }}</div>
         </div>
       </el-form-item>
     </el-form>
@@ -161,9 +161,9 @@
     </div>
     <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelReview" :visible="reviewVisible" title="审核意见" width="600px">
       <el-form ref="formReviewRef" :model="formReview" :rules="rules" :status-icon="true" label-width="120px">
-        <el-form-item label="审核意见：" class="form-cell" prop="reviewContent">
+        <el-form-item label="审核意见：" class="form-cell" prop="reviewComments">
           <div class="cell-box">
-            <el-input v-model="formReview.reviewContent" type="textarea" placeholder="请输入审核意见" maxlength="100" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" style="width: 300px" />
+            <el-input v-model="formReview.reviewComments" type="textarea" placeholder="请输入审核意见" maxlength="100" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" style="width: 300px" />
           </div>
         </el-form-item>
       </el-form>
@@ -175,7 +175,7 @@
 </template>
 <script>
 import { getToken } from '@/utils/auth'
-import { HttpReq } from '@/api/common.js'
+import { HttpReq } from '@/api/common'
 import review_pass from '@/assets/images/review_pass.png'
 import review_await from '@/assets/images/review_await.png'
 import review_failed from '@/assets/images/review_failed.png'
@@ -224,14 +224,15 @@ export default {
         supplierLevel: '1', // 供应商级别
         taxpayerIdentificationNumber: '', // 纳税人识别号
         unifiedSocialCreditCode: '', // 统一社会信用代码
+        reviewComments: '', // 审核意见
         sysUserId: null
       },
       reviewVisible: false,
       formReview: {
-        reviewContent: ''
+        reviewComments: ''
       },
       rules: {
-        reviewContent: { required: true, message: '请填写审核意见', trigger: 'blur' }
+        reviewComments: { required: true, message: '请填写审核意见', trigger: 'blur' }
       }
     }
   },
@@ -259,18 +260,46 @@ export default {
       if (this.$refs.formReviewRef) {
         this.$refs.formReviewRef.resetFields()
       }
-      this.formReview.reviewContent = ''
+      this.formReview.reviewComments = ''
       this.reviewVisible = false
     },
     submitForm(isPass) {
       if (isPass) {
-        this.formReview.reviewContent = '审核通过'
+        this.formReview.reviewComments = '审核通过'
+        HttpReq.backstageApi.reviewCustomer({
+          customerId: this.customerId,
+          reviewComments: this.formReview.reviewComments,
+          type: 1
+        }).then((res) => {
+          this.$notify({
+            title: res.msg,
+            type: 'success',
+            duration: 2500
+          })
+          if (res.code === 200) {
             this.cancelView()
+            this.$parent.loadData()
+          }
+        })
         return
       }
       this.$refs.formReviewRef.validate((valid, obj) => {
         if (valid) {
+          HttpReq.backstageApi.reviewCustomer({
+            customerId: this.customerId,
+            reviewComments: this.formReview.reviewComments,
+            type: 0
+          }).then((res) => {
+            this.$notify({
+              title: res.msg,
+              type: 'success',
+              duration: 2500
+            })
+            if (res.code === 200) {
               this.cancelView()
+              this.$parent.loadData()
+            }
+          })
         } else {
           this.$message({
             message: '表单信息有误，请核对无误后提交！',

src/views/backstage/productMgt/productTabulate/add.vue

 <template>
   <!-- 表单渲染 -->
-  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
+  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="1080px">
     <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
+      <el-form-item label="供应商名称：" class="form-cell" prop="customerName">
+        <div class="cell-box">
+          <el-autocomplete
+            v-model="formData.customerName"
+            class="cell-input"
+            :fetch-suggestions="querySearch"
+            placeholder="请输入供应商名称"
+            :trigger-on-focus="false"
+            @select="handleSelect"
+          />
+        </div>
+      </el-form-item>
+      <el-form-item label="品级标识设置：" class="form-cell" prop="rank">
+        <div class="cell-box">
+          <el-radio-group v-model="formData.rank" size="mini">
+            <el-radio v-for="item in dict.product_rank" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </div>
+      </el-form-item>
       <el-form-item label="产品名称：" class="form-cell" prop="productName">
         <div class="cell-box">
           <el-input v-model="formData.productName" placeholder="请输入产品名称" class="cell-input" />
@@ -60,9 +81,40 @@
           <el-button v-show="!inputVisible && productFeature.length < 5" plain round :type="tagTypes[formData.productType||0]" class="button-new-tag" icon="el-icon-price-tag" @click="showInput">添加</el-button>
         </div>
       </el-form-item>
-      <el-form-item label="产品标题：" class="form-cell" prop="productTitle">
+      <el-form-item label="产品照片：" class="form-cell" prop="productPic">
+        <div class="cell-box">
+          <el-upload
+            ref="uploadCom"
+            action="/api/bsw/product/uploadProductPic"
+            name="productPic"
+            list-type="picture-card"
+            :headers="uploadHeaders"
+            :limit="5"
+            :on-exceed="handleExceed"
+            :on-success="handleImported"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+          >
+            <i class="el-icon-plus" />
+          </el-upload>
+          <el-dialog append-to-body :visible.sync="dialogImageVisible">
+            <img width="100%" :src="dialogImageUrl">
+          </el-dialog>
+        </div>
+      </el-form-item>
+      <el-form-item label="产品概述：" class="form-cell" prop="describe">
         <div class="cell-box">
-          <el-input v-model="formData.productTitle" placeholder="请输入产品名称" class="cell-input" />
+          <div ref="editor" class="editor" />
+        </div>
+      </el-form-item>
+      <el-form-item label="其他说明：" class="form-cell" prop="notes">
+        <div class="cell-box">
+          <el-input v-model="formData.notes" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="交易保障承诺：" class="form-cell" prop="letterOfCommitment">
+        <div class="cell-box">
+          <el-checkbox v-model="formData.letterOfCommitment"><em>卖家承诺履约诈合规骗包赔，保障产品交易安全</em></el-checkbox>
         </div>
       </el-form-item>
     </el-form>
@@ -73,10 +125,14 @@
   </el-dialog>
 </template>
 <script>
-import { HttpReq } from '@/api/common.js'
+import { getToken } from '@/utils/auth'
+import { HttpReq } from '@/api/common'
+import { mapGetters } from 'vuex'
+import { upload } from '@/utils/upload'
+import E from 'wangeditor'
 
 export default {
-  dicts: ['product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7'],
+  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 (!Number.isInteger(value)) {
@@ -93,7 +149,11 @@ export default {
       }, 500)
     }
     return {
+      uploadHeaders: { 'Authorization': getToken() },
       imgSrcStart: process.env.VUE_APP_BASE_API,
+      isInitCompleted: false, // 组件是否已完全加载
+      dialogImageUrl: '',
+      dialogImageVisible: false,
       visible: false,
       tagTypes: ['', 'primary', 'success', 'warning', 'danger', 'info', 'info', 'info'],
       title: '产品信息详情',
@@ -102,36 +162,59 @@ export default {
       inputValue: '',
       productFeature: [], // 产品特点tag列表
       formData: {
-        picFileName: '',
+        productId: null,
+        customerId: null, // 供应商id
+        customerName: '', // 供应商名称
         productName: '', // 产品名称
         productType: null, // 产品大类
         productSubType: null, // 产品小类
         minPrice: null, // 价格区间-小
         maxPrice: null, // 价格区间-大
         productFeature: null, // 产品特点
-        productTitle: '', // 产品标题
-        rank: '1'
+        productPic: '', // 产品图片
+        describe: '', // 产品描述（富文本）
+        notes: null, // 其他说明
+        letterOfCommitment: false, // 交易保障承诺
+        rank: '1' // 产品品级
       },
       rules: {
-        productName: { required: true, message: '请输入产品名称', trigger: 'blur' },
+        customerName: { required: true, message: '请填写供应商名称', trigger: 'blur' },
+        productName: { required: true, message: '请填写产品名称', trigger: 'blur' },
         productType: { 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' }
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'imagesUploadApi',
+      'baseApi'
+    ])
+  },
   mounted() {
-    this.$nextTick(() => {
-      this.loadData()
-    })
+
   },
   methods: {
+    querySearch(queryString, cb) {
+      HttpReq.backstageApi.associateQueryEnterpriseName({
+        name: queryString
+      }).then((res) => {
+        cb(res.data)
+      })
+    },
+    handleSelect(item) {
+      this.formData.customerId = item.id
+    },
     handleClose(tag) {
       this.productFeature.splice(this.productFeature.indexOf(tag), 1)
       this.formData.productFeature = this.productFeature.join(';')
@@ -151,10 +234,73 @@ export default {
       this.inputValue = ''
       this.inputVisible = false
     },
+    handleExceed() {
+      this.$message({
+        message: '超出最大上传数量限制',
+        type: 'info'
+      })
+    },
+    handleRemove(file, fileList) {
+      HttpReq.backstageApi.deleteProductPic({
+        productPic: file.response.productPic
+      }).then((res) => {
+        this.$notify({
+          title: res.msg,
+          type: 'success',
+          duration: 2500
+        })
+        const arr = []
+        fileList.forEach(item => {
+          arr.push(item.response.productPic)
+        })
+        this.formData.productPic = arr.join(';')
+      })
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogImageVisible = true
+    },
+    handleImported(response, file, fileList) {
+      this.$nextTick(() => {
+        const arr = this.formData.productPic ? this.formData.productPic.split(';') : []
+        arr.push(response.productPic)
+        this.formData.productPic = arr.join(';')
+        this.$notify({
+          title: '上传成功！',
+          type: 'success',
+          duration: 2500
+        })
+      })
+    },
     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.productSubTypeOpts = []
       this.productFeature = []
@@ -164,6 +310,7 @@ export default {
       this.hideView()
     },
     submitForm() {
+      console.log(this.formData, this.formData.describe)
       this.$refs.formViewRef.validate(valid => {
         if (valid) {
           console.log(this.formData)
@@ -182,6 +329,13 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.editor{
+  text-align:left;
+  width: 680px;
+}
+::v-deep .w-e-text-container {
+  height: 560px !important;
+}
 .cell-box {
   min-width: 120px;
   .cell-input {
@@ -220,6 +374,9 @@ export default {
   >>>.el-input.is-disabled .el-input__icon {
     cursor: text;
   }
+  >>>.el-icon-circle-check {
+    color: #13ce66;
+  }
   //>>>.el-icon-arrow-up:before {
   //  content: '';
   //}