suochencheng
/
FangYuan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
							<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="head.jsp"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>

    <title>领先共享汽车</title>
    <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: #20a0ff;
    }

    .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;
    }
    </style>
</head>
<body>
<jsp:include page="contentBefore.jsp"/>
<template>
            <el-form ref="form" :model="row_info" label-width="80px">
            
            
            <el-form-item label="图片">
		         <el-upload
		                    class="avatar-uploader"
		                    action="../assets/uploadFile"
		                    :show-file-list="false"
		                    :on-success="contactAvatarSuccess">
		                <img v-if="avatar" :src="avatar" class="avatar">
		                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		            </el-upload>
		        </el-form-item>
		        
                <el-form-item label="标题">
                    <el-input v-model="row_info.title"></el-input>
                </el-form-item>
                
         <el-form-item
                label="服务">
             <el-select v-model="row_info.serviceType" clearable filterable   placeholder="请选择服务">
			    <el-option
			      v-for="item in serviceTypes"
			      :key="item.id"
			      :label="item.typeName"
			      :value="item.id">
			    </el-option>
			  </el-select>
  
        </el-form-item>
        
                 <el-form-item label="价格">
                    <el-input v-model="row_info.price"></el-input>
                </el-form-item>
                
                <el-form-item label="工作时长">
                    <el-input v-model="row_info.workMinute"></el-input>
                </el-form-item>
                
                
                <el-form-item label="摘要">
                    <el-input v-model="row_info.abstractText"  type="textarea" :rows="2"></el-input>
                </el-form-item>
                
                <el-form-item label="服务内容">
                    <el-input v-model="row_info.preface"  type="textarea" :rows="2"></el-input>
                </el-form-item>
                
              <el-form-item label="内容">
            	<script id="container" name="content" type="text/plain"></script>
    		</el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{edit?'保存':'立即创建'}}</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
</template>
<jsp:include page="contentAfter.jsp"/>
</body>
<script>
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    new Vue({
        el: '#app',
        created: function () {
        	
        	   $.get({
                   url: '../serviceType/all'
               }).then(function (res) {
                   this.serviceTypes = res.data;

               }.bind(this));
        	   
        	   
            var id = getQueryString('id');
            if (id) {
                $.get({
                    url: '../serviceInfo/getServiceInfo',
                    data: {
                        id: id
                    }
                }).then(function (res) {
                    if (res.success) {
                        this.edit = true;
                        this.row_info = res.data;
                        if (res.data.realImage) {
                            this.avatar = res.data.realImage;
                        }
                        
                        var ue = this.editor;
                        ue.addListener("ready", function () {
                            //var arr = [];
                            //arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
                            ue.setContent(res.data.content, false);
                        });
                        
                    }
                }.bind(this));
            }
        },
        data: function () {
            return {
                menu: '8-1',
                user: {
                    id: '',
                    username: 'admin',
                    avatar: ''
                },
                loading: false,
                edit: false,
                tab: 1,
                row_info : {
                	realImage:'',
                	serviceType :''
                },
                serviceTypes : [],
                dialogImageUrl: '',
                dialogVisible: false,
                avatar: '',
                editor: null,
            };
        },
        
        
        mounted: function () {
            this.editor = UE.getEditor('container', {
                toolbars: [[
                    'fullscreen',
                    'source',
                    'undo',
                    'redo',
                    'bold',
                    'insertimage',
                    'justify',
                    'justifyleft', //居左对齐
                    'justifyright', //居右对齐
                    'justifycenter', //居中对齐
                    'justifyjustify' //两端对齐
                ]],
                pasteplain: true,
                retainOnlyLabelPasted: true
            });
        },
        
        methods: {
            logout: function () {
                this.$confirm('确定要注销吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(function () {
                    localStorage.removeItem('user');
                    this.$router.push({path: '/login'});
                }.bind(this)).catch(function (e) {

                });
            },
            onSubmit: function () {
                if (!this.row_info.title) {
                    this.$message.warning('请填写标题');
                }  else {
                    var data = JSON.parse(JSON.stringify(this.row_info));
                    data.content = this.editor.getContent();
                    delete data.realImage;
                    $.post({
                        url: this.edit ? '../serviceInfo/update' : '../serviceInfo/save',
                        data: data
                    
                    }).then(function (res) {
                        if (res.success) {
                            if (!this.edit) {
                                this.row_info.id = res.data;
                            }
                            this.edit = true;
                            this.$message.success(this.edit ? '保存成功' : '创建成功');
                        } else {
                            this.$message.error(this.edit ? '保存失败' : '创建失败');
                        }
                    }.bind(this))
                }
            },
            
            handlePictureCardPreview: function (file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;

            },
            contactAvatarSuccess: function (res, file, fileList) {
                if (res.success) {
                    this.row_info.image = res.data[0];
                }
                this.avatar = URL.createObjectURL(file.raw);
            },
            
        
            }
    })
</script>


</html>