first
This commit is contained in:
@@ -0,0 +1,298 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<template>
|
||||
<div class="divide-y divide-gray-200">
|
||||
<form class="lg:col-span-9" @submit.prevent="doUpdate">
|
||||
<!-- Profile section -->
|
||||
<div class="py-6 px-4 sm:p-6 lg:pb-8">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
가입 허가 항목 수정
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
이미 가입된 사용자에게는 적용되지 않으며, 이 항목이
|
||||
저장된 상태에서 가입시에만 적용됩니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid grid-cols-12 gap-6">
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<label
|
||||
for="uid"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>이메일</label
|
||||
>
|
||||
<input
|
||||
id="uid"
|
||||
v-model="uid"
|
||||
disabled
|
||||
type="text"
|
||||
name="uid"
|
||||
autocomplete="uid"
|
||||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 sm:col-span-6">
|
||||
<label
|
||||
for="uid"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>생성일</label
|
||||
>
|
||||
<input
|
||||
id="created"
|
||||
v-model="created"
|
||||
disabled
|
||||
type="text"
|
||||
name="created"
|
||||
autocomplete="created"
|
||||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-col lg:flex-row">
|
||||
<div class="flex-grow space-y-6">
|
||||
<div>
|
||||
<label
|
||||
for="memo"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
운영자 메모
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<textarea
|
||||
id="memo"
|
||||
v-model="memo"
|
||||
name="memo"
|
||||
rows="3"
|
||||
class="shadow-sm focus:ring-sky-500 focus:border-sky-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
관리자에게만 보여지는 메모 항목 입니다. 관리
|
||||
편의를 위한 내용을 기입해 주세요.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-col lg:flex-row">
|
||||
<div class="flex-grow space-y-6">
|
||||
<div>
|
||||
<label
|
||||
for="level"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
자격 설정
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<RadioGroup v-model="selectedUserLevelInfo">
|
||||
<div
|
||||
class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-4 sm:gap-x-4"
|
||||
>
|
||||
<RadioGroupOption
|
||||
v-for="userLevel in userLevels"
|
||||
:key="userLevel.level"
|
||||
v-slot="{ checked, active }"
|
||||
as="template"
|
||||
:value="userLevel"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
checked
|
||||
? 'border-transparent'
|
||||
: 'border-gray-300',
|
||||
active
|
||||
? 'border-indigo-500 ring-2 ring-indigo-500'
|
||||
: '',
|
||||
'relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none',
|
||||
]"
|
||||
>
|
||||
<span class="flex-1 flex">
|
||||
<span class="flex flex-col">
|
||||
<RadioGroupLabel
|
||||
as="span"
|
||||
class="block text-sm font-medium text-gray-900"
|
||||
>
|
||||
{{
|
||||
userLevel.title
|
||||
}}
|
||||
</RadioGroupLabel>
|
||||
<RadioGroupDescription
|
||||
as="span"
|
||||
class="mt-1 flex items-center text-sm text-gray-500"
|
||||
>
|
||||
{{
|
||||
userLevel.description
|
||||
}}
|
||||
</RadioGroupDescription>
|
||||
<RadioGroupDescription
|
||||
as="span"
|
||||
class="mt-6 text-sm font-medium text-gray-900"
|
||||
>
|
||||
{{
|
||||
userLevel.users
|
||||
}}
|
||||
</RadioGroupDescription>
|
||||
</span>
|
||||
</span>
|
||||
<CheckCircleIcon
|
||||
:class="[
|
||||
!checked
|
||||
? 'invisible'
|
||||
: '',
|
||||
'h-5 w-5 text-indigo-600',
|
||||
]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
:class="[
|
||||
active
|
||||
? 'border'
|
||||
: 'border-2',
|
||||
checked
|
||||
? 'border-indigo-500'
|
||||
: 'border-transparent',
|
||||
'absolute -inset-px rounded-lg pointer-events-none',
|
||||
]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</RadioGroupOption>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
해당 계정이 가입하면 자동으로 보여될 사용자
|
||||
자격을 설정합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy section -->
|
||||
<div class="pt-0">
|
||||
<div class="mt-4 py-4 px-4 flex justify-end sm:px-6">
|
||||
<button
|
||||
type="button"
|
||||
class="bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
|
||||
@click="doCancel"
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="ml-5 bg-red-700 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
||||
@click="doToggle"
|
||||
>
|
||||
{{ status == 0 ? '삭제' : '복구' }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="ml-5 bg-sky-700 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
|
||||
>
|
||||
저장
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
RadioGroup,
|
||||
RadioGroupDescription,
|
||||
RadioGroupLabel,
|
||||
RadioGroupOption,
|
||||
} from '@headlessui/vue';
|
||||
import { CheckCircleIcon } from '@heroicons/vue/24/solid/index.js';
|
||||
import { stat } from 'fs/promises';
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'check-auth-admin',
|
||||
});
|
||||
|
||||
const userLevels = _crossCtl.siteConfig.userLevels;
|
||||
|
||||
const selectedUserLevelInfo = ref(_crossCtl.siteConfig.userLevels[0]);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const serial = ref(0);
|
||||
const uid = ref('');
|
||||
const level = ref(0);
|
||||
const memo = ref('');
|
||||
const status = ref(0);
|
||||
const created = ref('');
|
||||
|
||||
// email: '1@1', displayName: '1@1', phone: '', memo: ''
|
||||
|
||||
let userInfo = {};
|
||||
|
||||
function doToggle() {
|
||||
status.value = status.value == 0 ? 4 : 0;
|
||||
doUpdate();
|
||||
}
|
||||
|
||||
async function doUpdate() {
|
||||
const responseJson = await _crossCtl.doComm('update', 'admin:white', {
|
||||
hero: serial.value,
|
||||
uid: uid.value,
|
||||
level: selectedUserLevelInfo.value['level'],
|
||||
memo: memo.value,
|
||||
status: status.value,
|
||||
});
|
||||
console.log('responseJson=', responseJson);
|
||||
if (responseJson['responseMessage'] == 'ok') {
|
||||
alert('ok');
|
||||
} else {
|
||||
alert(responseJson['responseMessage']);
|
||||
}
|
||||
}
|
||||
|
||||
async function doCancel() {
|
||||
router.back();
|
||||
}
|
||||
|
||||
const hero = route.params.hero as string;
|
||||
|
||||
console.log('hero=', hero);
|
||||
|
||||
const responseJson = await _crossCtl.doComm('select', 'admin:white', {
|
||||
hero: hero,
|
||||
});
|
||||
console.log('responseJson=', responseJson);
|
||||
|
||||
const { $customFormat } = useNuxtApp();
|
||||
|
||||
if (responseJson['responseMessage'] == 'ok') {
|
||||
userInfo = responseJson['data'][0];
|
||||
|
||||
serial.value = userInfo['serial'];
|
||||
|
||||
uid.value = userInfo['uid'];
|
||||
level.value = userInfo['level'];
|
||||
memo.value = userInfo['memo'];
|
||||
status.value = userInfo['status'];
|
||||
created.value = $customFormat(userInfo['created']);
|
||||
|
||||
for (let i = 0; i < _crossCtl.siteConfig.userLevels.length; i++) {
|
||||
const tmpLevelInfo = _crossCtl.siteConfig.userLevels[i];
|
||||
if (tmpLevelInfo.level == level.value) {
|
||||
selectedUserLevelInfo.value = tmpLevelInfo;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('selectedUserLevelInfo.value=', selectedUserLevelInfo.value);
|
||||
} else {
|
||||
alert(responseJson['responseMessage']);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user