platformFront/src/components/knowledgeExtra/DiagBase.vue

<template>
    <div>
        <crumbs title="诊断依据维护" :minWidth="titleWidth" class="knowledgeTitle">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="疾病名称：">
                    <el-input size="mini" v-model="filter.conceptName" placeholder="输入疾病名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input size="mini" v-model="filter.description" placeholder="输入描述" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="filter.status" clearable placeholder="请选择" size="mini">
                        <el-option
                                v-for="item in stateSelect"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="filterDatas">确认</el-button>
                </el-form-item>
                <el-form class="secLine">
                    <el-form-item>
                        <el-button size="mini" @click="addRule" type="warning" style="margin:0 10px">+ 新增诊断依据</el-button>
                        <el-button size="mini" @click="update">更新数据</el-button>
                    </el-form-item>
                </el-form>
            </el-form>
        </crumbs>
        <div class="contents knowledgeContents">
            <el-table :data="list"
                      border
                      style="width: 100%">
                <el-table-column
                        type="index"
                        :index="indexMethod"
                        label="编号"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="conceptName"
                        label="疾病名称"
                        width="160">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.conceptName.length>8" class="item" effect="dark" :content="scope.row.conceptName" placement="top">
                            <span>{{scope.row.conceptName.slice(0,8)+'...'}}</span>
                        </el-tooltip>
                        <span v-if="scope.row.conceptName.length<9">{{scope.row.conceptName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="描述"
                        width="160">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.description.length>8" class="item" effect="dark" :content="scope.row.description" placement="top">
                            <span>{{scope.row.description.slice(0,8)+'...'}}</span>
                        </el-tooltip>
                        <span v-if="scope.row.description.length<9">{{scope.row.description}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                          <span>
                            {{scope.row.status === 0?'禁用':'启用'}}
                          </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="modifierName"
                        label="操作人">
                </el-table-column>
                <el-table-column
                        prop="gmtModified"
                        label="操作时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editData(scope.row)">修改</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button type="text" size="small" @click="editData(scope.row,true)">复制</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button type="text" size="small" :class="scope.row.status === 0?'':'unvailable'" @click="showDelDialog(scope.row)">{{scope.row.status === 0?'启用':'禁用'}}</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button type="text" size="small" class="delete" @click="showDelDialog(scope.row,1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="currentPage"
                           @current-change="currentChange"
                           background
                           :page-size="pageSize"
                           :page-sizes="pageSizeArr"
                           @size-change="handleSizeChange"
                           :layout="pageLayout"
                           :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import api from '@api/zskDiagBase.js';
    import config from '@api/config.js';
    import utils from '@api/utils.js';

    export default {
        name: 'ZskDiagBase',
        data: function () {
            return {
                list: [],
                stateSelect:[
                    {id:1,name:'启用'},
                    {id:0,name:'禁用'},
                ],
                ruleTypeList:[],
                searched: false,
                filter:{
                    conceptName:'',
                    description:'',
                    status:''
                },
                cacheData: {},
                currentPage: 1,
                pageSize: config.pageSize,
                pageSizeArr:config.pageSizeArr,
                pageLayout:config.pageLayout,
                total: 0,
                titleWidth:'1070px' //头部最小宽度
            }
        },
        created() {
            const param = this.$route.params;
            if(param.currentPage){
                this.inCurrentPage = param.currentPage;
                this.filter = param.filter
            }
            this.getTypeList();
            const that = this;
            //返回时避免参数未赋值就获取列表
            setTimeout(function(){
                that.getDataList();
            });
        },
        watch: {
            'filter': {
                handler: function () {
                    this.searched = false;
                },
                deep: true
            }
        },
        // beforeRouteEnter(to, from, next) {
        //     next(vm => {
        //         //const pm = to.param;
        //         Object.assign(vm, to.params);
        //         vm.inCurrentPage=to.params.currentPage;
        //     })
        // },
        methods: {
            getDict(){
                api.zskgetDict().then((res) => {
                    if (res.data.code == '0') {
                        const data = res.data.data;
                        localStorage.setItem("zskDiagDicts",`{"onlyNum":"${data['24'][0].val}","onlyTxt":"${data['25'][0].val}"}`);
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            getTypeList(){
                this.getDict();
                api.getTypesList({planCode:'dis'}).then((res) => {
                    if (res.data.code == '0') {
                        const data = res.data.data;
                        localStorage.setItem("zskDiagList",JSON.stringify(data));
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.currentPage = utils.getCurrentPage(this.currentPage, this.total, this.pageSize);
                this.getDataList();
            },
            addRule(){
                const pam = this.searched ? {
                    currentPage: this.currentPage,
                    pageSize:this.pageSize,
                    filter: this.filter
                } : {currentPage: this.currentPage,
                    pageSize:this.pageSize};
                this.$router.push({name: 'AddZskDiagBase', params: pam});
            },
            filterDatas(){
                this.currentPage = 1;
                this.getDataList(1);
            },
            getDataList(flag,isTurnPage) {
                const params = this.getFilterItems(isTurnPage);
                this.searched = true;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                api.diagBasePage(params).then((res) => {
                    loading.close();
                    if (res.data.code == '0') {
                        const data = res.data.data;
                        for(let j = 0;j < data.records.length;j++){
                            data.records[j].condition = (data.records[j].parStatus == '1'?'启用':'禁用')
                        }
                        this.list = data.records;
                        if(!flag){//搜索时不缓存
                            this.cacheData[params.current] = data.records;
                        }else{
                            this.cacheData = {}
                        }
                        this.total = data.total;
                        if(this.inCurrentPage!==undefined){
                            this.currentPage=this.inCurrentPage;
                            this.inCurrentPage = undefined;
                        }
                    }else{
                        this.warning(res.data.msg||'获取列表数据失败');
                    }
                }).catch((error) => {
                    loading.close();
                    console.log(error);
                });
            },
            getFilterItems(isTurnPage) {
                //翻页时筛选条件没点确定则清空
                if(isTurnPage&&!this.searched){
                    this.clearFilter();
                };
                const param = {
                    current: this.inCurrentPage||this.currentPage,
                    size: this.pageSize,
                    conceptName: this.filter.conceptName,
                    description: this.filter.description,
                    status:this.filter.status
                };
                return param;
            },
            indexMethod(index) {
                return ((this.currentPage - 1) * this.pageSize) + index + 1;
            },
            currentChange(next) {
                this.currentPage = next;
                /*if (this.cacheData[next]) {       //如果已请求过该页数据，则使用缓存不重复请求
                  this.list = this.cacheData[next];
                } else {*/
                this.getDataList(1,true);
                //}
            },
            warning(msg,type){
                this.$message({
                    showClose: true,
                    message:msg,
                    type:type||'warning'
                })
            },
            showConfirmDialog(msg,resolve){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    resolve();
                }).catch(() => {});
            },
            editData(row,isCopy){
                const pam = this.searched ? {
                    currentPage: this.currentPage,
                    pageSize:this.pageSize,
                    filter: this.filter
                } : {currentPage: this.currentPage,
                    pageSize:this.pageSize};
                api.diagBaseGetDetail({id:row.id}).then((res) => {
                    if (res.data.code == '0') {
                        const data = res.data.data;
                        this.$router.push({name:'AddZskDiagBase',params:{...pam,data:{...row,klDiagnoseTypeVO:data},copy:isCopy}});
                    }
                }).catch((error) => {
                    this.warning('获取详情失败，请重试')
                });
            },
            showDelDialog(row,isDelete){
                const params = {
                    id:row.id
                };
                const txt=row.status===0?'重新启用':'禁用';
                const warningTxt = isDelete?'是否删除该诊断依据？可能对现有系统造成影响':'是否'+txt+'该诊断依据？';
                const handleFn = isDelete?api.diagBaseDelete:(row.status===0?api.diagBaseApply:api.diagBaseStop);
                this.showConfirmDialog(warningTxt,()=>{
                    handleFn(params).then((res)=>{
                        if(res.data.code=='0'){
                            if(!this.searched){
                                //未点确认时清空搜索条件
                                this.clearFilter();
                            }
                            if(isDelete){       //恢复成功后跳转到筛选条件的首页
                                this.currentPage = 1;
                            } else {
                                if (this.filter.status!==''&&this.list.length === 1){
                                    //有启用状态筛选条件且当前页只有最后一条数据删除时，删除成功后跳转到前一页
                                    this.currentPage = this.currentPage===1?1:this.currentPage-1;
                                }
                            }
                            this.warning(res.data.msg||'操作成功','success');
                            this.getDataList();
                        }else{
                            this.warning(res.data.msg);
                        }
                    }).catch((error)=>{
                        this.warning(error);
                    })
                });
            },
            clearFilter(){
                this.filter={
                    conceptName:'',
                    description:'',
                    status:''
                };
            },
            update(){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                api.updateDiagBase().then((res) => {
                    loading.close();
                    if (res.data.code == '0') {
                        this.warning('更新成功','success');
                        this.getDataList();
                    }else{
                        this.warning(res.data.msg||'更新失败，请重试');
                    }
                }).catch((error) => {
                    loading.close();
                    this.warning('更新失败，请重试')
                });
            },
        }
    }
</script>

<style lang="less" scoped>
    @import "../../less/admin.less";
    /deep/ .container.knowledgeTitle {
        height: 40px;
        min-width: 970px!important;
    }
    .demo-form-inline{
        margin: 0 20px 0 0;
    }
    /deep/ .contents.knowledgeContents {
        padding: 64px 20px 0;
    }
    /deep/ .secLine.el-form {
        float: right;
        display: block;
        position: relative;
        top: -1px;
    }
    .delete{
        color: red;
    }
    .review{
        color: #22ccc8;
    }
    .el-table .cell{
        overflow: hidden;
        white-space: nowrap;
    }
    #upFile{
        display: none !important;
    }
    .unvailable{
        color: #FE7D3D;
        &:hover,&:active,&:focus{
            color: #f19061;
        }
    }
</style>