<template> <div class="restaurant-classify"> <el-form ref="form" label-width="100px" class="custom_form_cont"> <el-form-item label="图集" class="form-item-tag"> <el-col :sm="5"> <el-select v-model="classifyId" placeholder="请选择" style="width: 100%"> <el-option v-for="item in classifyList" :key="item.id" :label="item.classifyName" :value="item.id"> </el-option> </el-select> </el-col> <el-col :sm="3" :offset="1"> <div style="width: 100%; position: relative" class="classify-manage"> <el-button @click="classfiyHandleShow = true">图集管理</el-button> <div class="classify-warp" v-if="classfiyHandleShow"> <el-form class="classify-add-form custom_form_no" :inline="true" size="mini"> <el-form-item style="margin-bottom: 13px; float: left"> <el-input v-model="newClassfiyName" placeholder="请输入图集名称"></el-input> </el-form-item> <el-input-number style="margin-bottom: 13px; float: left;" v-model="newClassfiyOrder" controls-position="right" :min="1" size="mini"></el-input-number> <el-form-item style="margin-bottom: 13px; float: right"> <el-button @click="addNewClassfiyHandle">添加</el-button> <el-button @click="classfiyHandleShow = false">关闭</el-button> </el-form-item> </el-form> <el-table :data="classifyList" height="250" border size="mini" :header-cell-style="{'background-color': '#3D4851', 'color': '#fff', 'padding': '2px 0', 'text-align': 'center'}" :cell-style="{'padding': '4px 0'}" class="classfiy-add-table" style="width: 100%"> <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column> <el-table-column prop="classifyName" label="名称" width="120"> </el-table-column> <el-table-column prop="createUser" label="创建人" width="100"> </el-table-column> <el-table-column prop="createTime" align="center" width="120" label="创建时间"> </el-table-column> <el-table-column prop="address" width="100" fixed="right" label="操作"> <template slot-scope="scope"> <button type="text" style="color: #666; text-decoration: underline" @click="changeClassfiyHandle(scope.row)">修改</button> <button type="text" style="color: #666; text-decoration: underline" @click="delClassfiyHandle(scope.row.id)">删除</button> </template> </el-table-column> </el-table> </div> </div> </el-col> </el-form-item> <el-form-item label="图片上传" class="form-item-tag"> <el-col :sm="5"> <el-upload class="avatar-uploader" :action="$baseURL + '/diningroom/picture/upload'" :show-file-list="false" name="files" accept="image/jpeg,image/png" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="picturePath" :src="$imgUrl + picturePath" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> <p class="img-upload-inter">* 请上传尺寸为 <em>650*370</em>,或参照这一比例(长度最小为650px),大小不超过<em>5M</em>的图片</p> </el-col> </el-form-item> <el-form-item label="图片大小"> <el-col :sm="5"> <el-input v-model="pictureSize" autocomplete="off" disabled="disabled"></el-input> </el-col> </el-form-item> <!-- <el-form-item label="图片排序"> <el-col :sm="18"> <el-input-number v-model="pictureOrder" controls-position="right" :min="1"></el-input-number> </el-col> </el-form-item>--> <el-form-item label="备注"> <el-col :sm="5"> <el-input v-model="pictureMark" autocomplete="off" type="textarea" :rows="5"></el-input> </el-col> </el-form-item> </el-form> <el-row style="margin-top: 50px"> <el-col :span="3" :offset="2"> <el-row type="flex" justify="space-between"> <el-col :sm="2"> <el-button size="small" @click="$router.go(-1)">取消</el-button> </el-col> <el-col :sm="2"> <el-button type="danger" size="small" @click="saveHandle">确认</el-button> </el-col> </el-row> </el-col> </el-row> <el-dialog title="图集修改" :visible.sync="classfiyDialogVisible" width="26%" center> <el-form :model="classfiyForm" label-width="120px"> <el-form-item label="图集名称"> <el-col :sm="15"> <el-input v-model="classfiyForm.classifyName" autocomplete="off"></el-input> </el-col> </el-form-item> <el-form-item label="图集排序"> <el-col :sm="15"> <el-input-number v-model="classfiyForm.classifyOrder" controls-position="right" :min="1"></el-input-number> </el-col> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-row type="flex" justify="center"> <el-col :sm="10"> <div class="btn-warp"> <el-button @click="classfiyDialogVisible = false">取 消</el-button> <el-button type="danger" @click="saveChangeClassfiyHandle">保 存</el-button> </div> </el-col> </el-row> </div> </el-dialog> </div> </template> <script> export default { name: 'restaurantClassify', data () { return { pictureName: '', picturePath: '', pictureOriginalName: '', pictureSize: '', pictureOrder: '', pictureMark: '', classfiyHandleShow: false, moduleId: '', classifyId: '', classifyList: [], newClassfiyName: '', newClassfiyOrder: '', classfiyDialogVisible: false, classfiyForm: { classfiyId: '', classifyName: '', classifyOrder: '' } } }, mounted () { this._getClassify() }, methods: { _getClassify () { // 图集列表 let _this = this this.$axios.get('/module/classify/幸福餐厅') .then(function (res) { _this.moduleId = res[0].moduleId // 模块id _this.classifyId = res[0].id _this.classifyList = res }) }, addNewClassfiyHandle () { // 添加图集 let _this = this let params = { 'classifyName': _this.newClassfiyName, 'classifyOrder': _this.newClassfiyOrder, 'moduleId': _this.moduleId } this.$axios.post('/diningroom/picture/classify/add', params) .then(function (res) { if (res) { _this.$message({ type: 'success', message: '添加成功!' }) _this._getClassify() } }) }, changeClassfiyHandle (item) { this.classfiyForm.classfiyId = item.id this.classfiyForm.classifyName = item.classifyName this.classfiyForm.classifyOrder = item.classifyOrder this.classfiyDialogVisible = true }, saveChangeClassfiyHandle () { // 修改图集 let _this = this let params = { 'classifyName': _this.classfiyForm.classifyName, 'classifyOrder': _this.classfiyForm.classifyOrder, 'id': _this.classfiyForm.classfiyId } this.$axios.post('/diningroom/picture/classify/update', params) .then(function (res) { if (res === 'OK') { _this.classfiyDialogVisible = false _this._getClassify() _this.$message({ type: 'success', message: '修改成功!' }) } }) }, delClassfiyHandle (id) { // 删除图集 let _this = this this.$axios.get('/diningroom/picture/classify/delete', { params: { 'id': id } }).then(function (res) { if (res === 'OK') { _this.classfiyDialogVisible = false _this._getClassify() _this.$message({ type: 'success', message: '删除成功!' }) } }) }, handleAvatarSuccess (res, file) { // 上传图片 this.pictureName = res.data[0].fileName this.pictureOriginalName = res.data[0].fileOriginalName this.pictureSize = res.data[0].fileSize this.picturePath = res.data[0].filePath }, beforeAvatarUpload (file) { const isLt5M = file.size / 1024 / 1024 < 5 if (!isLt5M) { this.$message.error('上传图片大小不能超过 5MB!') } return isLt5M }, saveHandle () { // 图片添加 let _this = this this.$axios.post('/diningroom/picture/add', { 'classifyId': _this.classifyId, 'pictureMark': _this.pictureMark, 'pictureName': _this.pictureName, // 'pictureOrder': _this.pictureOrder, 'pictureOriginalName': _this.pictureOriginalName, 'picturePath': _this.picturePath, 'pictureSize': _this.pictureSize }).then(function (res) { console.log(res) if (res) { _this.$message({ type: 'success', message: '添加成功!' }) _this.$router.go(-1) } }) } } } </script> <style scoped lang="scss"> .classify-warp { position: absolute; width: 520px; background: #fff; border-radius: 4px; z-index: 10; top: 0; left: 90px; padding: 15px; border: 1px solid #ededed; box-shadow: 1px 1px 3px #ededed; .classify-add-form { text-align: center; } .classfiy-add-table { .td_box { padding: 0; } } } </style>