mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
445 lines • 33.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",
"computed": "setup-const",
"nextTick": "setup-const",
"reactive": "setup-const",
"watch": "setup-const",
"ref": "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",
"DataTableTypeSelect": "setup-maybe-ref",
"DataTableInteger": "setup-maybe-ref",
"DataTableDouble": "setup-maybe-ref",
"DataTableArray": "setup-maybe-ref",
"DataTableDate": "setup-maybe-ref",
"DataTableObject": "setup-maybe-ref",
"DataTableBoolean": "setup-maybe-ref",
"DataTableFile": "setup-maybe-ref",
"DataTableEnum": "setup-maybe-ref",
"DataTableString": "setup-maybe-ref",
"Sortable": "setup-maybe-ref",
"useRevoke": "setup-maybe-ref",
"cloneDeep": "setup-maybe-ref",
"debounce": "setup-maybe-ref",
"isEqual": "setup-maybe-ref",
"draggableClassName": "literal-const",
"props": "setup-reactive-const",
"selectedKey": "setup-ref",
"editKey": "setup-ref",
"controlTable": "setup-ref",
"newColumns": "setup-ref",
"formData": "setup-reactive-const",
"sortTable": "setup-ref",
"initRevokeLock": "setup-ref",
"updateState": "setup-maybe-ref",
"TypeSelectDataIndex": "setup-const",
"rowClick": "setup-const",
"editClick": "setup-const",
"inputRevoke": "setup-const",
"sortTableHandle": "setup-const",
"controlData": "setup-const",
"updateRevoke": "setup-maybe-ref"
} */
import { defineComponent as _defineComponent } from 'vue';
import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, unref as _unref, withCtx as _withCtx, createVNode as _createVNode, createBlock as _createBlock, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, createElementVNode as _createElementVNode, Fragment as _Fragment, withModifiers as _withModifiers } from "vue";
const _hoisted_1 = { class: "j-data-table" };
const _hoisted_2 = { class: "j-data-table-body" };
const _hoisted_3 = { class: "draggable-body" };
const _hoisted_4 = ["onClick", "onDblclick"];
const _hoisted_5 = {
key: 4,
class: "j-data-table-row--config"
};
const _hoisted_6 = { class: "j-data-table-config--text" };
const _hoisted_7 = { class: "j-data-table-config--icon" };
import { computed, nextTick, reactive, watch, ref } from 'vue';
import Table, { tableProps } from 'ant-design-vue/lib/table';
import { Form, FormItem, Input, InputNumber, Ellipsis } from '../components';
import { DataTableTypeSelect, DataTableInteger, DataTableDouble, DataTableArray, DataTableDate, DataTableObject, DataTableBoolean, DataTableFile, DataTableEnum, DataTableString, } from './components';
import Sortable from 'sortablejs';
import useRevoke from './useRevoke';
import { cloneDeep, debounce, isEqual } from 'lodash-es';
const draggableClassName = 'draggable-item';
const __sfc_main__ = _defineComponent({
props: {
...tableProps(),
serial: Boolean,
},
setup(__props) {
const props = __props;
const selectedKey = ref(); // 选中标识
const editKey = ref(); // 编辑标识
const controlTable = ref([]); // 对照组
// 重组columns
const newColumns = computed(() => {
const hasSerial = 'serial' in props && props.serial !== false;
const serialItem = {
dataIndex: 'index',
title: '序号',
width: 60,
};
return hasSerial ? [serialItem, ...props.columns] : props.columns;
});
// 表单值
const formData = reactive({
table: [],
});
const sortTable = ref();
const initRevokeLock = ref(false);
const { updateState } = useRevoke(formData.table, {
undo: (data) => {
formData.table = data;
},
});
const TypeSelectDataIndex = (row) => row[_optionalChain([newColumns, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.find, 'call', _4 => _4((item) => item.type === 'TypeSelect'), 'optionalAccess', _5 => _5.dataIndex])];
/**
* 单个选中
* @param key
*/
const rowClick = (key) => {
if (key !== editKey.value) {
editKey.value = '';
}
selectedKey.value = key;
};
/**
* 双击修改
* @param key
*/
const editClick = (key) => {
editKey.value = key;
};
/**
* 阻止input撤销
*/
const inputRevoke = (e) => {
if (e.ctrlKey && e.keyCode === 90) {
e.preventDefault();
}
};
/**
* 新增额外数据
*/
// const addDataSource = () => {
// const obj = {};
// for (const item of props.columns) {
// const dataIndex = item.dataIndex;
// obj[dataIndex] = undefined;
// }
// formData.table.push(obj);
// };
/**
* 初始化拖拽
*/
const sortTableHandle = () => {
if (sortTable.value) {
_optionalChain([sortTable, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.destroy, 'call', _8 => _8()]);
}
const ele = document.querySelector('.draggable-body .ant-table-tbody');
console.log(ele);
sortTable.value = new Sortable(ele, {
draggable: '.ant-table-row',
animation: 200,
ghostClass: 'draggable-ghost',
onEnd: ({ oldIndex, newIndex }) => {
const curr = formData.table.splice(oldIndex, 1)[0];
formData.table.splice(newIndex, 0, curr);
// 判断当前拖拽中是否有选中
if (selectedKey.value) {
const [min, max] = [oldIndex, newIndex].sort((a, b) => a - b);
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;
};
const controlData = (data, index, dataIndex, type) => {
if (type &&
(!controlTable.value.length ||
!isEqual(data, _optionalChain([controlTable, 'access', _9 => _9.value, 'access', _10 => _10[index], 'optionalAccess', _11 => _11[dataIndex]])))) {
// 有type并且数据发生变化时
return 'update';
}
return '';
};
/**
* 停止连续输入时，才更新操作记录
*/
const updateRevoke = debounce((newData) => {
updateState(newData);
}, 500);
watch(() => [props.dataSource, selectedKey.value], () => {
nextTick(() => {
sortTableHandle();
});
}, { immediate: true });
watch(() => props.dataSource, () => {
formData.table = props.dataSource;
if (!initRevokeLock.value) {
controlTable.value = cloneDeep(props.dataSource);
updateState(formData.table);
initRevokeLock.value = true;
}
}, { immediate: true });
watch(() => formData.table, () => {
updateRevoke(formData.table);
}, { deep: true });
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock("div", _hoisted_1, [
_createElementVNode("div", _hoisted_2, [
_createVNode(_unref(Form), {
ref: "formRef",
model: formData
}, {
default: _withCtx(() => [
_createElementVNode("div", _hoisted_3, [
_createVNode(_unref(Table), _mergeProps(props, {
columns: newColumns.value,
pagination: false,
"data-source": formData.table,
"row-key": props.rowKey || 'id'
}), {
bodyCell: _withCtx(({ column, record, index }) => [
(column.dataIndex === 'index')
? (_openBlock(), _createElementBlock("div", {
key: 0,
class: _normalizeClass(draggableClassName)
}, _toDisplayString(index + 1), 1 /* TEXT */))
: (_openBlock(), _createElementBlock("div", {
key: 1,
class: _normalizeClass([
draggableClassName,
selectedKey.value ===
`td_${index}_${column.dataIndex}`
? 'j-data-table-td-selected'
: '',
editKey.value ===
`td_${index}_${column.dataIndex}`
? 'j-data-table--edit'
: '',
controlData(record[column.dataIndex], index, column.dataIndex, column.type),
]),
onClick: _withModifiers(() => {
rowClick(column.type
? `td_${index}_${column.dataIndex}`
: '');
}, ["stop"]),
onDblclick: _withModifiers(() => {
editClick(column.type
? `td_${index}_${column.dataIndex}`
: '');
}, ["stop"])
}, [
_createCommentVNode(" 未编辑 "),
(editKey.value !==
`td_${index}_${column.dataIndex}` ||
!column.type)
? _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(" 编辑中 "),
_createVNode(_unref(FormItem), {
name: [
'table',
index,
column.dataIndex,
],
rules: _optionalChain([column, 'access', _12 => _12.form, 'optionalAccess', _13 => _13.rules]),
required: !!_optionalChain([column, 'access', _14 => _14.form, 'optionalAccess', _15 => _15.required])
}, {
default: _withCtx(() => [
(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}`,
maxlength: 64,
style: { "width": "100%" },
onKeydown: inputRevoke
}, 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}`,
onKeydown: inputRevoke
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "placeholder"]))
: (column.type === 'TypeSelect')
? (_openBlock(), _createBlock(_unref(DataTableTypeSelect), {
key: 2,
value: formData.table[index][_optionalChain([newColumns, 'access', _16 => _16.value, 'access', _17 => _17.find, 'call', _18 => _18((item) => item.type ===
'TypeSelect'), 'optionalAccess', _19 => _19.dataIndex])],
"onUpdate:value": ($event) => ((formData.table[index][_optionalChain([newColumns, 'access', _20 => _20.value, 'access', _21 => _21.find, 'call', _22 => _22((item) => item.type ===
'TypeSelect'), 'optionalAccess', _23 => _23.dataIndex])]) = $event),
placeholder: `请选择${column.title}`
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "placeholder"]))
: (column.type === 'components' &&
column.components.name)
? (_openBlock(), _createBlock(_resolveDynamicComponent(column.components.name), _mergeProps({ key: 3 }, column.components.props, {
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}), null, 16 /* FULL_PROPS */, ["value", "onUpdate:value"]))
: (_openBlock(), _createElementBlock("div", _hoisted_5, [
_createElementVNode("div", _hoisted_6, [
_createVNode(_unref(DataTableTypeSelect), {
value: formData.table[index][_optionalChain([newColumns, 'access', _24 => _24.value, 'access', _25 => _25.find, 'call', _26 => _26((item) => item.type ===
'TypeSelect'), 'optionalAccess', _27 => _27.dataIndex])],
"onUpdate:value": ($event) => ((formData.table[index][_optionalChain([newColumns, 'access', _28 => _28.value, 'access', _29 => _29.find, 'call', _30 => _30((item) => item.type ===
'TypeSelect'), 'optionalAccess', _31 => _31.dataIndex])]) = $event),
placeholder: `请选择${column.title}`
}, null, 8 /* PROPS */, ["value", "onUpdate:value", "placeholder"])
]),
_createElementVNode("div", _hoisted_7, [
([
'int',
'long',
].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableInteger), {
key: 0,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: ([
'float',
'double',
].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableDouble), {
key: 1,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: (['boolean'].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableBoolean), {
key: 2,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: (['enum'].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableEnum), {
key: 3,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: (['array'].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableArray), {
key: 4,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: (['file'].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableFile), {
key: 5,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: (['date'].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableDate), {
key: 6,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: ([
'password',
'string',
].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableString), {
key: 7,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: (['object'].includes(TypeSelectDataIndex(record)))
? (_openBlock(), _createBlock(_unref(DataTableObject), {
key: 8,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
: (_openBlock(), _createBlock(_unref(Input), {
key: 9,
value: formData.table[index][column.dataIndex],
"onUpdate:value": ($event) => ((formData.table[index][column.dataIndex]) = $event)
}, null, 8 /* PROPS */, ["value", "onUpdate:value"]))
])
]))
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "rules", "required"])
], 64 /* STABLE_FRAGMENT */))
], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_4)),
_createCommentVNode(" "),
_createCommentVNode(" <tr v-for=\"(a, index) in slotProps\" :key=\"`${a}`\" :class=\"draggableClassName\">"),
_createCommentVNode(" <td v-for=\"b in newColumns\" :key=\"`td_${index}_${column.dataIndex}`\" :class=\"['j-data-table-td',selectedKey === `td_${index}_${column.dataIndex}` ? 'j-data-table-td-selected' : '']\">"),
_createCommentVNode(" <div v-if=\"column.dataIndex === 'index'\">"),
_createCommentVNode(" {{ index }}"),
_createCommentVNode(" </div>"),
_createCommentVNode(" "),
_createCommentVNode(" </td>"),
_createCommentVNode(" </tr>")
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["columns", "data-source", "row-key"])
])
]),
_: 3 /* FORWARDED */
}, 8 /* PROPS */, ["model"])
]),
_createCommentVNode(" <div class=\"j-data-table-footer\">"),
_createCommentVNode(" <Button class=\"j-data-table-footer--add\" @click=\"addDataSource\">"),
_createCommentVNode(" <template #icon>"),
_createCommentVNode(" <AIcon type=\"PlusOutlined\" />"),
_createCommentVNode(" </template>"),
_createCommentVNode(" 新增"),
_createCommentVNode(" </Button>"),
_createCommentVNode(" </div>")
]));
};
}
});
export default __sfc_main__;