mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
263 lines • 10.6 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",
"type": "props",
"multiple": "props",
"name": "props",
"reactive": "setup-const",
"watch": "setup-const",
"ref": "setup-const",
"Form": "setup-maybe-ref",
"FormItem": "setup-maybe-ref",
"FormItemRest": "setup-maybe-ref",
"DataTable": "setup-maybe-ref",
"JButton": "setup-maybe-ref",
"AIcon": "setup-maybe-ref",
"ButtonGroup": "setup-const",
"formItemContext": "setup-maybe-ref",
"props": "setup-reactive-const",
"emit": "setup-const",
"formRef": "setup-ref",
"formData": "setup-reactive-const",
"typeRef": "setup-ref",
"tableRef": "setup-ref",
"columns": "setup-const",
"enumLength": "setup-ref",
"rules": "setup-const",
"getData": "setup-const",
"addItem": "setup-const",
"deleteItem": "setup-const",
"cancel": "setup-const",
"typeChange": "setup-const",
"change": "setup-const"
} */
import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, createVNode as _createVNode, unref as _unref, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
const _hoisted_1 = /*#__PURE__*/ _createElementVNode("span", { style: { "color": "#ff4d4f", "padding-right": "4px", "padding-top": "2px" } }, "*", -1 /* HOISTED */);
const _hoisted_2 = { class: "enum-table-warp" };
import { reactive, watch, ref } from 'vue';
import { Form } from 'ant-design-vue';
import { FormItem, FormItemRest, DataTable, Button as JButton, AIcon, } from '../../../components';
import ButtonGroup from './ButtonGroup.js';
const __sfc_main__ = {
props: {
value: {
type: Array,
default: () => [],
},
type: {
type: Boolean,
default: false,
},
multiple: {
type: Boolean,
default: false,
},
name: {
type: String,
default: 'elements',
},
},
emits: ['update:value', 'update:type', 'cancel', 'add'],
setup(__props, { expose: __expose, emit }) {
const props = __props;
const formItemContext = Form.useInjectFormItemContext();
const formRef = ref();
const formData = reactive({
elements: props.value || [],
});
const typeRef = ref(props.type || false);
const tableRef = ref();
const columns = [
{
title: 'Value',
dataIndex: 'value',
type: 'text',
width: 150,
form: {
required: true,
rules: [
{
callback: (rule, value, dataSource) => {
if (value) {
const { field } = rule;
const keys = field.split('.');
const index = Number(keys[1]);
// 排除自身
const hasValue = _optionalChain([dataSource, 'optionalAccess', _2 => _2.some, 'call', _3 => _3((item, i) => item.value === value && i !== index)]) || false;
if (hasValue) {
return Promise.reject('该Value值已存在');
}
return Promise.resolve();
}
return Promise.reject('请输入Value');
},
},
{ max: 64, message: '最多可输入64个字符' },
],
},
},
{
title: 'Text',
dataIndex: 'text',
type: 'text',
width: 150,
form: {
required: true,
rules: [
{
required: true,
message: '请输入Text',
},
{ max: 64, message: '最多可输入64个字符' },
],
},
},
{
title: '操作',
dataIndex: 'action',
width: 60,
},
];
const enumLength = ref(0);
const rules = [
{
validator(_, value) {
if (!enumLength.value) {
return Promise.reject('请添加枚举项');
}
return Promise.resolve();
},
},
];
const getData = () => new Promise((resolve, reject) => {
_optionalChain([tableRef, 'access', _4 => _4.value,
'optionalAccess', _5 => _5.getData, 'call', _6 => _6(),
'optionalAccess', _7 => _7.then, 'call', _8 => _8((data) => {
resolve(data);
}),
'access', _9 => _9.catch, 'call', _10 => _10((err) => {
console.log(err);
reject(false);
})]);
});
const addItem = () => {
// formData.elements.push({
// value: undefined,
// text: undefined
// })
_optionalChain([tableRef, 'access', _11 => _11.value, 'optionalAccess', _12 => _12.addItem, 'call', _13 => _13({
value: undefined,
text: undefined,
})]);
formItemContext.onFieldChange();
};
const deleteItem = (index) => {
_optionalChain([tableRef, 'access', _14 => _14.value, 'optionalAccess', _15 => _15.removeItem, 'call', _16 => _16(index)]);
formItemContext.onFieldChange();
// const newData = tableRef.value?.removeItem(index);
// formData.elements.splice(index, 1)
// console.log('update', newData);
};
const cancel = () => {
_optionalChain([tableRef, 'access', _17 => _17.value, 'optionalAccess', _18 => _18.initItems, 'call', _19 => _19()]);
};
const typeChange = () => {
emit('update:type', typeRef.value);
};
const change = (data) => {
enumLength.value = data.length;
};
watch(() => JSON.stringify(props.value), () => {
formData.elements = props.value || [];
}, { immediate: true });
watch(() => props.type, () => {
typeRef.value = props.type;
});
__expose({
getData: getData,
cancel: cancel,
});
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_unref(FormItem), {
name: __props.name,
rules: rules,
"validate-first": true
}, {
label: _withCtx(() => [
_hoisted_1,
_createTextVNode(" 枚举项 ")
]),
default: _withCtx(() => [
(__props.multiple)
? (_openBlock(), _createBlock(_unref(FormItemRest), { key: 0 }, {
default: _withCtx(() => [
_createVNode(ButtonGroup, {
value: typeRef.value,
"onUpdate:value": _cache[0] || (_cache[0] = $event => ((typeRef).value = $event)),
onChange: _cache[1] || (_cache[1] =
() => {
typeChange;
})
}, null, 8 /* PROPS */, ["value"])
]),
_: 1 /* STABLE */
}))
: _createCommentVNode("v-if", true),
_createElementVNode("div", _hoisted_2, [
_createVNode(_unref(DataTable), {
ref_key: "tableRef",
ref: tableRef,
"data-source": formData.elements,
columns: columns,
serial: true,
"show-tool": false,
onChange: change
}, {
action: _withCtx(({ data }) => [
_createVNode(_unref(JButton), {
type: "link",
onClick: () => deleteItem(data.index)
}, {
default: _withCtx(() => [
_createVNode(_unref(AIcon), { type: "DeleteOutlined" })
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["data-source"]),
_createVNode(_unref(JButton), {
class: "enum-table-add",
onClick: addItem
}, {
icon: _withCtx(() => [
_createVNode(_unref(AIcon), { type: "PlusOutlined" })
]),
default: _withCtx(() => [
_createTextVNode(" 新增枚举项 ")
]),
_: 1 /* STABLE */
})
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["name"]));
};
}
};
export default __sfc_main__;