zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完成商城模块商品分类管理

This commit is contained in:
gooking 2018-05-26 15:19:48 +08:00
parent b0a3c24c07
commit d2dd65d566
9 changed files with 362 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config/dev.env.js
View File

@ -4,4 +4,5 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:8082"',
})

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>api工厂独立后台</title>
<title>vip用户独立后台</title>
<script src="./static/aliyun-upload-sdk-1.3.1/es6-promise.min.js"></script>
<script src="./static/aliyun-upload-sdk-1.3.1/aliyun-oss-sdk4.13.2.min.js"></script>
<script src="./static/aliyun-upload-sdk-1.3.1/aliyun-upload-sdk1.3.1.min.js"></script>

25
src/api/apiExtShopGoodsCategory.js Normal file
View File

@ -0,0 +1,25 @@
import request from '@/utils/request'
export function fetchDataList() {
return request({
url: '/user/apiExtShopGoodsCategory/list',
method: 'post',
data: {}
})
}
export function delData(id) {
return request({
url: '/user/apiExtShopGoodsCategory/del',
method: 'post',
data: { id }
})
}
export function saveData(data) {
return request({
url: '/user/apiExtShopGoodsCategory/save',
method: 'post',
data: { ...data }
})
}

1
src/icons/svg/category.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1527285754479" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2739" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M320 512 192 512c-70.4 0-128 57.6-128 128l0 128c0 70.4 57.6 128 128 128l128 0c70.4 0 128-57.6 128-128l0-128C448 569.6 390.4 512 320 512zM384 768c0 35.2-28.8 64-64 64L192 832c-35.2 0-64-28.8-64-64l0-128c0-35.2 28.8-64 64-64l128 0c35.2 0 64 28.8 64 64L384 768zM768 64l-128 0C569.6 64 512 121.6 512 192l0 128c0 70.4 57.6 128 128 128l128 0c70.4 0 128-57.6 128-128L896 192C896 121.6 838.4 64 768 64zM832 320c0 35.2-28.8 64-64 64l-128 0C604.8 384 576 355.2 576 320L576 192c0-35.2 28.8-64 64-64l128 0c35.2 0 64 28.8 64 64L832 320zM768 512l-128 0c-70.4 0-128 57.6-128 128l0 128c0 70.4 57.6 128 128 128l128 0c70.4 0 128-57.6 128-128l0-128C896 569.6 838.4 512 768 512zM832 768c0 35.2-28.8 64-64 64l-128 0c-35.2 0-64-28.8-64-64l0-128c0-35.2 28.8-64 64-64l128 0c35.2 0 64 28.8 64 64L832 768zM320 64 192 64C121.6 64 64 121.6 64 192l0 128c0 70.4 57.6 128 128 128l128 0c70.4 0 128-57.6 128-128L448 192C448 121.6 390.4 64 320 64zM384 320c0 35.2-28.8 64-64 64L192 384C156.8 384 128 355.2 128 320L128 192c0-35.2 28.8-64 64-64l128 0c35.2 0 64 28.8 64 64L384 320z" p-id="2740"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/icons/svg/shopping.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1527285442202" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2007" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M895.955742 187.552583c-11.351536-3.515057-23.765263-4.945639-35.7052-4.995781-94.78476-0.387833-189.56952-0.214894-284.35735-0.214894-96.326882 0-192.649672 0-288.972461-0.011256-2.495844 0-5.002944-0.065492-7.494695 0.080841-15.774265 0.914836-27.860535 16.096607-25.25315 31.674397 0.354064 2.115174 0.896416 4.093225 1.582031 5.953595 12.873192 47.686069 25.738198 95.374184 38.614459 143.058207 10.510378 38.911218 20.947078 77.836763 31.556717 116.722398 2.877537 10.536984 10.509355 17.935488 19.87363 20.315698l-0.11461 0.556679c1.020236 0.001023 2.040473 0.00307 3.060709 0.005117 2.057869 0.281409 4.173043 0.352017 6.330172 0.144286 0.367367-0.035816 0.724501-0.085958 1.085728-0.13303 47.659463 0.071631 95.318926 0.150426 142.977365 0.217964 40.305985 0.054235 80.605829 0.184195 120.912837 0.135076 14.367219-0.019443 25.670659-9.387811 27.926026-22.623253 3.180436-18.646686-9.934257-32.946366-30.328749-32.972972-81.168648-0.106424-162.336272-0.206708-243.503896-0.312108-18.671245-69.110007-37.34556-138.217968-56.016805-207.327976 179.178869 0.005117 358.357737-0.002047 537.537629 0.045025 5.941316 0 11.882632 0.673335 17.827017 0.934279 3.418866 0.154519 4.941546 1.715061 4.291746 5.15337-1.034563 5.460362-1.723248 11.021008-3.187599 16.361643-25.237801 91.989087-50.693566 183.92087-75.79629 275.948843-6.302543 23.106254-11.582803 46.489824-17.242709 69.77004-3.257184 13.385868-14.666024 21.38403-30.955013 21.38403-145.736199 0.008186-291.476491 0.008186-437.21269 0.004093-1.533936 0-3.080152 0.041956-4.609994-0.065492-14.774495-1.034563-24.945135-10.594289-27.018354-25.217335-0.698918-4.930289-1.24127-9.940396-2.564405-14.71719-35.012422-126.32408-70.116941-252.621555-105.202017-378.923122-10.789741-38.83447-21.506826-77.68429-32.397874-116.492154-3.883447-13.83203-15.947204-22.198581-29.30135-20.810978-18.815531 1.953492-29.059849 18.430768-23.599488 38.081317 41.319058 148.681274 82.683141 297.347199 123.936707 446.047916 4.971222 17.923208 11.024078 35.765575 13.685697 54.066383 6.051833 41.62605 40.171931 73.469292 82.337263 73.52762 148.812257 0.199545 297.627584 0.176009 446.439842 0.011256 39.772842-0.041956 73.358775-28.233018 81.122599-67.205635 1.049912-5.26491 1.292436-10.725272 2.706645-15.873526 27.221991-99.207489 54.689576-198.345394 81.761142-297.593815 5.036713-18.469654 9.940396-37.162388 12.493545-56.07718C936.823522 219.199351 921.546583 195.47809 895.955742 187.552583z" p-id="2008"></path><path d="M369.680621 738.653113c-46.628994-2.63399-85.544305 33.066093-88.044242 80.771605-2.337231 44.62536 33.912367 83.645049 79.945797 86.055958 44.471864 2.322905 84.636632-33.761941 86.759993-77.95342C450.606745 780.410146 415.963737 741.267661 369.680621 738.653113zM365.012298 849.818959c-15.427364-0.046049-27.79402-12.56313-27.64871-27.979238 0.150426-15.407921 12.801561-27.90249 28.02938-27.66713 15.243169 0.23843 27.798113 13.169951 27.506471 28.332279C392.606773 837.571007 380.058992 849.860914 365.012298 849.818959z" p-id="2009"></path><path d="M699.106422 738.559992c-46.221718-0.096191-83.597977 37.235043-83.60207 83.495646 0 45.987381 37.184901 83.36057 83.071997 83.48746 46.124504 0.12689 83.60207-37.307697 83.609233-83.529415C782.193769 776.029372 744.989425 738.656183 699.106422 738.559992zM698.671517 849.818959c-15.130605-0.103354-27.501354-12.428054-27.616988-27.52489-0.119727-15.331173 12.366655-28.02938 27.655873-28.124548 15.262612-0.092098 27.836999 12.504802 27.832905 27.878954C726.539214 837.478909 714.049762 849.922313 698.671517 849.818959z" p-id="2010"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

