rms/app/src/components/AssetGroup.vue

<template>
    <div>
        <div>
            <v-tabs
                    v-model='currentTab'
                    centered
                    fixed-tabs
                    background-color='grey lighten-4'
                    show-arrows
            >
                <div class="d-flex align-center">
                    <!--新增資產群駔對話-->
                    <v-dialog
                            v-model='dialogNewAssertGroup'
                            @click:outside='close'
                            :retain-focus="false"
                            overlay-opacity="0"
                    >
                        <template v-slot:activator='{ on, attrs }'>
                            <v-btn
                                    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-row>
                                        <v-col
                                                cols='12'
                                                sm='6'
                                                md='4'
                                                class='d-flex'
                                        >
                                            <v-text-field
                                                    v-model="insertAssertGroupDescript"
                                                    label='群組名稱'
                                                    hint='必填'
                                            />
                                        </v-col>
                                        <v-col
                                                cols='12'
                                                sm='6'
                                                md='4'
                                                class='d-flex'
                                        >
                                            <v-text-field
                                                    v-model="insertAssertGroupTablename"
                                                    label='資料庫表格名稱'
                                                    hint='必填'
                                            />
                                        </v-col>
                                    </v-row>
                                </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='insertAssertGroup'
                                >
                                    新增
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                </div>
                <v-tab
                        v-for='(item, index) in assertGroup'
                        :key='index'
                        class=' font-weight-bold'
                        @mouseover="showTabOptionIcon(index)"
                        @mouseleave="optionIconShow = -1"
                >
                    <v-icon small>{{ item.text }}</v-icon>
                    <v-spacer></v-spacer>
                    <!--修改資產群駔對話-->
                    <v-dialog
                            :id="index"
                            v-model='dialogModifyAssertGroupName'
                            :retain-focus="false"
                            overlay-opacity="0"
                            @click:outside='close'
                    >
                        <template v-slot:activator='{ on, attrs }'>
                            <v-btn
                                    v-bind='attrs'
                                    v-on='on'
                                    icon
                            >
                                <v-icon v-show="optionIconShow === index" small
                                        @click="modifyAssertGroup = JSON.parse(JSON.stringify(item))">mdi-pencil
                                </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-row>
                                        <v-col
                                                cols='12'
                                                sm='6'
                                                md='4'
                                                class='d-flex'
                                        >
                                            <v-text-field
                                                    v-model="modifyAssertGroup.text"
                                                    label='群組名稱'
                                                    hint='必填'
                                            />
                                        </v-col>
                                    </v-row>
                                </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='modifyAssertGroupName'
                                >
                                    修改
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                    <v-btn icon>
                        <v-icon v-show="optionIconShow === index" small @click="deleteAssertGroup(item)">
                            mdi-delete
                        </v-icon>
                    </v-btn>
                </v-tab>
                <div class="d-flex align-center">
                </div>
                <v-tabs-items v-model='currentTab'>
                    <v-tab-item
                            v-for='(item, index) in assertGroup'
                            :key='index'
                    >
                        <v-data-table
                                :items='allCols[item.value]'
                                :headers='headers'
                                hide-default-footer
                        >
                            <template v-slot:item.actions='{ item }'>
                                <!--修改資產群駔欄位對話-->
                                <v-dialog
                                        v-model='dialogModify'
                                        @click:outside='close'
                                        :retain-focus="false"
                                        overlay-opacity="0"
                                >
                                    <template v-slot:activator='{ on, attrs }'>
                                        <v-btn
                                                v-bind='attrs'
                                                v-on='on'
                                                icon
                                                @click='modifyColItem = JSON.parse(JSON.stringify(item))'
                                        >
                                            <v-icon>mdi-pencil</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-row>
                                                    <v-col
                                                            v-for='(header, index) in headers'
                                                            :key='index'
                                                            cols='12'
                                                            sm='6'
                                                            md='4'
                                                            class='d-flex'
                                                    >
                                                        <v-text-field
                                                                v-if="header.text !== '' && header.value !== 'isselect' && isBooleanCol.indexOf(header.value) < 0"
                                                                :label='header.text'
                                                                :value="modifyColItem[header.value]"
                                                                hint='必填'
                                                                v-on:input='oninput(modifyColItem, header.value, $event)'
                                                        />
                                                        <v-select
                                                                v-if="header.value === 'isselect' && isBooleanCol.indexOf(header.value) < 0"
                                                                :label='header.text' hint='必填'
                                                                :value="modifyColItem[header.value]"
                                                                v-on:input='oninput(modifyColItem, header.value, $event)'
                                                                :items="selectColItem.isselect"
                                                                :item-text="selectColItem.isselect.text"
                                                                :item-value="selectColItem.isselect.value"
                                                        />
                                                        <v-select
                                                                v-if="header.value && isBooleanCol.indexOf(header.value) >= 0"
                                                                :label='header.text' hint='必填'
                                                                :value="modifyColItem[header.value]"
                                                                v-on:input='oninput(modifyColItem, header.value, $event)'
                                                                :items="selectColItem.boolean"
                                                                :item-text="selectColItem.boolean.text"
                                                                :item-value="selectColItem.boolean.value"
                                                        />
                                                        <v-btn
                                                                v-if="header.value === 'isselect' && modifyColItem.isselect === 'true'"
                                                                @click='dialogModifySelectItem = true'
                                                        >
                                                            編輯選項
                                                        </v-btn>
                                                    </v-col>
                                                </v-row>
                                            </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='modifyCol(modifyColItem)'
                                            >
                                                修改
                                            </v-btn>
                                        </v-card-actions>
                                    </v-card>
                                </v-dialog>
                                <v-icon
                                        small
                                        @click='deleteCol(item)'
                                >
                                    mdi-delete
                                </v-icon>
                            </template>
                            <template v-slot:footer>
                                <div class='d-flex ma-2'>
                                    <v-spacer/>
                                    <!--新增資產群駔欄位對話-->
                                    <v-dialog
                                            v-model='dialogInsert'
                                            @click:outside='close'
                                            :retain-focus="false"
                                            overlay-opacity="0"
                                    >
                                        <template v-slot:activator='{ on, attrs }'>
                                            <v-btn
                                                    v-bind='attrs'
                                                    v-on='on'
                                                    color='primary'
                                            >
                                                新增欄位
                                            </v-btn>
                                        </template>
                                        <v-card>
                                            <v-card-title>
                                                <span class='headline font-weight-bold'>新增欄位</span>
                                            </v-card-title>
                                            <v-card-text>
                                                <v-container>
                                                    <v-row>
                                                        <v-col
                                                                v-for='(header, index) in headers'
                                                                :key='index'
                                                                cols='12'
                                                                sm='6'
                                                                md='4'
                                                                class='d-flex'
                                                        >
                                                            <v-text-field
                                                                    v-if="header.text !== '' && header.value !== 'isselect' && isBooleanCol.indexOf(header.value) < 0"
                                                                    :label='header.text'
                                                                    hint='必填'
                                                                    v-on:input='oninput(insertColItem, header.value, $event)'
                                                            />
                                                            <v-select
                                                                    v-if="header.value === 'isselect' && isBooleanCol.indexOf(header.value) < 0"
                                                                    :label='header.text' hint='必填'
                                                                    v-on:input='oninput(insertColItem, header.value, $event)'
                                                                    :items="selectColItem.isselect"
                                                                    :item-text="selectColItem.isselect.text"
                                                                    :item-value="selectColItem.isselect.value"
                                                            />
                                                            <v-select
                                                                    v-if="header.value && isBooleanCol.indexOf(header.value) >= 0"
                                                                    :label='header.text' hint='必填'
                                                                    v-on:input='oninput(insertColItem, header.value, $event)'
                                                                    :items="selectColItem.boolean"
                                                                    :item-text="selectColItem.boolean.text"
                                                                    :item-value="selectColItem.boolean.value"
                                                            />
                                                            <v-btn
                                                                    v-if="header.value === 'isselect' && insertColItem.isselect === 'true'"
                                                                    @click='dialogInsertSelectItem = true'
                                                            >
                                                                編輯選項
                                                            </v-btn>
                                                        </v-col>
                                                    </v-row>
                                                </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='insertCol(item)'
                                                >
                                                    新增
                                                </v-btn>
                                            </v-card-actions>
                                        </v-card>
                                    </v-dialog>
                                </div>
                            </template>
                        </v-data-table>
                    </v-tab-item>
                </v-tabs-items>
                <!--新增資產群組欄位選項對話-->
                <v-dialog
                        width="80%"
                        v-model='dialogInsertSelectItem'
                        @click:outside='closeDialogInsertSelectItem'
                        :retain-focus="false"
                        overlay-opacity="0"
                >
                    <v-card>
                        <v-card-title>
                            <span class='headline font-weight-bold'>編輯選項</span>
                        </v-card-title>
                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col cols="3" class="d-flex align-center">
                                        <v-text-field outlined rounded hide-details
                                                      v-model="insertSelectItem"/>
                                        <v-btn class="ml-2" @click='pushSelectItem'>新增</v-btn>
                                    </v-col>
                                </v-row>
                                <v-card class="mt-2 elevation-2"
                                        style="border: 1px solid grey;min-height: 250px;border-radius: 10px">
                                    <v-chip
                                            v-for="(insertSelectItem, index) in insertSelectItems"
                                            :key="index"
                                            class="ma-2"
                                            color="secondary"
                                    >
                                        {{insertSelectItem}}
                                        <v-icon small class="ml-4" @click="deleteSelectItem(index)">mdi-close</v-icon>
                                    </v-chip>
                                </v-card>
                            </v-container>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                    color='blue darken-1'
                                    text
                                    @click='closeDialogInsertSelectItem'
                            >
                                關閉
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <!--修改資產群組欄位選項對話-->
                <v-dialog
                        width="40%"
                        v-model='dialogModifySelectItem'
                        @click:outside='closeDialogModifySelectItem'
                        :retain-focus="false"
                        overlay-opacity="0"
                >
                    <v-card>
                        <v-card-title>
                            <span class='headline font-weight-bold'>編輯選項</span>
                        </v-card-title>
                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col cols="11" class="d-flex align-center">
                                        <v-text-field outlined rounded hide-details
                                                      v-model="insertSelectItem"/>
                                        <v-btn class="ml-2" @click='pushSelectItem'>新增</v-btn>
                                    </v-col>
                                </v-row>
                                <v-card
                                        max-width="80%"
                                        class="mt-2"
                                        style="border: 1px solid grey; border-radius: 10px"
                                >
                                    <v-card-text>
                                        <v-chip-group
                                                v-model="selection"
                                                column
                                        >
                                            <draggable @start="dragStart" @end="dragEnd">
                                                <v-chip v-for="(modifySelectItem, i) in modifySelectItems" :key="i" color="secondary" class="col-12" draggable>
                                                    {{ modifySelectItem }}
                                                </v-chip>
                                            </draggable>
                                        </v-chip-group>
                                    </v-card-text>
                                </v-card>
                            </v-container>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                    color='blue darken-1'
                                    text
                                    @click='closeDialogModifySelectItem'
                            >
                                關閉
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                    <div id="app">
                        <v-app id="inspire">
                            <v-card
                                    max-width="400"
                                    class="mx-auto"
                            >
                                <v-card-text>
                                    <v-chip-group
                                            v-model="selection"
                                            column
                                            active-class="primary--text"
                                    >
                                        <draggable v-model="tags" @start="dragStart" @end="dragEnd">
                                            <v-chip v-for="(tag, i) in tags" :key="i" draggable>
                                                {{ tag.name }}
                                            </v-chip>
                                        </draggable>
                                    </v-chip-group>
                                </v-card-text>
                            </v-card>
                        </v-app>
                    </div>
                </v-dialog>
            </v-tabs>
        </div>
    </div>
