67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template>
|
|
<a-popover :visible="visible" placement="left">
|
|
<template #title>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="width: 150px;">配置元素</div>
|
|
<close-outlined @click="visible = false" />
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div style="max-width: 400px;">
|
|
<a-form layout="vertical" :model="_value">
|
|
<value-type-form v-model:value="_value" :name="[]" isSub key="sub"></value-type-form>
|
|
<a-form-item label="说明" name="description" :rules="[
|
|
{ max: 200, message: '最多可输入200个字符' },
|
|
]">
|
|
<a-textarea v-model:value="_value.description" size="small"></a-textarea>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</template>
|
|
<a-button type="dashed" block @click="visible = true">
|
|
配置元素<edit-outlined class="item-icon" />
|
|
</a-button>
|
|
</a-popover>
|
|
|
|
</template>
|
|
<script setup lang="ts" name="ArrayParam">
|
|
import ValueTypeForm from '@/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue';
|
|
import { EditOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
|
import { PropType } from 'vue';
|
|
|
|
type ValueType = Record<any, any>;
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: Object as PropType<ValueType>,
|
|
default: () => ({ extends: {} })
|
|
},
|
|
name: {
|
|
type: Array as PropType<string[]>,
|
|
required: true
|
|
}
|
|
})
|
|
interface Emits {
|
|
(e: 'update:value', data: ValueType): void;
|
|
}
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const _value = computed({
|
|
get: () => props.value,
|
|
set: val => {
|
|
emit('update:value', val)
|
|
}
|
|
})
|
|
|
|
const visible = ref(false)
|
|
|
|
onMounted(() => {
|
|
emit('update:value', { extends: {}, ...props.value })
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.item-icon {
|
|
color: rgb(136, 136, 136);
|
|
font-size: 12px;
|
|
}
|
|
</style> |