t1
/
ZLPMS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779
							@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>中联区卫问题登记</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="~/Content/Scripts/plugins/mui/css/mui.css?v=1.0" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/mui.picker.all.css" rel="stylesheet" />
    <link href="~/Content/Style/MobileProductRegist/NewProblemForProject.css" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/webuploader.css" rel="stylesheet" />

    <script src="~/Content/Scripts/jquery.min.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.picker.all.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.view.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/webuploader.js?v=1.2"></script>
    <script src="~/Content/Scripts/CookieManage.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/PlusUploader.js?v=2.6"></script>

    <script src="~/Content/Scripts/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body class="mui-fullscreen">
    <style>
        .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;
        }

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

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

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

        .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;
            }

        .nav-bar {
            border-radius: 10px;
            font-size: 15px !important;
            margin-bottom: 10px !important;
            height: 50px;
        }

        .onselect {
            padding: 0 20px;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
    <div id="vue">
        <!--页面主结构开始-->
        <div id="app" class="mui-views">
            <div class="mui-view">
                <div class="mui-navbar">
                </div>
                <div class="mui-pages">
                </div>
            </div>
        </div>
        @*选择项目机构界面*@
        <div id="InstitutionSelect" class="mui-page">
            <!--页面标题栏开始-->
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">选择存在问题的项目机构</h1>
                <button v-on:click="GoRegister" v-if="ProjectSelect" type="button" class="mui-right  mui-btn  mui-btn-link mui-btn-nav mui-pull-right">
                    <span class="mui-icon mui-icon-checkmarkempty" style="color:white;font-size:30px"></span>
                </button>
            </div>
            <!--页面标题栏结束-->
            <!--页面主内容区开始-->
            <div class="mui-page-content">
                <div class="onselect">已选:&nbsp;{{ProjectSelectName}}{{institutionSeleName}}</div>
                <div class="mui-content mui-row mui-fullscreen" style="z-index:0;background-color:#efeff4;margin-top:70px">
                    <div class="mui-col-xs-3" style="width:35%">
                        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                            <div style="text-align:center">
                                <input v-model="ProjectSearchText" style="font-size:15px; margin:auto" type="search" class="mui-input-clear" placeholder="项目名称搜索">
                            </div>
                            <a v-for="p in ProjectSearchData" v-bind:class="ProjectSelect==p.id?'mui-active':''" v-bind:id="p.text" class="mui-control-item " v-on:click="GetInstitution(p)">{{p.text}}</a>
                        </div>
                    </div>
                    <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;width:65%">
                        <div id="content" class="mui-control-content mui-active">
                            <div style="text-align:center">
                                <input v-model="searchText" style="font-size:15px; margin:auto" type="search" class="mui-input-clear" placeholder="机构名称搜索">
                            </div>
                            <ul style="margin-top:0" class="mui-table-view">

                                <li v-for="i in InsitutionSearchData" class="mui-table-view-cell" v-bind:class="institutionSele==i.id?'mui-active':''" v-on:click="InstitutionSelect(i)">{{i.text}}</li>

                            </ul>
                        </div>

                    </div>

                </div>
            </div>
            <!--页面主内容区结束-->

        </div>
        @*登记主界面*@
        <div id="register" class="mui-page">
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">中联区卫问题登记</h1>
                @*<button v-on:click="Submit()" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" style="color:#ffffff">直接提交</button>*@
            </div>
            <nav class="mui-bar mui-bar-tab">
                <button v-on:click="Submit()" type="button" class="mui-btn mui-btn-primary" style="width:48%;background-color: #2ab8ff;border:none;margin-right:10px">直接提交</button>
                <button v-on:click="StatusSelect()" type="button" class="mui-btn mui-btn-danger" style="width:48%;border:none;background-color: #fb7e00">下一步（填写处理状态）</button>
            </nav>
            <div class="mui-page-content">

                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <input v-model="institutionSele" type="hidden" />
                        <div class="mui-input-row" style="margin-top: 7px">
                            <input v-on:blur="getde()" v-model="ProblemTitile" id="ProblemTitile" type="text" class="mui-input-clear" placeholder="填写问题标题" style="font-size:15px">
                        </div>
                        <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 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>
        </div>
        @*处理状态选择界面*@
        <div id="DEALSTATUS" class="mui-page">
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">中联区卫问题登记</h1>
                @*<button v-on:click="Submit()" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" style="color:#ffffff">直接提交</button>*@
            </div>
            <nav class="mui-bar mui-bar-tab">
                @*<button v-on:click="Submit()" type="button" style="border-radius: 10px;font-size:15px;margin-bottom:10px;height:50px" class="mui-btn mui-btn-success mui-btn-block btn_2">提交</button>*@
                <button v-on:click="Submit()" type="button" class="mui-btn mui-btn-primary" style="width:90%;background-color: #2ab8ff;border:none;margin-left:5%">提交</button>
            </nav>
            <div class="mui-page-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <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>
                        @*<select v-model="ProblemNature" class="mui-btn mui-btn-block" style="font-size:15px;padding-left:20px">
                            <option v-for="pn in ProblemNatureSelec" v-bind:value="pn.代码">{{pn.显示名}}</option>
                        </select>*@
                        <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 class="mui-input-row mui-radio ">
                                <label>向上提交</label>
                                <input v-model="DealStatus" name="radio1" type="radio" value="2">
                            </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:40px;margin-top:20px">
                            <textarea v-model="urgentDetail" id="urgentDetail" rows="6" placeholder="请填写紧急描述说明" style="font-size:15px;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        var IsPlus = mui.os.plus ? true : false;
        var Count = 0;
        var ProblemProcessIDtoImg;
        var lod;
        var Code = '@ViewBag.ProductCode';
        var PersonProperty = '@ViewBag.PersonProperty';
        var ProjectId = '@ViewBag.ProjectId';
        var OrgID = '@ViewBag.OrgID';
        var vm = new Vue({
            el: '#vue',
            data: {
                ///项目机构
                ProjectAndInstitution: {},
                Institution: {},
                //选择的项目
                ProjectSelect: '',
                //已选项目名称
                ProjectSelectName: '',
                ///项目人员选择的机构
                institutionSele: "",
                //已选机构名称
                institutionSeleName:"",
                ///项目人员选择的处理状态
                DealStatus: 0,
                ///问题标题
                ProblemTitile: '',
                ///问题描述
                detail: '',
                ///处理描述说明
                DealDetail: '',
                ///紧急程度选择项
                ErginSelec: null,
                ///紧急程度
                ErginID: '',
                ///紧急描述
                urgentDetail: '',
                ///紧急处理时间
                RequireTime: '请选择时间',
                viewApi: null,
                ///登记来源
                Origin: '',
                ///登记来源选择项
                OriginSelec: null,
                ///问题性质
                ProblemNature: '',
                ///问题性质选择项
                ProblemNatureSelec: null,
                //项目搜索项
                ProjectSearchText: '',
                //机构搜索项
                searchText: '',
                FivePlusUploder:null

            },
            created: function () {

            },
            watch: {
            },
            methods: {
                ///获取项目
                GetProject: function () {
                    var that = this;
                    this.$http.get('/MobileProblem/GetProjectTreeByCode/' + Code).then(function (res) {
                        this.ProjectAndInstitution = res.body;
                        var UserSetProject = getCookie("UserSetProject");
                        if (UserSetProject && UserSetProject.split('|')[0]) {
                            ///判断获取的项目中是否存在设置的默认项目
                            var status = false;
                            for(item of res.body) {
                                if (item.id == UserSetProject.split('|')[0]) {
                                    status = true;
                                    break;
                                }
                            }
                            if (status) {
                                that.SetProjectAndInstitution();
                                that.CheckInsitution(res.body, UserSetProject.split('|')[0])
                            }
                        }
                    }, function (res) {
                        console.log(res.status);
                    });
                },
                //筛选机构
                CheckInsitution :function (project,id){
                    for(item of project) {
                        if (item.id == id) {
                            this.Institution = item.children
                            return
                        }
                    }

                },
                ///重置项目机构
                ResetProjectAndInstitution(){
                    this.ProjectSelect = '';
                    this.ProjectSelectName = '';
                    this.institutionSele = '';
                    this.institutionSeleName = '';
                },
                //设置默认项目机构
                SetProjectAndInstitution(){
                    //判断是否设置默认项目和机构
                    var UserSetProject = getCookie("UserSetProject");
                    if (UserSetProject && UserSetProject.split('|')[0]) {
                        this.ProjectSelect = UserSetProject.split('|')[0];
                        this.ProjectSelectName = UserSetProject.split('|')[1] + "  ->";
                        var UserSetInstitution = getCookie("UserSetInstitution");
                        if (UserSetInstitution && UserSetInstitution.split('|')[0]) {
                            this.institutionSele = UserSetInstitution.split('|')[0];
                            this.institutionSeleName = UserSetInstitution.split('|')[1];
                        }

                    }
                },
                ///获取登记来源
                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);
                    });
                },
                ///获取机构
                GetInstitution: function (i) {
                    this.ProjectSelect = i.id;
                    this.ProjectSelectName = i.text + " ->";
                    this.institutionSele = '';
                    this.institutionSeleName = '';
                    //$(".mui-control-item ").removeClass("mui-active");
                    //$("#" + i.text).addClass("mui-active");
                    this.Institution = i.children;
                },
                ///获取紧急程度选择项
                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);
                    });

                },
                //只选择项目直接跳转页面
                GoRegister: function () {
                    this.viewApi.go("#register");
                },
                ///选择机构并跳转登记主页面
                InstitutionSelect: function (i) {
                    this.institutionSele = i.id;
                    this.institutionSeleName = i.text;
                    this.viewApi.go("#register");

                },
                ///问题状态选择界面
                StatusSelect: function () {
                    if (Code == '') {
                        mui.toast('请重新选择产品', { duration: 'long', type: 'div' });
                        return;
                    }
                    if (this.ProblemTitile == '') {
                        mui.toast('请输入问题标题', { duration: 'long', type: 'div' });
                        return;
                    }
                    if (this.detail == '') {
                        mui.toast('请填写问题详细描述', { duration: 'long', type: 'div' });
                        return;
                    }
                    if (this.ProjectSelect == '') {
                        mui.toast('至少选择一个存在问题的项目', { duration: 'long', type: 'div' });
                        return;
                    }
                    this.viewApi.go("#DEALSTATUS");
                },
                ///紧急问题登记界面
                ErginSelect: function () {
                    this.viewApi.go("#Ergin");
                },
                ///提交问题
                Submit: function () {
                    var that = this;
                    var param = {
                        ProblemTitile: this.ProblemTitile,
                        detail: this.detail,
                        InstitutionID: this.institutionSele,
                        ProjectID: this.ProjectSelect,
                        DealStatus: this.DealStatus,
                        DealDetail: this.DealDetail,
                        ErginID: this.ErginID,
                        urgentDetail: this.urgentDetail,
                        RequireTime: this.RequireTime,
                        Origin: this.Origin,
                        ProblemNature: this.ProblemNature,
                        ProductCode: Code
                    }
                    if (Code == '') {
                        mui.toast('请重新选择产品', { duration: 'long', type: 'div' });
                        return;
                    }
                    if (this.ProblemTitile == '') {
                        mui.toast('请输入问题标题', { duration: 'long', type: 'div' });
                        return;
                    }
                    if (this.detail == '') {
                        mui.toast('请填写问题详细描述', { duration: 'long', type: 'div' });
                        return;
                    }
                    if (this.ProjectSelect == '') {
                        mui.toast('至少选择一个存在问题的项目', { duration: 'long', type: 'div' });
                        return;
                    }
                    lod = mui.showLoading("正在提交，请稍后...", "div");
                    $.post("/MobileProblem/SubmitProblem", param, function (data) {
                        if (data.code == 200) {
                            ProblemProcessIDtoImg = data.msg;
                            $("#ctlBtn").click();
                        } else {
                            mui.toast(data.msg, { duration: 'long', type: 'div' });
                        }
                    })

                },
                ///初始化页面
                init: function () {
                    var that = this;
                    mui.init();
                    ///判断是否为机构管理员
                    var defaultPages = '#InstitutionSelect';
                    if (PersonProperty == 4) {
                        this.institutionSele = OrgID;
                        this.ProjectSelect = ProjectId
                        defaultPages = "#register";
                    }

                    //初始化单页view
                    that.viewApi = mui('#app').view({
                        defaultPage: defaultPages
                    });
                    mui('.mui-scroll-wrapper').scroll();
                    //处理view的后退与webview后退
                    var oldBack = mui.back;
                    var view = that.viewApi.view;
                    mui.back = function () {
                        if (that.viewApi.canBack()) { //如果view可以后退，则执行view的后退
                            that.viewApi.back();
                        } else { //执行webview后退
                            oldBack();
                        }
                    };

                },
                ///实例化日期组件
                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);
                    })
                },
                ///初始化图片上传插件
                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("问题反馈成功，请耐心等待，成功上传" + Count + "个附件!", "提交成功", "确定", function () {
                                window.location.href = "/MobileProblem/Home";
                            }, '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'
                    });


                },
                getde: function () {
                    if (!this.detail) {
                        this.detail = this.ProblemTitile;
                    }
                },
                LoadUploder: function () {
                    this.ImagUploaderInit();
                    if (IsPlus) {
                        this.FivePlusUploder = new FivePlus();

                    }
                }

            },
            computed: {
                InsitutionSearchData: function () {
                    var searchText = this.searchText;
                    if (searchText) {
                        return this.Institution.filter(function (Institutions) {

                            return Object.keys(Institutions).some(function (key) {

                                return String(Institutions[key]).toLowerCase().indexOf(searchText) > -1

                            })

                        })
                    }
                    return this.Institution
                },
                ProjectSearchData: function () {
                    var ProjectSearchText = this.ProjectSearchText;
                    if (ProjectSearchText) {
                        return this.ProjectAndInstitution.filter(function (ProjectAndInstitutions) {

                            return Object.keys(ProjectAndInstitutions).some(function (key) {

                                return String(ProjectAndInstitutions[key]).toLowerCase().indexOf(ProjectSearchText) > -1

                            })

                        })
                    }
                    return this.ProjectAndInstitution
                }


            },
            mounted: function () {
                this.init();
                this.LoadUploder();
                this.loadTime();
                this.GetProject();
                this.GetErgin();
                this.GetOriginSelec();
                this.GetProblemNatureSelec();

            }
        })
    </script>
</body>
</html>