From 6e62895adb18407c4cf0a497830e733f81329245 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Wed, 10 Jan 2024 14:58:57 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=96=B0=E5=A2=9E=E5=8D=95=E4=BD=8D,?=
 =?UTF-8?q?=E8=A7=84=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/shop.js                               | 123 ++++++++++-
 src/components/uploadImg/index.vue            |  70 ++++++
 src/views/product/add_shop.vue                |  12 +-
 src/views/product/category.vue                | 126 +++++++++++
 src/views/product/components/addClassify.vue  | 126 +++++++++++
 .../product/components/addSpecification.vue   | 203 ++++++++++++++++++
 src/views/product/components/addUnit.vue      |  86 ++++++++
 src/views/product/index.vue                   |  15 +-
 src/views/product/specification.vue           | 105 +++++++++
 src/views/product/unit.vue                    | 112 ++++++++++
 src/views/shop/shop_configuration.vue         |   4 +-
 11 files changed, 968 insertions(+), 14 deletions(-)
 create mode 100644 src/components/uploadImg/index.vue
 create mode 100644 src/views/product/category.vue
 create mode 100644 src/views/product/components/addClassify.vue
 create mode 100644 src/views/product/components/addSpecification.vue
 create mode 100644 src/views/product/components/addUnit.vue
 create mode 100644 src/views/product/specification.vue
 create mode 100644 src/views/product/unit.vue

diff --git a/src/api/shop.js b/src/api/shop.js
index 4387f4f..8d76487 100644
--- a/src/api/shop.js
+++ b/src/api/shop.js
@@ -45,4 +45,125 @@ export function tbShopCurrencyPut(data) {
     method: 'put',
     data
   })
-}
\ No newline at end of file
+}
+
+/**
+ * 新增单位
+ * @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
+  })
+}
+
diff --git a/src/components/uploadImg/index.vue b/src/components/uploadImg/index.vue
new file mode 100644
index 0000000..303c60e
--- /dev/null
+++ b/src/components/uploadImg/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/product/add_shop.vue b/src/views/product/add_shop.vue
index 80285c4..d78e1ae 100644
--- a/src/views/product/add_shop.vue
+++ b/src/views/product/add_shop.vue
@@ -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,
diff --git a/src/views/product/category.vue b/src/views/product/category.vue
new file mode 100644
index 0000000..7dd0931
--- /dev/null
+++ b/src/views/product/category.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/product/components/addClassify.vue b/src/views/product/components/addClassify.vue
new file mode 100644
index 0000000..e0553b1
--- /dev/null
+++ b/src/views/product/components/addClassify.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/product/components/addSpecification.vue b/src/views/product/components/addSpecification.vue
new file mode 100644
index 0000000..166e084
--- /dev/null
+++ b/src/views/product/components/addSpecification.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/product/components/addUnit.vue b/src/views/product/components/addUnit.vue
new file mode 100644
index 0000000..1c411d3
--- /dev/null
+++ b/src/views/product/components/addUnit.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index a69d112..41bf348 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -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({
diff --git a/src/views/product/specification.vue b/src/views/product/specification.vue
new file mode 100644
index 0000000..84bace3
--- /dev/null
+++ b/src/views/product/specification.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/product/unit.vue b/src/views/product/unit.vue
new file mode 100644
index 0000000..d76a1e3
--- /dev/null
+++ b/src/views/product/unit.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/shop/shop_configuration.vue b/src/views/shop/shop_configuration.vue
index ea77fde..1fba74a 100644
--- a/src/views/shop/shop_configuration.vue
+++ b/src/views/shop/shop_configuration.vue
@@ -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,