generated from VLADIMIR/template_frontend
format
This commit is contained in:
+118
-105
@@ -1,163 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch } from 'naive-ui'
|
||||
import type { PropType } from 'vue';
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server';
|
||||
import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'
|
||||
|
||||
const props = defineProps({
|
||||
place: {
|
||||
type: Object as PropType<Place>,
|
||||
required: true
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
place: {
|
||||
type: Object as PropType<Place>,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits<{ 'update:mode': [value: string] }>()
|
||||
const updateMode = (mode: string) => {
|
||||
console.log(mode)
|
||||
emit('update:mode', mode)
|
||||
console.log(mode)
|
||||
emit('update:mode', mode)
|
||||
}
|
||||
|
||||
function onCreateApplication(): Application {
|
||||
return {
|
||||
name: undefined,
|
||||
image: undefined
|
||||
}
|
||||
return {
|
||||
name: undefined,
|
||||
image: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
function onCreateDoor(): Door {
|
||||
return {
|
||||
code: undefined,
|
||||
name: undefined,
|
||||
keys: undefined
|
||||
}
|
||||
return {
|
||||
code: undefined,
|
||||
name: undefined,
|
||||
keys: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
function onCreateKey(): Key {
|
||||
return {
|
||||
name: undefined
|
||||
}
|
||||
return {
|
||||
name: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 == '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" v-bind:key="application.name">{{ application.name }}</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" v-bind:key="application.name">
|
||||
{{ 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">
|
||||
<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="props.place.hidden" />
|
||||
<n-switch v-model:value="props.place.hidden" />
|
||||
|
||||
<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 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="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" placeholder="Название" />
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
</div>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
|
||||
<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="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-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="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>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
</n-space>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.place-block {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #444;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.place-block:hover {
|
||||
color: #63e2b7;
|
||||
color: #63e2b7;
|
||||
}
|
||||
|
||||
.place-block-plus {
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #444;
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.place-block-plus:hover {
|
||||
color: #63e2b7;
|
||||
color: #63e2b7;
|
||||
}
|
||||
|
||||
.place-image-plus {
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.show-editor-block {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user