检测项配置与管理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43718718/article/details/105197932
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window</title>
    <script src="../../../js/tool/jquery-3.3.1.min.js"></script>
    <script src="../../../js/tool/layui/layui.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/tool/vue.js"></script>
    <script src="../../../js/tool/xm-select.js"></script>
    <link rel="stylesheet" href="../../../js/tool/layui/css/layui.css">
</head>
<style>
    .layui-btn-sm {
        position: relative;
        top: 2px;
    }
</style>
<body style="padding: 20px">

<h4 style="margin-left: 20px"><span style="color: black"><b>检测名称</b></span></h4>

<div id="app" class="layui-form-select" style="margin-left: 20px"></div>
<div>
    <button type="button" class="layui-btn " id="app-reload" style="margin-left: 20px">数据加载</button>

</div>

<div id="item">
    <div class="tableBar layui-form" style="width:auto;margin-left: 20px;" v-if="iqcCheckContentList!=null">
        <div>
            <table class="layui-table">
                <thead>
                <tr>
                    <th>检测名称</th>
                    <th>是否必检(0是必检,1是选检）</th>
                </tr>
                </thead>

                <tr v-for="(item, index) in iqcCheckContentList">

                    <td>
                        <input class="layui-input" type="text" v-model="item.name"
                               disabled="disabled">
                    </td>

                    <td>
                        <input type="number" class="layui-input" v-model="item.checkStatus">
                    </td>
                </tr>
            </table>
        </div>
        <button type="button" class="layui-btn" @click="doCheck()">确定</button>

    </div>

</div>

</body>
</html>

<script>
    var app = xmSelect.render({
        el: '#app',
        autoRow: true,
        toolbar: {show: true},
        filterable: true,
        remoteSearch: true,
        remoteMethod: function (val, cb, show) {
            //这里如果val为空, 则不触发搜索
            $.ajax({
                url: server + "/iqcBaseData/getAllIqcBaseData",
                method: 'post',
                contentType: 'application/json',
                success: function (res) {
                    if (res.type == 0) {
                        var iqcBaseDataList = res.data
                        var obj = [];
                        iqcBaseDataList.forEach(function (v, i) {
                            obj.push({
                                name: v.checkName,
                                value: v.id
                            });
                        })
                        cb(obj);
                    }
                }
            })
        },
    });
    document.getElementById('app-reload').onclick = function () {
        //获取当前多选选中的值
        var selectArr = app.getValue();
        var data = selectArr
        localStorage.removeItem("iqcBaseData")
        localStorage.setItem("iqcBaseData", JSON.stringify(data))
    };
</script>

<script>
    var item = new Vue({
        el: "#item",
        data: {
            iqcCheckContentList: [],
        },
        methods: {
            setTimer: function () {
                this.timer = setInterval(() => {
                    var parentValue = JSON.parse(localStorage.getItem("iqcBaseData"))

                    if(null==parentValue){
                        return
                    }
                    if (null == this.iqcCheckContentList) {
                        this.iqcCheckContentList = parentValue;
                        return;
                    }
                    var count = 1
                    for (var i = 1; i < parentValue.length; i++) {
                        for (var j = 0; j < this.iqcCheckContentList.length; j++) {
                            if (parentValue[i].name == (this.iqcCheckContentList[j].name)) {
                                count++;
                            }
                        }
                    }
                    if (count != parentValue.length) {
                        this.iqcCheckContentList = parentValue;
                    }
                }, 50);
            },
            doCheck: function () {
                var layer
                layui.use('layer', function () {
                    layer = layui.layer;
                })
                var data = this.iqcCheckContentList;
                var cInvcId = localStorage.getItem("tempData")
                $.ajax({
                    url: server + "/itemCheck/addItemCheckDetailsVersionTwo",
                    method: 'post',
                    data: JSON.stringify({
                        itemDetailsList: data,
                        cInvcId: cInvcId
                    }),
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.type == 0) {
                            item.currentPageClose();
                        }
                        layer.msg(res.msg)
                    }
                })
            },
            //关闭当前页面
            currentPageClose: function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);//关闭当前页
            },

        },
        //页面关闭前关闭定时器 （这个才有用） 并且清空缓存
        destroyed: function () {
            console.log("============清空缓存");

            clearInterval(this.timer)
        },
        //页面加载完成后执行方法（启动定时器）
        mounted: function () {
            clearInterval(this.timer)
            this.setTimer()
        },


    });
</script>
x-select的运用
