mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
914 lines • 49.9 kB
JavaScript
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
const op = ops[i];
const fn = ops[i + 1];
i += 2;
if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
return undefined;
}
if (op === 'access' || op === 'optionalAccess') {
lastAccessLHS = value;
value = fn(value);
}
else if (op === 'call' || op === 'optionalCall') {
value = fn((...args) => value.call(lastAccessLHS, ...args));
lastAccessLHS = undefined;
}
} return value; }
/* Analyzed bindings: {
"serial": "props",
"children": "props",
"controlSource": "props",
"draggable": "props",
"extra": "props",
"height": "props",
"showSearch": "props",
"showTool": "props",
"searchKey": "props",
"sortKey": "props",
"searchProps": "props",
"computed": "setup-const",
"nextTick": "setup-const",
"reactive": "setup-const",
"watch": "setup-const",
"ref": "setup-const",
"onMounted": "setup-const",
"provide": "setup-const",
"getCurrentInstance": "setup-const",
"Table": "setup-maybe-ref",
"tableProps": "setup-maybe-ref",
"Form": "setup-maybe-ref",
"FormItem": "setup-maybe-ref",
"Input": "setup-maybe-ref",
"InputNumber": "setup-maybe-ref",
"Ellipsis": "setup-maybe-ref",
"Empty": "setup-maybe-ref",
"Popover": "setup-maybe-ref",
"InputSearch": "setup-maybe-ref",
"Select": "setup-maybe-ref",
"AIcon": "setup-maybe-ref",
"BooleanSelect": "setup-const",
"DataTableTypeSelect": "setup-maybe-ref",
"FormError": "setup-maybe-ref",
"Sortable": "setup-maybe-ref",
"useFullscreen": "setup-maybe-ref",
"useInfiniteScroll": "setup-maybe-ref",
"cloneDeep": "setup-maybe-ref",
"debounce": "setup-maybe-ref",
"isBoolean": "setup-maybe-ref",
"isFunction": "setup-maybe-ref",
"throttle": "setup-maybe-ref",
"cleanUUIDbyData": "setup-maybe-ref",
"initControlDataSource": "setup-maybe-ref",
"setUUIDbyDataSource": "setup-maybe-ref",
"useDirection": "setup-maybe-ref",
"getElData": "setup-maybe-ref",
"getUUID": "setup-maybe-ref",
"FULL_CODE": "setup-maybe-ref",
"draggableClassName": "literal-const",
"proxy": "setup-maybe-ref",
"props": "setup-reactive-const",
"emit": "setup-const",
"selectedKey": "setup-ref",
"editKey": "setup-ref",
"draggableRef": "setup-ref",
"formRef": "setup-ref",
"formRowValidate": "setup-ref",
"formErr": "setup-ref",
"updateStatus": "setup-ref",
"countNumber": "setup-ref",
"maxLength": "literal-const",
"editKeys": "setup-ref",
"fullRef": "setup-ref",
"isFullscreen": "setup-maybe-ref",
"enter": "setup-maybe-ref",
"exit": "setup-maybe-ref",
"toggle": "setup-maybe-ref",
"formErrorCache": "setup-ref",
"inputFocus": "setup-ref",
"showResult": "setup-reactive-const",
"formData": "setup-reactive-const",
"virtualData": "setup-ref",
"sortTable": "setup-ref",
"showToolLeft": "setup-ref",
"sortTables": "setup-const",
"search": "setup-const",
"cleanEditStatus": "setup-const",
"getData": "setup-const",
"getList": "setup-const",
"rowClick": "setup-const",
"editClick": "setup-const",
"sortTableHandle": "setup-const",
"controlData": "setup-const",
"newColumns": "setup-ref",
"addEditor": "setup-const",
"addEditorAll": "setup-const",
"addItem": "setup-const",
"removeEditKeysByIndex": "setup-const",
"removeItem": "setup-const",
"initItems": "setup-const",
"stringify": "setup-const",
"firstValidate": "setup-maybe-ref",
"handlePlacement": "setup-const",
"validate": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { unref as _unref, mergeProps as _mergeProps, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, resolveDynamicComponent as _resolveDynamicComponent, Fragment as _Fragment } from "vue";
const _hoisted_1 = {
key: 0,
class: "j-data-table-tool"
};
const _hoisted_2 = {
key: 0,
class: "j-data-table-tool-left"
};
const _hoisted_3 = {
key: 0,
class: "j-data-table-search"
};
const _hoisted_4 = { class: "j-data-table-full" };
const _hoisted_5 = {
key: 1,
class: "j-data-table-search-result"
};
const _hoisted_6 = { class: "j-data-table-expand" };
const _hoisted_7 = { class: "j-data-table-body" };
const _hoisted_8 = {
key: 0,
class: "j-row-update"
};
const _hoisted_9 = ["data-index", "data-name"];
const _hoisted_10 = { class: "j-data-table-empty" };
import { computed, nextTick, reactive, watch, ref, onMounted, provide, getCurrentInstance, } from 'vue';
import Table, { tableProps } from 'ant-design-vue/lib/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';
const draggableClassName = 'draggable-item';
const maxLength = 30;
const __sfc_main__ = _defineComponent({
props: {
...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: () => ({}),
},
},
emits: ['change', 'update:dataSource', 'editStatus'],
setup(__props, { expose: __expose, emit }) {
const props = __props;
const { proxy } = getCurrentInstance();
const selectedKey = ref(); // 选中标识
const editKey = ref(); // 编辑标识
const draggableRef = ref(null);
const formRef = ref();
const formRowValidate = ref(true); // 行校验，用于上下左右操作控制
const formErr = ref({});
const updateStatus = ref(new Set());
const countNumber = ref(0);
const editKeys = ref({});
const fullRef = ref();
if (props.showTool) {
provide(FULL_CODE, fullRef);
}
const { isFullscreen, enter, exit, toggle } = useFullscreen(fullRef);
const formErrorCache = ref({});
const inputFocus = ref(false);
const showResult = reactive({
msg: 0,
visible: false,
});
// 表单值
const formData = reactive({
table: [],
search: [],
});
const virtualData = computed(() => {
return (_optionalChain([formData, 'access', _2 => _2.table, 'optionalAccess', _3 => _3.slice, 'optionalCall', _4 => _4(0, (countNumber.value + 1) * maxLength)]) || []);
});
const sortTable = ref();
const showToolLeft = computed(() => {
return isBoolean(props.showTool)
? props.showTool
: props.showTool.left !== false;
});
useDirection((code) => {
if (selectedKey.value && formRowValidate.value && !inputFocus.value) {
const columnKeys = newColumns.value
.map((item) => item.dataIndex)
.filter((key) => key !== 'action');
const maxLength = formData.table.length - 1;
const [id, index, dataIndex] = selectedKey.value.split('_');
const _dataIndex = columnKeys.findIndex((key) => key === dataIndex) || 1;
let newDataIndex = _dataIndex;
let 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_${newIndex}_${columnKeys[newDataIndex]}`;
}
});
const sortTables = (data) => {
const { sortKey } = props;
return data.sort((a, b) => {
if (a[sortKey] > b[sortKey]) {
return 1;
}
else if (a[sortKey] < b[sortKey]) {
return -1;
}
else {
return 0;
}
});
};
const search = (e) => {
const includeArr = [];
const filterArr = [];
selectedKey.value = '';
editKey.value = '';
if (e) {
formData.table.forEach((item) => {
if (_optionalChain([item, 'access', _5 => _5[props.searchKey], 'optionalAccess', _6 => _6.includes, 'call', _7 => _7(e)])) {
includeArr.push(item);
}
else {
filterArr.push(item);
}
});
formData.table = [...includeArr, ...filterArr].map((item, index) => ({
...item,
index: index + 1,
}));
showResult.msg = includeArr.length;
showResult.visible = true;
}
else {
showResult.msg = 0;
showResult.visible = false;
formData.table = sortTables(formData.table);
}
};
const cleanEditStatus = () => {
editKeys.value = {};
updateStatus.value.clear();
};
const getData = (quit = true) => {
return new Promise((resolve, reject) => {
formRef.value
.validate()
.then(() => {
const newData = cleanUUIDbyData(formData.table);
formErr.value = {};
resolve(newData);
// 退出编辑模式
if (quit) {
editKey.value = '';
}
})
.catch((err) => {
reject(err);
});
});
};
const getList = () => formData.table;
/**
* 单个选中
* @param key
*/
const rowClick = async (key) => {
// if (!data) return;
if (Object.keys(formErr.value).length && !formErr.value[key])
return;
if (key !== editKey.value) {
editKey.value = '';
}
selectedKey.value = key;
};
/**
* 双击修改
* @param key
*/
const editClick = (key) => {
if (Object.keys(formErr.value).length && !formErr.value[key])
return;
if (key === selectedKey.value) {
editKey.value = key;
editKeys.value[key] = true;
}
};
/**
* 初始化拖拽
*/
const sortTableHandle = () => {
if (sortTable.value) {
_optionalChain([sortTable, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.destroy, 'call', _10 => _10()]);
}
const ele = _optionalChain([draggableRef, 'access', _11 => _11.value, 'optionalAccess', _12 => _12.querySelector, 'call', _13 => _13('tbody')]);
if (!ele)
return;
sortTable.value = new Sortable(ele, {
draggable: '.ant-table-row',
animation: 200,
ghostClass: 'draggable-ghost',
sort: true,
onEnd: ({ oldIndex, newIndex, to, from }) => {
// 获取真正的index
const oldTarget = draggableRef.value
.querySelector('.ant-table-tbody')
.querySelectorAll('.ant-table-row')[oldIndex - 1];
const newTarget = draggableRef.value
.querySelector('.ant-table-tbody')
.querySelectorAll('.ant-table-row')[newIndex - 1];
const oldTargetPositions = getElData(_optionalChain([oldTarget, 'access', _14 => _14.querySelectorAll, 'call', _15 => _15('.j-row-click'), 'optionalAccess', _16 => _16[1]]));
const newTargetPositions = getElData(_optionalChain([newTarget, 'access', _17 => _17.querySelectorAll, 'call', _18 => _18('.j-row-click'), 'optionalAccess', _19 => _19[1]]));
const _oldIndex = oldTargetPositions[1];
const _newIndex = newTargetPositions[1];
const curr = formData.table.splice(_oldIndex - 1, 1)[0];
formData.table.splice(_newIndex - 1, 0, curr);
const [min, max] = [_oldIndex, _newIndex].sort((a, b) => a - b);
for (let i = min; i <= max; i++) {
formData.table[i - 1].index = i;
}
// 判断当前拖拽中是否有选中
if (selectedKey.value) {
const [td, index, dataIndex] = selectedKey.value.split('_');
if (index >= min && index <= max) {
// 是否在拖拽范围内
const numIndex = Number(index);
let _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
*/
const controlData = (record, index, dataIndex, type) => {
const item = props.columns.find((a) => a.dataIndex === dataIndex);
const key = `td_${index}_${dataIndex}`;
if (_optionalChain([item, 'optionalAccess', _20 => _20.control])) {
const 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;
}
const oldData = _optionalChain([props, 'access', _21 => _21.dataSource, 'access', _22 => _22[index], 'optionalAccess', _23 => _23[dataIndex]]);
const isControl = oldData
? JSON.stringify(oldData) !== JSON.stringify(record[dataIndex])
: true;
if (isControl) {
updateStatus.value.add(key);
}
else {
updateStatus.value.delete(key);
}
// 该数据是否支持编辑
return isControl;
};
// 重组columns
const newColumns = computed(() => {
const hasSerial = 'serial' in props && props.serial !== false;
const serialItem = {
dataIndex: 'index',
title: '序号',
width: 60,
};
const propsColumns = cloneDeep(props.columns);
const _columns = propsColumns.map((item) => {
if (_optionalChain([item, 'access', _24 => _24.form, 'optionalAccess', _25 => _25.rules])) {
const index = item.form.rules.findIndex((item) => item.callback && isFunction(item.callback));
if (index >= 0) {
const { callback } = item.form.rules[index];
item.form.rules[index] = {
validator(rule, value) {
return callback(rule, value, formData.table);
},
};
}
}
item.customCell = (record, rowIndex, column) => {
return {
onClick(e) {
e.stopPropagation();
rowClick(!['index', 'action'].includes(column.dataIndex)
? `td_${rowIndex}_${column.dataIndex}`
: '');
},
onDblclick(e) {
e.stopPropagation();
let isEdit = item.doubleClick
? item.doubleClick(record, rowIndex, column.dataIndex)
: true;
if (isEdit) {
editClick(column.type
? `td_${rowIndex}_${column.dataIndex}`
: '');
}
},
};
};
return { ...item };
});
return hasSerial ? [serialItem, ..._columns] : _columns;
});
const addEditor = (index, dataIndex) => {
const key = `td_${index}_${dataIndex}`;
editKeys.value[key] = true;
};
const addEditorAll = (index) => {
for (const item of props.columns) {
addEditor(index, (item).dataIndex);
}
};
const addItem = async (_data, index) => {
if (_data) {
// 先进行校验
const vail = await getData();
const data = [...formData.table];
let editIndex = index + 1;
if (index !== undefined) {
data.splice(index + 1, 0, {
..._data,
_sortIndex: index + 1,
_uuid: getUUID(),
});
}
else {
data.push({
..._data,
_sortIndex: index,
_uuid: getUUID(),
});
editIndex = data.length - 1;
}
formData.table = data;
//新增项进入编辑模式
newColumns.value.forEach((item, _index) => {
const _key = `td_${editIndex}_${item.dataIndex}`;
editKeys.value[_key] = true;
if (_index === 0) {
editKey.value = _key;
}
});
}
return cleanUUIDbyData(formData.table);
};
const removeEditKeysByIndex = (editIndex) => {
newColumns.value.forEach((item, _index) => {
const _key = `td_${editIndex}_${item.dataIndex}`;
delete editKeys.value[_key];
delete formErr.value[_key];
});
};
const removeItem = (index) => {
if (index >= 0) {
const data = [...formData.table];
data.splice(index, 1);
formData.table = data;
removeEditKeysByIndex(index);
updateStatus.value.add('delete_' + index);
}
return cleanUUIDbyData(formData.table);
};
const initItems = () => {
formData.table = sortTables(setUUIDbyDataSource(props.dataSource));
_optionalChain([formRef, 'access', _26 => _26.value, 'optionalAccess', _27 => _27.clearValidate, 'call', _28 => _28()]);
countNumber.value = 0;
return cleanUUIDbyData(formData.table);
};
const stringify = (data) => {
return data ? JSON.stringify(data) : '';
};
const firstValidate = debounce(() => {
const key = Object.keys(formErrorCache.value)[0];
if (key) {
const errorNode = draggableRef.value.querySelector(`.${key}`);
const bodyNode = draggableRef.value.querySelector(`.ant-table-body`);
if (errorNode) {
const index = Number(key.split('_')[1]);
bodyNode.scrollTop =
errorNode.getBoundingClientRect().height * index;
}
const { errorMsg } = formErrorCache.value[key];
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);
const handlePlacement = (index, placement) => {
if (placement) {
return index > 1 ? 'top' + placement : 'bottom' + placement;
}
return index > 1 ? 'top' : 'bottom';
};
const validate = (name, status, errorMsg) => {
const key = `td_${name[1]}_${name[2]}`;
if (!status) {
formErrorCache.value[key] = {
errorMsg: errorMsg[0],
status: status,
};
}
else {
delete formErr.value[key];
}
firstValidate();
};
onMounted(() => {
nextTick(() => {
const bodyNode = draggableRef.value.querySelector('.ant-table-body');
bodyNode.style.minHeight = '200px';
useInfiniteScroll(draggableRef.value.querySelector('.ant-table-body'), () => {
// 滑动到底部
if (countNumber.value * maxLength <= formData.table.length &&
formData.table[(countNumber.value + 1) * maxLength + 1]) {
// 有多余数据时，进行添加
countNumber.value++;
}
}, {
distance: 10,
});
});
});
watch(() => JSON.stringify(props.dataSource), () => {
formData.table = setUUIDbyDataSource(props.dataSource);
}, { immediate: true });
watch(() => formData.table, () => {
// updateRevoke(formData.table);
const data = cleanUUIDbyData(formData.table);
emit('change', data);
emit('update:dataSource', data);
}, { deep: true });
watch(() => JSON.stringify([...updateStatus.value.values()]), () => {
emit('editStatus', !![...updateStatus.value.values()].length);
});
watch(() => isFullscreen.value, () => {
if (!isFullscreen.value) {
proxy.$forceUpdate();
}
});
__expose({
getData: getData,
getList: getList,
addItem: addItem,
removeItem: removeItem,
initItems: initItems,
addEditor: addEditor,
addEditorAll: addEditorAll,
cleanEditStatus: cleanEditStatus,
fullRef: () => fullRef.value,
});
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock("div", {
ref_key: "fullRef",
ref: fullRef,
class: _normalizeClass(['j-data-table', _unref(isFullscreen) ? 'j-data-table-fullscreen' : ''])
}, [
(__props.showTool !== false)
? (_openBlock(), _createElementBlock("div", _hoisted_1, [
(showToolLeft.value)
? (_openBlock(), _createElementBlock("div", _hoisted_2, [
(__props.showSearch)
? (_openBlock(), _createElementBlock("div", _hoisted_3, [
_createVNode(_unref(InputSearch), _mergeProps({
"allow-clear": "",
style: { "width": "220px" }
}, __props.searchProps, { onSearch: search }), null, 16 /* FULL_PROPS */)
]))
: _createCommentVNode("v-if", true),
_createElementVNode("div", _hoisted_4, [
_createVNode(_unref(AIcon), {
type: _unref(isFullscreen)
? 'FullscreenExitOutlined'
: 'FullscreenOutlined',
onClick: _unref(toggle)
}, null, 8 /* PROPS */, ["type", "onClick"])
]),
(showResult.visible)
? (_openBlock(), _createElementBlock("div", _hoisted_5, [
_createTextVNode(" 已查询到"),
_createElementVNode("span", null, _toDisplayString(showResult.msg), 1 /* TEXT */),
_createTextVNode(" 条相关数据 ")
]))
: _createCommentVNode("v-if", true)
]))
: _createCommentVNode("v-if", true),
_createElementVNode("div", _hoisted_6, [
_renderSlot(_ctx.$slots, "expand")
])
]))
: _createCommentVNode("v-if", true),
_createElementVNode("div", _hoisted_7, [
_createVNode(_unref(Form), {
ref_key: "formRef",
ref: formRef,
layout: "horizontal",
model: formData,
"scroll-to-first-error": true,
onValidate: validate
}, {
default: _withCtx(() => [
_createElementVNode("div", {
ref_key: "draggableRef",
ref: draggableRef,
class: "draggable-body"
}, [
_createVNode(_unref(Table), _mergeProps(props, {
columns: newColumns.value,
pagination: false,
"data-source": virtualData.value,
"row-key": props.rowKey || '_uuid',
scroll: __props.height
? {
y: !_unref(isFullscreen)
? __props.height < 200
? 200
: __props.height
: `calc(100vh - 160px)`,
}
: undefined
}), {
headerCell: _withCtx(({ column }) => [
_createElementVNode("span", {
class: _normalizeClass([
'j-data-table-header',
_optionalChain([column, 'access', _29 => _29.form, 'optionalAccess', _30 => _30.required]) ? 'required' : '',
])
}, [
_renderSlot(_ctx.$slots, "headerCell", { column: column }, () => [
_createTextVNode(_toDisplayString(column.title), 1 /* TEXT */)
])
], 2 /* CLASS */)
]),
bodyCell: _withCtx(({ column, record, index }) => [
_createCommentVNode(" 判断是否已修改 "),
((editKeys.value[`td_${index}_${column.dataIndex}`] ||
column.control) &&
controlData(record, record._sortIndex, column.dataIndex, column.type))
? (_openBlock(), _createElementBlock("div", _hoisted_8))
: _createCommentVNode("v-if", true),
_createVNode(_unref(FormError), {
id: `td_${index}_${column.dataIndex}`,
index: index,
visible: !!formErr.value[`td_${index}_${column.dataIndex}`],
content: formErr.value[`td_${index}_${column.dataIndex}`],
"is-edit": formErr.value[`td_${index}_${column.dataIndex}`],
selected: selectedKey.value ===
`td_${index}_${column.dataIndex}`,
name: column.type ? column.dataIndex : undefined,
"get-popup-container": (e) => e.parentNode,
placement: handlePlacement(index, column.placement)
}, null, 8 /* PROPS */, ["id", "index", "visible", "content", "is-edit", "selected", "name", "get-popup-container", "placement"]),
(column.dataIndex === 'index')
? (_openBlock(), _createElementBlock("div", {
key: 1,
class: _normalizeClass(draggableClassName)
}, _toDisplayString(index + 1), 1 /* TEXT */))
: (_openBlock(), _createElementBlock("div", {
key: 2,
class: _normalizeClass([
draggableClassName,
column.dataIndex !== 'action'
? 'j-row-click'
: '',
editKey.value ===
`td_${index}_${column.dataIndex}` &&
column.type
? 'j-data-table--edit'
: '',
]),
"data-index": column.type ? index : undefined,
"data-name": column.dataIndex
}, [
_createCommentVNode(" 不需要校验, 未编辑 "),
(!_optionalChain([column, 'access', _31 => _31.form, 'optionalAccess', _32 => _32.isVerify]) &&
!editKeys.value[`td_${index}_${column.dataIndex}`])
? _renderSlot(_ctx.$slots, column.dataIndex, {
key: 0,
data: {
record,
index,
}
}, () => [
_createVNode(_unref(Ellipsis), null, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(record[column.dataIndex]), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */)
])
: (!column.type && column.form)
? (_openBlock(), _createBlock(_unref(FormItem), {
key: 1,
name: ['table', index].concat(_optionalChain([column, 'access', _33 => _33.form, 'optionalAccess', _34 => _34.name]) ||
column.dataIndex),
rules: _optionalChain([column, 'access', _35 => _35.form, 'optionalAccess', _36 => _36.rules]),
"validate-first": true
}, {
help: _withCtx(() => []),
default: _withCtx(() => [
_renderSlot(_ctx.$slots, column.dataIndex, {
data: {
record,
index,
}
})
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "rules"]))
: (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [
_createCommentVNode(" 需要校验 "),
_createVNode(_unref(FormItem), {
name: ['table', index].concat(_optionalChain([column, 'access', _37 => _37.form, 'optionalAccess', _38 => _38.name]) ||
column.dataIndex),
rules: _optionalChain([column, 'access', _39 => _39.form, 'optionalAccess', _40 => _40.rules]),
"validate-first": true
}, {
help: _withCtx(() => []),
default: _withCtx(() => [
(editKey.value !==
`td_${index}_${column.dataIndex}`)
? _renderSlot(_ctx.$slots, column.dataIndex, {
key: 0,
data: {
record,
index,
}
}, () => [
_createVNode(_unref(Ellipsis), null, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(record[column.dataIndex]), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */)
])
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode(" 编辑 "),
(column.type === 'text')
? (_openBlock(), _createBlock(_unref(Input), {
key: 0,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event),
placeholder: `请输入${column.title}`,
style: { "width": "100%" },
onFocus: _cache[0] || (_cache[0] = ($event) => (inputFocus.value = true)),
onBlur: _cache[1] || (_cache[1] = ($event) => (inputFocus.value = false))
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "placeholder"]))
: (column.type === 'number')
? (_openBlock(), _createBlock(_unref(InputNumber), {
key: 1,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event),
style: { "width": "100%" },
placeholder: `请输入${column.title}`,
onFocus: _cache[2] || (_cache[2] = ($event) => (inputFocus.value = true)),
onBlur: _cache[3] || (_cache[3] = ($event) => (inputFocus.value = false))
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "placeholder"]))
: (column.type === 'TypeSelect')
? (_openBlock(), _createBlock(_unref(DataTableTypeSelect), {
key: 2,
value: formData.table[index][_optionalChain([newColumns, 'access', _41 => _41.value, 'access', _42 => _42.find, 'call', _43 => _43((item) => item.type ===
'TypeSelect'), 'optionalAccess', _44 => _44.dataIndex])],
"onUpdate:value": ($event) => ((formData.table[index][_optionalChain([newColumns, 'access', _45 => _45.value, 'access', _46 => _46.find, 'call', _47 => _47((item) => item.type ===
'TypeSelect'), 'optionalAccess', _48 => _48.dataIndex])]) = $event),
placeholder: `请选择${column.title}`
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "placeholder"]))
: (column.type === 'select')
? (_openBlock(), _createBlock(_unref(Select), _mergeProps({
key: 3,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event),
style: { "width": "100%" },
options: column.options
}, _optionalChain([column, 'access', _49 => _49.components, 'optionalAccess', _50 => _50.props]), {
placeholder: `请选择${column.title}`
}), null, 16 /* FULL_PROPS */, ["value", "onUpdate:value", "options", "placeholder"]))
: (column.type === 'booleanSelect')
? (_openBlock(), _createBlock(BooleanSelect, _mergeProps({
key: 4,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event),
style: { "width": "100%" }
}, _optionalChain([column, 'access', _51 => _51.components, 'optionalAccess', _52 => _52.props]), {
placeholder: `请选择${column.title}`
}), null, 16 /* FULL_PROPS */, ["value", "onUpdate:value", "placeholder"]))
: (column.type === 'components' &&
column.components.name)
? (_openBlock(), _createBlock(_resolveDynamicComponent(column.components.name), _mergeProps({ key: 5 }, column.components.props, {
value: formData.table[index],
"onUpdate:value": ($event) => ((formData.table[index]) = $event),
columns: newColumns.value,
extra: __props.extra,
record: record,
onFocus: _cache[4] || (_cache[4] = ($event) => (inputFocus.value = true)),
onBlur: _cache[5] || (_cache[5] = ($event) => (inputFocus.value = false))
}), null, 16 /* FULL_PROPS */, ["value", "onUpdate:value", "columns", "extra", "record"]))
: _createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "rules"])
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
], 10 /* CLASS, PROPS */, _hoisted_9))
]),
emptyText: _withCtx(() => [
_createElementVNode("div", _hoisted_10, [
_createVNode(_unref(Empty))
])
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["columns", "data-source", "row-key", "scroll"])
], 512 /* NEED_PATCH */)
]),
_: 3 /* FORWARDED */
}, 8 /* PROPS */, ["model"])
])
], 2 /* CLASS */));
};
}
});
export default __sfc_main__;