商品类别管理

src/layout/components/Aside.vue

@@ -47,6 +47,11 @@
               <el-icon><UserFilled /></el-icon>
               <span slot="title">商品中心</span>
             </el-menu-item>
+
+            <el-menu-item index="/TypeManagement">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">类别管理</span>
+            </el-menu-item>
           </el-sub-menu>
 
         </el-menu>

src/router/routes.ts

@@ -29,6 +29,11 @@ export const routes = [
                 path: '/MerchandiseCenter',
                 name: '商品中心',
                 component: ()=> import("../views/Commodity/MerchandiseCenter.vue")
+            },
+            {
+                path: '/TypeManagement',
+                name: '类别管理',
+                component: ()=> import("../views/Commodity/TypeManagement.vue")
             }
         ]
     }

src/views/Commodity/TypeManagement.vue

@@ -0,0 +1,152 @@
+<template>
+    <div style="margin-bottom: 10px;">
+      <el-button type="success" @click="Add_type">新增类别</el-button>
+      <el-button type="danger" @click="">删除类别</el-button>
+    </div>
+
+  <el-dialog
+    v-model="dialogVisible"
+    title="商品类别"
+    width="500"
+  >
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+  <el-form-item label="类别图标">
+    <!-- <img src="https://s21.ax1x.com/2024/10/24/pAdzjZ6.png" alt="" @click="handleFileUpload"> -->
+    <div v-if="form.img">
+            <img :src="form.img" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;"/>
+          </div>
+    <input type="file" @change="handleFileUpload" accept="image/*" />
+    <!-- <el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
+    <el-icon><Plus /></el-icon> -->
+    <!-- 上传文件 -->
+    <!-- <template #file="{ file }">
+      <div>
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+        <span class="el-upload-list__item-actions">
+          <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+          >
+            <el-icon><zoom-in /></el-icon>
+          </span>
+          <span
+              v-if="!disabled"
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file)"
+          >
+            <el-icon><Delete /></el-icon>
+          </span>
+        </span>
+      </div>
+    </template> -->
+  <!-- </el-upload> -->
+  </el-form-item>
+    <el-form-item label="类别名">
+      <el-input v-model="form.type_name" />
+    </el-form-item>
+    <el-form-item label="备注">
+      <el-input v-model="form.tips" />
+    </el-form-item>
+  </el-form>
+  
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <el-table :data="tableData" border style="width: 100%;"
+            :header-cell-style="{'text-align':'center'}" 
+            @selection-change="handleSelectionChange" 
+            :cell-style="{'text-align':'center' ,'font-size' : '16px'}">
+    <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column prop="img" label="类别图片" width="300">
+      <template #default="scope"><img :src="scope.row.img" alt="" style="height: 50px;"></template>
+    </el-table-column>
+    <el-table-column prop="type_name" label="类别名称" width="150" ></el-table-column>
+    <el-table-column prop="tips" label="备注" ></el-table-column>
+    <el-table-column prop="operation" label="操作" >
+      <template #default="scope">
+        <el-button type="success" @click="Edit_type(scope.$index,scope.row)">修改类别</el-button>
+        <el-button type="danger" @click="Delete_type">删除类别</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import { ref , reactive} from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import type { UploadFile } from 'element-plus';
+
+const dialogImageUrl = ref('');
+const disabled = ref(false);
+const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
+const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
+const imageUrl = ref('')
+const selectedItems = ref([])
+const dialogVisible = ref(false)
+const form = ref({
+  img: '',
+  type_name: '',
+  tips: ''
+})
+
+const handleSelectionChange = (row: any) => {
+  selectedItems.value = JSON.parse(JSON.stringify(row))
+}
+
+const Add_type =()=>{
+    dialogVisible.value = true;
+}
+const tableData = [
+  {
+    img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
+    type_name: 'Tom',
+    tips: 'No. 189, Grove St, Los Angeles',
+  }
+]
+
+// const handleClose = (done: () => void) => {
+//   ElMessageBox.confirm('确定不添加商品类别吗?')
+//     .then(() => {
+//       done()
+//     })
+//     .catch(() => {
+//       // catch error
+//     })
+// }
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target?.result) {
+        form.value.img = e.target.result as string; // 将图片URL赋值给表单
+      }
+    };
+    reader.readAsDataURL(file); // 读取文件为Data URL
+  }
+};
+const Edit_type =(index: number, row: any)=>{
+  dialogVisible.value = true
+  console.log(index,row)
+  form.value = row
+}
+const Delete_type =()=>{
+
+}
+const handleEdit = (index: number, row: any) => {
+  console.log(index, row)
+}
+</script>
+
+<style scoped>
+
+</style>