index.vue 4.36 KB
<template>
    <div class="app-container">
        <el-form
            :inline="true"
            :model="listQuery"
            size="small"
            class="qg-search-form"
        >
            <el-form-item label="图书"  >
                <qg-input-refer v-model="listQueryTmp.bookIdList"
                                :suggest-request="bookPage"
                                :multiple="true"
                                :props="{
                                 value: 'id',
                                 label:'code'
                                 }"
                                :component="BookReferTable"
                                @input="selectMultiChange('bookIdList')"
                />
            </el-form-item>
            <el-form-item label="创建人"  >
                <qg-select-remote v-model="listQuery.createdBy"
                                  clearable

                                  :request="userPage"
                />
            </el-form-item>
            <el-form-item label=" ">
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row class="opt-bar">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="default" @click="handleExport">导出</el-button>
        </el-row>
        <qg-table
            ref="tshjListTable"
            :columns="tableColumns"
            :param="listQuery"
            :request="listRequest"
        />
    </div>
</template>

<script>
    import {tshjBatchDelete, tshjPage} from '@/api/moudles/zxm/tshj';
    import {tshjSearchModel, tableColumns, componentsData} from './config.js';
    import {deepClone, postExcelFile} from '@/utils';
    import QgInputRefer from '@/components/qg-input-refer';
    import {bookPage} from '@/api/moudles/zxm/book';
    import BookReferTable from '../book/refer-table';
    import {getToken} from '@/utils/auth'

    export default {
        name: 'TshjTable',
        components: {QgInputRefer},
        data() {
            return {
                tableColumns: tableColumns.bind(this)(),
                listRequest: tshjPage,
                listQuery: deepClone(tshjSearchModel),
                bookPage,
                BookReferTable,
                listQueryTmp:{
                    bookIdList:[]
                },
                componentsData
            };
        },
        created() {
        },
        methods: {
            selectMultiChange(fieldName) {
                this.listQuery[fieldName] = this.listQueryTmp[fieldName].join(',');
            },
            handleSearch() {
                this.$refs.tshjListTable.load();
            },
            handleAdd() {
                this.$router.push({name: `tshjAdd`});
            },

            handleExport: function () {
                const url = process.env.VUE_APP_BASE_API + `/qgyun-zxm/tshj/export?_token=` + getToken();
                postExcelFile(Object.assign({}, this.listQuery), url);
            },
            handleOpt(type, params) {
                let request = null;
                switch (type) {
                    case 'VIEW':
                        this.$router.push({name: `tshjDetail`, query: {id: params.id}});
                        return;
                    case 'DELETE':
                        this.$confirm('你确定要删除该数据吗?').then(() => {
                            request = tshjBatchDelete([params.id]);
                            this.operate(request, true);
                        }).catch(() => {
                        });
                        return;
                    case 'EDIT':
                        this.$router.push({name: `tshjEdit`, query: {id: params.id}});
                        return;
                }
            },
            operate(request, isReloadList) {
                if (!request) {
                    return;
                }
                request.then(res => {
                    if (res.success) {
                        this.$message.success(res.msg || '操作成功');
                        if (isReloadList) {
                            this.$refs.tshjListTable.refresh();
                        }
                    }else{
                        this.$message.error(res.msg || '操作失败!');
                    }
                });
            }
        }
    };
</script>