|
| 1 | +<template> |
| 2 | + <a-form :label-col="labelCol" :wrapper-col="wrapperCol"> |
| 3 | + <template v-for="(item, i) in renderOptions" :key="i"> |
| 4 | + <a-form-item v-if="(item.show as any)(attrForm)" :label="item.label"> |
| 5 | + <component |
| 6 | + :is="getComponent(item.type)" |
| 7 | + v-model:value="item.value" |
| 8 | + :min="item.min || item.min === 0 ? item.min : -Infinity" |
| 9 | + :max="item.max || item.max === 0 ? item.max : Infinity" |
| 10 | + :step="item.step || 0.1" |
| 11 | + :range="item.range || false" |
| 12 | + :options="item.data || []" |
| 13 | + :units="item.units" |
| 14 | + @change="itemChange(item)" |
| 15 | + > |
| 16 | + </component> |
| 17 | + <template v-if="item.extra" #extra>{{ item.extra(attrForm) }}</template> |
| 18 | + </a-form-item> |
| 19 | + </template> |
| 20 | + </a-form> |
| 21 | +</template> |
| 22 | +<script setup lang="ts"> |
| 23 | +import { computed, ref, watchEffect } from "vue" |
| 24 | +import { components, GuiItem } from "./index" |
| 25 | +const props = defineProps<{ |
| 26 | + options: GuiItem[] |
| 27 | +}>() |
| 28 | +
|
| 29 | +const emits = defineEmits(["change"]) |
| 30 | +
|
| 31 | +const renderOptions = ref<GuiItem[]>([]) |
| 32 | +
|
| 33 | +const attrForm = computed(() => { |
| 34 | + const modelValues: Record<string, any> = {} |
| 35 | + renderOptions.value.forEach((item) => { |
| 36 | + modelValues[item.field] = item.value |
| 37 | + }) |
| 38 | +
|
| 39 | + return modelValues |
| 40 | +}) |
| 41 | +
|
| 42 | +const labelCol = { span: 6 } |
| 43 | +const wrapperCol = { span: 18 } |
| 44 | +
|
| 45 | +watchEffect(() => { |
| 46 | + renderOptions.value = props.options.map((item) => mergeItemOption(item)) |
| 47 | +}) |
| 48 | +
|
| 49 | +defineExpose({ |
| 50 | + // 删除指定 field 或 索引的 元素 |
| 51 | + delete: (key: string | number) => { |
| 52 | + let index: number |
| 53 | + if (typeof key === "string") { |
| 54 | + renderOptions.value.forEach((item, i) => { |
| 55 | + if (item.field === key) { |
| 56 | + index = i |
| 57 | + } |
| 58 | + }) |
| 59 | + } |
| 60 | + if (typeof key === "number" && key >= 0 && key < renderOptions.value.length) { |
| 61 | + index = key |
| 62 | + } |
| 63 | + if (index !== undefined) { |
| 64 | + renderOptions.value.splice(index, 1) |
| 65 | + } |
| 66 | + }, |
| 67 | + // 在指定位置插入 一个 或 多个 元素 |
| 68 | + insert(index: number, ...args: GuiItem[]) { |
| 69 | + args.forEach((item) => { |
| 70 | + renderOptions.value.splice(index, 0, mergeItemOption(item)) |
| 71 | + }) |
| 72 | + }, |
| 73 | + updateField(field: string, value) { |
| 74 | + renderOptions.value.forEach((item) => { |
| 75 | + if (item.field === field) { |
| 76 | + item.value = value |
| 77 | + } |
| 78 | + }) |
| 79 | + }, |
| 80 | + updateExtra(field: string, value) { |
| 81 | + renderOptions.value.forEach((item) => { |
| 82 | + if (item.field === field) { |
| 83 | + item.extra = mergeExtra(value) |
| 84 | + } |
| 85 | + }) |
| 86 | + }, |
| 87 | + getValue(field: string) { |
| 88 | + const item = renderOptions.value.find((it) => { |
| 89 | + return it.field === field |
| 90 | + }) |
| 91 | + if (item) { |
| 92 | + return item.value |
| 93 | + } |
| 94 | + throw new Error("field is not exist") |
| 95 | + }, |
| 96 | + getValues() { |
| 97 | + return attrForm.value |
| 98 | + } |
| 99 | +}) |
| 100 | +
|
| 101 | +function getComponent(type: keyof typeof components) { |
| 102 | + return components[type] |
| 103 | +} |
| 104 | +
|
| 105 | +function mergeItemOption(item) { |
| 106 | + // show字段转为function |
| 107 | + if (typeof item.show !== "function") { |
| 108 | + item.show = () => (item.show === undefined ? true : !!item.show) |
| 109 | + } |
| 110 | +
|
| 111 | + // extra 字段转为function |
| 112 | + item.extra = mergeExtra(item.extra) |
| 113 | + return item |
| 114 | +} |
| 115 | +
|
| 116 | +function mergeExtra(extra) { |
| 117 | + let extraNew = extra |
| 118 | + if (typeof extraNew !== "function" && extraNew) { |
| 119 | + extraNew = () => { |
| 120 | + if (typeof extra === "string") { |
| 121 | + let str = extra |
| 122 | + const paramsPattern = /[^{\}]+(?=})/g |
| 123 | + const extractParams = str.match(paramsPattern) || [] |
| 124 | + extractParams.forEach((key) => { |
| 125 | + str = str.replace(new RegExp(`{${key}}`, "g"), attrForm.value[key]) |
| 126 | + }) |
| 127 | + return str |
| 128 | + } else { |
| 129 | + return extra |
| 130 | + } |
| 131 | + } |
| 132 | + } |
| 133 | + return extraNew |
| 134 | +} |
| 135 | +
|
| 136 | +function itemChange(item: GuiItem) { |
| 137 | + emits("change", attrForm.value) |
| 138 | + if (item.change) { |
| 139 | + item.change(item.value, attrForm.value) |
| 140 | + } |
| 141 | +} |
| 142 | +</script> |
| 143 | +<script lang="ts"> |
| 144 | +export default { |
| 145 | + name: "mars-gui" |
| 146 | +} |
| 147 | +</script> |
| 148 | + |
| 149 | +<style lang="less"></style> |
0 commit comments