init dev-push code ui base design

2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions
--- a/components/common/checkbox/CheckBoxLabelChange.vue
+++ b/components/common/checkbox/CheckBoxLabelChange.vue
@ -0,0 +1,146 @@
+<template>
+  <v-row class="search-box" align="center" no-gutters>
+    <v-col v-if="location == 'front'" :cols="labelCols">
+      <label for="" class="search-box-label">
+        <v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
+          >mdi-record-circle</v-icon
+        >
+        {{ label }}
+      </label>
+    </v-col>
+    <v-col :cols="textCols" @click="modifyValue">
+      <v-checkbox
+        v-model="chkValue"
+        :disabled="disabledFlag"
+        :readonly="readonly || false"
+        :required="required || false"
+        :false-value="false"
+        @change="modifyValue"
+        :class="isDarkMode ? 'checkbox-dark' : 'checkbox-light'"
+      ></v-checkbox>
+    </v-col>
+    <v-col
+      style="margin-left: 5px; margin-top: 5px"
+      v-if="location == 'rear'"
+      :cols="labelCols"
+    >
+      <label for="" class="search-box-label">
+        <v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
+          >mdi-record-circle</v-icon
+        >
+        {{ label }}
+      </label>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+export default {
+  props: {
+    parentPrgmId: {
+      type: String,
+      require: true,
+    },
+    label: {
+      type: String,
+      require: false,
+    },
+    isDarkMode: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    valueNm: {
+      type: String,
+      require: true,
+    },
+    labelCols: {
+      type: Number,
+      require: false,
+      default: 4,
+    },
+    textCols: {
+      type: Number,
+      require: false,
+      default: 7,
+    },
+    icon: {
+      type: Boolean,
+      require: false,
+      default: true,
+    },
+    location: {
+      type: String,
+      require: false,
+      default: "front",
+    },
+    disabledCheckOption: {
+      type: String,
+      require: false,
+    },
+  },
+  data() {
+    return {
+      chkValue: false,
+      testData: false,
+      disabledFlag: false,
+    };
+  },
+
+  computed: {
+    ...mapState({
+      searchParam: (state) => state.pageData,
+      myBindingData(state) {
+        return state.pageData[this.parentPrgmId][this.valueNm];
+      },
+      bindingDisabledCheckOption(state) {
+        if (state.pageData[this.parentPrgmId][this.disabledCheckOption] != undefined) {
+          return state.pageData[this.parentPrgmId][this.disabledCheckOption];
+        }
+      },
+    }),
+  },
+  watch: {
+    myBindingData: {
+      deep: true,
+      handler(val) {
+        this.chkValue = val;
+      },
+    },
+    bindingDisabledCheckOption(val) {
+      this.disabledFlag = val;
+    },
+  },
+  created() {
+    this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
+    if (this.searchParam[this.parentPrgmId][this.disabledCheckOption] != undefined) {
+      this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption];
+    }
+  },
+  methods: {
+    ...mapMutations({ setPageData: "setPageData" }),
+    modifyValue(e) {
+      if (this.disabledFlag == true && e.target != undefined) {
+        alert("기간이 한 시간 이내일 경우만 선택할 수 있습니다.");
+      } else {
+        if (e.target == undefined) {
+          return this.setPageData({ [this.valueNm]: e });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style></style>