<template>
|
<el-dialog
|
title="新增分类"
|
:visible="value"
|
width="30%"
|
:show-close="false"
|
:modal='false'
|
:before-close="onCancel">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
<el-form-item label="分类名称" prop="name">
|
<el-input v-model="ruleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item label="权重" prop="weight">
|
<el-input v-model="ruleForm.weight"></el-input>
|
</el-form-item>
|
<el-form-item label="图标" prop="icon">
|
<el-upload
|
class="avatar-uploader"
|
:action="api"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload">
|
<img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar">
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<div class="samll-text">图片格式仅限PNG、JPEG、JPG<br>图片大小10M以内，限传1张</div>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="onCancel('ruleForm')">取 消</el-button>
|
<el-button type="primary" @click="onOk('ruleForm')" :loading="okLoading">确 定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import vUpload from "com/upload/upload1";
|
export default {
|
props: {
|
value: {type: Boolean},
|
},
|
components:{vUpload},
|
|
data() {
|
return {
|
ruleForm: {
|
name:"" , //分类名称
|
weight:"",
|
icon:"",
|
},
|
okLoading: false,
|
rules: {
|
name: [
|
{ required: true, message: '请输入分类名称', trigger: 'blur' },
|
{ min: 1, max: 10, message: '长度在10个字符', trigger: 'blur' }
|
],
|
weight: [
|
{ required: true, message: '请输入权重', trigger: 'blur' },
|
],
|
icon: [
|
{ required: true, message: '请上传图片', trigger: 'blur' },
|
],
|
}
|
}
|
},
|
|
mounted() {
|
this.api = this.api = this.$js.api.upload; //获取上传的路径
|
},
|
|
methods: {
|
/** 上传图标 */
|
handleAvatarSuccess(res, file) {
|
console.log(file)
|
this.ruleForm.icon = URL.createObjectURL(file.raw);
|
},
|
|
/** 限制用户上传的图片格式和大小*/
|
beforeAvatarUpload(file) {
|
var isJPG = false
|
switch (file.type) {
|
case "image/png":
|
isJPG = true;
|
break;
|
case "image/jpeg":
|
isJPG = true;
|
break;
|
case "image/jpg":
|
isJPG = true;
|
break;
|
default:
|
isJPG = false;
|
break;
|
}
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
|
if (!isJPG) {
|
demo.toast("上传头像图片只能是 PNG、JPEG、JPG 格式!");
|
}
|
if (!isLt2M) {
|
demo.toast("上传头像图片大小不能超过 10MB!");
|
}
|
return isJPG && isLt2M;
|
},
|
|
/** 取消 */
|
onCancel (formName) {
|
this.$emit('change', false);
|
this.$refs[formName].resetFields();
|
},
|
|
/** 确认 */
|
onOk(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert('submit!');
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
// let parmas = {
|
|
// };
|
|
// this.okLoading = true;
|
// this.$api.post("dyn/type/edit", parmas,
|
// e => {
|
// demo.toast("编辑成功");
|
// this.$emit('success');
|
// this.onCancel();
|
// },
|
// err=> {
|
// demo.toast(err.msg)
|
// }
|
// )
|
// this.okLoading = false;
|
}
|
|
}
|
|
}
|
</script>
|
|
<style>
|
.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: 100px;
|
height: 100px;
|
line-height: 100px;
|
text-align: center;
|
}
|
.avatar {
|
width: 100px;
|
height: 100px;
|
display: block;
|
}
|
.samll-text {
|
font-size: 12px;
|
line-height: 20px;
|
color: #8c939d;
|
}
|
</style>
|
