Commit 187ca533 authored by zhanglw's avatar zhanglw

资讯

parent 4bf9f221
...@@ -335,6 +335,30 @@ export const HttpReq = { ...@@ -335,6 +335,30 @@ export const HttpReq = {
return res return res
}) })
}, },
// 内容管理-查询资讯页内容
queryNewsPage: function(params) {
return request({
url: '/api/bsw/newsPage/queryNewsPage?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
// 内容管理-查询单个资讯页内容
queryNewsPageById: function(params) {
return request({
url: '/api/bsw/newsPage/queryNewsPageById?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
// 内容管理-资讯发布
releaseNewsPage: function(data) {
return request({
url: '/api/bsw/newsPage/releaseNewsPage',
method: 'put',
data: data
}).then((res) => {
return res
})
},
xxx: null xxx: null
} }
} }
......
...@@ -23,24 +23,41 @@ ...@@ -23,24 +23,41 @@
</el-form-item> </el-form-item>
<el-form-item v-show="formData.type" label="照片:" class="form-cell" prop="productPic"> <el-form-item v-show="formData.type" label="照片:" class="form-cell" prop="productPic">
<div class="cell-box"> <div class="cell-box">
<ul class="el-upload-list el-upload-list--picture-card" style="float: left">
<li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
<img :src="imgSrcStart+item" class="el-upload-list__item-thumbnail">
<label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
<span class="el-upload-list__item-delete" @click="handleRemoveImg(item)"><i class="el-icon-delete" /></span>
</span>
</li>
</ul>
<el-dialog append-to-body :visible.sync="dialogImgVisible">
<img width="100%" :src="imgSrcStart+dialogImgUrl">
</el-dialog>
<el-upload <el-upload
ref="uploadCom" ref="uploadCom"
action="/api/bsw/product/uploadProductPic" action="/api/bsw/common/uploadPicture"
name="productPic" name="multipartFile"
:data="{mark:'logo'}"
list-type="picture-card" list-type="picture-card"
:headers="uploadHeaders" :headers="uploadHeaders"
:limit="5" :limit="1"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:on-success="handleImported" :on-success="handleImported"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" :on-remove="handleRemove"
> >
<i class="el-icon-plus" /> <div slot="trigger" @click="handlePushClick($event)">
<i class="el-icon-plus" />
</div>
</el-upload> </el-upload>
<el-dialog append-to-body :visible.sync="dialogImageVisible"> <el-dialog append-to-body :visible.sync="dialogImageVisible">
<img width="100%" :src="dialogImageUrl"> <img width="100%" :src="dialogImageUrl">
</el-dialog> </el-dialog>
</div> </div>
<div style="display: block;clear: both">{{ formData.partnerLogo }}</div>
</el-form-item> </el-form-item>
<el-form-item v-show="formData.type<4" label="来源:" class="form-cell" prop="productName"> <el-form-item v-show="formData.type<4" label="来源:" class="form-cell" prop="productName">
<div class="cell-box"> <div class="cell-box">
...@@ -75,8 +92,11 @@ export default { ...@@ -75,8 +92,11 @@ export default {
editor: false, // 富文本对象 editor: false, // 富文本对象
dialogImageUrl: '', dialogImageUrl: '',
dialogImageVisible: false, dialogImageVisible: false,
imgList: [],
dialogImgUrl: '',
dialogImgVisible: false,
visible: false, visible: false,
title: '添加资讯信息', title: '资讯信息内容设置',
formData: { formData: {
productId: null, productId: null,
customerId: null, // 供应商id customerId: null, // 供应商id
...@@ -125,6 +145,15 @@ export default { ...@@ -125,6 +145,15 @@ export default {
type: 'info' type: 'info'
}) })
}, },
handlePushClick(event) {
if (this.formData.partnerLogo !== '') {
event.stopPropagation()
this.$message({
message: '超出最大上传数量限制',
type: 'info'
})
}
},
handleRemove(file, fileList) { handleRemove(file, fileList) {
HttpReq.backstageApi.deleteProductPic({ HttpReq.backstageApi.deleteProductPic({
productPic: file.response.productPic productPic: file.response.productPic
...@@ -161,28 +190,65 @@ export default { ...@@ -161,28 +190,65 @@ export default {
this.visible = true this.visible = true
}, },
hideView() { hideView() {
this.$refs.uploadCom.clearFiles() if (this.$refs.uploadCom) {
this.$refs.uploadCom.clearFiles()
}
if (this.editor) {
this.editor.txt.clear()
}
this.$refs.formViewRef.resetFields() this.$refs.formViewRef.resetFields()
this.editor.txt.clear()
this.visible = false this.visible = false
}, },
cancelView() { cancelView() {
this.hideView() this.hideView()
}, },
submitForm() { release() {
this.$refs.formViewRef.validate(valid => { HttpReq.backstageApi.releaseHomePage({ ids: [this.formData.homePageId] }).then((res) => {
this.$notify({
title: res.msg,
type: res.code === 200 ? 'success' : 'error',
duration: 2500
})
if (res.code === 200) {
this.cancelView()
this.$parent.loadData()
}
})
},
submitForm(isRelease) {
this.$refs.formViewRef.validate((valid, obj) => {
if (valid) { if (valid) {
HttpReq.backstageApi.addProduct(this.formData).then((res) => { if (this.formData.homePageId) {
this.$notify({ HttpReq.backstageApi.updateHomePage(this.formData).then((res) => {
title: res.msg, this.$notify({
type: 'success', title: res.msg,
duration: 2500 type: res.code === 200 ? 'success' : 'error'
})
if (res.code === 200) {
if (isRelease) {
this.release()
} else {
this.cancelView()
this.$parent.loadData()
}
}
}) })
if (res.code === 200) { } else {
this.cancelView() HttpReq.backstageApi.addHomePage(this.formData).then((res) => {
this.$parent.loadData() this.$notify({
} title: res.msg,
}) type: res.code === 200 ? 'success' : 'error'
})
if (res.code === 200) {
if (isRelease) {
this.release()
} else {
this.cancelView()
this.$parent.loadData()
}
}
})
}
} else { } else {
this.$message({ this.$message({
message: '表单信息有误,请核对无误后提交!', message: '表单信息有误,请核对无误后提交!',
...@@ -191,16 +257,9 @@ export default { ...@@ -191,16 +257,9 @@ export default {
} }
}) })
}, },
changeProductType() { loadData(newsPageId) {
this.formData.productSubType = null
this.productSubTypeOpts = this.dict['product_type_' + this.formData.productType]
},
loadData() {
this.showView() this.showView()
if (this.editor) { if (!this.editor) {
return
}
this.$nextTick(() => {
const _this = this const _this = this
const editor = new E(this.$refs.editor) const editor = new E(this.$refs.editor)
editor.config.zIndex = 5 editor.config.zIndex = 5
...@@ -217,10 +276,23 @@ export default { ...@@ -217,10 +276,23 @@ export default {
this.formData.productDescribe = html this.formData.productDescribe = html
} }
editor.create() editor.create()
// 初始化数据
editor.txt.html(this.formData.productDescribe)
this.editor = editor this.editor = editor
}) }
if (newsPageId) {
HttpReq.backstageApi.queryHomePageById({ newsPageId }).then((res) => {
if (res.code === 200) {
this.formData = Object.assign(this.formData, res.data)
if (this.formData.partnerLogo) {
this.imgList = this.formData.partnerLogo.split(';')
}
} else {
this.$message({
message: res.msg,
type: 'error'
})
}
})
}
} }
} }
} }
......
<template>
<!-- 表单渲染 -->
<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="enterpriseName">
<div class="cell-box">
<el-autocomplete
v-model="formData.enterpriseName"
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" />
</div>
</el-form-item>
<el-form-item label="产品分类:" class="form-cell" style="margin: 0">
<div class="cell-box" style="display: flex">
<el-form-item prop="productType">
<el-select v-model="formData.productType" placeholder="产品大类" style="width: 120px" @change="changeProductType">
<el-option v-for="item in dict.product_type" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="productSubType" style="margin-left: 5px">
<el-select v-model="formData.productSubType" placeholder="产品小类" style="width: 160px">
<el-option v-for="item in productSubTypeOpts" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
</el-form-item>
<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="产品价格区间(元):" 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" />
</el-form-item>
<div style="width: 20px;text-align: center">~</div>
<el-form-item prop="maxPrice">
<el-input v-model.number="formData.maxPrice" placeholder="价格区间上限" class="cell-input" style="width: 180px" />
</el-form-item>
</div>
</el-form-item>
<el-form-item label="产品特点:" class="form-cell" prop="productFeature">
<div class="cell-box">
<el-tag
v-for="tag in productFeature"
:key="tag"
closable
size="small"
:type="tagTypes[formData.productType||0]"
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
<el-input
v-show="inputVisible"
ref="saveTagInput"
v-model="inputValue"
class="input-new-tag"
placeholder="请输入特点标签文本"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
/>
<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="productPic">
<div class="cell-box">
<ul class="el-upload-list el-upload-list--picture-card" style="float: left">
<li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
<img :src="imgSrcStart+'/productPic/'+item" class="el-upload-list__item-thumbnail">
<label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
<span class="el-upload-list__item-delete" @click="handleRemoveImg(item)"><i class="el-icon-delete" /></span>
</span>
</li>
</ul>
<el-dialog append-to-body :visible.sync="dialogImgVisible">
<img width="100%" :src="imgSrcStart+'/productPic/'+dialogImgUrl">
</el-dialog>
<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>
<div style="display: block;clear: both">{{ formData.productPic }}</div>
</el-form-item>
<el-form-item label="产品概述:" class="form-cell" prop="productDescribe">
<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>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelView">取消</el-button>
<el-button type="primary" @click="submitForm()">保存</el-button>
</div>
</el-dialog>
</template>
<script>
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_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('请输入数字值'))
}
setTimeout(() => {
if (this.formData.minPrice && value < this.formData.minPrice) {
return callback(new Error('区间值错误'))
}
if (this.formData.maxPrice && value > this.formData.maxPrice) {
return callback(new Error('区间值错误'))
}
return callback()
}, 500)
}
return {
uploadHeaders: { 'Authorization': getToken() },
imgSrcStart: process.env.VUE_APP_BASE_API,
editor: false, // 富文本对象
dialogImageUrl: '',
dialogImageVisible: false,
imgList: [],
dialogImgUrl: '',
dialogImgVisible: false,
visible: false,
tagTypes: ['', 'primary', 'success', 'warning', 'danger', 'info', 'info', 'info'],
title: '编辑产品信息详情',
productSubTypeOpts: [],
inputVisible: false,
inputValue: '',
productFeature: [], // 产品特点tag列表
formData: {
productId: null,
customerId: null, // 供应商id
enterpriseName: '', // 供应商名称
productName: '', // 产品名称
productType: '1', // 产品大类
productSubType: null, // 产品小类
minPrice: null, // 价格区间-小
maxPrice: null, // 价格区间-大
productFeature: null, // 产品特点
productPic: '', // 产品图片
productDescribe: '', // 产品描述(富文本)
notes: null, // 其他说明
letterOfCommitment: false, // 交易保障承诺
attributeBrand: '', // 属性-品牌
attributeConsumptionCurrent: '', // 属性-消耗电流
attributeProductName: '', // 属性-产品名称
attributeRatedPower: '', // 属性-额定功率
attributeModel: '', // 属性-型号
attributeReactionTime: '', // 属性-反应时间
attributeWorkingVoltage: '', // 属性-工作电压
attributeEncapsulation: '', // 属性-封装
attributeQualityAssurance: '', // 属性-质量保证
attributeProducingArea: '', // 属性-产地
attributeNumber: '', // 属性-数量
attributeColor: '', // 属性-颜色
attributeApplicableScenarios: '', // 属性-品牌
attributeBatchNumber: '', // 属性-批号
rank: '1' // 产品品级
},
rules: {
// 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' },
enterpriseName: { validator: this.checkEnterpriseName, trigger: 'blur' },
minPrice: [
// { required: true, message: '请填写产品价格区间下限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
],
maxPrice: [
// { required: true, message: '请填写产品价格区间上限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
]
}
}
},
computed: {
...mapGetters([
'imagesUploadApi',
'baseApi'
])
},
mounted() {
this.productSubTypeOpts = this.dict['product_type_1']
},
methods: {
checkEnterpriseName(rule, value, callback) {
this.$nextTick(_ => {
HttpReq.backstageApi.checkEnterpriseName({
name: value, id: this.formData.customerId
}).then((res) => {
if (res.data) {
callback()
} else {
callback(new Error(res.msg))
}
})
})
},
querySearch(queryString, cb) {
HttpReq.backstageApi.associateQueryEnterpriseName({
name: queryString
}).then((res) => {
cb(res.data)
})
},
handleSelect(item) {
this.formData.customerId = item.id
this.$refs.formViewRef.validateField('enterpriseName', valid => {
return valid
})
},
handleClose(tag) {
this.productFeature.splice(this.productFeature.indexOf(tag), 1)
this.formData.productFeature = this.productFeature.join(';')
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue && !this.productFeature.filter(item => { return item === inputValue }).length) {
this.productFeature.push(inputValue)
this.formData.productFeature = this.productFeature.join(';')
}
this.inputValue = ''
this.inputVisible = false
},
handleExceed() {
this.$message({
message: '超出最大上传数量限制',
type: 'info'
})
},
handleRemoveImg(item) {
this.imgList.splice(this.imgList.indexOf(item), 1)
const arr = this.formData.productPic.split(';')
arr.splice(arr.indexOf(item), 1)
this.formData.productPic = arr.join(';')
},
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
},
hideView() {
this.$refs.uploadCom.clearFiles()
this.$refs.formViewRef.resetFields()
this.editor.txt.clear()
this.productSubTypeOpts = this.dict['product_type_1']
this.productFeature = []
this.visible = false
},
cancelView() {
this.hideView()
},
submitForm() {
this.$refs.formViewRef.validate(valid => {
if (valid) {
HttpReq.backstageApi.updateProductDetail(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'
})
}
})
},
changeProductType() {
this.formData.productSubType = null
this.productSubTypeOpts = this.dict['product_type_' + this.formData.productType]
},
loadData(productId) {
this.showView()
this.$nextTick(() => {
if (!this.editor) {
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()
this.editor = editor
}
// 初始化数据
HttpReq.backstageApi.queryProductDetail({ productId }).then((res) => {
if (res.code === 200) {
this.formData = Object.assign(this.formData, res.data)
if (this.formData.productPic) {
this.imgList = this.formData.productPic.split(';')
}
if (this.formData.productType) {
this.productSubTypeOpts = this.dict['product_type_' + this.formData.productType]
}
if (this.formData.productFeature) {
this.productFeature = this.formData.productFeature.split(';')
}
this.editor.txt.html(this.formData.productDescribe)
} else {
this.$message({
message: res.msg,
type: 'error'
})
}
})
})
}
}
}
</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;
}
::v-deep .w-e-text-container {
height: 560px !important;
}
.cell-box {
min-width: 120px;
.cell-input {
width: 420px;
}
.cell-select {
width: 220px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 28px;
line-height: 24px;
padding: 0 8px;
}
.input-new-tag {
width: 140px;
height: 28px;
margin-left: 10px;
vertical-align: bottom;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
//>>>.el-icon-arrow-up:before {
// content: '';
//}
}
</style>
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<el-select v-model="query.area" clearable placeholder="请选择资讯分类" style="width: 150px"> <el-select v-model="query.type" clearable placeholder="请选择资讯分类" style="width: 150px">
<el-option v-for="item in dict.information_type" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in dict.information_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-input v-model="query.username" clearable placeholder="请输入标题名称" style="width:280px;" /> <el-input v-model="query.title" clearable placeholder="请输入标题名称" style="width:280px;" />
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px"> <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
<el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<date-range-picker v-model="query.createTime" start-placeholder="维护开始日期" style="width: 280px" /> <date-range-picker v-model="query.updateTime" start-placeholder="维护开始日期" style="width: 280px" />
<el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button> <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button> <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div> </div>
...@@ -26,19 +26,19 @@ ...@@ -26,19 +26,19 @@
<el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange"> <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column type="index" width="55" label="序号" :index="indexMethod" /> <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
<el-table-column prop="area" label="资讯分类" width="200" /> <el-table-column prop="type" label="资讯分类" width="200" :formatter="(row, col, val)=>{return dict.label.information_type[val]}" />
<el-table-column prop="xxx" label="标题" /> <el-table-column prop="title" label="标题" />
<el-table-column label="状态" width="100"> <el-table-column label="状态" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div> <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="xxx" label="最后维护日期" align="center" width="200" /> <el-table-column prop="updateTime" label="最后维护日期" align="center" width="200" />
<el-table-column prop="xxx" label="操作" align="right" width="240"> <el-table-column label="操作" align="right" width="240">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip v-if="scope.row.status==='1'" content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip> <el-tooltip v-if="scope.row.status==='1'" content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="batchOperate(1, scope.row)" /></el-tooltip>
<el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip> <el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip> <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toView(scope.row)" /></el-tooltip>
<el-tooltip content="删除"><el-button round plain type="danger" icon="el-icon-delete" @click="toDelete(scope.row)" /></el-tooltip> <el-tooltip content="删除"><el-button round plain type="danger" icon="el-icon-delete" @click="toDelete(scope.row)" /></el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
...@@ -84,50 +84,56 @@ export default { ...@@ -84,50 +84,56 @@ export default {
this.multipleSelection = val this.multipleSelection = val
}, },
loadData() { loadData() {
var sort = 'id,desc' Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => {
var param = { ...this.query } if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
param.page = this.page })
param.pageSize = this.pageSize HttpReq.backstageApi.queryNewsPage({
param.sort = sort page: this.page - 1,
this.tableData = [ pageSize: this.pageSize,
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' }, ...this.query
{ username: '张三', area: '火星', status: '2', enabled: false, xxx: '2023-05-09' }, }).then((res) => {
{ username: '张三', area: '火星', status: '1', enabled: false, xxx: '2023-05-09' } this.tableData = res.data.data
] this.total = res.data.total
this.total = 2 })
}, },
batchOperate(opt) { batchOperate(type, row) {
if (!this.multipleSelection.length) { if (!row && !this.multipleSelection.length) {
return this.$message({ return this.$message({
message: '未选取数据', message: '未选取数据',
type: 'info' type: 'info'
}) })
} }
if (opt) { HttpReq.backstageApi.releaseNewsPage({
console.log('启用', this.multipleSelection) ids: row ? [row.newsPageId] : this.multipleSelection.map(item => { return item.newsPageId })
} else { }).then((res) => {
console.log('启用', this.multipleSelection) this.$notify({
} title: res.msg,
}, type: res.code === 200 ? 'success' : 'error',
changeEnabled(data, val) { duration: 2500
this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续?', '提示', { })
confirmButtonText: '确定', this.loadData()
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).catch(() => {
data.enabled = !data.enabled
}) })
}, },
toAdd() { toAdd() {
this.$refs.addPage.loadData() this.$refs.addPage.loadData()
}, },
toEdit(item) { toEdit(item) {
this.$refs.addPage.loadData(item.newsPageId)
},
toView(item) {
// this.$refs.viewPage.loadData(item.homePageId)
}, },
toDelete(item) { toDelete(item) {
HttpReq.backstageApi.hpBatchDelete({
ids: [item.newsPageId]
}).then((res) => {
this.$notify({
title: res.msg,
type: res.code === 200 ? 'success' : 'error',
duration: 2500
})
this.loadData()
})
}, },
toSearch() { toSearch() {
this.page = 1 this.page = 1
......
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