Skip to content

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

产品富文本

parent 7027b6b7
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 29 deletions
src/views/backstage/customMgt/customTabulate/add.vue
View file @ 14d1c4f4
......@@ -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
View file @ 14d1c4f4
......@@ -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
View file @ 14d1c4f4
......@@ -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
View file @ 14d1c4f4
......@@ -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.cancelView()
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) {
this.cancelView()
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
View file @ 14d1c4f4
<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-input v-model="formData.productTitle" placeholder="请输入产品名称" class="cell-input" />
<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">
<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: '';
//}
......
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