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

<template>
  <div class="app-container">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1"><router-link to="/goods/category">商品分类</router-link></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"
            accept="image/jpeg,image/gif,image/png"
            action="https://www-b.caimei365.com/register/imageUpload.action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :multiple="false"
            :limit="1"
          >
            <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'
export default {
  data() {
    return {
      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.organizeID,
        classifyName: '',
        classifyImage: '',
        sort: '',
        status: '',
        postageToPay: '',
        addTime: '',
        updateTime: '',
        delFlag: 0
      }
    }
  },
  computed: {
    classifyId: function() {
      return window.location.href.split('/').reverse()[0]
    }
  },
  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) {
      this.getBase64(file.raw).then(res => {
        console.log(res)
      })
      const fileName = file.name
      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
      if (regex.test(fileName.toLowerCase())) {
        this.form.imageUrl = URL.createObjectURL(file.raw)
      } else {
        this.$message.error('请选择图片文件')
      }
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt5M
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    }
  }
}
</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>