lift-web/src/apps/mobile/views/question-bank/index.vue

<template>
    <div class="common-container my-open-img">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入标题" v-model="searchForm.title"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入专家" v-model="searchForm.userName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <BrandList @brandChange="brandChange" ref="brand"></BrandList>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" v-if="show">
                            <el-form-item>
                                <el-select placeholder="启用状态" v-model="searchForm.statuz" clearable>
                                    <el-option label="是" :value="1"></el-option>
                                    <el-option label="否" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select placeholder="审核状态" v-model="searchForm.examineFlag" clearable>
                                    <el-option label="未审核" :value="0"></el-option>
                                    <el-option label="审核通过" :value="1"></el-option>
                                    <el-option label="驳回" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" plain round @click="query">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item>
                                <el-button type="primary" round plain icon="el-icon-plus" @click="create(null)" v-if="show">新建</el-button>
                                <el-button type="primary" plain round v-if="show" @click="batchPutaway">批量开启</el-button>
                                <el-button type="primary" plain round v-if="show" @click="batchUnshelve">批量关闭</el-button>
                                <el-button type="primary" plain round v-if="show" @click="deleteData(ids, 'batch')">批量删除</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ ids.length }}</span> 项
            </div>
            <div class="MaintenanceTable">
                <el-table ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" @selection-change="selectionChange" class="OutTable" border v-loading="listLoading">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="title" label="标题" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="userName" label="专家" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="expression" label="问题现象" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="solution" label="解决方法" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="imgs" label="图片">
                        <template slot-scope="scope">
                            <span v-if="scope.row.imgs && scope.row.imgs.length > 0">
                                <el-image 
                                    :src="scope.row.imgs[0] | pathPipe" 
                                    style="width:64px;height:64px;cursor:pointer"
                                    :preview-src-list="[scope.row.imgs[0]]">
                                </el-image>
                            </span>
                            <span v-else>-无-</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="brandName" label="电梯品牌" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="browseNum" label="浏览量">
                        <template slot-scope="scope">
                            <span>{{scope.row.browseNum || 0}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tipNum" label="打赏量">
                        <template slot-scope="scope">
                            <span>{{scope.row.tipNum || 0}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="examineFlag" label="审核状态">
                        <template slot-scope="scope">
                            <span class="warn" v-show="scope.row.examineFlag == 0">未审核</span>
                            <span class="success" v-show="scope.row.examineFlag == 1">审核通过</span>
                            <RejectReason :content="scope.row.notExamineReason" v-show="scope.row.examineFlag == 2"></RejectReason>
                        </template>
                    </el-table-column>
                    <el-table-column prop="hotFlag" label="置顶" min-width="110px;" v-if="show">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.hotFlag" active-text="开" inactive-text="关" :active-value="1" :inactive-value="0" :disabled="scope.row.examineFlag !==1" @change="switchShow(scope.row.hotFlag, scope.row.id)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="statuz" label="启用状态" min-width="110px;" v-if="show">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.statuz" active-text="开" inactive-text="关" :active-value="1" :inactive-value="0" :disabled="scope.row.examineFlag !==1" @change="switchChange(scope.row.statuz, scope.row.id)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="300px;">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain round @click="deleteData(scope.row.id)" v-if="show">删除</el-button>
                            <el-button size="mini" type="primary" plain round :disabled="scope.row.examineFlag === 1" @click="edit(scope.row)" v-if="show">编辑</el-button>
                            <!-- <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-show="stickShow"
                                v-if="show"
                                @click="toTop(scope.row.id, scope.row.hotFlag)"
                            >{{ scope.row.hotFlag === 1 ? '取消置顶' : '置顶' }}</el-button>-->
                            <el-button size="mini" type="primary" plain round @click="showDetailsDialog(scope.row)">详情</el-button>
                            <el-button type="primary" plain round size="mini" v-if="!show" @click="pass(scope.row.id)">通过</el-button>
                            <el-button type="primary" plain round size="mini" v-if="!show" @click="rejectShow(scope.row.id)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent :total="total" @pagination="handlePagination" :pageSize.sync="page.pageSize" :pageNum.sync="page.pageNum"></PageComponent>
                </div>
            </div>
        </div>
        <!-- 添加与编辑弹层 -->
        <AddEditDialog @queryListData="queryListData" ref="addEditDialog"></AddEditDialog>
        <!-- 详情弹层 -->
        <DetailsDialog @queryListData="queryListData" ref="detailsDialog"></DetailsDialog>
        <!-- 驳回弹窗 -->
        <RejectDialog @isReject="isReject" ref="regectDialog"></RejectDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import AddEditDialog from './components/addEditDialog';
import DetailsDialog from './components/detailsDialog';
import RejectDialog from '@/apps/mobile/components/reject/index';
import RejectReason from '@/apps/mobile/components/ReasonForRejection/index';
import { queryPage, removeData, editData, toUp, useBath, noUseBath, examine } from '@/apps/mobile/api/question/index';
import { queryAllBrand } from '@/apps/mobile/api/databank/index';
import BrandList from '@/apps/mobile/components/brandLongSerch/index'; // 电梯品牌远程搜索
export default {
    components: {
        TitleBar,
        AddEditDialog,
        DetailsDialog,
        RejectDialog,
        RejectReason,
        BrandList,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 0,
            listLoading: false, // table是否展示loading
            ids: [], // 选中的列
            stickShow: true,
            show: 1, // 控制页面按钮的显隐,进入审批页面会变为0
            allBrandList: [],
            selection: [],
        };
    },
    created() {
        this.$nextTick(() => {
            this.queryListData();
        });
    },
    methods: {
        /**
         * 新增
         */
        create() {
            this.$refs.addEditDialog.open('add');
        },
        /**
         * 编辑
         */
        edit(data) {
            this.$refs.addEditDialog.open('edit', data);
        },
        /**
         * table选择列被改变时
         * @param {Array} data 选中的列
         */
        selectionChange(data) {
            this.selection = data;
            this.ids = data.map((item) => {
                return item.id;
            });
        },
        showDetailsDialog(data) {
            this.$refs.detailsDialog.open(data);
        },
        // 进入审批页面则执行该函数
        changeShow() {
            this.show = 0;
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                examineFlag: this.show === 0 ? 0 : null,
                ...this.page,
                ...this.searchForm,
                platform: 'web',
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryPage(obj)
                .then((res) => {
                    if (res.statusCode == '10') {
                        this.$router.replace('/login');
                    }
                    this.tableData = res.data.records;
                    this.tableData.forEach((item) => {
                        if (item.imgs) {
                            item.imgs = item.imgs.split(',');
                        }
                    });
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        /**
         * 删除功能
         * @param {String} type 授权操作类型:'batch'批量授权  'single'单个授权
         * @param {Number} id 当前需要删除的id或集合
         */
        deleteData(id, type = 'single') {
            let obj = {};
            if (type === 'batch') {
                if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
                // console.log(this.ids, "ids");
                obj = {
                    ids: this.ids,
                };
                this.delete(obj);
            } else {
                obj = {
                    ids: [id],
                };
                this.delete(obj);
            }
        },
        delete(obj) {
            this.$confirm('确定要删除该数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false,
            })
                .then(() => {
                    removeData(obj)
                        .then(() => {
                            this.$message.success('删除成功');
                            this.queryListData();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        // 启用状态改变时
        switchChange(val, id) {
            let obj = {
                statuz: val,
                id,
            };
            this.changeData(obj);
        },
        //首页展示
        switchShow(val, id) {
            let obj = {
                hotFlag: val,
                id,
            };
            this.changeData(obj);
        },
        // 编辑
        changeData(data) {
            editData(data)
                .then(() => {
                    this.$message.success('修改成功');
                    this.queryListData();
                })
                .catch((err) => err);
        },
        // 置顶
        // toTop(id, type) {
        //     if (type !== 1) {
        //         toUp(id)
        //             .then(() => {
        //                 this.$message.success('操作成功');
        //                 this.queryListData();
        //             })
        //             .catch(err => err);
        //     } else {
        //         let obj = {
        //             id,
        //             hotFlag: 0,
        //         };
        //         editData(obj).then(() => {
        //             this.$message.success('操作成功');
        //             this.queryListData();
        //         });
        //     }
        // },
        // 批量开启
        batchPutaway() {
            const ids = this.selection.filter((item) => {
                return item.examineFlag === 1;
            });
            const arr = ids.map((item) => {
                return item.id;
            });
            if (arr.length === 0) {
                this.$message.warning('请至少选中一项审核通过的!');
                return false;
            }
            useBath({ ids: arr })
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch(() => {});
        },
        // 批量关闭
        batchUnshelve() {
            const ids = this.selection.filter((item) => {
                return item.examineFlag === 1;
            });
            const arr = ids.map((item) => {
                return item.id;
            });
            if (arr.length === 0) {
                this.$message.warning('请至少选中一项审核通过的!');
                return false;
            }
            noUseBath({ ids: arr })
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch((err) => err);
        },
        // 查询
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '') {
                    delete this.searchForm[k];
                }
            }
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.$refs.brand.reset();
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 审核通过  (仅在审批页面使用)
        pass(id) {
            this.$confirm('是否通过审批?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let obj = {
                        id,
                        examineFlag: 1,
                    };
                    this.approval(obj);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消',
                    });
                });
        },

        // 驳回弹框
        rejectShow(id) {
            this.$refs.regectDialog.open(id);
        },
        // 驳回 (审批页面调用)
        isReject(data) {
            let obj = {
                id: data.id,
                notExamineReason: data.checkComment,
                examineFlag: 2,
            };
            this.approval(obj);
        },
        // 审批
        approval(data) {
            examine(data).then((res) => {
                if (res.statusCode === '1') {
                    this.$message.success('操作成功');
                } else {
                    this.$message.success(res.message);
                }
                this.queryListData();
            });
        },
        brandChange(data) {
            if (data.id) {
                this.searchForm.brandId = data.id;
            } else {
                this.searchForm.brandId = null;
            }
        },
        imgOpen(imgs) {
            window.open(imgs);
        },
    },
};
</script>
<style lang="stylus" scoped>
.my-open-img{
    ::v-deep .el-image{
        img{
            pointer-events: auto;
        }

        .el-icon-circle-close {
            font-size: 50px;
            color: #fff;
        }
    }
}
</style>