10.31修改

src/router/index.ts

@@ -8,21 +8,19 @@ const router = createRouter({
     routes, // `routes: routes` 的缩写
 })
 //路由的请求拦截器 
+//to 是即将进入的路由对象，from 是当前离开的路由对象，next 是一个函数，调用它会继续导航。
 router.beforeEach((to, from, next) => {
-    const store = userStore()
+    const store = userStore();
-    if (to.name == 'login') {
+    if (to.name === 'login') {
-        //当回到登录页时，清空pinia
+        // 当导航到登录页时清空 Pinia 状态
-        store.$reset()
+        store.$reset();
-        next()
+        next();
-        return
+    } else if (store.loginUser.userRole === "notLogin") {
+        // 如果未登录则重定向到登录页
+        next({ name: 'login' });
+    } else {
+        // 允许已登录用户导航
+        next();
     }
-    if (store.loginUser.userRole == "notLogin") {
+});
-        router.back()
-        return
-    }
-    if (store.loginUser.userRole != "notLogin") {
-        next()
-        return
-    }
-})
 export default router

src/views/Commodity/TypeManagement.vue

@@ -1,143 +1,161 @@
 <template>
   <div style="margin-bottom: 10px;">
-      <el-button type="success" @click="Add_type">添加类别</el-button>
+    <el-button type="success" @click="showForm">添加类别</el-button>
     <el-button type="danger" @click="">删除类别</el-button>
   </div>
 
-  <el-dialog
+  <el-dialog v-model="dialogVisible" title="商品类别" width="500">
-    v-model="dialogVisible"
+    <el-form :model="typeForm" label-width="auto" style="max-width: 600px">
-    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="typeForm.typeUrl">
-    <div v-if="form.img">
+          <img :src="typeForm.typeUrl" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;" />
-            <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-input v-model="typeForm.typeName" />
       </el-form-item>
       <el-form-item label="备注">
-      <el-input v-model="form.tips" />
+        <el-input v-model="typeForm.typeIntro" />
       </el-form-item>
     </el-form>
 
-    <template #footer>
+    <template #footer #default="{ row, $index }">
       <div class="dialog-footer">
-        <el-button @click="cancel" >取消</el-button>
+        <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
+        <el-button type="primary" @click="addOrUpdateType">
           提交
         </el-button>
       </div>
     </template>
   </el-dialog>
-  <el-table :data="tableData" border style="width: 100%;"
+  <!-- 数据展示层 -->
-            :header-cell-style="{'text-align':'center'}" 
+  <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
-            @selection-change="handleSelectionChange" 
+    @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
-            :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">
+    <el-table-column prop="typeUrl" label="类别图片" width="300">
-      <template #default="scope"><img :src="scope.row.img" alt="" style="height: 50px;"></template>
+      <!-- 插槽，拿到父组件的值typeUrl -->
+      <!-- scope 提供了关于当前行的信息 -->
+      <template #default="scope"><img :src="scope.row.typeUrl" alt="" style="height: 50px;"></template>
     </el-table-column>
-    <el-table-column prop="type_name" label="类别名称" width="150" ></el-table-column>
+    <el-table-column prop="typeName" label="类别名称" width="150"></el-table-column>
-    <el-table-column prop="tips" label="备注" ></el-table-column>
+    <el-table-column prop="typeIntro" label="备注"></el-table-column>
-    <el-table-column prop="operation" label="操作" >
+    <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="success" @click="editShowForm(scope.$index, scope.row)">修改类别</el-button>
-        <el-button type="danger" @click="Delete_type">删除类别</el-button>
+        <!-- scope.$index是当前行 第一行为0 -->
+        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+          title="是否确认删除" @confirm="Delete_type(scope.row.id)" width=180>
+          <template #reference>
+            <el-button style="height: 25px" class="ml-5" type="danger">删除类别</el-button>
+          </template>
+        </el-popconfirm>
       </template>
     </el-table-column>
   </el-table>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ElMessage } from 'element-plus';
-import { userStore } from '../../store/userStore';
+import { onMounted, ref } from 'vue'
+import myAxios from '@/api/myAxios';
 
-const store = userStore()
-
-const dialogImageUrl = ref('');
-const disabled = ref(false);
-const imageUrl = ref('')
 const selectedItems = ref([])
 const dialogVisible = ref(false)
