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

<script setup>
import Modal from "@/components/customUI/Modal.vue";
import Table from "@/components/customUI/Table.vue";
import Input from "@/components/customUI/Input.vue";
import Checkbox from "@/components/customUI/Checkbox.vue";
import {
  getAccountRoleAuthPageList,
  getAccountRoleAuthList,
  postAccountRole,
} from "@/apis/account";
import { defineProps, onMounted, ref, watch } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";

const props = defineProps({
  selectedRole: String,
  cancelModal: Function,
  disabled: Boolean,
  update: Function,
});

const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();

const columns = [
  {
    title: "選擇",
    key: "SaveCheckAuth",
  },
  {
    title: "編號",
    key: "index",
  },
  {
    title: "權限名稱",
    key: "subName",
  },
];

const rawData = ref([]);
const dataSource = ref([]);

const getAllAuth = async () => {
  const res = await getAccountRoleAuthPageList();
  rawData.value = res.data;
  dataSource.value = res.data;
};

watch([rawData, selectedBtn], ([newData, newSelectedBtn]) => {
  dataSource.value = newData.filter(({ authCode }) =>
    authCode.startsWith(newSelectedBtn.authCode)
  );
});

// 角色所有權限
const loading = ref(false);
const SaveCheckAuth = ref([]);

watch(SaveCheckAuth, (newValue, oldValue) => {
  if (newValue.includes("PF10") && !oldValue.includes("PF10")) {
    setItems([
      {
        title: "基礎權限",
        key: "PF",
        active: selectedBtn.value.authCode === "PF",
        authCode: "PF",
      },
      {
        title: "生產設定權限",
        key: "PS",
        active: selectedBtn.value.authCode === "PS",
        authCode: "PS",
      },
    ]);
  } else if (!newValue.includes("PF10") && oldValue.includes("PF10")) {
    console.log(newValue.filter((authCode) => authCode.startsWith("PS")));
    SaveCheckAuth.value = newValue.filter(
      (authCode) => !authCode.startsWith("PS")
    );
    setItems([
      {
        title: "基礎權限",
        key: "PF",
        active: true,
        authCode: "PF",
      },
    ]);
  }
});

const getRoleAuth = async (id) => {
  const res = await getAccountRoleAuthList(id);

  SaveCheckAuth.value = res.data
    // .filter(({ authCode }) => authCode.startsWith("PF"))
    .map(({ authCode }) => authCode);
  role_auth_modal.showModal();
};

const onChange = (value, checked) => {
  if (checked) {
    SaveCheckAuth.value = [...SaveCheckAuth.value, value];
  } else {
    SaveCheckAuth.value = SaveCheckAuth.value.filter((v) => v !== value);
  }
};

const form = ref(null);

const onCancel = () => {
  console.log("onCancel", items.value[0]);
  changeActiveBtn(items.value[0]);
  props.cancelModal();
};

const onOk = async () => {
  let postData = { SaveCheckAuth: SaveCheckAuth.value };

  const res = await postAccountRole({
    Id: props.selectedRole.role_guid || "0",
    ...props.selectedRole,
    ...postData,
  });
  props.update();
  onCancel();
};

watch(
  () => props.selectedRole,
  (newValue) => {
    Boolean(newValue?.role_guid) && getRoleAuth(newValue.role_guid);
  }
);

onMounted(() => {
  setItems([
    {
      title: "基礎權限",
      key: "PF",
      active: true,
      authCode: "PF",
    },
  ]);
  getAllAuth();
});
</script>

<template>
  <Modal id="role_auth_modal" title="角色權限設定" :onCancel="onCancel">
    <template #modalContent>
      <form class="modal_form" ref="form">
        <Input
          v-if="!disabled"
          label="角色名稱"
          placeholder="請輸入角色名稱"
          class="mt-5"
          name="Name"
          :value="selectedRole"
        />
        <p v-else class="text-xl mt-5">{{ selectedRole?.Name }}</p>
        <ButtonGroup
          :items="items"
          :withLine="false"
          class="my-4"
          :onclick="(e, item) => changeActiveBtn(item)"
        />
        <Table :columns="columns" :dataSource="dataSource" :withStyle="false">
          <template #bodyCell="{ record, column, index }">
            <template v-if="column.key === 'index'">
              {{ index + 1 }}
            </template>
            <template v-else-if="column.key === 'SaveCheckAuth'">
              <Checkbox
                :checked="SaveCheckAuth.includes(record.authCode)"
                :disabled="disabled"
                name="SaveCheckAuth"
                :value="record.authCode"
                :onChange="onChange"
              />
              <!-- <label class="cursor-pointer label justify-center">
                <input
                  type="checkbox"
                  :disabled="disabled"
                  :checked="SaveCheckAuth.includes(record.authCode)"
                  class="checkbox checkbox-success"
                />
              </label> -->
            </template>
          </template>
        </Table>
      </form>
    </template>
    <template #modalAction>
      <button
        class="btn btn-sm bg-dark btn-neutral text-white mr-2"
        @click="onCancel"
      >
        關閉
      </button>
      <button
        v-if="!disabled"
        class="btn btn-sm btn-success text-white"
        @click="onOk"
      >
        確認
      </button>
    </template>
  </Modal>
</template>

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