109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<script setup>
|
|
import { ref, onMounted, defineProps, inject, watch } from "vue";
|
|
import * as yup from "yup";
|
|
import "yup-phone-lite";
|
|
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
|
|
import { postAssetFloor } from "@/apis/asset";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
|
const { openToast } = inject("app_toast");
|
|
|
|
const props = defineProps({
|
|
formState: Object,
|
|
getData: Function,
|
|
openModal: Function,
|
|
});
|
|
const form = ref(null);
|
|
|
|
const floorScheme = yup.object({
|
|
full_name: yup.string().required(t("button.required")),
|
|
floorFile: yup.array(),
|
|
});
|
|
|
|
const updateFileList = (files) => {
|
|
console.log("file", files);
|
|
FloorFormState.value.floorFile = files;
|
|
};
|
|
|
|
const { formErrorMsg, handleSubmit, handleErrorReset, updateScheme } =
|
|
useFormErrorMessage(floorScheme);
|
|
|
|
const onCancel = () => {
|
|
handleErrorReset();
|
|
floor_modal.close();
|
|
};
|
|
|
|
const onOk = async () => {
|
|
const value = await handleSubmit(floorScheme, props.formState);
|
|
const formData = new FormData(form.value);
|
|
formData.append(
|
|
"floor_guid",
|
|
selectedOption.value === "add" ? null : currentFloor.value.floor_guid
|
|
);
|
|
formData.append("building_tag", store.selectedBuilding.building_tag);
|
|
formData.append("initMapName", FloorFormState.value.floorFile[0]?.name);
|
|
formData.append("mapFile", FloorFormState.value.floorFile[0]);
|
|
formData.delete("floorFile");
|
|
const res = await postAssetFloor(formData);
|
|
if (res.isSuccess) {
|
|
props.getData();
|
|
onCancel();
|
|
} else {
|
|
openToast("error", res.msg, "#floor_modal");
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<button class="btn btn-sm btn-add" @click.stop.prevent="props.openModal">
|
|
<font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
|
|
</button>
|
|
<Modal
|
|
id="floor_modal"
|
|
:title="props.formState?.floor_guid ? t('button.edit') : t('button.add')"
|
|
:onCancel="onCancel"
|
|
width="400"
|
|
>
|
|
<template #modalContent>
|
|
<form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
|
|
<Input :value="formState" class="my-2" name="full_name">
|
|
<template #topLeft>{{ $t("assetManagement.system_name") }}</template>
|
|
<template #bottomLeft
|
|
><span class="text-error text-base">
|
|
{{ formErrorMsg.name }}
|
|
</span></template
|
|
></Input
|
|
>
|
|
<Upload
|
|
name="floorFile"
|
|
:fileList="formState.floorFile"
|
|
:getFileList="updateFileList"
|
|
:multiple="false"
|
|
class="col-span-2"
|
|
formats="svg"
|
|
>
|
|
<template #topLeft>{{ $t("assetManagement.oriFile") }}</template>
|
|
</Upload>
|
|
</form>
|
|
</template>
|
|
<template #modalAction>
|
|
<button
|
|
type="reset"
|
|
class="btn btn-outline-success mr-2"
|
|
@click.prevent="onCancel"
|
|
>
|
|
{{ $t("button.cancel") }}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-outline-success"
|
|
@click.stop.prevent="onOk"
|
|
>
|
|
{{ $t("button.submit") }}
|
|
</button>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|