programs_info/小艾协同/前端实现分页也可以多选的效果/testToPlanUsecase.vue

<template>
    <!--    关联用例库-->
    <div>
        <el-dialog
            :title="dialogTitlePlanUsecase"
            :visible.sync="dialogVisiblePlanUsecase"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @open="dlgOpen"
            @close="dlgClose"
            width="90%"
            top="20px"
        >
            <div>

                <el-row class="handle-box" style="margin-bottom: 10px">
                    <el-col :span="16">
                        <el-select
                            v-model="search.usecaseType"
                            size="small"
                            filterable
                            clearable
                            placeholder="用例类型"
                            @change="handleSearch"
                        >
                            <!--                    <el-option label="功能测试" value="功能测试"></el-option>-->
                            <!--                    <el-option label="性能测试" value="性能测试"></el-option>-->
                            <!--                    <el-option label="兼容测试" value="兼容测试"></el-option>-->
                            <el-option
                                v-for="item in dc_data.TEST_USECASE_TYPE"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-input
                            v-model="search.createdByName"
                            size="small"
                            placeholder="创建人"
                            class="ch-input ch-input-size"
                            @keyup.enter.native="handleSearch()"
                        />
                        <el-select
                            v-model="search.priority"
                            size="small"
                            filterable
                            clearable
                            placeholder="请选择优先级"
                            @change="handleSearch"
                        >
                            <!--                    <el-option label="P0" value="P0"></el-option>-->
                            <!--                    <el-option label="P1" value="P1"></el-option>-->
                            <!--                    <el-option label="P2" value="P2"></el-option>-->

                            <el-option
                                v-for="item in dc_data.TEST_USECASE_PRIORITY"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>

                    </el-col>
                    <el-col :span="3" offset="5">
                        <el-button size="small" class="ch-button-warning" @click="handleReset()"><i
                            class="el-icon-aim"
                        />&nbsp;重置
                        </el-button>
                        <el-button size="small" class="ch-button" @click="handleSearch()"><i class="el-icon-search"/>&nbsp;搜索
                        </el-button>

                    </el-col>
                </el-row>
                <!--                <button @click="test()">test</button>-->
                <p> &nbsp;&nbsp;&nbsp;&nbsp;选中数量 : {{ idList.length }}</p>
                <el-row class="handle-box">
                    <el-col :span="24">
                        <el-table
                            ref="multipleTable"
                            v-loading="loading"
                            :data="AllData"
                            stripe
                            border
                            row-class-name="g_table_row"
                            @selection-change="handleSelectionChange"
                        >
                            <!--            @sort-change="sortChange"-->
                            <el-table-column
                                type="selection"
                                width="55"
                            />
                            <el-table-column label="ID" prop="idPro" width="50"/>
                            <!--                            <el-table-column label="项目名称" prop="projectName"/>-->
                            <el-table-column label="用例标题" prop="usecaseTitle"/>
                            <el-table-column label="优先级" prop="priority"/>
                            <el-table-column label="创建人" prop="createdByName"/>
                            <el-table-column label="创建时间" prop="createdAt"/>
                            <el-table-column label="用例类型" prop="usecaseType"/>
                        </el-table>
                        <div class="table-page">
                            <el-pagination
                                :current-page.sync="currentPage"
                                :page-size="pageSize"
                                :page-sizes="[5, 8, 10, 12, 15]"
                                background
                                layout="sizes, total, prev, pager, next"
                                :total="allpage"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisiblePlanUsecase = false">取 消</el-button>
                <el-button type="primary" @click="confirmSubmit()">保 存</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
import Base from '../base/base'

