fj-dc-ui/.svn/pristine/4b/4b583bc0d60cd0a46e1ce4b7e5c87e39b490acd0.svn-base

<template>
    <div>
        <el-page-header @back="goBack" content="编辑类别">
        </el-page-header>
        <p style="margin-top: 20px;margin-bottom:10px;">
            &#x3000;专 业：
            <el-select v-model="form.spfsnlType" placeholder="请选择专业" @change="professionChange">
                <el-option
                v-for="item in professionList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </p>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>问题大类</span>
                        <el-button @click="toAddMajorclass" style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table
                        :data="majorclassData"
                        :height="tebleHeight"
                        style="width: 100%"
                        @row-click="chooseMajorClass"
                        max-height="500">
                        <el-table-column
                            type="index"
                            label="序号"
                            width="60">
                        </el-table-column>
                        <el-table-column
                            prop="className"
                            label="大类"
                            min-width="280">
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            min-width="120">
                            <template slot-scope="scope">
                                <el-button
                                @click.native.prevent="editMajorRow(scope.row)"
                                type="text"
                                size="small">
                                编辑
                                </el-button>
                                <el-button
                                @click.native.prevent="deleteMajorRow(scope.row)"
                                type="text"
                                size="small">
                                删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 10px;" :pager-count="5" :current-page="pageIndexMajor" :page-size="pageSize" 
                    background layout="total, prev, pager, next" :total="totalMajor" @current-change="pageIndexMajorChange"
                    ></el-pagination>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>问题小类</span>
                        <el-button @click="toAddSubclass" style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table
                        :data="subclassData"
                        :height="tebleHeight"
                        style="width: 100%"
                        max-height="500">
                        <el-table-column
                        type="index"
                        label="序号"
                        width="60">
                        </el-table-column>
                        <el-table-column
                        prop="className"
                        label="小类"
                        min-width="280">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        min-width="120">
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="editSubRow(scope.row)"
                            type="text"
                            size="small">
                            编辑
                            </el-button>
                            <el-button
                            @click.native.prevent="deleteSubRow(scope.row)"
                            type="text"
                            size="small">
                            删除
                            </el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 10px;" :pager-count="5" :current-page="pageIndexSub" :page-size="pageSize" 
                    background layout="total, prev, pager, next" :total="totalSub" 
                    @current-change="pageIndexSubChange"
                    ></el-pagination>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="添加问题大类" :visible.sync="dialogMajorClass">
            <el-form :model="majorForm">
                <el-form-item label="请输入问题大类名称：">
                    <el-input v-model="majorForm.className" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请输入问题大类编码：">
                    <el-input v-model="majorForm.classCode" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogMajorClass = false">取 消</el-button>
                <el-button type="primary" @click="addMajorclass">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="添加问题小类" :visible.sync="dialogSubClass">
            <el-form :model="subForm">
                <el-form-item label="请输入问题小类名称：">
                    <el-input v-model="subForm.className" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请输入问题小类编码：">
                    <el-input v-model="subForm.classCode" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSubClass = false">取 消</el-button>
                <el-button type="primary" @click="addSubclass">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import request from '@util/gw_ajax_request.js'
