jinchao_front/src/views/order/category.vue

<template>
    <div class="container">
        <basic-crumb></basic-crumb>
        <!-- 产品新增-大类 -->
        <div class="title">请点击选择产品大类</div>
        <div class="prodct_list">
            <div class="prodct_item" @click="changePage(item)"
        v-for="item in productArr" :key="item.id">
                {{item.name}}
            </div>
            <!-- <div class="prodct_item" @click="handleAdd" style="font-size:3vw;">
                +
            </div> -->
        </div>
        <el-dialog append-to-body :title="dialogTitle" :visible.sync="formDialog" width="550px">
            <el-form ref="addForm" :model="formData" label-width="5vw" :rules="formRules">
                <el-form-item label="大类" prop="name">
                <el-input placeholder="请输入大类名称" v-model="formData.name"></el-input>
                </el-form-item>
               <el-form-item label="简称" prop="shortName">
                <el-input placeholder="请输入简称" v-model="formData.shortName"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="formDialog = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 右键菜单 -->
    <!-- <div class="context-menu" v-show="menuVisible" :style="menuStyle" @click.stop>
      <div class="menu-item" @click="handleEdit">修改</div>
      <div class="menu-item" @click="handleDelete">删除</div>
    </div> -->
    </div>
</template>

<script>
import basicCrumb from "@/components/basic-crumb/main"
import {getCategory,addCategory, deleteCategory , updateCategory } from '@/api/product/product'
import { mapGetters } from "vuex";
export default {
    components:{
        basicCrumb
    },
    data(){
        return{
            productArr:[],
            addDialog:false,
            addForm:{},
            formRules:{
              name: [{ required: true, message: '请输入大类名称', trigger: 'blur' }, { max: 8, message: '大类名称最多输入8个字符', trigger: 'blur' }],
              shortName: [{ required: true, message: '请输入简称', trigger: 'blur' },
              { min: 1, message: '简称最少输入1个字符', trigger: 'blur' },
              { max: 3, message: '简称最多输入3个字符', trigger: 'blur' },
                  {
                        pattern: /^[A-Z]+$/,
                        message: '简称只能输入英文大写字母',
                        trigger: ['blur', 'change']
                    }
              ]
          },
            // 右键菜单相关
          menuVisible: false,
          menuBottom: 0,
          menuRight: 0,
          currentItem: null,// 当前右键操作的大类项
          formDialog: false,    // 弹窗显示状态
          dialogTitle: '',      // 动态弹窗标题（新增/修改）
          formData: {},
          menuStyle:{}
        }
    },
    computed: {
      ...mapGetters(["routeData"])
    },
    mounted(){
        console.log('this.$route-------大',this.$route)
      console.log('this.routeData------------大', this.routeData)
      const routeDataN = (this.routeData || []).filter(item => {
    return !['/order/category', '/order/subcategory'].includes(item.url);
  });
            console.log("routeDataN",routeDataN)
            let arr = [
                ...routeDataN,
               
            ]
            this.$store.commit('SET_ROUTE_DATA', arr)

      this.getCategoryList()
        // 点击页面空白处关闭右键菜单
      document.addEventListener('click', this.closeContextMenu)
    },
  methods: {
        getCategoryList(){
            getCategory({
                parentId:0,
                size:9999,
                current:1
            }).then(res =>{
                res.data.data.records.map(item =>{
                    return{
                        ...item,
                        url:"/category"
                    }
                })
                this.productArr = res.data.data.records
            })
      },
      // 获取小类
      //    getCategoryList(id){
      //   this.categoryId = id
      //   getCategory(
      //     {
      //       parentId:id,
      //       size:9999,
      //       current:1
      //     }
      //   ).then(res =>{
      //     this.productArr = res.data.data.records
      //   })
      // },
        handleAdd(){
          this.dialogTitle = '新增大类' // 设置弹窗标题
           if (this.$refs.addForm) {
            this.$refs.addForm.resetFields();
          }
          this.formData = { name: '', parentId: 0 , shortName: '',} // 清空表单，新增无id
          this.formDialog = true // 打开弹窗
      },
      // 处理修改
      handleEdit() {
        this.menuVisible = false // 关闭右键菜单
        this.dialogTitle = '修改大类' // 设置弹窗标题
        if (this.$refs.addForm) {
          this.$refs.addForm.resetFields();
        }
        // 填充表单数据（带id，用于修改）
        this.formData = {
          id: this.currentItem.id,
          name: this.currentItem.name,
          parentId: 0, // 大类parentId固定为0
          shortName: this.currentItem.shortName || '',
        }

        console.log("currentItem", this.currentItem)
        this.formDialog = true // 打开弹窗
      },
      // 处理删除
      handleDelete() {
        // 关闭右键菜单
        this.menuVisible = false
        // 先校验是否有子分类
        getCategory({
          parentId: this.currentItem.id,
          size: 9999,
          current: 1
        }).then(res => {
          if (res.data.code == 200) {
            const productArr = res.data.data.records || []
            // 有子分类，提示不能删除
            if (productArr.length>=1) {
              this.$message.warning('该大类下存在小类，无法删除')
            } else {
              // 无子分类，确认删除
              this.$confirm('确定要删除该大类吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                // 调用删除接口
                deleteCategory({
                  ids: this.currentItem.id
                }).then(res => {
                  if (res.data.code == 200) {
                    this.$message.success('删除成功')
                    this.getCategoryList()
                  }
                })
              }).catch(() => {
                this.$message.info('已取消删除')
              })
            }
          }
        })
      },
        // 打开右键菜单
      openContextMenu(event, item) {
        // 阻止默认右键菜单
        event.preventDefault()
        // 记录当前操作项
        this.currentItem = item
        // 记录当前点击的DOM元素
        this.currentItemDom = event.currentTarget

        // 关键修改4：计算菜单的位置（固定在元素右下角）
        const rect = this.currentItemDom.getBoundingClientRect()
        this.menuStyle = {
          position: 'fixed',
          left: `${rect.right - 60 }px`, // 120是菜单宽度
          top: `${rect.bottom}px`, // bottom:0 对应top为元素底部
          zIndex: 9999
        }
        // 显示菜单
        this.menuVisible = true
      },

      // 关闭右键菜单
      closeContextMenu() {
        this.menuVisible = false
      },
        changePage(val){

          // const routeDataN = this.routeData
          // 应该去掉 /order/category 和  /order/subcategory
 const routeDataN = (this.routeData || []).filter(item => {
    return !['/order/category', '/order/subcategory'].includes(item.url);
  });
            console.log("routeDataN",routeDataN)

            let arr = [
                ...routeDataN,
                {name:val.name,url:'/order/category',categoryId:val.id}
            ]
            this.$store.commit('SET_ROUTE_DATA', arr)
              this.$router.push({
            path: '/order/subcategory', query: {
              isLast: true,
              categoryId: val.id,
              sort:this.$route.query.sort ? this.$route.query.sort:'',
              productEdit:this.$route.query.productEdit ? this.$route.query.productEdit:'',
              mode: this.$route.query.mode ? this.$route.query.mode:'',
              orderId:this.$route.query.orderId ? this.$route.query.orderId:'',
              customerId:this.$route.query.customerId ? this.$route.query.customerId:'',
            } });
        },
        submit(){
            this.$refs.addForm.validate(valid =>{
              if (valid) {
                  // 判断是否有id：有=修改，无=新增
                const id = this.formData.id

                if (id) {
                  updateCategory({
                    id:id,
                    parentId: 0,
                    name: this.formData.name,
                     shortName: this.formData.shortName
                  }).then(res => {
                    if (res.data.code == 200) {
                      this.$message.success('修改成功')
                      this.getCategoryList()
                      this.formDialog = false
                    }
                  })

                } else {
                  addCategory({
                    parentId: 0,
                    name: this.formData.name,
                     shortName: this.formData.shortName
                  }).then(res => {
                    if (res.data.code == 200) {
                      this.$message.success('新增成功')
                      this.getCategoryList()
                      this.formDialog = false
                    }
                  })
                }

                }
            })
        }
  },
    beforeDestroy() {
    // 移除事件监听，防止内存泄漏
    document.removeEventListener('click', this.closeContextMenu)
  },
}
</script>

