eln_web/src/views/business/comps/template/dialog/SelectInstrumentDialog.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%">
        <SelectTable ref="selectSjRef" :columns="columns"  
            :selectedId="selectedId"
            :searchForm="searchForm"
            :studyFormId = "studyFormId"
            :listApi="listApi"
            :selectedCode="selectedCode"
            @radioSelect="handleSelect"/>

        <div 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_yqList } from '@/api/business/public/public';
import { EventBus } from "@/utils/eventBus";
export default {
    components: {
        SelectTable,
        SelectDept
    },
    props: {
        type: {
            type: String,
            default: "",
        },
        title: {
            type: String,
            default: "选择仪器",
        },
        selectedCode: {
            type: String,
            default: "bh",
        },
        listApi: {
            type: Function,
            default: public_yqList,
        },
        searchForm: {
            type: Object,
            default: () => {
                return {
                        mc: {
                            label:'仪器名称',
                        },
                        bh: {
                            label:'仪器编号',
                        },
                        ly: {
                            label:'来源',
                        },
                    }
            },
        },
        columns: {
            type: Array,
            default: () => [
                {
                    prop: 'mc',
                    label: '仪器名称',
                },
                {
                    prop: 'bh',
                    label: '仪器编号',
                },
                {
                    prop: 'ly',
                    label: '来源(厂家)',
                },
                {
                    prop: 'jzrq',
                    label: '下次校准时间',
                },
            ],
        },
    },
    data() {
        return {
            visible:false,
            selectedId: "",
            currentRow: {},
            studyFormId:'',//有个studyFormId需要从外面动态传过来
            uuid:'',//为了标识eventBus的事件id,

            otherChecked: false,
            otherReagent: "",//其他试剂
        }
    },
    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){
            if(data && data.uuid) {//为了标识eventBus的事件id
                this.uuid = data.uuid
            }
            this.selectedId = "";
            this.visible = true
            setTimeout(() => {
                if(this.$refs.selectSjRef){
                    this.$refs.selectSjRef.show()
                }
            }, 10);
            this.studyFormId = studyFormId

            this.otherChecked = false;
            this.otherReagent = "";
        },
        onCancel() {
            this.visible = false
            this.$emit('cancel');
        },
        onSubmit() {
            let row = this.otherChecked ? {bh: this.otherReagent}:this.currentRow;
            const selectedValue = this.otherChecked ? this.otherReagent : this.selectedId;

            this.$emit('submit', selectedValue,row);
            const selectInfo = this.otherChecked ?{
                mc: "",
                bh: row.bh,
                xh: "",
                jzrq: "",
            }: {
                mc: row.mc,
                bh: row.bh,
                xh: row.xh,
                jzrq: row.jzrq,
            }
            // 触发eventBus事件
            EventBus.$emit("onInstrumentSubmit",{selectInfo,uuid:this.uuid,selectedId:selectedValue,row,type:"yq"});
            this.visible = false;
        },
        handleSelect(code,row) {
            this.selectedId = code;
            this.currentRow = row;
        },
        handleOtherChange(val) {
            this.otherChecked = val;
            if (val) {//如果选中了其他，那么就清空选中的id
                this.selectedId = "";
                this.currentRow = null;
            }
        },
    }
}
</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;
    }
</style>