programs_info/小艾协同/专利申报信息/测试用例前段vue代码.txt

<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"
            append-to-body
        >
            <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-refresh"
                        />&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 {
            // 主界面交互字段是否进行了保存
            isPlanUsecaseSave: false,
            // 查询的时候用的字典========================================
            dc_key: ['TEST_USECASE_TYPE', 'TEST_USECASE_PRIORITY'],
            search: {
                priority: '',
                createdByName: '',
                usecaseType: ''
                // associatedProjectId: ''
            },
            // ========================================================
            // 列表相关=================================================
            // 列表中的内容
            AllData: [],
            // 加载中
            loading: false,
            // 选中事件的id列表
            idList: [],
            pageSize: 100000,
            // 数据页,就是当前页已经改成第二页了,但是数据对应的页码还是第一页就会有问题,所以单独设置出来
            // datacurrentPage: 1,
            // 判断是不是自己主动进行的选择操作,这样可以跳过触发handleSelectionChange事件的问题
            isMyselSelect: false,
            // =====================================================
            // 本页面弹框信息
            dialogVisiblePlanUsecase: false,
            dialogTitlePlanUsecase: '',
            // ===================================
            // planId上个界面传进来的计划id associatedProjectId上个界面传进来的项目id
            planId: '',
            associatedProjectId: ''
        }
    },
    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
            _this.planId = row.id
            _this.associatedProjectId = row.proId
            // console.log(row)
        },
        getData: function() {
            const _this = this
            // console.log(_this.currentPage)
            _this.idList = []
            _this.loading = true
            _this.AllData = []
            _this.search.pageNum = _this.currentPage
            // console.log(_this.currentPage)
            _this.search.pageSize = _this.pageSize
            _this.search.planId = _this.planId
            _this.search.associatedProjectId = _this.associatedProjectId
            this.baseRequest('listVoWithHasSelect', _this.search).then((res) => {
                if (res.data.rows) {
                    _this.isMyselSelect = true
                    for (let i = 0; i < res.data.rows.length; i++) {
                        const json = _this.getItemJson(res.data.rows[i])
                        _this.AllData.push(json)
                        // console.log(res.data.rows[i].planId)
                        if (res.data.rows[i].planId) {
                            _this.$refs.multipleTable.toggleRowSelection(_this.AllData[i])
                            _this.idList.push(json.id)
                        }
                    }
                    _this.isMyselSelect = false
                    // 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 + '#@')
            // })}

            // eslint-disable-next-line no-lone-blocks
            { // 老的方法
                this.idList = []
                val.forEach(element => {
                    this.idList.push(element.id)
                })
                // 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(() => {
                console.log('进行保存....')

                const postData = {
                    planId: _this.planId

                }
                // eslint-disable-next-line no-empty
                if (this.idList.length === 0) {
                } else {
                    postData.usecaseIds = JSON.stringify(_this.idList)
                }
                _this.opRecordSavePlanUsecase(postData, 'addUpdate')

                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.testPlanUsecaseControllerRequest(soaUrl, postData).then((res) => {
                acting.close()
                if (isRefresh) {
                    _this.$notify({
                        title: '处理成功',
                        type: 'info'
                    })
                }
                _this.isPlanUsecaseSave = true
                _this.dialogVisiblePlanUsecase = false
                this.$emit('childEvent', _this.isPlanUsecaseSave)
            }).catch((err) => {
                acting.close()
                _this.$alert(err)
            })
        }
        ,
        /* 分页设定*/
        handleSizeChange: function(val) {
            this.pageSize = val
            this.getData()
        }
        ,
        /* 分页设定*/
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        }
        ,

        testPlanUsecaseControllerRequest(opUrl, postData) {
            return this.$channel.globleRequest('TestPlanUsecaseController', opUrl, postData, 'project')
        }
        ,
        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>
<template>
    <!--    用例库-->
    <div>
        <el-row class="handle-box" style="margin-bottom: 10px">
            <el-col :span="16">
                <!--                vue 回车触发聚焦 @keyup.enter.native-->
                <!--                <el-input-->
                <!--                    v-model="search.projectName"-->
                <!--                    style="width: 350px"-->
                <!--                    size="small"-->
                <!--                    placeholder="项目名称"-->
                <!--                    class="ch-input ch-input-size"-->
                <!--                    @change="handleSearch()"-->
                <!--                />-->
                <el-select
                    style="width: 250px"
                    v-model="search.associatedProjectId"
                    size="small"
                    filterable
                    clearable
                    placeholder="项目名称"
                    @change="handleSearch()"
                >
                    <el-option
                        v-for="item in ProjectData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                            style="float: right; color: #8492a6; font-size: 13px"
                        >{{ item.custname }}</span>
                    </el-option>
                </el-select>
                <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="8">
                <el-button size="small" class="ch-button-warning" @click="handleReset()"><i class="el-icon-refresh"/>&nbsp;重置
                </el-button>
                <el-button size="small" class="ch-button" @click="handleSearch()"><i class="el-icon-search"/>&nbsp;搜索
                </el-button>
                <el-button size="small" class="ch-button-export" @click="initOutData()"><i class="el-icon-download"/>&nbsp;导出用例
                </el-button>
                <el-button size="small" class="ch-button" @click="handleAdd()"><i class="el-icon-menu"/>&nbsp;新增用例
                </el-button>
                <!--        <el-button size="small" class="ch-button" @click="deleteRecord()"><i class="el-icon-menu" />&nbsp;批量删除</el-button>-->
            </el-col>
        </el-row>
        <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" type="index" width="50" fixed />-->
                    <!--                    <el-table-column label="ID" prop="idPro" width="100" fixed>-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <span style="color: blue" @click="viewInfo(scope.row)">{{ scope.row.idPro }}</span>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                    <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="createdByName"/>
                    <el-table-column label="创建时间" prop="createdAt"/>
                    <el-table-column label="优先级" prop="priority"/>
                    <el-table-column label="用例类型" prop="usecaseType"/>
                    <!--          <el-table-column label="实际处理日期" prop="actCompletionDate" width="150" sortable="custom" />-->
                    <el-table-column label="操作" header-align="center" width="220" fixed="right">
                        <template scope="scope">
                            <el-button size="mini" type="primary" @click="handleCopyEdit(scope.row)">复制</el-button>
                            <!--                            <el-button v-if="scope.row.status=='1'" size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>-->
                            <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.row)"
                            >编辑
                            </el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="deleteSelect(scope.row) "
                            >删除
                            </el-button>
                        </template>
                    </el-table-column>
                </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>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="75%"
            top="50px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @open="dlgOpen"
            @close="dlgClose"
        >
            <el-form ref="form" :model="form" style="width: 100%;padding: 0px 5px 5px 5px" :rules="rules">
                <el-row>
                    <el-col style="padding-bottom: 10px">
                        <!--                        <span class="card_title">基本信息</span>-->
                        <el-card shadow="always" style="padding: 15px 5px 5px 15px">
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>关联项目</span></el-col>
                                <el-col :span="10" class="col-input">
                                    <el-form-item prop="associatedProjectId">
                                        <el-select
                                            v-model="form.associatedProjectId"
                                            filterable
                                            clearable
                                            placeholder="项目名称"
                                            @change="getCustName(form.associatedProjectId)"
                                        >
                                            <el-option
                                                v-for="item in ProjectData"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            >
                                                <span style="float: left">{{ item.label }}</span>
                                                <span
                                                    style="float: right; color: #8492a6; font-size: 13px"
                                                >{{ item.custname }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3" class="col-txt"><span>客户名称</span></el-col>
                                <el-col :span="5" class="col-input">
                                    <el-input v-model="form.custName" readonly></el-input>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>用例主题</span></el-col>
                                <el-col :span="18" class="col-input">
                                    <el-form-item prop="usecaseTitle">
                                        <el-input
                                            v-model="form.usecaseTitle"
                                            :rows="1"
                                            type="textarea"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="3" class="col-txt"><span>用例类型</span></el-col>
                                <el-col :span="5" class="col-input">
                                    <el-form-item prop="usecaseType">
                                        <el-select
                                            v-model="form.usecaseType"
                                            filterable
                                            clearable
                                            placeholder="用例类型"
                                        >
                                            <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="form.bugType" />-->
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3" class="col-txt"><span>优先级</span></el-col>
                                <el-col :span="5" class="col-input">
                                    <el-form-item prop="priority">
                                        <el-select
                                            v-model="form.priority"
                                            filterable
                                            clearable
                                            placeholder="优先级"
                                        >
                                            <el-option
                                                v-for="item in dc_data.TEST_USECASE_PRIORITY"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                        <!--                    <el-input v-model="form.bugAttribute" />-->
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>前置条件</span></el-col>
                                <el-col :span="18" class="col-input">
                                    <el-form-item prop="preconditions">
                                        <el-input v-model="form.preconditions" type="textarea"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>按步骤执行</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>#</span></el-col>
                                <el-col :span="10" class="col-input"><span>步骤描述</span></el-col>
                                <el-col :span="8" class="col-input"><span>预期结果</span></el-col>
                            </el-row>
                            <el-row style="list-style: none" v-for="(item,index) in array" :key="index">
                                <el-col :span="3" class="col-txt"><span>{{ index + 1 }}</span></el-col>
                                <el-col :span="10" class="col-input">
                                    <el-form-item>
                                        <el-input
                                            v-model="item.step"
                                            :rows="1"
                                            type="textarea"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" class="col-input">
                                    <el-form-item>
                                        <el-input
                                            v-model="item.expectedResults"
                                            :rows="1"
                                            type="textarea"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" class="col-txt">
                                    <el-button @click="addStep(index)" type="primary" size="small" circle>+</el-button>
                                </el-col>
                                <el-col :span="1" class="col-txt">
                                    <el-button v-if="array.length!=1||index!=0" @click="removeSetp(index)" type="danger"
                                               size="small" icon="el-icon-delete" circle
                                    ></el-button>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="!viewVisible" type="primary" @click="confirmSubmit()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import Base from '../base/base'
import BaseData from '../base/baseData'
// import QuillEditor from '@/components/QuillEditor'
// import { upload } from '@/static/utils/channel'
// import UserSelect from '@/views/components/UserSelect'
// import BizUserSelect from '@/views/components/BizUserSelect'
// import { sendSock, createWebSocket, closeSock } from '@/static/utils/socket'
// import common from '@/static/utils/common'

export default {
    name: 'TestUsecase',
    components: {
        // QuillEditor,
        // UserSelect,
        // BizUserSelect
    },
    mixins: [Base, BaseData],
    data() {
        return {
            // 查询的时候用的字典========================================
            dc_key: ['TEST_USECASE_TYPE', 'TEST_USECASE_PRIORITY'],
            // ========================================================
            // 列表相关=================================================
            // 列表中的内容
            AllData: [],
            // 加载中
            loading: false,
            // 选中事件的id列表
            idList: [],
            // =====================================================

            // 弹框相关============================================================
            form: this.initForm(),
            // 是否只是查看
            viewVisible: false,
            // 判断弹框界面是否开着
            dialogVisible: false,
            dialogTitle: '新增',
            // 是否是新增
            isAdd: true,
            // 添加步骤
            array: [
                //     {
                // id
                //     step: '步骤1',
                //     expectedResults: '预期结果1'
                // }, {
                //     step: '步骤2',
                //     expectedResults: '预期结果2'
                // }, {
                //     step: '步骤3',
                //     expectedResults: '预期结果3'
                // }
            ],

            // ================================================================

            search: {
                priority: '',
                createdByName: '',
                usecaseType: '',
                projectName: ''

                // date_from_1: '',
                // date_to_1: '',

            },
            currentPage: 1,
            allpage: 0,
            pageSize: 10,
            // wxCodeUrl: false,
            rules: {
                associatedProjectId: [{ required: true, message: '请选择项目', trigger: 'blur' }],
                usecaseTitle: [{ required: true, message: '请输入用例主题', trigger: 'blur' }],

                usecaseType: [{ required: true, message: '请选择用例类型', trigger: 'blur' }],
                priority: [{ required: true, message: '请选择优先级', trigger: 'blur' }],
                handleUserId: [{ required: true, message: '请选择处理人', trigger: 'blur' }]
            }

        }
    },
    mounted() {
        const _this = this
        this.initDict(_this.dc_key).then((res) => {
            console.log('初始化')
            // console.log(_this.dc_data)
            // 获取列表数据
            _this.getData()
            // 获取项目数据
            _this.initProject()
            // console.log(_this.ProjectData)
            // console.log(_this.ProjectMap)
        })
    },
    methods: {
        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.loading = false
            }).catch(() => {
            })
            // this.initOutData()
        },
        // 添加步骤
        addStep(index) {
            const _this = this
            // 如果序号大于最大值,就是屁股插入,不然就是中间插入
            if ((index + 2) > _this.array.length) {
                _this.array.push({
                    id: '',
                    step: '',
                    expectedResults: ''
                })
            } else {
                _this.array.splice(index + 1, 0, {
                    id: '',
                    step: '',
                    expectedResults: ''
                })
            }
        },
        // 删除步骤
        removeSetp(index) {
            const _this = this
            if (_this.array) {
                _this.array.splice(index, 1)
            }
        },
        // 将项目名称对应的客户名称填到对应的字段中
        getCustName(val) {
            const _this = this
            // console.log('hello')
            // console.log(_this.ProjectData.length)
            // console.log(val)
            for (let i = 0; i < _this.ProjectData.length; i++) {
                // console.log(_this.ProjectData[i].value)
                if (_this.ProjectData[i].value == val) {
                    // console.log('ok')
                    _this.form.custName = _this.ProjectData[i].custname
                    // console.log(_this.form.custName)
                    break
                }
            }
            // console.log(_this.form)
        },

        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) {
            this.idList = []
            val.forEach(element => {
                this.idList.push(element.id)
            })
            console.log(this.idList)
        },
        // 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
        // sortChange(column,prop,order) {
        //
        // },
        // 批量删除操作
        deleteRecord: function(val) {
            if (this.idList.length === 0) {
                this.$notify({
                    title: '请先选择明细记录',
                    type: 'info'
                })
                return
            }
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.baseRequest('remove/' + this.idList).then((res) => {
                    if (res.status === 200) {
                        this.getData()
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    }
                }).catch(() => {
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 进行删除操作
        deleteSelect: function(val) {
            console.log(val)
            if (!val) {
                this.$notify({
                    title: '请先选择要删除的列',
                    type: 'info'
                })
                return
            }
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('删除' + val.id)
                this.baseRequest('remove/' + val.id).then((res) => {
                    if (res.status === 200) {
                        this.getData()
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    }
                }).catch(() => {
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        initForm: function() {
            return {
                priority: 'P0',
                id: ''
            }
        },

        // 导出数据===========================================
        initOutData: function() {
            const _this = this

            this.OutData = []
            const title = []
            title.push('编号')
            title.push('项目名称')
            title.push('客户名称')
            title.push('用例主题')
            title.push('用例类型')
            title.push('优先级')
            title.push('前置条件')
            title.push('步骤顺序号')
            title.push('步骤描述')
            title.push('预期结果')
            title.push('创建人')
            title.push('创建时间')
            this.OutData.push(title)
            let postData = {}
            postData = _this.search
            if (_this.idList.length === 0) {
                // this.$notify({
                //     title: '请先选择明细记录',
                //     type: 'info'
                // })
                // return
                postData.idList = null
            } else {
                console.log('initOutData', _this.idList)
                postData.idList = JSON.stringify(_this.idList)
            }

            this.baseRequest('findAllByInfo', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const jsonMap = _this.getItemJson(item)
                        const jsonArray = []
                        jsonArray.push(jsonMap.id)
                        jsonArray.push(jsonMap.projectName)
                        jsonArray.push(jsonMap.custName)
                        jsonArray.push(jsonMap.usecase_title)
                        jsonArray.push(jsonMap.usecase_type)
                        jsonArray.push(jsonMap.priority)
                        jsonArray.push(jsonMap.preconditions)
                        jsonArray.push(jsonMap.stepIndex)
                        jsonArray.push(jsonMap.stepdescribe)
                        jsonArray.push(jsonMap.expected_results)
                        jsonArray.push(jsonMap.createdByName)
                        jsonArray.push(jsonMap.createdAtString)
                        _this.OutData.push(jsonArray)
                    })
                    _this.confirmOutput()
                }
            }).catch(() => {
            })
        },

        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
        },
        confirmOutput() {
            const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }]
            const fileName = '导出用例' + new Date().Format('yyyy-MM-dd hh:mm')
            this.$outputXlsxFile(this.OutData, OutSize, fileName)
        },
        dlgClose() {
            // const _this = this
            if (!this.isAdd) {
                this.array = []
                this.form = this.initForm()
            } else if (this.dialogTitle === '复制') {
                this.array = []
                this.form = this.initForm()
            }
        },
        dlgOpen: function() {
            const _this = this
            console.log(_this.array)
            if (_this.form.id !== '') {
                _this.array = []
                const postData = {
                    id: _this.form.id
                }
                this.baseRequest('getVoById', postData).then((res) => {
                    if (res.data) {
                        _this.form = res.data
                    }
                }).catch(() => {
                })
                this.testUsecaseStepControllerRequest('findListByUsecaseId', { usecaseId: _this.form.id }).then((res) => {
                    if (res.data) {
                        _this.array = []
                        for (let i = 0; i < res.data.length; i++) {
                            const json = {
                                id: res.data[i].id,
                                step: res.data[i].stepdescribe,
                                expectedResults: res.data[i].expectedResults
                            }
                            // console.log(json)
                            // console.log(_this.array)
                            _this.array.push(json)
                        }
                    }
                    if (this.array.length == 0) {
                        this.array.push({
                            id: '',
                            step: '',
                            expectedResults: ''
                        })
                    }
                }).catch(() => {
                })
            } else {
                if (this.array.length == 0) {
                    this.array.push({
                        id: '',
                        step: '',
                        expectedResults: ''
                    })
                }
            }
        },

        /* 编辑*/
        handleEdit: function(val) {
            this.isAdd = false
            this.form.id = val.id
            this.dialogVisible = true
            this.dialogTitle = '编辑'
            this.viewVisible = false
        },
        // 复制数据
        handleCopyEdit: function(val) {
            this.isAdd = true
            this.form.id = val.id
            this.dialogVisible = true
            this.dialogTitle = '复制'
            this.viewVisible = false
        },
        // 查看
        viewInfo: function(val) {
            this.isAdd = false
            this.form.id = val.id
            this.dialogVisible = true
            this.dialogTitle = '查看'
            this.viewVisible = true
        },
        /* 新增*/
        handleAdd: function() {
            this.form = this.initForm()
            this.isAdd = true
            this.dialogVisible = true
            this.dialogTitle = '新增用例'
            this.viewVisible = false
            if (this.array) {
                // console.log(this.array.length)
                for (let i = 0; i < this.array.length; i++) {
                    // console.log(this.array[i].step)
                    // console.log(this.array[i].expectedResults)
                    if (this.array[i].step == '' && this.array[i].expectedResults == '') {
                        this.array.splice(i, 1)
                        i--
                    }
                }
                // console.log(this.array.length)
            }
        },
        // 保存/编辑数据
        confirmSubmit: function() {
            const _this = this
            this.$refs.form.validate(valid => {
                if (valid) {
                    // if (this.fileError) {
                    //     _this.$message.error('附件正在上传，请等待上传完成')
                    //     return
                    // }
                    let soaUrl = 'edit'
                    const postData = {
                        id: _this.form.id,
                        // idPro: _this.form.idPro,
                        usecaseTitle: _this.form.usecaseTitle,
                        priority: _this.form.priority,
                        usecaseType: _this.form.usecaseType,
                        associatedProjectId: _this.form.associatedProjectId,
                        preconditions: _this.form.preconditions
                    }
                    const newArray = []
                    for (let i = 0; i < _this.array.length; i++) {
                        newArray.push(
                            {
                                id: _this.array[i].id,
                                stepNumber: i,
                                stepdescribe: _this.array[i].step,
                                expectedResults: _this.array[i].expectedResults
                            }
                        )
                    }
                    if (newArray.length !== 0) {
                        // eslint-disable-next-line no-empty
                        if (newArray.length == 1 && newArray[0].stepdescribe == '' && newArray[0].expectedResults == '') {
                        } else {
                            postData.testUsecaseSteps = JSON.stringify(newArray)
                        }
                    }
                    if (this.dialogTitle === '复制' && this.isAdd) {
                        soaUrl = 'add'
                        // postData.handleTime = ''
                        // postData.verificationTime = ''
                        // postData.verificationSituation = ''
                        // postData.actCompletionDate = ''
                    } else if (this.isAdd) {
                        soaUrl = 'add'
                    }
                    // console.log(postData)
                    if (soaUrl == 'edit') {
                        this.$confirm('此操作将永久修改该数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.opRecord(postData, soaUrl)
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            })
                        })
                    } else {
                        this.opRecord(postData, soaUrl)
                    }
                    _this.array = []
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },

        /* 分页设定*/
        handleSizeChange: function(val) {
            this.pageSize = val
            this.getData()
        },
        /* 分页设定*/
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        },
        testUsecaseStepControllerRequest(opUrl, postData) {
            return this.$channel.globleRequest('TestUsecaseStepController', opUrl, postData, 'project')
        },
        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>
