theluyuan/litemall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf[litemall-admin]: 调整管理后台的专题页面

Browse Source
This commit is contained in:
Junling Bu
2018-07-12 16:58:27 +08:00
parent 6ab6e9cda2
commit da3cec4959
1 changed files with 70 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
litemall-admin/src/views/promotion/topic.vue
View File

@@ -14,32 +14,34 @@
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" width="100px" label="专题ID" prop="id" sortable>
<el-table-column align="center" label="专题标题" prop="title">
</el-table-column>
<el-table-column align="center" min-width="100px" label="专题标题" prop="title">
<el-table-column align="center" label="专题子标题" min-width="200" prop="subtitle">
</el-table-column>
<el-table-column align="center" min-width="100px" label="专题子内容" prop="subtitle">
</el-table-column>
<el-table-column align="center" min-width="400px" label="内容" prop="content">
</el-table-column>
<el-table-column align="center" min-width="80px" label="底价" prop="priceInfo">
</el-table-column>
<el-table-column align="center" min-width="80px" label="阅读数量" prop="readCount">
</el-table-column>
<el-table-column align="center" min-width="100px" label="是否显示" prop="isShow">
<el-table-column align="center" property="picUrl" label="图片">
<template slot-scope="scope">
<el-tag :type="scope.row.isShow ? 'success' : 'error' ">{{scope.row.isShow ? '显示' : '不显示'}}</el-tag>
<img :src="scope.row.picUrl" width="80"/>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
<el-table-column align="center" label="专题详情" prop="content">
<template slot-scope="scope">
<el-dialog title="专题详情" :visible.sync="contentDialogVisible">
<div v-html="contentDetail"></div>
</el-dialog>
<el-button type="primary" size="mini" @click="showContent(scope.row.content)">查看</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="底价" prop="price">
</el-table-column>
<el-table-column align="center" label="阅读数量" prop="readCount">
</el-table-column>
<el-table-column align="center" label="操作" min-width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
@@ -67,23 +69,21 @@
<el-form-item label="专题子标题" prop="subtitle">
<el-input v-model="dataForm.subtitle"></el-input>
</el-form-item>
<el-form-item label="专题图片" prop="picUrl">
<el-upload class="avatar-uploader" :action="uploadPath" list-type="picture-card" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif" :on-success="uploadPicUrl">
<img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item style="width: 700px;" label="专题内容">
<editor :init="editorInit" v-model="dataForm.content"></editor>
</el-form-item>
<el-form-item label="商品低价" prop="priceInfo">
<el-input v-model="dataForm.priceInfo"></el-input>
<el-form-item label="商品低价" prop="price">
<el-input v-model="dataForm.price"></el-input>
</el-form-item>
<el-form-item label="阅读量" prop="readCount">
<el-input v-model="dataForm.readCount"></el-input>
</el-form-item>
<el-form-item label="是否显示" prop="isShow">
<el-select v-model="dataForm.isShow" placeholder="请选择">
<el-option label="显示" :value="true">
</el-option>
<el-option label="不显示" :value="false">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
@@ -96,25 +96,37 @@
</template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 200px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
}
.el-dialog {
width: 800px;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #20a0ff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 120px;
height: 120px;
display: block;
}
</style>
<script>
import { listTopic, createTopic, updateTopic, deleteTopic } from '@/api/topic'
import { createStorage } from '@/api/storage'
import { createStorage, uploadPath } from '@/api/storage'
import BackToTop from '@/components/BackToTop'
import Editor from '@tinymce/tinymce-vue'
@@ -123,6 +135,7 @@ export default {
components: { BackToTop, Editor },
data() {
return {
uploadPath,
list: undefined,
total: undefined,
listLoading: true,
@@ -138,11 +151,14 @@ export default {
id: undefined,
titile: undefined,
subtitle: undefined,
picUrl: undefined,
content: '',
priceInfo: undefined,
price: undefined,
readCount: undefined,
isShow: false
goods: []
},
contentDetail: '',
contentDialogVisible: false,
dialogFormVisible: false,
dialogStatus: '',
textMap: {
@@ -204,10 +220,11 @@ export default {
id: undefined,
titile: undefined,
subtitle: undefined,
picUrl: undefined,
content: '',
priceInfo: undefined,
price: undefined,
readCount: undefined,
isShow: false
goods: []
}
},
handleCreate() {
@@ -218,14 +235,8 @@ export default {
this.$refs['dataForm'].clearValidate()
})
},
uploadUrl(item) {
const formData = new FormData()
formData.append('file', item.file)
createStorage(formData).then(res => {
this.dataForm.url = res.data.data.url
}).catch(() => {
this.$message.error('上传失败，请重新上传')
})
uploadPicUrl: function(response) {
this.dataForm.picUrl = response.data.url
},
createData() {
this.$refs['dataForm'].validate((valid) => {
@@ -243,6 +254,10 @@ export default {
}
})
},
showContent(content) {
this.contentDetail = content
this.contentDialogVisible = true
},
handleUpdate(row) {
this.dataForm = Object.assign({}, row)
this.dialogStatus = 'update'
@@ -288,8 +303,8 @@ export default {
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['专题ID', '专题标题', '专题子标题', '专题内容', '商品低价', '阅读量', '是否显示']
const filterVal = ['id', 'title', 'subtitle', 'content', 'priceInfo', 'readCount', 'isShow']
const tHeader = ['专题ID', '专题标题', '专题子标题', '专题内容', '专题图片', '商品低价', '阅读量', '专题商品']
const filterVal = ['id', 'title', 'subtitle', 'content', 'picUrl', 'price', 'readCount', 'goods']
excel.export_json_to_excel2(tHeader, this.list, filterVal, '专题信息')
this.downloadLoading = false
})