mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
287 lines • 13.7 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",
"enumMultiple": "props",
"unitOptions": "props",
"placement": "props",
"TypeSelect": "setup-maybe-ref",
"inject": "setup-const",
"reactive": "setup-const",
"ref": "setup-const",
"watch": "setup-const",
"Form": "setup-maybe-ref",
"FormItem": "setup-maybe-ref",
"PopconfirmModal": "setup-maybe-ref",
"FileType": "setup-maybe-ref",
"BooleanItem": "setup-maybe-ref",
"DateItem": "setup-maybe-ref",
"ScaleItem": "setup-maybe-ref",
"StringItem": "setup-maybe-ref",
"EnumItem": "setup-maybe-ref",
"Icon": "setup-const",
"pick": "setup-maybe-ref",
"FULL_CODE": "setup-maybe-ref",
"emit": "setup-const",
"props": "setup-reactive-const",
"formRef": "setup-ref",
"enumRef": "setup-ref",
"fullRef": "setup-maybe-ref",
"formData": "setup-reactive-const",
"typeChange": "setup-const",
"rules": "setup-const",
"initValue": "setup-const",
"cancel": "setup-const",
"handleValue": "setup-const",
"confirm": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { unref as _unref, createVNode as _createVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
import TypeSelect from '../Type';
import { inject, reactive, ref, watch } from 'vue';
import { Form, FormItem, PopconfirmModal } from '../../../components';
import { BooleanItem } from '../Boolean';
import { DateItem } from '../Date';
import { ScaleItem } from '../Double';
import { StringItem } from '../String';
import { EnumItem } from '../Enum';
import Icon from '../Icon.js';
import { pick } from 'lodash-es';
import { FULL_CODE } from '../../index';
const __sfc_main__ = _defineComponent({
props: {
value: {
type: Object,
default: undefined,
},
enumMultiple: {
type: Boolean,
default: false,
},
unitOptions: {
type: [Array, Function],
default: undefined,
},
placement: {
type: String,
default: 'top',
},
},
emits: ['update:value', 'cancel', 'confirm'],
setup(__props, { emit }) {
const props = __props;
const formRef = ref();
const enumRef = ref();
const fullRef = inject(FULL_CODE);
const formData = reactive({
type: _optionalChain([props, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.type]),
scale: _optionalChain([props, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.scale]),
maxLength: _optionalChain([props, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.maxLength]),
boolean: {
trueText: _optionalChain([props, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.trueText]) || '是',
trueValue: _optionalChain([props, 'access', _10 => _10.value, 'optionalAccess', _11 => _11.trueValue]) || 'true',
falseText: _optionalChain([props, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.falseText]) || '否',
falseValue: _optionalChain([props, 'access', _14 => _14.value, 'optionalAccess', _15 => _15.falseValue]) || 'false',
},
format: _optionalChain([props, 'access', _16 => _16.value, 'optionalAccess', _17 => _17.format]),
enum: {
multiple: _optionalChain([props, 'access', _18 => _18.value, 'optionalAccess', _19 => _19.multiple]),
elements: _optionalChain([props, 'access', _20 => _20.value, 'optionalAccess', _21 => _21.elements]) || [],
},
});
const typeChange = (e) => {
if (['float', 'double'].includes(e)) {
formData.scale = 2;
}
};
const rules = [
{
validator(_, value) {
console.log(value);
if (!value) {
return Promise.reject('请选择元素类型');
}
return Promise.resolve();
},
trigger: 'change',
},
];
const initValue = () => {
formData.type = _optionalChain([props, 'access', _22 => _22.value, 'optionalAccess', _23 => _23.type]);
formData.scale = _optionalChain([props, 'access', _24 => _24.value, 'optionalAccess', _25 => _25.scale]);
formData.maxLength = _optionalChain([props, 'access', _26 => _26.value, 'optionalAccess', _27 => _27.maxLength]);
formData.boolean = {
trueText: _optionalChain([props, 'access', _28 => _28.value, 'optionalAccess', _29 => _29.trueText]) || '是',
trueValue: _optionalChain([props, 'access', _30 => _30.value, 'optionalAccess', _31 => _31.trueValue]) || 'true',
falseText: _optionalChain([props, 'access', _32 => _32.value, 'optionalAccess', _33 => _33.falseText]) || '否',
falseValue: _optionalChain([props, 'access', _34 => _34.value, 'optionalAccess', _35 => _35.falseValue]) || 'false',
};
formData.format = _optionalChain([props, 'access', _36 => _36.value, 'optionalAccess', _37 => _37.format]);
formData.enum = {
multiple: _optionalChain([props, 'access', _38 => _38.value, 'optionalAccess', _39 => _39.multiple]),
elements: _optionalChain([props, 'access', _40 => _40.value, 'optionalAccess', _41 => _41.elements]),
};
};
const cancel = () => {
_optionalChain([formRef, 'access', _42 => _42.value, 'optionalAccess', _43 => _43.resetFields, 'call', _44 => _44()]);
initValue();
emit('cancel');
};
const handleValue = (type, data) => {
let newObject = {};
switch (type) {
case 'float':
case 'double':
newObject = pick(formData, 'scale');
break;
case 'boolean':
newObject = { ...formData.boolean };
break;
case 'enum':
newObject.elements = data;
if (props.enumMultiple) {
newObject.multiple = data;
}
break;
case 'string':
case 'password':
newObject = pick(formData, 'maxLength');
break;
case 'date':
newObject = pick(formData, 'format');
break;
}
return {
type: type,
...newObject,
};
};
const confirm = () => {
return new Promise(async (resolve, reject) => {
try {
let enumResult = true;
console.log('校验1', formData.type);
if (formData.type === 'enum') {
enumResult = await enumRef.value.getData();
}
if (enumResult) {
formRef.value
.validate()
.then(() => {
resolve(true);
emit('update:value', handleValue(formData.type, enumResult));
emit('confirm', handleValue(formData.type, enumResult));
})
.catch((e) => {
console.log(e);
reject(false);
});
}
}
catch (e) {
console.log(e);
reject(false);
}
});
};
watch(() => JSON.stringify(props.value), () => {
initValue();
});
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_unref(PopconfirmModal), {
"body-style": "padding-top:4px;width:600px;",
placement: __props.placement,
"get-popup-container": (node) => _unref(fullRef) || node,
"destroy-on-close": "",
onConfirm: confirm,
onCancel: cancel
}, {
content: _withCtx(() => [
_createVNode(_unref(Form), {
ref_key: "formRef",
ref: formRef,
model: formData,
layout: "vertical"
}, {
default: _withCtx(() => [
_createVNode(_unref(FormItem), {
label: "元素类型",
required: "",
name: "type",
rules: rules,
"validate-first": true
}, {
default: _withCtx(() => [
_createVNode(_unref(TypeSelect), {
value: formData.type,
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => ((formData.type) = $event)),
onChange: typeChange
}, null, 8 /* PROPS */, ["value"])
]),
_: 1 /* STABLE */
}),
(['float', 'double'].includes(formData.type))
? (_openBlock(), _createBlock(_unref(ScaleItem), {
key: 0,
value: formData.scale,
"onUpdate:value": _cache[1] || (_cache[1] = ($event) => ((formData.scale) = $event))
}, null, 8 /* PROPS */, ["value"]))
: (['string', 'password'].includes(formData.type))
? (_openBlock(), _createBlock(_unref(StringItem), {
key: 1,
value: formData.maxLength,
"onUpdate:value": _cache[2] || (_cache[2] = ($event) => ((formData.maxLength) = $event))
}, null, 8 /* PROPS */, ["value"]))
: (formData.type === 'boolean')
? (_openBlock(), _createBlock(_unref(BooleanItem), {
key: 2,
value: formData.boolean,
"onUpdate:value": _cache[3] || (_cache[3] = ($event) => ((formData.boolean) = $event)),
name: "boolean"
}, null, 8 /* PROPS */, ["value"]))
: (formData.type === 'date')
? (_openBlock(), _createBlock(_unref(DateItem), {
key: 3,
value: formData.format,
"onUpdate:value": _cache[4] || (_cache[4] = ($event) => ((formData.format) = $event))
}, null, 8 /* PROPS */, ["value"]))
: (formData.type === 'enum')
? (_openBlock(), _createBlock(_unref(EnumItem), {
key: 4,
ref_key: "enumRef",
ref: enumRef,
value: formData.enum.elements,
"onUpdate:value": _cache[5] || (_cache[5] = ($event) => ((formData.enum.elements) = $event)),
name: ['enum', 'elements'],
multiple: __props.enumMultiple
}, null, 8 /* PROPS */, ["value", "multiple"]))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["model"])
]),
default: _withCtx(() => [
_renderSlot(_ctx.$slots, "default", {}, () => [
_createVNode(Icon)
])
]),
_: 3 /* FORWARDED */
}, 8 /* PROPS */, ["placement", "get-popup-container"]));
};
}
});
export default __sfc_main__;