| | |
| | | var pageCurr; |
| | | layui.config({ |
| | | base: baseUrl + "/static/layui/lay/modules/" |
| | | }).use(['table','laydate', 'form', 'admin'], function(){ |
| | | var table = layui.table; |
| | | var $ = layui.jquery; |
| | | var layer = layui.layer; |
| | | var layDate = layui.laydate; |
| | | var form = layui.form; |
| | | var admin = layui.admin; |
| | | (function () { |
| | | var simpleEntityName = '@{SIMPLEENTITYNAME}'; |
| | | var entityName = '@{ENTITYNAME}'; |
| | | var primaryKeyField = '@{PRIMARYKEYCOLUMN0}'; |
| | | var fieldMeta = [ |
| | | @{VUEFIELDMETA} |
| | | ]; |
| | | |
| | | // 数据渲染 |
| | | tableIns = table.render({ |
| | | elem: '#@{SIMPLEENTITYNAME}', |
| | | headers: {token: localStorage.getItem('token')}, |
| | | url: baseUrl+'/@{SIMPLEENTITYNAME}/list/auth', |
| | | page: true, |
| | | limit: 15, |
| | | limits: [15, 30, 50, 100, 200, 500], |
| | | toolbar: '#toolbar', |
| | | cellMinWidth: 50, |
| | | height: 'full-120', |
| | | cols: [[ |
| | | {type: 'checkbox'} |
| | | @{JSTABLECONTENT} |
| | | ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:120} |
| | | ]], |
| | | request: { |
| | | pageName: 'curr', |
| | | pageSize: 'limit' |
| | | }, |
| | | parseData: function (res) { |
| | | return { |
| | | 'code': res.code, |
| | | 'msg': res.msg, |
| | | 'count': res.data.total, |
| | | 'data': res.data.records |
| | | } |
| | | }, |
| | | response: { |
| | | statusCode: 200 |
| | | }, |
| | | done: function(res, curr, count) { |
| | | if (res.code === 403) { |
| | | top.location.href = baseUrl+"/"; |
| | | } |
| | | pageCurr=curr; |
| | | limit(); |
| | | function isEmptyValue(value) { |
| | | return value === null || value === undefined || value === ''; |
| | | } |
| | | |
| | | function stringValue(value) { |
| | | return isEmptyValue(value) ? '' : String(value); |
| | | } |
| | | |
| | | function valueOrDash(value) { |
| | | return isEmptyValue(value) ? '--' : value; |
| | | } |
| | | |
| | | function normalizeOptionValue(field, rawValue) { |
| | | if (rawValue === null || rawValue === undefined) { |
| | | return null; |
| | | } |
| | | }); |
| | | if (rawValue === '') { |
| | | return ''; |
| | | } |
| | | if (field && field.valueType === 'number') { |
| | | var numberVal = Number(rawValue); |
| | | return isNaN(numberVal) ? rawValue : numberVal; |
| | | } |
| | | return String(rawValue); |
| | | } |
| | | |
| | | // 监听排序事件 |
| | | table.on('sort(@{SIMPLEENTITYNAME})', function (obj) { |
| | | var searchData = {}; |
| | | $.each($('#search-box [name]').serializeArray(), function() { |
| | | searchData[this.name] = this.value; |
| | | function isSearchableField(field) { |
| | | return !!field && field.kind !== 'image' && !field.textarea; |
| | | } |
| | | |
| | | function isSortableField(field) { |
| | | if (!field) { |
| | | return false; |
| | | } |
| | | if (field.primaryKey) { |
| | | return true; |
| | | } |
| | | return field.kind !== 'image' && !field.textarea && field.kind !== 'foreign'; |
| | | } |
| | | |
| | | function defaultFieldValue(field) { |
| | | if (field.primaryKey) { |
| | | return null; |
| | | } |
| | | if (field.kind === 'checkbox') { |
| | | return normalizeOptionValue(field, field.checkboxInactiveRaw); |
| | | } |
| | | return ''; |
| | | } |
| | | |
| | | function defaultSearchFieldValue(field) { |
| | | if (field.kind === 'date') { |
| | | return []; |
| | | } |
| | | if (field.kind === 'enum' || field.kind === 'checkbox') { |
| | | return null; |
| | | } |
| | | return ''; |
| | | } |
| | | |
| | | function createSearchDefaults() { |
| | | var result = { |
| | | condition: '' |
| | | }; |
| | | fieldMeta.forEach(function (field) { |
| | | if (!isSearchableField(field)) { |
| | | return; |
| | | } |
| | | result[field.field] = defaultSearchFieldValue(field); |
| | | }); |
| | | searchData['orderByField'] = obj.field; |
| | | searchData['orderByType'] = obj.type; |
| | | tableIns.reload({ |
| | | where: searchData, |
| | | page: {curr: 1} |
| | | }); |
| | | }); |
| | | return result; |
| | | } |
| | | |
| | | // 监听头工具栏事件 |
| | | table.on('toolbar(@{SIMPLEENTITYNAME})', function (obj) { |
| | | var checkStatus = table.checkStatus(obj.config.id).data; |
| | | switch(obj.event) { |
| | | case 'addData': |
| | | showEditModel(); |
| | | break; |
| | | case 'deleteData': |
| | | if (checkStatus.length === 0) { |
| | | layer.msg('请选择要删除的数据', {icon: 2}); |
| | | return; |
| | | } |
| | | del(checkStatus.map(function (d) { |
| | | return d.@{PRIMARYKEYCOLUMN0}; |
| | | })); |
| | | break; |
| | | case 'exportData': |
| | | admin.confirm('确定导出Excel吗', {shadeClose: true}, function(){ |
| | | var titles=[]; |
| | | var fields=[]; |
| | | obj.config.cols[0].map(function (col) { |
| | | if (col.type === 'normal' && col.hide === false && col.toolbar == null) { |
| | | titles.push(col.title); |
| | | fields.push(col.field); |
| | | } |
| | | }); |
| | | var exportData = {}; |
| | | $.each($('#search-box [name]').serializeArray(), function() { |
| | | exportData[this.name] = this.value; |
| | | }); |
| | | var param = { |
| | | '@{SIMPLEENTITYNAME}': exportData, |
| | | 'fields': fields |
| | | }; |
| | | $.ajax({ |
| | | url: baseUrl+"/@{SIMPLEENTITYNAME}/export/auth", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | data: JSON.stringify(param), |
| | | dataType:'json', |
| | | contentType:'application/json;charset=UTF-8', |
| | | method: 'POST', |
| | | success: function (res) { |
| | | layer.closeAll(); |
| | | if (res.code === 200) { |
| | | table.exportFile(titles,res.data,'xls'); |
| | | } else if (res.code === 403) { |
| | | top.location.href = baseUrl+"/"; |
| | | } else { |
| | | layer.msg(res.msg, {icon: 2}) |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | break; |
| | | } |
| | | }); |
| | | |
| | | // 监听行工具事件 |
| | | table.on('tool(@{SIMPLEENTITYNAME})', function(obj){ |
| | | var data = obj.data; |
| | | switch (obj.event) { |
| | | case 'edit': |
| | | showEditModel(data); |
| | | break; |
| | | case "del": |
| | | del([data.@{PRIMARYKEYCOLUMN0}]); |
| | | break; |
| | | } |
| | | }); |
| | | |
| | | /* 弹窗 - 新增、修改 */ |
| | | function showEditModel(mData) { |
| | | admin.open({ |
| | | type: 1, |
| | | area: '600px', |
| | | title: (mData ? '修改' : '添加') + '', |
| | | content: $('#editDialog').html(), |
| | | success: function (layero, dIndex) { |
| | | form.val('detail', mData); |
| | | layDateRender(mData); |
| | | form.on('submit(editSubmit)', function (data) { |
| | | var loadIndex = layer.load(2); |
| | | $.ajax({ |
| | | url: baseUrl+"/@{SIMPLEENTITYNAME}/"+(mData?'update':'add')+"/auth", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | data: data.field, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | layer.close(loadIndex); |
| | | if (res.code === 200){ |
| | | layer.close(dIndex); |
| | | layer.msg(res.msg, {icon: 1}); |
| | | tableReload(); |
| | | } else if (res.code === 403){ |
| | | top.location.href = baseUrl+"/"; |
| | | }else { |
| | | layer.msg(res.msg, {icon: 2}); |
| | | } |
| | | } |
| | | }) |
| | | return false; |
| | | }); |
| | | $(layero).children('.layui-layer-content').css('overflow', 'visible'); |
| | | layui.form.render('select'); |
| | | function createSearchDisplayDefaults() { |
| | | var result = {}; |
| | | fieldMeta.forEach(function (field) { |
| | | if (field.kind === 'foreign' && isSearchableField(field)) { |
| | | result[field.field] = ''; |
| | | } |
| | | }); |
| | | return result; |
| | | } |
| | | |
| | | function createDefaultVisibleColumnKeys() { |
| | | return fieldMeta.map(function (field) { |
| | | return field.field; |
| | | }); |
| | | } |
| | | |
| | | /* 删除 */ |
| | | function del(ids) { |
| | | layer.confirm('确定要删除选中数据吗?', { |
| | | skin: 'layui-layer-admin', |
| | | shade: .1 |
| | | }, function (i) { |
| | | layer.close(i); |
| | | var loadIndex = layer.load(2); |
| | | function createFormDefaults() { |
| | | var result = {}; |
| | | fieldMeta.forEach(function (field) { |
| | | result[field.field] = defaultFieldValue(field); |
| | | }); |
| | | return result; |
| | | } |
| | | |
| | | function createDisplayDefaults() { |
| | | var result = {}; |
| | | fieldMeta.forEach(function (field) { |
| | | if (field.kind === 'foreign') { |
| | | result[field.field] = ''; |
| | | } |
| | | }); |
| | | return result; |
| | | } |
| | | |
| | | function createFormRules() { |
| | | var rules = {}; |
| | | fieldMeta.forEach(function (field) { |
| | | if (field.primaryKey || !field.required) { |
| | | return; |
| | | } |
| | | rules[field.field] = [{ |
| | | required: true, |
| | | message: (field.kind === 'date' || field.kind === 'enum' ? '请选择' : '请输入') + field.label, |
| | | trigger: (field.kind === 'date' || field.kind === 'enum') ? 'change' : 'blur' |
| | | }]; |
| | | }); |
| | | return rules; |
| | | } |
| | | |
| | | function getTableValue(row, field) { |
| | | var prop = field.tableProp || field.field; |
| | | if (row && !isEmptyValue(row[prop])) { |
| | | return row[prop]; |
| | | } |
| | | return row ? row[field.field] : ''; |
| | | } |
| | | |
| | | function isCheckboxChecked(row, field) { |
| | | var value = row ? row[field.field] : null; |
| | | var activeValue = normalizeOptionValue(field, field.checkboxActiveRaw); |
| | | return String(value) === String(activeValue); |
| | | } |
| | | |
| | | function exportCell(value) { |
| | | return stringValue(value).replace(/\t/g, ' ').replace(/\r?\n/g, ' '); |
| | | } |
| | | |
| | | function escapeHtml(value) { |
| | | return exportCell(value) |
| | | .replace(/&/g, '&') |
| | | .replace(/</g, '<') |
| | | .replace(/>/g, '>') |
| | | .replace(/"/g, '"') |
| | | .replace(/'/g, '''); |
| | | } |
| | | |
| | | function buildPayload(form) { |
| | | var payload = {}; |
| | | fieldMeta.forEach(function (field) { |
| | | var value = form[field.field]; |
| | | if (field.primaryKey) { |
| | | if (!isEmptyValue(value)) { |
| | | payload[field.field] = value; |
| | | } |
| | | return; |
| | | } |
| | | if (field.kind === 'foreign' && isEmptyValue(value)) { |
| | | value = null; |
| | | } |
| | | if (field.kind === 'enum' && value === '') { |
| | | value = null; |
| | | } |
| | | if (field.kind === 'checkbox' && isEmptyValue(value)) { |
| | | value = normalizeOptionValue(field, field.checkboxInactiveRaw); |
| | | } |
| | | if (field.valueType === 'number' && !isEmptyValue(value)) { |
| | | value = Number(value); |
| | | } |
| | | if (field.valueType === 'number' && value === '') { |
| | | value = null; |
| | | } |
| | | payload[field.field] = value; |
| | | }); |
| | | return payload; |
| | | } |
| | | |
| | | function fillFormFromRow(row, form, display) { |
| | | fieldMeta.forEach(function (field) { |
| | | if (field.primaryKey) { |
| | | form[field.field] = row[field.field]; |
| | | return; |
| | | } |
| | | if (field.kind === 'date') { |
| | | form[field.field] = row[field.tableProp] || row[field.field] || ''; |
| | | return; |
| | | } |
| | | if (field.kind === 'foreign') { |
| | | form[field.field] = isEmptyValue(row[field.field]) ? '' : normalizeOptionValue(field, row[field.field]); |
| | | if (display) { |
| | | display[field.field] = row[field.tableProp] || (isEmptyValue(row[field.field]) ? '' : String(row[field.field])); |
| | | } |
| | | return; |
| | | } |
| | | if (field.kind === 'enum') { |
| | | form[field.field] = isEmptyValue(row[field.field]) ? '' : normalizeOptionValue(field, row[field.field]); |
| | | return; |
| | | } |
| | | if (field.kind === 'checkbox') { |
| | | form[field.field] = isEmptyValue(row[field.field]) |
| | | ? normalizeOptionValue(field, field.checkboxInactiveRaw) |
| | | : normalizeOptionValue(field, row[field.field]); |
| | | return; |
| | | } |
| | | form[field.field] = isEmptyValue(row[field.field]) |
| | | ? '' |
| | | : (field.valueType === 'number' ? String(row[field.field]) : row[field.field]); |
| | | }); |
| | | } |
| | | |
| | | function resolveSearchParam(field) { |
| | | if (field.kind === 'date' && field.columnName) { |
| | | return field.columnName; |
| | | } |
| | | return field.field; |
| | | } |
| | | |
| | | function createDownloadFile(filename, titles, rows) { |
| | | var html = [ |
| | | '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">', |
| | | '<head><meta charset="UTF-8"></head><body><table border="1"><thead><tr>', |
| | | titles.map(function (title) { |
| | | return '<th>' + escapeHtml(title) + '</th>'; |
| | | }).join(''), |
| | | '</tr></thead><tbody>', |
| | | (rows || []).map(function (row) { |
| | | return '<tr>' + (row || []).map(function (value) { |
| | | return '<td style="mso-number-format:\\@;">' + escapeHtml(value) + '</td>'; |
| | | }).join('') + '</tr>'; |
| | | }).join(''), |
| | | '</tbody></table></body></html>' |
| | | ].join(''); |
| | | var blob = new Blob(['\ufeff' + html], { |
| | | type: 'application/vnd.ms-excel;charset=utf-8;' |
| | | }); |
| | | var anchor = document.createElement('a'); |
| | | anchor.href = URL.createObjectURL(blob); |
| | | anchor.download = filename; |
| | | document.body.appendChild(anchor); |
| | | anchor.click(); |
| | | setTimeout(function () { |
| | | URL.revokeObjectURL(anchor.href); |
| | | document.body.removeChild(anchor); |
| | | }, 0); |
| | | } |
| | | |
| | | function buildTimestamp() { |
| | | var now = new Date(); |
| | | var pad = function (num) { |
| | | return num < 10 ? '0' + num : String(num); |
| | | }; |
| | | return now.getFullYear() |
| | | + pad(now.getMonth() + 1) |
| | | + pad(now.getDate()) |
| | | + '_' |
| | | + pad(now.getHours()) |
| | | + pad(now.getMinutes()) |
| | | + pad(now.getSeconds()); |
| | | } |
| | | |
| | | function authHeaders() { |
| | | return { |
| | | token: localStorage.getItem('token') |
| | | }; |
| | | } |
| | | |
| | | function handleForbidden(res) { |
| | | if (res && res.code === 403) { |
| | | top.location.href = baseUrl + '/'; |
| | | return true; |
| | | } |
| | | return false; |
| | | } |
| | | |
| | | var sharedMethods = { |
| | | authHeaders: authHeaders, |
| | | handleForbidden: handleForbidden, |
| | | valueOrDash: valueOrDash, |
| | | stringValue: stringValue, |
| | | getTableValue: getTableValue, |
| | | isCheckboxChecked: isCheckboxChecked, |
| | | normalizeOptionValue: normalizeOptionValue, |
| | | isSortableField: isSortableField, |
| | | getSuggestionFetcher: function (field) { |
| | | var self = this; |
| | | return function (queryString, callback) { |
| | | self.fetchForeignSuggestions(field, queryString, callback); |
| | | }; |
| | | }, |
| | | fetchForeignSuggestions: function (field, queryString, callback) { |
| | | if (!field.foreignQuery || !queryString) { |
| | | callback([]); |
| | | return; |
| | | } |
| | | var self = this; |
| | | $.ajax({ |
| | | url: baseUrl+"/@{SIMPLEENTITYNAME}/delete/auth", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | data: {ids: ids}, |
| | | method: 'POST', |
| | | url: baseUrl + '/' + field.foreignQuery + 'Query/auth', |
| | | method: 'GET', |
| | | headers: self.authHeaders(), |
| | | data: { condition: queryString }, |
| | | success: function (res) { |
| | | layer.close(loadIndex); |
| | | if (res.code === 200){ |
| | | layer.msg(res.msg, {icon: 1}); |
| | | tableReload(); |
| | | } else if (res.code === 403){ |
| | | top.location.href = baseUrl+"/"; |
| | | } else { |
| | | layer.msg(res.msg, {icon: 2}); |
| | | if (self.handleForbidden(res)) { |
| | | return; |
| | | } |
| | | if (!res || res.code !== 200 || !Array.isArray(res.data)) { |
| | | callback([]); |
| | | return; |
| | | } |
| | | callback(res.data.map(function (item) { |
| | | return { |
| | | id: item.id, |
| | | value: item.value |
| | | }; |
| | | })); |
| | | }, |
| | | error: function () { |
| | | callback([]); |
| | | } |
| | | }); |
| | | }, |
| | | handleForeignSelect: function (field, item) { |
| | | this.$set(this.displayTarget, field.field, item && item.value ? item.value : ''); |
| | | this.$set(this.formTarget, field.field, item && item.id !== undefined ? normalizeOptionValue(field, item.id) : ''); |
| | | }, |
| | | handleForeignInput: function (field) { |
| | | if (!this.displayTarget || !this.formTarget) { |
| | | return; |
| | | } |
| | | if (this.displayTarget[field.field]) { |
| | | return; |
| | | } |
| | | this.$set(this.formTarget, field.field, ''); |
| | | } |
| | | }; |
| | | |
| | | if (document.getElementById('app')) { |
| | | new Vue({ |
| | | el: '#app', |
| | | data: function () { |
| | | return { |
| | | fieldMeta: fieldMeta, |
| | | primaryKeyField: primaryKeyField, |
| | | loading: false, |
| | | exporting: false, |
| | | tableData: [], |
| | | selection: [], |
| | | advancedFiltersVisible: false, |
| | | allColumns: fieldMeta.slice(), |
| | | visibleColumnKeys: createDefaultVisibleColumnKeys(), |
| | | searchForm: createSearchDefaults(), |
| | | searchDisplay: createSearchDisplayDefaults(), |
| | | page: { |
| | | curr: 1, |
| | | limit: 15, |
| | | total: 0 |
| | | }, |
| | | sortState: { |
| | | prop: '', |
| | | order: '' |
| | | }, |
| | | dialog: { |
| | | visible: false, |
| | | mode: 'create', |
| | | submitting: false |
| | | }, |
| | | layoutTimer: null, |
| | | tableResizeHandler: null, |
| | | dialogForm: createFormDefaults(), |
| | | dialogDisplay: createDisplayDefaults(), |
| | | dialogRules: createFormRules() |
| | | }; |
| | | }, |
| | | computed: { |
| | | searchableFields: function () { |
| | | return this.fieldMeta.filter(function (field) { |
| | | return isSearchableField(field); |
| | | }); |
| | | }, |
| | | quickSearchableFields: function () { |
| | | var result = []; |
| | | this.searchableFields.forEach(function (field) { |
| | | if (result.length >= 3 || field.kind === 'date') { |
| | | return; |
| | | } |
| | | result.push(field); |
| | | }); |
| | | return result; |
| | | }, |
| | | advancedSearchableFields: function () { |
| | | var quickKeys = this.quickSearchableFields.map(function (field) { |
| | | return field.field; |
| | | }); |
| | | return this.searchableFields.filter(function (field) { |
| | | return quickKeys.indexOf(field.field) === -1; |
| | | }); |
| | | }, |
| | | hasAdvancedFilters: function () { |
| | | return this.advancedSearchableFields.length > 0; |
| | | }, |
| | | visibleColumns: function () { |
| | | var keys = this.visibleColumnKeys; |
| | | return this.allColumns.filter(function (field) { |
| | | return keys.indexOf(field.field) !== -1; |
| | | }); |
| | | }, |
| | | editableFields: function () { |
| | | return this.fieldMeta.filter(function (field) { |
| | | return !field.primaryKey; |
| | | }); |
| | | }, |
| | | exportColumns: function () { |
| | | return this.visibleColumns.map(function (field) { |
| | | return { |
| | | field: field.exportField || field.tableProp || field.field, |
| | | label: field.label |
| | | }; |
| | | }); |
| | | }, |
| | | tableHeight: function () { |
| | | return this.advancedFiltersVisible && this.hasAdvancedFilters |
| | | ? 'calc(100vh - 390px)' |
| | | : 'calc(100vh - 300px)'; |
| | | }, |
| | | formTarget: function () { |
| | | return this.dialogForm; |
| | | }, |
| | | displayTarget: function () { |
| | | return this.dialogDisplay; |
| | | } |
| | | }, |
| | | created: function () { |
| | | this.loadTable(); |
| | | }, |
| | | mounted: function () { |
| | | var self = this; |
| | | self.requestTableLayout(80); |
| | | self.tableResizeHandler = function () { |
| | | self.requestTableLayout(80); |
| | | }; |
| | | window.addEventListener('resize', self.tableResizeHandler); |
| | | }, |
| | | beforeDestroy: function () { |
| | | if (this.layoutTimer) { |
| | | clearTimeout(this.layoutTimer); |
| | | this.layoutTimer = null; |
| | | } |
| | | if (this.tableResizeHandler) { |
| | | window.removeEventListener('resize', this.tableResizeHandler); |
| | | this.tableResizeHandler = null; |
| | | } |
| | | }, |
| | | methods: $.extend({}, sharedMethods, { |
| | | requestTableLayout: function (delay) { |
| | | var self = this; |
| | | if (self.layoutTimer) { |
| | | clearTimeout(self.layoutTimer); |
| | | } |
| | | self.$nextTick(function () { |
| | | self.layoutTimer = setTimeout(function () { |
| | | var table = self.$refs.dataTable; |
| | | if (table && typeof table.doLayout === 'function') { |
| | | table.doLayout(); |
| | | } |
| | | }, delay || 40); |
| | | }); |
| | | }, |
| | | isColumnVisible: function (fieldName) { |
| | | return this.visibleColumnKeys.indexOf(fieldName) !== -1; |
| | | }, |
| | | toggleColumn: function (fieldName, visible) { |
| | | if (visible) { |
| | | if (this.visibleColumnKeys.indexOf(fieldName) === -1) { |
| | | this.visibleColumnKeys.push(fieldName); |
| | | } |
| | | this.requestTableLayout(80); |
| | | return; |
| | | } |
| | | if (this.visibleColumnKeys.length === 1) { |
| | | this.$message.warning('至少保留一列'); |
| | | return; |
| | | } |
| | | this.visibleColumnKeys = this.visibleColumnKeys.filter(function (item) { |
| | | return item !== fieldName; |
| | | }); |
| | | this.requestTableLayout(80); |
| | | }, |
| | | selectAllColumns: function () { |
| | | this.visibleColumnKeys = createDefaultVisibleColumnKeys(); |
| | | this.requestTableLayout(80); |
| | | }, |
| | | resetColumns: function () { |
| | | this.visibleColumnKeys = createDefaultVisibleColumnKeys(); |
| | | this.requestTableLayout(80); |
| | | }, |
| | | toggleAdvancedFilters: function () { |
| | | this.advancedFiltersVisible = !this.advancedFiltersVisible; |
| | | this.requestTableLayout(260); |
| | | }, |
| | | handleSearchForeignSelect: function (field, item) { |
| | | this.$set(this.searchDisplay, field.field, item && item.value ? item.value : ''); |
| | | this.$set(this.searchForm, field.field, item && item.id !== undefined ? normalizeOptionValue(field, item.id) : ''); |
| | | }, |
| | | handleSearchForeignInput: function (field) { |
| | | if (this.searchDisplay[field.field]) { |
| | | return; |
| | | } |
| | | this.$set(this.searchForm, field.field, ''); |
| | | }, |
| | | buildQueryParams: function () { |
| | | var self = this; |
| | | var params = { |
| | | curr: self.page.curr, |
| | | limit: self.page.limit |
| | | }; |
| | | if (self.searchForm.condition) { |
| | | params.condition = self.searchForm.condition; |
| | | } |
| | | self.searchableFields.forEach(function (field) { |
| | | var value = self.searchForm[field.field]; |
| | | if (field.kind === 'date') { |
| | | if (value && value.length === 2) { |
| | | params[resolveSearchParam(field)] = value[0] + ' - ' + value[1]; |
| | | } |
| | | return; |
| | | } |
| | | if (!isEmptyValue(value)) { |
| | | params[resolveSearchParam(field)] = value; |
| | | } |
| | | }); |
| | | if (self.sortState.prop && self.sortState.order) { |
| | | params.orderByField = self.sortState.prop; |
| | | params.orderByType = self.sortState.order === 'ascending' ? 'asc' : 'desc'; |
| | | } |
| | | return params; |
| | | }, |
| | | loadTable: function () { |
| | | var self = this; |
| | | self.loading = true; |
| | | $.ajax({ |
| | | url: baseUrl + '/' + simpleEntityName + '/list/auth', |
| | | method: 'GET', |
| | | headers: self.authHeaders(), |
| | | data: self.buildQueryParams(), |
| | | success: function (res) { |
| | | self.loading = false; |
| | | if (self.handleForbidden(res)) { |
| | | return; |
| | | } |
| | | if (!res || res.code !== 200) { |
| | | self.$message.error((res && res.msg) ? res.msg : '加载失败'); |
| | | return; |
| | | } |
| | | var payload = res.data || {}; |
| | | self.tableData = Array.isArray(payload.records) ? payload.records : []; |
| | | self.page.total = payload.total || 0; |
| | | self.requestTableLayout(80); |
| | | }, |
| | | error: function () { |
| | | self.loading = false; |
| | | self.requestTableLayout(80); |
| | | self.$message.error('加载失败'); |
| | | } |
| | | }); |
| | | }, |
| | | handleSearch: function () { |
| | | this.page.curr = 1; |
| | | this.loadTable(); |
| | | }, |
| | | handleReset: function () { |
| | | this.searchForm = createSearchDefaults(); |
| | | this.searchDisplay = createSearchDisplayDefaults(); |
| | | this.advancedFiltersVisible = false; |
| | | this.page.curr = 1; |
| | | this.sortState = { |
| | | prop: '', |
| | | order: '' |
| | | }; |
| | | this.loadTable(); |
| | | }, |
| | | handleSelectionChange: function (rows) { |
| | | this.selection = rows || []; |
| | | }, |
| | | handleSortChange: function (payload) { |
| | | this.sortState = { |
| | | prop: payload && payload.prop ? payload.prop : '', |
| | | order: payload && payload.order ? payload.order : '' |
| | | }; |
| | | this.page.curr = 1; |
| | | this.loadTable(); |
| | | }, |
| | | handleCurrentChange: function (curr) { |
| | | this.page.curr = curr; |
| | | this.loadTable(); |
| | | }, |
| | | handleSizeChange: function (limit) { |
| | | this.page.limit = limit; |
| | | this.page.curr = 1; |
| | | this.loadTable(); |
| | | }, |
| | | resetDialogState: function () { |
| | | this.dialogForm = createFormDefaults(); |
| | | this.dialogDisplay = createDisplayDefaults(); |
| | | if (this.$refs.dialogForm) { |
| | | this.$refs.dialogForm.clearValidate(); |
| | | } |
| | | }, |
| | | openCreateDialog: function () { |
| | | this.dialog.mode = 'create'; |
| | | this.dialog.visible = true; |
| | | this.$nextTick(this.resetDialogState); |
| | | }, |
| | | openEditDialog: function (row) { |
| | | var self = this; |
| | | self.dialog.mode = 'edit'; |
| | | self.dialog.visible = true; |
| | | self.$nextTick(function () { |
| | | self.resetDialogState(); |
| | | fillFormFromRow(row, self.dialogForm, self.dialogDisplay); |
| | | if (self.$refs.dialogForm) { |
| | | self.$refs.dialogForm.clearValidate(); |
| | | } |
| | | }); |
| | | }, |
| | | submitDialog: function () { |
| | | var self = this; |
| | | if (!self.$refs.dialogForm) { |
| | | return; |
| | | } |
| | | self.$refs.dialogForm.validate(function (valid) { |
| | | if (!valid) { |
| | | return false; |
| | | } |
| | | self.dialog.submitting = true; |
| | | $.ajax({ |
| | | url: baseUrl + '/' + simpleEntityName + '/' + (self.dialog.mode === 'create' ? 'add' : 'update') + '/auth', |
| | | method: 'POST', |
| | | headers: self.authHeaders(), |
| | | data: buildPayload(self.dialogForm), |
| | | success: function (res) { |
| | | self.dialog.submitting = false; |
| | | if (self.handleForbidden(res)) { |
| | | return; |
| | | } |
| | | if (!res || res.code !== 200) { |
| | | self.$message.error((res && res.msg) ? res.msg : '保存失败'); |
| | | return; |
| | | } |
| | | self.$message.success(res.msg || '保存成功'); |
| | | self.dialog.visible = false; |
| | | self.loadTable(); |
| | | }, |
| | | error: function () { |
| | | self.dialog.submitting = false; |
| | | self.$message.error('保存失败'); |
| | | } |
| | | }); |
| | | return true; |
| | | }); |
| | | }, |
| | | removeSelection: function () { |
| | | var self = this; |
| | | var ids = self.selection.map(function (row) { |
| | | return row[self.primaryKeyField]; |
| | | }); |
| | | self.removeRows(ids); |
| | | }, |
| | | removeRows: function (ids) { |
| | | var self = this; |
| | | if (!ids || ids.length === 0) { |
| | | self.$message.warning('请选择要删除的数据'); |
| | | return; |
| | | } |
| | | self.$confirm('确定删除选中的记录吗?', '提示', { type: 'warning' }).then(function () { |
| | | $.ajax({ |
| | | url: baseUrl + '/' + simpleEntityName + '/delete/auth', |
| | | method: 'POST', |
| | | headers: self.authHeaders(), |
| | | traditional: true, |
| | | data: { 'ids[]': ids }, |
| | | success: function (res) { |
| | | if (self.handleForbidden(res)) { |
| | | return; |
| | | } |
| | | if (!res || res.code !== 200) { |
| | | self.$message.error((res && res.msg) ? res.msg : '删除失败'); |
| | | return; |
| | | } |
| | | self.$message.success(res.msg || '删除成功'); |
| | | self.selection = []; |
| | | if (self.tableData.length === ids.length && self.page.curr > 1) { |
| | | self.page.curr = self.page.curr - 1; |
| | | } |
| | | self.loadTable(); |
| | | }, |
| | | error: function () { |
| | | self.$message.error('删除失败'); |
| | | } |
| | | }); |
| | | }).catch(function () {}); |
| | | }, |
| | | exportRows: function () { |
| | | var self = this; |
| | | self.exporting = true; |
| | | var requestBody = { |
| | | fields: self.exportColumns.map(function (item) { |
| | | return item.field; |
| | | }) |
| | | }; |
| | | requestBody[simpleEntityName] = self.buildQueryParams(); |
| | | $.ajax({ |
| | | url: baseUrl + '/' + simpleEntityName + '/export/auth', |
| | | method: 'POST', |
| | | headers: $.extend({ 'Content-Type': 'application/json;charset=UTF-8' }, self.authHeaders()), |
| | | data: JSON.stringify(requestBody), |
| | | success: function (res) { |
| | | self.exporting = false; |
| | | if (self.handleForbidden(res)) { |
| | | return; |
| | | } |
| | | if (!res || res.code !== 200) { |
| | | self.$message.error((res && res.msg) ? res.msg : '导出失败'); |
| | | return; |
| | | } |
| | | createDownloadFile( |
| | | simpleEntityName + '_' + buildTimestamp() + '.xls', |
| | | self.exportColumns.map(function (item) { |
| | | return item.label; |
| | | }), |
| | | Array.isArray(res.data) ? res.data : [] |
| | | ); |
| | | self.$message.success('导出成功'); |
| | | }, |
| | | error: function () { |
| | | self.exporting = false; |
| | | self.$message.error('导出失败'); |
| | | } |
| | | }); |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | |
| | | // 搜索 |
| | | form.on('submit(search)', function (data) { |
| | | pageCurr = 1; |
| | | tableReload(false); |
| | | }); |
| | | |
| | | // 重置 |
| | | form.on('submit(reset)', function (data) { |
| | | pageCurr = 1; |
| | | clearFormVal($('#search-box')); |
| | | tableReload(false); |
| | | }); |
| | | |
| | | // 时间选择器 |
| | | function layDateRender(data) { |
| | | setTimeout(function () { |
| | | layDate.render({ |
| | | elem: '.layui-laydate-range' |
| | | ,type: 'datetime' |
| | | ,range: true |
| | | }); |
| | | @{JSDATECONTENT} |
| | | }, 300); |
| | | } |
| | | layDateRender(); |
| | | |
| | | }); |
| | | |
| | | // 关闭动作 |
| | | $(document).on('click','#data-detail-close', function () { |
| | | parent.layer.closeAll(); |
| | | }); |
| | | |
| | | function tableReload(child) { |
| | | var searchData = {}; |
| | | $.each($('#search-box [name]').serializeArray(), function() { |
| | | searchData[this.name] = this.value; |
| | | }); |
| | | tableIns.reload({ |
| | | where: searchData, |
| | | page: {curr: pageCurr} |
| | | }); |
| | | } |
| | | })(); |