-const form = ref({
+//表单数据
-  img: '',
+const typeForm = ref({
-  type_name: '',
+  id: 0,
-  tips: ''
+  typeName: '',
+  typeUrl: '',
+  typeIntro: ''
 })
-const tableData = ref([
+//表格数据
-  {
+const tableData = ref([])
-    img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
+//旗帜 表示点击添加类别(0)  和  点击修改类别两个状态(1)，因为我们共用一个表格 
-    type_name: '材料包',
+const flag = ref(0)
-    tips: '提供用户自定义DIY',
-  }
-])
 
-const Add_type =()=>{
+//老套路 页面加载必须获取类别列表
-    dialogVisible.value = true;
+onMounted(() => {
-    if(form.value.type_name) {
+  getTypeList()
-      form.value = {
+})
-        img: '',
+//获取类别列表
-        type_name: '',
+const getTypeList = async () => {
-        tips: ''
+  const res = await myAxios.post('/category/list')
+  // console.log(res.data.data)
+  if (res.data.code === 1) {
+    tableData.value = res.data.data
   }
-    }
-    tableData.value.push(form.value)
 }
+
+//新增类别
+const showForm = async () => {
+  dialogVisible.value = true;
+  flag.value = 0
+}
+//取消
 const cancel = () => {
   dialogVisible.value = false
-  resetForm();
+  resetForm()
 }
-
+//新增类别  很繁杂 不知道怎么改 只能不断判空
+const addOrUpdateType = async () => {
+  //判空
+  if (typeForm.value.typeName?.indexOf(' ') !== -1 ||
+    typeForm.value.typeName == '' || typeForm.value.typeUrl == '') {
+    ElMessage({
+      type: 'warning',
+      message: '不能为空格/空字符串'
+    })
+    return
+  }
+  //取消展示表单
+  dialogVisible.value = false;
+  if (flag.value === 0) {
+    const res = await myAxios.post('/category/add', {
+      //对齐后端请求体
+      typeName: typeForm.value.typeName,
+      typeUrl: typeForm.value.typeUrl.substring(0, 10),
+      typeIntro: typeForm.value.typeIntro
+    })
+    if (res.data.code === 1) {
+      //提交成功后，之间重置表格
+      resetForm()
+    } else {
+      ElMessage.error('提交失败')
+    }
+  }
+  if( flag.value === 1 ) {
+    const res = await myAxios.post('/category/update',{
+      id : typeForm.value.id,
+      typeName: typeForm.value.typeName,
+      typeUrl: typeForm.value.typeUrl,
+      typeIntro: typeForm.value.typeIntro
+    })
+    if (res.data.code === 1) {
+      //提交成功后，之间重置表格
+      ElMessage({
+        type: 'success',
+        message: '更新成功'
+      })
+    } else {
+      ElMessage.error('更新失败')
+    }
+  }
+  getTypeList()
+}
+//重置表单
 const resetForm = () => {
-  form.value = {
+  typeForm.value = {
-        img: '',
+    id: 0,
-        type_name: '',
+    typeName: '',
-        tips: ''
+    typeUrl: '',
+    typeIntro: ''
   }
 };
-
-// const handleClose = (done: () => void) => {
-//   ElMessageBox.confirm('确定不添加商品类别吗?')
-//     .then(() => {
-//       done()
-//     })
-//     .catch(() => {
-//       // catch error
-//     })
-// }
 const handleSelectionChange = (row: any) => {
   selectedItems.value = JSON.parse(JSON.stringify(row))
 }
-
+//图片文件上传
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement;
   const file = target.files?.[0];
@@ -145,25 +163,31 @@ const handleFileUpload = (event: Event) => {
     const reader = new FileReader();
     reader.onload = (e) => {
       if (e.target?.result) {
-        form.value.img = e.target.result as string; // 将图片URL赋值给表单
+        typeForm.value.typeUrl = e.target.result as string; // 将图片URL赋值给表单
       }
     };
     reader.readAsDataURL(file); // 读取文件为Data URL
   }
 };
-const Edit_type =(index: number, row: any)=>{
+const editShowForm = (index: number, row: any) => {
   dialogVisible.value = true
-  console.log(index,row)
+  typeForm.value = row
-  form.value = row
+  flag.value = 1
+  console.log(row)
 }
-const Delete_type =()=>{
+//删除类别  请求体里只传id即可
-
+const Delete_type = async (index: number) => {
-}
+  console.log(typeof index)
-const handleEdit = (index: number, row: any) => {
+  const res = await myAxios.post('/category/delete', { id: index })
-  console.log(index, row)
+  console.log(res)
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+  }
+  getTypeList()
 }
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>