t1
/
ZLPMS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
							
@{
    ViewBag.Title = "SelectProblemItem";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}

    <link href="~/Content/Style/MobileProductRegist/NewProblemForProject.css?v=1.0" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/webuploader.css" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/mui.indexedlist.css" rel="stylesheet" />

    <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/babel.min.js"></script>
    <script src="~/Content/Scripts/polyfill.min.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.indexedlist.js?v=1.3"></script>

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

<body class="mui-fullscreen">
    <style>

        .onselect {
            padding: 0 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .mui-indexed-list-bar {
            background-color: white;
        }

            .mui-indexed-list-bar.active {
                background-color: white !important;
            }

            .mui-indexed-list-bar a {
                color: black;
            }

        .search_title {
            position: absolute;
            left: 40px;
            border-bottom: none;
            width: 82%;
        }

        .mui-indexed-list {
            border-width: 0px;
        }

        .mui-search .mui-placeholder {
            font-size: 13px;
        }

        .hot_class {
            display: inline-block;
            line-height: 0.4rem;
            padding: 12px 23px;
            border-radius: 6px;
            color: #000;
            margin: 5px;
            font-size: 13px;
            text-align: center;
            list-style: none;
            border: solid 1px #dcd9d9;
        }

        .hot_active {
            color: #00aaff;
        }
    </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="SelectNew" 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>

            </div>
            <!--页面标题栏结束-->
            <!--页面主内容区开始-->
            <div id="modal" class="mui-page-content">
                <div id="list" class="mui-indexed-list">
                    <div>
                        <div class="mui-indexed-list-search mui-input-row mui-search  ">
                            <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索项目名称/简码">
                        </div>
                    </div>
                    <div class="mui-indexed-list-bar">
                        <a v-if="ProjectSelectName">已选</a>
                        <a>历史</a>
                        <a v-for="item  in ProjectIndex">{{item.Index}}</a>
                    </div>
                    <div class="mui-indexed-list-alert"></div>
                    <div class="mui-indexed-list-inner">
                        <div class="mui-indexed-list-empty-alert">没有数据</div>
                        <ul class="mui-table-view" style="margin-top:0;padding-right: 23px;">
                            <template v-if="ProjectSelectName">
                                <li data-group="已选" class="mui-table-view-divider mui-indexed-list-group">已选项目</li>
                                <li class="hot_class hot_active">{{ProjectSelectName}}</li>
                            </template>
                            <li data-group="历史" class="mui-table-view-divider mui-indexed-list-group">历史记录</li>
                                <li v-if="UserHistoryProject.length>0"
                                    v-on:click="ProjectChooseCompleteHis(item.split('|'))"
                                    v-for="item in UserHistoryProject" class="hot_class">{{item.split('|')[1]}}</li>
                                <li v-if="!UserHistoryProject.length" class="hot_class">暂无</li>
                            <template v-for="item in ProjectIndex">
                                <li v-bind:data-group="item.Index" class="mui-table-view-divider mui-indexed-list-group">{{item.Index}}</li>
                                <li v-bind:class="project.ID==ProjectSelect?'hot_active':''" v-on:click="ProjectChooseComplete(project)" v-for="project in item.Data" v-bind:data-value="project.CodeName" v-bind:data-tags="project.CodeName" class="mui-table-view-cell mui-indexed-list-item">
                                    {{project.Name}}
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
            </div>
            <!--页面主内容区结束-->

        </div>
  

    </div>
    <script >
        var PersonProperty = '@ViewBag.PersonProperty';
        var ProjectId = '@ViewBag.ProjectId';
        var OrgID = '@ViewBag.OrgID';
        "use strict";

        var vm = new Vue({
            el: '#vue',
            data: {
                //选择的项目
                ProjectSelect: '',
                //已选项目名称
                ProjectSelectName: '',
                ///项目人员选择的机构
                institutionSele: "",
                //已选机构名称
                institutionSeleName: "",
                ///项目人员选择的处理状态
                DealStatus: 2,
                viewApi: null,
                //项目索引列表
                ProjectIndex: null,
                //用户的登记的历史项目
                UserHistoryProject: []
            },
            watch: {
                ProjectIndex: function ProjectIndex(newProject, oldProject) {
                    var that = this;
                    this.$nextTick(function () {
                        that.InitIndexSelect();
                    });
                }
            },
            methods: {
                ///初始化页面
                init: function init() {
                    var that = this;
                    mui.init(); ///判断是否为机构管理员
                    var defaultPages = '#SelectNew';

                    if (PersonProperty == 4) {
                        this.institutionSele = OrgID;
                        this.ProjectSelect = ProjectId;
                    } //初始化单页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();
                        }
                    };
                },
          
                //初始化索引列表
                InitIndexSelect: function InitIndexSelect() {
                    var header = document.querySelector('.mui-navbar-inner');
                    var list = document.getElementById('list');
                    var modal = document.getElementById('modal'); //calc hieght

                    list.style.height = modal.offsetHeight + 'px'; //create

                    window.indexedList = new mui.IndexedList(list);
                },
                //获取项目索引列表
                GetProjectIndex: function GetProjectIndex() {
                    var that = this;
                    $.get("/MobileProblem/GetChannelProjectIndexByCode", {}, function (data) {
                        that.ProjectIndex = data;
                    });
                },
                //索引选择项目
                ProjectChooseComplete: function ProjectChooseComplete(project) {
                    this.ProjectSelect = project.ID;
                    this.ProjectSelectName = project.Name;
                    this.AddHistoryProject(project);
                    setCookie("UserMobileSmart", JSON.stringify({ ProjectSelect: this.ProjectSelect, ProjectSelectName: this.ProjectSelectName }), 3);
                     mui.openWindow({
                         url: '/SmartForm/MobileSmart'
                });

                },
                //从历史中选择
                ProjectChooseCompleteHis: function ProjectChooseCompleteHis(projectIn) {
                    var project = {
                        ID: projectIn[0],
                        Name: projectIn[1]
                    };
                    this.ProjectSelect = project.ID;
                    this.ProjectSelectName = project.Name;
                    this.AddHistoryProject(project);
                    setCookie("UserMobileSmart", JSON.stringify({ ProjectSelect: this.ProjectSelect, ProjectSelectName: this.ProjectSelectName }), 3);
                    mui.openWindow({
                        url: '/SmartForm/MobileSmart'
                    });
                },
                //获取历史登记项目
                GetHistoryProject: function GetHistoryProject() {
                    var UserHistoryProject = getCookie("UserHistoryProject");

                    if (UserHistoryProject) {
                        this.UserHistoryProject = JSON.parse(UserHistoryProject);
                    }
                },
                //增加历史登记项目
                AddHistoryProject: function AddHistoryProject(projectIn) {
                    var project = projectIn.ID + "|" + projectIn.Name;
                    var UserHistoryProject = getCookie("UserHistoryProject");

                    if (UserHistoryProject) {
                        var OldKeys = JSON.parse(UserHistoryProject);
                        var findIndex = OldKeys.indexOf(project);

                        if (findIndex == -1) {
                            OldKeys.unshift(project);
                        } else {
                            OldKeys.splice(findIndex, 1);
                            OldKeys.unshift(project);
                        } //最多5个纪录


                        OldKeys.length > 5 && OldKeys.pop();
                        setCookie("UserHistoryProject", JSON.stringify(OldKeys), 3);
                        this.UserHistoryProject = OldKeys; //更新历史搜索
                    } else {
                        var OldKeys = [project];
                        setCookie("UserHistoryProject", JSON.stringify(OldKeys), 3);
                        this.UserHistoryProject = OldKeys; //更新历史搜索
                    }
                },
            },
            computed: {
       
            },
            mounted: function mounted() {
                this.init();
                this.GetHistoryProject();
                this.GetProjectIndex();
            }
        });
    </script>
</body>