diff --git a/jero-boot/db/jeroboot-mysql-5.7-20220417.sql b/jero-boot/db/jeroboot-mysql-5.7-20220417.sql index 5e5c94bf..c8a44eb9 100644 --- a/jero-boot/db/jeroboot-mysql-5.7-20220417.sql +++ b/jero-boot/db/jeroboot-mysql-5.7-20220417.sql @@ -1855,7 +1855,7 @@ INSERT INTO `sys_role_permission` VALUES ('f99f99cc3bc27220cdd4f5aced33b7d7', 'f INSERT INTO `sys_role_permission` VALUES ('fafe73c4448b977fe42880a6750c3ee8', 'f6817f48af4fb3af11b9e8bf182f618b', '9cb91b8851db0cf7b19d7ecc2a8193dd', null, null, null); INSERT INTO `sys_role_permission` VALUES ('fced905c7598973b970d42d833f73474', 'f6817f48af4fb3af11b9e8bf182f618b', '4875ebe289344e14844d8e3ea1edd73f', null, null, null); INSERT INTO `sys_role_permission` VALUES ('fd97963dc5f144d3aecfc7045a883427', 'f6817f48af4fb3af11b9e8bf182f618b', '043780fa095ff1b2bec4dc406d76f023', null, null, null); -INSERT INTO `sys_role_permission` VALUES ('1637690312462643202', 'f6817f48af4fb3af11b9e8bf182f618b', '1636190218344304641', NULL, '2023-03-20 13:39:32', '127.0.0.1'); +INSERT INTO `sys_role_permission` VALUES ('1637690312462643202', 'f6817f48af4fb3af11b9e8bf182f618b', '1636190218344304641', NULL, NULL, NULL); -- ---------------------------- -- Table structure for sys_sms diff --git a/jero-boot/db/jeroboot-oracle11g.sql b/jero-boot/db/jeroboot-oracle11g.sql index 700739cb..788a7e1f 100644 --- a/jero-boot/db/jeroboot-oracle11g.sql +++ b/jero-boot/db/jeroboot-oracle11g.sql @@ -2116,6 +2116,8 @@ INSERT INTO "SYS_PERMISSION" VALUES ('1383956779212550146', '3f915b2769fc80648e9 INSERT INTO "SYS_PERMISSION" VALUES ('1260931366557696001', '3f915b2769fc80648e92d04e84ca059d', '表单性别可见', null, null, null, null, '2', 'user:sex', '1', '1', '0', null, '1', '1', '0', '0', null, 'admin', TO_DATE('2020-05-14 21:53:59', 'YYYY-MM-DD HH24:MI:SS'), 'admin', TO_DATE('2020-05-14 21:57:00', 'YYYY-MM-DD HH24:MI:SS'), '0', '0', '1', '0'); INSERT INTO "SYS_PERMISSION" VALUES ('1260933542969458689', '3f915b2769fc80648e92d04e84ca059d', '禁用生日字段', null, null, null, null, '2', 'user:form:birthday', '2', '1', '0', null, '1', '1', '0', '0', null, 'admin', TO_DATE('2020-05-14 22:02:38', 'YYYY-MM-DD HH24:MI:SS'), null, null, '0', '0', '1', '0'); INSERT INTO "SYS_PERMISSION" VALUES ('1404684556047024130', '08e6b9dc3c04489c8e1ff2ce6f105aa4', '在线用户', '/isystem/online', 'system/SysUserOnlineList', null, null, '1', null, null, '3', '0', null, '1', '0', '0', '0', null, 'admin', TO_DATE('2019-04-02 11:34:34', 'YYYY-MM-DD HH24:MI:SS'), 'admin', TO_DATE('2020-09-09 14:48:51', 'YYYY-MM-DD HH24:MI:SS'), '0', '0', null, '0'); +INSERT INTO `SYS_PERMISSION` VALUES ('1636190218344304641', '540a2936940846cb98114ffb0d145cb8', 'JTable列表', '/list/j-table-list', 'demo/list/JTableList', NULL, NULL, 1, NULL, '1', 1.00, 0, NULL, 1, 1, 0, 0, NULL, 'admin', '2023-03-16 10:18:42', 'admin', '2023-03-16 10:25:49', 0, 0, '1', 0); + -- ---------------------------- -- Table structure for SYS_PERMISSION_DATA_RULE @@ -2425,6 +2427,7 @@ INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('a5d25fdb3c62904a8474182706ce11a0', 'f INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('acacce4417e5d7f96a9c3be2ded5b4be', 'f6817f48af4fb3af11b9e8bf182f618b', 'f9d3f4f27653a71c52faa9fb8070fbe7', NULL, NULL, NULL); INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('ae1852fb349d8513eb3fdc173da3ee56', 'f6817f48af4fb3af11b9e8bf182f618b', '8d4683aacaa997ab86b966b464360338', NULL, NULL, NULL); INSERT INTO "SYS_ROLE_PERMISSION" VALUES ('af60ac8fafd807ed6b6b354613b9ccbc', 'f6817f48af4fb3af11b9e8bf182f618b', '58857ff846e61794c69208e9d3a85466', NULL, NULL, NULL); +INSERT INTO `SYS_ROLE_PERMISSION` VALUES ('1637690312462643202', 'f6817f48af4fb3af11b9e8bf182f618b', '1636190218344304641', NULL, NULL, NULL); -- ---------------------------- -- Table structure for SYS_SMS diff --git a/jero-boot/db/jeroboot-sqlserver2017.sql b/jero-boot/db/jeroboot-sqlserver2017.sql index 04031d84..4167b8d9 100644 --- a/jero-boot/db/jeroboot-sqlserver2017.sql +++ b/jero-boot/db/jeroboot-sqlserver2017.sql @@ -5717,6 +5717,9 @@ GO INSERT INTO [dbo].[sys_permission] ([id], [parent_id], [name], [url], [component], [component_name], [redirect], [menu_type], [perms], [perms_type], [sort_no], [always_show], [icon], [is_route], [is_leaf], [keep_alive], [hidden], [description], [create_by], [create_time], [update_by], [update_time], [del_flag], [rule_flag], [status], [internal_or_external]) VALUES (N'1404684556047024130', N'08e6b9dc3c04489c8e1ff2ce6f105aa4', N'在线用户', N'/isystem/online', N'system/SysUserOnlineList',NULL, NULL, N'1', NULL, NULL, N'3', N'0', NULL, N'1', N'0', N'0', N'0', NULL, N'admin', N'2019-04-02 11:34:34.0000000', N'admin', N'2020-09-09 14:48:51.0000000', N'0', N'0', NULL, N'0'); GO +INSERT INTO [dbo].[sys_permission] ([id], [parent_id], [name], [url], [component], [component_name], [redirect], [menu_type], [perms], [perms_type], [sort_no], [always_show], [icon], [is_route], [is_leaf], [keep_alive], [hidden], [description], [create_by], [create_time], [update_by], [update_time], [del_flag], [rule_flag], [status], [internal_or_external]) VALUES (N'1636190218344304641', N'540a2936940846cb98114ffb0d145cb8', N'JTable列表', N'/list/j-table-list', N'demo/list/JTableList',NULL, NULL, N'1', NULL, N'1', N'1.00', N'0', NULL, N'1', N'1', N'0', N'0', NULL, N'admin', N'2023-03-16 10:18:42.0000000', N'admin', N'2023-03-16 10:25:49.0000000', N'0', N'0', N'1', N'0'); +GO + -- ---------------------------- -- Table structure for sys_permission_data_rule -- ---------------------------- @@ -6518,6 +6521,8 @@ GO INSERT INTO [dbo].[sys_role_permission] ([id], [role_id], [permission_id], [data_rule_ids], [operate_date], [operate_ip]) VALUES (N'fd97963dc5f144d3aecfc7045a883427', N'f6817f48af4fb3af11b9e8bf182f618b', N'043780fa095ff1b2bec4dc406d76f023', NULL, NULL, NULL) GO +INSERT INTO [dbo].[sys_role_permission] ([id], [role_id], [permission_id], [data_rule_ids], [operate_date], [operate_ip]) VALUES (N'1637690312462643202', N'f6817f48af4fb3af11b9e8bf182f618b', N'1636190218344304641', NULL, NULL, NULL) +GO -- ---------------------------- -- Table structure for sys_sms diff --git a/jero-web/src/components/jero/JTable.vue b/jero-web/src/components/jero/JTable.vue index caa10e05..8085b562 100644 --- a/jero-web/src/components/jero/JTable.vue +++ b/jero-web/src/components/jero/JTable.vue @@ -10,9 +10,12 @@ v-bind="$attrs" v-on="$listeners"> - @@ -99,6 +102,7 @@ export default { }, data () { return { + // settingVisible: false, // 设置表格 settingColumns: [ { title: '列名', dataIndex: 'title', align: 'center', ellipsis: true, width: 150 }, @@ -116,17 +120,6 @@ export default { selfScroll: {} } }, - computed: { - slots () { - const slots = [] - for (const column of this.columns) { - if (column.scopedSlots && column.scopedSlots.customRender) { - slots.push(column.scopedSlots.customRender) - } - } - return slots - } - }, watch: { // 配置列改变，将配置转换成配置表格数据 settingColumnsObj: { @@ -145,7 +138,7 @@ export default { return } dataSource.push({ - title: col.title, // 用于显示的字段 + title: col.title || col.columnTitle, // 用于显示的字段 key: tempKey, // 用于存储的字段 hide: this.settingColumnsObj.hide.includes(tempKey), // 是否隐藏 freeze: this.settingColumnsObj.freeze.includes(tempKey), // 是否冻结 @@ -154,24 +147,89 @@ export default { }) }) this.settingDataSource = dataSource - this.setResultColumns() + // 自定义列配置修改后，更新表格字段 + this.setResultColumns(this.columns) } } }, methods: { + // 将父组件的columns进行处理：增加设置列按钮 + setResultColumns (columns) { + // 深度克隆，防止直接修改父组件数据 + columns = cloneDeep(columns) + // 设置按钮插槽配置 + const settingOption = { + filterDropdown: 'settingDropdown', + filterIcon: 'settingIcon' + } + let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey)) + // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列） + if (findActionIndex === -1) { + findActionIndex = columns.length - 1 + } + if (columns[findActionIndex].scopedSlots instanceof Object) { + Object.assign(columns[findActionIndex].scopedSlots, settingOption) + } else { + columns[findActionIndex].scopedSlots = settingOption + } + // 自定义设置弹框（尝试解决表格刷新丢失弹框的问题）此方法会出现两个弹框 + // columns[findActionIndex].filterDropdownVisible = this.settingVisible + // columns[findActionIndex].onFilterDropdownVisibleChange = (visible) => { + // this.settingVisible = visible + // } + + // 最后过滤掉需要隐藏的字段,按定位进行排序 + const startArr = [] // 冻结左侧的列 + const midArr = [] // 没有冻结的列 + const endArr = [] // 冻结右侧的列(只能是action，暂时不能自定义固定右侧) + columns.forEach(col => { + const key = getKey(col) + const fixed = this.settingColumnsObj.freeze.includes(key) + col.hide = this.settingColumnsObj.hide.includes(key) + col.fixed = key === actionKey ? 'right' : fixed + // 如果是字符串就转换成数字（因为实现拖拽，单位只能是px） + col.width = col.width && parseInt(col.width + '') + // 如果没有最小宽度就获取统一设置的最小宽度 + col.minWidth = (col.minWidth && parseInt(col.minWidth + '')) || this.columnMinWidth + if (!col.hide) { + // 如果没有宽度就取minWidth（不添加原数据的width属性，这里只对需要固定的minWidth生效） + const width = col.width || col.minWidth + switch (col.fixed) { + case true: + case 'left': + startArr.push({ ...col, width }) + break + case 'right': + endArr.push({ ...col, width }) + break + default: + midArr.push(col) + } + } + }) + // 更新父组件的数据，将排序后的进行渲染 + this.$emit('update:columns', columns) + // 按冻结顺序排序 + this.resultColumns = [...startArr.sort((a, b) => { + const freezeArr = this.settingColumnsObj.freeze + return freezeArr.indexOf(getKey(a)) - freezeArr.indexOf(getKey(b)) + }), ...midArr, ...endArr] + return this.resultColumns + }, // 初始化表格拖拽 - initDrag (tbCols) { + initDrag (columns) { + columns = cloneDeep(columns) // 没有边框就不能拖拽 if (!this.bordered) { return } // 如果没有任何列开启拖拽就不需要拖拽 - if (!tbCols.some(col => col.resizable)) { + if (!columns.some(col => col.resizable)) { return } // 第一步：列宽映射 const draggingMap = {} - tbCols.forEach((col) => { + columns.forEach((col) => { draggingMap[col.dataIndex || col.key] = col.width }) const draggingState = Vue.observable(draggingMap) @@ -194,14 +252,14 @@ export default { if (key === 'selection-column') { col = {} } else { - col = this.columns.find(col => getKey(col) === key) + col = columns.find(col => getKey(col) === key) } // 没有开启拖拽 或 没有宽度 或 有定位，都不能拖拽（防止布局异常，至少有一列不设width并且不能有fixed） if (!col.resizable || !col.width || !!col.fixed) { return {children} } // 开始拖拽监听 - const onDrag = (x) => { + const onDragging = (x) => { const beforeWidth = col.width const scroll = cloneDeep(this.scroll) || {} draggingState[key] = 0 @@ -219,11 +277,17 @@ export default { } else { this.selfScroll = scroll } + // 修改列宽后，更新表格字段 + this.setResultColumns(columns) } // 停止拖拽监听 const onDragstop = () => { draggingState[key] = thDom.getBoundingClientRect().width } + // 控制最小拖拽宽度 + const onDrag = (x) => { + return x >= (col.minWidth || this.columnMinWidth) + } return ( ) } }, - /** - * 将父组件的columns进行处理：增加设置列按钮 - */ - setResultColumns () { - // 深度克隆，防止直接修改父组件数据 - const columns = cloneDeep(this.columns) - // 设置按钮插槽配置 - const settingOption = { - filterDropdown: 'settingDropdown', - filterIcon: 'settingIcon' - } - let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey)) - // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列） - if (findActionIndex === -1) { - findActionIndex = columns.length - 1 - } - if (columns[findActionIndex].scopedSlots instanceof Object) { - Object.assign(columns[findActionIndex].scopedSlots, settingOption) - } else { - columns[findActionIndex].scopedSlots = settingOption - } - // 最后过滤掉需要隐藏的字段,按定位进行排序 - const startArr = [] // 冻结左侧的列 - const midArr = [] // 没有冻结的列 - const endArr = [] // 冻结右侧的列(只能是action，暂时不能自定义固定右侧) - columns.forEach(col => { - const key = getKey(col) - const fixed = this.settingColumnsObj.freeze.includes(key) - col.hide = this.settingColumnsObj.hide.includes(key) - col.fixed = key === actionKey ? 'right' : fixed - // 如果是字符串就转换成数字（因为实现拖拽，单位只能是px） - col.width = parseInt(col.width + '') - // 如果没有最小宽度就获取统一设置的最小宽度 - col.minWidth = parseInt(col.minWidth + '') || this.columnMinWidth - if (!col.hide) { - // 如果没有宽度就取minWidth（不添加原数据的width属性，这里只对需要固定的minWidth生效） - const width = col.width || col.minWidth - switch (col.fixed) { - case true: - case 'left': - startArr.push({ ...col, width }) - break - case 'right': - endArr.push({ ...col, width }) - break - default: - midArr.push(col) - } - } - }) - // 更新父组件的数据，将排序后的进行渲染 - this.$emit('update:columns', columns) - this.resultColumns = [...startArr, ...midArr, ...endArr] - }, /** * 配置表中复选框改变状态的事件 * @param text 修改前的状态 @@ -322,15 +333,13 @@ export default { } this.saveSetting() /** - * 弹框消失问题 冻结列会导致dom结构改变而从局部更新丢失弹框 - * 情况1：原本显示没有冻结列，新增第一个冻结列 - * 情况2：原本有且只剩一个冻结列，取消最后一个冻结列 + * 弹框消失问题 冻结列出现和消失会导致dom结构改变而从更新结构丢失弹框 * 解决方案，刷新前获取dom，刷新后再次获取，如果获取不一致就触发点击事件点开弹框 */ const beforeIsFixed = !!this.$refs.table.$el.querySelector('.ant-table-fixed-left') this.$nextTick(() => { const afterIsFixed = !!this.$refs.table.$el.querySelector('.ant-table-fixed-left') - // console.log(beforeIsFixed, afterIsFixed) + // console.log(beforeIsFixed !== afterIsFixed) if (beforeIsFixed !== afterIsFixed) { this.$refs.settingBtn.$el.click() } diff --git a/jero-web/src/components/jero/README_JTable.md b/jero-web/src/components/jero/README_JTable.md index e713a372..0b24e523 100644 --- a/jero-web/src/components/jero/README_JTable.md +++ b/jero-web/src/components/jero/README_JTable.md @@ -52,7 +52,7 @@ 在[示例](#示例)中，设定了一个 `ref="table"` 的属性，那么在vue中就可以使用`this.$refs.table`获取到该表格的实例，并调取其中的方法。 假如我要调取`resteColumns`方法，就可以这么写：`this.$refs.table.resteColumns()` -### columns和scroll为什么要使用`.sync` +### `columns`和`scroll`为什么要使用`.sync` 保证父组件和子组件数据同步 @@ -60,35 +60,68 @@ `scroll`拖拽后会把最新的总宽度同步 -### 对原ATable的使用有哪些限制 +### 对原`a-table`的使用有哪些限制 - 操作列的`dataIndex`或`key`必须为`action` - - 带有设置的列不能使用`scopedSlots.filterIcon` 和 `scopedSlots.filterDropdown` + - 带有设置的列不能使用`scopedSlots.filterIcon` 和 `scopedSlots.filterDropdown`(没有操作列时，设置在最后一列) - `scroll.x`和`width`必须是数字，不支持百分比 + - 使用作用域插槽，需要使用解构赋值，里面有三个参数`{text, record, index}`，可参考[示例](#示例)写法 + +### 拖拽后没有设置宽度的列会被缩小 + + - 设置scroll.x配置一个默认宽度即可 + +### 出现空白列 + + - 设置至少一列没有width（没有width不能被拖拽） + - 建议没有`width`的列不能手动控制隐藏和冻结，使用`disabledHide`和`disabledFreeze`或者`hideSettingColumn` + +### `resizable`没有效果 + + - 需要设置`resizable: true`，要有`width`，且不能有`fixed` + +### 自定义列的弹框会消失 + + - 因为冻结列的出现或消失会刷新表格结构导致弹框丢失 + - 设置一个冻结列始终存在，不可被手动控制隐藏和取消冻结即可 ### 注意事项 + - `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置 - 固定头和列（ant-design-vue自带的问题） ：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。 建议指定 scroll.x 为大于表格宽度的固定值。注意，且非固定列宽度之和不要超过 `scroll.x`。 - - `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置 ## 示例 ```vue @@ -108,7 +145,6 @@ import JTable from '@comp/jero/JTable' export default { name: 'Demo', components: { JTable }, - data () { const columns = [ { @@ -126,7 +162,7 @@ export default { fixed: true, title: '#', ellipsis: true, - dataIndex: 'key', + dataIndex: 'key' }, { resizable: true, @@ -134,6 +170,20 @@ export default { dataIndex: 'date', width: 200 }, + { + // 标题使用插槽使用这个代替title（用于设置里显示列名） + columnTitle: 'Name', + dataIndex: 'name', + key: 'name', + slots: { title: 'customTitle' }, + scopedSlots: { customRender: 'name' } + }, + { + title: 'Tags', + key: 'tags', + dataIndex: 'tags', + scopedSlots: { customRender: 'tags' } + }, { resizable: true, // 可拖拽属性 title: 'Amount', @@ -148,9 +198,13 @@ export default { }, { title: 'Note', - dataIndex: 'note' + dataIndex: 'note', // 保留一列自适应 // width: 100 + // 建议：没有宽度的列至少一列禁止自定义（解决冻结或隐藏列导致出现空列） + // disabledHide: true, + // disabledFreeze: true, + hideSettingColumn: true }, { title: 'Action', @@ -163,6 +217,8 @@ export default { const dataSource = [ { key: 0, + name: 'John Brown', + tags: ['nice', 'developer'], date: '2018-02-11', amount: 120, type: 'income', @@ -170,6 +226,8 @@ export default { }, { key: 1, + name: 'Jim Green', + tags: ['loser'], date: '2018-03-11', amount: 243, type: 'income', @@ -177,6 +235,8 @@ export default { }, { key: 2, + name: 'Joe Black', + tags: ['cool', 'teacher'], date: '2018-04-11', amount: 98, type: 'income', @@ -184,7 +244,7 @@ export default { } ] return { - scroll: { x: 1000 }, + scroll: { x: 1400 }, columns: columns, dataSource: dataSource, selectedRowKeys: [] @@ -192,7 +252,7 @@ export default { }, methods: { // 还原表格初始配置 - resetTable() { + resetTable () { this.$refs.table.resteColumns() }, // 清除当前表格缓存 diff --git a/jero-web/src/views/demo/list/JTableList.vue b/jero-web/src/views/demo/list/JTableList.vue index 7fd16644..affd8ebc 100644 --- a/jero-web/src/views/demo/list/JTableList.vue +++ b/jero-web/src/views/demo/list/JTableList.vue @@ -8,12 +8,24 @@ + + {{ text }} + Name + + + {{ tag.toUpperCase() }} + + Delete + + @@ -61,6 +77,20 @@ export default { dataIndex: 'date', width: 200 }, + { + // 标题使用插槽使用这个代替title（用于设置里显示列名） + columnTitle: 'Name', + dataIndex: 'name', + key: 'name', + slots: { title: 'customTitle' }, + scopedSlots: { customRender: 'name' } + }, + { + title: 'Tags', + key: 'tags', + dataIndex: 'tags', + scopedSlots: { customRender: 'tags' } + }, { resizable: true, // 可拖拽属性 title: 'Amount', @@ -75,9 +105,13 @@ export default { }, { title: 'Note', - dataIndex: 'note' + dataIndex: 'note', // 保留一列自适应 // width: 100 + // 建议：没有宽度的列至少一列禁止自定义（解决冻结或隐藏列导致出现空列） + // disabledHide: true, + // disabledFreeze: true, + hideSettingColumn: true }, { title: 'Action', @@ -90,6 +124,8 @@ export default { const dataSource = [ { key: 0, + name: 'John Brown', + tags: ['nice', 'developer'], date: '2018-02-11', amount: 120, type: 'income', @@ -97,6 +133,8 @@ export default { }, { key: 1, + name: 'Jim Green', + tags: ['loser'], date: '2018-03-11', amount: 243, type: 'income', @@ -104,6 +142,8 @@ export default { }, { key: 2, + name: 'Joe Black', + tags: ['cool', 'teacher'], date: '2018-04-11', amount: 98, type: 'income',