generated from VLADIMIR/template_frontend
update editor
This commit is contained in:
+101
-58
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { Application, Door, Key, Place, Scenario } from '@/api/generated/crabs/evening_detective_server';
|
||||
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput } from 'naive-ui'
|
||||
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput, NInputGroup } from 'naive-ui'
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -15,6 +15,12 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{ 'update:mode': [value: String] }>()
|
||||
const updateMode = (mode: string) => {
|
||||
console.log(mode)
|
||||
emit('update:mode', mode)
|
||||
}
|
||||
|
||||
function onCreateApplication(): Application {
|
||||
return {
|
||||
name: undefined,
|
||||
@@ -39,81 +45,118 @@ function onCreateKey(): Key {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="place-block">
|
||||
<div v-if="mode == 'show'">
|
||||
<p>{{ place.code }}</p>
|
||||
<p>{{ place.name }}</p>
|
||||
<p>{{ place.text }}</p>
|
||||
</div>
|
||||
<div v-if="mode == 'edit'">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="place.code" type="text" placeholder='Ы-1' />
|
||||
<n-input v-model:value="place.name" type="text" placeholder='Дом №Ы' />
|
||||
<n-input v-model:value="place.text" type="textarea" placeholder='В начале было слово...' />
|
||||
<!-- <n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList">
|
||||
<div v-if="mode == 'mini-add'" class="place-block-plus show-editor-block" @click="updateMode('edit')">
|
||||
<p class="place-image-plus">+</p>
|
||||
</div>
|
||||
|
||||
<div v-if="mode == 'show-editor'" class="place-block show-editor-block" @click="updateMode('edit')">
|
||||
<p>[{{ props.place.code }}] - {{ props.place.name }}</p>
|
||||
<div class="message-content">{{ props.place.text }}</div>
|
||||
<p v-for="application in props.place.applications">{{ application.name }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="mode == 'edit'" class="place-block">
|
||||
<n-space vertical>
|
||||
<n-input-group>
|
||||
<n-input :style="{ width: '20%' }" v-model:value="props.place.code" type="text" placeholder='Ы-1' />
|
||||
<n-input :style="{ width: '80%' }" v-model:value="props.place.name" type="text" placeholder='Дом №Ы' />
|
||||
</n-input-group>
|
||||
<n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }"
|
||||
placeholder='В начале было слово...' />
|
||||
<!-- <n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList">
|
||||
<n-upload-dragger>
|
||||
<n-text style="font-size: 16px">
|
||||
Щелкните или перетащите файл в эту область для загрузки
|
||||
</n-text>
|
||||
</n-upload-dragger>
|
||||
</n-upload> -->
|
||||
<n-switch v-model:value="place.hidden" />
|
||||
<n-switch v-model:value="props.place.hidden" />
|
||||
|
||||
<n-dynamic-input v-model:value="place.applications" :on-create="onCreateApplication">
|
||||
<template #create-button-default>
|
||||
Добавить улику
|
||||
</template>
|
||||
<template #default="{ value }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="value.name" type="text" />
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
<n-dynamic-input v-model:value="props.place.applications" :on-create="onCreateApplication">
|
||||
<template #create-button-default>
|
||||
Добавить улику
|
||||
</template>
|
||||
<template #default="{ value }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="value.name" type="text" />
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
|
||||
<n-dynamic-input v-model:value="place.doors" :on-create="onCreateDoor">
|
||||
<template #create-button-default>
|
||||
Добавить действие
|
||||
</template>
|
||||
<template #default="{ value: door }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="door.code" type="text" />
|
||||
<n-input v-model:value="door.name" type="text" />
|
||||
<n-dynamic-input v-model:value="props.place.doors" :on-create="onCreateDoor">
|
||||
<template #create-button-default>
|
||||
Добавить действие
|
||||
</template>
|
||||
<template #default="{ value: door }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="door.code" type="text" placeholder="Код" />
|
||||
<n-input v-model:value="door.name" type="text" placeholder="Название" />
|
||||
|
||||
<n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
|
||||
<template #create-button-default>
|
||||
Добавить ключ
|
||||
</template>
|
||||
<template #default="{ value: key }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="key.name" type="text" />
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
<n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
|
||||
<template #create-button-default>
|
||||
Добавить ключ
|
||||
</template>
|
||||
<template #default="{ value: key }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="key.name" type="text" placeholder="Название" />
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
|
||||
<n-dynamic-input v-model:value="place.keys" :on-create="onCreateKey">
|
||||
<template #create-button-default>
|
||||
Добавить ключ
|
||||
</template>
|
||||
<template #default="{ value: key }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="key.name" type="text" />
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
<n-dynamic-input v-model:value="props.place.keys" :on-create="onCreateKey">
|
||||
<template #create-button-default>
|
||||
Добавить ключ
|
||||
</template>
|
||||
<template #default="{ value: key }">
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<n-input v-model:value="key.name" type="text" placeholder="Название" />
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
|
||||
</n-space>
|
||||
</div>
|
||||
<slot></slot>
|
||||
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.place-block {
|
||||
margin: 20px 0;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #444444;
|
||||
}
|
||||
|
||||
.place-block:hover {
|
||||
color: #63e2b7;
|
||||
}
|
||||
|
||||
.place-block-plus {
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #444444;
|
||||
}
|
||||
|
||||
.place-block-plus:hover {
|
||||
color: #63e2b7;
|
||||
}
|
||||
|
||||
.place-image-plus {
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.show-editor-block {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user