CviLux_fe/src/views/accountManagement/components/Account.vue

<script setup>
import Table from "@/components/customUI/Table.vue";
import AccountModal from "./AccountModal.vue";
import {
  getAccountUserList,
  getAccountOneUser,
  delAccount,
} from "@/apis/account";
import { onMounted, ref, inject, computed } from "vue";
import AccountPasswordModal from "./AccountPasswordModal.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");

const columns = computed(() => [
  {
    title: t("accountManagement.index"),
    key: "index",
  },
  {
    title: t("accountManagement.name"),
    key: "full_name",
    filter: true,
  },
  {
    title: t("accountManagement.account"),
    key: "account",
  },
  {
    title: t("accountManagement.role"),
    key: "role_full_name",
  },
  {
    title: t("accountManagement.email"),
    key: "email",
  },
  {
    title: t("accountManagement.phone"),
    key: "phone",
  },
  {
    title: t("accountManagement.created_at"),
    key: "created_at",
  },
  {
    title: t("accountManagement.operation"),
    key: "operation",
  },
]);

const dataSource = ref([]);
const loading = ref(false);

const searchData = ref({
  Full_name: "",
  Role_full_name: "",
});

const getDataSource = async () => {
  loading.value = true;
  const res = await getAccountUserList(searchData.value);
  // 過濾掉 webUser
  dataSource.value = res.data.filter(
    (i) =>
      i.userinfo_guid !== "6ac24708-3a40-4199-88c5-22df310cd1a8" &&
      i.userinfo_guid !== "B43E3CA7-96DD-4FC7-B6E6-974ACC3B0878"
  );
  loading.value = false;
};

const onSearch = () => {
  getDataSource();
};
const onReset = () => {
  searchData.value = {
    Full_name: "",
    Role_full_name: "",
  };
  getDataSource();
};

onMounted(() => {
  getDataSource();
});

const formState = ref({
  Id: "",
  Account: "",
  Name: "",
  Email: "",
  Phone: "",
  RoleId: "",
  Password: "",
});

const openModal = (record) => {
  if (record) {
    formState.value = record;
  } else {
    resetModalForm();
  }
  account_user_modal.showModal();
};

const openChangeModal = ({ Id, Name }) => {
  formState.value = {
    Id,
    Name,
  };
  account_user_password_modal.showModal();
};

const getUser = async (id) => {
  const res = await getAccountOneUser(id);
  openModal(res.data);
};

const resetModalForm = () => {
  formState.value = {
    Id: "",
    Account: "",
    Name: "",
    Email: "",
    Phone: "",
    RoleId: "",
    Password: "",
  };
};

const removeAccount = async (id, notHeadquarters) => {
  const message = notHeadquarters ? t("msg.sure_to_delete") : t("msg.is_headquarters");
  openToast("warning", message, "body", async () => {
    await cancelToastOpen();
    const res = await delAccount(id);
    if (res.isSuccess) {
      getDataSource();
      openToast("success", t("msg.delete_success"));
    } else {
      openToast("error", res.msg);
    }
  });
};
</script>

<template>
  <AccountModal
    :formState="formState"
    :reset="resetModalForm"
    :getData="getDataSource"
  />
  <AccountPasswordModal :reset="resetModalForm" :account="formState" />
  <Table :columns="columns" :dataSource="dataSource" :loading="loading">
    <template #beforeTable>
      <div class="flex items-center mb-8">
        <Input
          :placeholder="t('accountManagement.name_placeholder')"
          name="Full_name"
          :value="searchData"
          class="mr-3 w-96"
        />
        <Input
          :placeholder="t('accountManagement.role_placeholder')"
          name="Role_full_name"
          :value="searchData"
        />
        <button class="btn btn-search ml-5" @click.stop.prevent="onSearch">
          <font-awesome-icon :icon="['fas', 'search']" />
          {{ $t("button.search") }}
        </button>
        <button class="btn btn-neutral mx-4" @click.stop.prevent="onReset">
          {{ $t("button.reset") }}
        </button>

        <button
          class="btn btn-add ml-10"
          @click.stop.prevent="() => openModal(null)"
        >
          <font-awesome-icon :icon="['fas', 'plus']" />
          {{ $t("button.add") }}
        </button>
      </div>
    </template>
    <template #bodyCell="{ record, column, index }">
      <template v-if="column.key === 'index'">{{ index + 1 }}</template>
      <template v-else-if="column.key === 'operation'">
        <button
          class="btn btn-sm btn-success text-white mr-2"
          @click.stop.prevent="() => getUser(record.userinfo_guid)"
        >
          {{ $t("button.edit") }}
        </button>
        <button
          class="btn btn-sm btn-info text-white mr-2"
          @click.stop.prevent="
            () =>
              openChangeModal({
                Id: record.userinfo_guid,
                Name: record.full_name,
              })
          "
        >
          {{ $t("accountManagement.change_password") }}
        </button>
        <button
          class="btn btn-sm btn-error text-white"
          @click.stop.prevent="() => removeAccount(record.userinfo_guid,record.canDeleted)"
        >
          {{ $t("button.delete") }}
        </button>
      </template>
      <template v-else>
        {{ record[column.key] }}
      </template>
    </template>
  </Table>
</template>

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