layUI中table和form,及layer的综合应用(备份)

hehebulu
已于 2024-03-01 14:19:18 修改
阅读量457
点赞数 9
文章标签： layui 前端 javascript
于 2024-02-29 16:16:31 首次发布
本文链接：https://blog.csdn.net/weixin_46630678/article/details/136374308
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试记录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<style>
    .header{
        height: 53px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        border: 1px solid;
    }
    .header label:nth-child(1){
        margin-left: 35px;
    }

   .header-right > button {
       margin-right: 62px;
   }


    .layui-layer-content > form > div > label{
        width: 110px !important;
    }
    .layui-layer-content > form > div > div{
        margin-left: 143px !important;
    }

    .layui-col-md1{
        width: 5% !important;
    }

</style>

<body>
<div class="header">
    <div class="header-left"> <label> 测试记录 </label><label id="xmmc">(项目名称)</label></div>
    <div class="header-right">  <button type="button" class="layui-btn" lay-on="back">返回</button></div>

</div>
<div class="query">
    <form class="layui-form layui-row">
        <div class="layui-col-md2">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">测试日期:</label>
                <div class="layui-input-block">
                    <input type="text" name="testRecordDatetime" class="layui-input" id="testRecordDatetime" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">测试人员:</label>
                <div class="layui-input-block">
                    <select name="testMembers" lay-filter="testMembers" id="testMembers">
                        <option value=""></option>
                        <option value="0">写作</option>
                        <option value="1" selected>阅读</option>
                        <option value="2">游戏</option>
                        <option value="3">音乐</option>
                        <option value="4">旅行</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">开发人员:</label>
                <div class="layui-input-block">
                    <select name="developmentMembers" lay-filter="developmentMembers" id="developmentMembers">
                        <option value=""></option>
                        <option value="0">写作</option>
                        <option value="1" selected>阅读</option>
                        <option value="2">游戏</option>
                        <option value="3">音乐</option>
                        <option value="4">旅行</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">开发处理:</label>
                <div class="layui-input-block">
                    <select name="DevelopmentProcessing" lay-filter="DevelopmentProcessing">
                        <option value=""></option>
                        <option value="0">未处理</option>
                        <option value="1" >已处理</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">测试确认:</label>
                <div class="layui-input-block">
                    <select name="TestConfirmation" lay-filter="TestConfirmation">
                        <option value=""></option>
                        <option value="0">未通过</option>
                        <option value="1">通过</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="shaiXuanShaiXuan">筛选</button>
                    <button type="submit" class="layui-btn" lay-submit lay-filter="tianJia">添加</button>
                </div>
            </div>
        </div>
    </form>
</div>
<table class="layui-hide" id="testRecordTable" lay-filter="testRecordTable"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="layui/layui.js"></script>


