From ccbacf9262237199ab576dcea0270014e5124976 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Wed, 11 Dec 2024 18:10:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A8=AD=E5=82=99=E7=AE=A1=E7=90=86:=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=99=82system=5Fvalue=E3=80=81system=5Fparent=5Fid?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E4=BF=AE=E6=94=B9=20|=20=E9=81=8B=E7=B6=AD?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=20:=20=E7=B6=AD=E4=BF=AE=E9=A0=85=E7=9B=AE?=
 =?UTF-8?q?=E4=BB=A3=E7=A2=BC(=E8=A8=AD=E5=82=99=E7=B7=A8=E8=99=9F)?=
 =?UTF-8?q?=E8=A6=81=E8=83=BD=E6=90=9C=E5=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/customUI/SearchSelect.vue      | 130 ++++++++++++++++++
 .../components/AssetMainListAddModal.vue      |   2 +-
 .../components/AssetSubListAddModal.vue       |   4 +-
 .../components/OperationTableModal.vue        |  10 +-
 4 files changed, 139 insertions(+), 7 deletions(-)
 create mode 100644 src/components/customUI/SearchSelect.vue

diff --git a/src/components/customUI/SearchSelect.vue b/src/components/customUI/SearchSelect.vue
new file mode 100644
index 0000000..3eb191b
--- /dev/null
+++ b/src/components/customUI/SearchSelect.vue
@@ -0,0 +1,130 @@
+<script setup>
+import { defineProps, ref, computed, watch } from "vue";
+import { twMerge } from "tailwind-merge";
+/* --------------------------------------------------------------
+options: [
+  {
+    key: unique,
+    content: "",
+    selected: true / false,
+    disabled: true / false
+  }
+]
+---------------------------------------------------------------- */
+
+const props = defineProps({
+  options: Array,
+  name: String,
+  Attribute: String,
+  onChange: Function,
+  selectClass: String,
+  value: String || Number,
+  isTopLabelExist: {
+    type: Boolean,
+    default: true,
+  },
+  isBottomLabelExist: {
+    type: Boolean,
+    default: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  search: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const searchQuery = ref("");
+const isOpen = ref(false);
+const selectedOption = ref(null);
+
+const filteredOptions = computed(() => {
+  return props.options.filter((option) => {
+    const content = option[props.Attribute] || option.key || "";
+    return content.toLowerCase().includes(searchQuery.value.toLowerCase());
+  });
+});
+
+const selectOption = (value) => {
+  if (props.onChange) {
+    props.onChange(value);
+  } else {
+    props.value[props.name] = value.key;
+    selectedOption.value = props.options.find(
+      (option) => option.key === value.key
+    );
+  }
+  isOpen.value = false;
+};
+
+watch(
+  () => props.value[props.name],
+  (newKey) => {
+    isOpen.value = false;
+    selectedOption.value = props.options.find((option) => option.key == newKey);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <label class="form-control w-80 max-w-sm relative">
+    <div :class="twMerge(isTopLabelExist ? 'label' : '')">
+      <span class="label-text text-lg"><slot name="topLeft"></slot></span>
+      <span class="label-text-alt"> <slot name="topRight"></slot></span>
+    </div>
+
+    <div
+      :class="
+        twMerge(
+          'select  rounded-md text-lg cursor-pointer h-fit',
+          disabled ? 'text-gray-300' : 'bg-transparent border-info'
+        )
+      "
+      @click="disabled ? () => {} : (isOpen = !isOpen)"
+    >
+      {{ selectedOption ? selectedOption[Attribute] : "" }}
+    </div>
+
+    <div
+      v-if="isOpen"
+      class="absolute z-10 bg-gray-800 border border-info rounded-md w-full p-2"
+    >
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Search..."
+        class="input input-bordered border-info rounded-md w-full mb-2 px-2"
+      />
+
+      <ul class="max-h-60 overflow-auto">
+        <li
+          v-for="option in filteredOptions"
+          :key="option.key || option"
+          @click="selectOption(option)"
+          class="px-4 py-2 hover:bg-gray-600 cursor-pointer"
+        >
+          {{ option[Attribute] || option }}
+        </li>
+      </ul>
+    </div>
+
+    <div :class="twMerge(isBottomLabelExist ? 'label' : '')">
+      <span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
+      <span class="label-text-alt"> <slot name="bottomRight"></slot></span>
+    </div>
+  </label>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/AssetManagement/components/AssetMainListAddModal.vue b/src/views/AssetManagement/components/AssetMainListAddModal.vue
index e853586..8a71b04 100644
--- a/src/views/AssetManagement/components/AssetMainListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetMainListAddModal.vue
@@ -71,7 +71,7 @@ const onReset = () => {
             </span></template
           >
         </Input>
-        <Input name="system_value" :value="formState">
+        <Input name="system_value" :value="formState" :readonly="props.formState?.id">
           <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
           <template #bottomLeft
             ><span class="text-error text-base">
diff --git a/src/views/AssetManagement/components/AssetSubListAddModal.vue b/src/views/AssetManagement/components/AssetSubListAddModal.vue
index 7cf4ef4..de8be04 100644
--- a/src/views/AssetManagement/components/AssetSubListAddModal.vue
+++ b/src/views/AssetManagement/components/AssetSubListAddModal.vue
@@ -61,7 +61,6 @@ watch(
 const onOk = async () => {
   // 編輯
   const value = await handleSubmit(subSysSchema, formState.value);
-
   const res = await postAssetSubList({
     ...formState.value,
     id: props.editRecord ? props.editRecord.id : 0,
@@ -95,7 +94,7 @@ const onOk = async () => {
             </span></template
           >
         </Input>
-        <Input name="system_value" :value="formState">
+        <Input name="system_value" :value="formState" :readonly="props.editRecord?.id">
           <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
           <template #bottomLeft
             ><span class="text-error text-base">
@@ -110,6 +109,7 @@ const onOk = async () => {
           name="system_parent_id"
           :value="formState"
           selectClass="border-info  focus-within:border-info"
+          :disabled="props.editRecord?.id"
         >
           <template #topLeft>{{
             $t("assetManagement.system_parent")
diff --git a/src/views/operation/components/OperationTableModal.vue b/src/views/operation/components/OperationTableModal.vue
index 636c483..6129bc1 100644
--- a/src/views/operation/components/OperationTableModal.vue
+++ b/src/views/operation/components/OperationTableModal.vue
@@ -11,6 +11,7 @@ import * as yup from "yup";
 import "yup-phone-lite";
 import useFormErrorMessage from "@/hooks/useFormErrorMessage";
 import Select from "@/components/customUI/Select.vue";
+import SearchSelect from "@/components/customUI/SearchSelect.vue";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
@@ -151,8 +152,9 @@ const saveMaintain = async () => {
     dayjs(dateItem2.value[0].value).format("YYYY-MM-DD")
   );
   props.editRecord.id && formData.append("id", props.editRecord.id);
-  props.editRecord.id &&
-    formData.append("fix_do_code", props.editRecord.fix_do_code);
+  props.editRecord.id
+    ? formData.append("fix_do_code", props.editRecord.fix_do_code)
+    : formData.append("fix_do_code", formState.value[searchParams.value.work_type - 1]?.fix_do_code);
 
   const value = await handleMaintainSubmit(
     maintainSchema,
@@ -326,7 +328,7 @@ watch(
               </span></template
             >
           </Input>
-          <Select
+          <SearchSelect
             v-if="
               searchParams?.work_type &&
               Object.hasOwn(
@@ -348,7 +350,7 @@ watch(
                 {{ maintainFormErrorMsg.fix_do_code }}
               </span></template
             >
-          </Select>
+          </SearchSelect>
           <Select
             v-if="
               searchParams?.work_type &&