<style scoped lang="scss">
.container{
    width: 99%;
    height: 99%;
    background: rgb(255, 255, 255);
    margin: 0 auto;
    margin-top: 8px;
    padding: 20px !important;
    overflow-y: auto;

    .title{
        font-size: 1.5vw;
        margin-top: 2.1vw;
        margin-left: 3.4vw;
        color: #101010;
    }



  .prodct_list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    // 移除左右 padding，改为用 auto 实现水平居中
    padding: 0;
    // 让容器在页面中水平居中
    margin: 15px auto 0;
    // 固定一行5个的总宽度（元素宽度+间距）
    width: calc( (10.42vw + 5vw) * 5 - 5vw );
    // 让元素均匀分布，两侧留白一致
    justify-content: flex-start;
    gap: 5vw;

    .prodct_item{
        width: 10.42vw;
        height: 10.42vw;
        border-radius: 2.08vw;
        background: #f1ab46;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 2.5vw;
        text-align: center;
        cursor: pointer;
        &:hover {
          background: #ecb76c;
        }
    }
}  // 右键菜单样式
        .context-menu {
          position: fixed;
          width: 120px;
          background: #fff;
          border: 1px solid #e6e6e6;
          border-radius: 4px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          z-index: 9999;

          .menu-item {
            padding: 8px 16px;
            cursor: pointer;

            &:hover {
              background: #f5f5f5;
            }

            &:not(:last-child) {
              border-bottom: 1px solid #e6e6e6;
            }
          }
        }

}

</style>