实现表格嵌入下拉框

src/main/java/com/dreamchaser/depository_manage/pojo/ApplicationOutRecordP.java

@@ -30,6 +30,11 @@ public class ApplicationOutRecordP {
      */
     private List<String> mnameStringList;
 
+    /**
+     * 用于前端页面表格展示
+     */
+    private Map<String,Long> mnameStringMap;
+
     /**
      * 仓库id
      */

src/main/resources/templates/pages/depository/table-out.html

@@ -97,8 +97,6 @@
         </script>
 
 
-
-
         <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
 
         <script type="text/html" id="currentTableBar">
@@ -106,6 +104,14 @@
                th:style="'display:'+${display}">删除</a>
         </script>
 
+
+        <script type="text/html" id="mnameSelect">
+            <button class="layui-btn layui-btn-primary dropdpwn-demo mname{{d.id}}">
+                <span>{{= d.mname.split(",")[0] }}</span>
+                <i class="layui-icon layui-icon-down layui-font-12"></i>
+            </button>
+        </script>
+
     </div>
 </div>
 <script src="/static/lib/layui-v2.8.6/layui.js" charset="utf-8"></script>
@@ -121,10 +127,11 @@
     function selectMaterialByName(obj) {
     }
 
-    layui.use(['form', 'table', 'laydate'], function () {
+    layui.use(['form', 'table', 'laydate','dropdown'], function () {
         var $ = layui.jquery,
             form = layui.form,
             table = layui.table,
+            dropdown = layui.dropdown,
             laydate = layui.laydate;
 
         $('#openSonByDepository').on('click', function () {
@@ -178,7 +185,9 @@
         let cols = [
             {type: "checkbox", width: 50},
             {field: "code", title: '申请编码', width: 150,},
-            {field: 'mname', width: 150, title: '物料名称'},
+            // {field: 'mname', width: 150, title: '物料名称'},
+            {field: 'mname', width: 200, title: '物料名称', templet: '#mnameSelect'},
+
             {field: 'mcode', width: 150, title: '存货编码'},
             {field: 'quantity', width: 100, title: '数量', sort: true},
             {field: 'depositoryName', width: 150, title: '仓库名称'},
@@ -227,7 +236,7 @@
                 pageName: 'page', //页码的参数名称，默认：page
                 limitName: 'size' //每页数据量的参数名，默认：limit
             },
-            where: {"groupByForState":true},
+            where: {"groupByForState": true},
             response: {
                 statusName: 'status' //规定数据状态的字段名称，默认：code
                 , statusCode: 200 //规定成功的状态码，默认：0
@@ -236,13 +245,15 @@
                 , dataName: 'data' //规定数据列表的字段名称，默认：data
             },
             toolbar: '#toolbarDemo',
-            defaultToolbar: ['filter', 'exports', 'print',{
+            defaultToolbar: ['filter', 'exports', 'print', {
                 title: '图表展示'
-                ,layEvent: 'showEchart'
-                ,id:"showEchart"
-                ,icon: 'layui-icon-chart-screen'
+                , layEvent: 'showEchart'
+                , id: "showEchart"
+                , icon: 'layui-icon-chart-screen'
             }],
-            //这里layui和thymeleaf冲突了，要加个空格
+            css: [ // 设置单元格样式
+                '.layui-btn{height: 26px; line-height: 26px;}',
+            ].join(''),
             cols: [
                 [
                     {type: "checkbox", width: 50},
@@ -281,8 +292,21 @@
                         table.reload('currentTableId', {cols: [cols]});
                     }
                 }
+
                 $.each(res['data'], function (i, j) {
+                    let dropdownData = [];
                     let allApproval = j["allApproval"];
+                    let id = j["id"];
+                    let mnameList = j["mname"].split(",");
+                    for (let k = 0; k < mnameList.length; k++) {
+                        let mnameItem = mnameList[k];
+                        if(mnameItem !== ""){
+                            let req = {};
+                            req.title = mnameItem;
+                            req.id = k;
+                            dropdownData.push(req)
+                        }
+                    }
                     let pass = j["pass"];
                     if (pass === 3) {
                         if (allApproval) {
@@ -290,12 +314,21 @@
                         } else {
                             Layui_SetDataTableRowColor('table', i + 1, '#ffb800');
                         }
-                    } else if(pass === 1){
+                    } else if (pass === 1) {
                         Layui_SetDataTableRowColor('table', i + 1, '#16b777');
-                    }else{
+                    } else {
                         Layui_SetDataTableRowColor('table', i + 1, '#ff211e');
                     }
-                })
+
+                    // dropdown 方式的下拉选择
+                    dropdown.render({
+                        elem:'.mname'+id,
+                        data:dropdownData
+                    });
+
+
+                });
+
 
             }
         });
@@ -304,7 +337,7 @@
         // 用于给table行上色的方法
         function Layui_SetDataTableRowColor(TabDivId, RowIndex, ColorString) {
             try {
-                let rowItem =  $("[lay-id='currentTableId'] tr:eq(" + RowIndex + ")");
+                let rowItem = $("[lay-id='currentTableId'] tr:eq(" + RowIndex + ")");
                 let column = $(rowItem[0].childNodes[7]);
                 if (column != null) //找到对象了
                 {
@@ -315,7 +348,7 @@
                     console.log('没有找到对象');
                 }
             } catch (e) {
-                console.log(e.message);
+                // console.log(e.message);
             }
         }
 
@@ -382,8 +415,7 @@
                         }, 'data');
                     }
                 });
-            }
-            else if (obj.event === 'delete') {  // 监听删除操作
+            } else if (obj.event === 'delete') {  // 监听删除操作
                 var checkStatus = table.checkStatus('currentTableId')
                     , data = checkStatus.data;
                 var req = {};
@@ -461,8 +493,7 @@
                     layer.msg("未选中记录，请确认！");
                     return false;
                 }
-            }
-            else if (obj.event === 'showEchart') {
+            } else if (obj.event === 'showEchart') {
                 let listItem = `<ul class="layui-table-tool-panel" style="max-height: 685px;">
                                 <li lay-event="showLineEchart">查看折线图</li>
                                 <li lay-event="showBarEchart">查看柱状图</li>
@@ -470,8 +501,7 @@
                                 </ul>`;
 
                 $("#showEchart").append(listItem)
-            }
-            else if(obj.event === "showSunburstEchart"){
+            } else if (obj.event === "showSunburstEchart") {
                 layer.open({
                     type: 2,
                     offset: 'r',
@@ -483,8 +513,7 @@
                     id: 'applicationOutInfoForLeft',
                     content: '/sunburstEchartForTable?type=2',
                 });
-            }
-            else if(obj.event === "showLineEchart"){
+            } else if (obj.event === "showLineEchart") {
                 layer.open({
                     type: 2,
                     offset: 'r',
@@ -496,8 +525,7 @@
                     id: 'applicationOutInfoForLeft',
                     content: '/lineOrBarEchartForTable?type=2&echartType=line',
                 });
-            }
-            else if(obj.event === "showBarEchart"){
+            } else if (obj.event === "showBarEchart") {
                 layer.open({
                     type: 2,
                     offset: 'r',