jeesite4子表卡顿问题

testDataForm.html 优化

<% layout('/layouts/default.html', {title: '数据管理', libs: ['validate','fileupload','dataGrid']}){ %>
<!-- 引入脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<!-- 引入脚本 -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 建议使用 CDN 方式引入的用户在链接地址上锁定版本，避免受到非兼容性更新的影响 -->
<div class="main-content">
    <div class="box box-main">
        <div class="box-header with-border">
            <div class="box-title">
                <i class="fa icon-note"></i> ${text(testData.isNewRecord ? '新增数据' : '编辑数据')}
            </div>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div>
        </div>
        <#form:form id="inputForm" model="${testData}" action="${ctx}/test/testData/save" method="post" class="form-horizontal">
            <div class="box-body">
                <div class="form-unit">${text('基本信息')}</div>
                <#form:hidden path="id"/>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('单行文本')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="testInput" maxlength="200" class="form-control"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2" title="">
                                <span class="required hide">*</span> ${text('多行文本')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-10">
                                <#form:textarea path="testTextarea" rows="4" maxlength="200" class="form-control"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('下拉框')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:select path="testSelect" dictType="sys_menu_type" blankOption="true" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('下拉多选')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:select path="testSelectMultiple" dictType="sys_menu_type" multiple="true" blankOption="true" class="form-control" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('单选框')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:radio path="testRadio" dictType="sys_menu_type" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('复选框')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:checkbox path="testCheckbox" dictType="sys_menu_type" class="form-control" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('日期选择')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="testDate" readonly="true" maxlength="20" class="form-control laydate"
                                    dataFormat="date" data-type="date" data-format="yyyy-MM-dd"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('日期时间')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="testDatetime" readonly="true" maxlength="20" class="form-control laydate"
                                    dataFormat="datetime" data-type="datetime" data-format="yyyy-MM-dd HH:mm"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('用户选择')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:treeselect id="testUser" title="${text('用户选择')}"
                                    path="testUser.userCode" labelPath="testUser.userName"
                                    url="${ctx}/sys/office/treeData?isLoadUser=true"
                                    class="" allowClear="true"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('机构选择')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:treeselect id="testOffice" title="${text('机构选择')}"
                                    path="testOffice.officeCode" labelPath="testOffice.officeName"
                                    url="${ctx}/sys/office/treeData"
                                    class="" allowClear="true"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('区域选择')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:treeselect id="testAreaCode" title="${text('区域选择')}"
                                    path="testAreaCode" labelPath="testAreaName"
                                    url="${ctx}/sys/area/treeData"
                                    class="" allowClear="true"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2" title="">
                                <span class="required hide">*</span> ${text('备注信息')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-10">
                                <#form:textarea path="remarks" rows="4" maxlength="500" class="form-control"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2">${text('图片上传')}：</label>
                            <div class="col-sm-10">
                                <#form:fileupload id="uploadImage" bizKey="${testData.id}" bizType="testData_image"
                                    uploadType="image" class="" readonly="false" preview="true"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2">${text('附件上传')}：</label>
                            <div class="col-sm-10">
                                <#form:fileupload id="uploadFile" bizKey="${testData.id}" bizType="testData_file"
                                    uploadType="all" class="" readonly="false" preview="true"/>
                            </div>
                        </div>
                    </div>
                </div>
                <h4 class="form-unit">${text('子表数据')}</h4>
                <!-- 用户选择 -->
                <div style="display:none">
                <#form:treeselect id="testUserSub" title="${text('用户选择')}"
                                    url="${ctx}/sys/office/treeData?isLoadUser=true"
                                    class="" allowClear="true"/></div>
                <div class="ml10 mr10">
                    <div id="app">
                     <vxe-table
                      border
                      resizable
                      show-overflow
                      :loading="loading"
                      ref="xTable"
                      :data="tableData"
                      :edit-config="{trigger: 'click', mode: 'cell'}">
                      <vxe-table-column fixed="left" type="seq" width="60"></vxe-table-column>
                      <vxe-table-column width="200" fixed="left" field="testSort" title="排序号" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
                      <vxe-table-column width="200" fixed="left" field="testInput" title="单行文本" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
                      <vxe-table-column width="200" field="testTextarea" title="多行文本" :edit-render="{name: 'textarea', attrs: {type: 'text'}}"></vxe-table-column>
                      <vxe-table-column width="200" field="testSelect" title="下拉框" :edit-render="{name: '$select', options: dictList}"></vxe-table-column>
                      <vxe-table-column width="200" field="testSelectMultiple" title="多选下拉" :edit-render="{name: '$select', options: dictList, props: {multiple: true}}"></vxe-table-column>
                      <vxe-table-column width="200" field="testRadio" title="单选框" :edit-render="{name: '$select', options: dictList}"></vxe-table-column>
                      <vxe-table-column width="200" field="testCheckbox" title="复选框" :edit-render="{name: '$select', options: dictList, props: {multiple: true}}"></vxe-table-column>
                      <vxe-table-column width="200" field="testDate" title="日期选择" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
                        <vxe-table-column width="200" field="testDatetime" title="日期时间" :edit-render="{name: '$input', props: {type: 'datetime'}}"></vxe-table-column>
                        <vxe-table-column width="200" field="testUser.userName" title="用户选择" :edit-render="{name: '$input', props: {readonly:true, placeholder:'请点击选择'}, events: {click: userChose}}">
                        </vxe-table-column>
                        <vxe-table-column fixed="right" title="操作" width="100" show-overflow>
                        <template #default="{ row }">
                          <vxe-button style="color:red" type="text" icon="fa fa-trash-o" @click="deleteRow(row)"></vxe-button>
                        </template>
                      </vxe-table-column>
                    </vxe-table>
                    <% if (hasPermi('test:testData:edit')){ %>
                        <button style="margin:10px 5px" type="button" class="btn btn-default btn-sm" @click.stop="addRow"><i class="fa fa-plus" style="color:blue"></i> 增行</button>
                    <% } %>
                    <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <% if (hasPermi('test:testData:edit')){ %>
                            <button type="button" class="btn btn-sm btn-primary" @click="saveForm"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
                        <% } %>
                        <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
                    </div>
                </div>
            </div>
                     </div>
                </div>
            </div>
            
        </#form:form>
    </div>
</div>
<% } %>
<script>
var vm = new Vue({
    el:"#app",
    data () {
        return {
          loading: false,
          choseList: [],
          tableData: [],
          tableDataDel:[],
             // 正式数据
          userChoseId: null,
          listChoseId: null,
          orgChoseId: null,
          areaChoseId: null,
          
          dictList:[]
        }
      },
      created () {
        this.getDict()
        this.findList()
      },
      methods: {
        addRow(){
            this.tableData.push({
                "testSort":null,
              "testInput":null,
              "testTextarea":null,
              "testSelect":null,
              "testSelectMultiple":null,
              "testRadio":null,
              "testCheckbox": null,
              "testDate":null,
              "testDatetime":null,
              "testUser.userCode":null,
              "testUser.userName":null,
              "testOffice":null,
              "testAreaCode":null,
              "testAreaName":null,
          })
        },
        deleteRow(row){
            var _this = this
            js.confirm('确认删除这条数据吗？', function(data){
                _this.tableDataDel.push(row)
                _this.$refs.xTable.remove(row)
            })
        },
        // 获取字典信息
        getDict(){
          var _this = this;
             $.ajax({
                 type:"post",
                 url:"${ctx}/sys/dictData/treeData?dictType=sys_menu_type"
             }).done(function(res){
                 res.forEach(function(v,k){
                     var obj = {}
                     obj.label = v.name
                     obj.value = v.value
                     _this.dictList.push(obj)
                 })
             })
        },
        // 查询列表
        findList () {
              var tmp = ${toJson(testData.testDataChildList)}
            if(tmp.length){
                for(var i=0;i<tmp.length;i++){
                    tmp[i]["testUser.userCode"] = tmp[i].testUser.userCode.replace("u_", "")
                    tmp[i]["testUser.userName"] = tmp[i].testUser.userName
                    tmp[i].testSelectMultiple = tmp[i].testSelectMultiple.split(",")
                    tmp[i].testCheckbox = tmp[i].testCheckbox.split(",")
                }
                // 特殊处理多选
                // 特殊处理用户选择
                  this.tableData = tmp
            }
            
        },
        userChose(row){
            this.userChoseId = row.rowIndex
            $("#testUserSubButton").trigger("click")
        },
        testUserSubCallBack(data){
            // 用户名称
            this.tableData[this.userChoseId]["testUser.userName"] = data[0].name
            // 用户代码
            this.tableData[this.userChoseId]["testUser.userCode"] = data[0].id.replace("u_", "")
        },
        saveForm(){
            if(this.loading == true){
                return js.showErrorMessage("请勿重复提交");
            }
            var saveData = {};
            // 遍历主表
            $.each($("#inputForm").serializeArray(), function(i, field){
                saveData[field.name] = field.value
            })
            // 遍历子表
            for (var i =0;i<this.tableData.length;i++){
                $.each(this.tableData[i], function(k, v){
                    if(Array.isArray(v)){
                        saveData["testDataChildList["+i+"]." + k] = v.join(",");
                    } else if(typeof v === 'object'){
                        
                    } else {
                        saveData["testDataChildList["+i+"]." + k] = v;
                    }
                });
            }
             for (var i =0;i<this.tableDataDel.length;i++){
                 $.each(this.tableDataDel[i], function(k, v){
                     if(Array.isArray(v)){
                         saveData["testDataChildList["+i+"]." + k] = v.join(",");
                     } else if(typeof v === 'object'){
                         
                     } else {
                         saveData["testDataChildList["+i+"]." + k] = v;
                     }
                 });
                 saveData["testDataChildList["+i+"].status"] = 1;
             }
            this.loading = true
            var that = this
            // 提交数据
            $.ajax({
                type:"post",
                url:"${ctx}/test/testData/save",
                data:saveData,
                dataType:"json"
            }).then(function(data){
                that.loading = false;
                if(data.result == Global.TRUE){
                    js.closeCurrentTabPage(function(contentWindow){
                        contentWindow.page();
                    });
                } else {
                    js.showErrorMessage(data.message);
                }
                
            },function(){
                that.loading = false;
                js.showErrorMessage("你访问的页面出错了");
                
            })
        }
      }
})
</script>
<script>

/**
 * 选择回调方法
 * @param id  标签的id
 * @param act 动作事件：ok、clear、cancel
 * @param index layer的索引号
 * @param layero layer内容的jQuery对象
 * @param nodes 当前选择的树节点数组
 */
function treeselectCallback(id, act, index, layero, nodes){
    if (id == 'testUserSub' && (act == 'ok' || act == 'clear')){
        vm.testUserSubCallBack(nodes)
    }
}
$("#inputForm").validate({
    submitHandler: function(form){
        js.ajaxSubmitForm($(form), function(data){
            js.showMessage(data.message);
            if(data.result == Global.TRUE){
                js.closeCurrentTabPage(function(contentWindow){
                    contentWindow.page();
                });
            }
        }, "json");
    }
});
</script>