245 lines
12 KiB
Vue
245 lines
12 KiB
Vue
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<template>
|
|
<div class="divide-y divide-gray-200">
|
|
<form class="lg:col-span-9" @submit.prevent="doInsert">
|
|
<!-- 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"
|
|
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>
|
|
|
|
<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="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';
|
|
|
|
definePageMeta({
|
|
middleware: 'check-auth-admin',
|
|
});
|
|
|
|
const userLevels = _crossCtl.siteConfig.userLevels;
|
|
|
|
const selectedUserLevelInfo = ref(_crossCtl.siteConfig.userLevels[0]);
|
|
const router = useRouter();
|
|
|
|
const uid = ref('');
|
|
const level = ref(3);
|
|
const memo = ref('');
|
|
|
|
// email: '1@1', displayName: '1@1', phone: '', memo: ''
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
async function doInsert() {
|
|
const tmpUID = uid.value;
|
|
|
|
console.log('tmpUID = ', tmpUID);
|
|
|
|
if (tmpUID.trim() == '') {
|
|
alert('이메일 주소를 아이디로 입력해 주세요.');
|
|
return;
|
|
}
|
|
|
|
const responseJson = await _crossCtl.doComm('insert', 'admin:white', {
|
|
uid: uid.value,
|
|
level: selectedUserLevelInfo.value['level'],
|
|
memo: memo.value,
|
|
});
|
|
console.log('responseJson=', responseJson);
|
|
if (responseJson['responseMessage'] == 'ok') {
|
|
alert('ok');
|
|
router.back();
|
|
} else {
|
|
if (responseJson['responseMessage'].startsWith('ER_DUP_ENTRY:')) {
|
|
alert('이미 동일 아이디가 설정되어 있습니다.');
|
|
} else {
|
|
alert(responseJson['responseMessage']);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function doCancel() {
|
|
router.back();
|
|
}
|
|
</script>
|