1.新增单位,规格
This commit is contained in:
123
src/api/shop.js
123
src/api/shop.js
@@ -45,4 +45,125 @@ export function tbShopCurrencyPut(data) {
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增单位
|
||||
* @returns
|
||||
*/
|
||||
export function tbShopUnitPost(data) {
|
||||
return request({
|
||||
url: `/api/tbShopUnit`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 更改单位
|
||||
* @returns
|
||||
*/
|
||||
export function tbShopUnitPut(data) {
|
||||
return request({
|
||||
url: `/api/tbShopUnit`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除单位
|
||||
* @returns
|
||||
*/
|
||||
export function tbShopUnitDelete(data) {
|
||||
return request({
|
||||
url: `/api/tbShopUnit`,
|
||||
method: 'delete',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 店铺基本配置
|
||||
* @returns
|
||||
*/
|
||||
export function tbShopCurrencyGet(params) {
|
||||
return request({
|
||||
url: `/api/tbShopUnit`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 商品分类列表
|
||||
* @returns
|
||||
*/
|
||||
export function tbShopCategoryGet(params) {
|
||||
return request({
|
||||
url: `/api/tbShopCategory`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增分类/新增子分类
|
||||
* @returns
|
||||
*/
|
||||
export function tbShopCategoryPost(data) {
|
||||
return request({
|
||||
url: `/api/tbShopCategory`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除商品分类
|
||||
* @returns
|
||||
*/
|
||||
export function tbShopCategoryDelete(data) {
|
||||
return request({
|
||||
url: `/api/tbShopCategory`,
|
||||
method: 'delete',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 规格增加
|
||||
* @returns
|
||||
*/
|
||||
export function tbProductSpecPost(data) {
|
||||
return request({
|
||||
url: `/api/tbProductSpec`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 规格列表
|
||||
* @returns
|
||||
*/
|
||||
export function tbProductSpecGet(params) {
|
||||
return request({
|
||||
url: `/api/tbProductSpec`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 规格更改
|
||||
* @returns
|
||||
*/
|
||||
export function tbProductSpecPut(data) {
|
||||
return request({
|
||||
url: `/api/tbProductSpec`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
70
src/components/uploadImg/index.vue
Normal file
70
src/components/uploadImg/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="upload" :action="qiNiuUploadApi" :headers="headers" :file-list="fileList" :limit="limit"
|
||||
list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="handleSuccess"
|
||||
:on-error="handleError" :on-exceed="onExceed" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :z-index="99">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'qiNiuUploadApi'
|
||||
])
|
||||
},
|
||||
props: {
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
fileList: [],
|
||||
files: [],
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSuccess(response, file, fileList) {
|
||||
// console.log('上传成功', response)
|
||||
this.files = response.data
|
||||
this.$emit('success', response.data)
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
onExceed() {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: `最多上传${this.limit}张图片`
|
||||
})
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
// console.log(file, fileList);
|
||||
this.$emit('remove')
|
||||
},
|
||||
clearFiles() {
|
||||
this.$refs.upload.clearFiles()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -20,13 +20,15 @@
|
||||
<el-select v-model="form.unit" placeholder="请选择单位" style="width: 500px;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" plain icon="el-icon-plus">添加单位</el-button>
|
||||
<el-button type="primary" plain icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button>
|
||||
<addUnit ref="addUnitRef" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="classify">
|
||||
<el-select v-model="form.unit" placeholder="请选择商品分类" style="width: 500px;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" plain icon="el-icon-plus">添加分类</el-button>
|
||||
<el-button type="primary" plain icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
|
||||
<addClassify ref="addClassifyRef" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -34,7 +36,13 @@
|
||||
|
||||
<script>
|
||||
import { tbShopUnit } from "@/api/shop";
|
||||
import addUnit from './components/addUnit'
|
||||
import addClassify from './components/addClassify'
|
||||
export default {
|
||||
components: {
|
||||
addUnit,
|
||||
addClassify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shopTypesActive: 0,
|
||||
|
||||
126
src/views/product/category.vue
Normal file
126
src/views/product/category.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
|
||||
<addClassify ref="addClassifyRef" @success="getTableData" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading" row-key="id"
|
||||
:tree-props="{ children: 'childrenList' }">
|
||||
<el-table-column label="排序" prop="sort" sortable></el-table-column>
|
||||
<el-table-column label="分类图片">
|
||||
<template v-slot="scope">
|
||||
<el-image :src="scope.row.pic" style="width: 40px;height: 40px;border-radius: 4px;">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="颜色">
|
||||
<template v-slot="scope">
|
||||
<div
|
||||
:style="{ width: '20px', height: '20px', borderRadius: '50%', backgroundColor: scope.row.style || '#efefef' }">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分类名称" prop="name"></el-table-column>
|
||||
<el-table-column label="操作" width="300">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="mini" round icon="el-icon-plus"
|
||||
@click="$refs.addClassifyRef.show({ pid: scope.row.id })"
|
||||
v-if="!scope.row.pid">添加子分类</el-button>
|
||||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||||
@click="$refs.addClassifyRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||||
<el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
|
||||
删除
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addClassify from './components/addClassify'
|
||||
import { tbShopCategoryGet, tbShopCategoryDelete } from '@/api/shop'
|
||||
export default {
|
||||
components: {
|
||||
addClassify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 添加子分类
|
||||
addChildGatgory(row) {
|
||||
|
||||
},
|
||||
// 查询table
|
||||
toQuery() {
|
||||
this.getTableData()
|
||||
},// 重置查询
|
||||
resetHandle() {
|
||||
this.tableData.page = 0;
|
||||
this.query.blurry = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData()
|
||||
},
|
||||
// 删除
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
const res = await tbShopCategoryDelete(ids)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `删除成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopCategoryGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: 'id',
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
126
src/views/product/components/addClassify.vue
Normal file
126
src/views/product/components/addClassify.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<el-dialog title="添加分类" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<!-- <el-form-item label="层级">
|
||||
<el-select v-model="form.index">
|
||||
<el-option label="顶级" :value="1"></el-option>
|
||||
<el-option label="饮品" :value="2"></el-option>
|
||||
<el-option label="烤串" :value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类图片">
|
||||
<uploadImg ref="uploadImg" @success="res => form.pic = res[0]" @remove="form.pic = ''" />
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色标识">
|
||||
<el-color-picker v-model="form.style"></el-color-picker>
|
||||
<div style="color: #999;">
|
||||
标识色用在无图模式时的商品点单按钮显示，可以更有效的从视觉.上进行商品分组。
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="开关">
|
||||
<el-switch v-model="form.isShow" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImg from '@/components/uploadImg'
|
||||
import { tbShopCategoryPost } from '@/api/shop'
|
||||
export default {
|
||||
components: {
|
||||
uploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
id: '',
|
||||
pid: '',
|
||||
isShow: 1,
|
||||
name: '',
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
sort: 0,
|
||||
style: '#000000',
|
||||
pic: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmitHandle() {
|
||||
console.log(this.form)
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
let res = await tbShopCategoryPost(this.form)
|
||||
this.$emit('success', res)
|
||||
this.close()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.pid ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
show(obj) {
|
||||
// console.log(obj)
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.pid) {
|
||||
this.form.pid = obj.pid
|
||||
}
|
||||
if (obj && obj.id) {
|
||||
this.form.id = obj.id
|
||||
this.form.isShow = obj.isShow
|
||||
this.form.name = obj.name
|
||||
this.form.sort = obj.sort
|
||||
this.form.style = obj.style
|
||||
this.form.pic = obj.pic
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.uploadImg.fileList = [
|
||||
{
|
||||
url: obj.pic
|
||||
}
|
||||
]
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form.pid = ''
|
||||
this.form.isShow = 1
|
||||
this.form.name = ''
|
||||
this.form.sort = 0
|
||||
this.form.style = '#000000'
|
||||
this.form.pic = ''
|
||||
|
||||
this.$refs.uploadImg.clearFiles()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
203
src/views/product/components/addSpecification.vue
Normal file
203
src/views/product/components/addSpecification.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<el-dialog title="添加模板" width="840px" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="模板名称，如：衣服"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="item.name" v-for="(item, index) in form.specList" :key="index">
|
||||
<div class="tag_wrap">
|
||||
<el-tag v-for="(val, i) in item.value" :key="i" closable size="medium" :disable-transitions="true"
|
||||
@close="handleClose(index, i)">
|
||||
{{ val }}
|
||||
</el-tag>
|
||||
<el-input class="input-new-tag" v-show="item.inputVisible" v-model="item.inputValue" ref="saveTagInput"
|
||||
size="small" placeholder="请输入规格值，回车添加" @keyup.enter.native="handleInputConfirm(index)"
|
||||
@blur="handleInputConfirm(index)">
|
||||
</el-input>
|
||||
<el-button v-show="!item.inputVisible" size="mini" icon="el-icon-plus" plain @click="showInput(index)">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button size="mini" icon="el-icon-delete" plain @click="deleteTag(index)">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form ref="skuForm" :model="skuForm" :rules="skuRules" label-width="80px" label-position="left">
|
||||
<el-row :gutter="20" v-if="showSkuForm">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="规格" prop="skuValidate1">
|
||||
<el-input v-model="skuForm.label" placeholder="规格，如：尺码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="规格值" prop="skuValidate2">
|
||||
<el-input v-model="skuForm.value" placeholder="规格值，如：S、M"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="primary" @click="addSkuSubmit">添加</el-button>
|
||||
<el-button @click="showSkuForm = false">取消</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item v-if="!showSkuForm">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="showSkuForm = true">添加规格</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbProductSpecPost, tbProductSpecPut } from '@/api/shop'
|
||||
export default {
|
||||
data() {
|
||||
const validateSku1 = (rule, value, callback) => {
|
||||
if (!this.skuForm.label) {
|
||||
callback(new Error(' '))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validateSku2 = (rule, value, callback) => {
|
||||
if (!this.skuForm.value) {
|
||||
callback(new Error(' '))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
dialogVisible: false,
|
||||
showSkuForm: true,
|
||||
skuForm: {
|
||||
label: '',
|
||||
value: ''
|
||||
},
|
||||
skuRules: {
|
||||
skuValidate1: {
|
||||
required: true,
|
||||
validator: validateSku1,
|
||||
trigger: 'blur'
|
||||
},
|
||||
skuValidate2: {
|
||||
required: true,
|
||||
validator: validateSku2,
|
||||
trigger: 'blur'
|
||||
}
|
||||
},
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
specList: []
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmitHandle() {
|
||||
console.log(this.form)
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
let res = null
|
||||
if (!this.form.id) {
|
||||
res = await tbProductSpecPost(this.form)
|
||||
} else {
|
||||
res = await tbProductSpecPut(this.form)
|
||||
}
|
||||
this.$emit('success', res)
|
||||
this.close()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.pid ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
show(obj) {
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.id) {
|
||||
const newObj = JSON.parse(JSON.stringify(obj));
|
||||
this.form.id = newObj.id
|
||||
this.form.name = newObj.name
|
||||
const specList = newObj.specList
|
||||
for (let item of specList) {
|
||||
item.inputVisible = false
|
||||
item.inputValue = ''
|
||||
}
|
||||
this.form.specList = specList
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form.id = ''
|
||||
this.form.name = ''
|
||||
this.form.specList = []
|
||||
},
|
||||
// sku from
|
||||
addSkuSubmit() {
|
||||
this.$refs.skuForm.validate(async valid => {
|
||||
if (valid) {
|
||||
this.form.specList.push({
|
||||
name: this.skuForm.label,
|
||||
value: [this.skuForm.value],
|
||||
inputVisible: false,
|
||||
inputValue: ''
|
||||
})
|
||||
this.skuForm.label = ''
|
||||
this.skuForm.value = ''
|
||||
this.showSkuForm = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose(index, i) {
|
||||
this.form.specList[index].value.splice(i, 1);
|
||||
},
|
||||
showInput(index) {
|
||||
this.form.specList[index].inputVisible = true;
|
||||
},
|
||||
handleInputConfirm(index) {
|
||||
let inputValue = this.form.specList[index].inputValue;
|
||||
if (inputValue) {
|
||||
this.form.specList[index].value.push(inputValue);
|
||||
}
|
||||
this.form.specList[index].inputVisible = false;
|
||||
this.form.specList[index].inputValue = '';
|
||||
},
|
||||
// 删除已添加的规格
|
||||
deleteTag(index) {
|
||||
this.form.specList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tag_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-new-tag {
|
||||
width: 180px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
86
src/views/product/components/addUnit.vue
Normal file
86
src/views/product/components/addUnit.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-dialog title="添加单位" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120" label-position="left">
|
||||
<el-form-item label="单位名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="单位名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="formLoading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbShopUnitPost, tbShopUnitPut } from '@/api/shop'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formLoading: false,
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
sort: 0,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.formLoading = true
|
||||
let res = null
|
||||
if (!this.form.id) {
|
||||
res = await tbShopUnitPost(this.form)
|
||||
} else {
|
||||
res = await tbShopUnitPut(this.form)
|
||||
}
|
||||
this.close()
|
||||
this.formLoading = false
|
||||
this.$emit('success', res)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
this.formLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
show(obj) {
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.id) {
|
||||
// 编辑
|
||||
this.form.name = obj.name
|
||||
this.form.id = obj.id
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form.id = ''
|
||||
this.form.name = ''
|
||||
this.form.sort = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -4,7 +4,7 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
|
||||
class="filter-item" @keyup.enter.native="toQuery" />
|
||||
class="filter-item" @keyup.enter.native="getTableData" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select v-model="query.class" placeholder="请选择商品分类" style="width: 100%;">
|
||||
@@ -19,7 +19,7 @@
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" @click="toQuery">查询</el-button>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -94,26 +94,23 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tbProduct()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 查询
|
||||
toQuery() {
|
||||
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.blurry = ''
|
||||
this.query.class = ''
|
||||
this.query.sku = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e
|
||||
this.tbProduct()
|
||||
this.getTableData()
|
||||
},
|
||||
// 获取商品列表
|
||||
async tbProduct() {
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbProduct({
|
||||
|
||||
105
src/views/product/specification.vue
Normal file
105
src/views/product/specification.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入模板名称" style="width: 100%;"
|
||||
class="filter-item" @keyup.enter.native="getTableData" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addSpecificationRef.show()">添加规格</el-button>
|
||||
<addSpecification ref="addSpecificationRef" @success="getTableData" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="模板名称" prop="name"></el-table-column>
|
||||
<el-table-column label="规格详情">
|
||||
<template v-slot="scope">
|
||||
<el-row v-for="(item, index) in scope.row.specList" :key="index">
|
||||
<span>{{ item.name }}：</span>
|
||||
<span>{{ item.value.join('、') }}</span>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" sortable></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||||
@click="$refs.addSpecificationRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||||
<el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
|
||||
删除
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addSpecification from './components/addSpecification'
|
||||
import { tbProductSpecGet } from '@/api/shop'
|
||||
export default {
|
||||
components: {
|
||||
addSpecification
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
blurry: '',
|
||||
},
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.blurry = ''
|
||||
this.tableData.page = 0;
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e
|
||||
this.getTableData()
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbProductSpecGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: 'id',
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
112
src/views/product/unit.vue
Normal file
112
src/views/product/unit.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入单位名称" style="width: 100%;"
|
||||
class="filter-item" @keyup.enter.native="toQuery" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" @click="toQuery">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button>
|
||||
<addUnit ref="addUnitRef" @success="getTableData()" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="单位名称" prop="name"></el-table-column>
|
||||
<el-table-column label="排序" prop="id" sortable></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||||
@click="$refs.addUnitRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||||
<el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbShopCurrencyGet, tbShopUnitDelete } from '@/api/shop'
|
||||
import addUnit from './components/addUnit'
|
||||
export default {
|
||||
components: {
|
||||
addUnit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
blurry: ''
|
||||
},
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 查询table
|
||||
toQuery() {
|
||||
this.getTableData()
|
||||
},// 重置查询
|
||||
resetHandle() {
|
||||
this.tableData.page = 0;
|
||||
this.query.blurry = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData()
|
||||
},
|
||||
// 删除
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
await tbShopUnitDelete(ids)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `删除成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopCurrencyGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: 'id',
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
name: this.query.blurry
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -10,8 +10,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopInfo from './components/shopInfo.vue'
|
||||
import shopSetting from './components/shopSetting.vue'
|
||||
import shopInfo from './components/shopInfo'
|
||||
import shopSetting from './components/shopSetting'
|
||||
export default {
|
||||
components: {
|
||||
shopInfo,
|
||||
|
||||
Reference in New Issue
Block a user