caimei-mall-admin-ui/src/views/goods/category-edit.vue

<template>
  <div class="app-container">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1" @click="backToList">商品分类</el-menu-item>
      <el-menu-item index="2">编辑分类</el-menu-item>
    </el-menu>
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width:400px; margin:30px 0 0 50px;">
      <el-form-item label="分类名称" prop="classifyName">
        <el-input v-model="temp.classifyName" />
      </el-form-item>
      <!--<el-form-item label="图标" prop="classifyImage">
        <el-input v-model="temp.classifyImage" />
      </el-form-item>-->
      <el-form-item label="图标:" prop="classifyImage">
        <div class="form-el-upload">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="temp.classifyImage" :src="temp.classifyImage" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">注意：请上传jpg/png格式的图片，最大不超过5M</div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="排序值" prop="sort">
        <el-input v-model="temp.sort" type="number" />
      </el-form-item>
      <el-form-item label="邮费是否到付" prop="postageToPay">
        <el-select v-model="temp.postageToPay" class="filter-item" placeholder="请选择" value="">
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="temp.status" class="filter-item" placeholder="请选择" value="">
          <el-option label="启用" value="1" />
          <el-option label="停用" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateData">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getClassify, saveClassify } from '@/api/goods-classify'
import { uploadFile, getBase64 } from '@/api/other'
export default {
  data() {
    return {
      action: `${this.baseUrl}/mall/uploadFile/imageUpload`,
      msg: '编辑分类',
      activeIndex: '2',
      rules: {
        classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
        // classifyImage: [{ type: 'file', required: true, message: '请上传分类图标', trigger: 'change' }],
        postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      temp: {
        id: '',
        organizeID: this.$store.getters.organizeID,
        classifyName: '',
        classifyImage: '',
        sort: '',
        status: 1,
        postageToPay: 2,
        addTime: '',
        updateTime: '',
        delFlag: 0
      }
    }
  },
  computed: {
    classifyId: function() {
      return window.location.href.split('/').reverse()[0]
    },
    organizeID() {
      return this.$store.getters.organizeID
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      getClassify({ id: this.classifyId }).then(response => {
        const { data } = response
        this.temp = data
      }).catch(() => {
        this.$router.push({ path: this.redirect })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveClassify(this.temp).then(response => {
            this.$notify({
              title: response.code * 1 === 1 ? 'Success' : 'Error',
              message: response.code * 1 === 1 ? '修改分类成功' : response.msg,
              type: response.code * 1 === 1 ? 'success' : 'error',
              duration: 2000
            })
          })
        }
      })
    },
    // 上传图标事件
    handleAvatarSuccess(res, file) {
      getBase64(file.raw).then(res => {
        uploadFile({ imgStr: res }).then(response => {
          console.log(response)
          if (response.code === '1') {
            this.temp.classifyImage = response.data
          } else {
            this.$message.error('上传图片失败')
          }
        })
      })
    },
    // 对上传图片的大小、格式进行限制
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isJPG2 = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG && !isJPG2 && !isPNG) {
        this.$message.error('只支持jpg或png格式图片')
      }
      if (!isLt5M) {
        this.$message.error('请上传5MB以内的图片!')
      }
      return (isJPG || isJPG2 || isPNG) && isLt5M
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/goods/category'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-form-item__label{
    text-align: right !important;
}
.form-el-upload{
  width: 180px;
}
.el-upload__tip{
  line-height: 20px;
  color: red;
  text-align: left;
}
</style>