42
src/router/index.js
View File

@ -92,25 +92,23 @@ export const constantRouterMap = [
},
{
path: '/example',
name: '商城管理',
path: '/user',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: 'Example', icon: 'example' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table', icon: 'table' }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
redirect: '/user/apiExtDfs/list',
meta: { title: '商城管理', icon: 'shopping' },
children: [{
name: '上传文件管理',
path: 'list',
component: () => import('@/views/apiExtDfs/list'),
meta: { title: '上传文件管理', icon: 'files' }
},
{
name: '商品分类',
path: 'apiExtShopGoodsCategory/list',
component: () => import('@/views/apiExtShopGoodsCategory/list'),
meta: { title: '商品分类', icon: 'category' }
}]
},
{
@ -123,13 +121,7 @@ export const constantRouterMap = [
name: 'Appid配置',
path: 'centerUserAliappKey/list',
component: () => import('@/views/centerUserAliappKey/list'),
meta: { title: 'Appid配置', icon: 'alipaySR' }
},
{
name: '首页',
path: 'index',
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'setting' }
meta: { title: '支付宝小程序', icon: 'alipaySR' }
}]
},

311
src/views/apiExtShopGoodsCategory/list.vue Normal file
View File

@ -0,0 +1,311 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-button class="filter-item" @click="handleCreate" type="success" icon="el-icon-edit">添加</el-button>
</div>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row empty-text="暂无数据" @selection-change="handleSelectionChange">
<el-table-column prop="id" label="ID" align="center" width="100%"></el-table-column>
<el-table-column label="分类名称">
<template slot-scope="scope">
<font v-for="lv in scope.row.level-1" :key="lv">&#8195;&#8195;&#8195;&#8195;&#8195;</font>
<font v-if="scope.row.level > 1">╚═══</font>
<font>{{scope.row.name}}</font>
</template>
</el-table-column>
<el-table-column prop="key" label="编号/类型" width="100%">
<template slot-scope="scope">
{{scope.row.key}} <br/> {{scope.row.type}}
</template>
</el-table-column>
<el-table-column label="图标" width="100%" align="center">
<template slot-scope="scope">
<img v-if="scope.row.icon" :src="scope.row.icon" style="width:70px;" />
<span v-if="!scope.row.icon">-</span>
</template>
</el-table-column>
<el-table-column label="状态" width="100%" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.isUse">启用</el-tag>
<el-tag type="danger" v-if="!scope.row.isUse">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="添加/修改时间" width="170px">
<template slot-scope="scope">
{{scope.row.dateAdd}} <br/> {{scope.row.dateUpdate}}
</template>
</el-table-column>
<el-table-column label="操作" width="100%">
<template slot-scope="scope">
<el-button type="text" @click="handleUpdate(scope.row.id)">编辑</el-button>
<el-button type="text" @click="delData(scope.row.id)" style="color:red">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="pushData.dialogTitle" :visible.sync="pushData.dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :rules="rules" ref="addEditPopForm" :model="pushData" label-position="left" label-width="100px">
<el-form-item label="名称" prop="name">
<el-input v-model.number="pushData.name" clearable @keyup.enter.native="handleCreateSave"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-col :span="4">
<el-form-item prop="type">
<el-input v-model.number="pushData.type" clearable @keyup.enter.native="handleCreateSave"></el-input>
</el-form-item>
</el-col>
<el-col :span="20">&nbsp;&nbsp;&nbsp;自定义类型，32个字符以内</el-col>
</el-form-item>
<el-form-item label="上级分类" prop="pid" >
<el-select clearable v-model="pushData.pid" placeholder="请选择">
<el-option label="顶级分类 " value="0">
<span>顶级分类</span>
</el-option>
<el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.id">
<span>
<span v-for="lv in item.level-1" :key="lv">&#8195;&#8195;&#8195;&#8195;&#8195;</span>
<span v-if="item.level > 1">╚═══</span>
{{item.name}}
</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="编号">
<el-col :span="4">
<el-form-item prop="key">
<el-input v-model.number="pushData.key" clearable @keyup.enter.native="handleCreateSave"></el-input>
</el-form-item>
</el-col>
<el-col :span="20">&nbsp;&nbsp;&nbsp;自定义编号，32个字符以内</el-col>
</el-form-item>
<el-form-item label="上传图标">
<el-upload
class="avatar-uploader"
:action="uploadUrl"
name="upfile"
:headers="uploadUrlHeaders"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="状态" prop="isUse" >
<el-select v-model="pushData.isUse" 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="pushData.dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleCreateSave">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { fetchDataList, delData, saveData } from '@/api/apiExtShopGoodsCategory'
import { Message, MessageBox } from 'element-ui'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
computed: {
...mapGetters([
'centerUserBase'
])
},
data() {
return {
imageUrl:undefined,
uploadUrl:process.env.BASE_API + '/fileUpload',
uploadUrlHeaders:{
"X-Token":getToken()
},
rules: {
name: [
{ required: true, message: '不能为空'}
],
isUse: [
{ required: true, message: '不能为空'}
]
},
pushData: {
dialogTitle : undefined,
dialogFormVisible:false,
id:undefined,
name:undefined,
type:undefined,
pid:undefined,
key:undefined,
icon:undefined,
isUse:undefined,
},
multipleSelection: [],
list: null,
listLoading: true,
statisticsData:{}
}
},
created() {
this.pushDataTmp = Object.assign({}, this.pushData)
this.fetchData()
},
mounted() {
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.pushData.icon = res.data.url;
},
beforeAvatarUpload(file) {
const isJPG = (file.type.indexOf('image/') != -1);
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isJPG) {
this.$message.error('上传头像图片只能是图片格式!');
}
if (!isLt1M) {
this.$message.error('上传头像图片大小不能超过 1MB!');
}
return isJPG && isLt1M;
},
handleSelectionChange(val) {
this.multipleSelection = val
},
fetchData() {
this.list = null
this.listLoading = true
fetchDataList().then(response => {
if (response.code == 0) {
this.list = response.data
}
this.listLoading = false
})
},
handleCreate(){
this.pushData = Object.assign({}, this.pushDataTmp)
this.pushData.dialogTitle = '增加分类'
this.pushData.dialogFormVisible = true
this.imageUrl = undefined
this.$nextTick(() => {
this.$refs['addEditPopForm'].clearValidate()
})
},
handleUpdate(id){
let updateObj = this.list.find(item => {
return item.id == id
})
this.pushData = Object.assign({}, this.pushDataTmp, updateObj, {isUse:'' + updateObj.isUse})
if (this.pushData.pid == 0) {
this.pushData.pid = '0'
}
this.pushData.dialogTitle = '修改分类'
this.imageUrl = undefined
if (updateObj.icon) {
this.imageUrl = new URL(updateObj.icon);
}
this.pushData.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['addEditPopForm'].clearValidate()
})
},
handleCreateSave(){
this.$refs['addEditPopForm'].validate((valid) => {
if (valid) {
saveData(this.pushData).then((res) => {
this.pushData.dialogFormVisible = false
if (res.code == 0) {
Message({
message: '操作成功',
type: 'success',
duration: 1 * 1000,
onClose: () => {
this.fetchData()
}
})
} else {
Message({
message: res.msg,
type: 'error',
duration: 3 * 1000
})
}
}).catch(e=>{
console.error(e);
})
}
})
},
statistics(){
statistics().then(res => {
// 弹框点击确定调整支付宝付款
this.statisticsData = res.data
})
},
delData(id){
this.$confirm('删除无法恢复, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delData(id).then(res => {
Message({
message: '删除成功',
type: 'success',
duration: 1 * 1000,
onClose: () => {
this.fetchData()
}
})
})
}).catch(() => {});
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

