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> <% } %> <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>