ZLPMS/PMS.WebUI/Views/MobileProblem/ModifyProblem.cshtml


@{
    ViewBag.Title = "ModifyProblem";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}
    <link href="~/Content/Scripts/plugins/mui/css/webuploader.css" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/mui.imageviewer.css" rel="stylesheet" />
    <link href="~/Content/Style/MobileProductRegist/Mui-Preview.css" rel="stylesheet" />

    <script src="~/Content/Style/MobileProductRegist/ProblemIcon.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/webuploader.js?v=1.3"></script>
    <script type="text/babel" src="~/Content/Scripts/plugins/mui/js/PlusUploader.js?v=1.81"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.zoom.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.previewimage.js"></script>

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="~/Content/Scripts/babel.min.js"></script>
    <script src="~/Content/Scripts/polyfill.min.js"></script>
    <style>
        .mui-btn-primary {
            border: 1px solid #00aaff;
            background-color: #00aaff;
        }

        .radiodiv {
            display: flex;
            flex-direction: row;
            background-color: white;
            font-size: 14px;
            padding: 0 10px;
        }

        .mui-input-row label {
            padding: 11px 20px 11px 13px;
            margin-left: 20px;
        }

        .mui-radio input[type='radio'] {
            left: 0;
        }

        [v-cloak] {
            display: none;
        }


        .UplodImg {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-content: center;
            padding: 7px 27px;
        }

        .filep {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            position: absolute;
            bottom: 12px;
            background-color: rgba(0, 0, 0, 0.6);
            font-size: 13px;
            color: white;
            width: 100px;
        }

        .destory {
            position: absolute;
            top: 0;
            right: -6px;
            width: 10px;
            height: 10px;
            font-size: 20px;
            color: #cc9a9a;
            margin-bottom: 11px;
            transition: color 0.2s ease-out;
            background-color: transparent;
            border: transparent;
        }

            .destory:after {
                content: '×';
                position: absolute;
                top: -10px;
                right: 5px;
            }

        .mui-grid-view.mui-grid-9 .mui-media {
            border-right: transparent;
            border-bottom: transparent;
        }
         .Fileflex {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-items: center;
            padding:10px;
            background-color:white;
        }
         
        .destory {
            position: absolute;
            top: 0;
            right: -6px;
            width: 10px;
            height: 10px;
            font-size: 20px;
            color: #cc9a9a;
            margin-bottom: 11px;
            transition: color 0.2s ease-out;
            background-color: transparent;
            border: transparent;
        }

            .destory:after {
                content: '×';
                position: absolute;
                top: -10px;
                right: 5px;
            }
    </style>

    <div id="vue" v-cloak>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#ffffff"></a>
            <h1 class="mui-title" style="color:white">修改问题</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <button v-on:click="ModifySubmit()" type="button" class="mui-btn mui-btn-primary" style="width:90%;background-color: #2ab8ff;border:none;margin-left:5%">确定修改</button>
        </nav>
        <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
            <div class="mui-scroll">
                <h5 class="mui-content-padded">标题</h5>
                <div class="mui-input-row" style="margin-top: 7px">
                    <input v-model="ProblemTitile" id="ProblemTitile" type="text" class="mui-input-clear" placeholder="填写问题标题" style="font-size:15px">
                </div>
                <h5 class="mui-content-padded">描述</h5>
                <div class="mui-input-row" style="font-size:14px">
                    <textarea v-model="detail" id="detail" rows="8" placeholder="请填写具体的问题描述，以便我们更详细的了解您需要解决的问题。" style="font-size:15px;margin-bottom:-10px"></textarea>

                </div>
                <div v-if="PersonProperty!='3'">
                    <h5 class="mui-content-padded">登记来源</h5>
                    <select v-model="Origin" class="mui-btn mui-btn-block" style="font-size:15px;padding-left:20px">
                        <option v-for="os in OriginSelec" v-bind:value="os.代码">{{os.显示名}}</option>
                    </select>
                    <h5 class="mui-content-padded">问题性质</h5>
                    <div class="radiodiv">
                        <div v-for="pn in ProblemNatureSelec" class="mui-input-row mui-radio ">
                            <label>{{pn.显示名}}</label>
                            <input v-model="ProblemNature" name="radio3" type="radio" v-bind:value="pn.代码">
                        </div>
                    </div>
                    <h5 class="mui-content-padded">处理状态</h5>
                    <div class="radiodiv">
                        <div class="mui-input-row mui-radio ">
                            <label>未处理</label>
                            <input v-model="DealStatus" name="radio1" type="radio" value="0">
                        </div>
                        <div class="mui-input-row mui-radio ">
                            <label>已处理</label>
                            <input v-model="DealStatus" name="radio1" type="radio" value="1">
                        </div>
                    </div>
                    <div v-if="DealStatus==1" class="mui-input-row" style="font-size:14px">
                        <textarea v-model="DealDetail" rows="6" placeholder="请填写处理描述说明" style="font-size:15px;margin-top:20px"></textarea>
                    </div>
                    <h5 class="mui-content-padded">紧急程度</h5>
                    <div class="radiodiv">
                        <div v-for="er in ErginSelec" class="mui-input-row mui-radio ">
                            <label>{{er.显示名}}</label>
                            <input v-model="ErginID" name="radio2" type="radio" v-bind:value="er.代码">
                        </div>
                    </div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell" style="font-size:14px">
                            要求时间
                            <button type="button" data-options='{"type":"date","beginYear":2017,"endYear":2019}' class="mui-btn time-btn">
                                {{RequireTime}}
                            </button>
                        </li>
                    </ul>

                    <div class="mui-input-row" style="font-size:14px;margin-bottom:10px;margin-top:20px">
                        <textarea v-model="urgentDetail" id="urgentDetail" rows="6" placeholder="请填写紧急描述说明" style="font-size:15px;"></textarea>
                    </div>
                </div>
                <h5 class="mui-content-padded">已提交图片及附件</h5>
                <div v-if="File" class="Fileflex">
                    <template v-for="item in  File">
                        <div v-if="item.类型=='1'" v-bind:id="item.附件ID"  style="position:relative">
                            <img  data-preview-src='' data-preview-group='2' v-bind:src="item.图片ID" style='width:50px;height:50px;padding:5px 5px 5px 0'>
                            <button class="destory" v-on:click="DeleteFile(item.附件ID)"></button>
                        </div>
                       <div v-if="item.类型=='2'" v-bind:id="item.附件ID" style="position:relative"> 
                           <a  style="padding:17px;color:#80b4fb;font-size:14px"><span class="mui-icon mui-icon-paperclip" style="font-size:33px"></span></a>
                           <button class="destory" style="top:-10px" v-on:click="DeleteFile(item.附件ID)"></button>
                       </div>
                    </template>
                </div>
                <div style="background-color:white;margin-top:10px">
                    <div class="UplodImg" id="pickImg">
                        <h4 style="font-weight:400">图片</h4>
                        <div>
                            <span class="mui-icon mui-icon-camera" id="pickCamera" style="color:#1296db;margin-right:20px"></span>
                            <span class="mui-icon mui-icon-image" id="pickPhoto" style="color:#1296db"></span>
                        </div>
                    </div>
                    <ul id="ImgList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color:white;border-color:transparent;margin:0"></ul>
                </div>
                <div style="background-color:white;border-top: solid 1px #efeff4;">
                    <div class="UplodImg" id="pickFlie">
                        <h4 style="font-weight:400">附件</h4>
                        <span class="mui-icon mui-icon-paperclip" style="color:#1296db"></span>
                    </div>
                    <ul id="FileList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color:white;border-color:transparent;"></ul>
                </div>



                <div style="display:none" id="picker">选择文件</div>
                <div style="display:none" id="picker2">选择文件</div>
                <button style="margin-top: 30px;display:none;" id="ctlBtn" class="btn btn-default">图片上传</button>
            </div>
        </div>
    </div>
    <script type="text/babel">
        var Count = 0;
        var ProblemProcessIDtoImg;
        var lod;
        var IsPlus = mui.os.plus ? true : false;
        var ID = '@ViewBag.ID';
        var PersonProperty = '@ViewBag.PersonProperty';
        var vm = new Vue({
            el: '#vue',
            data: {
                ProblemTitile: '',
                detail: '',
                OriginSelec: '',
                Origin: '',
                ///问题性质
                ProblemNature: '',
                ///问题性质选择项
                ProblemNatureSelec: null,
                ///紧急程度选择项
                ErginSelec: null,
                ///紧急程度
                ErginID: '',
                ///紧急描述
                urgentDetail: '',
                ///紧急处理时间
                RequireTime: '请选择时间',
                ///项目人员选择的处理状态
                DealStatus: 0,
                ///处理描述说明
                DealDetail: '',
                PersonProperty: PersonProperty,
                //附件
                File:[]

            },
            watch: {
            },
            methods: {
                ///获取登记来源
                GetOriginSelec: function () {
                    this.$http.get('/MobileProblem/GetComboboxByCode/026').then(function (res) {
                        this.OriginSelec = res.body;
                        this.Origin = this.OriginSelec[1].代码;
                    }, function (res) {
                        console.log(res.status);
                    });
                },
                ///获取问题性质
                GetProblemNatureSelec: function () {
                    this.$http.get('/MobileProblem/GetComboboxByCode/013').then(function (res) {
                        this.ProblemNatureSelec = res.body;
                        this.ProblemNature = this.ProblemNatureSelec[0].代码;
                    }, function (res) {
                        console.log(res.status);
                    });
                },
                ///获取紧急程度选择项
                GetErgin: function () {
                    this.$http.get('/MobileProblem/GetComboboxByCode/014').then(function (res) {
                        this.ErginSelec = res.body;
                        this.ErginID = this.ErginSelec[0].代码;
                    }, function (res) {
                        console.log(res.status);
                    });

                },
                ///实例化日期组件
                loadTime: function () {
                    var that = this;
                    var btns = $('.time-btn');
                    btns.each(function (i, btn) {
                        btn.addEventListener('tap', function () {
                            var _self = this;
                            if (_self.picker) {
                                _self.picker.show(function (rs) {
                                    btn.innerHTML = rs.text;
                                    _self.picker.dispose();
                                    _self.picker = null;
                                });
                            } else {
                                var optionsJson = this.getAttribute('data-options') || '{}';
                                var options = JSON.parse(optionsJson);
                                var id = this.getAttribute('id');

                                _self.picker = new mui.DtPicker(options);
                                _self.picker.show(function (rs) {
                                    that.RequireTime = rs.text;
                                    _self.picker.dispose();
                                    _self.picker = null;
                                });
                            }

                        }, false);
                    })
                },
                //获取问题数据
                GetProblem () {
                    var that = this;
                    this.$http.get('/MobileProblem/GetProblemInfomation/' + ID).then(function (res) {
                        that.ProblemTitile = res.body[0].问题标题;
                        that.detail = res.body[0].问题描述.replace(/<[^>]+>/g, "");
                        if (that.PersonProperty != '3') {
                            that.Origin = res.body[0].来源代码;
                            ///问题性质
                            that.ProblemNature = res.body[0].问题性质;
                            ///紧急程度
                            that.ErginID = res.body[0].紧急代码;
                            ///紧急描述
                            that.urgentDetail = res.body[0].紧急描述;
                            ///紧急处理时间
                            that.RequireTime = res.body[0].要求时间 ? res.body[0].要求时间 : '请选择时间';
                            ///项目人员选择的处理状态
                            that.DealStatus = res.body[0].是否解决;
                            ///处理描述说明
                            that.DealDetail = res.body[0].解决方案;
                        }
                    }, function (res) {
                        console.log(res.status);
                    });
                },
                //获取附件
                GetProblemFlie() {
                    var that = this;
                    $.post("/MobileProblem/GetProblemFlie/" + ID, {}, (data) => {
                        for(var item of data){
                            if (item.类型 == '1') {
                                item.图片ID = "/MobileProblem/ViewProblemImage/" + item.附件ID + "?type=o";
                            }
                        }
                        that.File = data;
                    })
                },
                //删除附件
                DeleteFile (id) {
                    mui.confirm('确定要删除该附件吗?', '提示', ['否', '是'], function (e) {
                        if (e.index == 1) {
                            $.post("/Problem/Delete_Img/"+id, function (data) {
                                if (data ==1) {
                                    mui.toast("删除成功!", { duration: 'long', type: 'div' });
                                    $("#" + id).remove();
                                }
                                else {
                                    mui.toast("删除失败!", { duration: 'long', type: 'div' });
                                }

                            })
                        }

                    })
                },
                ModifySubmit() {
                    var param = {
                        ProblemTitile: this.ProblemTitile,
                        detail: this.detail,
                        DealStatus: this.DealStatus,
                        DealDetail: this.DealDetail,
                        ErginID: this.ErginID,
                        urgentDetail: this.urgentDetail,
                        RequireTime: this.RequireTime,
                        Origin: this.Origin,
                        ProblemNature: this.ProblemNature,
                        ProblemId: ID
                    }
                    lod = mui.showLoading("操作中..", "div");
                    $.post("/MobileProblem/ModifySubmit", param, function (data) {
                        if (data.code == 200) {
                            ProblemProcessIDtoImg = data.msg;
                            $("#ctlBtn").click();
                        } else {
                            mui.toast(data.msg, { duration: 'long', type: 'div' });
                        }
                    })

                },
                ///初始化图片上传插件
                ImagUploaderInit: function () {
                    var that = this;
                    var $list = $("#ImgList");
                    var $list2 = $("#FileList");
                    var $btn = $("#ctlBtn");
                    var thumbnailWidth = 100;
                    var thumbnailHeight = 100;
                    var uploader = WebUploader.create({

                        // 选完文件后，是否自动上传。
                        auto: false,
                        // swf文件路径
                        swf: '/Content/Scripts/plugins/mui/js/Uploader.swf',

                        // 文件接收服务端。
                        server: '/MobileProblem/FlieUploadAndSave',

                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: '#picker2',
                        compress: {
                            width: 1600,
                            height: 1600,

                            // 图片质量，只有type为`image/jpeg`的时候才有效。
                            quality: 90,

                            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                            allowMagnify: false,

                            // 是否允许裁剪。
                            crop: false,

                            // 是否保留头部meta信息。
                            preserveHeaders: true,

                            // 如果发现压缩后文件大小比原来还大，则使用原来图片
                            // 此属性可能会影响图片自动纠正功能
                            noCompressIfLarger: false,

                            // 单位字节，如果图片大小小于此值，不会采用压缩。
                            compressSize: 0

                        }
                    });
                    uploader.on('fileQueued', function (file) {
                        var $li = $(

                     '<li id="' + file.id + '" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><img > <button class="destory" ></button><p class="filep">' + file.name + '</p> </li>'
                        ),
                    $img = $li.find('img');

                        // $list为容器jQuery实例
                        if (file.type.substring(0, 5) == "image") {
                            $list.append($li);
                        } else {
                            $list2.append('<li id="' + file.id + '" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><span class="mui-icon mui-icon-upload" style="padding-bottom:10px"></span><button class="destory" ></button>' +
                                    '<p class="filep">' + file.name + '</p> </li>');

                        }
                        $("#" + file.id).children(".destory").click(() => {
                            uploader.removeFile(file);
                            $("#" + file.id).remove();
                        })

                        // 创建缩略图
                        // 如果为非图片文件，可以不用调用此方法。
                        // thumbnailWidth x thumbnailHeight 为 100 x 100
                        uploader.makeThumb(file, function (error, src) {
                            if (error) {
                                $img.replaceWith('<span>不能预览</span>');
                                return;
                            }

                            $img.attr('src', src);
                        }, thumbnailWidth, thumbnailHeight);
                    });

                    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                    uploader.on('uploadSuccess', function (file, response) {
                        $('#' + file.id).addClass('upload-state-done');
                        if (response.msg = "1") {
                            Count += 1;
                        }
                    });

                    // 文件上传失败，显示上传出错。
                    uploader.on('uploadError', function (file) {
                        var $li = $('#' + file.id),
                            $error = $li.find('div.error');

                        // 避免重复创建
                        if (!$error.length) {
                            $error = $('<div class="error"></div>').appendTo($li);
                        }

                        $error.text('上传失败');
                    });

                    // 完成上传完了，成功或者失败，先删除进度条。
                    uploader.on('uploadComplete', function (file) {
                        $('#' + file.id).find('.progress').remove();

                    });
                    uploader.on('uploadFinished', function () {
                        mui.hideLoading(lod);
                        if (IsPlus) {
                            that.FivePlusUploder.uplod(ProblemProcessIDtoImg, lod);
                        } else {

                            mui.alert("问题修改成功", "提交成功", "确定", function () {
                                window.location.href = '/MobileProblem/ProblemDetail/' + ID;
                            }, 'div');
                        }
                    });
                    $btn.on('click', function () {
                        uploader.options.formData.ProcessId = ProblemProcessIDtoImg;
                        uploader.upload();

                    });
                    if (!IsPlus) {
                        document.getElementById('pickImg').addEventListener('tap', function () {
                            $("#picker").find('.webuploader-element-invisible').click();
                        });
                    }
                    document.getElementById('pickFlie').addEventListener('tap', function () {
                        $("#picker2").find('.webuploader-element-invisible').click();
                    });
                    uploader.addButton({
                        id: '#picker',
                        innerHTML: '选择文件',
                        accept: {
                            title: 'Images',
                            extensions: 'gif,jpg,jpeg,bmp,png',
                            mimeTypes: 'image/*',
                        },
                        capture: 'camera'
                    });


                },
                LoadUploder: function () {
                    this.ImagUploaderInit();
                    if (IsPlus) {
                        this.FivePlusUploder = new FivePlus({
                            href: '/MobileProblem/ProblemDetail/' + ID,
                            SuceessText: '修改成功!'
                        });

                    }
                },
                init () {
                    mui.init();
                    mui.previewImage();
                    mui('.mui-scroll-wrapper').scroll()
                    this.loadTime()
                    if (this.PersonProperty != '3') {
                        this.GetOriginSelec();
                        this.GetProblemNatureSelec();
                        this.GetErgin();
                    }
                    this.GetProblem();
                    this.GetProblemFlie();
                    this.LoadUploder();
                }
            },
            mounted: function () {
                this.init()

            }
        })
    </script>