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

<!-- 试剂/供试品/给药制剂弹窗 -->
<template>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="$t(title)" @close="onCancel"
        :visible.sync="visible" append-to-body width="80%">
        <el-radio-group v-show="mixType" v-model="selectType" @change="handleShowTableInfo" class="mt-20 mb-20">
            <el-radio-button label="1">试剂列表</el-radio-button>
            <el-radio-button label="7">供试品列表</el-radio-button>
            <el-radio-button label="3">给药制剂列表</el-radio-button>
        </el-radio-group>
        <SelectTable ref="selectSjRef" :columns="columns" :selectedId="selectedId" :searchForm="searchForm"
            :checkType="checkType"
            :studyFormId="studyFormId" :studyId="studyId" :listApi="listApi" :selectedCode="selectedCode" @radioSelect="handleSelect" />

        <!-- 只有步骤才会又这个选项 --> 
        <!-- xb+xj也会 -->
        <div v-if="sourceFrom === 'step' || selectType==='1' || selectType==='3' || selectType==='7' || selectType==='9' || selectType==='11'" class="other-reagent">
            <el-checkbox v-model="otherChecked" @change="handleOtherChange">其他</el-checkbox>
            <el-input class="other-reagent-input" v-model="otherReagent"></el-input>
        </div>
        <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_gyzjList, public_gspList, public_xbList,public_jcbList,public_qxFormFillList,public_xjList } from '@/api/business/public/public';
