cdssHospital/src/components/knowledgeExtra/RuleManager.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.parDescription" placeholder="输入规则名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="规则类型：">
                    <el-select v-model="filter.parRuleType" clearable placeholder="请选择" size="mini">
                        <el-option
                                v-for="item in ruleTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="医学标准术语：">
                    <el-input size="mini" v-model="filter.parConceptName" placeholder="输入医学标准术语"  clearable></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="filter.parStatus" 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>
            <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>
        </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="parDescription"
                        label="规则名称"
                        width="160">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.parDescription.length>8" class="item" effect="dark" :content="scope.row.parDescription" placement="top">
                            <span>{{scope.row.parDescription.slice(0,8)+'...'}}</span>
                        </el-tooltip>
                        <span v-if="scope.row.parDescription.length<9">{{scope.row.parDescription}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="parRuleType"
                        label="规则类型"
                        width="150">
                    <template slot-scope="scope">
                        {{statusTrans(scope.row.parRuleType)}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="parConceptName"
                        label="医学标准术语"
                        width="160">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.parConceptName.length>8" class="item" effect="dark" :content="scope.row.parConceptName" placement="top">
                            <span>{{scope.row.parConceptName.slice(0,8)+'...'}}</span>
                        </el-tooltip>
                        <span v-if="scope.row.parConceptName.length<9">{{scope.row.parConceptName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="parLibTypeName"
                        label="术语类型"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="parHasSub"
                        label="有无子条件"
                        width="100">
                    <template slot-scope="scope">
                        {{scope.row.parHasSub == '0'?'无':'有'}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                          <span>
                            {{scope.row.parStatus === 0?'禁用':'启用'}}
                          </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="modifierName"
                        label="操作人">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.modifierName&&scope.row.modifierName.length>8" class="item" effect="dark" :content="scope.row.modifierName" placement="top">
                            <span>{{(scope.row.modifierName||'').slice(0,8)+'...'}}</span>
                        </el-tooltip>
                        <span v-if="scope.row.modifierName&&scope.row.modifierName.length<9">{{scope.row.modifierName}}</span>
                    </template>
                </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.parId)">修改</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button type="text" size="small" @click="editData(scope.row.parId,true)">复制</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button type="text" size="small" :class="scope.row.parStatus === 0?'':'unvailable'" @click="showDelDialog(scope.row)">{{scope.row.parStatus === 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/knowledgeLib.js';
    import config from '@api/config.js';
    import utils from '@api/utils.js';

    export default {
        name: 'ZskRuleManager',
        data: function () {
            return {
                list: [],
                stateSelect:[
                    {id:1,name:'启用'},
                    {id:0,name:'禁用'},
                ],
                ruleTypeList:[],
                searched: false,
                filter:{
                    parStatus:'',
                    parDescription:'',
                    parConceptName:'',
                    parRuleType:'',
                },
                cacheData: {},
                currentPage: 1,
                pageSize: config.pageSize,
                pageSizeArr:config.pageSizeArr,
                pageLayout:config.pageLayout,
                total: 0,
                titleWidth:'970px' //头部最小宽度
            }
        },
        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();
            });
            this.getDict();
        },
        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;
                        const arr =data['20'].map((it)=>it.val);
                        //this.dict = arr.join(",");
                        //this.msgDict=(data['21'].map((it)=>it.val)||[]).join(",");
                        localStorage.setItem("zskDicts",arr.join(","));
                        localStorage.setItem("zskMsgDict",(data['21'].map((it)=>it.val)||[]).join(","));
                        localStorage.setItem("zskNumDict",data['22'][0].val);
                        localStorage.setItem("zskSubDict",data['23'][0].val);
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            statusTrans(type){
                const obj = this.ruleTypeList.find((it)=>it.type===type);
                return obj&&obj.name;
            },
            getTypeList(){
                const typeListData = JSON.parse(localStorage.getItem("zskTypesList"));
                if(typeListData){
                    this.ruleTypeList = typeListData;
                    return;
                }
                api.getTypesList({planCode:'rule'}).then((res) => {
                    if (res.data.code == '0') {
                        const data = res.data.data;
                        this.ruleTypeList = data;
                        localStorage.setItem("zskTypesList",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: 'AddZskRule', 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.getRulesList(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,
                    parRuleType: this.filter.parRuleType,
                    parDescription: this.filter.parDescription.trim(),
                    parConceptName: this.filter.parConceptName.trim(),
                    parStatus:this.filter.parStatus
                };
                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(id,isCopy){
                const pam = this.searched ? {
                    currentPage: this.currentPage,
                    pageSize:this.pageSize,
                    filter: this.filter
                } : {currentPage: this.currentPage,
                    pageSize:this.pageSize};
                api.ruleDetail({id}).then((res) => {
                    if (res.data.code == '0') {
                        const data = res.data.data;
                        this.$router.push({name:'AddZskRule',params:{...pam,data,copy:isCopy}});
                    }
                }).catch((error) => {
                    this.warning('获取详情失败，请重试')
                });
            },
            showDelDialog(row,isDelete){
                const params = {
                    id:row.parId
                };
                const txt=row.parStatus===0?'重新启用':'禁用';
                const warningTxt = isDelete?'是否删除该规则？可能对现有系统造成影响':'是否'+txt+'该条数据？';
                const handleFn = isDelete?api.deleteRule:(row.parStatus===0?api.saveRuleApply:api.deleteRuleApply);
                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.parStatus!==''&&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={
                    parStatus:'',
                    parConceptName:'',
                    parDescription:'',
                    parRuleType:'',
                };
            },
            update(){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                api.zskUpdateAll().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: 80px;
    }
    /deep/ .contents.knowledgeContents {
        padding: 104px 20px 0;
    }
    /deep/ .secLine.el-form {
        float: right;
        display: block;
        position: relative;
        top: -5px;
    }
    .delete{
        color: red;
    }
    .review{
        color: #22ccc8;
    }
    .el-table .cell{
        overflow: hidden;
        white-space: nowrap;
    }
    #upFile{
        display: none !important;
    }
    .unvailable{
        color: #FE7D3D;
        &:hover{
            color: #f19061;
        }
    }
</style>