mall4vs-bbc/src/views/modules/prod/category-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.categoryId ? '新增'+name : '修改'+name"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <p v-if="parentName">{{typeName}}</p>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item
        v-if="dataForm.type !== 2"
        label="分类名称"
        prop="categoryName"
        style="width:280px;"
      >
        <el-input
          v-model="dataForm.categoryName"
          controls-position="right"
          maxlength="8"
          show-word-limit
          label="分类名称"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="分类图标"
        prop="icon"
        v-if="dataForm.grade==0"
      >
        <img-upload v-model="dataForm.icon" />
      </el-form-item>

      <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="seq">
        <el-input-number v-model="dataForm.seq" controls-position="right" :min="0" label="排序号"></el-input-number>
      </el-form-item>
      <el-form-item label="状态" size="mini" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="0">下线</el-radio>
          <el-radio :label="1">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">取消</el-button>
      <el-button size="small" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { treeDataTranslate, idList } from '@/utils'
// import PicUpload from '@/components/pic-upload'
import ImgUpload from '@/components/img-upload'
export default {
  data () {
    return {
      name:'',
      visible: false,
      dataForm: {
        categoryId: 0,
        grade: 0,
        categoryName: '',
        seq: 1,
        status: 1,
        parentId: 0,
        icon: ''
      },
      dataRule: {
        categoryName: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '分类图片不能为空', trigger: 'change' }
        ]
      },
      categoryList: [],
      selectedCategory: [],
      categoryTreeProps: {
        value: 'categoryId',
        label: 'categoryName'
      },
      typeName:'',
      parentName:'' ,
      nameList:['一级分类','二级分类','三级分类']
    }
  },
  components: {
    ImgUpload
  },
  methods: {
    resetData(){
      this.typeName = ''
      this.parentName = ''
      this.dataForm = {
        categoryId: 0,
        grade: 0,
        categoryName: '',
        seq: 1,
        status: 1,
        parentId: 0,
        icon: ''
      } 
    },
    async init (data,type,list) {
      this.visible = true
      this.resetData()
      if(data){
        if(type == 'add'){
          this.dataForm.categoryId = 0
          this.dataForm.parentId = data.categoryID
          this.dataForm.grade = data.grade + 1
          this.parentName = data.categoryName
          console.log('二级三级新增');
        }else{
          this.dataForm.categoryId = data.categoryID
          console.log('yi二级三级修改');
          this.parentName =this.getParentName(list,data.categoryID)
          console.log(this.parentName);
        }


      }else{//新增一级分类
        this.dataForm.categoryId = 0
        console.log('1级新增');
      }

       if (this.dataForm.categoryId) {
          // 修改
         await this.$http({
            url: this.$http.adornUrl(`/prod/category/info/${this.dataForm.categoryId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            this.dataForm.categoryId = data.categoryId
            this.dataForm.categoryName = data.categoryName
            this.dataForm.seq = data.seq
            this.dataForm.icon = data.icon
            this.dataForm.grade = data.grade
            this.dataForm.parentId = data.parentId
            this.dataForm.status = data.status
          })
        }
        this.name = this.nameList[this.dataForm.grade]
        if(this.dataForm.grade == 1 || this.dataForm.grade == 2){
          this.typeName = `所属${this.nameList[this.dataForm.grade-1]}:${this.parentName}`
        }


      // this.dataForm.categoryId = id || 0
      // this.$http({
      //   url: this.$http.adornUrl('/prod/category/listCategory'),
      //   method: 'get',
      //   params: this.$http.adornParams()
      // }).then(({ data }) => {
      //   this.categoryList = treeDataTranslate(data, 'categoryId', 'parentId')
      // }).then(() => {
      //   this.visible = true
      //   this.$nextTick(() => {
      //     this.$refs['dataForm'].resetFields()
      //     this.selectedCategory = []
      //   })
      // }).then(() => {
      //   if (this.dataForm.categoryId) {
      //     // 修改
      //     this.$http({
      //       url: this.$http.adornUrl(`/prod/category/info/${this.dataForm.categoryId}`),
      //       method: 'get',
      //       params: this.$http.adornParams()
      //     }).then(({ data }) => {
      //       this.dataForm.categoryId = data.categoryId
      //       this.dataForm.categoryName = data.categoryName
      //       this.dataForm.seq = data.seq
      //       this.dataForm.pic = data.pic
      //       this.dataForm.parentId = data.parentId
      //       this.dataForm.status = data.status
      //       this.selectedCategory = idList(this.categoryList, data.parentId, 'categoryId', 'children').reverse()
      //     })
      //   }
      // })
    },
    getParentName(treeData, targetId) {
      
       const idField = 'categoryID'
       const nameField = 'categoryName'
       const  childrenField = 'children' 
  
    // 标准化目标ID
    const targetValue = typeof targetId === 'object' 
      ? targetId[idField] 
      : targetId;
    
    // 递归查找上级
      function findParent(data, parent = null) {
        for (const node of data) {
          // 检查当前节点是否是目标节点
          if (node[idField] === targetValue) {
            return parent ? parent[nameField] : null;
          }
          
          // 如果有子节点，继续查找
          if (node[childrenField] && node[childrenField].length > 0) {
            const result = findParent(node[childrenField], node);
            if (result !== null) {
              return result;
            }
          }
        }
        
        // 未找到
        return null;
      }
    
      return findParent(treeData);
    },
    handleChange (val) {
      this.dataForm.parentId = val[val.length - 1]
    },
    // 表单提交
    dataFormSubmit () {
      // if (this.selectedCategory.length === 1) {
      //   this.dataForm.grade = 0
      // }
      // if (this.selectedCategory.length === 2) {
      //   this.dataForm.grade = 1
      // }
      // if (this.selectedCategory.length === 3) {
      //   this.dataForm.grade = 2
      // }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/prod/category`),
            method: this.dataForm.categoryId ? 'put' : 'post',
            data: this.$http.adornData({
              'categoryId': this.dataForm.categoryId || undefined,
              'categoryName': this.dataForm.categoryName,
              'status': this.dataForm.status,
              'seq': this.dataForm.seq,
              'grade': this.dataForm.grade,
              'parentId': this.dataForm.parentId,
              'icon': this.dataForm.icon
            })
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          })
        }
      })
    }
  }
}
</script>