jifuning
/
yangchangwan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/table.css" />
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        html,
        body {
            /*background: #FAFAFA;*/
            background: #FAFAFA;
            max-height: 100%
        }

        .api_seach_material_box {
            height: 62.5px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            background: #009FE8;
        }
        /*物资搜索输入框*/

        .api_seach_material {
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 1);
            border-radius: 34px;
            margin: 14px 12px;
        }

        .api_seach_material div {
            font-size: 16px;
            font-weight: 400;
            color: rgba(146, 146, 146, 1);
            padding-left: 5px;
        }

        .api_seach_material img {
            display: inline-block;
            width: 16px;
            height: 16px;
        }

        .get_materials_storage_list_table {}

        .el-pagination {
            margin-top: 10px;
            float: right;
        }

        .header-container {
            width: 100%;
            margin-top: 62.5px
            /*position: fixed;
            top: 62.5px;
            left: 0;*/
        }

        .header-container ul {
            width: 820px;
            height: 60px;
            display: flex;
            align-items: center;
            overflow-x: scroll;
            text-align: center;
            background: rgba(243, 246, 250, 1);
        }

        #tableList {
            width: 820px;
            text-align: center;
        }

        #tableList ul li {
            height: 60px;
            /*padding: 10px 0;*/
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: space-around;
            border-bottom: solid 1px #E0E1E2;
        }

        .encode_width,
        .name_width,
        .storage_width {
            width: 100px
        }

        .specs_width {
            width: 200px;
        }

        .depiction_width {
            width: 200px;
        }

        .depiction_width_item,
        .specs_width_item {
            width: 200px;
        }

        .depiction_width_item div {
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical;
            /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 2;
            /** 显示的行数 **/
            overflow: hidden;
            /** 隐藏超出的内容 **/
        }

        .num_width {
            width: 70px;
        }

        .unit_width {
            width: 50px;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="list_container">
            <div style="padding-bottom:10px;" class="api_seach_material_box">
                <div class="api_seach_material" id="api_seach_material" onclick="openDiffSearchType()">
                    <img src="../../image/search.png" alt="">
                    <div>搜索</div>
                </div>
            </div>

            <div class="header-container">
                <ul>
                    <li class="encode_width">物资编码</li>
                    <li class="name_width">物资名称</li>
                    <li class="specs_width">规则型号</li>
                    <li class="depiction_width">物资描述</li>
                    <li class="num_width">数量</li>
                    <li class="unit_width">单位</li>
                    <li class="storage_width">所在位置</li>
                </ul>
            </div>
            <div id="tableList"></div>

            <div class="noText" v-show="marterialLength == 0">
                <img src="../../image/noText.png" alt="">
            </div>
        </div>
    </div>
    </div>
</body>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/doT.min.js" charset="utf-8"></script>
<script src="../../script/fastclick.min.js" charset="utf-8"></script>

<script type="text/template" id="templateMaterial">
    {{~it:value}}
    <ul style="display: flex">
        <li class="encode_width">
            <div>
                {{=value.encode}}
            </div>

        </li>
        {{?value.name}}
        <li class="name_width">
            <div>{{=value.name}}</div>

        </li>
        {{??}}
        <li class="name_width">
            <div>暂无数据</div>

        </li>
        {{?}} {{?value.specs}}
        <li class="specs_width_item">
            <div>
                {{=value.specs}}
            </div>

        </li>
        {{??}}
        <li class="specs_width_item">
            <div>
                暂无数据
            </div>

        </li>
        {{?}}


        <li class="depiction_width_item">
            <div>
                {{=value.depiction}}
            </div>

        </li>
        <li class="num_width">
            <div>
                {{=value.num}}
            </div>

        </li>
        <li class="unit_width">
            <div>
                {{=value.unit}}
            </div>

        </li>
        <li class="storage_width">
            <div>
                {{=value.storage}}
            </div>

        </li>
    </ul>
    {{~}}
</script>
<script>
    var materialNameStorage = '',
        materialSpecsStorage = '',
        materialPositionStorage = '',
        page = 1;
    apiready = function() {
        materialNameStorage = api.pageParam.materialName;
        materialSpecsStorage = api.pageParam.materialSpecs;
        materialPositionStorage = api.pageParam.materialPosition;
        getMaterialList();
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 0
            }
        }, function(ret, err) {
            // ajax 在已经加载列表的基础上，请求加载下一页页面
            getMaterialList(page+=1);


        });
    }

    function getMaterialList(page) {
        api.showProgress({
            title: '加载中',
            // text: '先喝杯茶...',
            modal: true
        });
        $http.fnReuestDataNologing(UrlRouter.getMaterial, '', 'get', {
            depiction: '',
            storage: materialPositionStorage,
            classify: '',
            encode: '',
            name: materialNameStorage,
            specs: materialSpecsStorage,
            page: page
        }, function(ret, err) {
            if (ret.code === 0) {
                api.hideProgress();
                $apis.html(tableList, '#templateMaterial', ret.data.data);
                if (ret.data.data.length) {
                    $api.addCls($api.dom('.noText'), 'hide');
                } else {
                    $api.removeCls($api.dom('.noText'), 'hide');
                }
            }
        });
    }

    function openDiffSearchType() {
        $event.openTabLayout('diffSearchType'+ Math.random(), '../material/diffSearchType', '物资查询', '')
    }
</script>

</html>