PointsMall_Admin/src/components/Category/edit.vue

<template>
  <div> 
    <el-form ref="editPram" :model="editPram" label-width="130px">
      <el-form-item label="分类名称" prop="categoryName" :rules="[{ required: true, message: '请输入分类名称', trigger: ['blur', 'change'] }]">
        <el-input v-model="editPram.categoryName" placeholder="分类名称" />
      </el-form-item>
      <el-form-item v-if="editPram.parentCategoryName" label="父级"  > 
          {{  editPram.parentCategoryName  }}
      </el-form-item>
      <el-form-item label="分类图标(180*180)">
        <div class="upLoadPicBox" @click="modalPicTap('1')">
          <upload :photo="editPram.icon" @success="uploadSuccess" tip="图标尺寸为18*18比例，大小不能超过200KB，图片只能为jpg、png、gif格式"></upload>
        </div>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="editPram.sort" :min="0" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="editPram.showFlag" active-text="显示" inactive-text="隐藏" :active-value="1"
          :inactive-value="2" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loadingBtn" @click="handlerSubmit">确定</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<!--创建和编辑公用一个组件-->
<script>
import upload from '@/components/Upload/index'
import productApi from '@/api/product/productAttr.js';
import { loadingFn } from "@/utils/validate"

export default {
  // name: "edit",
  components: { upload },
  props: {
    parentOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return { 
      loadingBtn: false,
      constants: [],
      editPram: {
        level: 1,
        icon:"",
        showFlag: 1,
        categoryName: "",
        sort:1,
        parentId:"",
        parentCategoryName:""
      },
      categoryProps: {
        value: 'id',
        label: 'categoryName',
        children: 'children'
      }
    }
  },
  mounted() {
    // this.initEditData()
  },
  methods: {
    uploadSuccess(e, res) {
      if (res.code == 20000) {
        ({ publicUrl: this.editPram.icon } = res.data);
      }
    },
    // 点击图标
    addIcon() { },
    // 点击商品图
    modalPicTap(tit, num, i) {
    },
    close() {
      this.$parent.$parent.editDialogConfig.visible=false; 
    },
    initEditData() {
    },
    addTreeListLabelForCasCard(arr, child) {
    },
    handlerSubmit() {  
      productApi.classifySave(this.editPram,).then((result) => {
        if(result.code==20000){
          this.$parent.$parent.editDialogConfig.visible=false;
          this.$message.success("添加成功！");
          this.$parent.$parent.handleCurrentChange();

        }        
      }).catch((err) => {
        
      });
    },
    handlerSaveOrUpdate(isSave) {
    }
  }
}
</script>

<style scoped>
::v-deep .photo-container {
  align-items: flex-start !important;
}
</style>