7
src/views/login/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<h3 class="title">api工厂独立后台(beta)</h3>
<h3 class="title">vip用户独立后台 (Beta) </h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
@ -32,9 +32,12 @@
<span style="margin-right:20px;">
<router-link to="/register">开通新后台</router-link>
</span>
<span>
<span style="margin-right:20px;">
<router-link to="/resetpwd">忘记密码?</router-link>
</span>
<span>
<a href="https://www.it120.cc/login" target="_blank" style="color:orange;">免费用户入口</a>
</span>
</div>
</el-form>
</div>

97
src/views/table/index.vue
View File

@ -1,97 +0,0 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
</el-input>
<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" :placeholder="$t('table.importance')">
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
</el-option>
</el-select>
<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" :placeholder="$t('table.type')">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
</el-option>
</el-select>
<el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="listQuery.sort">
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
</el-option>
</el-select>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">{{$t('table.export')}}</el-button>
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
</div>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column align="center" label='ID' width="95">
<template slot-scope="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column label="Title">
<template slot-scope="scope">
{{scope.row.title}}
</template>
</el-table-column>
<el-table-column label="Author" width="110" align="center">
<template slot-scope="scope">
<span>{{scope.row.author}}</span>
</template>
</el-table-column>
<el-table-column label="Pageviews" width="110" align="center">
<template slot-scope="scope">
{{scope.row.pageviews}}
</template>
</el-table-column>
<el-table-column class-name="status-col" label="Status" width="110" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="created_at" label="Display_time" width="200">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span>{{scope.row.display_time}}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getList } from '@/api/table'
export default {
data() {
return {
list: null,
listLoading: true
}
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
return statusMap[status]
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList(this.listQuery).then(response => {
this.list = response.data.items
this.listLoading = false
})
}
}
}
</script>