搜索结果列表页面开发
This commit is contained in:
付民康
114
src/components/renderer-yaml/mode/form/index.vue
Normal file
114
src/components/renderer-yaml/mode/form/index.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="renderer-yaml">
|
||||
<div class="renderer-yaml-user-title mb-[16px]">
|
||||
<h3 class="font-bold text-[16px] mb-[8px]">添加标题<i class="text-[var(--color-danger)]">*</i></h3>
|
||||
<d-input v-model="title" placeholder="请填写 Issue 标题" maxlength="100">
|
||||
<template #suffix>
|
||||
<span>{{ title.length }}/100</span>
|
||||
</template>
|
||||
</d-input>
|
||||
</div>
|
||||
<template v-for="item in previewList">
|
||||
<renderer-scene
|
||||
:type="item.type"
|
||||
v-model="item.attributes.value"
|
||||
:renderer-item="item"
|
||||
:renderer="rendererType"
|
||||
:hideRequired="false"
|
||||
>
|
||||
</renderer-scene>
|
||||
</template>
|
||||
<div class="flex justify-end mt-32">
|
||||
<d-button size="lg" @click="handleCancel">取 消</d-button>
|
||||
<d-button class="ml-[8px]" :loading="loading" :disabled="disabledSubmit" size="lg" variant="solid" color="primary" @click="handleSubmit">提交 Issue</d-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineOptions, ref, watch, type Ref, onMounted, computed, type ComputedRef } from 'vue';
|
||||
import { type DefaultValue, type RendererTypeName, type SchemaItem, RendererType, ComponentType, type CheckBoxItem, splitStr } from '../../types';
|
||||
import rendererScene from '../../components/renderer-scene/index.vue';
|
||||
import { validateSchema, type ValidationsSchemaOutput } from '../../helper';
|
||||
import { Message } from 'vue-devui';
|
||||
// component name
|
||||
defineOptions({ name: 'renderer-yaml' });
|
||||
const emit = defineEmits(['success', 'update:loading', 'update-setting', 'cancel']);
|
||||
// props
|
||||
const props = defineProps<{
|
||||
content: DefaultValue,
|
||||
loading?: boolean
|
||||
}>();
|
||||
// data
|
||||
const yamlContent:Ref<DefaultValue> = ref('');
|
||||
const rendererType:Ref<RendererTypeName> = ref(RendererType.form)
|
||||
const schema:Ref<ValidationsSchemaOutput|Record<string, any>> = ref({});
|
||||
const disabledSubmit:Ref<boolean> = ref(true);
|
||||
const title:Ref<string> = ref('');
|
||||
const previewList:ComputedRef<SchemaItem[]> = computed(()=> {
|
||||
return schema.value.body || []
|
||||
})
|
||||
const parseYaml = () => {
|
||||
if (!yamlContent.value) {
|
||||
return;
|
||||
}
|
||||
schema.value = validateSchema(yamlContent.value as string) as ValidationsSchemaOutput;
|
||||
title.value = schema.value.title || '';
|
||||
const { labels = [], assignees = [] } = schema.value;
|
||||
if (labels || assignees) {
|
||||
emit('update-setting', { labels, assignees })
|
||||
}
|
||||
}
|
||||
const validateSchemaValue = ():boolean=> {
|
||||
let validate = true;
|
||||
previewList.value.forEach((item)=> {
|
||||
if (item.type === ComponentType.checkboxes) {
|
||||
const value = (item.attributes.value || '').split(splitStr);
|
||||
let isValid = 0;
|
||||
const values = item.attributes.options?.filter((option)=> typeof option !== 'string' && option.required)?.map((option)=> typeof option !== 'string' && option.label || '') || [];
|
||||
values.forEach((item:string) => {
|
||||
if (value.includes(item)) {
|
||||
isValid++;
|
||||
}
|
||||
})
|
||||
validate = isValid >= values.length;
|
||||
}
|
||||
if (item.validations && item.validations.required && (item.attributes.value || '').trim() === '') {
|
||||
validate = false;
|
||||
}
|
||||
})
|
||||
return validate;
|
||||
}
|
||||
const handleSubmit = ()=> {
|
||||
const isValid = validateSchemaValue();
|
||||
if (!isValid) {
|
||||
Message.error('请填写必填项');
|
||||
return;
|
||||
}
|
||||
if (!title.value) {
|
||||
Message.error('请填写问题标题');
|
||||
return
|
||||
}
|
||||
emit('update:loading', true);
|
||||
emit('success', { previewList: previewList.value, title: title.value })
|
||||
}
|
||||
const handleCancel = ()=> {
|
||||
emit('cancel')
|
||||
}
|
||||
watch(()=> previewList, ()=> {
|
||||
disabledSubmit.value = !validateSchemaValue();
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
watch( ()=> props.content, (newVal)=> {
|
||||
yamlContent.value = newVal;
|
||||
parseYaml();
|
||||
})
|
||||
const initProps = () => {
|
||||
yamlContent.value = props.content;
|
||||
}
|
||||
onMounted(()=> {
|
||||
initProps();
|
||||
parseYaml();
|
||||
})
|
||||
</script>
|
||||
58
src/components/renderer-yaml/mode/preview/index.vue
Normal file
58
src/components/renderer-yaml/mode/preview/index.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="renderer-yaml">
|
||||
<renderer-header :schema="schema" />
|
||||
<template v-for="item in previewList">
|
||||
<renderer-scene
|
||||
:type="item.type"
|
||||
:model-value="item.attributes.value"
|
||||
:renderer-item="item"
|
||||
:renderer="rendererType"
|
||||
:hide-required="false"
|
||||
>
|
||||
</renderer-scene>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineOptions, ref, watch, type Ref, onMounted, computed, type ComputedRef } from 'vue';
|
||||
import { RendererType, type DefaultValue, type RendererTypeName, type SchemaItem } from '../../types';
|
||||
import rendererScene from '../../components/renderer-scene/index.vue';
|
||||
import rendererHeader from '../../components/renderer-header/index.vue';
|
||||
import { validateSchema, type ValidationsSchemaOutput } from '../../helper';
|
||||
// component name
|
||||
defineOptions({ name: 'renderer-yaml' });
|
||||
// props
|
||||
const props = defineProps<{
|
||||
content: DefaultValue,
|
||||
}>();
|
||||
const emit = defineEmits(['error']);
|
||||
// data
|
||||
const yamlContent:Ref<DefaultValue> = ref('');
|
||||
const schema:Ref<ValidationsSchemaOutput|Record<string, any>> = ref({});
|
||||
const rendererType:Ref<RendererTypeName> = ref(RendererType.preview)
|
||||
const previewList:ComputedRef<SchemaItem[]> = computed(()=> {
|
||||
// console.log(schema.value.body)
|
||||
return schema.value.body || []
|
||||
})
|
||||
const parseYaml = () => {
|
||||
if (!yamlContent.value) {
|
||||
return;
|
||||
}
|
||||
schema.value = validateSchema(yamlContent.value) as ValidationsSchemaOutput;
|
||||
if (schema.value?.errors?.length > 0) {
|
||||
emit('error', schema.value.errors)
|
||||
}
|
||||
// console.log(schema.value)
|
||||
}
|
||||
watch( ()=> props.content, (newVal)=> {
|
||||
yamlContent.value = newVal;
|
||||
parseYaml();
|
||||
})
|
||||
const initProps = () => {
|
||||
yamlContent.value = props.content;
|
||||
}
|
||||
onMounted(()=> {
|
||||
initProps();
|
||||
parseYaml();
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user