mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
208 lines • 9.45 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: {
"value": "props",
"width": "props",
"columns": "props",
"placement": "props",
"onAdd": "props",
"DataTable": "setup-maybe-ref",
"inject": "setup-const",
"ref": "setup-const",
"watch": "setup-const",
"Button": "setup-maybe-ref",
"PopconfirmModal": "setup-maybe-ref",
"Scrollbar": "setup-maybe-ref",
"AIcon": "setup-maybe-ref",
"Icon": "setup-const",
"isFunction": "setup-maybe-ref",
"FULL_CODE": "setup-maybe-ref",
"emit": "setup-const",
"fullRef": "setup-maybe-ref",
"props": "setup-reactive-const",
"newSource": "setup-ref",
"tableRef": "setup-ref",
"addItem": "setup-const",
"deleteItem": "setup-const",
"cancel": "setup-const",
"confirm": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { unref as _unref, renderSlot as _renderSlot, createVNode as _createVNode, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
import DataTable from '../../dataTable';
import { inject, ref, watch } from 'vue';
import { Button, PopconfirmModal, Scrollbar, AIcon } from '../../../components';
import Icon from '../Icon.js';
import { isFunction } from 'lodash-es';
import { FULL_CODE } from '../../index';
const __sfc_main__ = _defineComponent({
props: {
value: {
type: Array,
default: () => [],
},
width: {
type: String,
default: '600px',
},
columns: {
type: Array,
default: () => [],
},
placement: {
type: String,
default: 'top',
},
onAdd: {
type: Function,
default: undefined,
},
},
emits: ["update:value", "confirm", "cancel"],
setup(__props, { emit }) {
const props = __props;
const fullRef = inject(FULL_CODE);
const newSource = ref(props.value || []); //将null类型转为数组
const tableRef = ref();
const addItem = () => {
let object = {};
if (props.onAdd && isFunction(props.onAdd)) {
object = props.onAdd();
}
else {
props.columns.forEach((item) => {
if (item.dataIndex !== 'action') {
object[item.dataIndex] = undefined;
}
});
}
_optionalChain([tableRef, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.addItem, 'call', _4 => _4(object)]);
// emit('update:value', newSource.value);
// newSource.value.push(object);
};
const deleteItem = (index) => {
_optionalChain([tableRef, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.removeItem, 'call', _7 => _7(index)]);
// emit('update:value', newSource.value);
// newSource.value.splice(index, 1);
};
const cancel = () => {
_optionalChain([tableRef, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.initItems, 'call', _10 => _10()]);
newSource.value = props.value;
emit('cancel');
};
watch(() => JSON.stringify(props.value), () => {
newSource.value = props.value;
});
const confirm = () => {
return new Promise(async (resolve, reject) => {
_optionalChain([tableRef, 'access', _11 => _11.value,
'optionalAccess', _12 => _12.getData, 'call', _13 => _13(),
'access', _14 => _14.then, 'call', _15 => _15((data) => {
resolve(true);
const newData = data.map((item) => {
const { _sortIndex, ...extra } = item;
return extra;
});
emit('update:value', newData);
emit('confirm', newData);
}),
'access', _16 => _16.catch, 'call', _17 => _17(() => {
reject(false);
})]);
});
};
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_unref(PopconfirmModal), {
"destroy-on-close": "",
"body-style": { paddingTop: '4px', width: __props.width },
placement: __props.placement,
"get-popup-container": (node) => _unref(fullRef) || node,
onConfirm: confirm,
onCancel: cancel
}, {
content: _withCtx(() => [
_createElementVNode("div", null, [
_createVNode(_unref(Scrollbar), { height: "280" }, {
default: _withCtx(() => [
_createVNode(_unref(DataTable), {
ref_key: "tableRef",
ref: tableRef,
"data-source": newSource.value,
columns: __props.columns,
serial: true,
children: true,
"show-tool": false,
height: 220
}, _createSlots({ _: 2 /* DYNAMIC */ }, [
_renderList(__props.columns, (item) => {
return {
name: item.dataIndex,
fn: _withCtx(({ data }) => [
(item.dataIndex === 'action')
? _renderSlot(_ctx.$slots, item.dataIndex, {
key: 0,
data: {
record: data.record,
index: data.index,
}
}, () => [
_createVNode(_unref(Button), {
type: "link",
onClick: () => deleteItem(data.index)
}, {
default: _withCtx(() => [
_createVNode(_unref(AIcon), { type: "DeleteOutlined" })
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])
])
: _renderSlot(_ctx.$slots, item.dataIndex, {
key: 1,
data: {
record: data.record,
index: data.index,
}
})
])
};
})
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["data-source", "columns"])
]),
_: 3 /* FORWARDED */
}),
_createVNode(_unref(Button), {
style: { "width": "100%", "margin-top": "12px" },
onClick: addItem
}, {
default: _withCtx(() => [
_createTextVNode("新增")
]),
_: 1 /* STABLE */
})
])
]),
default: _withCtx(() => [
_renderSlot(_ctx.$slots, "default", {}, () => [
_createVNode(Icon)
])
]),
_: 3 /* FORWARDED */
}, 8 /* PROPS */, ["body-style", "placement", "get-popup-container"]));
};
}
});
export default __sfc_main__;