mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
837 lines • 35.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { resolveDirective as _resolveDirective, resolveComponent as _resolveComponent, Fragment as _Fragment, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { computed, nextTick, reactive, watch, ref, onMounted, provide, getCurrentInstance, defineComponent } from 'vue';
import Table, { tableProps } from "ant-design-vue/es/table";
import { Form, FormItem, Input, InputNumber, Ellipsis, Empty, InputSearch, Select, AIcon } from '../components';
import BooleanSelect from '../Select/Boolean.js';
import { DataTableTypeSelect, FormError } from './components';
import Sortable from 'sortablejs';
import { useFullscreen, useInfiniteScroll } from '@vueuse/core';
import { cloneDeep, debounce, isBoolean, isFunction } from 'lodash-es';
import { cleanUUIDbyData, setUUIDbyDataSource, useDirection, getElData, getUUID } from './util';
import { FULL_CODE } from './index';
import "../Search/typing";
import "../ProTable/src/proTableTypes";
import useConfigInject from "ant-design-vue/es/config-provider/hooks/useConfigInject";
import useStyle from "./style/index.style";
import classNames from "ant-design-vue/es/_util/classNames";
var dataTableProps = function dataTableProps() {
return _objectSpread(_objectSpread({}, tableProps()), {}, {
serial: Boolean,
children: Boolean,
controlSource: Array,
draggable: {
type: Boolean,
default: true
},
extra: Object,
height: {
type: Number,
default: 200
},
showSearch: {
type: Boolean,
default: true
},
showTool: {
type: [Boolean, Object],
default: true
},
searchKey: {
type: String,
default: 'name'
},
sortKey: {
type: String,
default: 'id'
},
searchProps: {
type: Object,
default: function _default() {
return {};
}
}
});
};
var DataTable = defineComponent({
name: 'DataTable',
slots: ['expand'],
props: dataTableProps(),
emits: ['change', 'update:dataSource', 'editStatus'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots,
expose = _ref.expose;
var draggableClassName = 'draggable-item';
var _getCurrentInstance = getCurrentInstance(),
proxy = _getCurrentInstance.proxy;
var selectedKey = ref(); // 选中标识
var editKey = ref(); // 编辑标识
var draggableRef = ref(null);
var formRef = ref();
var formRowValidate = ref(true); // 行校验，用于上下左右操作控制
var formErr = ref({});
var updateStatus = ref(new Set());
var countNumber = ref(0);
var maxLength = 30;
var editKeys = ref({});
var _fullRef = ref();
if (props.showTool) {
provide(FULL_CODE, _fullRef);
}
var _useFullscreen = useFullscreen(_fullRef),
isFullscreen = _useFullscreen.isFullscreen,
enter = _useFullscreen.enter,
exit = _useFullscreen.exit,
toggle = _useFullscreen.toggle;
var formErrorCache = ref({});
var inputFocus = ref(false);
var showResult = reactive({
msg: 0,
visible: false
});
// 表单值
var formData = reactive({
table: [],
search: []
});
var virtualData = computed(function () {
var _formData$table, _formData$table$slice;
return ((_formData$table = formData.table) === null || _formData$table === void 0 ? void 0 : (_formData$table$slice = _formData$table.slice) === null || _formData$table$slice === void 0 ? void 0 : _formData$table$slice.call(_formData$table, 0, (countNumber.value + 1) * maxLength)) || [];
});
var sortTable = ref();
var showToolLeft = computed(function () {
return isBoolean(props.showTool) ? props.showTool : props.showTool.left !== false;
});
useDirection(function (code) {
if (selectedKey.value && formRowValidate.value && !inputFocus.value) {
var columnKeys = newColumns.value.map(function (item) {
return item.dataIndex;
}).filter(function (key) {
return key !== 'action';
});
var _maxLength = formData.table.length - 1;
var _selectedKey$value$sp = selectedKey.value.split('_'),
_selectedKey$value$sp2 = _slicedToArray(_selectedKey$value$sp, 3),
id = _selectedKey$value$sp2[0],
index = _selectedKey$value$sp2[1],
dataIndex = _selectedKey$value$sp2[2];
var _dataIndex = columnKeys.findIndex(function (key) {
return key === dataIndex;
}) || 1;
var newDataIndex = _dataIndex;
var newIndex = Number(index);
switch (code) {
case 'left':
if (_dataIndex > 1) {
newDataIndex--;
}
break;
case 'right':
if (_dataIndex < columnKeys.length - 1) {
newDataIndex++;
}
break;
case 'down':
if (index < _maxLength) {
newIndex++;
}
break;
case 'up':
if (index > 0) {
newIndex--;
}
break;
}
selectedKey.value = "td_".concat(newIndex, "_").concat(columnKeys[newDataIndex]);
}
});
var sortTables = function sortTables(data) {
var sortKey = props.sortKey;
return data.sort(function (a, b) {
if (a[sortKey] > b[sortKey]) {
return 1;
} else if (a[sortKey] < b[sortKey]) {
return -1;
} else {
return 0;
}
});
};
var search = function search(e) {
var includeArr = [];
var filterArr = [];
selectedKey.value = '';
editKey.value = '';
if (e) {
formData.table.forEach(function (item) {
var _item$props$searchKey;
if ((_item$props$searchKey = item[props.searchKey]) !== null && _item$props$searchKey !== void 0 && _item$props$searchKey.includes(e)) {
includeArr.push(item);
} else {
filterArr.push(item);
}
});
formData.table = [].concat(includeArr, filterArr).map(function (item, index) {
return _objectSpread(_objectSpread({}, item), {}, {
index: index + 1
});
});
showResult.msg = includeArr.length;
showResult.visible = true;
} else {
showResult.msg = 0;
showResult.visible = false;
formData.table = sortTables(formData.table);
}
};
var cleanEditStatus = function cleanEditStatus() {
editKeys.value = {};
updateStatus.value.clear();
};
var getData = function getData() {
var quit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
return new Promise(function (resolve, reject) {
formRef.value.validate().then(function () {
var newData = cleanUUIDbyData(formData.table);
formErr.value = {};
resolve(newData);
// 退出编辑模式
if (quit) {
editKey.value = '';
}
}).catch(function (err) {
reject(err);
});
});
};
var getList = function getList() {
return formData.table;
};
/**
* 单个选中
* @param key
*/
var rowClick = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(Object.keys(formErr.value).length && !formErr.value[key])) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
if (key !== editKey.value) {
editKey.value = '';
}
selectedKey.value = key;
case 4:
case "end":
return _context.stop();
}
}, _callee);
}));
return function rowClick(_x) {
return _ref2.apply(this, arguments);
};
}();
/**
* 双击修改
* @param key
*/
var editClick = function editClick(key) {
if (Object.keys(formErr.value).length && !formErr.value[key]) return;
if (key === selectedKey.value) {
editKey.value = key;
editKeys.value[key] = true;
}
};
/**
* 初始化拖拽
*/
var sortTableHandle = function sortTableHandle() {
var _draggableRef$value;
if (sortTable.value) {
var _sortTable$value;
(_sortTable$value = sortTable.value) === null || _sortTable$value === void 0 ? void 0 : _sortTable$value.destroy();
}
var ele = (_draggableRef$value = draggableRef.value) === null || _draggableRef$value === void 0 ? void 0 : _draggableRef$value.querySelector('tbody');
if (!ele) return;
sortTable.value = new Sortable(ele, {
draggable: '.ant-table-row',
animation: 200,
ghostClass: 'draggable-ghost',
sort: true,
onEnd: function onEnd(_ref3) {
var _oldTarget$querySelec, _newTarget$querySelec;
var oldIndex = _ref3.oldIndex,
newIndex = _ref3.newIndex,
to = _ref3.to,
from = _ref3.from;
// 获取真正的index
var oldTarget = draggableRef.value.querySelector('.ant-table-tbody').querySelectorAll('.ant-table-row')[oldIndex - 1];
var newTarget = draggableRef.value.querySelector('.ant-table-tbody').querySelectorAll('.ant-table-row')[newIndex - 1];
var oldTargetPositions = getElData((_oldTarget$querySelec = oldTarget.querySelectorAll('.j-row-click')) === null || _oldTarget$querySelec === void 0 ? void 0 : _oldTarget$querySelec[1]);
var newTargetPositions = getElData((_newTarget$querySelec = newTarget.querySelectorAll('.j-row-click')) === null || _newTarget$querySelec === void 0 ? void 0 : _newTarget$querySelec[1]);
var _oldIndex = oldTargetPositions[1];
var _newIndex = newTargetPositions[1];
var curr = formData.table.splice(_oldIndex - 1, 1)[0];
formData.table.splice(_newIndex - 1, 0, curr);
var _sort = [_oldIndex, _newIndex].sort(function (a, b) {
return a - b;
}),
_sort2 = _slicedToArray(_sort, 2),
min = _sort2[0],
max = _sort2[1];
for (var i = min; i <= max; i++) {
formData.table[i - 1].index = i;
}
// 判断当前拖拽中是否有选中
if (selectedKey.value) {
var _selectedKey$value$sp3 = selectedKey.value.split('_'),
_selectedKey$value$sp4 = _slicedToArray(_selectedKey$value$sp3, 3),
td = _selectedKey$value$sp4[0],
index = _selectedKey$value$sp4[1],
dataIndex = _selectedKey$value$sp4[2];
if (index >= min && index <= max) {
// 是否在拖拽范围内
var numIndex = Number(index);
var _index = _newIndex;
if (numIndex < _oldIndex) {
_index = numIndex + 1;
} else if (numIndex > _oldIndex) {
_index = numIndex - 1;
}
selectedKey.value = [td, _index, dataIndex].join('_');
if (editKey.value) {
editKey.value = [td, _index, dataIndex].join('_');
}
}
}
}
});
return sortTable;
};
/**
* 对比数据是否修改
* @param record
* @param index
* @param dataIndex
* @param type
*/
var controlData = function controlData(record, index, dataIndex, type) {
var _props$dataSource$ind;
var item = props.columns.find(function (a) {
return a.dataIndex === dataIndex;
});
var key = "td_".concat(index, "_").concat(dataIndex);
if (item !== null && item !== void 0 && item.control) {
var _isControl = item.control(record, props.dataSource[index]);
if (_isControl) {
updateStatus.value.add(key);
} else {
updateStatus.value.delete(key);
}
return _isControl;
}
if (!type || !record) {
return false;
}
var oldData = (_props$dataSource$ind = props.dataSource[index]) === null || _props$dataSource$ind === void 0 ? void 0 : _props$dataSource$ind[dataIndex];
var isControl = oldData ? JSON.stringify(oldData) !== JSON.stringify(record[dataIndex]) : true;
if (isControl) {
updateStatus.value.add(key);
} else {
updateStatus.value.delete(key);
}
// 该数据是否支持编辑
return isControl;
};
// 重组columns
var newColumns = computed(function () {
var hasSerial = 'serial' in props && props.serial !== false;
var serialItem = {
dataIndex: 'index',
title: '序号',
width: 60
};
var propsColumns = cloneDeep(props.columns);
var _columns = propsColumns.map(function (item) {
var _item$form;
if ((_item$form = item.form) !== null && _item$form !== void 0 && _item$form.rules) {
var index = item.form.rules.findIndex(function (item) {
return item.callback && isFunction(item.callback);
});
if (index >= 0) {
var callback = item.form.rules[index].callback;
item.form.rules[index] = {
validator: function validator(rule, value) {
return callback(rule, value, formData.table);
}
};
}
}
item.customCell = function (record, rowIndex, column) {
return {
onClick: function onClick(e) {
e.stopPropagation();
rowClick(!['index', 'action'].includes(column.dataIndex) ? "td_".concat(rowIndex, "_").concat(column.dataIndex) : '');
},
onDblclick: function onDblclick(e) {
e.stopPropagation();
var isEdit = item.doubleClick ? item.doubleClick(record, rowIndex, column.dataIndex) : true;
if (isEdit) {
editClick(column.type ? "td_".concat(rowIndex, "_").concat(column.dataIndex) : '');
}
}
};
};
return _objectSpread({}, item);
});
return hasSerial ? [serialItem].concat(_toConsumableArray(_columns)) : _columns;
});
var addEditor = function addEditor(index, dataIndex) {
var key = "td_".concat(index, "_").concat(dataIndex);
editKeys.value[key] = true;
};
var addEditorAll = function addEditorAll(index) {
var _iterator = _createForOfIteratorHelper(props.columns),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
addEditor(index, item.dataIndex);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
};
var addItem = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_data, index) {
var vail, data, editIndex;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
if (!_data) {
_context2.next = 9;
break;
}
_context2.next = 3;
return getData();
case 3:
vail = _context2.sent;
data = _toConsumableArray(formData.table);
editIndex = index + 1;
if (index !== undefined) {
data.splice(index + 1, 0, _objectSpread(_objectSpread({}, _data), {}, {
_sortIndex: index + 1,
_uuid: getUUID()
}));
} else {
data.push(_objectSpread(_objectSpread({}, _data), {}, {
_sortIndex: index,
_uuid: getUUID()
}));
editIndex = data.length - 1;
}
formData.table = data;
//新增项进入编辑模式
newColumns.value.forEach(function (item, _index) {
var _key = "td_".concat(editIndex, "_").concat(item.dataIndex);
editKeys.value[_key] = true;
if (_index === 0) {
editKey.value = _key;
}
});
case 9:
return _context2.abrupt("return", cleanUUIDbyData(formData.table));
case 10:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function addItem(_x2, _x3) {
return _ref4.apply(this, arguments);
};
}();
var removeEditKeysByIndex = function removeEditKeysByIndex(editIndex) {
newColumns.value.forEach(function (item, _index) {
var _key = "td_".concat(editIndex, "_").concat(item.dataIndex);
delete editKeys.value[_key];
delete formErr.value[_key];
});
};
var removeItem = function removeItem(index) {
if (index >= 0) {
var data = _toConsumableArray(formData.table);
data.splice(index, 1);
formData.table = data;
removeEditKeysByIndex(index);
updateStatus.value.add('delete_' + index);
}
return cleanUUIDbyData(formData.table);
};
var initItems = function initItems() {
var _formRef$value;
formData.table = sortTables(setUUIDbyDataSource(props.dataSource));
(_formRef$value = formRef.value) === null || _formRef$value === void 0 ? void 0 : _formRef$value.clearValidate();
countNumber.value = 0;
return cleanUUIDbyData(formData.table);
};
var stringify = function stringify(data) {
return data ? JSON.stringify(data) : '';
};
var firstValidate = debounce(function () {
var key = Object.keys(formErrorCache.value)[0];
if (key) {
var errorNode = draggableRef.value.querySelector(".".concat(key));
var bodyNode = draggableRef.value.querySelector(".ant-table-body");
if (errorNode) {
var index = Number(key.split('_')[1]);
bodyNode.scrollTop = errorNode.getBoundingClientRect().height * index;
}
var errorMsg = formErrorCache.value[key].errorMsg;
formErr.value[key] = errorMsg;
if (!editKey.value) {
editKey.value = key;
} else {
// 处于编辑模式，并且编辑项在校验错误项中
editKey.value = formErrorCache.value[editKey.value] ? editKey.value : key;
}
updateStatus.value.add(editKey.value);
}
formErrorCache.value = {};
}, 10);
var handlePlacement = function handlePlacement(index, placement) {
if (placement) {
return index > 1 ? 'top' + placement : 'bottom' + placement;
}
return index > 1 ? 'top' : 'bottom';
};
var validate = function validate(name, status, errorMsg) {
var key = "td_".concat(name[1], "_").concat(name[2]);
if (!status) {
formErrorCache.value[key] = {
errorMsg: errorMsg[0],
status: status
};
} else {
delete formErr.value[key];
}
firstValidate();
};
onMounted(function () {
nextTick(function () {
var bodyNode = draggableRef.value.querySelector('.ant-table-body');
bodyNode.style.minHeight = '200px';
useInfiniteScroll(draggableRef.value.querySelector('.ant-table-body'), function () {
// 滑动到底部
if (countNumber.value * maxLength <= formData.table.length && formData.table[(countNumber.value + 1) * maxLength + 1]) {
// 有多余数据时，进行添加
countNumber.value++;
}
}, {
distance: 10
});
});
});
watch(function () {
return JSON.stringify(props.dataSource);
}, function () {
formData.table = setUUIDbyDataSource(props.dataSource);
}, {
immediate: true
});
watch(function () {
return formData.table;
}, function () {
// updateRevoke(formData.table);
var data = cleanUUIDbyData(formData.table);
emit('change', data);
emit('update:dataSource', data);
}, {
deep: true
});
watch(function () {
return JSON.stringify(_toConsumableArray(updateStatus.value.values()));
}, function () {
emit('editStatus', !!_toConsumableArray(updateStatus.value.values()).length);
});
watch(function () {
return isFullscreen.value;
}, function () {
if (!isFullscreen.value) {
proxy.$forceUpdate();
}
});
expose({
getData: getData,
getList: getList,
addItem: addItem,
removeItem: removeItem,
initItems: initItems,
addEditor: addEditor,
addEditorAll: addEditorAll,
cleanEditStatus: cleanEditStatus,
fullRef: function fullRef() {
return _fullRef.value;
}
});
var _useConfigInject = useConfigInject('data-table', props),
prefixCls = _useConfigInject.prefixCls;
var _useStyle = useStyle(prefixCls),
_useStyle2 = _slicedToArray(_useStyle, 2),
wrapSSR = _useStyle2[0],
hashId = _useStyle2[1];
var prefixClsValue = prefixCls.value;
var rootCls = classNames(prefixClsValue, _defineProperty({}, hashId.value, true));
return function () {
return wrapSSR(_createVNode("div", {
"ref": _fullRef,
"class": "".concat(rootCls, " ").concat(isFullscreen ? 'j-data-table-fullscreen' : '')
}, [props.showTool !== false && _createVNode("div", {
"class": "j-data-table-tool"
}, [showToolLeft && _createVNode("div", {
"class": "j-data-table-tool-left"
}, [props.showSearch && _createVNode("div", {
"class": "j-data-table-search"
}, [_createVNode(InputSearch, _objectSpread(_objectSpread({}, props.searchProps), {}, {
"allow-clear": true,
"style": "width: 220px",
"onSearch": search
}), null)]), _createVNode("div", {
"class": "j-data-table-full"
}, [_createVNode(AIcon, {
"type": isFullscreen ? 'FullscreenExitOutlined' : 'FullscreenOutlined',
"onClick": toggle
}, null)]), showResult.visible && _createVNode("div", {
"class": "j-data-table-search-result"
}, [_createTextVNode("\u5DF2\u67E5\u8BE2\u5230"), _createVNode("span", null, [showResult.msg]), _createTextVNode(" \u6761\u76F8\u5173\u6570\u636E")])]), _createVNode("div", {
"class": "j-data-table-expand"
}, [slots.expand && slots.expand()])]), _createVNode("div", {
"class": "j-data-table-body"
}, [_createVNode(Form, {
"ref": formRef,
"layout": "horizontal",
"model": formData,
"scroll-to-first-error": true,
"onValidate": validate
}, {
default: function _default() {
return [_createVNode("div", {
"ref": draggableRef,
"class": "draggable-body"
}, [_createVNode(Table, _objectSpread(_objectSpread({}, props), {}, {
"columns": newColumns.value,
"pagination": false,
"data-source": virtualData.value,
"row-key": props.rowKey || '_uuid',
"scroll": props.height ? {
y: !isFullscreen.value ? props.height < 200 ? 200 : props.height : "calc(100vh - 160px)"
} : undefined
}), {
headerCell: function headerCell(dt) {
var _column$form;
var column = dt.column,
title = dt.title;
return _createVNode("span", {
"class": "\n j-data-table-header\n ".concat((_column$form = column.form) !== null && _column$form !== void 0 && _column$form.required ? 'required' : '', "\n ")
}, [slots.headerCell ? slots.headerCell({
column: column
}) : column.title]);
},
bodyCell: function bodyCell(dt) {
var _column$form2, _column$form3, _column$form4, _column$form5, _column$form6;
var column = dt.column,
record = dt.record,
index = dt.index;
// 判断是否已修改
var isEditDiv = (editKeys["td_".concat(index, "_").concat(column.dataIndex)] || column.control) && controlData(record, record._sortIndex, column.dataIndex, column.type) ? _createVNode("div", {
"class": "j-row-update"
}, null) : '';
var columnTypeElement = function columnTypeElement(columnType) {
var _newColumns$value$fin, _column$components, _column$components2;
var el = _createVNode(_Fragment, null, null);
switch (columnType) {
case "text":
el = _createVNode(Input, {
"value": formData.table[index][column.dataIndex],
"onUpdate:value": function onUpdateValue($event) {
return formData.table[index][column.dataIndex] = $event;
},
"placeholder": "\u8BF7\u8F93\u5165".concat(column.title),
"style": "width: 100%",
"onFocus": function onFocus() {
return inputFocus.value = true;
},
"onBlur": function onBlur() {
return inputFocus.value = false;
}
}, null);
break;
case 'number':
el = _createVNode(InputNumber, {
"value": formData.table[index][column.dataIndex],
"onUpdate:value": function onUpdateValue($event) {
return formData.table[index][column.dataIndex] = $event;
},
"style": "width: 100%",
"placeholder": "\u8BF7\u8F93\u5165".concat(column.title),
"onFocus": function onFocus() {
return inputFocus.value = true;
},
"onBlur": function onBlur() {
return inputFocus.value = false;
}
}, null);
break;
case 'TypeSelect':
el = _createVNode(DataTableTypeSelect, {
"value": formData.table[index][(_newColumns$value$fin = newColumns.value.find(function (item) {
return item.type === 'TypeSelect';
})) === null || _newColumns$value$fin === void 0 ? void 0 : _newColumns$value$fin.dataIndex],
"onUpdate:value": function onUpdateValue($event) {
return formData.table[index][(_newColumns$value$fin = newColumns.value.find(function (item) {
return item.type === 'TypeSelect';
})) === null || _newColumns$value$fin === void 0 ? void 0 : _newColumns$value$fin.dataIndex] = $event;
},
"placeholder": "\u8BF7\u9009\u62E9".concat(column.title)
}, null);
break;
case 'select':
el = _createVNode(Select, _objectSpread(_objectSpread({}, (_column$components = column.components) === null || _column$components === void 0 ? void 0 : _column$components.props), {}, {
"value": formData.table[index][column.dataIndex],
"onUpdate:value": function onUpdateValue($event) {
return formData.table[index][column.dataIndex] = $event;
},
"style": "width: 100%",
"options": column.options,
"placeholder": "\u8BF7\u9009\u62E9".concat(column.title)
}), null);
break;
case 'booleanSelect':
el = _createVNode(BooleanSelect, _objectSpread(_objectSpread({}, (_column$components2 = column.components) === null || _column$components2 === void 0 ? void 0 : _column$components2.props), {}, {
"value": formData.table[index][column.dataIndex],
"onUpdate:value": function onUpdateValue($event) {
return formData.table[index][column.dataIndex] = $event;
},
"style": "width: 100%",
"placeholder": "\u8BF7\u9009\u62E9".concat(column.title)
}), null);
break;
case 'components':
el = column.components.name ? _createVNode(_resolveComponent("component"), _objectSpread(_objectSpread({}, column.components.props), {}, {
"is": column.components.name,
"value": formData.table[index],
"onUpdate:value": function onUpdateValue($event) {
return formData.table[index] = $event;
},
"columns": newColumns.value,
"extra": props.extra,
"record": record,
"onFocus": function onFocus() {
return inputFocus.value = true;
},
"onBlur": function onBlur() {
return inputFocus.value = false;
}
}), null) : _createVNode(_Fragment, null, null);
break;
}
};
var noIndexColumn = _createVNode("div", {
"class": [draggableClassName, column.dataIndex !== 'action' ? 'j-row-click' : '', editKey.value === "td_".concat(index, "_").concat(column.dataIndex) && column.type ? 'j-data-table--edit' : ''],
"data-index": column.type ? index : undefined,
"data-name": column.dataIndex
}, [!((_column$form2 = column.form) !== null && _column$form2 !== void 0 && _column$form2.isVerify) && !editKeys.value["td_".concat(index, "_").concat(column.dataIndex)] ? slots[column.dataIndex] ? slots[column.dataIndex]({
data: {
record: record,
index: index
}
}) : _createVNode(Ellipsis, null, {
default: function _default() {
return [record[column.dataIndex]];
}
}) : !column.type && column.form ? _createVNode(FormItem, {
"name": ['table', index].concat(((_column$form3 = column.form) === null || _column$form3 === void 0 ? void 0 : _column$form3.name) || column.dataIndex),
"rules": (_column$form4 = column.form) === null || _column$form4 === void 0 ? void 0 : _column$form4.rules,
"validate-first": true
}, {
default: function _default() {
return [slots[column.dataIndex] ? slots[column.dataIndex]({
data: {
record: record,
index: index
}
}) : ''];
}
}) : _createVNode(FormItem, {
"name": ['table', index].concat(((_column$form5 = column.form) === null || _column$form5 === void 0 ? void 0 : _column$form5.name) || column.dataIndex),
"rules": (_column$form6 = column.form) === null || _column$form6 === void 0 ? void 0 : _column$form6.rules,
"validate-first": true
}, {
default: function _default() {
return [editKey.value !== "td_".concat(index, "_").concat(column.dataIndex) ? slots[column.dataIndex] ? slots[column.dataIndex]({
data: {
record: record,
index: index
}
}) : _createVNode(Ellipsis, null, {
default: function _default() {
return [record[column.dataIndex]];
}
}) : column.type === 'text' ? _createVNode(Input, {
"value": formData.table[index][column.dataIndex],
"onUpdate:value": function onUpdateValue($event) {
return formData.table[index][column.dataIndex] = $event;
},
"placeholder": "\u8BF7\u8F93\u5165".concat(column.title),
"style": "width: 100%",
"onFocus": function onFocus() {
return inputFocus.value = true;
},
"onBlur": function onBlur() {
return inputFocus.value = false;
}
}, null) : columnTypeElement(column.type)];
}
})]);
return _createVNode("div", null, [isEditDiv, _createVNode(FormError, {
"id": "td_".concat(index, "_").concat(column.dataIndex),
"index": index,
"visible": !!formErr["td_".concat(index, "_").concat(column.dataIndex)],
"content": formErr["td_".concat(index, "_").concat(column.dataIndex)],
"is-edit": formErr["td_".concat(index, "_").concat(column.dataIndex)],
"selected": selectedKey.value === "td_".concat(index, "_").concat(column.dataIndex),
"name": column.type ? column.dataIndex : undefined,
"get-popup-container": function getPopupContainer(e) {
return e.parentNode;
},
"placement": handlePlacement(index, column.placement)
}, null), column.dataIndex === 'index' ? _createVNode("div", {
"class": draggableClassName
}, [index + 1]) : noIndexColumn]);
},
emptyText: function emptyText() {
return _createVNode("div", {
"class": "j-data-table-empty"
}, [_createVNode(Empty, null, null)]);
}
})])];
}
})])]));
};
}
});
export default DataTable;