054 - 설정입력 폼 작성

src/views/admin/Config.vue

@@ -14,23 +14,26 @@
       max-width="500"
       dark
       color="primary"
+			persistent
     >
-			<v-btn @click="save">닫기</v-btn>
+			<config-form @save="save" />
     </ez-dialog>
   </v-container>
 </template>
 
 <script>
 import EzDialog from "../../components/etc/EzDialog.vue";
 import TooltipBtn from "../../components/etc/TooltipBtn.vue";
+import ConfigForm from './ConfigComponent/ConfigForm.vue';
 export default {
-  components: { TooltipBtn, EzDialog },
+  components: { TooltipBtn, EzDialog, ConfigForm },
   name: "AdmConfig",
   methods: {
     addConfig() {
       this.$refs.dialog.open();
     },
-		save() {
+		async save(form) {
+			console.log(form);
 			this.$refs.dialog.close();
 		}
   },

src/views/admin/ConfigComponent/ConfigForm.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-form @submit.prevent="save" ref="form" v-model="valid" lazy-validation>
+    <v-combobox
+      v-model="form.cf_group"
+      :items="groupItems"
+      label="그룹"
+      :rules="[rules.require({ label: '그룹' })]"
+    ></v-combobox>
+    <div class="d-flex">
+      <v-tooltip top>
+        <template v-slot:activator="{ on, attrs }">
+          <span v-on="on" v-bind="attrs" class="mr-2">
+            <v-checkbox 
+							v-model="form.cf_client"
+							true-value="1"
+							false-value="0"
+						></v-checkbox>
+          </span>
+        </template>
+        <span>클라이언트</span>
+      </v-tooltip>
+      <input-duplicate-check
+        ref="cfKey"
+        label="키"
+        v-model="form.cf_key"
+        :cbCheck="keyCheck"
+        :rules="[rules.require({ label: '키' }), rules.alphaNum()]"
+      />
+    </div>
+    <v-text-field label="이름" v-model="form.cf_name" :rules="rules.name()" />
+    <v-select label="값 타입" v-model="form.cf_type" :items="typeItems" />
+		<type-value v-model="form.cf_val" :fieldType="form.cf_type"/>
+    <v-slider
+      :label="`접근레벨 (${form.cf_level})`"
+      v-model="form.cf_level"
+      :min="LV.ADMIN"
+      :max="LV.SUPER"
+			thumb-color="primary"
+			thumb-label
+    />
+		<v-text-field label="설명" v-model="form.cf_comment"/>
+		<v-btn type="submit" block>저장</v-btn>
+  </v-form>
+</template>
+
+<script>
+import validateRules from "../../../../util/validateRules";
+import InputDuplicateCheck from "../../../components/InputForms/InputDuplicateCheck.vue";
+import { LV } from "../../../../util/level";
+import TypeValue from './TypeValue.vue';
+export default {
+  components: { InputDuplicateCheck, TypeValue },
+  name: "ConfigForm",
+  props: {
+    keyCheck: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      valid: true,
+      form: {
+        cf_key: "",
+        cf_val: "",
+        cf_name: "",
+        cf_group: "",
+        cf_level: "",
+        cf_type: "String",
+        cf_comment: "",
+        cf_client: 0,
+      },
+      groupItems: [],
+      typeItems: ["String", "Number", "Json", "Secret"],
+    };
+  },
+  computed: {
+    rules: () => validateRules,
+		LV : () => LV
+  },
+  methods: {
+    async save() {
+			this.$refs.form.validate();
+			await this.$nextTick();
+			if(!this.valid) return;
+			if(!this.$refs.cfKey.validate()) return;
+			this.$emit('save', this.form);
+		},
+  },
+};
+</script>
+
+<style>
+</style>

src/views/admin/ConfigComponent/TypeValue.vue

@@ -0,0 +1,47 @@
+<template>
+	<div v-if="fieldType == 'String'">
+		<v-text-field label="Value" :value="value" @input="onInput" />
+	</div>
+	<div v-else-if="fieldType == 'Number'">
+		<v-text-field label="Value" type="number" :value="value" @input="onInput" />
+	</div>
+	<div v-else-if="fieldType == 'Json'">
+		<v-textarea label="Value" :value="value" @input="onInput"/>
+	</div>
+	<div v-else-if="fieldType == 'Secret'">
+		<input-password label="Sercet Value" :value="value" @input="onInput" />
+	</div>
+	<div v-else>
+		<div>선택한 타입 입력필드가 없습니다.</div>
+	</div>
+</template>
+
+<script>
+import InputPassword from '../../../components/InputForms/InputPassword.vue';
+export default {
+  components: { InputPassword },
+	name : 'TypeValue',
+	model : {
+		prop : 'value',
+		event : 'input'
+	},
+	props : {
+		value : {
+			type : String,
+		},
+		fieldType : {
+			type : String,
+			default : 'String'
+		}
+	},
+	methods : {
+		onInput(val) {
+			this.$emit('input', val);
+		}
+	}
+}
+</script>
+
+<style>
+
+</style>

util/validateRules.js

@@ -6,7 +6,7 @@ const rules = {
 		return v => !!v ? v.length >= len || `[${label}] ${len}자 이상 입력하세요.` : true;
 	},
 	alphaNum() {
-		return v => !!v ? /^[a-zA-Z0-9]+$/.test(v) || `영어와 숫자만 입력하세요.` : true; 
+		return v => !!v ? /^[a-zA-Z0-9_]+$/.test(v) || `영어와 숫자만 입력하세요.` : true; 
 	},
 	pattern({label, pattern}) {
 		return v => !!v ? pattern.test(v) || `[${label}] 형식에 맞게 입력하세요.` : true;