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

<template>
  <div class="app-container" style="padding-top:0;">
    <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" placeholder="请输入分类名称" maxlength="5" />
      </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="actionUrl"
            :headers="getToken"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          >
            <div v-loading="loadImgLoading" class="avatar">
              <img v-if="temp.classifyImage" :src="temp.classifyImage" @error="reloadImage" @load="loadSucess">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </div>
            <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" placeholder="请输入排序值" maxlength="3" />
      </el-form-item>
      <el-form-item label="邮费是否到付:" prop="postageToPay" style="width: 500px;">
        <el-select v-model="temp.postageToPay" class="filter-item filter-item-temp" placeholder="请选择" value="">
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
        <span class="span_tip">注意：仪器分类请选择"是"，其他分类请选择"否"</span>
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-select v-model="temp.status" class="filter-item filter-item-temp" placeholder="请选择" value="">
          <el-option label="启用" value="1" />
          <el-option label="停用" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-right:10px" @click="backToList">返回</el-button>
        <el-button type="primary" @click="updateData">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveClassify } from '@/api/goods-classify'
export default {
  data() {
    return {
      msg: '添加分类',
      activeIndex: '2',
      rules: {
        classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
        postageToPay: [{ required: true, message: '请选择邮费是否到付', trigger: 'blur' }],
        classifyImage: [{ required: true, message: '请上传分类图标', trigger: 'change' }],
        postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      loadImgLoading: false,
      temp: {
        id: '',
        organizeID: this.$store.getters.organizeId,
        classifyName: '',
        classifyImage: '',
        sort: '',
        status: '1',
        postageToPay: '',
        addTime: '',
        updateTime: '',
        delFlag: 0
      }
    }
  },
  computed: {
    getToken() {
      return {
        'token': this.$store.getters.token
      }
    },
    classifyId: function() {
      return window.location.href.split('/').reverse()[0]
    },
    organizeID() {
      return this.$store.getters.organizeId
    },
    actionUrl() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    }
  },
  methods: {
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveClassify(this.temp).then(response => {
            this.$message({ message: response.msg, type: 'success', center: true, duration: 2000 })
            this.backToList()
          })
        }
      })
    },
    // 上传图标事件
    handleSuccess(response, file) {
      this.loadImgLoading = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.temp.classifyImage = response.data
        }, 1000 * 2)
      })
    },
    reloadImage() {
      this.loadImgLoading = true
      setTimeout(() => {
        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
      }, 1000 * 2)
    },
    loadSucess() {
      this.loadImgLoading = false
    },
    // 对上传图片的大小、格式进行限制
    beforeUpload(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 lang="scss">
.form-el-upload{
  width: 150px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.avatar img {
  width: 148px;
  height: 148px;
  display: block;
}
.el-form-item__label{
    text-align: right !important;
}
.el-upload__tip{
  margin-top: 0;
  line-height: 20px;
  color: red;
  text-align: left;
  position: absolute;
  right: -50%;
  bottom: 0;
}
.span_tip{
  font-size: 12px;
  color: red;
  margin-left: 5px;
}
.filter-item-temp{
    width: 100px;
}
</style>