<template> <el-dialog :title="title" center append-to-body :visible.sync="show" width="800px"> <div v-loading="loading"> <el-form ref="form" :model="form"> <el-row> <el-col :span="4"><label>单品名称</label></el-col> <el-col :span="8"> <el-form-item> <el-input v-model="form.name" placeholder="规则:主题名+单品名"></el-input> </el-form-item> </el-col> <el-col :span="4"> <label>库存数量</label> </el-col> <el-col :span="8"> <el-form-item> <el-input-number v-model="form.num"></el-input-number> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="4"> <label>标签</label> </el-col> <el-col :span="20"> <el-form-item> <el-tag :key="tagIndex" v-for="(tag,tagIndex) in form.category_name" closable :disable-transitions="false" @close="handleClose(tag)"> {{tag}} </el-tag> <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" > </el-input> <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增</el-button> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="4"> <label>封面图片</label> </el-col> <el-col :span="20"> <div class="upload-block"> <el-upload action="/api/public/upload/zone" :http-request="uploadFile" :class="{disabled:!uploadShow}" :before-upload="beforeAvatarUpload" list-type="picture-card" :file-list="imageList" :on-success="handleAvatarSuccess" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> </div> </el-col> </el-row> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="show = false">取 消</el-button> <el-button type="primary" @click="sub">确 定</el-button> </span> </div> </el-dialog> </template> <script> import {getSingleDetailApi,addSingleApi,editSingleApi,uploadFileApi} from "../../service/api"; export default { name: "dialogObj", props:[ 'dialogObj' ], data(){ return{ show: false, id: '', loading: true, uploadShow: true, type: 0, title: '', form:{ name: '', num: 0, cover: ''}, imageList: [], rules: { }, inputVisible: false, inputValue: '', teacherDetail: {} } }, methods:{ handleClose(tag) { this.form.category_name.splice(this.form.category_name.indexOf(tag), 1); }, showInput() { this.inputVisible = true; this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus(); }); }, handleInputConfirm() { let inputValue = this.inputValue; if (inputValue) { this.form.category_name.push(inputValue); } this.inputVisible = false; this.inputValue = ''; }, sub(){ switch(this.dialogObj.type){ case 0: this.$refs['form'].validate((valid) => { if(valid){ if(this.imageList.length >0){ this.form.cover = this.imageList[0].name; } let json = this.form; json.category_name = json.category_name.join(',') addSingleApi(json).then(()=>{ this.$message({ type: 'success', message: '修改成功!' }); this.$emit("reflash"); this.show = false; }) } }); break; case 1: this.$refs['form'].validate((valid) => { if(valid){ if(this.imageList.length >0){ this.form.cover = this.imageList[0].name; } let json = this.form; json.category_name = json.category_name.join(',') editSingleApi(this.id,json).then(()=>{ this.$message({ type: 'success', message: '修改成功!' }); this.$emit("reflash"); this.show = false; }) } }); break } }, handleAvatarSuccess(res) { this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] }, beforeAvatarUpload(){ this.uploadShow = false }, uploadFile(a) { this.loading = true; this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); this.fileUid = a.file.uid; uploadFileApi({file:a.file,type:'local'}).then(res=>{ this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}] this.loading = false; this.$message({ type: 'success', message: '上传成功!' }); }).catch(()=>{ this.loading = false; }) }, handleRemove(){ this.uploadShow = true }, initDialog(){ switch(this.dialogObj.type){ case 0: this.title = '新增单品'; this.show = this.dialogObj.show; this.type = 0; this.imageList = []; this.form = { name: '', num: 0, cover: '', category_name: [] }; this.uploadShow = true; this.loading = false; break; case 1: this.title = '编辑'; this.show = this.dialogObj.show; this.id = this.dialogObj.id; this.type = 1; getSingleDetailApi(this.dialogObj.id).then(res=>{ this.loading = false; this.form = { name:res.name, num:res.num, cover:res.cover, category_name: res.category_name ? res.category_name.split(',') : [] }; if(this.form.cover && this.form.cover !== ''){ this.imageList = [{name:res.cover,url:process.env.IMAGE_URL_HEAD + res.cover}]; this.uploadShow = false }else{ this.imageList = []; this.uploadShow = true } }); break; } } }, watch:{ dialogObj:{ handler: function () { this.loading = true; this.initDialog() }, deep: true }, show(value){ this.$emit("changeShow",value); } } } </script> <style scoped lang="less"> .el-col{ margin-bottom: 20px; line-height: 40px; .el-select{ width: 100%; } .upload-block{ height: 150px; } label{ color: #5982e6; text-align: center; display: block; } } .dialog-footer{ display: block; text-align: center; } </style> <style> .disabled .el-upload--picture-card { display: none !important; } .el-tag + .el-tag { margin-left: 10px; } .button-new-tag { margin-left: 10px; height: 32px; line-height: 30px; padding-top: 0; padding-bottom: 0; } .input-new-tag { width: 90px; margin-left: 10px; vertical-align: bottom; } </style>