</body>
<script>
    layui.use(function () {
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var laydate = layui.laydate;
        var upload = layui.upload;
        const BASE_URL = "http://localhost:810"

        // 根据jxlx开启相关单元格的编辑权限
        let leixing = localStorage.getItem("leixing");
        // 项目ID
        let uuid = localStorage.getItem("uuid");
        let xmmc = localStorage.getItem("xmmc");
        // 用户名
        let username = localStorage.getItem("username");

        $("#xmmc").text(xmmc)



        // 渲染测试时间
        laydate.render({
            elem: '#testRecordDatetime'
        });

        // 拼接筛选条件
        getfilterCriteria()
        function getfilterCriteria() {
            $.ajax(
                {
                    async: true,
                    url: BASE_URL + "/cs/getMembers",
                    data: { },
                    type: "get",
                    dataType: "json",
                    success: function (resp) {

                        // 创建一个空对象，用于存储按照"leixing"字段分组的数组
                        const groupedData = {};
                        // 迭代数据数组
                        resp.result.forEach(item => {
                            // 检查当前对象的"leixing"值是否在groupedData中存在
                            if (groupedData[item.leixing]) {
                                // 如果存在，则将当前对象添加到对应的数组中
                                groupedData[item.leixing].push(item);
                            } else {
                                // 如果不存在，则创建一个新数组，并将当前对象添加到该数组中
                                groupedData[item.leixing] = [item];
                            }
                        });

                        // 类型为开发的成员名称数组
                        var leixing1Names = groupedData["1"] ? groupedData["1"].map(item => item.username) : [];
                        // 公司所有成员名称数组
                        var allNames = Object.values(groupedData).flatMap(group => group.map(item => item.username));

                        let leixing1NamesSelect = `<option value=""></option>`
                        leixing1Names.forEach(function (item) {
                            leixing1NamesSelect += `<option value="${item}">${item}</option>`
                        })

                        let allNamesSelect = `<option value=""></option>`
                        allNames.forEach(function (item) {
                            allNamesSelect += `<option value="${item}">${item}</option>`
                        })

                        $("#testMembers").html(allNamesSelect);
                        $("#developmentMembers").html(leixing1NamesSelect);

                        form.render();
                    }
                })
        }

        util.on('lay-on', {
            back: function () {
                if (leixing === "0"){
                    window.location.href = 'http://localhost:810/glyindex.html';
                    layer.msg("返回")
                } else if (leixing === "1"){
                    window.location.href = 'http://localhost:810/kfindex.html';
                    layer.msg("返回")
                }else {
                    window.location.href = 'http://localhost:810/JiXiaoIndex.html';
                    layer.msg("返回")
                }
                // window.location.href = 'http://localhost:810/glyindex.html';
                // layer.msg("返回")

            }
        })


        // 添加
        form.on('submit(tianJia)', function(data){
            layer.open({
                type: 1, // page 层类型
                area: ['700px', '850px'],
                title: '测试记录',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: `<form class="layui-form" action="" lay-filter="detailForm" id="detailForm" style="margin-top: 20px;">
                                  <div class="layui-form-item">
                                    <label class="layui-form-label">测试日期：</label>
                                    <div class="layui-input-block">
                                      <input type="text" name="csrq" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" id="layerTime">
                                    </div>
                                  </div>
                                   <div class="layui-form-item">
                                    <label class="layui-form-label">测试人：</label>
                                    <div class="layui-input-block">
                                      <input type="text" name="csr" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                  </div>
                                   <div class="layui-form-item">
                                    <label class="layui-form-label">测试环境：</label>
                                    <div class="layui-input-block">
                                      <input type="text" name="cshj" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                  </div>
                                   <div class="layui-form-item">
                                    <label class="layui-form-label">功能模块：</label>
                                    <div class="layui-input-block">
                                      <input type="text" name="csmk" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                  </div>
                                  <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">功能描述：</label>
                                    <div class="layui-input-block">
                                      <textarea name="csgn" placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                  </div>
                                  <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">问题描述：</label>
                                    <div class="layui-input-block">
                                      <textarea name="wtms" placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                  </div>

                                 <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">问题截图：</label>
                                    <div class="layui-input-block">
                                               <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                                                 <i class="layui-icon layui-icon-upload"></i> 单图片上传
                                               </button>
                                               <div style="width: 132px;">
                                                 <div class="layui-upload-list">
                                                   <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;" class="layui-anim">
                                                   <div id="ID-upload-demo-text"></div>
                                                 </div>

                                            </div>
                                    </div>
                                 </div>

                                  <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">测试确认结果：</label>
                                    <div class="layui-input-block">
                                            <select name="csqrjg" lay-filter="TestConfirmation">
                                                <option value=""></option>
                                                <option value="1">通过</option>
                                                <option value="0">未通过</option>
                                            </select>
                                    </div>
                                  </div>

                                   <div class="layui-form-item">
                                    <label class="layui-form-label">测试确认说明：</label>
                                    <div class="layui-input-block">
                                      <textarea name="csqrsm" placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                  </div>
                                </form>
                            `,
                btn: ['提交', '取消'],
                success: function(layero, index){
                    form.val('detailForm', {
                        "csr":username
                    });
                 },
                btnAlign: 'c', // 按钮居中显示
                btn1: function(){

                   //  检验是否上传图片
                    if ($('#ID-upload-demo-img').attr('src') == undefined){
                        // alert("未上传图片" + " " + $('#ID-upload-demo-img').attr('src'))
                        $('#ID-upload-demo-img').css("border", "1px solid red");
                        // $("#ID-upload-demo-img").addClass("layui-anim layui-anim-scaleSpring layui-anim-loop")
                        $("#ID-upload-demo-img").addClass("layui-anim layui-anim-scaleSpring")
                        layer.msg("请上传问题截图!!!")
                        return;
                    }

                   let formFromLayer = $("#detailForm")[0]
                   let formData = new FormData(formFromLayer);
                    $.ajax({
                        async: false,
                        url: BASE_URL + "/cs/addTestRecord?xmid="+uuid + "&xmmc=" + xmmc,
                        data: formData,
                        type: "post",
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        success: function (resp) {
                            // 处理成功的响应
                            console.log(resp);
                            layer.close()
                            // 刷新页面
                            location.reload();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            // 处理错误情况
                            console.error("AJAX error: " + textStatus, errorThrown);
                        }
                    });


                },
                btn2: function(){
                    layer.msg("取消");
                }
            });
            // 渲染测试时间
            laydate.render({
                elem: '#layerTime'
            });

            // 图片上传
            upload.render({
                elem: '#ID-upload-demo-btn',
                auto:false,
                // 选择图片之后的回调(渲染预览图)
                choose: function(obj){
                    console.log( $('#ID-upload-demo-img').attr('src'))
                    obj.preview(function(index, file, result){
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });
                },
            });



            return false; // 阻止默认 form 跳转
        });
        // 筛选
        form.on('submit(shaiXuanShaiXuan)', function(data){
            var field = data.field; // 获取表单字段值
            field.uuid = uuid

            $.ajax(
                {
                    async: true,
                    url: BASE_URL + "/cs/getTestRecord",
                    data: field,
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        var tableData = resp.result
                        // table.render({
                        //     elem: '#testRecordTable',
                        //     css: [
                        //         '.layui-table-view td[data-edit]{color: #16B777;}', //高亮可以编辑的单元格
                        //         '.layui-table-page{text-align: center;}' // 让分页栏居中
                        //     ].join(''),
                        //     cols: [[
                        //         {field: 'uuid', hide: true, title: 'id', align: 'center'},
                        //         {field: 'csrq', title: '测试日期', align: 'center'},
                        //         {field: 'csr', title: '测试人', align: 'center'},
                        //         {field: 'cshj', title: '测试环境', align: 'center'},
                        //         {field: 'csmk', title: '功能模块', align: 'center'},
                        //         {field: 'csgn', title: '功能描述', align: 'center'},
                        //         {field: 'wtms', title: '问题描述', align: 'center'},
                        //         {field: 'kfcljg', title: '开发处理结果', align: 'center', edit: kaiFa},
                        //         {field: 'kfclsm', title: '开发处理说明', align: 'center', edit: kaiFa},
                        //         {field: 'csqrjg', title: '测试确认结果', align: 'center', edit: ceShi},
                        //         {field: 'csqrsm', title: '测试确认说明', align: 'center', edit: ceShi},
                        //         {title: '操作', align: 'center', toolbar: '#barDemo'},
                        //     ]],
                        //     data: tableData,
                        //     skin: "nob",
                        //     page: true,
                        //     limits: [5, 10, 15],
                        //     limit: 15
                        // });
                        // 更新表格数据
                        table.reload('testRecordTable', {
                            data: tableData
                        });
                    }
                })
            // …
            return false; // 阻止默认 form 跳转
        });


        // 获取表格数据
        getListOfTestRecord()
        function getListOfTestRecord() {
            $.ajax(
                {
                    async: true,
                    url: BASE_URL + "/cs/getTestRecord",
                    data: {uuid},
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        var tableData = resp.result
                        table.render({
                            elem: '#testRecordTable',
                            css: [
                                '.layui-table-view td[data-edit]{color: #16B777;}', //高亮可以编辑的单元格
                                '.layui-table-page{text-align: center;}' // 让分页栏居中
                            ].join(''),
                            cols: [[
                                {field: 'uuid', hide: true, title: 'id', align: 'center'},
                                {field: 'csrq', title: '测试日期', align: 'center'},
                                {field: 'csr', title: '测试人', align: 'center'},
                                {field: 'cshj', title: '测试环境', align: 'center'},
                                {field: 'csmk', title: '功能模块', align: 'center'},
                                {field: 'csgn', title: '功能描述', align: 'center'},
                                {field: 'wtms', title: '问题描述', align: 'center'},
                                {field: 'wtjt', hide: true,  title: '问题截图', align: 'center'},
                                {field: 'kfcljg', title: '开发处理结果', align: 'center', templet: function (e) {
                                        if (e.kfcljg == 0) {
                                            return "未解决"
                                        } else if (e.kfcljg == 1) {
                                            return "已解决"
                                        }else {
                                            return ""
                                        }
                                    }},
                                {field: 'kfclsm', title: '开发处理说明', align: 'center'},
                                {field: 'csqrjg', title: '测试确认结果', align: 'center' , templet: function (e) {
                                        if (e.csqrjg == 0) {
                                            return "未解决"
                                        } else if (e.csqrjg == 1) {
                                            return "已解决"
                                        }else {
                                            return ""
                                        }
                                    }},
                                {field: 'csqrsm', title: '测试确认说明', align: 'center'},
                                {title: '操作', align: 'center', toolbar: '#barDemo'},
                            ]],
                            data: tableData,
                            skin: "nob",
                            page: true,
                            limits: [5, 10, 15],
                            limit: 15
                        });
                    }
                })
        }


        // var tableData = [
        //     {
        //         "id": 1,
        //         "csrq": "2023-10-23",
        //         "csr": "张三",
        //         "cshj": "开发环境",
        //         "csmk": "用户管理",
        //         "csgn": "添加用户、删除用户功能",
        //         "wtms": "用户添加时，页面报错",
        //         "kfcljg": "已修复",
        //         "kfclsm": "修复了用户添加时的页面报错问题",
        //         "csqrjg": "通过",
        //         "csqrsm": "测试通过，功能正常",
        //         "status": "1"
        //     },
        //     {
        //         "id": 2,
        //         "csrq": "2023-10-22",
        //         "csr": "李四",
        //         "cshj": "测试环境",
        //         "csmk": "订单管理",
        //         "csgn": "查看订单、修改订单状态功能",
        //         "wtms": "修改订单状态时，数据未保存",
        //         "kfcljg": "待处理",
        //         "kfclsm": "需要进一步调查问题原因",
        //         "csqrjg": "",
        //         "csqrsm": "",
        //         "status": "1"
        //     },
        //     {
        //         "id": 3,
        //         "csrq": "2023-10-21",
        //         "csr": "王五",
        //         "cshj": "生产环境",
        //         "csmk": "支付功能",
        //         "csgn": "支付宝、微信支付功能",
        //         "wtms": "支付宝支付时，页面卡顿",
        //         "kfcljg": "已优化",
        //         "kfclsm": "优化了支付页面的性能",
        //         "csqrjg": "通过",
        //         "csqrsm": "测试通过，支付流畅",
        //         "status": "1"
        //     }
        // ]

        // 单元格编辑后的事件
        table.on('edit(testRecordTable)', function (obj) {
            var field = obj.field; // 得到修改的字段
            var value = obj.value // 得到修改后的值
            var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
            var data = obj.data // 得到所在行所有键值
            var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增

            // 值的校验
            if (value.replace(/\s/g, '') === '') {
                layer.tips('值不能为空', this, {tips: 1});
                return obj.reedit(); // 重新编辑 -- v2.8.0 新增
            }
            // 编辑后续操作，如提交更新请求，以完成真实的数据更新
            // …
            // 显示 - 仅用于演示
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
        });
        // 删除与查看按钮
        table.on('tool(testRecordTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除吗？', function (index) {
                    // layer.msg(JSON.stringify(data))
                    $.ajax(
                        {
                            async: true,
                            url: BASE_URL + "/cs/delTestRecord",
                            data: { id: data.uuid },
                            type: "get",
                            dataType: "json",
                            success: function (resp) {

                            }
                        })
                    // 刷新页面
                    layer.close(index);
                    location.reload();
                });

            }
            if (obj.event === 'detail') {
                layer.open({
                    type: 1, // page 层类型
                    area: ['700px', '750px'],
                    title: '测试记录',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: `<form class="layui-form" action="" lay-filter="detailForm" id="detailForm" style="margin-top: 20px;">
                                  <div class="layui-form-item layui-form-text" style="display: none">
                                    <label class="layui-form-label">uuid：</label>
                                    <div class="layui-input-block">
                                      <input type="text" name="uuid" id="uuid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                  </div>

                                  <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">问题描述：</label>
                                    <div class="layui-input-block">
                                      <textarea name="wtms" placeholder="请输入内容" class="layui-textarea" disabled></textarea>
                                    </div>
                                  </div>
                                   <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">问题截图：</label>
                                    <div class="layui-input-block">
                                               <div style="width: 132px;" id="wenTiJieTu" >
                                                 <div class="layui-upload-list">
                                                   <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;" onclick="enlargeTheImage(this.src)">
                                                   <div id="ID-upload-demo-text"></div>
                                                 </div>
                                            </div>
                                    </div>
                                 </div>
                                  <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">开发处理结果：</label>
                                    <div class="layui-input-block">
                                      <select name="kfcljg" id="kfcljg" lay-filter="DevelopmentProcessing">
                                            <option value=""></option>
                                            <option value="0">未处理</option>
                                            <option value="1" >已处理</option>
                                        </select>
                                    </div>
                                  </div>
                                   <div class="layui-form-item">
                                    <label class="layui-form-label">开发处理说明：</label>
                                    <div class="layui-input-block">
                                        <textarea name="kfclsm" id="kfclsm" placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                  </div>
                                  <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">测试确认结果：</label>
                                    <div class="layui-input-block">
                                     <select name="csqrjg" id="csqrjg" lay-filter="DevelopmentProcessing">
                                            <option value=""></option>
                                            <option value="0">未通过</option>
                                            <option value="1">已通过</option>
                                        </select>
                                    </div>
                                  </div>
                                   <div class="layui-form-item">
                                    <label class="layui-form-label">测试确认说明：</label>
                                    <div class="layui-input-block">
                                      <textarea name="csqrsm" id="csqrsm" placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                  </div>
                                </form>
                            `
                    ,success: function(layero, index){
                        // layer.msg(JSON.stringify(data))
                        // console.log(JSON.stringify(data))
                        form.val('detailForm', data);
                        $('#ID-upload-demo-img').attr('src', data.wtjt);


                        if(leixing == 1){
                            $('#csqrsm').prop('disabled', true);
                            $('#csqrjg').prop('disabled', true);
                            // 下拉框添加disabled需要刷新表单才起作用
                            form.render("select")
                        }else {
                            $('#kfclsm').prop('disabled', true);
                            $('#kfcljg').prop('disabled', true);
                            // 下拉框添加disabled需要刷新表单才起作用
                            form.render("select")

                        }



                    },
                    btn: ['提交', '取消'],
                    btnAlign: 'c', // 按钮居中显示
                    btn1: function(){
                        let formFromLayer = $("#detailForm")[0]
                        let formData = new FormData(formFromLayer);
                        console.log(formData)
                        $.ajax({
                            async: true,
                            url: BASE_URL + "/cs/updateTestRecord",
                            data: formData,
                            type: "post", // 将请求类型改为 "post"
                            dataType: "json",
                            processData: false,
                            contentType: false,
                            success: function (resp) {
                                // 处理成功的响应
                                console.log(resp);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                // 处理错误情况
                                console.error("AJAX error: " + textStatus, errorThrown);
                            }
                        });
                        // 关闭弹窗
                        layer.close()
                        // 刷新页面
                        location.reload();
                    },
                    btn2: function(){
                        layer.msg("取消");
                    }

                });

            }
        });

    });

    // 放大图片
    function enlargeTheImage(src) {
        layer.photos({
            photos: {
                "title": "问题截图",
                "start": 0,
                "data": [
                    {
                        "alt": "浩瀚宇宙",
                        "pid": 5,
                        "src": src,
                    }
                ]
            },
            footer: false // 是否显示底部栏 --- 2.8.16+
        });
    }


</script>

</html>