empower_front/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 useSearchParam from "@/hooks/useSearchParam";
import AssetTableModalLeftInfoIoT from "./AssetTableModalLeftInfoIoT.vue";
import AssetTableModalLeftInfoGraph from "./AssetTableModalLeftInfoGraph.vue";
import AssetTableModalLeftInfoMQTT from "./AssetTableModalLeftInfoMQTT.vue";
import useUserInfoStore from "@/stores/useUserInfoStore";
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"
);
const { companyOptions, iotSchemaOptions, elecTypeOptions, departmentList } =
  inject("asset_modal_options");
const store = useUserInfoStore();
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),
  response_schema_id: yup
    .number()
    .transform((value) => (Number.isNaN(value) ? null : value))
    .nullable(true),
  department_id: yup
    .number()
    .transform((value) => (Number.isNaN(value) ? null : value))
    .nullable(true),
  topic: yup.string().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,
    response_schema_id: 0,
    department_id: 0,
    elec_type_id: null,
    asset_number: "",
    topic: "",
    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 = "";
  }
});

watch(
  () => iotSchemaOptions.value,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      formState.value.response_schema_id = newVal[0].id;
    }
  },
  { immediate: true }
);
</script>

<template>
  <!-- information -->
  <Input :value="formState" class="min-w-[180px] w-full" name="full_name">
    <template #topLeft>{{ $t("assetManagement.device_name") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.full_name }}
      </span></template
    ></Input
  >
  <div class="flex items-center w-full">
    <Select
      :value="formState"
      class="min-w-[180px] w-full"
      selectClass="border-info focus-within:border-info"
      name="department_id"
      Attribute="name"
      :options="departmentList"
    >
      <template #topLeft>{{ $t("assetManagement.department") }}</template>
    </Select>
  </div>
  <Input
    :value="formState"
    class="min-w-[180px] w-full"
    name="device_number"
    v-if="store.user.user_name == 'webUser'"
  >
    <template #topLeft
      >Tag_Name ({{ $t("assetManagement.fill_text") }})</template
    >
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.device_number }}
      </span></template
    ></Input
  >
  <div class="flex items-center w-full">
    <Select
      :value="formState"
      class="min-w-[180px] w-full"
      selectClass="border-info focus-within:border-info"
      name="response_schema_id"
      Attribute="name"
      :options="iotSchemaOptions"
      :required="true"
    >
      <template #topLeft>IoT</template>
    </Select>
  </div>
  <!-- <div class="flex items-center w-full" v-if="searchParams.mainSys_id == 26">
    <Select
      :value="formState"
      class="min-w-[180px] w-full"
      selectClass="border-info focus-within:border-info"
      name="elec_type_id"
      Attribute="name"
      :options="elecTypeOptions"
      :required="true"
    >
      <template #topLeft>{{
        $t("energy.electricity_classification")
      }}</template>
    </Select>
  </div> -->
  <Input :value="formState" class="min-w-[180px] w-full" 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"
    class="min-w-[180px] w-full"
    :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" class="min-w-[180px] w-full" name="brand">
    <template #topLeft>{{ $t("assetManagement.brand") }}</template>
    <template #bottomLeft
      ><span class="text-error text-base">
        {{ formErrorMsg.brand }}
      </span></template
    ></Input
  >
  <Input :value="formState" class="min-w-[180px] w-full" 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 w-full">
    <Select
      :value="formState"
      class="min-w-[180px] w-full"
      selectClass="border-info focus-within:border-info"
      name="operation_id"
      Attribute="name"
      :options="companyOptions"
      :required="true"
    >
      <template #topLeft>{{ $t("assetManagement.company") }}</template>
    </Select>
  </div>
  <AssetTableModalLeftInfoMQTT />
  <!-- <AssetTableModalLeftInfoGraph /> -->
  <!-- <AssetTableModalLeftInfoIoT /> -->
</template>

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