CviLux_fe/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue

<script setup>
import { ref, inject, onBeforeMount, onMounted, watch } from "vue";
import * as yup from "yup";
import "yup-phone-lite";
import AssetTableModalLeftInfoIoT from "./AssetTableModalLeftInfoIoT.vue";
import { getOperationCompanyList } from "@/apis/operation";
import useSearchParam from "@/hooks/useSearchParam";
import OperationTableModal from "@/views/operation/components/OperationTableModal.vue";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;

const { searchParams, changeParams } = useSearchParam();
const { updateLeftFields, formErrorMsg, formState } = inject(
  "asset_table_modal_form"
);

let schema = {
  full_name: yup.string().nullable(true),
  operate_text: yup.string().nullable(true),
  device_number: yup.string().nullable(true),
  device_coordinate: yup.string().nullable(true),
  brand: yup.string().nullable(true),
  device_model: yup.string().nullable(true),
  operation_id: yup
    .number()
    .transform((value) => (Number.isNaN(value) ? null : value))
    .nullable(true),
  asset_number: yup.string().nullable(true),
  sub_device: yup.array().nullable(true),
  oriFile: yup.array().nullable(true),
  buying_date: yup.string().nullable(true),
};
onBeforeMount(() => {
  const data = {
    full_name: "",
    device_number: "",
    device_coordinate: "",
    brand: "",
    device_model: "",
    operation_id: 0,
    asset_number: "",
    sub_device: [],
    oriFile: [],
    buying_date: "",
  };
  updateLeftFields(schema, data);
});

const buying_date = ref([
  {
    key: "buying_date",
    value: "",
    dateFormat: "yyyy-MM-dd",
    placeholder: t("assetManagement.buying_date"),
  },
]);

const updateBuyingDate = (date) => {
  formState.value = { ...formState.value, buying_date: date };
};

watch(
  buying_date,
  (newValue) => {
    updateBuyingDate(dayjs(newValue[0].value).format("YYYY-MM-DD"));
  },
  {
    deep: true,
  }
);

watch(formState, (newValue) => {
  if (newValue?.buying_date) {
    buying_date.value[0].value = newValue?.buying_date;
  } else {
    buying_date.value[0].value = "";
  }
});

const updateFileList = (files) => {
  formState.value = { ...formState.value, oriFile: files };
};

const companyOptions = ref([]);
const getCompany = async () => {
  const res = await getOperationCompanyList();
  companyOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};
onMounted(() => {
  getCompany();
});

const openCompanyAddModal = () => {
  changeParams({ ...searchParams.value, work_type: 3 }); // 開啟company Add modal
  operation_action_item.showModal();
};
</script>

<template>
  <!-- information -->
  <Input :value="formState" width="270" name="full_name">
    <template #topLeft>{{ $t("assetManagement.device_name") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.full_name }}
      </span></template
    ></Input
  >
  <Input :value="formState" width="270" name="operate_text">
    <template #topLeft>{{ $t("assetManagement.operate_text") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.operate_text }}
      </span></template
    ></Input
  >
  <Input :value="formState" width="270" name="device_number">
    <template #topLeft
      >Tag_Name ({{ $t("assetManagement.fill_text") }})</template
    >
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.device_number }}
      </span></template
    ></Input
  >
  <!-- <Input :value="formState" width="270" name="floor_guid">
    <template #topLeft>設備位置（樓層 / 區域）</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.floor_guid }}
      </span></template
    ></Input
  > -->
  <Input
    :value="formState"
    width="270"
    name="device_coordinate"
    :disabled="true"
  >
    <template #topLeft>{{ $t("assetManagement.device_coordinate") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.device_coordinate }}
      </span></template
    ></Input
  >
  <Input :value="formState" width="270" name="asset_number">
    <template #topLeft>{{ $t("assetManagement.asset_number") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.asset_number }}
      </span></template
    ></Input
  >
  <DateGroup :items="buying_date" width="270" :withLine="false">
    <template #topLeft>{{ $t("assetManagement.buying_date") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.buying_date }}
      </span></template
    >
  </DateGroup>
  <Input :value="formState" width="270" name="brand">
    <template #topLeft>{{ $t("assetManagement.brand") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.brand }}
      </span></template
    ></Input
  >
  <Input :value="formState" width="270" name="device_model">
    <template #topLeft>{{ $t("assetManagement.modal") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.device_model }}
      </span></template
    ></Input
  >
  <div class="flex items-center col-span-2">
    <Select
      :value="formState"
      selectClass="border-info focus-within:border-info"
      name="operation_id"
      Attribute="name"
      :options="companyOptions"
      :required="true"
    >
      <template #topLeft>{{ $t("assetManagement.company") }}</template>
    </Select>
    <OperationTableModal type="asset" />
    <button
      type="button"
      class="btn btn-success btn-sm ml-2 mt-7"
      @click="openCompanyAddModal"
    >
      {{ $t("button.add") }}
    </button>
  </div>
  <Upload
    name="oriFile"
    :fileList="formState.oriFile"
    :getFileList="updateFileList"
    :multiple="true"
    class="col-span-2"
    :baseUrl="FILE_BASEURL"
  >
    <template #topLeft>{{ $t("assetManagement.oriFile") }}</template>
  </Upload>
  <AssetTableModalLeftInfoIoT />
</template>

<style lang="scss" scoped></style>