rt-sim-training-client/src/views/system/dictionaryDetail/index.vue

<template>
  <div>
    <!-- <turnback-bar :title="turnbackBarTitle"></turnback-bar> -->
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <div class="draft">
      <el-button-group>
        <el-button type="primary" @click="turnback">{{ $t('global.back') }}</el-button>
      </el-button-group>
    </div>
    <dictionary-detail-edit ref="create" type="ADD" :dic-id="dicId" @reloadTable="reloadTable" />
    <dictionary-detail-edit ref="edit" type="EDIT" :dic-id="dicId" @reloadTable="reloadTable" />
  </div>
</template>

<script>
import { list, del } from '@/api/management/dictionaryDetail';
import { getData } from '@/api/management/dictionary';
import DictionaryDetailEdit from '@/views/system/dictionaryDetail/edit';
export default {
    name: 'DictionaryDetail',
    components: {
        DictionaryDetailEdit
    },
    data() {
        return {
            dicId: '',
            dic: {},
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '80px',
                reset: true,
                queryObject: {
                    code: {
                        type: 'text',
                        label: this.$t('global.code')
                    },
                    name: {
                        type: 'text',
                        label: this.$t('global.name')
                    },
                    status: {
                        type: 'select',
                        label: this.$t('global.status'),
                        config: {
                            data: this.$ConstSelect.Status
                        }
                    }
                }

            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('global.code'),
                        prop: 'code'
                    },
                    {
                        title: this.$t('global.name'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('global.status'),
                        prop: 'status',
                        type: 'tag',
                        columnValue: (row) => { return this.$ConstSelect.translate(row.status, 'Status'); },
                        tagType: (row) => { if (row.status === '0') { return 'danger'; } else { return 'success'; } }
                    },
                    {
                        title: this.$t('global.remarks'),
                        prop: 'remarks'
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '250',
                        buttons: [
                            {
                                name: this.$t('global.edit'),
                                handleClick: this.handleEdit
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.handleDelete,
                                type: 'danger'
                            }
                        ]
                    }
                ],
                actions: [
                    { text: this.$t('global.add'), btnCode: 'employee_insert', handler: this.handleAdd }
                    // { text: '批量删除', btnCode: 'employee_delete', handler: this.handleBatchDelete, type: 'danger' }
                ]
            },

            currentModel: {}
        };
    },

    // computed: {
    //     turnbackBarTitle() {
    //         return this.dic.name + '(' + this.dic.code + ')'
    //     }
    // },

    created() {
        this.dicId = this.$route.query.id;
        getData(this.dicId).then(response => {
            this.dic = response.data;
        });
    },

    methods: {
        queryFunction(params) {
            return list(this.dicId, params);
        },

        handleEdit(index, row) {
            this.$refs.edit.show(row.id);
        },

        handleAdd() {
            this.$refs.create.show();
        },

        handleBatchDelete() {

        },

        handleDelete(index, row) {
            this.$confirm(this.$t('system.wellDelType'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                del(this.dicId, row.id).then(response => {
                    this.$message.success(this.$t('system.deleteSuccess'));
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.deleteFailed'));
                });
            });
        },

        reloadTable() {
            this.queryList.reload();
        },

        turnback() {
            this.$router.go(-1);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
</style>