export default {
    props:[],
    data(){
        return{
            tebleHeight: window.innerHeight - 320,
            professionList:[
                {label: '前期与设计',value: '1'},
                {label: '建设管理',value: '2'},
                {label: '计划下达与执行',value: '3'},
                {label: '资金使用与管理',value: '4'},
                {label: '质量行为',value: '5'},
                {label: '质量实体',value: '6'},
                {label: '工程安全',value: '7'}
            ],
            majorclassData:[
            ],
            subclassData:[
            ],
            form:{
                spfsnlType: '1',
                pcode: ''
            },
            majorForm:{
                className: '',
                classCode: '',
                pcode: '0'
            },
            subForm:{
                className: '',
                classCode: ''
            },
            pageSize: 20,
            pageIndexMajor: 1,
            pageIndexSub: 1,
            totalMajor: 0,
            totalSub: 0,
            dialogMajorClass: false,
            dialogSubClass: false,
        }
    },
    mounted(){
        this.getMajorClassList()
        this.getSubClassList()
    },
    methods:{
        goBack(){
            this.$emit('goBack')
        },
        getMajorClassList(){
            let majorParams = {
                spfsnlType: this.form.spfsnlType,
                type: '1',
                pageSize: this.pageSize,
                pageNum: this.pageIndexMajor
            }
            request.post(`/tac/pblm/class/dic/page`,majorParams).then(res=>{
                if(res.success){
                    this.majorclassData = res.data.list
                    this.totalMajor = res.data.total
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        getSubClassList(){
            let subParams = {
                spfsnlType: this.form.spfsnlType,
                type: '2',
                pageSize: this.pageSize,
                pageNum: this.pageIndexSub,
                pcode: this.form.pcode
            }
            request.post(`/tac/pblm/class/dic/page`,subParams).then(res=>{
                if(res.success){
                    this.subclassData = res.data.list
                    this.totalSub = res.data.total
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        toAddMajorclass(){
            this.dialogMajorClass = true
            if(this.majorForm.id){
                delete this.majorForm.id 
            }
        },
        addMajorclass(){
            this.majorForm['spfsnlType'] = this.form.spfsnlType
            this.majorForm['type'] = '1'
            request.post(`/tac/pblm/class/dic`,this.majorForm).then(res=>{
                if(res.success){
                    this.$message.success('操作成功')
                    this.majorForm = {
                        className: '',
                        classCode: '',
                        pcode: '0'
                    }
                    this.getMajorClassList()
                    this.dialogMajorClass = false
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        toAddSubclass(){
            if(!this.form.pcode){
                this.$message.warning('请先选择左侧问题大类')
                return
            }
            if(this.subForm.id){
                delete this.subForm.id 
            }
            this.dialogSubClass = true
        },
        addSubclass(){
            this.subForm['spfsnlType'] = this.form.spfsnlType
            this.subForm['type'] = '2'
            this.subForm['pcode'] = this.form.pcode
            request.post(`/tac/pblm/class/dic`,this.subForm).then(res=>{
                if(res.success){
                    this.$message.success('操作成功')
                    this.getSubClassList()
                    this.majorForm = {
                        className: '',
                        classCode: ''
                    }
                    this.dialogSubClass = false
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        editMajorRow(row){
            Object.assign(this.majorForm,row)
            this.dialogMajorClass = true
        },
        editSubRow(row){
            Object.assign(this.subForm,row)
            this.dialogSubClass = true
        },
        deleteMajorRow(row){
            this.$confirm(' 删除问题大类，将删除该问题大类下所有问题小类和问题，请问是否确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get(`/tac/pblm/class/dic/del/${row.id}`).then(res=>{
                    if(res.success){
                        this.$message.success('删除成功')
                        this.getMajorClassList()
                    }else{
                        this.$message.error(res.message)
                    }
                })
            })
        },
        deleteSubRow(row){
            this.$confirm(' 删除问题小类，将删除该问题小类下所有问题，请问是否确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get(`/tac/pblm/class/dic/del/${row.id}`).then(res=>{
                    if(res.success){
                        this.$message.success('删除成功')
                        this.getSubClassList()
                    }else{
                        this.$message.error(res.message)
                    }
                })
            })
        },
        professionChange(){
            this.getMajorClassList()
            this.getSubClassList()
        },
        pageIndexMajorChange(val){
            this.pageIndexMajor = val
            this.getMajorClassList()
        },
        pageIndexSubChange(val){
            this.pageIndexSub = val
            this.getSubClassList()
        },
        chooseMajorClass(row){
            this.form.pcode = row.id
            this.getSubClassList()
        }
    }
}
</script>
<style lang="scss">

</style>