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

<template>
    <el-dialog :title="title" @close="onCancel" :visible.sync="visible" append-to-body>
        <!-- 麻醉/精神药品配制/领取申请单 -->
         <div  v-if="type === 'MJYLQSQD'" class="header-row">
            <el-radio-group v-model="radio">
                <el-radio :label="1">试验</el-radio>
                <el-radio :label="2">
                    部门 
                </el-radio>
            </el-radio-group>
              <el-select v-model="depart" filterable placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
         </div>
     
        <SelectTable v-if = "isShowTable" :columns="columns"  
            :selectedId="selectedId"
            :searchForm="searchForm"
            :listApi="listApi"
            @radioSelect="handleSelect"/>
        <template slot="footer" class="dialog-footer">
            <el-button @click="onCancel">取消</el-button>
            <el-button :disabled="isDisabled" type="primary" @click="onSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import SelectTable from '@/components/Template/SelectTable.vue';
import { getReagentList } from '@/api/template';

export default {
    components: {
        SelectTable,
    },
    props: {
        type: {
            type: String,
            default: "",
        },
        visible: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: "选择试剂",
        },
        listApi: {
            type: Function,
            default: getReagentList,
        },
        searchForm: {
            type: Object,
            default: () => {
                return {
                        name: {
                            label:"试剂名称",
                        },
                        code: {
                            label:"试剂编号",
                        },
                        vol: {
                            label:"所属试验",
                        },
                    }
            },
        },
        columns: {
            type: Array,
            default: () => [
                {
                    prop: 'name',
                    label: '试剂名称',
                },
                {
                    prop: 'code',
                    label: '试剂编号',
                },
                {
                    prop: 'vol',
                    label: '试剂浓度',
                },
                {
                    prop: 'unit',
                    label: '浓度单位',
                },
                {
                    prop: 'expireDate',
                    label: '失效日',
                },
                {
                    prop: 'ss',
                    label: '所属试验',
                },
            ],
        },
    },
    data() {
        return {
            selectedId: "",
            currentRow: {},
            radio:1,
            depart:"",
            options:[
                {
                    value:1,
                    label:"部门1",
                },
                {
                    value:2,
                    label:"部门",
                },
            ]   
        }
    },
    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: {
        onCancel() {
            this.$emit('cancel');
        },
        onSubmit() {
            let row = this.currentRow;
            if(this.type === 'MJYLQSQD') {
               if(this.radio === 1) {
                    row = {syNo:row.ss,SD:row.code};
               }else{
                    const o = this.options.find(item => item.value === this.depart);
                    row = {syNo:o.label,SD:o.value};
               }
            }
            this.$emit('submit', this.selectedId,row);
        },
        handleSelect(code,row) {
            this.selectedId = code;
            this.currentRow = row;
        },
    }
}
</script>

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