Commit 6f0ebe3e authored by Junling Bu's avatar Junling Bu
Browse files

chore[litemall-admin]: 管理后台基于的vue-element-admin框架更新至3.9.3

parent cffdc561
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入广告标题" v-model="listQuery.name">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入广告内容" v-model="listQuery.content">
</el-input>
<el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入广告标题"/>
<el-input v-model="listQuery.content" clearable class="filter-item" style="width: 200px;" placeholder="请输入广告内容"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload" :loading="downloadLoading">导出</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="广告ID" prop="id" sortable/>
<el-table-column align="center" label="广告ID" prop="id" sortable>
</el-table-column>
<el-table-column align="center" label="广告标题" prop="name"/>
<el-table-column align="center" label="广告标题" prop="name">
</el-table-column>
<el-table-column align="center" label="广告内容" prop="content">
</el-table-column>
<el-table-column align="center" label="广告内容" prop="content"/>
<el-table-column align="center" label="广告图片" prop="url">
<template slot-scope="scope">
<img :src="scope.row.url" width="80" v-if="scope.row.url"/>
<img v-if="scope.row.url" :src="scope.row.url" width="80">
</template>
</el-table-column>
<el-table-column align="center" label="广告位置" prop="position">
</el-table-column>
<el-table-column align="center" label="广告位置" prop="position"/>
<el-table-column align="center" label="活动链接" prop="link">
</el-table-column>
<el-table-column align="center" label="活动链接" prop="link"/>
<el-table-column align="center" label="是否启用" prop="enabled">
<template slot-scope="scope">
......@@ -46,48 +38,40 @@
<el-table-column align="center" label="操作" 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>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<!-- 添加或修改对话框 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
<el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="广告标题" prop="name">
<el-input v-model="dataForm.name"></el-input>
<el-input v-model="dataForm.name"/>
</el-form-item>
<el-form-item label="广告内容" prop="content">
<el-input v-model="dataForm.content"></el-input>
<el-input v-model="dataForm.content"/>
</el-form-item>
<el-form-item label="广告图片" prop="url">
<el-upload class="avatar-uploader" :headers="headers" :action="uploadPath" list-type="picture-card" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif" :on-success="uploadUrl">
<img v-if="dataForm.url" :src="dataForm.url" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
<img v-if="dataForm.url" :src="dataForm.url" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
</el-form-item>
<el-form-item label="广告位置" prop="position">
<el-select v-model="dataForm.position" placeholder="请选择">
<el-option label="首页" :value="1">
</el-option>
<el-option :value="1" label="首页"/>
</el-select>
</el-form-item>
<el-form-item label="活动链接" prop="link">
<el-input v-model="dataForm.link"></el-input>
<el-input v-model="dataForm.link"/>
</el-form-item>
<el-form-item label="是否启用" prop="enabled">
<el-select v-model="dataForm.enabled" placeholder="请选择">
<el-option label="启用" :value="true">
</el-option>
<el-option label="不启用" :value="false">
</el-option>
<el-option :value="true" label="启用"/>
<el-option :value="false" label="不启用"/>
</el-select>
</el-form-item>
</el-form>
......@@ -102,45 +86,40 @@
</template>
<style>
.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;
}
.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 { listAd, createAd, updateAd, deleteAd } from '@/api/ad'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'Ad',
computed: {
headers() {
return {
'Admin-Token': getToken()
}
}
},
components: { Pagination },
data() {
return {
uploadPath,
......@@ -171,41 +150,46 @@ export default {
create: '创建'
},
rules: {
name: [{ required: true, message: '广告标题不能为空', trigger: 'blur' }],
content: [{ required: true, message: '广告内容不能为空', trigger: 'blur' }],
name: [
{ required: true, message: '广告标题不能为空', trigger: 'blur' }
],
content: [
{ required: true, message: '广告内容不能为空', trigger: 'blur' }
],
url: [{ required: true, message: '广告链接不能为空', trigger: 'blur' }]
},
downloadLoading: false
}
},
computed: {
headers() {
return {
'Admin-Token': getToken()
}
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
listAd(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
listAd(this.listQuery)
.then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
})
.catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
resetForm() {
this.dataForm = {
id: undefined,
......@@ -229,21 +213,23 @@ export default {
this.dataForm.url = response.data.url
},
createData() {
this.$refs['dataForm'].validate((valid) => {
this.$refs['dataForm'].validate(valid => {
if (valid) {
createAd(this.dataForm).then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '创建成功'
createAd(this.dataForm)
.then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '创建成功'
})
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
}
})
},
......@@ -256,50 +242,70 @@ export default {
})
},
updateData() {
this.$refs['dataForm'].validate((valid) => {
this.$refs['dataForm'].validate(valid => {
if (valid) {
updateAd(this.dataForm).then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
updateAd(this.dataForm)
.then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
}
}
}
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新广告成功'
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新广告成功'
})
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
}
})
},
handleDelete(row) {
deleteAd(row).then(response => {
this.$notify.success({
title: '成功',
message: '删除成功'
deleteAd(row)
.then(response => {
this.$notify.success({
title: '成功',
message: '删除成功'
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['广告ID', '广告标题', '广告内容', '广告图片', '广告位置', '活动链接', '是否启用']
const filterVal = ['id', 'name', 'content', 'url', 'postion', 'link', 'enabled']
const tHeader = [
'广告ID',
'广告标题',
'广告内容',
'广告图片',
'广告位置',
'活动链接',
'是否启用'
]
const filterVal = [
'id',
'name',
'content',
'url',
'postion',
'link',
'enabled'
]
excel.export_json_to_excel2(tHeader, this.list, filterVal, '广告信息')
this.downloadLoading = false
})
......
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入商品编号" v-model="listQuery.goodsId">
</el-input>
<el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品编号"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download"
@click="handleDownload">导出
<el-button
:loading="downloadLoading"
class="filter-item"
type="primary"
icon="el-icon-download"
@click="handleDownload">导出
</el-button>
</div>
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
highlight-current-row>
<el-table
v-loading="listLoading"
:data="list"
size="small"
element-loading-text="正在查询中。。。"
border
fit
highlight-current-row>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.subGroupons" border style="width: 100%">
<el-table-column align="center" label="订单ID" prop="orderId">
</el-table-column>
<el-table-column align="center" label="用户ID" prop="userId">
</el-table-column>
<el-table-column align="center" label="订单ID" prop="orderId"/>
<el-table-column align="center" label="用户ID" prop="userId"/>
</el-table>
</template>
</el-table-column>
<el-table-column align="center" label="订单ID" prop="groupon.orderId">
</el-table-column>
<el-table-column align="center" label="订单ID" prop="groupon.orderId"/>
<el-table-column align="center" label="用户ID" prop="groupon.userId">
</el-table-column>
<el-table-column align="center" label="用户ID" prop="groupon.userId"/>
<el-table-column align="center" label="参与人数" prop="subGroupons.length">
</el-table-column>
<el-table-column align="center" label="参与人数" prop="subGroupons.length"/>
<el-table-column align="center" label="团购折扣" prop="rules.discount">
</el-table-column>
<el-table-column align="center" label="团购折扣" prop="rules.discount"/>
<el-table-column align="center" label="团购要求" prop="rules.discountMember">
</el-table-column>
<el-table-column align="center" label="团购要求" prop="rules.discountMember"/>
<el-table-column align="center" property="iconUrl" label="分享图片">
<template slot-scope="scope">
<img :src="scope.row.groupon.shareUrl" width="40"/>
<img :src="scope.row.groupon.shareUrl" width="40">
</template>
</el-table-column>
<el-table-column align="center" label="开始时间" prop="rules.addTime">
</el-table-column>
<el-table-column align="center" label="开始时间" prop="rules.addTime"/>
<el-table-column align="center" label="结束时间" prop="rules.expireTime">
</el-table-column>
<el-table-column align="center" label="结束时间" prop="rules.expireTime"/>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<el-tooltip placement="top" content="返回顶部">
<back-to-top :visibilityHeight="100"></back-to-top>
<back-to-top :visibility-height="100"/>
</el-tooltip>
</div>
......@@ -92,66 +85,59 @@
</style>
<script>
import { listRecord } from '@/api/groupon'
import BackToTop from '@/components/BackToTop'
export default {
name: 'GrouponActivity',
components: { BackToTop },
data() {
return {
list: [],
total: 0,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
goodsId: undefined,
sort: 'add_time',
order: 'desc'
},
goodsDetail: '',
detailDialogVisible: false,
downloadLoading: false
}
import { listRecord } from '@/api/groupon'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'GrouponActivity',
components: { BackToTop, Pagination },
data() {
return {
list: [],
total: 0,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
goodsId: undefined,
sort: 'add_time',
order: 'desc'
},
goodsDetail: '',
detailDialogVisible: false,
downloadLoading: false
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
listRecord(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
created() {
handleFilter() {
this.listQuery.page = 1
this.getList()
},
methods: {
getList() {
this.listLoading = true
listRecord(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
handleDownload() {
this.downloadLoading = true
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['商品ID', '名称', '首页主图', '折扣', '人数要求', '活动开始时间', '活动结束时间']
const filterVal = ['id', 'name', 'pic_url', 'discount', 'discountMember', 'addTime', 'expireTime']
excel.export_json_to_excel2(tHeader, this.list, filterVal, '商品信息')
this.downloadLoading = false
})
}
}
}
}
</script>
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入商品编号" v-model="listQuery.goodsId">
</el-input>
<el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品编号"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download"
@click="handleDownload">导出
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
<el-button
:loading="downloadLoading"
class="filter-item"
type="primary"
icon="el-icon-download"
@click="handleDownload">导出
</el-button>
</div>
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
highlight-current-row>
<el-table-column align="center" label="商品ID" prop="goodsId">
</el-table-column>
<el-table
v-loading="listLoading"
:data="list"
size="small"
element-loading-text="正在查询中。。。"
border
fit
highlight-current-row>
<el-table-column align="center" label="商品ID" prop="goodsId"/>
<el-table-column align="center" min-width="100" label="名称" prop="goodsName">
</el-table-column>
<el-table-column align="center" min-width="100" label="名称" prop="goodsName"/>
<el-table-column align="center" property="picUrl" label="图片">
<template slot-scope="scope">
<img :src="scope.row.picUrl" width="40"/>
<img :src="scope.row.picUrl" width="40">
</template>
</el-table-column>
<el-table-column align="center" label="团购优惠" prop="discount">
</el-table-column>
<el-table-column align="center" label="团购优惠" prop="discount"/>
<el-table-column align="center" label="团购要求" prop="discountMember">
</el-table-column>
<el-table-column align="center" label="团购要求" prop="discountMember"/>
<el-table-column align="center" label="开始时间" prop="addTime">
</el-table-column>
<el-table-column align="center" label="开始时间" prop="addTime"/>
<el-table-column align="center" label="结束时间" prop="expireTime">
</el-table-column>
<el-table-column align="center" label="结束时间" prop="expireTime"/>
<el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
......@@ -49,21 +52,29 @@
<!-- 添加或修改对话框 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px"
style='width: 400px; margin-left:50px;'>
<el-form
ref="dataForm"
:rules="rules"
:model="dataForm"
status-icon
label-position="left"
label-width="100px"
style="width: 400px; margin-left:50px;">
<el-form-item label="商品ID" prop="goodsId">
<el-input v-model="dataForm.goodsId"></el-input>
<el-input v-model="dataForm.goodsId"/>
</el-form-item>
<el-form-item label="团购折扣" prop="discount">
<el-input v-model="dataForm.discount"></el-input>
<el-input v-model="dataForm.discount"/>
</el-form-item>
<el-form-item label="团购人数要求" prop="discountMember">
<el-input v-model="dataForm.discountMember"></el-input>
<el-input v-model="dataForm.discountMember"/>
</el-form-item>
<el-form-item label="过期时间" prop="expireTime">
<el-date-picker v-model="dataForm.expireTime" type="datetime" placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
<el-date-picker
v-model="dataForm.expireTime"
type="datetime"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -73,181 +84,167 @@
</div>
</el-dialog>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<el-tooltip placement="top" content="返回顶部">
<back-to-top :visibilityHeight="100"></back-to-top>
<back-to-top :visibility-height="100"/>
</el-tooltip>
</div>
</template>
<script>
import { listGroupon, publishGroupon, deleteGroupon, editGroupon } from '@/api/groupon'
import BackToTop from '@/components/BackToTop'
import { listGroupon, publishGroupon, deleteGroupon, editGroupon } from '@/api/groupon'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'GrouponRule',
components: { BackToTop },
data() {
return {
list: [],
total: 0,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
goodsId: undefined,
sort: 'add_time',
order: 'desc'
},
downloadLoading: false,
dataForm: {
id: undefined,
goodsId: '',
discount: '',
discountMember: '',
expireTime: undefined
},
dialogFormVisible: false,
dialogStatus: '',
textMap: {
update: '编辑',
create: '创建'
},
rules: {
goodsId: [{ required: true, message: '商品不能为空', trigger: 'blur' }]
}
export default {
name: 'GrouponRule',
components: { BackToTop, Pagination },
data() {
return {
list: [],
total: 0,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
goodsId: undefined,
sort: 'add_time',
order: 'desc'
},
downloadLoading: false,
dataForm: {
id: undefined,
goodsId: '',
discount: '',
discountMember: '',
expireTime: undefined
},
dialogFormVisible: false,
dialogStatus: '',
textMap: {
update: '编辑',
create: '创建'
},
rules: {
goodsId: [{ required: true, message: '商品不能为空', trigger: 'blur' }]
}
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
listGroupon(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
created() {
handleFilter() {
this.listQuery.page = 1
this.getList()
},
methods: {
getList() {
this.listLoading = true
listGroupon(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
resetForm() {
this.dataForm = {
id: undefined,
goodsId: '',
discount: '',
discountMember: '',
expireTime: undefined
}
},
handleCreate() {
this.resetForm()
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
createData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
publishGroupon(this.dataForm).then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '创建团购规则成功'
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
resetForm() {
this.dataForm = {
id: undefined,
goodsId: '',
discount: '',
discountMember: '',
expireTime: undefined
}
},
handleCreate() {
this.resetForm()
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
createData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
publishGroupon(this.dataForm).then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '创建团购规则成功'
})
}
})
},
handleUpdate(row) {
this.dataForm = Object.assign({}, row)
this.dialogStatus = 'update'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
updateData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
editGroupon(this.dataForm).then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
}
}
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新团购规则成功'
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
}
})
},
handleDelete(row) {
deleteGroupon(row).then(response => {
this.$notify.success({
title: '成功',
message: '删除团购规则成功'
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
}
})
},
handleUpdate(row) {
this.dataForm = Object.assign({}, row)
this.dialogStatus = 'update'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
updateData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
editGroupon(this.dataForm).then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
}
}
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新团购规则成功'
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
}
})
},
handleDelete(row) {
deleteGroupon(row).then(response => {
this.$notify.success({
title: '成功',
message: '删除团购规则成功'
})
},
handleDownload() {
this.downloadLoading = true
const index = this.list.indexOf(row)
this.list.splice(index, 1)
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['商品ID', '名称', '首页主图', '折扣', '人数要求', '活动开始时间', '活动结束时间']
const filterVal = ['id', 'name', 'pic_url', 'discount', 'discountMember', 'addTime', 'expireTime']
excel.export_json_to_excel2(tHeader, this.list, filterVal, '商品信息')
this.downloadLoading = false
})
}
}
}
}
</script>
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入专题标题" v-model="listQuery.title">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入专题子标题" v-model="listQuery.subtitle">
</el-input>
<el-input v-model="listQuery.title" clearable class="filter-item" style="width: 200px;" placeholder="请输入专题标题"/>
<el-input v-model="listQuery.subtitle" clearable class="filter-item" style="width: 200px;" placeholder="请输入专题子标题"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload" :loading="downloadLoading">导出</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="专题标题" prop="title">
</el-table-column>
<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="专题标题" prop="title"/>
<el-table-column align="center" label="专题子标题" min-width="200" prop="subtitle">
</el-table-column>
<el-table-column align="center" label="专题子标题" min-width="200" prop="subtitle"/>
<el-table-column align="center" property="picUrl" label="图片">
<template slot-scope="scope">
<img :src="scope.row.picUrl" width="80"/>
<img :src="scope.row.picUrl" width="80">
</template>
</el-table-column>
<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 :visible.sync="contentDialogVisible" title="专题详情">
<div v-html="contentDetail"/>
</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="price"/>
<el-table-column align="center" label="阅读数量" prop="readCount">
</el-table-column>
<el-table-column align="center" label="阅读数量" prop="readCount"/>
<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>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<el-tooltip placement="top" content="返回顶部">
<back-to-top :visibilityHeight="100" ></back-to-top>
<back-to-top :visibility-height="100" />
</el-tooltip>
<!-- 添加或修改对话框 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
<el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="专题标题" prop="title">
<el-input v-model="dataForm.title"></el-input>
<el-input v-model="dataForm.title"/>
</el-form-item>
<el-form-item label="专题子标题" prop="subtitle">
<el-input v-model="dataForm.subtitle"></el-input>
<el-input v-model="dataForm.subtitle"/>
</el-form-item>
<el-form-item label="专题图片" prop="picUrl">
<el-upload class="avatar-uploader" :headers="headers" :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 :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadPicUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
<img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
</el-form-item>
<el-form-item style="width: 700px;" label="专题内容">
<editor :init="editorInit" v-model="dataForm.content"></editor>
<editor :init="editorInit" v-model="dataForm.content"/>
</el-form-item>
<el-form-item label="商品低价" prop="price">
<el-input v-model="dataForm.price"></el-input>
<el-input v-model="dataForm.price"/>
</el-form-item>
<el-form-item label="阅读量" prop="readCount">
<el-input v-model="dataForm.readCount"></el-input>
<el-input v-model="dataForm.readCount"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -96,32 +85,32 @@
</template>
<style>
.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;
}
.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>
......@@ -129,18 +118,12 @@ import { listTopic, createTopic, updateTopic, deleteTopic } from '@/api/topic'
import { createStorage, uploadPath } from '@/api/storage'
import BackToTop from '@/components/BackToTop'
import Editor from '@tinymce/tinymce-vue'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getToken } from '@/utils/auth'
export default {
name: 'Topic',
components: { BackToTop, Editor },
computed: {
headers() {
return {
'Admin-Token': getToken()
}
}
},
components: { BackToTop, Editor, Pagination },
data() {
return {
uploadPath,
......@@ -174,56 +157,70 @@ export default {
create: '创建'
},
rules: {
title: [{ required: true, message: '专题标题不能为空', trigger: 'blur' }],
subtitle: [{ required: true, message: '专题子标题不能为空', trigger: 'blur' }],
content: [{ required: true, message: '专题内容不能为空', trigger: 'blur' }]
title: [
{ required: true, message: '专题标题不能为空', trigger: 'blur' }
],
subtitle: [
{ required: true, message: '专题子标题不能为空', trigger: 'blur' }
],
content: [
{ required: true, message: '专题内容不能为空', trigger: 'blur' }
]
},
downloadLoading: false,
editorInit: {
language: 'zh_CN',
convert_urls: false,
plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
plugins: [
'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
],
toolbar: [
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample',
'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
],
images_upload_handler: function(blobInfo, success, failure) {
const formData = new FormData()
formData.append('file', blobInfo.blob())
createStorage(formData).then(res => {
success(res.data.data.url)
}).catch(() => {
failure('上传失败,请重新上传')
})
createStorage(formData)
.then(res => {
success(res.data.data.url)
})
.catch(() => {
failure('上传失败,请重新上传')
})
}
}
}
},
computed: {
headers() {
return {
'Admin-Token': getToken()
}
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
listTopic(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
listTopic(this.listQuery)
.then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
})
.catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
resetForm() {
this.dataForm = {
id: undefined,
......@@ -248,21 +245,23 @@ export default {
this.dataForm.picUrl = response.data.url
},
createData() {
this.$refs['dataForm'].validate((valid) => {
this.$refs['dataForm'].validate(valid => {
if (valid) {
createTopic(this.dataForm).then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '创建专题成功'
createTopic(this.dataForm)
.then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '创建专题成功'
})
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
}
})
},
......@@ -279,50 +278,72 @@ export default {
})
},
updateData() {
this.$refs['dataForm'].validate((valid) => {
this.$refs['dataForm'].validate(valid => {
if (valid) {
updateTopic(this.dataForm).then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
updateTopic(this.dataForm)
.then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
}
}
}
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新专题成功'
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新专题成功'
})
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
}
})
},
handleDelete(row) {
deleteTopic(row).then(response => {
this.$notify.success({
title: '成功',
message: '删除专题成功'
deleteTopic(row)
.then(response => {
this.$notify.success({
title: '成功',
message: '删除专题成功'
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['专题ID', '专题标题', '专题子标题', '专题内容', '专题图片', '商品低价', '阅读量', '专题商品']
const filterVal = ['id', 'title', 'subtitle', 'content', 'picUrl', 'price', 'readCount', 'goods']
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
})
......
<script>
export default {
beforeCreate() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' + path, query })
},
render: function(h) {
return h() // avoid warning message
}
}
</script>
<template>
<div class="app-container calendar-list-container">
<ve-line :extend="chartExtend" :data="chartData" :settings="chartSettings"></ve-line>
<div class="app-container">
<ve-line :extend="chartExtend" :data="chartData" :settings="chartSettings"/>
</div>
</template>
......@@ -34,4 +34,4 @@ export default {
}
}
</script>
\ No newline at end of file
</script>
<template>
<div class="app-container calendar-list-container">
<ve-line :extend="chartExtend" :data="chartData" :settings="chartSettings"></ve-line>
<div class="app-container">
<ve-line :extend="chartExtend" :data="chartData" :settings="chartSettings"/>
</div>
</template>
......@@ -34,4 +34,4 @@ export default {
}
}
</script>
\ No newline at end of file
</script>
<template>
<div class="app-container calendar-list-container">
<ve-histogram :extend="chartExtend" :data="chartData" :settings="chartSettings"></ve-histogram>
<div class="app-container">
<ve-histogram :extend="chartExtend" :data="chartData" :settings="chartSettings"/>
</div>
</template>
......@@ -35,4 +35,4 @@ export default {
}
}
</script>
\ No newline at end of file
</script>
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入管理员名称" v-model="listQuery.username">
</el-input>
<el-input v-model="listQuery.username" clearable class="filter-item" style="width: 200px;" placeholder="请输入管理员名称"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="管理员ID" prop="id" sortable>
</el-table-column>
<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="管理员ID" prop="id" sortable/>
<el-table-column align="center" label="管理员名称" prop="username">
</el-table-column>
<el-table-column align="center" label="管理员名称" prop="username"/>
<el-table-column align="center" label="管理员头像" prop="avatar">
<template slot-scope="scope">
<img :src="scope.row.avatar" width="40" v-if="scope.row.avatar"/>
<img v-if="scope.row.avatar" :src="scope.row.avatar" width="40">
</template>
</el-table-column>
<el-table-column align="center" label="操作" 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>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<!-- 添加或修改对话框 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
<el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="管理员名称" prop="username">
<el-input v-model="dataForm.username"></el-input>
<el-input v-model="dataForm.username"/>
</el-form-item>
<el-form-item label="管理员密码" prop="password">
<el-input type="password" v-model="dataForm.password" auto-complete="off"></el-input>
<el-input v-model="dataForm.password" type="password" auto-complete="off"/>
</el-form-item>
<el-form-item label="管理员头像" prop="avatar">
<el-upload class="avatar-uploader" :headers="headers" :action="uploadPath" list-type="picture-card" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif" :on-success="uploadAvatar">
<img v-if="dataForm.avatar" :src="dataForm.avatar" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadAvatar" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
<img v-if="dataForm.avatar" :src="dataForm.avatar" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
</el-form-item>
</el-form>
......@@ -66,45 +58,40 @@
</template>
<style>
.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;
}
.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 { listAdmin, createAdmin, updateAdmin, deleteAdmin } from '@/api/admin'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'Admin',
computed: {
headers() {
return {
'Admin-Token': getToken()
}
}
},
components: { Pagination },
data() {
return {
uploadPath,
......@@ -131,40 +118,43 @@ export default {
create: '创建'
},
rules: {
username: [{ required: true, message: '管理员名称不能为空', trigger: 'blur' }],
username: [
{ required: true, message: '管理员名称不能为空', trigger: 'blur' }
],
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
},
downloadLoading: false
}
},
computed: {
headers() {
return {
'Admin-Token': getToken()
}
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
listAdmin(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
listAdmin(this.listQuery)
.then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
})
.catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
resetForm() {
this.dataForm = {
id: undefined,
......@@ -185,21 +175,23 @@ export default {
})
},
createData() {
this.$refs['dataForm'].validate((valid) => {
this.$refs['dataForm'].validate(valid => {
if (valid) {
createAdmin(this.dataForm).then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '添加管理员成功'
createAdmin(this.dataForm)
.then(response => {
this.list.unshift(response.data.data)
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '添加管理员成功'
})
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
}
})
},
......@@ -212,51 +204,60 @@ export default {
})
},
updateData() {
this.$refs['dataForm'].validate((valid) => {
this.$refs['dataForm'].validate(valid => {
if (valid) {
updateAdmin(this.dataForm).then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
updateAdmin(this.dataForm)
.then(() => {
for (const v of this.list) {
if (v.id === this.dataForm.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.dataForm)
break
}
}
}
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新管理员成功'
this.dialogFormVisible = false
this.$notify.success({
title: '成功',
message: '更新管理员成功'
})
})
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
}
})
},
handleDelete(row) {
deleteAdmin(row).then(response => {
this.$notify.success({
title: '成功',
message: '删除管理员成功'
deleteAdmin(row)
.then(response => {
this.$notify.success({
title: '成功',
message: '删除管理员成功'
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
}).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
.catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
})
})
})
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['管理员ID', '管理员名称', '管理员头像']
const filterVal = ['id', 'username', 'avatar']
excel.export_json_to_excel2(tHeader, this.list, filterVal, '管理员信息')
excel.export_json_to_excel2(
tHeader,
this.list,
filterVal,
'管理员信息'
)
this.downloadLoading = false
})
}
......
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入对象KEY" v-model="listQuery.key">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入对象名称" v-model="listQuery.name">
</el-input>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-input v-model="listQuery.key" clearable class="filter-item" style="width: 200px;" placeholder="请输入对象KEY"/>
<el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入对象名称"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="对象KEY" prop="key">
</el-table-column>
<el-table-column align="center" label="对象KEY" prop="key"/>
<el-table-column align="center" label="对象名称" prop="name">
</el-table-column>
<el-table-column align="center" label="对象类型" prop="type">
</el-table-column>
<el-table-column align="center" label="对象名称" prop="name"/>
<el-table-column align="center" label="对象类型" prop="type"/>
<el-table-column align="center" label="对象大小" prop="size">
</el-table-column>
<el-table-column align="center" label="对象大小" prop="size"/>
<el-table-column align="center" property="url" label="图片">
<template slot-scope="scope">
<img :src="scope.row.url" width="40"/>
<img :src="scope.row.url" width="40">
</template>
</el-table-column>
<el-table-column align="center" label="图片链接" prop="url">
</el-table-column>
<el-table-column align="center" label="图片链接" prop="url"/>
<el-table-column align="center" label="操作" 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>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<!-- 添加对话框 -->
<el-dialog title="上传对象" :visible.sync="createDialogVisible">
<el-upload action="#" list-type="picture" :show-file-list="false" :limit="1" :http-request="handleUpload">
<el-dialog :visible.sync="createDialogVisible" title="上传对象">
<el-upload :show-file-list="false" :limit="1" :http-request="handleUpload" action="#" list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-dialog>
<!-- 修改对话框 -->
<el-dialog title="修改对象名称" :visible.sync="updateDialogVisible">
<el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
<el-dialog :visible.sync="updateDialogVisible" title="修改对象名称">
<el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="对象名称" prop="name">
<el-input v-model="dataForm.name"></el-input>
<el-input v-model="dataForm.name"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -76,9 +64,11 @@
<script>
import { listStorage, createStorage, updateStorage, deleteStorage } from '@/api/storage'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'Storage',
components: { Pagination },
data() {
return {
list: null,
......@@ -124,14 +114,6 @@ export default {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
resetForm() {
this.dataForm = {
id: undefined,
......
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID" v-model="listQuery.userId">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入收货人名称" v-model="listQuery.name">
</el-input>
<el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID"/>
<el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入收货人名称"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<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>
<el-table v-loading="listLoading" :data="list" size="small" 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" min-width="100px" label="用户ID" prop="userId">
</el-table-column>
<el-table-column align="center" min-width="100px" label="用户ID" prop="userId"/>
<el-table-column align="center" min-width="100px" label="收货人名称" prop="name">
</el-table-column>
<el-table-column align="center" min-width="100px" label="手机号码" prop="mobile">
</el-table-column>
<el-table-column align="center" min-width="100px" label="收货人名称" prop="name"/>
<el-table-column align="center" min-width="100px" label="手机号码" prop="mobile"/>
<el-table-column align="center" min-width="300px" label="地址" prop="address">
<template slot-scope="scope">
{{scope.row.province + scope.row.city + scope.row.area + scope.row.address}}
{{ scope.row.province + scope.row.city + scope.row.area + scope.row.address }}
</template>
</el-table-column>
<el-table-column align="center" min-width="80px" label="默认" prop="isDefault">
<template slot-scope="scope">
{{scope.row.isDefault ? '' : ''}}
{{ scope.row.isDefault ? '' : '' }}
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</template>
<script>
import { listAddress } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'UserAddress',
components: { Pagination },
data() {
return {
list: null,
......@@ -90,14 +81,6 @@ export default {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
......@@ -109,4 +92,4 @@ export default {
}
}
}
</script>
\ No newline at end of file
</script>
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID" v-model="listQuery.userId">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入商品ID" v-model="listQuery.valueId">
</el-input>
<el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID"/>
<el-input v-model="listQuery.valueId" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品ID"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<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>
<el-table v-loading="listLoading" :data="list" size="small" 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" min-width="100px" label="用户ID" prop="userId">
</el-table-column>
<el-table-column align="center" min-width="100px" label="用户ID" prop="userId"/>
<el-table-column align="center" min-width="100px" label="商品ID" prop="valueId">
</el-table-column>
<el-table-column align="center" min-width="100px" label="添加时间" prop="addTime">
</el-table-column>
<el-table-column align="center" min-width="100px" label="商品ID" prop="valueId"/>
<el-table-column align="center" min-width="100px" label="添加时间" prop="addTime"/>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</template>
<script>
import { listCollect } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'Collect',
components: { Pagination },
data() {
return {
list: null,
......@@ -78,14 +69,6 @@ export default {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
resetForm() {
this.dataForm = {
id: undefined,
......
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户名" v-model="listQuery.username">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入反馈ID" v-model="listQuery.id">
</el-input>
<el-input v-model="listQuery.username" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户名"/>
<el-input v-model="listQuery.id" clearable class="filter-item" style="width: 200px;" placeholder="请输入反馈ID"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload" :loading="downloadLoading">导出</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="反馈ID" prop="id">
</el-table-column>
<el-table-column align="center" label="反馈ID" prop="id"/>
<el-table-column align="center" label="用户名" prop="username">
</el-table-column>
<el-table-column align="center" label="用户名" prop="username"/>
<el-table-column align="center" label="手机号码" prop="mobile">
</el-table-column>
<el-table-column align="center" label="手机号码" prop="mobile"/>
<el-table-column align="center" label="反馈类型" prop="feedType">
</el-table-column>
<el-table-column align="center" label="反馈类型" prop="feedType"/>
<el-table-column align="center" label="反馈内容" prop="content">
</el-table-column>
<el-table-column align="center" label="反馈内容" prop="content"/>
<el-table-column align="center" label="反馈图片" prop="picUrls">
<template slot-scope="scope">
<img v-for="item in scope.row.picUrls" :key="item" :src="item" width="40"/>
<img v-for="item in scope.row.picUrls" :key="item" :src="item" width="40">
</template>
</el-table-column>
<el-table-column align="center" label="时间" prop="addTime">
</el-table-column>
<el-table-column align="center" label="时间" prop="addTime"/>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</template>
<script>
import { listFeedback } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'Feedback',
components: { Pagination },
data() {
return {
list: undefined,
......@@ -90,14 +79,6 @@ export default {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
......
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID" v-model="listQuery.userId">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入商品ID" v-model="listQuery.goodsId">
</el-input>
<el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID"/>
<el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品ID"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<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>
<el-table v-loading="listLoading" :data="list" size="small" 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" min-width="100px" label="用户ID" prop="userId">
</el-table-column>
<el-table-column align="center" min-width="100px" label="用户ID" prop="userId"/>
<el-table-column align="center" min-width="100px" label="商品ID" prop="goodsId">
</el-table-column>
<el-table-column align="center" min-width="100px" label="添加时间" prop="addTime">
</el-table-column>
<el-table-column align="center" min-width="100px" label="商品ID" prop="goodsId"/>
<el-table-column align="center" min-width="100px" label="添加时间" prop="addTime"/>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</template>
<script>
import { listFootprint } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'FootPrint',
components: { Pagination },
data() {
return {
list: null,
......@@ -64,34 +55,33 @@ export default {
methods: {
getList() {
this.listLoading = true
listFootprint(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
listFootprint(this.listQuery)
.then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
})
.catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['用户ID', '商品ID', '添加时间']
const filterVal = ['userId', 'goodsId', 'addTime']
excel.export_json_to_excel2(tHeader, this.list, filterVal, '用户收藏信息')
excel.export_json_to_excel2(
tHeader,
this.list,
filterVal,
'用户收藏信息'
)
this.downloadLoading = false
})
}
......
......@@ -3,43 +3,35 @@
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID" v-model="listQuery.userId">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入搜索历史关键字" v-model="listQuery.keyword">
</el-input>
<el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户ID"/>
<el-input v-model="listQuery.keyword" clearable class="filter-item" style="width: 200px;" placeholder="请输入搜索历史关键字"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<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>
<el-table v-loading="listLoading" :data="list" size="small" 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" min-width="100px" label="用户ID" prop="userId">
</el-table-column>
<el-table-column align="center" min-width="100px" label="用户ID" prop="userId"/>
<el-table-column align="center" min-width="100px" label="关键字" prop="keyword">
</el-table-column>
<el-table-column align="center" min-width="100px" label="关键字" prop="keyword"/>
<el-table-column align="center" min-width="100px" label="添加时间" prop="addTime">
</el-table-column>
<el-table-column align="center" min-width="100px" label="添加时间" prop="addTime"/>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</template>
<script>
import { listHistory } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'History',
components: { Pagination },
data() {
return {
list: null,
......@@ -62,28 +54,22 @@ export default {
methods: {
getList() {
this.listLoading = true
listHistory(this.listQuery).then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
listHistory(this.listQuery)
.then(response => {
this.list = response.data.data.items
this.total = response.data.data.total
this.listLoading = false
})
.catch(() => {
this.list = []
this.total = 0
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
......
<template>
<div class="app-container calendar-list-container">
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户名" v-model="listQuery.username">
</el-input>
<el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入手机号" v-model="listQuery.mobile">
</el-input>
<el-input v-model="listQuery.username" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户名"/>
<el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入手机号"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
</div>
<!-- 查询结果 -->
<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>
<el-table v-loading="listLoading" :data="list" size="small" 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="username">
</el-table-column>
<el-table-column align="center" label="用户名" prop="username"/>
<el-table-column align="center" label="手机号码" prop="mobile"/>
<el-table-column align="center" label="手机号码" prop="mobile">
</el-table-column>
<el-table-column align="center" label="性别" prop="gender">
<template slot-scope="scope">
<el-tag >{{genderDic[scope.row.gender]}}</el-tag>
<el-tag >{{ genderDic[scope.row.gender] }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="生日" prop="birthday">
</el-table-column>
<el-table-column align="center" label="生日" prop="birthday"/>
<el-table-column align="center" label="用户等级" prop="userLevel">
<template slot-scope="scope">
<el-tag >{{levelDic[scope.row.userLevel]}}</el-tag>
<el-tag >{{ levelDic[scope.row.userLevel] }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="状态" prop="status">
<template slot-scope="scope">
<el-tag>{{statusDic[scope.row.status]}}</el-tag>
<el-tag>{{ statusDic[scope.row.status] }}</el-tag>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="操作" 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>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<!-- 添加或修改对话框 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
<el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="用户名" prop="username">
<el-input v-model="dataForm.username"></el-input>
<el-input v-model="dataForm.username"/>
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="dataForm.mobile"></el-input>
<el-input v-model="dataForm.mobile"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="dataForm.password" auto-complete="off"></el-input>
</el-form-item>
<el-input v-model="dataForm.password" type="password" auto-complete="off"/>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-select v-model="dataForm.gender">
<el-option label="未知" :value="0">
</el-option>
<el-option label="男" :value="1">
</el-option>
<el-option label="女" :value="2">
</el-option>
<el-option :value="0" label="未知"/>
<el-option :value="1" label="男"/>
<el-option :value="2" label="女"/>
</el-select>
</el-form-item>
<el-form-item label="生日" prop="birthday">
<el-date-picker v-model="dataForm.birthday" type="date" value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker v-model="dataForm.birthday" type="date" value-format="yyyy-MM-dd"/>
</el-form-item>
<el-form-item label="用户等级" prop="userLevel">
<el-select v-model="dataForm.userLevel">
<el-option label="普通用户" :value="0">
</el-option>
<el-option label="VIP用户" :value="1">
</el-option>
<el-option label="高级VIP用户" :value="2">
</el-option>
<el-option :value="0" label="普通用户"/>
<el-option :value="1" label="VIP用户"/>
<el-option :value="2" label="高级VIP用户"/>
</el-select>
</el-form-item>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="dataForm.status">
<el-option label="可用" :value="0">
</el-option>
<el-option label="禁用" :value="1">
</el-option>
<el-option label="注销" :value="2">
</el-option>
<el-option :value="0" label="可用"/>
<el-option :value="1" label="禁用"/>
<el-option :value="2" label="注销"/>
</el-select>
</el-form-item>
</el-form>
......@@ -118,9 +97,11 @@
<script>
import { fetchList, createUser, updateUser } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
name: 'User',
components: { Pagination },
data() {
return {
list: null,
......@@ -181,14 +162,6 @@ export default {
this.listQuery.page = 1
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
resetForm() {
this.dataForm = {
id: undefined,
......
Supports Markdown
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