export default {
    name: 'TestToPlanUsecase',
    components: {},
    mixins: [Base],
    data() {
        return {
            children: 'this is children',
            // 主界面交互字段是否进行了保存
            isPlanUsecaseSave: false,
            // 查询的时候用的字典========================================
            dc_key: ['TEST_USECASE_TYPE', 'TEST_USECASE_PRIORITY'],
            search: {
                priority: '',
                createdByName: '',
                usecaseType: ''
                // associatedProjectId: ''
            },
            // ========================================================
            // 列表相关=================================================
            // 列表中的内容
            AllData: [],
            // 加载中
            loading: false,
            // 选中事件的id列表
            idList: [],
            pageSize: 10,
            // 数据页,就是当前页已经改成第二页了,但是数据对应的页码还是第一页就会有问题,所以单独设置出来
            datacurrentPage: 1,
            // 判断是不是自己主动进行的选择操作,这样可以跳过触发handleSelectionChange事件的问题
            isMyselSelect: false,
            // =====================================================
            // 本页面弹框信息
            id: '',
            dialogVisiblePlanUsecase: false,
            dialogTitlePlanUsecase: ''
            // ===================================

        }
    },
    mounted() {
        // const _this = this
        // this.initDict(_this.dc_key).then((res) => {
        //     console.log('0')
        //     // 获取列表数据
        //     _this.getData()
        // })
    },
    methods: {
        dlgOpen() {
            const _this = this
            this.initDict(_this.dc_key).then((res) => {
                // console.log('0')
                // 获取列表数据
                _this.getData()
                _this.isPlanUsecaseSave = false
            })
        },
        dlgClose() {
            // console.log('close')
            // const _this = this
            this.idList = []
        },
        test() {
            console.log(1)
            console.log(this.AllData)
            this.$refs.multipleTable.toggleRowSelection(this.AllData[0])
        },
        // zt自己建的进入该界面的初始化方法
        initData(dialogTitlePlanUsecase, row) {
            const _this = this
            _this.dialogTitlePlanUsecase = dialogTitlePlanUsecase
            _this.dialogVisiblePlanUsecase = true

            // console.log(row)
        },
        getData: function() {
            const _this = this
            // console.log(_this.currentPage)
            _this.loading = true
            _this.AllData = []
            _this.search.pageNum = _this.currentPage
            // console.log(_this.currentPage)
            _this.search.pageSize = _this.pageSize
            this.baseRequest('listVo', _this.search).then((res) => {
                if (res.data.rows) {
                    res.data.rows.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                    _this.allpage = res.data.total
                    _this.datacurrentPage = _this.currentPage
                    // 对分页进行判断是否已经选择了分页中的数据
                    // eslint-disable-next-line no-lone-blocks
                    {
                        if (this.idList.length === 0) {
                            // console.consolelog('no info')
                        } else {
                            for (let i = 0; i < _this.idList.length; i++) {
                                // console.log('000...' + _this.idList[i])
                                if (_this.idList[i].indexOf('@#' + _this.currentPage + '#@') !== -1) {
                                    // console.log('111...' + _this.idList[i])
                                    for (let j = 0; j < _this.AllData.length; j++) {
                                        // console.log('222...' + _this.idList[i])
                                        if (_this.AllData[j].id === _this.idList[i].substring(0, _this.idList[i].indexOf('@#' + _this.currentPage + '#@'))) {
                                            // console.log('333...' + _this.idList[i])
                                            // 这个操作会触发handleSelectionChange的事件,导致有问题,会将别的选项删除
                                            _this.isMyselSelect = true
                                            _this.$refs.multipleTable.toggleRowSelection(_this.AllData[j])
                                        }
                                    }
                                }
                            }
                            _this.isMyselSelect = false
                            // console.log('has info')
                        }

                    }
                }
                _this.loading = false
            }).catch(() => {
            })
            // this.initOutData()
        },
        handleSearch: function() {
            this.getData()
        },
        handleReset: function() {
            this.submitTime = []
            for (const i in this.search) {
                if (i !== 'pageNum' && i !== 'pageSize') {
                    this.search[i] = ''
                }
            }
            this.handleSearch()
        },
        // 选中事件
        handleSelectionChange(val) {
            // console.log('自动操作,当前页数:' + this.currentPage + '===' + this.datacurrentPage)
            if (this.isMyselSelect) {
                return
            }

            if (this.datacurrentPage !== this.currentPage) {
                return
            }

            if (this.idList.length === 0) {
                // console.consolelog('no info')
            } else {
                for (let i = 0; i < this.idList.length; i++) {
                    if (this.idList[i].indexOf('@#' + this.currentPage + '#@') != -1) {
                        this.idList.splice(i, 1)
                        i--
                    }
                }
                // console.log('has info')
            }
            val.forEach(element => {
                this.idList.push(element.id + '@#' + this.currentPage + '#@')
            })
            // console.log(this.idList)
        },

        getItemJson: function(item) {
            // const json = {
            //     createdAt: item.createdAt ? this.$common.transDate(item.createdAt,this.$constant.DATE_PATTERN.DATE_TIME_h) : ''
            // }
            // return json
            item.createdAt = item.createdAt ? this.$common.transDate(item.createdAt, this.$constant.DATE_PATTERN.DATE_TIME_h) : ''
            return item
        },

        // 保存/编辑数据
        confirmSubmit: function() {
            const _this = this
            _this.$confirm('确认是否保存关联用例?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // _this.opRecordSavePlanUsecase(null, null)
                console.log('进行保存....')
                _this.isPlanUsecaseSave = true
                _this.dialogVisiblePlanUsecase = false
                // this.$emit('passfunction', _this.children)
                this.$emit('childEvent',_this.isPlanUsecaseSave)
                console.log('end')
            }).catch(() => {
                _this.$message({
                    type: 'info',
                    message: '已取消保存'
                })
            })
        },
        opRecordSavePlanUsecase: function(postData, soaUrl, isRefresh) {
            // console.log('postData/soaUrl/isRefresh', postData, soaUrl, isRefresh)
            if (isRefresh === undefined) {
                isRefresh = true
            }
            const _this = this
            const acting = this.$notify({
                title: '正在处理,请稍等',
                type: 'warning'
            })
            return this.baseRequest(soaUrl, postData).then((res) => {
                acting.close()
                if (isRefresh) {

                    _this.$notify({
                        title: '处理成功',
                        type: 'info'
                    })
                }
            }).catch((err) => {
                acting.close()
                _this.$alert(err)
            })
        },
        /* 分页设定*/
        handleSizeChange: function(val) {
            this.pageSize = val
            this.getData()
        },
        /* 分页设定*/
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        },

        baseRequest(opUrl, postData) {
            return this.$channel.globleRequest('TestUsecaseController', opUrl, postData, 'project')
        }
    }
}
</script>

<style scoped>
.ch-input .el-input__inner {
    border-radius: 0px;
    border-color: #32323A;
}

.ch-input-size {
    width: 150px;
}

.ch-button {
    border-radius: 0px;
    border-color: #32323A;
    background-color: #32323A;
    color: #fff;
}

.ch-button-warning {
    margin-left: 10px;
    border-radius: 0px;
    border-color: #E6A23C;
    background-color: #E6A23C;
    color: #fff;
}

.ch-button-export {
    margin-left: 10px;
    border-radius: 0px;
    border-color: #98CC1F;
    background-color: #98CC1F;
    color: #fff;
}
</style>