設備管理:修改時system_value、system_parent_id不能修改 | 運維管理 : 維修項目代碼(設備編號)要能搜尋
This commit is contained in:
parent
da8eb0d539
commit
ccbacf9262
130
src/components/customUI/SearchSelect.vue
Normal file
130
src/components/customUI/SearchSelect.vue
Normal file
@ -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>
|
||||
@ -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">
|
||||
|
||||
@ -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")
|
||||
|
||||
@ -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 &&
|
||||
|
||||
Loading…
Reference in New Issue
Block a user