cyber-web-ui
Version:
spring-cyber前端ui框架
357 lines (354 loc) • 16.3 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _index = _interopRequireDefault(require("../icon/index"));
var _index2 = _interopRequireDefault(require("../modal/index"));
var _antDesignVue = require("ant-design-vue");
var _useState = require("./hooks/useState.js");
var _index3 = require("../_utils/index.js");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var _default2 = exports.default = (0, _vue.defineComponent)({
name: 'CTable',
props: {
// dataSoure唯一值，selection选中值
rowKey: {
type: [String, Function],
default: "id"
},
// 表格加载
loading: {
type: Boolean,
default: false
},
dataSource: {
type: Array,
default: function _default() {
return [];
}
},
// 表格columns
columns: {
type: Array,
default: function _default() {
return [];
}
},
// 是否显示默认操作列
action: {
type: Boolean,
default: true
},
// 操作菜单
overlayMenu: {
type: Array,
default: function _default() {
return [];
}
},
// 选择功能的配置
rowSelection: {
type: Object,
default: function _default() {}
},
// 是否显示选择功能
showRowSelection: Boolean,
// 当前页数
current: Number,
// 每页条数
pageSize: Number,
// 数据总数
total: {
type: Number,
default: 0
},
// 是否显示分页栏
pagination: {
type: Boolean,
default: true
},
// 分页栏自定义配置
paginationProps: {
type: Object,
default: function _default() {}
},
// 批量删除回调
onBatchDelete: Function,
// 自定义批量删除方法
batchDelete: Function,
// 分页切换回调
onPaginationChange: Function,
// 切换分页前的钩子
beforePaginationChange: Function,
// 二次确认拖拽
onRowDragEnd: Function,
// 接口前缀
baseUrl: String
},
setup: function setup(props, context) {
var attrs = context.attrs,
slots = context.slots,
emit = context.emit,
expose = context.expose;
// 表格实例
var tableRef = (0, _vue.ref)();
// 表格列配置
var columns = (0, _vue.computed)(function () {
return (0, _useState.useColumns)(props.columns, props.action);
});
// 分页配置
var paginationProps = (0, _vue.computed)(function () {
return (0, _useState.usePagination)(props.paginationProps);
});
// 选中状态
var selectionState = (0, _vue.reactive)({
checkedAll: false,
// 是否全选
selectedRows: [],
selectedRowKeys: []
});
var rowSelection = (0, _vue.computed)(function () {
return (0, _useState.useSelection)(props, selectionState);
});
// 表格状态
var _useTableState = (0, _useState.useTableState)(props, context, rowSelection),
tableState = _useTableState.tableState,
tableMethods = _useTableState.tableMethods;
// 拖拽状态
var _useDragState = (0, _useState.useDragState)(props, context, tableState, tableMethods),
dragState = _useDragState.dragState,
dragMethods = _useDragState.dragMethods;
/**
* @function 全选/取消全选
* @param {Object} options
*/
function checkAllHandler(_ref) {
var _rowSelection$value;
var target = _ref.target;
if (!rowSelection.value || !((_rowSelection$value = rowSelection.value) !== null && _rowSelection$value !== void 0 && _rowSelection$value.onChange)) {
selectionState.checkedAll = false;
return;
}
var _rowSelection$value2 = rowSelection.value,
onChange = _rowSelection$value2.onChange,
onSelectAll = _rowSelection$value2.onSelectAll;
var selectedRowKeys = [];
var selectedRows = [];
if (target.checked) {
selectedRowKeys = tableState.dataSource.map(function (item) {
return tableMethods.getRowKey(item);
});
selectedRows = _toConsumableArray(tableState.dataSource);
}
onChange === null || onChange === void 0 || onChange(selectedRowKeys, selectedRows);
// 全选回调
onSelectAll === null || onSelectAll === void 0 || onSelectAll(target.checked, selectedRowKeys, selectedRows);
}
// 批量删除
function batchDelete() {
if (props.batchDelete) {
var _rowSelection$value3;
props.batchDelete((_rowSelection$value3 = rowSelection.value) === null || _rowSelection$value3 === void 0 ? void 0 : _rowSelection$value3.selectedRowKeys);
return;
}
_index2.default.confirm({
title: "\u6279\u91CF\u5220\u9664",
icon: 'cyber-shanchu',
content: "\u786E\u5B9A\u8981\u6279\u91CF\u5220\u9664\u9009\u4E2D\u7684\u6570\u636E\u5417\uFF0C\u5220\u9664\u540E\u5C06\u65E0\u6CD5\u6062\u590D\uFF01",
okButtonProps: {
pattern: 'error'
},
onOk: function onOk() {
var _props$onBatchDelete, _rowSelection$value4;
return (_props$onBatchDelete = props.onBatchDelete) === null || _props$onBatchDelete === void 0 ? void 0 : _props$onBatchDelete.call(props, (_rowSelection$value4 = rowSelection.value) === null || _rowSelection$value4 === void 0 ? void 0 : _rowSelection$value4.selectedRowKeys);
}
});
}
(0, _vue.watchEffect)(function () {
tableState.loading = props.loading;
});
(0, _vue.watch)(function () {
return tableState.loading;
}, function (value, oldValue) {
if (value != oldValue) emit('update:loading', tableState.loading);
});
(0, _vue.watchEffect)(function () {
if (!rowSelection.value) return;
var _rowSelection$value$s = rowSelection.value.selectedRowKeys,
selectedRowKeys = _rowSelection$value$s === void 0 ? [] : _rowSelection$value$s;
if (!(selectedRowKeys !== null && selectedRowKeys !== void 0 && selectedRowKeys.length)) {
selectionState.checkedAll = false;
return;
}
var selectedSet = new Set(selectedRowKeys);
selectionState.checkedAll = (tableState.dataSource || []).every(function (item) {
return selectedSet.has(tableMethods.getRowKey(item));
});
});
expose({
searchQuery: tableMethods.searchQuery,
getRowSelection: function getRowSelection() {
var _unref;
return ((_unref = (0, _vue.unref)(rowSelection)) === null || _unref === void 0 ? void 0 : _unref.selectedRowKeys) || [];
}
});
return function () {
// 菜单图标
function menuIconSlot(icon) {
return icon ? (0, _vue.createVNode)(_index.default, {
"icon": icon,
"style": "margin-right: 8px;"
}, null) : undefined;
}
;
// dropdown的下拉列表
function actionOverlaySlot(_ref2) {
var record = _ref2.record;
return (0, _vue.createVNode)(_antDesignVue.Menu, {
"style": "min-width: 168px;"
}, {
default: function _default() {
return [tableState.overlayMenu(record).map(function (item) {
return (0, _vue.createVNode)(_antDesignVue.MenuItem, {
"disabled": tableMethods.disposeDropdownMent(item === null || item === void 0 ? void 0 : item.disabled, record, false)
}, {
default: function _default() {
return [(0, _vue.createVNode)("a", {
"href": "javascript:;",
"onClick": function onClick() {
var _item$handler;
return (_item$handler = item.handler) === null || _item$handler === void 0 ? void 0 : _item$handler.call(item, record);
}
}, [item.label])];
},
icon: menuIconSlot(item.icon)
});
})];
}
});
}
;
// 全选按钮
function checkAll() {
var _props$rowSelection, _unref2, _rowSelection$value5;
return (!props.showRowSelection && !props.rowSelection || (_props$rowSelection = props.rowSelection) !== null && _props$rowSelection !== void 0 && _props$rowSelection.hideSelectAll) && ((_unref2 = (0, _vue.unref)(rowSelection)) === null || _unref2 === void 0 ? void 0 : _unref2.type) != 'checkbox' ? (0, _vue.createVNode)("div", null, null) : (0, _vue.createVNode)("div", {
"class": "cyber-pagination-left"
}, [(0, _vue.createVNode)(_antDesignVue.Checkbox, {
"checked": selectionState.checkedAll,
"onUpdate:checked": function onUpdateChecked($event) {
return selectionState.checkedAll = $event;
},
"indeterminate": tableState.indeterminate,
"onChange": checkAllHandler
}, {
default: function _default() {
return [(0, _vue.createVNode)("span", {
"style": "padding-left: 12px;"
}, [(0, _vue.createTextVNode)("\u5168\u9009")])];
}
}), (0, _vue.createVNode)(_antDesignVue.Button, {
"style": "margin-left: 12px;",
"disabled": !((_rowSelection$value5 = rowSelection.value) !== null && _rowSelection$value5 !== void 0 && (_rowSelection$value5 = _rowSelection$value5.selectedRowKeys) !== null && _rowSelection$value5 !== void 0 && _rowSelection$value5.length) || tableState.loading,
"onClick": batchDelete
}, {
default: function _default() {
return [(0, _vue.createTextVNode)("\u5220\u9664")];
}
})]);
}
;
var tableSlots = _objectSpread(_objectSpread({}, slots), {}, {
// 表格单元格
bodyCell: function bodyCell(options) {
var _slots$bodyCell;
var column = options.column,
record = options.record,
index = options.index,
text = options.text,
value = options.value;
var children = (0, _index3.filterEmpty)(((_slots$bodyCell = slots.bodyCell) === null || _slots$bodyCell === void 0 ? void 0 : _slots$bodyCell.call(slots, options)) || []);
if (column.rowDrag) {
return (0, _vue.createVNode)("div", {
"class": "cyber-drag-body"
}, [(0, _vue.createVNode)(_index.default, _objectSpread(_objectSpread({
"icon": "cyber-yidong",
"size": "16"
}, column.dragIconProps || {}), {}, {
"class": ['cyber-table-drag-handle', {
'cyber-table-drag-disabled-handle': typeof column.disabledRowDrag == 'boolean' && column.disabledRowDrag
}],
"onMouseenter": function onMouseenter(event) {
return dragMethods.onDragMouseenter(event, options);
},
"onMouseleave": function onMouseleave(event) {
return dragMethods.onDragMouseleave(event, options);
}
}), null), (0, _vue.createVNode)("div", null, [children.length ? children : column.dataIndex ? column.customRender ? column.customRender(options) : text : undefined])]);
}
if (column.key == 'action' && props.action && !(children !== null && children !== void 0 && children.length)) {
return (0, _vue.createVNode)(_antDesignVue.Dropdown, {
"placement": "bottomRight",
"trigger": "click"
}, {
default: function _default() {
return [(0, _vue.createVNode)(_index.default, {
"size": "15",
"icon": "cyber-caozuo",
"style": "cursor: pointer"
}, null)];
},
overlay: function overlay() {
return actionOverlaySlot(options);
}
});
} else {
var _slots$bodyCell2;
return (_slots$bodyCell2 = slots.bodyCell) === null || _slots$bodyCell2 === void 0 ? void 0 : _slots$bodyCell2.call(slots, options);
}
},
footer: props.pagination ? function () {
return (0, _vue.createVNode)("div", {
"class": "cyber-pagination-body"
}, [checkAll(), (0, _vue.createVNode)(_antDesignVue.Pagination, _objectSpread(_objectSpread({
"class": "cyber-pagination"
}, paginationProps.value), {}, {
"current": tableState.current,
"pageSize": tableState.pageSize,
"total": tableState.total,
"disabled": tableState.loading || paginationProps.value.disabled,
"onChange": tableMethods.paginationChange
}), null)]);
} : undefined
});
return (0, _vue.createVNode)(_antDesignVue.Table, _objectSpread(_objectSpread({
"class": "cyber-table",
"ref": tableRef,
"rowKey": props.rowKey,
"loading": tableState.loading,
"columns": columns.value,
"scroll": tableState.scroll,
"dataSource": tableState.dataSource
}, attrs), {}, {
"pagination": false,
"rowSelection": rowSelection.value,
"customRow": props.columns.some(function (item) {
return item.rowDrag;
}) ? dragState.customRow : attrs.customRow
}), tableSlots);
};
}
});