From 1d295b970f6fe1ce238124afd087477cd690fc2a Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Tue, 14 Jan 2025 16:23:10 +0800
Subject: [PATCH] init

---
 src/api/product-category/product-category.js  |  37 +
 src/api/product-type/product-type.js          |  37 +
 src/api/product/product.js                    |  37 +
 src/views/ArticleType/ArticleType.vue         | 789 +++++++++---------
 .../ArticleType/components/AddArticleType.vue | 199 ++---
 src/views/Product/Product.vue                 | 548 ++++++++++++
 src/views/Product/components/AddProduct.vue   | 329 ++++++++
 src/views/Product/components/ShowProduct.vue  | 141 ++++
 src/views/ProductCategory/ProductCategory.vue | 403 +++++++++
 .../components/AddProductCategory.vue         | 211 +++++
 .../components/ShowProductCategory.vue        | 104 +++
 11 files changed, 2337 insertions(+), 498 deletions(-)
 create mode 100644 src/api/product-category/product-category.js
 create mode 100644 src/api/product-type/product-type.js
 create mode 100644 src/api/product/product.js
 create mode 100644 src/views/Product/Product.vue
 create mode 100644 src/views/Product/components/AddProduct.vue
 create mode 100644 src/views/Product/components/ShowProduct.vue
 create mode 100644 src/views/ProductCategory/ProductCategory.vue
 create mode 100644 src/views/ProductCategory/components/AddProductCategory.vue
 create mode 100644 src/views/ProductCategory/components/ShowProductCategory.vue

diff --git a/src/api/product-category/product-category.js b/src/api/product-category/product-category.js
new file mode 100644
index 0000000..07969ab
--- /dev/null
+++ b/src/api/product-category/product-category.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function index(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product-category/index',
+    params,
+isLoading
+  })
+}
+
+export function show(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product-category/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/product-category/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product-category/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/api/product-type/product-type.js b/src/api/product-type/product-type.js
new file mode 100644
index 0000000..40e2f26
--- /dev/null
+++ b/src/api/product-type/product-type.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function index(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product-type/index',
+    params,
+isLoading
+  })
+}
+
+export function show(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product-type/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/product-type/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product-type/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/api/product/product.js b/src/api/product/product.js
new file mode 100644
index 0000000..e1ebf68
--- /dev/null
+++ b/src/api/product/product.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function index(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product/index',
+    params,
+isLoading
+  })
+}
+
+export function show(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/product/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/product/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/views/ArticleType/ArticleType.vue b/src/views/ArticleType/ArticleType.vue
index 1af65da..9a80513 100644
--- a/src/views/ArticleType/ArticleType.vue
+++ b/src/views/ArticleType/ArticleType.vue
@@ -1,436 +1,427 @@
 
 <template>
-    <div>
-        <el-card shadow="never" style="margin-top: 20px;">
-            <template #header>
-                <slot name="header">
-                    <vxe-toolbar :export="isHasAuth('export')" :print="isHasAuth('print')" custom ref="toolbar">
-                        <template #buttons>
-                            <el-button
-                                    v-if="isHasAuth('create')"
-                                    icon="el-icon-plus"
-                                    type="primary"
-                                    size="small"
-                                    @click="isShowAdd = true"
-                            >新增</el-button
-                            >
-                            <el-button
-                                    v-if="isHasAuth('search')"
-                                    icon="el-icon-search"
-                                    type="primary"
-                                    plain
-                                    size="small"
-                                    @click="getList"
-                            >搜索</el-button
-                            >
-                        </template>
-                    </vxe-toolbar>
-                </slot>
+  <div>
+    <el-card shadow="never" style="margin-top: 20px;">
+      <template #header>
+        <slot name="header">
+          <vxe-toolbar ref="toolbar" :export="isHasAuth('export')" :print="isHasAuth('print')" custom>
+            <template #buttons>
+              <el-button
+                v-if="isHasAuth('create')"
+                icon="el-icon-plus"
+                type="primary"
+                size="small"
+                @click="isShowAdd = true"
+              >新增</el-button>
+              <el-button
+                v-if="isHasAuth('search')"
+                icon="el-icon-search"
+                type="primary"
+                plain
+                size="small"
+                @click="getList"
+              >搜索</el-button>
             </template>
+          </vxe-toolbar>
+        </slot>
+      </template>
 
-            <vxe-table
-                    ref="table"
-                    stripe
-                    style="margin-top: 10px"
-                    :loading="loading"
-                    :height="tableHeight"
-                    keep-source
-                    show-overflow
-                    :menu-config="{
-                      className: 'my-menus',
-                      body: {
-                        options: [
-                          [
-                            { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
-                            { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
-                          ],
-                        ]
-                      }
-                    }"
-                    @menu-click="contextMenuClickEvent"
-                    :row-config="{ isCurrent: true, isHover: true }"
-                    :column-config="{ resizable: true }"
-                    :export-config="{}"
-                    :edit-rules="validRules"
-                    :edit-config="{
+      <vxe-table
+        ref="table"
+        stripe
+        style="margin-top: 10px"
+        :loading="loading"
+        :height="tableHeight"
+        keep-source
+        show-overflow
+        :menu-config="{
+          className: 'my-menus',
+          body: {
+            options: [
+              [
+                { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
+                { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
+              ],
+            ]
+          }
+        }"
+        :row-config="{ isCurrent: true, isHover: true }"
+        :column-config="{ resizable: true }"
+        :export-config="{}"
+        :edit-rules="validRules"
+        :edit-config="{
           trigger: 'manual',
           mode: 'row',
           showStatus: true,
           isHover: true,
           autoClear: false,
         }"
-                    
-                        :tree-config="{
-
-                        }"
-                    
-                    :align="allAlign"
-                    :data="tableData"
-            >
-                <vxe-column type="seq" width="58" align="center" tree-node />
-                
-                    
-                    
-                        
-                        <vxe-column
-                                header-align="center"
-                                field="title"
-                                width="160"
-                                title="栏目名称"
-                                :edit-render="{ name: 'input', attrs: { type: 'text' } }"
-                        />
-                        
-                    
-                    
-                        
-                        <vxe-column
-                                align="center"
-                                field="status"
-                                width="140"
-                                title="状态"
-                                :edit-render="{ name: 'VxeSelect', options: [{ label: '是', value: 1 },{ label: '否', value: 0 }] }"
-                        />
-                        
-                    
-                    
-                        
-                        <vxe-column
-                                align="center"
-                                field="site_id"
-                                width="180"
-                                title="站点选择"
-                                :edit-render="{ name: 'VxeSelect', options: site, props: { multiple: false }, optionProps: { value: 'id', label: 'name' } }"
-                        />
-                        
-                    
-                    
-                        
-                        <vxe-column
-                                align="center"
-                                field="pid"
-                                width="160"
-                                title="上级栏目"
-                                :edit-render="{ name: 'VxeTreeSelect', options: [{ id: 0, title: '根结点' ,children: tableData }], props: { multiple: false }, optionProps: { value: 'id', label: 'title' } }"
-                        />
-                        
-                    
-                    
-                        
-                        <vxe-column
-                                header-align="center"
-                                field="remark"
-                                width="160"
-                                title="备注"
-                                :edit-render="{ name: 'input', attrs: { type: 'text' } }"
-                        />
-                        
-                <vxe-column field="operate" header-align="center" title="操作" min-width="220">
-                    <template #default="{ row }">
-                        <template v-if="isActiveStatus(row)">
-                            <el-button size="small" type="primary" @click="saveRowEvent(row)"
-                            >保存</el-button
-                            >
-                            <el-button
-                                    size="small"
-                                    type="primary"
-                                    plain
-                                    @click="cancelRowEvent(row)"
-                            >取消</el-button
-                            >
-                        </template>
-                        <template v-else>
-                            <el-button v-if="isHasAuth('detail')" size="small" type="primary" plain @click="detail(row)"
-                            >查看</el-button
-                            >
-                            <el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)"
-                            >编辑</el-button
-                            >
-                            <el-button
-                                    v-if="isHasAuth('delete')"
-                                    size="small"
-                                    type="danger"
-                                    @click="destroyRowEvent(row)"
-                            >删除</el-button
-                            >
-                        </template>
-                    </template>
-                </vxe-column>
-            </vxe-table>
-
-            
-        </el-card>
-
-        <AddArticleType
-                ref="AddArticleType"
-                
-                    :site="site"
-                  
-                      :table-data="tableData"
-                
-                :is-show.sync="isShowAdd"
-                @refresh="getList"
+        :tree-config="{}"
+        :align="allAlign"
+        :data="tableData"
+        @menu-click="contextMenuClickEvent"
+      >
+        <vxe-column type="seq" width="58" align="center" tree-node />
+
+        <vxe-column
+          header-align="center"
+          field="title"
+          width="160"
+          title="栏目名称"
+          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+        />
+
+        <vxe-column
+          align="center"
+          field="status"
+          width="140"
+          title="状态"
+          :edit-render="{ name: 'VxeSelect', options: [{ label: '是', value: 1 },{ label: '否', value: 0 }] }"
+        />
+
+        <vxe-column
+          align="center"
+          field="site_id"
+          width="180"
+          title="站点选择"
+          :edit-render="{ name: 'VxeSelect', options: site, props: { multiple: false }, optionProps: { value: 'id', label: 'name' } }"
+        />
+
+        <vxe-column
+          align="center"
+          field="pid"
+          width="160"
+          title="上级栏目"
+          :edit-render="{ name: 'VxeTreeSelect', options: [{ id: 0, title: '根结点' ,children: tableData }], props: { multiple: false }, optionProps: { value: 'id', label: 'title' } }"
         />
