商品添加 事情完成进度 steps checkbox 图片上传
This commit is contained in:
parent
34b3d8e1d4
commit
084b60b15d
|
|
@ -20,3 +20,9 @@ html,body,#app{
|
|||
.el-pagination {
|
||||
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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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>
|
||||
|
|
|
|||
13
src/main.js
13
src/main.js
|
|
@ -10,10 +10,23 @@ import axios from 'axios'
|
|||
|
||||
Vue.component('table-tree', tableTree)
|
||||
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
|
||||
// 为每个请求头挂一个 token
|
||||
axios.interceptors.request.use(config => {
|
||||
config.headers.Authorization = sessionStorage.getItem('token')
|
||||
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.use(ElementUI)
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import access from '../components/access/access'
|
|||
import roles from '../components/access/roles'
|
||||
import categories from '../components/goods/categories'
|
||||
import params from '../components/goods/params'
|
||||
import goods from '../components/goods/goods'
|
||||
import goodsEdit from '../components/goods/edit'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
|
|
@ -24,7 +26,9 @@ const routes = [
|
|||
{ path: '/rights', component: access },
|
||||
{ path: '/roles', component: roles },
|
||||
{ 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