</template>
<script>
    import draggable from 'vuedraggable';

    export default {
        name: '',
        components: {
            draggable,
        },
        data() {
            return {
                dialogInsert: false,
                dialogModify: false,
                dialogNewAssertGroup: false,
                // dialogSearch: false,
                title: '資訊資產群組',
                headers: [
                    {'text': '', 'value': 'actions', fixed: true, sortable: false},
                    {'text': '中文名稱', 'value': 'descript'},
                    {'text': '資料庫欄位名稱', 'value': 'colname'},
                    // {'text': '型態', 'value': 'type'},
                    {'text': '文字框或選項', 'value': 'isselect'},
                    {'text': '順序', 'value': 'index'},
                    {'text': '必填', 'value': 'isrequire'},
                    {'text': '可匯出', 'value': 'isexport'},
                    {'text': '可搜尋', 'value': 'issearch'},
                ],
                allCols: [],
                insertColItem: {
                    'tablename': '',
                    'descript': '',
                    'colname': '',
                    'level': null,
                    // 'type': '',
                    'index': '',
                    'isselect': '',
                    'issearch': '',
                    'isexport': '',
                    'isrequire': ''
                },
                isBooleanCol: ['isexport', 'isrequire', 'issearch'],
                selectColItem: {
                    'isselect': [{'text': '文字', 'value': 'false'},
                        {'text': '選項', 'value': 'true'}]
                    , 'boolean': [{'text': '是', 'value': 'true'},
                        {'text': '否', 'value': 'false'}]
                },
                modifyColItem: {},
                assertGroup: [],
                currentTab: 0,
                types: [],
                // selectItem: {},
                // searchItem: {},
                insertAssertGroupDescript: '',
                insertAssertGroupTablename: '',
                optionIconShow: -1,
                dialogModifyAssertGroupName: false,
                modifyAssertGroup: {
                    text: '',
                    valsue: '',
                },
                dialogInsertSelectItem: false,
                insertSelectItems: [],
                insertSelectItem: '',
                modifySelectItems: [],
                modifySelectItem: '',
                dialogModifySelectItem: false,
                selection: null,
                currentTag: null,
                tags: [{
                    name: 'Shoping',
                },{
                    name: 'Art',
                }, {
                    name: 'Tech',
                }, {
                    name: 'Creative Writing'
                }
                ],
            }
        },
        async mounted() {
            // this.getSelectItem();
            this.getTabs();
            this.getTypes();
            this.inventoryItems = [];
            this.getCols();
        },
        computed: {},
        watch: {
            currentTab() {
                this.getTypes();
                this.getCols();
            },
            dialogModifySelectItem() {
                this.getModifySelectItems();
            },
        },
        methods: {
            // eslint-disable-next-line no-unused-vars
            log() {
                // console.log(col);
                console.log(this.modifySelectItems);
            },
            dragStart() {

                if (this.modifySelectItems[this.selection]) {
                    this.currentTag = this.modifySelectItems[this.selection];
                }
                else {
                    this.currentTag = null;
                }
                // console.log(this.selection);
                // console.log(this.currentTag);
                // console.log(this.tags[0].name);
            },
            dragEnd() {
                var self = this;
                console.log(this.currentTag);
                if (this.currentTag) {
                    this.modifySelectItems.forEach((x, i) => {
                        if (x === self.currentTag) self.selection = i;
                    });
                }
                // console.log(this.selection);
                // console.log(this.currentTag);
                console.log(this.modifySelectItems[0]);

            },
            closeDialogInsertSelectItem() {
                this.dialogInsertSelectItem = false
                this.insertSelectItems = [];
            },
            getModifySelectItems() {
                this.$axios.get(`/assert/selectItems?tablename=${this.modifyColItem.tablename}&&colname=${this.modifyColItem.colname}`).then((resp) => {
                    console.log(resp.data.data);
                    this.modifySelectItems = resp.data.data;
                });
            },
            closeDialogModifySelectItem() {
                this.dialogModifySelectItem = false;
                this.modifySelectItems = [];
            },
            pushSelectItem() {
                if (this.insertSelectItems.indexOf(this.insertSelectItem) >= 0 || this.insertSelectItem === '') {
                    alert('選項不得重複或為空');
                } else {
                    this.insertSelectItems.push(this.insertSelectItem);
                    this.insertSelectItem = '';
                }
            },
            deleteSelectItem(index) {
                this.insertSelectItems.splice(index, 1);
            },
            oninput(item, key, val) {
                this.$set(item, key, val);
            },
            async getTabs() {
                await this.$axios.get(`/assert/assertGroups`).then((resp) => {
                    this.assertGroup = [];
                    resp.data.data.forEach((item) => {
                        let header = {'text': null, 'value': null};
                        header.text = item.descript;
                        header.value = item.tablename;
                        this.assertGroup.push(header);
                    });
                    // this.assertGroup.push({'text': 'mdi-plus', 'value': ''});
                });
            },
            getTypes() {
                const tablename = this.assertGroup[this.currentTab] ? this.assertGroup[this.currentTab].value : 'hardware';
                this.$axios.get(`/assert/Types?tablename=${tablename}`).then((resp) => {
                    this.types = resp.data.data;
                });
            },
            getCols() {
                const tablename = this.assertGroup[this.currentTab] ? this.assertGroup[this.currentTab].value : 'hardware';
                this.$axios.get(`/assert/allCols?tablename=${tablename}`).then((resp) => {
                    this.allCols = resp.data.data;
                });
            },
            insertCol() {
                for (const key in this.insertColItem) {
                    if (this.insertColItem[key] === '') {
                        alert('所有資料不可為空');
                        return;
                    } else {
                        this.insertColItem.tablename = this.assertGroup[this.currentTab].value;
                        this.insertColItem.insertselectItems = this.insertSelectItems;
                        this.$axios.post(`/assert/col`, this.insertColItem).then(() => {
                                this.getCols();
                                this.close();
                                this.insertSelectItems = [];
                            }
                        );
                    }
                }
            },
            close() {
                this.dialogInsert = false;
                this.dialogModify = false;
                this.dialogNewAssertGroup = false;
                this.dialogModifyAssertGroupName = false;
            },
            isDisabled(key) {
                const disabledKey = ['id'];
                return disabledKey.indexOf(key) >= 0;
            },
            isTextField(key) {
                return this.select.indexOf(key) < 0;
            },
            isSelect(key) {
                return this.select.indexOf(key) >= 0;
            },
            isRequire(key) {
                return this.required.indexOf(key) >= 0;
            },
            getSelectItem() {
                this.$axios.get(`/selectItem?tablename=${this.tablename}`).then((resp) => {
                    this.selectItem = resp.data.data;
                });
            },
            modifyCol(item) {
                console.log(item);
                item.tablename = this.tablename;
                this.$axios.put(`/assert/col`, item).then(() => {
                        this.getCols();
                        this.close();
                    }
                );
            },
            deleteCol(item) {
                let yes = confirm('確定刪除');
                if (yes) {
                    this.$axios.delete(`/assert/deleteCol?tablename=${item.tablename}&&colname=${item.colname}`).then(() => {
                        this.getCols();
                        alert('已刪除');
                    });
                }
            },
            exportFile() {
                let yes = confirm('確定匯出');
                if (yes) {
                    // this.$axios.delete(`/deleteOne?tablename=${this.tablename}&&id=${item.id}`).then(() => {
                    //     this.getInventories();
                    // });

                }

            },
            async insertAssertGroup() {
                await this.$axios.post(`/assert/assertGroups`, {
                    assertGroupDescript: this.insertAssertGroupDescript,
                    assertGroupTablename: this.insertAssertGroupTablename
                });
                await this.getTabs();
                this.close();
            },
            showTabOptionIcon(index) {
                this.optionIconShow = index;
            },
            async deleteAssertGroup(item) {
                let yes = confirm('確認刪除此群組?');
                if (yes) {
                    await this.$axios.delete(`/assert/assertGroups?tablename=${item.value}`).then(() => {
                        this.getTabs();
                        alert('已刪除');
                    });
                }
            },
            async modifyAssertGroupName() {
                await this.$axios.put(`/assert/assertGroups?tablename=${this.modifyAssertGroup.value}&&newDescript=${this.modifyAssertGroup.text}`).then(() => {
                    this.getTabs();
                    alert('已修改');
                    this.close();
                });
            },


        }
    }
</script>