rms/app/src/components/AccountManage.vue

<template>
    <div>
        <v-dialog
                v-model="progress"
                persistent
                width="300"
        >
            <v-card
                    color="primary"
                    dark
            >
                <v-card-text>
                    載入中...
                    <v-progress-linear
                            indeterminate
                            color="white"
                            class="mb-0"
                    ></v-progress-linear>
                </v-card-text>
            </v-card>
        </v-dialog>
        <v-data-table class="" :headers="headers" :items="items"
                      disable-sort
                      fixed-header
                      :footer-props="{'items-per-page-options': [30, 40, 50, 60]}"
                      :items-per-page="30">
            <template v-slot:top>
                <v-toolbar flat>
                    <v-toolbar-title class="title font-weight-bold">帳號管理</v-toolbar-title>
                    <v-divider
                            class="mx-4"
                            inset
                            vertical
                    />
                    <v-spacer/>
                    <!--新增對話-->
                    <v-dialog
                            v-model="dialogInsert"
                            @click:outside="close"
                            max-width="500"
                    >

                        <template v-slot:activator="{ on, attrs }">
                            <v-btn
                                    color="white"
                                    class="primary"
                                    v-bind="attrs"
                                    v-on="on"
                                    icon
                            >
                                <v-icon>mdi-plus</v-icon>
                            </v-btn>

                        </template>
                        <v-card>
                            <v-card-title>
                                <span class="headline font-weight-bold">新增</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-text-field v-model="insertItem.id" outlined rounded label="員工編號"/>
                                    <v-text-field v-model="insertItem.username" outlined rounded label="姓名"/>
                                    <v-select v-model="insertItem.department" outlined rounded :items="departments"
                                              label="部門"/>
                                    <v-text-field v-model="insertItem.account" outlined rounded label="帳號"/>
                                    <v-text-field v-model="insertItem.pwd" outlined type='password' rounded label="密碼"/>
                                    <v-select v-model="insertItem.level" outlined rounded label="權限"
                                              :items="levelSelectItem"/>
                                </v-container>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn
                                        color="blue darken-1"
                                        text
                                        @click="close"
                                >
                                    取消
                                </v-btn>
                                <v-btn
                                        color="blue darken-1"
                                        text
                                        @click="checkIdAndAccountRepeat(insertItem, '新增')"
                                >
                                    新增
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                </v-toolbar>
            </template>
            <template v-slot:item.pwd="{ item }">
                <v-text-field hide-details dense type="password" disabled :value="item.pwd" class="" />
            </template>
            <template v-slot:item.level="{ item }">
                <p>{{item.level === '0' ? '超級管理員' : ''}}</p>
                <p>{{item.level === '1' ? '一般管理員' : ''}}</p>
                <p>{{item.level === '2' ? '一般使用者' : ''}}</p>
                <p>{{item.level === '3' ? '稽核人員' : ''}}</p>
            </template>
            <template v-slot:item.pwd="{  }">
            </template>
            <template v-slot:item.actions="{ item }">
                <div class="d-flex">
                    <v-btn
                            icon
                            @click="openDialogModify(item)"
                    >
                        <v-icon>mdi-pencil</v-icon>
                    </v-btn>
                    <v-icon
                            small
                            @click="deleteOne(item)"
                    >
                        mdi-delete
                    </v-icon>
                </div>
            </template>
        </v-data-table>
        <!--修改對話-->
        <v-dialog
                v-model="dialogModify"
                @click:outside="close"
                :retain-focus="false"
                max-width="500"
        >
            <v-card>
                <v-card-title>
                    <span class="headline font-weight-bold">修改</span>
                </v-card-title>
                <v-card-text>
                    <v-container>
                        <v-text-field v-model="modifyItem.id" disabled outlined rounded label="員工編號"/>
                        <v-text-field v-model="modifyItem.username" outlined rounded label="姓名"/>
                        <v-select v-model="modifyItem.department" outlined rounded :items="departments" label="部門"/>
                        <v-text-field v-model="modifyItem.account" disabled outlined rounded label="帳號"/>
                        <v-text-field v-model="modifyItem.pwd" outlined type='password' rounded label="密碼"/>
                        <v-select v-model="modifyItem.level" outlined rounded label="權限" :items="levelSelectItem"/>
                    </v-container>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                            color="blue darken-1"
                            text
                            @click="close"
                    >
                        取消
                    </v-btn>
                    <v-btn
                            color="blue darken-1"
                            text
                            @click="modifyOne"
                    >
                        修改
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>
<script>
    export default {
        name: '',
        data() {
            return {
                fullHeight: 0,
                dialogInsert: false,
                dialogModify: false,
                headers: [{'text': '', 'value': 'actions', fixed: true, sortable: false},
                    {'text': '員工編號', 'value': 'id'},
                    {'text': '姓名', 'value': 'username'},
                    {'text': '部門', 'value': 'department'},
                    // {'text': '型態', 'value': 'type'},
                    {'text': '帳號', 'value': 'account'},
                    // {'text': '密碼', 'value': 'pwd'},
                    {'text': '權限', 'value': 'level'}],
                items: [],
                departments: [],
                insertItem: {
                    account: "",
                    department: "",
                    level: "",
                    pwd: "",
                    username: "",
                    id: "",
                },
                modifyItem: {
                    account: "",
                    department: "",
                    level: "",
                    pwd: "",
                    username: "",
                    id: "",
                },
                progress: false,
                levelSelectItem: [{'text': '超級管理員', 'value': '0'},
                    {'text': '一般管理員', 'value': '1'},
                    {'text': '一般使用者', 'value': '2'},
                    {'text': '稽核人員', 'value': '3'}],
            }
        },
        async mounted() {
            this.progress = true;
            this.getUsers();
            // this.getSelectItem();
            this.fullHeight = window.innerHeight;
            window.onresize = () => {
                this.fullHeight = window.innerHeight;
            };
            this.getDepartments();
        },
        computed: {},
        watch: {},
        methods: {
            openDialogModify(item) {
                console.log(item.department);
                this.modifyItem.username = item.username;
                this.modifyItem.department = item.department;
                this.modifyItem.account = item.account;
                this.modifyItem.pwd = item.pwd;
                this.modifyItem.level = item.level;
                this.modifyItem.id = item.id;
                this.dialogModify = true;
            },
            async getUsers() {
                await this.$axios.get(`/account/accounts`)
                    .then((resp) => {
                        this.items = [];
                        this.items = resp.data.data;
                        this.progress = false;
                    });
            },
            async getDepartments() {
                await this.$axios.get(`/account/departments`).then((resp) => {
                    this.departments = resp.data.data;
                });
            },
            checkIdAndAccountRepeat(item, next) {
                this.$axios.get(`/account/checkIdAndAccountRepeat?id=${item.id}&&account=${item.account}`).then((resp) => {
                    if (resp.data.code !== 200) {
                        alert(resp.data.message);
                    } else {
                        if (next === '新增') {
                            this.insertOne();
                        } else {
                            this.modifyOne();
                        }
                    }
                });
            },
            insertOne() {
                this.$axios.post(`/account/account`, this.insertItem).then(() => {
                        delete this.insertItem.tablename;
                        this.getUsers();
                        this.close();
                    }
                );
            },
            modifyOne() {
                this.$axios.put(`/account/account`, this.modifyItem).then(() => {
                        this.getUsers();
                        Object.keys(this.modifyItem).forEach((key) => {
                            this.modifyItem[key] = '';
                        });
                        this.close();
                    }
                );
            },
            deleteOne(item) {
                let yes = confirm('確定刪除');
                if (yes) {
                    this.$axios.delete(`/account/account?id=${item.id}`).then(() => {
                        this.getUsers();
                        alert('已刪除');
                    });
                }
            },
            close() {
                this.dialogInsert = false;
                this.dialogModify = false;
            },
        }
    }
</script>