商品添加 事情完成进度 steps checkbox 图片上传
This commit is contained in:
parent
34b3d8e1d4
commit
084b60b15d
|
|
@ -19,4 +19,10 @@ html,body,#app{
|
||||||
}
|
}
|
||||||
.el-pagination {
|
.el-pagination {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.el-steps{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.el-step__title{
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
210
src/components/goods/edit.vue
Normal file
210
src/components/goods/edit.vue
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
<template>
|
||||||
|
<div class="goods-add">
|
||||||
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>添加商品</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
<el-card>
|
||||||
|
<el-alert
|
||||||
|
title="添加商品信息"
|
||||||
|
type="info" center show-icon :closable="false">
|
||||||
|
</el-alert>
|
||||||
|
|
||||||
|
<el-steps :active="active - 0" align-center finish-status="process">
|
||||||
|
<el-step title="基本信息"></el-step>
|
||||||
|
<el-step title="商品参数"></el-step>
|
||||||
|
<el-step title="商品属性"></el-step>
|
||||||
|
<el-step title="商品图片"></el-step>
|
||||||
|
<el-step title="商品内容"></el-step>
|
||||||
|
<el-step title="商品完成"></el-step>
|
||||||
|
</el-steps>
|
||||||
|
|
||||||
|
<el-form ref="form" :model="form" label-width="100px" :rules="rules" label-position="top">
|
||||||
|
<el-tabs tab-position="left" v-model="active" :before-leave="tabSwitch" @tab-click="tabClick">
|
||||||
|
<el-tab-pane label="基本信息" name="0">
|
||||||
|
<el-form-item label="商品名称" prop="goods_name">
|
||||||
|
<el-input v-model="form.goods_name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品价格" prop="goods_price">
|
||||||
|
<el-input type="number" v-model="form.goods_price"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品重量" prop="goods_weight">
|
||||||
|
<el-input v-model="form.goods_weight" type="number"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品数量" prop="goods_number">
|
||||||
|
<el-input type="number" v-model="form.goods_number"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="商品分类" prop="goods_cat">
|
||||||
|
|
||||||
|
<el-cascader
|
||||||
|
:options="category" :props="selectedOptions"
|
||||||
|
v-model="selectKey"
|
||||||
|
@change="handleChange"></el-cascader>
|
||||||
|
</el-form-item>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="商品参数" name="1">
|
||||||
|
|
||||||
|
<el-form-item :key="item.attr_id" v-for="item in many" :label="item.attr_name">
|
||||||
|
<el-checkbox-group @change="change" v-model="item.attr_vals">
|
||||||
|
<el-checkbox border v-for="(v,i) in item.attr_vals" :key="i" :label="v"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane name="2" label="商品属性">
|
||||||
|
<el-form-item :key="item.attr_id" v-for="item in only" :label="item.attr_name">
|
||||||
|
<el-checkbox-group v-model="item.attr_vals">
|
||||||
|
<el-checkbox border v-for="(v,i) in item.attr_vals" :key="i" :label="v"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane name="3"
|
||||||
|
label="商品图片">
|
||||||
|
|
||||||
|
<el-upload
|
||||||
|
:headers="headers"
|
||||||
|
:action="uploadUrl"
|
||||||
|
:on-preview="handlePreview"
|
||||||
|
:on-remove="handleRemove"
|
||||||
|
:on-success="uploadSuccess"
|
||||||
|
list-type="picture">
|
||||||
|
<el-button size="small" type="primary">点击上传</el-button>
|
||||||
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||||
|
</el-upload>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane name="4" label="商品内容">商品内容</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
title="预览"
|
||||||
|
:visible.sync="picVisible"
|
||||||
|
width="50%"
|
||||||
|
>
|
||||||
|
<img class="preview-pic" :src="imageUrl" alt="">
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'add',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
active: '0',
|
||||||
|
form: {
|
||||||
|
goods_name: '',
|
||||||
|
goods_price: 0,
|
||||||
|
goods_weight: 0,
|
||||||
|
goods_number: 0,
|
||||||
|
goods_cat: '',
|
||||||
|
pics: []
|
||||||
|
},
|
||||||
|
selectedOptions: {
|
||||||
|
label: 'cat_name',
|
||||||
|
value: 'cat_id',
|
||||||
|
children: 'children',
|
||||||
|
expandTrigger: 'hover'
|
||||||
|
},
|
||||||
|
uploadUrl: 'http://127.0.0.1:8888/api/private/v1/upload',
|
||||||
|
many: [],
|
||||||
|
only: [],
|
||||||
|
headers: {
|
||||||
|
Authorization: window.sessionStorage.getItem('token')
|
||||||
|
},
|
||||||
|
selectKey: [],
|
||||||
|
category: [],
|
||||||
|
imageUrl: '',
|
||||||
|
picVisible: false,
|
||||||
|
rules: {
|
||||||
|
goods_name: [
|
||||||
|
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
goods_price: [
|
||||||
|
{ required: true, message: '请输入价格', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
goods_weight: [
|
||||||
|
{ required: true, message: '请输入重量', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
goods_number: [
|
||||||
|
{ required: true, message: '请输入数量', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
goods_cat: [
|
||||||
|
{
|
||||||
|
required: true, message: '请选择商品分类'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
uploadSuccess (response) {
|
||||||
|
if (response.meta.status !== 200) {
|
||||||
|
return this.$message.error(response.meta.msg)
|
||||||
|
}
|
||||||
|
this.form.pics.push({
|
||||||
|
pic: response.data.tmp_path
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleRemove (file) {
|
||||||
|
const path = file.response.data.tmp_path
|
||||||
|
this.form.pics.splice(this.form.pics.indexOf(path), 1)
|
||||||
|
},
|
||||||
|
handlePreview (file) {
|
||||||
|
this.imageUrl = file.response.data.url
|
||||||
|
this.picVisible = true
|
||||||
|
},
|
||||||
|
async threeCategories (type) {
|
||||||
|
const { data: res } = await this.$http.get(`categories/${this.selectKey[2]}/attributes`, {
|
||||||
|
params: {
|
||||||
|
sel: type
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this[type] = res.data
|
||||||
|
this[type].forEach(item => {
|
||||||
|
item.attr_vals = item.attr_vals.length > 0 ? item.attr_vals.split(' ') : []
|
||||||
|
})
|
||||||
|
},
|
||||||
|
tabClick () {
|
||||||
|
if (this.active === '1') {
|
||||||
|
this.threeCategories('many')
|
||||||
|
} else if (this.active === '2') {
|
||||||
|
this.threeCategories('only')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tabSwitch (dist, source) {
|
||||||
|
if (source === '0') {
|
||||||
|
if (this.selectKey.length !== 3) {
|
||||||
|
this.$message.error('请先选择分类')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleChange () {
|
||||||
|
if (this.selectKey.length !== 3) {
|
||||||
|
this.selectKey = []
|
||||||
|
} else {
|
||||||
|
this.form.goods_cat = this.selectKey.join(',')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async categories () {
|
||||||
|
const { data: res } = await this.$http.get('categories')
|
||||||
|
this.category = res.data
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.categories()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.el-checkbox{
|
||||||
|
margin: 0 5px 0 0;
|
||||||
|
}
|
||||||
|
.preview-pic{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,12 +1,124 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="goods">
|
<div class="goods">
|
||||||
<pre v-text="$attrs"/>
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-input class="input-with-select" v-model="query.query" placeholder="请输入内容" clearable>
|
||||||
|
<el-button slot="append" icon="el-icon-search" @click="list"></el-button>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-button @click="edit" type="primary">添加商品</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="data" border stripe
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
label="#">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="goods_name"
|
||||||
|
label="商品内容"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="goods_price"
|
||||||
|
label="商品价格（元）" width="100">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="goods_weight"
|
||||||
|
label="商品重量（g）" width="100">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="add_time"
|
||||||
|
label="商品创建时间" width="150">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{scope.row.add_time*1000 | dataFormat}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button @click="edit(scope.row)" size="mini" icon="el-icon-edit" type="primary"></el-button>
|
||||||
|
<el-button size="mini" icon="el-icon-delete" @click="del(scope.row.goods_id)" type="danger"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="query.pagenum"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
:page-size="query.pagesize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper" background
|
||||||
|
:total="total">
|
||||||
|
</el-pagination>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
data: [],
|
||||||
|
query: {
|
||||||
|
query: '',
|
||||||
|
pagenum: 1,
|
||||||
|
pagesize: 10
|
||||||
|
},
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
edit () {
|
||||||
|
this.$router.push('/goods/add')
|
||||||
|
},
|
||||||
|
del (id) {
|
||||||
|
this.$confirm('确定删除么？').then(_ => {
|
||||||
|
this.$http.delete('goods/' + id).then(response => {
|
||||||
|
const res = response.data
|
||||||
|
if (res.meta.status !== 200) {
|
||||||
|
return this.$message.error(res.meta.msg)
|
||||||
|
}
|
||||||
|
this.$message.success(res.meta.msg)
|
||||||
|
this.list()
|
||||||
|
})
|
||||||
|
}).catch(error => error)
|
||||||
|
},
|
||||||
|
handleSizeChange (val) {
|
||||||
|
this.query.pagesize = val
|
||||||
|
this.list()
|
||||||
|
},
|
||||||
|
handleCurrentChange (val) {
|
||||||
|
this.query.pagenum = val
|
||||||
|
this.list()
|
||||||
|
},
|
||||||
|
async list () {
|
||||||
|
const { data: res } = await this.$http.get('goods', {
|
||||||
|
params: this.query
|
||||||
|
})
|
||||||
|
this.data = res.data.goods
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.list()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
13
src/main.js
13
src/main.js
|
|
@ -10,10 +10,23 @@ import axios from 'axios'
|
||||||
|
|
||||||
Vue.component('table-tree', tableTree)
|
Vue.component('table-tree', tableTree)
|
||||||
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
|
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
|
||||||
|
// 为每个请求头挂一个 token
|
||||||
axios.interceptors.request.use(config => {
|
axios.interceptors.request.use(config => {
|
||||||
config.headers.Authorization = sessionStorage.getItem('token')
|
config.headers.Authorization = sessionStorage.getItem('token')
|
||||||
return config
|
return config
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Vue.filter('dataFormat', (time) => {
|
||||||
|
const dt = (new Date(time))
|
||||||
|
const y = dt.getFullYear()
|
||||||
|
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
|
||||||
|
const d = (dt.getDate() + '').padStart(2, '0')
|
||||||
|
const H = dt.getHours().toString().padStart(2, '0')
|
||||||
|
const i = dt.getMinutes().toString().padStart(2, '0')
|
||||||
|
const s = dt.getSeconds().toString().padStart(2, '0')
|
||||||
|
return `${y}-${m}-${d} ${H}:${i}:${s}`
|
||||||
|
})
|
||||||
|
|
||||||
Vue.prototype.$http = axios
|
Vue.prototype.$http = axios
|
||||||
Vue.use(ElementUI)
|
Vue.use(ElementUI)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,8 @@ import access from '../components/access/access'
|
||||||
import roles from '../components/access/roles'
|
import roles from '../components/access/roles'
|
||||||
import categories from '../components/goods/categories'
|
import categories from '../components/goods/categories'
|
||||||
import params from '../components/goods/params'
|
import params from '../components/goods/params'
|
||||||
|
import goods from '../components/goods/goods'
|
||||||
|
import goodsEdit from '../components/goods/edit'
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
|
@ -24,7 +26,9 @@ const routes = [
|
||||||
{ path: '/rights', component: access },
|
{ path: '/rights', component: access },
|
||||||
{ path: '/roles', component: roles },
|
{ path: '/roles', component: roles },
|
||||||
{ path: '/categories', component: categories },
|
{ path: '/categories', component: categories },
|
||||||
{ path: '/params', component: params }
|
{ path: '/params', component: params },
|
||||||
|
{ path: '/goods', component: goods },
|
||||||
|
{ path: '/goods/add', component: goodsEdit }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user