eln_web/src/views/business/comps/template/dialog/SelectReagentDialog.vue

<template>
    <el-dialog :title="$t(title)" @close="onCancel" :visible.sync="visible" append-to-body width="80%">
        <!-- 麻醉/精神药品配制/领取申请单 -->
         <div  v-if="type === 'MJYLQSQD'" class="header-row">
            <el-radio-group v-model="radio" @input="changeRadio">
                <el-radio :label="1">试验</el-radio>
                <el-radio :label="2">
                    部门 
                </el-radio>
            </el-radio-group>
            <select-dept v-if="radio==2" v-model="depart" style="width:200px;margin-left:10px" />
         </div>
     
        <SelectTable v-if = "isShowTable" ref="selectSjRef" :columns="columns"  
            :selectedId="selectedId"
            :searchForm="searchForm"
            :listApi="listApi"
            :selectedCode="selectedCode"
            @radioSelect="handleSelect"/>
        <template slot="footer" class="dialog-footer">
            <el-button @click="onCancel">{{$t('form.cancel')}}</el-button>
            <el-button :disabled="isDisabled" type="primary" @click="onSubmit">{{$t('form.saveConfirm')}}</el-button>
        </template>
    </el-dialog>
</template>

<script>
import SelectTable from '@/components/Template/SelectTable.vue';
import SelectDept from "@/views/business/comps/select/SelectDept";
import { public_sjList,public_bzList } from '@/api/business/public/public';

export default {
    components: {
        SelectTable,
        SelectDept
    },
    props: {
        type: {
            type: String,
            default: "",
        },
        title: {
            type: String,
            default: "page.business.resource.sj.xzsj",
        },
        selectedCode: {
            type: String,
            default: "bh",
        },
        listApi: {
            type: Function,
            default: public_sjList,
        },
        searchForm: {
            type: Object,
            default: () => {
                return {
                        mc: {
                            label:'page.business.resource.sj.sjmc',
                        },
                        bh: {
                            label:'page.business.resource.sj.sjbh',
                        },
                        studyName: {
                            label:'page.business.resource.sj.sssy',
                        },
                    }
            },
        },
        columns: {
            type: Array,
            default: () => [
                {
                    prop: 'mc',
                    label: 'page.business.resource.sj.sjmc',
                },
                {
                    prop: 'bh',
                    label: 'page.business.resource.sj.sjbh',
                },
                {
                    prop: 'nd',
                    label: 'page.business.resource.sj.sjnd',
                },
                {
                    prop: 'nddw',
                    label: 'page.business.resource.gsp.nddw',
                },
                {
                    prop: 'sxr',
                    label: 'page.business.resource.sj.sxr',
                },
                {
                    prop: 'studyName',
                    label: 'page.business.resource.sj.sssy',
                },
            ],
        },
    },
    data() {
        return {
            visible:false,
            selectedId: "",
            currentRow: {},
            radio:1,

            bzList:[],
            depart:"",
        }
    },
    computed: {
        isShowTable() {
            if(this.type === 'MJYLQSQD') {
                return this.radio === 1;
            }
            return true;    
        },
        isDisabled() {
            if(this.type === 'MJYLQSQD') {
                if(this.radio === 1) {//选择试验的时候必须要选中一项才能点击确定
                    return !this.selectedId;
                }else{
                    return !this.depart;
                }
            }
            return !this.selectedId;
        }
    },
    methods: {
        show(){
            this.visible = true
            this.showTableData()
            if(this.type === 'MJYLQSQD'){
                this.getBzList()
            }
        },
        getBzList(){
            public_bzList(this.searchForm).then(response => {
                this.bzList = response.data
            });
        },
        showTableData(){
            if(this.$refs.selectSjRef){
                this.$refs.selectSjRef.show()
            }else{
                setTimeout(() => {
                    this.showTableData()
                }, 100);
            }
        },
        onCancel() {
            this.visible = false
            this.$emit('cancel');
        },
        onSubmit() {
            let row = this.currentRow;
            if(this.type === 'MJYLQSQD') {
               if(this.radio === 1) {
                    row = row;
                    row.type=this.radio
               }else{
                    const o = this.bzList.find(item => item.deptId == this.depart);
                    if(o){
                        row = o;
                        row.type=this.radio
                    }else{
                        this.$message.error(`该部门没有设置部长!`)
                        return
                    }
               }
            }
            this.$emit('submit', this.selectedId,row);
        },
        handleSelect(code,row) {
            this.selectedId = code;
            this.currentRow = row;
        },
        changeRadio(val){
            if(val==1){
                this.showTableData()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .header-row{
        display: flex;
        align-items: center;
        padding: 20px 0;
    }
</style>