import { getSjSearchForm, getSjColumns, getGyzjSearchForm, getGyzjColumns, getGspSearchForm, getGspColumns, getXbSearchForm, getXbColumns,getJcbSearchForm,getJcbColumns,getQxbdSearchForm,getQxbdColumns, getXjSearchForm, getXjColumns } from '@/views/business/comps/template/formConfig/formConfig.js';
import { EventBus } from "@/utils/eventBus";
const typeMap = {
    '1': {
        searchForm: getSjSearchForm(),
        columns: getSjColumns(),
        listApi: public_sjList,
        title:"选择试剂"
    },
    '7': {
        searchForm: getGspSearchForm(),
        columns: getGspColumns(),
        listApi: public_gspList,
        title:"选择供试品"
    },
    "9": {
        searchForm: getXjSearchForm(),
        columns: getXjColumns(),
        listApi: public_xjList,
        title:"选择细菌"
    },
    "11": {
        searchForm: getXbSearchForm(),
        columns: getXbColumns(),
        listApi: public_xbList,
        title:"选择细胞"
    },
    "3": {
        searchForm: getGyzjSearchForm(),
        columns: getGyzjColumns(),
        listApi: public_gyzjList,
        title:"选择给药制剂"
    },
    "13": {
        searchForm: getJcbSearchForm(),
        columns: getJcbColumns(),
        listApi: public_jcbList,
        title:"请选择检测板"
    },
    "15": {
        searchForm: getQxbdSearchForm(),
        listApi: public_qxFormFillList,
        title:"请选择前序表单"
    },
}
export default {
    components: {
        SelectTable,
        SelectDept
    },
    props: {
        type: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            visible: false,
            otherChecked: false,
            selectedId: "",
            selectedCode: "bh",
            currentRow: null,
            radio: 1,
            bzList: [],
            depart: "",
            studyFormId: '',//有个studyFormId需要从外面动态传过来
            studyId:'',//有个studyId需要从外面动态传过来
            uuid: '',//为了标识eventBus的事件id,
            selectType: '1',//默认选择试剂列表
            listApi: public_sjList,
            searchForm: getSjSearchForm(),
            columns: getSjColumns(),
            sourceFrom: "step",//来源
            otherReagent: "",//其他试剂
            mixType: false,//是否是混合试剂
            title:"选择试剂",
            currentType: '1',//当前选择的类型
            qxbdType:"",//前序表单类型
            //是否显示单选框或复选框
            checkType: "radio",
        }
    },
    computed: {
        isDisabled() {
            if (this.otherChecked && this.otherReagent) {//如果选中了其他，那么就不校验是否选择了试剂
                return false;
            }else if(this.checkType === "checkbox"){
                console.log(this.currentRow,"this.currentRow")
                return !this.currentRow || this.currentRow.length === 0;
            }
            return !this.selectedId;
        }
    },
    methods: {
        show(studyFormId, data,studyId) {
            if (data && data.uuid) {//为了标识eventBus的事件id
                this.uuid = data.uuid
            }
            //type:sj(试剂列表)gsp(供试品列表)gyzj(给药制剂列表)
            const { type, sourceFrom = "step", mixType = false ,checkType = "radio"} = data;
            this.currentType = type;
            if(type==15){
                this.selectedCode = 'id'
                this.qxbdType = data.qxbdType || '';
            }
            this.selectedId = "";
            this.otherReagent = "";
            this.otherChecked = false;
            this.checkType = checkType;
            this.mixType = mixType;
            this.sourceFrom = sourceFrom;
            this.studyFormId = studyFormId;
            this.studyId = studyId || '';
            this.visible = true;
            this.handleShowTableInfo(type);

        },
        hide() {
            this.visible = false;
        },
        handleOtherChange(val) {
            this.otherChecked = val;
            if (val) {//如果选中了其他，那么就清空选中的id
                this.selectedId = "";
                this.currentRow = null;
            }
        },
        handleShowTableInfo(type) {
            this.selectType = type;
            this.searchForm = typeMap[type].searchForm;
            // 对于前序表单类型，动态调用 getQxbdColumns 并传递组件实例
            if (type === '15') {
                this.columns = getQxbdColumns(this);
            } else {
                this.columns = typeMap[type].columns;
            }
            this.listApi = typeMap[type].listApi;
            this.listApi = typeMap[type].listApi || this.listApi;
            this.title = typeMap[type].title || this.title;
            setTimeout(() => {
                if (this.$refs.selectSjRef) {
                    this.$refs.selectSjRef.show()
                }
            }, 10);
        },
        onCancel() {
            this.visible = false
            this.$emit('cancel');
        },
        onSubmit() {
            let row = this.otherChecked ?(this.checkType === "checkbox"?[{bh: this.otherReagent}]:{bh: this.otherReagent}):this.currentRow;
            const selectedValue = this.otherChecked ? this.otherReagent : this.selectedId;
            const selectInfo = this.otherChecked ?{
                mc: "",
                bh: row.bh,
                nd: "",
                ly: "",
                nddw: "",
                sxrq: "",
                yxq: "",
                ndz: "",
                type: Number(this.selectType),
                kc: "",
                kcdw: "",
                gg: "",
                ggdw: "",
            }:{
                mc: row.mc,
                bh: row.bh,
                nd: row.nd,
                ly: row.ly,
                nddw: row.nddw,
                sxrq: row.sxr,
                yxq: row.yxq,
                ndz: (row.nd||"")+(row.nddw||""),
                type: Number(this.selectType),
                kc: row.kc,
                kcdw: row.kcdw,
                gg: row.gg,
                ggdw: row.ggdw,
            }
            const {qxbdType,checkType} = this;
            if(qxbdType){
                if(checkType === "radio"&& row.templateSn !== qxbdType){
                    this.$message.error(`请选择正确前序表单`);
                    return
                }
                if(checkType === "checkbox" ){
                    const isAllType = row.every((item)=>item.templateSn === qxbdType)
                    if(!isAllType){
                        this.$message.error(`请选择正确前序表单`);
                        return
                    }
                }
                
            }
            this.$emit('submit', selectedValue, row);
            let callbackData = { selectInfo, uuid: this.uuid, selectedId: selectedValue, row,selectType:this.selectType,checkType };
            if(this.checkType === "checkbox"){
                let selectedInfo = "";
                if(this.otherChecked && this.otherReagent){
                    selectedInfo = this.otherReagent;
                }else{
                    selectedInfo = row.map((item)=>(item.bdbh||item.bh)).join("、");
                }
                callbackData = {
                    uuid: this.uuid,
                    selectedRows: row,
                    selectedId:selectedInfo,
                    checkType
                }
            }
            // 触发eventBus事件
            EventBus.$emit("onMixReagentSubmit", callbackData);
            // this.visible = false;
        },
        // 选择试剂时处理
        handleSelect(code, row) {
            if(this.checkType === "radio"){
                this.selectedId = code;
            }
            this.currentRow = row;
        },
    }
}
</script>

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

.other-reagent {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.other-reagent-input {
    width: 200px;
    margin-left: 5px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}
</style>