-        <ShowArticleType
-                ref="ShowArticleType"
-        
-                :site="site"
-                
-                :is-show.sync="isShowDetail"
+
+        <vxe-column
+          header-align="center"
+          field="remark"
+          width="160"
+          title="备注"
+          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
         />
-        
-    </div>
+
+        <vxe-column field="operate" header-align="center" title="操作" min-width="220">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button
+                size="small"
+                type="primary"
+                @click="saveRowEvent(row)"
+              >保存</el-button>
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                @click="cancelRowEvent(row)"
+              >取消</el-button>
+            </template>
+            <template v-else>
+              <el-button
+                v-if="isHasAuth('create')"
+                size="small"
+                type="primary"
+                @click="addChild(row)"
+              >下级</el-button>
+              <el-button
+                v-if="isHasAuth('detail')"
+                size="small"
+                type="primary"
+                plain
+                @click="detail(row)"
+              >查看</el-button>
+              <el-button
+                v-if="isHasAuth('edit')"
+                size="small"
+                type="warning"
+                @click="editRowEvent(row)"
+              >编辑</el-button>
+              <el-button
+                v-if="isHasAuth('delete')"
+                size="small"
+                type="danger"
+                @click="destroyRowEvent(row)"
+              >删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+    </el-card>
+
+    <AddArticleType
+      ref="AddArticleType"
+
+      :site="site"
+
+      :table-data="tableData"
+
+      :is-show.sync="isShowAdd"
+      @refresh="getList"
+    />
+    <ShowArticleType
+      ref="ShowArticleType"
+
+      :site="site"
+
+      :is-show.sync="isShowDetail"
+    />
+
+  </div>
 </template>
 
 <script>