<template>
    <!--    测试计划-->
    <div>
        <!--                                ==============================================================================-->
        <!--                                ==============================================================================-->
        <!--        <el-button @click="test()">测试</el-button>-->
        <!--                                ==============================================================================-->
        <!--                                ==============================================================================-->
        <el-row class="handle-box" style="margin-bottom: 10px">
            <el-col :span="12">
                <!--                vue 回车触发聚焦 @keyup.enter.native-->
                <!--                <el-input-->
                <!--                    v-model="search.projectName"-->
                <!--                    style="width: 350px"-->
                <!--                    size="small"-->
                <!--                    placeholder="项目名称"-->
                <!--                    class="ch-input ch-input-size"-->
                <!--                    @change="handleSearch()"-->
                <el-select
                    v-model="search.proId"
                    style="width: 240px"
                    size="small"
                    filterable
                    clearable
                    placeholder="项目名称"
                    @change="handleSearch()"
                >
                    <el-option
                        v-for="item in ProjectData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                            style="float: right; color: #8492a6; font-size: 13px"
                        >{{ item.custname }}</span>
                    </el-option>
                </el-select>
                <el-select
                    v-model="search.status"
                    size="small"
                    filterable
                    clearable
                    placeholder="请选择状态"
                    @change="handleSearch"
                >
                    <!--                    状态0正常(灰色状态,未启动)1删除2正常(可用状态)3用例执行完成',-->

                    <el-option label="未启动" value="0"/>
                    <el-option label="进行中" value="2"/>
                    <el-option label="已完成" value="3"/>

                    <!--                    <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.handleUserNames"
                    size="small"
                    placeholder="负责人"
                    class="ch-input ch-input-size"
                    @keyup.enter.native="handleSearch()"
                />
            </el-col>
            <el-col :span="8" offset="4">
                <el-button size="small" class="ch-button-warning" @click="handleReset()"><i class="el-icon-refresh"/>重置
                </el-button>
                <el-button size="small" class="ch-button" @click="handleSearch()"><i class="el-icon-search"/>&nbsp;搜索
                </el-button>
                <!--                <el-button size="small" class="ch-button-export" @click="initOutData()"><i class="el-icon-download"/>&nbsp;导出用例-->
                <!--                </el-button>-->
                <el-button size="small" class="ch-button" @click="handleAdd()"><i class="el-icon-menu"/>&nbsp;新增测试计划
                </el-button>
                <!--                <el-button size="small" class="ch-button" @click="handleEditTop()"><i class="el-icon-menu"/>&nbsp;计划编辑-->
                <!--                </el-button>-->
                <!--                <el-button size="small" class="ch-button" @click="handleStatusTop()"><i class="el-icon-menu"/>&nbsp;计划状态-->
                <!--                </el-button>-->
                <!-- <el-button size="small" class="ch-button" @click="deleteRecord()"><i class="el-icon-menu" />&nbsp;批量删除</el-button>-->
            </el-col>
        </el-row>
        <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" type="index" width="50" fixed />-->
                    <!--                    <el-table-column label="ID" prop="idPro" width="100" fixed>-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <span style="color: blue" @click="viewInfo(scope.row)">{{ scope.row.idPro }}</span>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                    <el-table-column label="关联项目名称" prop="projectName" width="200"/>
                    <el-table-column label="关联任务ID" prop="taskNo" width="100"/>
                    <el-table-column label="测试计划名称" prop="planName" width="300"/>
                    <el-table-column label="计划完成日期" prop="completionDate" width="85"/>
                    <el-table-column label="负责人" prop="handleUserNames" width="80"/>
                    <el-table-column label="当前状态" prop="statusString" width="80"/>
                    <el-table-column label="创建人" prop="createdByName" width="80"/>
                    <el-table-column label="创建日期" prop="createdAtString" width="80"/>
                    <el-table-column label="通过率" prop="passRateString" width="80"/>
                    <el-table-column label="已测用例/关联用例" prop="passRateInfoString" width="80"/>
                    <el-table-column label="结果分布" prop="resultDistribution" width="180">
                        <template slot-scope="scope">

                            <div class="container">
                                <div class="passcontainer">

                                    <el-tooltip class="item" effect="dark"
                                                :content="countWidth(scope.row.totalNum,scope.row.passNum)+'%'"
                                                placement="top"
                                    >
                                        <div class="br5rem"
                                             :style="{width:countWidth(scope.row.totalNum,scope.row.passNum)+'%',background:'green',height:'20px',float:'left'}"
                                        >
                                        </div>
                                    </el-tooltip>

                                    <el-tooltip class="item" effect="dark"
                                                :content="countWidth(scope.row.totalNum,scope.row.repairNum)+'%'"
                                                placement="top"
                                    >
                                        <div class="br5rem"
                                             :style="{width:countWidth(scope.row.totalNum,scope.row.repairNum)+'%',background:'blue',height:'20px',float:'left'}"
                                        ></div>
                                    </el-tooltip>

                                    <el-tooltip class="item" effect="dark"
                                                :content="countWidth(scope.row.totalNum,scope.row.failNum)+'%'"
                                                placement="top"
                                    >
                                        <div class="br5rem"
                                             :style="{width:countWidth(scope.row.totalNum,scope.row.failNum)+'%',background:'red',height:'20px',float:'left'}"
                                        ></div>
                                    </el-tooltip>

                                    <el-tooltip class="item" effect="dark"
                                                :content="countWidth(scope.row.totalNum,scope.row.skipNum)+'%'"
                                                placement="top"
                                    >
                                        <div class="br5rem"
                                             :style="{width:countWidth(scope.row.totalNum,scope.row.skipNum)+'%',background:'#ECEEF4',height:'20px',float:'left'}"
                                        ></div>
                                    </el-tooltip>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="测试阶段" prop="planPhase" width="80"/>

                    <!--          <el-table-column label="实际处理日期" prop="actCompletionDate" width="150" sortable="custom" />-->
                    <el-table-column label="操作" width="200" fixed="right">
                        <!--                        <el-button v-if="this.isShowTaskEdit"  size="mini" type="primary" @click="openAddBatch()">创建批次</el-button>-->
                        <template scope="scope">
                            <!--                            <el-button v-if="this.$has('createBatch')" size="mini" type="primary" @click="openAddBatch()">创建批次</el-button>-->

                            <el-button
                                v-if="scope.row.isShowTaskEdit"
                                size="mini"
                                type="primary"
                                round
                                style="margin-bottom: 10px"
                                @click="handleEdit(scope.row)"
                            >计划编辑
                            </el-button>
                            <el-button
                                v-if="scope.row.isShowTaskStatus"
                                size="mini"
                                type="success"
                                round
                                style="margin-bottom: 10px"
                                @click="handleTaskStatus(scope.row)"
                            >计划状态
                            </el-button>
                            <br v-if="scope.row.isShowTaskStatus||scope.row.isShowTaskEdit">
                            <el-button
                                v-if="scope.row.status ==0||scope.row.status ==2"
                                size="mini"
                                type="primary"
                                :disabled="scope.row.status==0"
                                round
                                @click="handleToPlanUsecase(scope.row)"
                            >关联用例
                            </el-button>

                            <el-button
                                v-if="scope.row.status==0||scope.row.status ==2"
                                size="mini"
                                type="success"
                                :disabled="scope.row.status==0"
                                round
                                @click="handleDoPlanUsecase(scope.row)"
                            >用例执行
                            </el-button>
                            <el-button
                                v-else-if="scope.row.status==3"
                                size="mini"
                                type="success"
                                round
                                @click="handleShowPlanUsecase(scope.row)"
                            >用例执行查看
                            </el-button>
                            <!--                            <el-button-->
                            <!--                                size="mini"-->
                            <!--                                type="danger"-->
                            <!--                                @click="deleteSelect(scope.row) "-->
                            <!--                            >删除-->
                            <!--                            </el-button>-->
                        </template>
                    </el-table-column>
                </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>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="90%"
            top="25px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @open="dlgOpen"
            @close="dlgClose"
        >
            <el-form ref="form" :model="form" style="width: 100%;padding: 0px 5px 5px 5px" :rules="rules">
                <p v-if="form.taskNo">关联任务ID: {{ form.taskNo }}</p>
                <el-row>
                    <el-col style="padding-bottom: 10px;padding-top: 0px">
                        <span class="card_title">基本信息</span>
                        <el-card shadow="always" style="padding: 5px 0px 5px 0px">
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>项目名称</span></el-col>
                                <el-col :span="10" class="col-input">
                                    <el-form-item prop="proId">
                                        <el-select
                                            v-model="form.proId"
                                            filterable
                                            clearable
                                            placeholder="项目名称"
                                            @change="getCustName(form.proId)"
                                        >
                                            <el-option
                                                v-for="item in ProjectData"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            >
                                                <span style="float: left">{{ item.label }}</span>
                                                <span
                                                    style="float: right; color: #8492a6; font-size: 13px"
                                                >{{ item.custname }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3" class="col-txt"><span>客户名称</span></el-col>
                                <el-col :span="5" class="col-input">
                                    <el-input v-model="form.custName" readonly/>
                                </el-col>
                                <!--                                ==============================================================================-->
                                <!--                                ==============================================================================-->
                                <!--                                <el-button @click="test()">测试</el-button>-->
                                <!--                                ==============================================================================-->
                                <!--                                ==============================================================================-->
                            </el-row>

                            <el-row>
                                <el-col :span="1" offset="1" class="col-txt"><span>#</span></el-col>
                                <el-col :span="9" class="col-input"><span>计划名称</span></el-col>
                                <el-col :span="4" class="col-input-zt"><span>负责人</span></el-col>
                                <el-col :span="4" class="col-input"><span>计划完成日期</span></el-col>
                                <el-col :span="3" class="col-input"><span>测试阶段</span></el-col>
                                <el-col :span="2" class="col-txt-center"><span>操作</span></el-col>
                            </el-row>
                            <el-row v-for="(item,index) in array" style="list-style: none">
                                <el-col :span="1" offset="1" class="col-txt">
                                    <span>{{ (item.id == '') && !isAdd ? '新增' + (index + 1) : (index + 1) }}</span>
                                </el-col>
                                <!--                  计划内容-->
                                <el-col :span="9" class="col-input">
                                    <el-form-item prop="planName">
                                        <el-input
                                            v-model="item.planName"
                                            autosize
                                            placeholder="请输入内容"
                                            type="textarea"
                                        />
                                    </el-form-item>
                                </el-col>
                                <!--                                <el-col span="1">{{item.selectList}}</el-col>-->
                                <!--这是负责人的栏位handleUserId -->
                                <el-col :span="4" class="col-input">
                                    <el-form-item prop="handleUserId">
                                        <user-select2-z-t
                                            :array-id="index"
                                            :default-select="item.selectList"
                                            :multiple="true"
                                            @selectValue2="parentMethod"
                                        />
                                    </el-form-item>
                                </el-col>
                                <!--计划完成日期-->
                                <el-col :span="4" class="col-input-zt">
                                    <el-date-picker
                                        v-model="item.completionDate"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                        placeholder="日期"
                                    />
                                </el-col>
                                <el-col :span="3" class="col-input">
                                    <el-select
                                        v-model="item.planPhase"
                                        filterable
                                        clearable
                                        placeholder="测试阶段"
                                    >
                                        <!--                    <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_PHASE"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-col>

                                <el-col :span="1" class="col-txt">
                                    <el-button type="primary" size="small" circle @click="addStep(index)">+
                                    </el-button>
                                </el-col>
                                <el-col :span="1" class="col-txt">
                                    <el-button
                                        v-if="array.length!=1||index!=0"
                                        type="danger"
                                        size="small"
                                        icon="el-icon-delete"
                                        circle
                                        @click="removeSetp(index)"
                                    />
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col style="padding-bottom: 0px;padding-top: 0px">
                        <span class="card_title">其他信息</span>
                        <el-card shadow="always" style="padding: 15px 5px 5px 15px">
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>创建日期</span></el-col>
                                <el-col :span="5" class="col-input">
                                    <el-input v-model="form.createdAt" readonly/>
                                </el-col>
                                <el-col :span="3" offset="5" class="col-txt"><span>创建人</span></el-col>
                                <el-col :span="5" class="col-input">
                                    <el-input v-model="form.createdByName" readonly/>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="!viewVisible" type="primary" @click="confirmSubmit()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            :title="dialogTitleStatus"
            :visible.sync="dialogVisibleStatus"
            width="30%"
            top="60px"
            @open="dlgOpen"
            @close="dlgClose"
        >
            <el-form ref="form" :model="form" style="width: 100%;padding: 0px 5px 0px 5px" :rules="rules2">
                <el-card shadow="always" style="padding: 5px 5px 5px 5px">
                    <el-row>
                        <el-col :span="6" class="col-txt"><span>当前状态</span></el-col>
                        <el-col :span="18" class="col-input">
                            <el-form-item>
                                <el-select v-model="form.status" placeholder="请选择">
                                    <el-option label="未启动" value="0"/>
                                    <el-option label="进行中" value="2"/>
                                    <el-option label="完成" value="3"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" class="col-txt"><span>状态说明</span></el-col>
                        <el-col :span="18" class="col-input">
                            <el-form-item>
                                <el-input
                                    v-model="form.statusremark"
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
            </el-form>

            <div slot="footer">
                <el-button @click="dialogVisibleStatus = false">取 消</el-button>
                <el-button type="primary" @click="confirmSubmitStatus()">保 存</el-button>
            </div>
        </el-dialog>

        <TestToPlanUsecase v-if="dialogVisibleToPlanUsecase" ref="toPlanUsecase" @childEvent="getToPlanUsecaseData"/>
        <!--        下面的方式也是可以实现的-->
        <!--        <TestDoPlanUsecaseBack ref="doPlanUsecase" v-if="dialogVisibleDoPlanUsecase"/>-->
        <el-dialog
            :title="dialogTitlePlanUsecase"
            :visible.sync="dialogVisiblePlanUsecase"
            :close-on-click-modal="false"
            :close-on-press-escape="true"
            width="90%"
            top="20px"
            @close="dlgClosePlanUsecase"
        >
            <TestDoPlanUsecase v-if="dialogVisibleDoPlanUsecase" ref="doPlanUsecase"/>
        </el-dialog>
    </div>
</template>
<script>
import Base from '../base/base'
import BaseData from '../base/baseData'
import QuillEditor from '@/components/QuillEditor'
// import { upload } from '@/static/utils/channel'
import UserSelect from '@/views/components/UserSelect'
import BizUserSelect from '@/views/components/BizUserSelect'
import UserSelect2ZT from '@/views/components/UserSelect2ZT'
// import { sendSock, createWebSocket, closeSock } from '@/static/utils/socket'
// import common from '@/static/utils/common'
import TestToPlanUsecase from '@/views/testmanage/testToPlanUsecase'
import TestDoPlanUsecase from '@/views/testmanage/testDoPlanUsecase'
// import TestDoPlanUsecaseBack from '@/views/testmanage/testDoPlanUsecaseBack'
export default {
    name: 'TestPlan',
    components: {
        UserSelect2ZT,
        TestToPlanUsecase,
        TestDoPlanUsecase
        // TestDoPlanUsecaseBack,
        // QuillEditor,
        // UserSelect
        // BizUserSelect
    },
    mixins: [Base, BaseData],
    data() {
        return {

            // 新增计划/选择计划完成日期
            value1: '',

            // 查询的时候用的字典========================================
            dc_key: ['TEST_PHASE'],
            // ========================================================
            // 列表相关=================================================
            // 列表中的内容
            AllData: [],
            // 加载中
            loading: false,
            // 选中事件的id列表
            idList: [],
            // =====================================================

            // 弹框相关============================================================
            form: this.initForm(),
            // 关联任务id放在form中了
            // form.taskNo: '',
            // 负责人ids,例如:1072154901540241408,1072151835407548416
            // form.handleUserId
            // 新增计划/选择负责人,预先选择的负责人id
            // form.selectList: [],
            // 是否只是查看
            viewVisible: false,
            // 判断弹框界面是否开着
            dialogVisible: false,
            dialogTitle: '新增',
            // 是否是新增
            isAdd: true,
            // 添加计划存放的对象
            array: [],
            // 计划状态弹框================================================================
            dialogTitleStatus: '计划状态',
            dialogVisibleStatus: false,
            // 关联用例和用例执行弹框=========================================================
            dialogVisibleToPlanUsecase: false,
            dialogVisibleDoPlanUsecase: false,
            // ================================================================

            search: {
                // 项目id
                proId: '',
                // 选择状态
                status: '',
                // 负责人名称
                handleUserNames: ''

                // date_from_1: '',
                // date_to_1: '',

            },
            currentPage: 1,
            allpage: 0,
            pageSize: 5,
            // wxCodeUrl: false,
            rules: {
                proId: [{ required: true, message: '请选择项目', trigger: 'blur' }]
                // planName: [{ required: true, message: '请填写计划名称', trigger: 'blur' }],
                // urgencyDegree: [{ required: true, message: '请选择紧急程度', trigger: 'blur' }],
                // title: [{ required: true, message: '请输入主题', trigger: 'blur' }],
                // handleUserId: [{ required: true, message: '请选择处理人', trigger: 'blur' }]
            },

            // 是否展示计划编辑
            isShowTaskEdit: false,
            // 是否展示计划状态
            isShowTaskStatus: false,
            // 获取用户名称
            truename: ''

        }
    },
    mounted() {

        const _this = this
        this.initDict(_this.dc_key).then((res) => {
            console.log('初始化')
            // console.log(_this.dc_data)
            // 获取列表数据
            _this.getData()
            // 获取项目数据
            _this.initProject()
            // console.log(_this.$has('isShowTaskEdit'))
            _this.isShowTaskEdit = _this.$has('isShowTaskEdit')
            _this.isShowTaskStatus = _this.$has('isShowTaskStatus')
            // console.log(_this.isShowTaskEdit)
            // console.log(_this.ProjectData)
            // console.log(_this.ProjectMap)
            _this.handlegetMyName()
        })
    },
    methods: {
        countWidth(typenum, total) {
            console.log((total / typenum) * 100)
            return ((total / typenum) * 100).toFixed(0)

        },
        // 子传父的方法
        getToPlanUsecaseData(data) {
            console.log('子传父的方法' + data)
            if (data) {
                this.getData()
            }
        },

        // 获取用户姓名
        handlegetMyName: function() {
            // const userType = this.$common.currUserType();
            const user = this.$common.currUser()
            this.truename = user.truename
            // console.log(user)
            // if (user && userType === "2") {
            //     this.username = user.username;
            //     user.truename
            // } else {
            //     this.username = user.truename;
            // }
        },
        // 选择负责人的时候用的
        parentMethod: function(val, index) {
            // if (val.length > 0) {
            //     this.form.handleUserId = val.join(',')
            // }
            if (val.length > 0) {
                this.array[index].handleUserId = val.join(',')
            }
            // console.log('1')
            // console.log(index)
            // console.log(val)
        },
        test() {
            console.log('test')
            console.log('子传父的方法' + this.msg)
            // console.log(this.props)
            // console.log(this.options)
            // this.baseRequest('test', null).then((res) => {
            //     if (res.data) {
            //         console.log(res.data)
            //     }
            // }).catch(() => {
            // })
        },
        // 仅仅统计数据,不统计总数
        getDataOnly: 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
                // }
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                }
                _this.loading = false
            }).catch(() => {
            })
        },
        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
                // }
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                }
                _this.loading = false
            }).catch(() => {
            })

            this.baseRequest('getTotal', _this.search).then((res) => {
                if (res.data) {
                    _this.allpage = res.data
                }
                _this.loading = false
            }).catch(() => {
            })
            // this.initOutData()
        },
        // 添加步骤
        addStep(index) {
            const _this = this
            // 如果序号大于最大值,就是屁股插入,不然就是中间插入
            if ((index + 2) > _this.array.length) {
                _this.array.push({
                    id: '',
                    planName: '',
                    selectList: [],
                    completionDate: '',
                    planPhase: ''
                })
            } else {
                if (_this.array[index + 1].handleUserId) {
                    console.log('有数据', _this.array[index + 1].handleUserId)
                    _this.array[index + 1].selectList = _this.array[index + 1].handleUserId.split(',')
                }

                _this.array.splice(index + 1, 0, {
                    id: '',
                    planName: '',
                    selectList: [],
                    completionDate: '',
                    planPhase: ''
                })
            }
            console.log('数据为', _this.array)
        },
        // 删除步骤
        removeSetp(index) {
            const _this = this
            if (_this.array) {
                _this.array.splice(index, 1)
            }
        },
        // 将项目名称对应的客户名称填到对应的字段中
        getCustName(val) {
            const _this = this
            // console.log('hello')
            // console.log(_this.ProjectData.length)
            // console.log(val)
            for (let i = 0; i < _this.ProjectData.length; i++) {
                // console.log(_this.ProjectData[i].value)
                if (_this.ProjectData[i].value == val) {
                    // console.log('ok')
                    _this.form.custName = _this.ProjectData[i].custname
                    // console.log(_this.form.custName)
                    break
                }
            }
            // console.log(_this.form)
        },

        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) {
            this.idList = []
            val.forEach(element => {
                this.idList.push(element.id)
            })
            console.log(this.idList)
        },
        // 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
        // sortChange(column,prop,order) {
        //
        // },
        // 批量删除操作
        deleteRecord: function(val) {
            if (this.idList.length === 0) {
                this.$notify({
                    title: '请先选择明细记录',
                    type: 'info'
                })
                return
            }
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.baseRequest('remove/' + this.idList).then((res) => {
                    if (res.status === 200) {
                        this.getData()
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    }
                }).catch(() => {
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 进行删除操作
        deleteSelect: function(val) {
            console.log(val)
            if (!val) {
                this.$notify({
                    title: '请先选择要删除的列',
                    type: 'info'
                })
                return
            }
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('删除' + val.id)
                this.baseRequest('remove/' + val.id).then((res) => {
                    if (res.status === 200) {
                        this.getData()
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    }
                }).catch(() => {
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        initForm: function() {
            return {
                id: ''
            }
        },

        // 导出数据===========================================
        initOutData: function() {
            const _this = this

            this.OutData = []
            const title = []
            title.push('编号')
            title.push('项目名称')
            title.push('客户名称')
            title.push('用例主题')
            title.push('用例类型')
            title.push('优先级')
            title.push('前置条件')
            title.push('步骤顺序号')
            title.push('步骤描述')
            title.push('预期结果')
            title.push('创建人')
            title.push('创建时间')
            this.OutData.push(title)
            let postData = {}
            postData = _this.search
            if (_this.idList.length === 0) {
                // this.$notify({
                //     title: '请先选择明细记录',
                //     type: 'info'
                // })
                // return
            } else {
                postData.idList = JSON.stringify(_this.idList)
            }

            this.baseRequest('findAllByInfo', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const jsonMap = _this.getItemJson(item)
                        const jsonArray = []
                        jsonArray.push(jsonMap.id)
                        jsonArray.push(jsonMap.projectName)
                        jsonArray.push(jsonMap.custName)
                        jsonArray.push(jsonMap.usecase_title)
                        jsonArray.push(jsonMap.usecase_type)
                        jsonArray.push(jsonMap.priority)
                        jsonArray.push(jsonMap.preconditions)
                        jsonArray.push(jsonMap.stepIndex)
                        jsonArray.push(jsonMap.stepdescribe)
                        jsonArray.push(jsonMap.expected_results)
                        jsonArray.push(jsonMap.createdByName)
                        jsonArray.push(jsonMap.createdAtString)
                        _this.OutData.push(jsonArray)
                    })
                    _this.confirmOutput()
                }
            }).catch(() => {
            })
        },

        getItemJson: function(item) {
            // const json = {
            //     createdAt: item.createdAt ? this.$common.transDate(item.createdAt,this.$constant.DATE_PATTERN.DATE_TIME_h) : ''
            // }
            // return json
            item.completionDate = item.completionDate ? this.$common.transDate(item.completionDate, this.$constant.DATE_PATTERN.DATE) : ''
            // console.log(item.passNum + item.repairNum)
            // console.log((item.passNum + item.repairNum + item.failNum + item.skipNum))
            const useCaseNum = item.passNum + item.repairNum + item.failNum + item.skipNum
            if ((useCaseNum) === 0) {
                item.passRateString = '0%'
            } else {
                item.passRateString = ((item.passNum + item.repairNum) / (useCaseNum) * 100).toFixed(0) + '%'
            }
            if (item.totalNum === 0) {
                item.passRateInfoString = '无用例'
            } else {
                item.passRateInfoString = useCaseNum + '/' + item.totalNum
            }
            // 结果分布
            item.resultDistribution = item.passNum + '-' + item.repairNum + '-' + item.failNum + '-' + item.skipNum
            item.total = item.passNum + item.repairNum + item.failNum + item.skipNum

            item.passGailv =
                item.isShowTaskEdit = this.isShowTaskEdit
            item.isShowTaskStatus = this.isShowTaskStatus
            return item
        },
        confirmOutput() {
            const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }]
            const fileName = '导出用例' + new Date().Format('yyyy-MM-dd hh:mm')
            this.$outputXlsxFile(this.OutData, OutSize, fileName)
        },
        dlgClose() {
            // const _this = this
            if (!this.isAdd) {
                this.array = []
            }
            this.form = this.initForm()
        },
        dlgOpen: function() {
            const _this = this
            // console.log(_this.array)
            if (_this.form.id !== '') {
                _this.array = []
                const postData = {
                    id: _this.form.id
                }
                this.baseRequest('getVoById', postData).then((res) => {
                    if (res.data) {
                        _this.form = res.data
                        _this.form.createdAt = this.$common.transDate(_this.form.createdAt, this.$constant.DATE_PATTERN.DATE)
                        _this.form.status = String(_this.form.status)
                        // console.log(_this.form.handleUserId)
                        _this.array.push({
                            id: _this.form.id,
                            planName: _this.form.planName,
                            selectList: _this.form.handleUserId ? _this.form.handleUserId.split(',') : [],
                            completionDate: _this.form.completionDate ? this.$common.transDate(_this.form.completionDate, this.$constant.DATE_PATTERN.DATE) : '',
                            planPhase: _this.form.planPhase,
                            handleUserId: _this.form.handleUserId
                        })
                        // console.log(_this.array[0].selectList)
                    }

                    // 添加客户用的
                    for (let i = 0; i < _this.ProjectData.length; i++) {
                        // console.log(_this.ProjectData[i].value)
                        if (_this.ProjectData[i].value == _this.form.proId) {
                            // console.log('ok')
                            _this.form.custName = _this.ProjectData[i].custname
                            // console.log(_this.form.custName)
                            break
                        }
                    }

                    // 预防用的
                    if (_this.array.length == 0) {
                        _this.array.push({
                            id: '',
                            planName: '',
                            selectList: [],
                            completionDate: '',
                            planPhase: ''
                        })
                    }
                }).catch(() => {
                })
            } else {
                if (_this.array.length == 0) {
                    _this.array.push({
                        id: '',
                        planName: '',
                        selectList: [],
                        completionDate: '',
                        planPhase: ''
                    })
                }
                _this.form.createdAt = this.$common.transDate(new Date(), this.$constant.DATE_PATTERN.DATE)
                _this.form.createdByName = _this.truename
                // console.log(_this.truename)
            }
        },
        /* 关联用例*/
        handleToPlanUsecase(row) {
            this.dialogVisibleToPlanUsecase = true
            this.$nextTick(() => {
                this.$refs.toPlanUsecase.initData('关联用例', row, this.ProjectData, this.ProjectMap)
            })
        },
        /* 用例执行*/
        handleDoPlanUsecase(row) {
            this.dialogVisibleDoPlanUsecase = true
            this.dialogVisiblePlanUsecase = true
            this.dialogTitlePlanUsecase = '用例执行'
            const isShow = false // 判断是否只是展示还是需要进行编辑
            this.$nextTick(() => {
                this.$refs.doPlanUsecase.initData('用例执行', row, isShow)
            })
        },
        /* 用例关闭*/
        dlgClosePlanUsecase() {
            this.getData()
            this.dialogVisibleDoPlanUsecase = false
            this.dialogVisiblePlanUsecase = false
        },
        /* 用例执行查看*/
        handleShowPlanUsecase(row) {
            this.dialogVisibleDoPlanUsecase = true
            this.dialogVisiblePlanUsecase = true
            const isShow = true
            this.$nextTick(() => {
                this.$refs.doPlanUsecase.initData('用例执行查看', row, isShow)
            })
        },
        /* 计划状态*/
        handleTaskStatus: function(val) {
            this.isAdd = false
            this.form = this.initForm()
            this.form.id = val.id
            this.dialogVisibleStatus = true
            this.dialogTitleStatus = '计划状态'
        },
        /* 计划编辑*/
        handleEdit: function(val) {
            this.isAdd = false
            this.form = this.initForm()
            this.form.id = val.id
            this.dialogVisible = true
            this.dialogTitle = '计划编辑'
            this.viewVisible = false
        },
        // 复制数据
        handleCopyEdit: function(val) {
            this.isAdd = true
            this.form.id = val.id
            this.dialogVisible = true
            this.dialogTitle = '复制'
            this.viewVisible = false
        },
        // 查看
        viewInfo: function(val) {
            this.isAdd = false
            this.form.id = val.id
            this.dialogVisible = true
            this.dialogTitle = '查看'
            this.viewVisible = true
        },
        /* 新增*/
        handleAdd: function() {
            // this.form = this.initForm()
            this.form.id = ''
            this.isAdd = true
            this.dialogVisible = true
            this.dialogTitle = '新增测试计划'
            this.viewVisible = false
            if (this.array) {
                // console.log(this.array.length)
                for (let i = 0; i < this.array.length; i++) {
                    // console.log(this.array[i].step)
                    // console.log(this.array[i].expectedResults)
                    if (this.array[i].planName == '' && this.array[i].completionDate == '' && this.array[i].planPhase == '') {
                        this.array.splice(i, 1)
                        i--
                    }
                }
                // console.log(this.array.length)
            }
        },
        // 保存/编辑数据
        confirmSubmit: function() {
            const _this = this
            this.$refs.form.validate(valid => {
                if (valid) {
                    // if (this.fileError) {
                    //     _this.$message.error('附件正在上传，请等待上传完成')
                    //     return
                    // }
                    let soaUrl = 'edit'
                    const postData = {
                        // id: _this.form.id,

                    }
                    const newArray = []
                    // console.log()
                    for (let i = 0; i < _this.array.length; i++) {
                        if (_this.array[i].planName == '') {
                            _this.$message({
                                type: 'error',
                                message: '请填写计划名称'
                            })
                            return
                        }
                        newArray.push(
                            {
                                id: _this.array[i].id,
                                planCommandersId: i,
                                planName: _this.array[i].planName,
                                handleUserId: _this.array[i].handleUserId,
                                completionDate: _this.array[i].completionDate,
                                planPhase: _this.array[i].planPhase,
                                // 下面是每个计划都要的数据
                                taskNo: _this.form.taskNo,
                                proId: _this.form.proId
                            }
                        )
                    }

                    if (this.dialogTitle === '复制' && this.isAdd) {
                        soaUrl = 'add'
                        // postData.handleTime = ''
                        // postData.verificationTime = ''
                        // postData.verificationSituation = ''
                        // postData.actCompletionDate = ''
                    } else if (this.isAdd) {
                        soaUrl = 'add'
                    }
                    postData.info = JSON.stringify(newArray)
                    if (soaUrl == 'edit') {
                        _this.$confirm('此操作将永久修改该数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            _this.opRecord(postData, soaUrl)
                        }).catch(() => {
                            _this.$message({
                                type: 'info',
                                message: '已取消修改'
                            })
                        })
                    } else {
                        _this.opRecord(postData, soaUrl)
                        _this.array = []
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 修改计划状态等信息
        confirmSubmitStatus() {
            const _this = this
            this.$refs.form.validate(valid => {
                if (valid) {
                    const soaUrl = 'editStatus'
                    const postData = {}
                    const newArray = []
                    newArray.push(
                        {
                            id: _this.form.id,
                            status: _this.form.status,
                            statusremark: _this.form.statusremark
                        })
                    postData.info = JSON.stringify(newArray)
                    _this.opRecordTestPlanStatus(postData, soaUrl)
                    _this.array = []
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        opRecordTestPlanStatus: 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.opRefreshTestPlanStatus()
                    _this.$notify({
                        title: '处理成功',
                        type: 'info'
                    })
                }
            }).catch((err) => {
                acting.close()
                _this.$alert(err)
            })
        },
        // 操作后的执行
        opRefreshTestPlanStatus: function() {
            this.getData()
            this.dialogVisibleStatus = false
        },
        /* 分页设定*/
        handleSizeChange: function(val) {
            this.pageSize = val
            this.getData()
        },
        /* 分页设定*/
        handleCurrentChange: function(val) {
            this.currentPage = val
            if (this.currentPage == 0) {
                this.getData()
            } else {
                this.getDataOnly()
            }
        },

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

<style scoped>
.container {
    width: 100%;
    height: 20px;
    background: wheat;
    border-radius: 5rem;
}

.br5rem {
    border-radius: 5rem;
}

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

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

.col-input-zt {
    text-align: left;
    font-size: 16px;
    font-family: 微软雅黑;
    padding-left: 10px;
    line-height: 40px;
    vertical-align: middle;
    word-break: keep-all;
    overflow: hidden;
}

.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>