fj-dc-ui/.svn/pristine/2b/2b687d76d87228a3dc9bfe8315ae8ed4b8e3a53c.svn-base

<template>
    <el-container>
        <el-main>
            <el-button @click="addDepart" type="primary" style="float: right;margin-bottom:10px">添加责任处室</el-button>
            <el-table
                v-loading="loading"
                border
                ref="multipleTable"
                :data="departList"
                :height="tableHeight"
                tooltip-effect="dark"
                style="width: 100%">
                <el-table-column align="center" type="index" label="序号" min-width="40">
                    <template slot-scope="scope">
                        {{ (currentPage - 1) * pageSize + (scope.$index + 1) }}
                    </template>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    min-width="140"
                    prop="departNm"
                    label="处室名称"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    min-width="100"
                    prop="sortNo"
                    label="显示序号"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    min-width="100"
                    prop="departNo"
                    label="处室编号"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="isCheck"
                    label="是否可以审核"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.isCheck == '1' ? '是' : '否'}}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop
                    min-width="100"
                    label="操作"
                    show-overflow-tooltip
                    fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="changeSup(scope.row.id)">编辑</el-button>
                        <el-button type="text" @click="deleteDepart(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="paginationWarpper">
                <el-pagination
                    class="paginationCenter"
                    background
                    @size-change="handleSizeChange"
                    @current-change="search"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
            <!-- 添加责任处室弹窗 -->
            <el-dialog
                    class="outerDialog custom_dialog"
                    title="添加责任处室"
                    width="50%"
                    append-to-body
                    :visible.sync="showaddDepartDialog">
                <el-form :model="addDepartObj" label-width="120px" ref="departRef" :rules="departRules">
                    <el-form-item label="处室名称" prop="departNm">
                        <el-input v-model="addDepartObj.departNm" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="显示序号" prop="sortNo">
                        <el-input v-model="addDepartObj.sortNo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="处室标号" prop="departNo">
                        <el-input v-model="addDepartObj.departNo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否可以审核" prop="isCheck">
                        <el-select v-model="addDepartObj.isCheck" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showaddDepartDialog = false">取 消</el-button>
                    <el-button type="primary" @click="addDepartSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>
<script>
import request from '@util/gw_ajax_request.js'
export default {
    props: [],
    data(){
        return{
            tableHeight: 490,
            departList:[],
            loading: false,
            currentPage: 1,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            showaddDepartDialog: false,
            departRules:{
                wokerNm: [
                    { required: true, message: '请填写处室名称', trigger: 'blur' }
                ],
                departNm: [
                    { required: true, message: '请填写显示序号', trigger: 'blur' }
                ],
                departNm: [
                    { required: true, message: '请填写处室编号', trigger: 'blur' }
                ],
                isCheck: [
                    { required: true, message: '请选择是否可以审核', trigger: 'change' }
                ],
            },
            addDepartObj:{},
        }
    },
    components:{
    },
    computed:{
        persId() {
            return localStorage.getItem("userid") ? localStorage.getItem("userid") : "1098101939614724096";
        }
    },
    mounted(){
        this.getdepartList()
    },
    methods:{
        // 获取责任处室列表
        getdepartList(){
            request.post('/bis/zhejiang/check/depart/list',{}).then(res=>{
                if(res.success){
                    this.departList = res.data
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        addDepart(){
            this.addDepartObj = {}
            this.showaddDepartDialog = true;
        },
        // 提交添加责任处室
        addDepartSubmit(){
            this.$refs.departRef.validate((valid)=>{
                if(valid){
                    request.post('/bis/zhejiang/check/depart',this.addDepartObj).then(res=>{
                        if(res.success){
                            this.$message.success('保存成功')
                            this.getdepartList()
                            this.showaddDepartDialog = false
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }else{
                    return false
                }
            })
        },
        changeSup(id){
            request.get(`/bis/zhejiang/check/depart/${id}`).then(res=>{
                if(res.success){
                    this.addDepartObj = res.data
                }else{
                    this.$message.warning(res.message)
                }
            })
            this.showaddDepartDialog = true
        },
        deleteDepart(id){
            this.$confirm('确定要删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get(`/bis/zhejiang/check/depart/del/${id}`)
                        .then(res => {
                            if (res.success) {
                                this.$message.success("删除成功");
                                this.getdepartList();
                            } else {
                                this.$message.warning(res.message);
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                }).catch(() => {
                });
        },
        handleSizeChange(){},
    },
    watch:{
    }
}
</script>
<style lang="scss">
</style>