124 lines
2.9 KiB
Vue
124 lines
2.9 KiB
Vue
<script setup>
|
|
import Table from "@/components/customUI/Table.vue";
|
|
// import AccountModal from "./AccountModal.vue";
|
|
import {
|
|
getUserList
|
|
} from "@/apis/headquarters";
|
|
import { onMounted, ref, inject, computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
|
const { openToast, cancelToastOpen } = inject("app_toast");
|
|
|
|
const dataSource = ref([]);
|
|
const loading = ref(false);
|
|
const searchData = ref({
|
|
Full_name: "",
|
|
Role_full_name: "",
|
|
});
|
|
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 getDataSource = async () => {
|
|
loading.value = true;
|
|
const res = await getUserList();
|
|
dataSource.value = res.data?.users || [];
|
|
loading.value = false;
|
|
};
|
|
|
|
const onSearch = () => {
|
|
getDataSource();
|
|
};
|
|
|
|
const onReset = () => {
|
|
getDataSource();
|
|
};
|
|
|
|
const getUser = async (id) => {
|
|
// const res = await getAccountOneUser(id);
|
|
openModal(res.data);
|
|
};
|
|
|
|
onMounted(() => {
|
|
getDataSource();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="text-2xl font-extrabold mb-2">
|
|
{{ $t("accountManagement.account_title") }}
|
|
</h1>
|
|
<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>
|
|
</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>
|
|
</template>
|
|
<template v-else>
|
|
{{ record[column.key] }}
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|