-  import VxeUI from "vxe-pc-ui";
-  
-  import { authMixin } from "@/mixin/authMixin"
-  import { uploadSize } from "@/settings";
-  import { deepCopy } from "@/utils";
-  import { destroy, index, save } from "@/api/article-type/article-type";
-  import AddArticleType from "./components/AddArticleType.vue";
-  import ShowArticleType from "./components/ShowArticleType.vue";
-  import axios from "axios";
-  import { getToken } from "@/utils/auth";
-  
-        import { index as siteIndex } from '@/api/site/site';
-      
-  export default {
-    name: "ArticleType",
-    mixins: [authMixin],
-    components: {
-        
-      AddArticleType,
-      ShowArticleType,
-    },
-    data() {
-      return {
-        uploadSize,
-        examineKey: 0,
-        isShowAdd: false,
-        isShowDetail: false,
-
-        loading: false,
-        tableHeight: 400,
-        select: {
-          page: 1,
-          page_size: 20,
-          keyword: '',
-          show_relation: [],
-          is_tree: 1,
-        },
-        total: 0,
-        allAlign: null,
-        tableData: [],
-        form: {
-          id: '',
-          
-            title: '',
-          
-            status: 1,
-          
-            site_id: '',
-          
-            pid: '',
-          
-            remark: '',
-          
-        },
-      validRules: {
-          
+import VxeUI from 'vxe-pc-ui'
+
+import { authMixin } from '@/mixin/authMixin'
+import { uploadSize } from '@/settings'
+import { deepCopy } from '@/utils'
+import { destroy, index, save } from '@/api/article-type/article-type'
+import AddArticleType from './components/AddArticleType.vue'
+import ShowArticleType from './components/ShowArticleType.vue'
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
+
+import { index as siteIndex } from '@/api/site/site'
+
+export default {
+  name: 'ArticleType',
+  components: {
+
+    AddArticleType,
+    ShowArticleType
+  },
+  mixins: [authMixin],
+  data() {
+    return {
+      uploadSize,
+      examineKey: 0,
+      isShowAdd: false,
+      isShowDetail: false,
+
+      loading: false,
+      tableHeight: 400,
+      select: {
+        page: 1,
+        page_size: 20,
+        keyword: '',
+        show_relation: [],
+        is_tree: 1
       },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      form: {
+        id: '',
+
+        title: '',
+
+        status: 1,
+
+        site_id: '',
+
+        pid: '',
+
+        remark: ''
 
-        
-               site: [],
-             
-      };
-    },
-    computed: {
-      isActiveStatus() {
-        return function (row) {
-          if (this.$refs["table"]) {
-            return this.$refs["table"].isEditByRow(row);
-          }
-        };
       },
-      isHasAuth() {
-        return function (auth) {
-          return this.auths_auth_mixin.indexOf(auth) !== -1
+      validRules: {
+
+      },
+
+      site: []
+
+    }
+  },
+  computed: {
+    isActiveStatus() {
+      return function(row) {
+        if (this.$refs['table']) {
+          return this.$refs['table'].isEditByRow(row)
         }
       }
     },
-    created() {
-      
-         this.getSite()
-         
-      this.getList();
-    },
-    mounted() {
-      this.bindToolbar()
-      this.calcTableHeight()
-    },
-    methods: {
-      calcTableHeight() {
-        let clientHeight = document.documentElement.clientHeight;
-        let cardTitle = document.querySelector(".el-card__header")?.getBoundingClientRect()?.height;
-        let search = document.querySelector(".vxe-toolbar")?.getBoundingClientRect()?.height;
-        let paginationHeight = (document.querySelector(".el-pagination")?.getBoundingClientRect()?.height ?? 0) + 10; //分页的高度
-        let topHeight = 50; //页面 头部
-        let padding = 80;
-        let margin = 20;
-        this.tableHeight =
-          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin;
-      },
-      contextMenuClickEvent ({ menu, row, column }) {
-        switch (menu.code) {
-          case 'copy':
-            // 示例
-            if (row && column) {
-              if (VxeUI.clipboard.copy(row[column.field])) {
-                this.$message.success('已复制到剪贴板！')
-              }
-            }
-            break
-          case 'remove':
-            if (row && column) {
-              this.destroyRowEvent(row)
-            }
-          default:
-        }
-      },
-      async detail (row) {
-        await this.$refs["ShowArticleType"].getDetail(row.id)
-        this.isShowDetail = true
-      },
+    isHasAuth() {
+      return function(auth) {
+        return this.auths_auth_mixin.indexOf(auth) !== -1
+      }
+    }
+  },
+  created() {
+    this.getSite()
 
-      
-           async getSite() {
-             try {
-               const res = await siteIndex({
-                 page: 1,
-                 page_size: 999,
-                 
-               }, false)
-               this.site = res.data
-             } catch(err) {
-               console.error(err)
-             }
-           },
-         
-
-      uploadMethod(file) {
-        const formData = new FormData()
-        formData.append('file', file)
-        window.$_uploading = true
-        return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
-          headers: {
-            Authorization: `Bearer ${getToken()}`,
-          }
-        }).then((response) => {
-          window.$_uploading = false
-          if (response.status === 200 && !response.data.code) {
-            return {
-              response: response.data,
-              name: response.data.original_name,
-              url: response.data.url
+    this.getList()
+  },
+  mounted() {
+    this.bindToolbar()
+    this.calcTableHeight()
+  },
+  methods: {
+    calcTableHeight() {
+      const clientHeight = document.documentElement.clientHeight
+      const cardTitle = document.querySelector('.el-card__header')?.getBoundingClientRect()?.height
+      const search = document.querySelector('.vxe-toolbar')?.getBoundingClientRect()?.height
+      const paginationHeight = (document.querySelector('.el-pagination')?.getBoundingClientRect()?.height ?? 0) + 10 // 分页的高度
+      const topHeight = 50 // 页面 头部
+      const padding = 80
+      const margin = 20
+      this.tableHeight =
+          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin
+    },
+    contextMenuClickEvent({ menu, row, column }) {
+      switch (menu.code) {
+        case 'copy':
+          // 示例
+          if (row && column) {
+            if (VxeUI.clipboard.copy(row[column.field])) {
+              this.$message.success('已复制到剪贴板！')
             }
-          } else {
-            this.$message.error("上传失败")
           }
-        }).catch(_ => {
-          window.$_uploading = false
-        })
-      },
-      bindToolbar() {
-        this.$nextTick(() => {
-          if (this.$refs["table"] && this.$refs["toolbar"]) {
-            this.$refs["table"].connect(this.$refs["toolbar"]);
+          break
+        case 'remove':
+          if (row && column) {
+            this.destroyRowEvent(row)
           }
-        });
-      },
+        default:
+      }
+    },
+    addChild(currRow) {
+      this.$refs['AddArticleType'].form.pid = currRow.id
+      this.isShowAdd = true
+    },
+    async detail(row) {
+      await this.$refs['ShowArticleType'].getDetail(row.id)
+      this.isShowDetail = true
+    },
 
-      editRowEvent(row) {
-        if (this.$refs["table"]) {
-          this.$refs["table"].setEditRow(row);
-        }
-      },
-      cancelRowEvent(row) {
-        if (this.$refs["table"]) {
-          this.$refs["table"].clearEdit().then(() => {
-            // 还原行数据
-            this.$refs["table"].revertData(row);
-          });
-        }
-      },
+    async getSite() {
+      try {
+        const res = await siteIndex({
+          page: 1,
+          page_size: 999
 
-      async getList() {
-        this.loading = true;
-        try {
-          const res = await index(this.select, false);
-          this.tableData = res;
-          this.total = res.total;
-          this.loading = false;
-        } catch (err) {
-          console.error(err);
-          this.loading = false;
-        }
-      },
+        }, false)
+        this.site = res.data
+      } catch (err) {
+        console.error(err)
+      }
+    },
 
-      async saveRowEvent(row) {
-        if (window.$_uploading) {
-          this.$message.warning("文件正在上传中")
-          return
+    uploadMethod(file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      window.$_uploading = true
+      return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
+        headers: {
+          Authorization: `Bearer ${getToken()}`
         }
-        try {
-          const errMap = await this.$refs["table"].validate();
-          if (errMap) {
-            throw new Error(errMap);
+      }).then((response) => {
+        window.$_uploading = false
+        if (response.status === 200 && !response.data.code) {
+          return {
+            response: response.data,
+            name: response.data.original_name,
+            url: response.data.url
           }
-          await this.$confirm("确认保存？", "提示", {
-            confirmButtonText: "确认",
-            cancelButtonText: "取消",
-          });
-          await this.$refs["table"].clearEdit();
-          let form = deepCopy(this.form);
-          for (const key in form) {
-            form[key] = row[key];
-          }
-          
-          this.loading = true;
-          await save(form, false);
-          await this.getList();
-          this.loading = false;
-        } catch (err) {
-          this.loading = false;
+        } else {
+          this.$message.error('上传失败')
         }
-      },
-      async destroyRowEvent(row) {
-        try {
-          await this.$confirm("确认删除？", "提示", {
-            confirmButtonText: "确认",
-            cancelButtonText: "取消",
-          });
-          this.loading = true;
-          if (row.id) {
-            await destroy({
-              id: row.id,
-            },false);
-            await this.getList();
-          } else {
-            console.log(row);
-            this.tableData.splice(
-              this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
-              1
-            );
-          }
-          this.loading = false;
-        } catch (err) {
-          this.loading = false;
+      }).catch(_ => {
+        window.$_uploading = false
+      })
+    },
+    bindToolbar() {
+      this.$nextTick(() => {
+        if (this.$refs['table'] && this.$refs['toolbar']) {
+          this.$refs['table'].connect(this.$refs['toolbar'])
         }
-      },
+      })
+    },
+
+    editRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].setEditRow(row)
+      }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs['table'].revertData(row)
+        })
+      }
+    },
 
+    async getList() {
+      this.loading = true
+      try {
+        const res = await index(this.select, false)
+        this.tableData = res
+        this.total = res.total
+        this.loading = false
+      } catch (err) {
+        console.error(err)
+        this.loading = false
+      }
     },
-  };
+
+    async saveRowEvent(row) {
+      if (window.$_uploading) {
+        this.$message.warning('文件正在上传中')
+        return
+      }
+      try {
+        const errMap = await this.$refs['table'].validate()
+        if (errMap) {
+          throw new Error(errMap)
+        }
+        await this.$confirm('确认保存？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        await this.$refs['table'].clearEdit()
+        const form = deepCopy(this.form)
+        for (const key in form) {
+          form[key] = row[key]
+        }
+
+        this.loading = true
+        await save(form, false)
+        await this.getList()
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    },
+    async destroyRowEvent(row) {
+      try {
+        await this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        this.loading = true
+        if (row.id) {
+          await destroy({
+            id: row.id
+          }, false)
+          await this.getList()
+        } else {
+          console.log(row)
+          this.tableData.splice(
+            this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+            1
+          )
+        }
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    }
+
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/ArticleType/components/AddArticleType.vue b/src/views/ArticleType/components/AddArticleType.vue
index 13170cb..4934b7f 100644
--- a/src/views/ArticleType/components/AddArticleType.vue
+++ b/src/views/ArticleType/components/AddArticleType.vue
@@ -1,78 +1,79 @@
 
 <template>
-    <div>
-        <el-drawer
-                :title="$route.meta.title"
-                direction="rtl"
-                size="68%"
-                :visible.sync="visible"
-                append-to-body
-                :before-close="handleClose"
-                @close="$emit('update:isShow',false)">
-            <section class="drawer-container">
-                <el-form class="drawer-container__form" ref="elForm" :model="form" :rules="rules" label-position="top" label-width="120px" size="small">
-                    <div class="form-layout">
-                        
-                                 <el-form-item label="栏目名称" prop="title">
-                                   <el-input v-model="form['title']" clearable placeholder="请填写栏目名称" style="width: 100%;"></el-input>
-                                 </el-form-item>
-                               
-                                    <el-form-item label="状态" prop="status">
-                                      <el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch>
-                                    </el-form-item>
-                               
-                                   <el-form-item label="站点选择" prop="site_id" clearable>
-                                     <el-select v-model="form['site_id']" clearable placeholder="请填写站点选择"  style="width: 100%;">
-                                       <el-option v-for="(option, optionIndex) in site" :key="optionIndex" :label="option['name']" :value="option['id']"></el-option>
-                                     </el-select>
-                                   </el-form-item>
-                               
-                                    <el-form-item label="上级栏目" prop="pid">
-                                      <vxe-tree-select v-model="form['pid']" placeholder="请选择上级栏目" :options="[{ id: 0, title: '根结点' ,children: tableData }]" clearable :multiple="false" :option-props="{ value: 'id', label: 'title' }" style="width: 100%;"></vxe-tree-select>
-                                    </el-form-item>
-                               
-                                    <el-form-item label="备注" prop="remark">
-                                      <el-input v-model="form['remark']" clearable placeholder="请填写备注" type="textarea" :autosize="{ minRows: 2 }" style="width: 100%;"></el-input>
-                                    </el-form-item>
-                               
-                    </div>
-                </el-form>
-
-                <div class="drawer-container__footer">
-                    <el-button @click="reset">重 置</el-button>
-                    <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
-                </div>
-            </section>
-        </el-drawer>
-    </div>
+  <div>
+    <el-drawer
+      :title="$route.meta.title"
+      direction="rtl"
+      size="68%"
+      :visible.sync="visible"
+      append-to-body
+      :before-close="handleClose"
+      @close="$emit('update:isShow',false)"
+    >
+      <section class="drawer-container">
+        <el-form ref="elForm" class="drawer-container__form" :model="form" :rules="rules" label-position="top" label-width="120px" size="small">
+          <div class="form-layout">
+
+            <el-form-item label="栏目名称" prop="title">
+              <el-input v-model="form['title']" clearable placeholder="请填写栏目名称" style="width: 100%;" />
+            </el-form-item>
+
+            <el-form-item label="状态" prop="status">
+              <el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
+            </el-form-item>
+
+            <el-form-item label="站点选择" prop="site_id" clearable>
+              <el-select v-model="form['site_id']" clearable placeholder="请填写站点选择" style="width: 100%;">
+                <el-option v-for="(option, optionIndex) in site" :key="optionIndex" :label="option['name']" :value="option['id']" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="上级栏目" prop="pid">
+              <vxe-tree-select v-model="form['pid']" placeholder="请选择上级栏目" :options="[{ id: 0, title: '根结点' ,children: tableData }]" clearable :multiple="false" :option-props="{ value: 'id', label: 'title' }" style="width: 100%;" />
+            </el-form-item>
+
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form['remark']" clearable placeholder="请填写备注" type="textarea" :autosize="{ minRows: 2 }" style="width: 100%;" />
+            </el-form-item>
+
+          </div>
+        </el-form>
+
+        <div class="drawer-container__footer">
+          <el-button @click="reset">重 置</el-button>
+          <el-button type="primary" :loading="loading" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+        </div>
+      </section>
+    </el-drawer>
+  </div>
 </template>
 
 <script>
-  import { save, show } from "@/api/article-type/article-type";
-  import axios from "axios";
-  import { getToken } from "@/utils/auth";
-  import { uploadSize } from "@/settings";
-  import { formatFileSize } from "@/utils";
-
-  export default {
-  name: "ArticleTypeDrawer",
+import { save, show } from '@/api/article-type/article-type'
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
+import { uploadSize } from '@/settings'
+import { formatFileSize } from '@/utils'
+
+export default {
+  name: 'ArticleTypeDrawer',
   props: {
     isShow: {
       type: Boolean,
       default: false,
       required: true
     },
-    
-           site : {
-             type: Array,
-             default: () => []
-           },
-         
-    tableData: {
+
+    site: {
       type: Array,
       default: () => []
     },
-    
+
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+
   },
   data() {
     return {
@@ -81,21 +82,21 @@
       loading: false,
       visible: false,
       form: {
-        
-          title: '',
-        
-          status: 1,
-        
-          site_id: '',
-        
-          pid: '',
-        
-          remark: '',
-        
+
+        title: '',
+
+        status: 1,
+
+        site_id: '',
+
+        pid: '',
+
+        remark: ''
+
       },
       rules: {
-          
-      },
+
+      }
     }
   },
   watch: {
@@ -104,16 +105,16 @@
     },
     visible(newVal) {
       this.$emit('update:isShow', newVal)
-    },
+    }
   },
   methods: {
     uploadBefore(file) {
       if (file.size > uploadSize) {
         this.$message({
-          type: "warning",
-          message: `上传图片大小超过${formatFileSize(uploadSize)}！`,
-        });
-        return false;
+          type: 'warning',
+          message: `上传图片大小超过${formatFileSize(uploadSize)}！`
+        })
+        return false
       }
       window.$_uploading = true
     },
@@ -121,9 +122,9 @@
       window.$_uploading = false
       fileList.forEach((file) => {
         if (file.response?.data && !file.response?.code) {
-          file.response = file.response.data;
+          file.response = file.response.data
         }
-      });
+      })
       this.form[fieldName] = fileList
     },
     uploadRemove(file, fileList, fieldName) {
@@ -133,42 +134,42 @@
       window.$_uploading = false
       this.form[fieldName] = fileList
       this.$message({
-        type: "warning",
-        message: err,
-      });
+        type: 'warning',
+        message: err
+      })
     },
     formatFileSize,
     getToken,
     handleClose(done) {
       this.$confirm('确定关闭窗口？')
         .then(_ => {
-          done();
+          done()
         })
-        .catch(_ => {});
+        .catch(_ => {})
     },
 
     reset() {
       this.form = {
-          
-          title: '',
-          
-          status: 1,
-          
-          site_id: '',
-          
-          pid: '',
-          
-          remark: '',
-          
+
+        title: '',
+
+        status: 1,
+
+        site_id: '',
+
+        pid: '',
+
+        remark: ''
+
       }
       this.$refs['elForm'].resetFields()
     },
     submit() {
       if (window.$_uploading) {
-        this.$message.warning("文件正在上传中")
+        this.$message.warning('文件正在上传中')
         return
       }
-      
+
       this.$refs['elForm'].validate(async valid => {
         if (valid) {
           this.loading = true
diff --git a/src/views/Product/Product.vue b/src/views/Product/Product.vue
new file mode 100644
index 0000000..66e48fd
--- /dev/null
+++ b/src/views/Product/Product.vue
@@ -0,0 +1,548 @@
+
+<template>
+    <div>
+        <el-card shadow="never" style="margin-top: 20px;">
+            <template #header>
+                <slot name="header">
+                    <vxe-toolbar :export="isHasAuth('export')" :print="isHasAuth('print')" custom ref="toolbar">
+                        <template #buttons>
+                            <el-button
+                                    v-if="isHasAuth('create')"
+                                    icon="el-icon-plus"
+                                    type="primary"
+                                    size="small"
+                                    @click="isShowAdd = true"
+                            >新增</el-button
+                            >
+                            <el-button
+                                    v-if="isHasAuth('search')"
+                                    icon="el-icon-search"
+                                    type="primary"
+                                    plain
+                                    size="small"
+                                    @click="getList"
+                            >搜索</el-button
+                            >
+                        </template>
+                    </vxe-toolbar>
+                </slot>
+            </template>
+
+            <vxe-table
+                    ref="table"
+                    stripe
+                    style="margin-top: 10px"
+                    :loading="loading"
+                    :height="tableHeight"
+                    keep-source
+                    show-overflow
+                    :menu-config="{
+                      className: 'my-menus',
+                      body: {
+                        options: [
+                          [
+                            { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
+                            { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
+                          ],
+                        ]
+                      }
+                    }"
+                    @menu-click="contextMenuClickEvent"
+                    :row-config="{ isCurrent: true, isHover: true }"
+                    :column-config="{ resizable: true }"
+                    :export-config="{}"
+                    :edit-rules="validRules"
+                    :edit-config="{
+          trigger: 'manual',
+          mode: 'row',
+          showStatus: true,
+          isHover: true,
+          autoClear: false,
+        }"
+                    
+                    :align="allAlign"
+                    :data="tableData"
+            >
+                <vxe-column type="seq" width="58" align="center"  />
+                
+                    
+                    
+                        
+                        <vxe-column
+                                align="center"
+                                field="product_category_id"
+                                width="160"
+                                title="分类选择"
+                                :edit-render="{ name: 'VxeTreeSelect', options: productCategory, props: { multiple: false }, optionProps: { value: 'id', label: 'name' } }"
+                        />
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                header-align="center"
+                                field="name"
+                                width="160"
+                                title="商品名称"
+                                :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+                        />
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                header-align="center"
+                                align="right"
+                                field="price"
+                                width="160"
+                                title="商品价格"
+                                :edit-render="{ name: 'input', attrs: { type: 'number' } }"
+                        />
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                field="image_id"
+                                min-width="180"
+                                title="封面图片"
+                                header-align="center"
+                                align="left"
+                                :edit-render="{}"
+                        >
+                            <template #default="{ row }">
+                                <vxe-upload v-model="row['image']" name-field="original_name" readonly progress-text="{percent}%" :more-config="{ maxCount: 1, layout: 'horizontal' }" :show-button-text="false" />
+                            </template>
+                            <template #edit="{ row }">
+                                <vxe-upload
+                                        name-field="original_name"
+                                        v-model="row['image']"
+                                        progress-text="{percent}%"
+                                        :more-config="{ maxCount: 1, layout: 'horizontal' }"
+                                        :limit-size="uploadSize / 1024 / 1024"
+                                        :show-button-text="false"
+                                        :upload-method="({file}) => uploadMethod(file)" />
+                            </template>
+                        </vxe-column>
+                
+                    
+                    
+                        
+                        <vxe-column
+                                align="center"
+                                header-align="center"
+                                field="content"
+                                width="120"
+                                title="内容"
+                                :edit-render="{}"
+                        >
+                            <template #default="{ row }">
+                                <el-button slot="reference" size="small" type="primary" icon="el-icon-search" @click="$refs['RichTextModal'].open({ text: row['content'], readonly: true, fieldName: 'content', row })">查看</el-button>
+                            </template>
+                            <template #edit="{ row }">
+                                <el-button slot="reference" size="small" type="primary" icon="el-icon-edit" @click="$refs['RichTextModal'].open({ text: row['content'], readonly: false, fieldName: 'content', row })">编辑</el-button>
+                            </template>
+                        </vxe-column>
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                field="product_images"
+                                min-width="180"
+                                title="商品轮播图"
+                                header-align="center"
+                                align="left"
+                                :edit-render="{}"
+                        >
+                            <template #default="{ row }">
+                                <vxe-upload v-model="row['product_image']" name-field="original_name" readonly progress-text="{percent}%" :more-config="{ maxCount: 1, layout: 'horizontal' }" :show-button-text="false" />
+                            </template>
+                            <template #edit="{ row }">
+                                <vxe-upload
+                                        name-field="original_name"
+                                        v-model="row['product_image']"
+                                        progress-text="{percent}%"
+                                        :more-config="{ maxCount: 1, layout: 'horizontal' }"
+                                        :limit-size="uploadSize / 1024 / 1024"
+                                        :show-button-text="false"
+                                        :upload-method="({file}) => uploadMethod(file)" />
+                            </template>
+                        </vxe-column>
+                
+                    
+                    
+                        
+                        <vxe-column
+                                header-align="center"
+                                field="product_skus"
+                                width="160"
+                                title="商品"
+                                :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+                        />
+                        
+                    
+                    
+                        
+                        <vxe-column
+                                header-align="center"
+                                align="right"
+                                field="sort"
+                                width="160"
+                                title="排序"
+                                :edit-render="{ name: 'input', attrs: { type: 'number' } }"
+                        />
+                        
+                <vxe-column field="operate" header-align="center" title="操作" min-width="220">
+                    <template #default="{ row }">
+                        <template v-if="isActiveStatus(row)">
+                            <el-button size="small" type="primary" @click="saveRowEvent(row)"
+                            >保存</el-button
+                            >
+                            <el-button
+                                    size="small"
+                                    type="primary"
+                                    plain
+                                    @click="cancelRowEvent(row)"
+                            >取消</el-button
+                            >
+                        </template>
+                        <template v-else>
+                            <el-button v-if="isHasAuth('detail')" size="small" type="primary" plain @click="detail(row)"
+                            >查看</el-button
+                            >
+                            <el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)"
+                            >编辑</el-button
+                            >
+                            <el-button
+                                    v-if="isHasAuth('delete')"
+                                    size="small"
+                                    type="danger"
+                                    @click="destroyRowEvent(row)"
+                            >删除</el-button
+                            >
+                        </template>
+                    </template>
+                </vxe-column>
+            </vxe-table>
+
+            
+                <el-pagination
+                        style="margin-top: 10px;display: flex;justify-content: flex-end;"
+                        :current-page.sync="select.page"
+                        :page-sizes="[20, 30, 40, 50]"
+                        :page-size.sync="select.page_size"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="total"
+                        @size-change="
+          (e) => {
+            select.page_size = e;
+            select.page = 1;
+            getList();
+          }
+        "
+                        @current-change="
+          (e) => {
+            select.page = e;
+            getList();
+          }
+        "
+                />
+            
+        </el-card>
+
+        <AddProduct
+                ref="AddProduct"
+                
+                    :product-category="productCategory"
+                  
+                :is-show.sync="isShowAdd"
+                @refresh="getList"
+        />
+        <ShowProduct
+                ref="ShowProduct"
+        
+                :product-category="productCategory"
+                
+                :is-show.sync="isShowDetail"
+        />
+        
+            <rich-text-modal ref="RichTextModal" @confirm="({ row, fieldName, text }) => row[fieldName] = text"></rich-text-modal>
+        
+    </div>
+</template>
+
+<script>
+  import VxeUI from "vxe-pc-ui";
+  
+  import RichTextModal from "@/components/RichTextModal/index.vue";
+  
+  import { authMixin } from "@/mixin/authMixin"
+  import { uploadSize } from "@/settings";
+  import { deepCopy } from "@/utils";
+  import { destroy, index, save } from "@/api/product/product";
+  import AddProduct from "./components/AddProduct.vue";
+  import ShowProduct from "./components/ShowProduct.vue";
+  import axios from "axios";
+  import { getToken } from "@/utils/auth";
+  
+        import { index as productCategoryIndex } from '@/api/product-category/product-category';
+      
+  export default {
+    name: "Product",
+    mixins: [authMixin],
+    components: {
+        
+      RichTextModal,
+        
+      AddProduct,
+      ShowProduct,
+    },
+    data() {
+      return {
+        uploadSize,
+        examineKey: 0,
+        isShowAdd: false,
+        isShowDetail: false,
+
+        loading: false,
+        tableHeight: 400,
+        select: {
+          page: 1,
+          page_size: 20,
+          keyword: '',
+          show_relation: ["image","product_image"],
+          
+        },
+        total: 0,
+        allAlign: null,
+        tableData: [],
+        form: {
+          id: '',
+          
+            product_category_id: '',
+          
+            name: '',
+          
+            price: '',
+          
+            image_id: [],
+          
+            content: '',
+          
+            product_images: [],
+          
+            product_skus: [],
+          
+            sort: '',
+          
+        },
+      validRules: {
+          
+      },
+
+        
+               productCategory: [],
+             
+      };
+    },
+    computed: {
+      isActiveStatus() {
+        return function (row) {
+          if (this.$refs["table"]) {
+            return this.$refs["table"].isEditByRow(row);
+          }
+        };
+      },
+      isHasAuth() {
+        return function (auth) {
+          return this.auths_auth_mixin.indexOf(auth) !== -1
+        }
+      }
+    },
+    created() {
+      
+         this.getProductCategory()
+         
+      this.getList();
+    },
+    mounted() {
+      this.bindToolbar()
+      this.calcTableHeight()
+    },
+    methods: {
+      calcTableHeight() {
+        let clientHeight = document.documentElement.clientHeight;
+        let cardTitle = document.querySelector(".el-card__header")?.getBoundingClientRect()?.height;
+        let search = document.querySelector(".vxe-toolbar")?.getBoundingClientRect()?.height;
+        let paginationHeight = (document.querySelector(".el-pagination")?.getBoundingClientRect()?.height ?? 0) + 10; //分页的高度
+        let topHeight = 50; //页面 头部
+        let padding = 80;
+        let margin = 20;
+        this.tableHeight =
+          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin;
+      },
+      contextMenuClickEvent ({ menu, row, column }) {
+        switch (menu.code) {
+          case 'copy':
+            // 示例
+            if (row && column) {
+              if (VxeUI.clipboard.copy(row[column.field])) {
+                this.$message.success('已复制到剪贴板！')
+              }
+            }
+            break
+          case 'remove':
+            if (row && column) {
+              this.destroyRowEvent(row)
+            }
+          default:
+        }
+      },
+      async detail (row) {
+        await this.$refs["ShowProduct"].getDetail(row.id)
+        this.isShowDetail = true
+      },
+
+      
+           async getProductCategory() {
+             try {
+               const res = await productCategoryIndex({
+                 page: 1,
+                 page_size: 999,
+                 is_tree: 1,
+               }, false)
+               this.productCategory = res
+             } catch(err) {
+               console.error(err)
+             }
+           },
+         
+
+      uploadMethod(file) {
+        const formData = new FormData()
+        formData.append('file', file)
+        window.$_uploading = true
+        return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
+          headers: {
+            Authorization: `Bearer ${getToken()}`,
+          }
+        }).then((response) => {
+          window.$_uploading = false
+          if (response.status === 200 && !response.data.code) {
+            return {
+              response: response.data,
+              name: response.data.original_name,
+              url: response.data.url
+            }
+          } else {
+            this.$message.error("上传失败")
+          }
+        }).catch(_ => {
+          window.$_uploading = false
+        })
+      },
+      bindToolbar() {
+        this.$nextTick(() => {
+          if (this.$refs["table"] && this.$refs["toolbar"]) {
+            this.$refs["table"].connect(this.$refs["toolbar"]);
+          }
+        });
+      },
+
+      editRowEvent(row) {
+        if (this.$refs["table"]) {
+          this.$refs["table"].setEditRow(row);
+        }
+      },
+      cancelRowEvent(row) {
+        if (this.$refs["table"]) {
+          this.$refs["table"].clearEdit().then(() => {
+            // 还原行数据
+            this.$refs["table"].revertData(row);
+          });
+        }
+      },
+
+      async getList() {
+        this.loading = true;
+        try {
+          const res = await index(this.select, false);
+          this.tableData = res.data;
+          this.total = res.total;
+          this.loading = false;
+        } catch (err) {
+          console.error(err);
+          this.loading = false;
+        }
+      },
+
+      async saveRowEvent(row) {
+        if (window.$_uploading) {
+          this.$message.warning("文件正在上传中")
+          return
+        }
+        try {
+          const errMap = await this.$refs["table"].validate();
+          if (errMap) {
+            throw new Error(errMap);
+          }
+          await this.$confirm("确认保存？", "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "取消",
+          });
+          await this.$refs["table"].clearEdit();
+          let form = deepCopy(this.form);
+          for (const key in form) {
+            form[key] = row[key];
+          }
+          
+                   form['image_id'] = row['image'][0]?.response?.id ?? ''
+          
+                   form['product_images'] = row['product_image'].map(i => i.response?.id).filter(i => i)
+            
+          this.loading = true;
+          await save(form, false);
+          await this.getList();
+          this.loading = false;
+        } catch (err) {
+          this.loading = false;
+        }
+      },
+      async destroyRowEvent(row) {
+        try {
+          await this.$confirm("确认删除？", "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "取消",
+          });
+          this.loading = true;
+          if (row.id) {
+            await destroy({
+              id: row.id,
+            },false);
+            await this.getList();
+          } else {
+            console.log(row);
+            this.tableData.splice(
+              this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+              1
+            );
+          }
+          this.loading = false;
+        } catch (err) {
+          this.loading = false;
+        }
+      },
+
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .el-card__header {
+    padding: 6px 20px;
+  }
+  ::v-deep .el-tag + .el-tag {
+    margin-left: 4px;
+  }
+</style>
diff --git a/src/views/Product/components/AddProduct.vue b/src/views/Product/components/AddProduct.vue
new file mode 100644
index 0000000..3d240c2
--- /dev/null
+++ b/src/views/Product/components/AddProduct.vue
@@ -0,0 +1,329 @@
+<template>
+  <div>
+    <el-drawer
+      :title="$route.meta.title"
+      direction="rtl"
+      size="68%"
+      :visible.sync="visible"
+      append-to-body
+      :before-close="handleClose"
+      @close="$emit('update:isShow', false)"
+    >
+      <section class="drawer-container">
+        <el-form
+          ref="elForm"
+          class="drawer-container__form"
+          :model="form"
+          :rules="rules"
+          label-position="top"
+          label-width="120px"
+          size="small"
+        >
+          <div class="form-layout">
+            <el-form-item label="分类选择" prop="product_category_id">
+              <vxe-tree-select
+                v-model="form['product_category_id']"
+                placeholder="请选择分类选择"
+                :options="productCategory"
+                clearable
+                :multiple="false"
+                :option-props="{ value: 'id', label: 'name' }"
+                style="width: 100%"
+              />
+            </el-form-item>
+
+            <el-form-item label="商品名称" prop="name">
+              <el-input
+                v-model="form['name']"
+                clearable
+                placeholder="请填写商品名称"
+                style="width: 100%"
+              />
+            </el-form-item>
+
+            <el-form-item label="商品价格" prop="price">
+              <el-input-number
+                v-model="form['price']"
+                clearable
+                placeholder="请填写商品价格"
+                :precision="2"
+                controls-position="right"
+                style="width: 100%"
+              />
+            </el-form-item>
+
+            <el-form-item label="封面图片" prop="image_id">
+              <el-upload
+                :action="action"
+                :file-list="form['image_id']"
+                :headers="{ Authorization: `Bearer ${getToken()}` }"
+                accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                multiple
+                :limit="1"
+                :before-upload="uploadBefore"
+                :on-success="
+                  (response, file, fileList) =>
+                    uploadSuccess(response, file, fileList, 'image_id')
+                "
+                :on-remove="
+                  (file, fileList) => uploadRemove(file, fileList, 'image_id')
+                "
+                :on-error="
+                  (err, file, fileList) =>
+                    uploadError(err, file, fileList, 'image_id')
+                "
+              >
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">
+                  文件不超过{{ formatFileSize(uploadSize) }}
+                </div>
+              </el-upload>
+            </el-form-item>
+
+            <el-form-item label="内容" prop="content">
+              <my-tinymce
+                v-model="form['content']"
+                clearable
+                placeholder="请填写内容"
+                style="width: 100%"
+              />
+            </el-form-item>
+
+            <el-form-item label="商品轮播图" prop="product_images">
+              <el-upload
+                :action="action"
+                :file-list="form['product_images']"
+                :headers="{ Authorization: `Bearer ${getToken()}` }"
+                accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                multiple
+                :limit="20"
+                :before-upload="uploadBefore"
+                :on-success="
+                  (response, file, fileList) =>
+                    uploadSuccess(response, file, fileList, 'product_images')
+                "
+                :on-remove="
+                  (file, fileList) =>
+                    uploadRemove(file, fileList, 'product_images')
+                "
+                :on-error="
+                  (err, file, fileList) =>
+                    uploadError(err, file, fileList, 'product_images')
+                "
+              >
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">
+                  文件不超过{{ formatFileSize(uploadSize) }}
+                </div>
+              </el-upload>
+            </el-form-item>
+
+            <el-form-item label="商品" prop="product_skus">
+              <el-input
+                v-model="form['product_skus']"
+                clearable
+                placeholder="请填写商品"
+                style="width: 100%"
+              />
+            </el-form-item>
+
+            <el-form-item label="排序" prop="sort">
+              <el-input-number
+                v-model="form['sort']"
+                clearable
+                placeholder="请填写排序"
+                :precision="2"
+                controls-position="right"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+
+        <div class="drawer-container__footer">
+          <el-button @click="reset">重 置</el-button>
+          <el-button type="primary" :loading="loading" @click="submit">{{
+            loading ? "提交中 ..." : "确 定"
+          }}</el-button>
+        </div>
+      </section>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { save, show } from '@/api/product/product'
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
+import { uploadSize } from '@/settings'
+import { formatFileSize } from '@/utils'
+
+export default {
+  name: 'ProductDrawer',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+
+    productCategory: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      uploadSize,
+      action: process.env.VUE_APP_UPLOAD_API,
+      loading: false,
+      visible: false,
+      form: {
+        product_category_id: '',
+
+        name: '',
+
+        price: 0,
+
+        image_id: [],
+
+        content: '',
+
+        product_images: [],
+
+        product_skus: [],
+
+        sort: 0
+      },
+      rules: {}
+    }
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    }
+  },
+  methods: {
+    uploadBefore(file) {
+      if (file.size > uploadSize) {
+        this.$message({
+          type: 'warning',
+          message: `上传图片大小超过${formatFileSize(uploadSize)}！`
+        })
+        return false
+      }
+      window.$_uploading = true
+    },
+    uploadSuccess(response, file, fileList, fieldName) {
+      window.$_uploading = false
+      fileList.forEach((file) => {
+        if (file.response?.data && !file.response?.code) {
+          file.response = file.response.data
+        }
+      })
+      this.form[fieldName] = fileList
+    },
+    uploadRemove(file, fileList, fieldName) {
+      this.form[fieldName] = fileList
+    },
+    uploadError(err, file, fileList, fieldName) {
+      window.$_uploading = false
+      this.form[fieldName] = fileList
+      this.$message({
+        type: 'warning',
+        message: err
+      })
+    },
+    formatFileSize,
+    getToken,
+    handleClose(done) {
+      this.$confirm('确定关闭窗口？')
+        .then((_) => {
+          done()
+        })
+        .catch((_) => {})
+    },
+
+    reset() {
+      this.form = {
+        product_category_id: '',
+
+        name: '',
+
+        price: '',
+
+        image_id: [],
+
+        content: '',
+
+        product_images: [],
+
+        product_skus: [],
+
+        sort: ''
+      }
+      this.$refs['elForm'].resetFields()
+    },
+    submit() {
+      if (window.$_uploading) {
+        this.$message.warning('文件正在上传中')
+        return
+      }
+
+      this.form['image_id'] = this.form['image_id'][0]?.response?.id ?? ''
+
+      this.form['product_images'] = this.form['product_images']
+        .map((i) => i.response?.id)
+        .filter((i) => i)
+
+      this.$refs['elForm'].validate(async(valid) => {
+        if (valid) {
+          this.loading = true
+          try {
+            await save(this.form)
+            this.$message.success('新增成功')
+            this.$emit('refresh')
+            this.$emit('update:isShow', false)
+            this.loading = false
+            this.reset()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.span2 {
+  grid-column: span 2;
+}
+::v-deep .el-form-item > * {
+  max-width: 100%;
+}
+.form-layout {
+  display: grid;
+  grid-gap: 2%;
+  grid-template-columns: repeat(2, 1fr);
+}
+.drawer-container {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+
+  &__form {
+    flex: 1;
+    overflow-y: scroll;
+  }
+  &__footer {
+    margin-top: 20px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/Product/components/ShowProduct.vue b/src/views/Product/components/ShowProduct.vue
new file mode 100644
index 0000000..394a3ae
--- /dev/null
+++ b/src/views/Product/components/ShowProduct.vue
@@ -0,0 +1,141 @@
+
+<template>
+    <div>
+        <el-drawer
+                :title="$route.meta.title"
+                direction="rtl"
+                size="68%"
+                :visible.sync="visible"
+                append-to-body
+                @close="$emit('update:isShow',false)">
+            <section class="drawer-container">
+                <el-descriptions class="drawer-container__desc" size="small" border ref="elDesc" :column="2" direction="vertical" :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }">
+                    
+                    <el-descriptions-item label="商品名称">
+                        {{ form['name'] }}
+                    </el-descriptions-item>
+                    
+                    <el-descriptions-item label="商品价格">
+                        {{ typeof form['price'] === 'number' ? form['price'].toFixed(2) : form['price'] }}
+                    </el-descriptions-item>
+                    
+                    <el-form-item label="封面图片" prop="image_id">
+                        <el-upload
+                          :file-list="form['image_id']"
+                          accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+                        </el-upload>
+                    </el-form-item>
+                    
+                    <el-descriptions-item label="内容" span="2">
+                        {{ form['content'] }}
+                    </el-descriptions-item>
+                    
+                    <el-form-item label="商品轮播图" prop="product_images">
+                        <el-upload
+                          :file-list="form['product_images']"
+                          accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+                        </el-upload>
+                    </el-form-item>
+                    
+                    <el-descriptions-item label="商品">
+                        {{ form['product_skus'] }}
+                    </el-descriptions-item>
+                    
+                    <el-descriptions-item label="排序">
+                        {{ typeof form['sort'] === 'number' ? form['sort'].toFixed(2) : form['sort'] }}
+                    </el-descriptions-item>
+                    
+                </el-descriptions>
+            </section>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+  import { show } from "@/api/product/product";
+
+  export default {
+    name: "ProductShow",
+    props: {
+      isShow: {
+        type: Boolean,
+        default: false,
+        required: true
+      },
+  
+  productCategory : {
+    type: Array,
+  default: () => []
+  },
+  
+  },
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      form: {
+      
+      product_category_id: '',
+      
+      name: '',
+      
+      price: '',
+      
+      image_id: [],
+      
+      content: '',
+      
+      product_images: [],
+      
+      product_skus: [],
+      
+      sort: '',
+      
+  },
+  }
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    },
+  },
+  methods: {
+    async getDetail(id) {
+      try {
+        const detail = await show({
+          id
+        })
+        for (let key in this.form) {
+          if (detail.hasOwnProperty(key)) {
+            this.form[key] = detail[key]
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .span2 {
+    grid-column: span 2;
+  }
+  ::v-deep .el-form-item > * {
+    max-width: 100%;
+  }
+  .drawer-container {
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      flex: 1;
+    }
+  }
+</style>
diff --git a/src/views/ProductCategory/ProductCategory.vue b/src/views/ProductCategory/ProductCategory.vue
new file mode 100644
index 0000000..26d4eea
--- /dev/null
+++ b/src/views/ProductCategory/ProductCategory.vue
@@ -0,0 +1,403 @@
+
+<template>
+  <div>
+    <el-card shadow="never" style="margin-top: 20px;">
+      <template #header>
+        <slot name="header">
+          <vxe-toolbar ref="toolbar" :export="isHasAuth('export')" :print="isHasAuth('print')" custom>
+            <template #buttons>
+              <el-button
+                v-if="isHasAuth('create')"
+                icon="el-icon-plus"
+                type="primary"
+                size="small"
+                @click="isShowAdd = true"
+              >新增</el-button>
+              <el-button
+                v-if="isHasAuth('search')"
+                icon="el-icon-search"
+                type="primary"
+                plain
+                size="small"
+                @click="getList"
+              >搜索</el-button>
+            </template>
+          </vxe-toolbar>
+        </slot>
+      </template>
+
+      <vxe-table
+        ref="table"
+        stripe
+        style="margin-top: 10px"
+        :loading="loading"
+        :height="tableHeight"
+        keep-source
+        show-overflow
+        :menu-config="{
+          className: 'my-menus',
+          body: {
+            options: [
+              [
+                { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
+                { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
+              ],
+            ]
+          }
+        }"
+        :row-config="{ isCurrent: true, isHover: true }"
+        :column-config="{ resizable: true }"
+        :export-config="{}"
+        :edit-rules="validRules"
+        :edit-config="{
+          trigger: 'manual',
+          mode: 'row',
+          showStatus: true,
+          isHover: true,
+          autoClear: false,
+        }"
+        :tree-config="{
+
+        }"
+
+        :align="allAlign"
+
+        :data="tableData"
+        @menu-click="contextMenuClickEvent"
+      >
+        <vxe-column type="seq" width="58" align="center" tree-node />
+
+        <vxe-column
+          header-align="center"
+          field="name"
+          width="160"
+          title="商品分类名称"
+          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+        />
+
+        <vxe-column
+          align="center"
+          field="pid"
+          width="160"
+          title="上级分类"
+          :edit-render="{ name: 'VxeTreeSelect', options: [{ id: 0, title: '根结点' ,children: tableData }], props: { multiple: false }, optionProps: { value: 'id', label: 'title' } }"
+        />
+
+        <vxe-column
+          field="image_id"
+          min-width="180"
+          title="封面图片"
+          header-align="center"
+          align="left"
+          :edit-render="{}"
+        >
+          <template #default="{ row }">
+            <vxe-upload v-model="row['image']" name-field="original_name" readonly progress-text="{percent}%" :more-config="{ maxCount: 1, layout: 'horizontal' }" :show-button-text="false" />
+          </template>
+          <template #edit="{ row }">
+            <vxe-upload
+              v-model="row['image']"
+              name-field="original_name"
+              progress-text="{percent}%"
+              :more-config="{ maxCount: 1, layout: 'horizontal' }"
+              :limit-size="uploadSize / 1024 / 1024"
+              :show-button-text="false"
+              :upload-method="({file}) => uploadMethod(file)"
+            />
+          </template>
+        </vxe-column>
+
+        <vxe-column field="operate" header-align="center" title="操作" min-width="220">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button
+                size="small"
+                type="primary"
+                @click="saveRowEvent(row)"
+              >保存</el-button>
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                @click="cancelRowEvent(row)"
+              >取消</el-button>
+            </template>
+            <template v-else>
+              <el-button
+                v-if="isHasAuth('detail')"
+                size="small"
+                type="primary"
+                plain
+                @click="detail(row)"
+              >查看</el-button>
+              <el-button
+                v-if="isHasAuth('edit')"
+                size="small"
+                type="warning"
+                @click="editRowEvent(row)"
+              >编辑</el-button>
+              <el-button
+                v-if="isHasAuth('delete')"
+                size="small"
+                type="danger"
+                @click="destroyRowEvent(row)"
+              >删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+    </el-card>
+
+    <AddProductCategory
+      ref="AddProductCategory"
+
+      :table-data="tableData"
+
+      :is-show.sync="isShowAdd"
+      @refresh="getList"
+    />
+    <ShowProductCategory
+      ref="ShowProductCategory"
+
+      :is-show.sync="isShowDetail"
+    />
+
+  </div>
+</template>
+
+<script>
+import VxeUI from 'vxe-pc-ui'
+
+import { authMixin } from '@/mixin/authMixin'
+import { uploadSize } from '@/settings'
+import { deepCopy } from '@/utils'
+import { destroy, index, save } from '@/api/product-category/product-category'
+import AddProductCategory from './components/AddProductCategory.vue'
+import ShowProductCategory from './components/ShowProductCategory.vue'
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ProductCategory',
+  components: {
+
+    AddProductCategory,
+    ShowProductCategory
+  },
+  mixins: [authMixin],
+  data() {
+    return {
+      uploadSize,
+      examineKey: 0,
+      isShowAdd: false,
+      isShowDetail: false,
+
+      loading: false,
+      tableHeight: 400,
+      select: {
+        page: 1,
+        page_size: 20,
+        keyword: '',
+        show_relation: ['image'],
+        is_tree: 1
+      },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      form: {
+        id: '',
+
+        name: '',
+
+        pid: '',
+
+        image_id: []
+
+      },
+      validRules: {
+
+      }
+
+    }
+  },
+  computed: {
+    isActiveStatus() {
+      return function(row) {
+        if (this.$refs['table']) {
+          return this.$refs['table'].isEditByRow(row)
+        }
+      }
+    },
+    isHasAuth() {
+      return function(auth) {
+        return this.auths_auth_mixin.indexOf(auth) !== -1
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {
+    this.bindToolbar()
+    this.calcTableHeight()
+  },
+  methods: {
+    calcTableHeight() {
+      const clientHeight = document.documentElement.clientHeight
+      const cardTitle = document.querySelector('.el-card__header')?.getBoundingClientRect()?.height
+      const search = document.querySelector('.vxe-toolbar')?.getBoundingClientRect()?.height
+      const paginationHeight = (document.querySelector('.el-pagination')?.getBoundingClientRect()?.height ?? 0) + 10 // 分页的高度
+      const topHeight = 50 // 页面 头部
+      const padding = 80
+      const margin = 20
+      this.tableHeight =
+          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin
+    },
+    contextMenuClickEvent({ menu, row, column }) {
+      switch (menu.code) {
+        case 'copy':
+          // 示例
+          if (row && column) {
+            if (VxeUI.clipboard.copy(row[column.field])) {
+              this.$message.success('已复制到剪贴板！')
+            }
+          }
+          break
+        case 'remove':
+          if (row && column) {
+            this.destroyRowEvent(row)
+          }
+        default:
+      }
+    },
+    async detail(row) {
+      await this.$refs['ShowProductCategory'].getDetail(row.id)
+      this.isShowDetail = true
+    },
+
+    uploadMethod(file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      window.$_uploading = true
+      return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
+        headers: {
+          Authorization: `Bearer ${getToken()}`
+        }
+      }).then((response) => {
+        window.$_uploading = false
+        if (response.status === 200 && !response.data.code) {
+          return {
+            response: response.data,
+            name: response.data.original_name,
+            url: response.data.url
+          }
+        } else {
+          this.$message.error('上传失败')
+        }
+      }).catch(_ => {
+        window.$_uploading = false
+      })
+    },
+    bindToolbar() {
+      this.$nextTick(() => {
+        if (this.$refs['table'] && this.$refs['toolbar']) {
+          this.$refs['table'].connect(this.$refs['toolbar'])
+        }
+      })
+    },
+
+    editRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].setEditRow(row)
+      }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs['table'].revertData(row)
+        })
+      }
+    },
+
+    async getList() {
+      this.loading = true
+      try {
+        const res = await index(this.select, false)
+        this.tableData = res
+        this.total = res.total
+        this.loading = false
+      } catch (err) {
+        console.error(err)
+        this.loading = false
+      }
+    },
+
+    async saveRowEvent(row) {
+      if (window.$_uploading) {
+        this.$message.warning('文件正在上传中')
+        return
+      }
+      try {
+        const errMap = await this.$refs['table'].validate()
+        if (errMap) {
+          throw new Error(errMap)
+        }
+        await this.$confirm('确认保存？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        await this.$refs['table'].clearEdit()
+        const form = deepCopy(this.form)
+        for (const key in form) {
+          form[key] = row[key]
+        }
+
+        form['image_id'] = row['image'][0]?.response?.id ?? ''
+
+        this.loading = true
+        await save(form, false)
+        await this.getList()
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    },
+    async destroyRowEvent(row) {
+      try {
+        await this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        this.loading = true
+        if (row.id) {
+          await destroy({
+            id: row.id
+          }, false)
+          await this.getList()
+        } else {
+          console.log(row)
+          this.tableData.splice(
+            this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+            1
+          )
+        }
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .el-card__header {
+    padding: 6px 20px;
+  }
+  ::v-deep .el-tag + .el-tag {
+    margin-left: 4px;
+  }
+</style>
diff --git a/src/views/ProductCategory/components/AddProductCategory.vue b/src/views/ProductCategory/components/AddProductCategory.vue
new file mode 100644
index 0000000..172fbe5
--- /dev/null
+++ b/src/views/ProductCategory/components/AddProductCategory.vue
@@ -0,0 +1,211 @@
+
+<template>
+    <div>
+        <el-drawer
+                :title="$route.meta.title"
+                direction="rtl"
+                size="68%"
+                :visible.sync="visible"
+                append-to-body
+                :before-close="handleClose"
+                @close="$emit('update:isShow',false)">
+            <section class="drawer-container">
+                <el-form class="drawer-container__form" ref="elForm" :model="form" :rules="rules" label-position="top" label-width="120px" size="small">
+                    <div class="form-layout">
+                        
+                                 <el-form-item label="商品分类名称" prop="name">
+                                   <el-input v-model="form['name']" clearable placeholder="请填写商品分类名称" style="width: 100%;"></el-input>
+                                 </el-form-item>
+                               
+                                    <el-form-item label="上级分类" prop="pid">
+                                      <vxe-tree-select v-model="form['pid']" placeholder="请选择上级分类" :options="[{ id: 0, title: '根结点' ,children: tableData }]" clearable :multiple="false" :option-props="{ value: 'id', label: 'title' }" style="width: 100%;"></vxe-tree-select>
+                                    </el-form-item>
+                               
+                                    <el-form-item label="封面图片" prop="image_id">
+                                        <el-upload :action="action"
+                                                   :file-list="form['image_id']"
+                                                   :headers="{ Authorization: `Bearer ${getToken()}`}"
+                                                   accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                                                   multiple
+                                                   :limit="1"
+                                                   :before-upload="uploadBefore"
+                                                   :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'image_id')"
+                                                   :on-remove="(file, fileList) => uploadRemove(file, fileList, 'image_id')"
+                                                   :on-error="(err, file, fileList) => uploadError(err, file, fileList, 'image_id')">
+                                            <el-button size="small" type="primary">点击上传</el-button>
+                                            <div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
+                                        </el-upload>
+                                    </el-form-item>
+                             
+                    </div>
+                </el-form>
+
+                <div class="drawer-container__footer">
+                    <el-button @click="reset">重 置</el-button>
+                    <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+                </div>
+            </section>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+  import { save, show } from "@/api/product-category/product-category";
+  import axios from "axios";
+  import { getToken } from "@/utils/auth";
+  import { uploadSize } from "@/settings";
+  import { formatFileSize } from "@/utils";
+
+  export default {
+  name: "ProductCategoryDrawer",
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    
+  },
+  data() {
+    return {
+      uploadSize,
+      action: process.env.VUE_APP_UPLOAD_API,
+      loading: false,
+      visible: false,
+      form: {
+        
+          name: '',
+        
+          pid: '',
+        
+          image_id: [],
+        
+      },
+      rules: {
+          
+      },
+    }
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    },
+  },
+  methods: {
+    uploadBefore(file) {
+      if (file.size > uploadSize) {
+        this.$message({
+          type: "warning",
+          message: `上传图片大小超过${formatFileSize(uploadSize)}！`,
+        });
+        return false;
+      }
+      window.$_uploading = true
+    },
+    uploadSuccess(response, file, fileList, fieldName) {
+      window.$_uploading = false
+      fileList.forEach((file) => {
+        if (file.response?.data && !file.response?.code) {
+          file.response = file.response.data;
+        }
+      });
+      this.form[fieldName] = fileList
+    },
+    uploadRemove(file, fileList, fieldName) {
+      this.form[fieldName] = fileList
+    },
+    uploadError(err, file, fileList, fieldName) {
+      window.$_uploading = false
+      this.form[fieldName] = fileList
+      this.$message({
+        type: "warning",
+        message: err,
+      });
+    },
+    formatFileSize,
+    getToken,
+    handleClose(done) {
+      this.$confirm('确定关闭窗口？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+
+    reset() {
+      this.form = {
+          
+          name: '',
+          
+          pid: '',
+          
+          image_id: [],
+          
+      }
+      this.$refs['elForm'].resetFields()
+    },
+    submit() {
+      if (window.$_uploading) {
+        this.$message.warning("文件正在上传中")
+        return
+      }
+      
+             this.form['image_id'] = this.form['image_id'][0]?.response?.id ?? ''
+
+          
+      this.$refs['elForm'].validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            await save(this.form)
+            this.$message.success('新增成功')
+            this.$emit('refresh')
+            this.$emit('update:isShow', false)
+            this.loading = false
+            this.reset()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.span2 {
+  grid-column: span 2;
+}
+::v-deep .el-form-item > * {
+  max-width: 100%;
+}
+.form-layout {
+  display: grid;
+  grid-gap: 2%;
+  grid-template-columns: repeat(2, 1fr);
+}
+.drawer-container {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+
+  &__form {
+    flex: 1;
+    overflow-y: scroll;
+  }
+  &__footer {
+    margin-top: 20px;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/ProductCategory/components/ShowProductCategory.vue b/src/views/ProductCategory/components/ShowProductCategory.vue
new file mode 100644
index 0000000..94ef555
--- /dev/null
+++ b/src/views/ProductCategory/components/ShowProductCategory.vue
@@ -0,0 +1,104 @@
+
+<template>
+  <div>
+    <el-drawer
+      :title="$route.meta.title"
+      direction="rtl"
+      size="68%"
+      :visible.sync="visible"
+      append-to-body
+      @close="$emit('update:isShow',false)"
+    >
+      <section class="drawer-container">
+        <el-descriptions ref="elDesc" class="drawer-container__desc" size="small" border :column="2" direction="vertical" :label-style="{ 'font-weight': '500', 'font-size': '15px' }">
+
+          <el-descriptions-item label="商品分类名称">
+            {{ form['name'] }}
+          </el-descriptions-item>
+
+          <el-form-item label="封面图片" prop="image_id">
+            <el-upload
+              :file-list="form['image_id']"
+              accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            />
+          </el-form-item>
+
+        </el-descriptions>
+      </section>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { show } from '@/api/product-category/product-category'
+
+export default {
+  name: 'ProductCategoryShow',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+
+  },
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      form: {
+
+        name: '',
+
+        pid: '',
+
+        image_id: []
+
+      }
+    }
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    }
+  },
+  methods: {
+    async getDetail(id) {
+      try {
+        const detail = await show({
+          id
+        })
+        for (const key in this.form) {
+          if (detail.hasOwnProperty(key)) {
+            this.form[key] = detail[key]
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .span2 {
+    grid-column: span 2;
+  }
+  ::v-deep .el-form-item > * {
+    max-width: 100%;
+  }
+  .drawer-container {
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      flex: 1;
+    }
+  }
+</style>