新增/编辑 弹窗

父组件里 添加 弹框

<el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    v-if="dialogVisible"
    width="50%"
    :before-close="handleClose"
>
    <OrganiZationList
        @cancel="cancel"
        @save="save"
        :OrganiZationListDetail="OrganiZationListDetail"
        ref="HisManagementList"
    ></OrganiZationList>
</el-dialog>

js中

cancel() {
    this.dialogVisible = false;
},
save() {
    this.dialogVisible = false;
    this.onQuery();
},

子组件中

<!- 新增/详情-->
<template>
    <div class="organization-list">
        <div class="wd-bg">
            <el-form
                :model="form"
                :rules="rules"
                ref="form"
                class="item margin-top10"
                label-width="100px"
            >
                <el-form-item
                    label="机构名称："
                    prop="hospitalName"
                    style="margin-left: 18px"
                >
                    <el-input
                        v-model="form.hospitalName"
                        class="cl"
                        clearable
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="机构代码："
                    prop="hospitalId"
                    style="margin-left: 18px"
                >
                    <el-input
                        v-model="form.hospitalId"
                        class="cl"
                        clearable
                        maxlength="11"
                    ></el-input>
                </el-form-item>

                <el-form-item
                    label="机构等级："
                    style="margin-left: 18px"
                    prop="hospitalLevel"
                >
                    <el-select
                        class="cl"
                        v-model="form.hospitalLevel"
                        :disabled="disabled1"
                        placeholder="请选择"
                        clearable
                    >
                        <el-option
                            v-for="attr in hospitalLevelList"
                            :key="attr.id"
                            :label="attr.name"
                            :value="attr.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="是否外派："
                    prop="templateTitle"
                    style="margin-left: 18px"
                >
                    <el-radio-group v-model="form.isOtherSend">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
               <el-form-item
                    label="接口地址："
                    prop="interfacePath"
                    style="margin-left: 18px"
                >
                    <el-input
                        v-model="form.interfacePath"
                        class="cl"
                        clearable
                        maxlength="20"
                        :disabled="form.isOtherSend == '0'"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex-pb margin-btm10 padding-l20 flex-center">
            <div>
                <el-button
                    type="primary"
                    size="mini"
                    round
                    icon="el-icon-circle-close"
                    @click="cancel"
                    >放弃</el-button
                >
                <el-button
                    type="primary"
                    size="mini"
                    round
                    icon="el-icon-circle-check"
                    @click="save"
                    >确定</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        OrganiZationListDetail: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            isAdmin: '', // 判断账号等级
            quCode: HEAD_STATE, //区号
            projectList: [], //项目名称
            hospitalLevelList: [
                { id:'1',name:'社区卫生服务中心'},
                { id:'2',name:'二级'},
                { id:'3',name:'三级'},
                { id:'9',name:'未评'},
            ], //所属机构 名称
            form: {
                id: '',
                hospitalName: '',//医院名称
                hospitalId: '',//医院id
                hospitalLevel: '1',//机构等级
                isOtherSend:'0',//是否外派
            },
            medicalTechs: [],
            disabled1: false,
            rules: {
                hospitalName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                ],
                hospitalId: [
                    { validator: this.validatehospitalId, trigger: 'blur', required: true, }
                ],
                glxm: [
                    {
                        required: true,
                        message: '请选择关联项目',
                        trigger: 'change',
                    },
                ],
            },
        };
    },
    computed: {
    },
    components: {},
    mounted() {},
    methods: {
        validatehospitalId(rule, value, callback) {
            console.log(value);
            const regex = /^[a-zA-Z0-9]{11}$/;
            if (!regex.test(value)) {
                callback(new Error('11位数字或字母'));
            } else {
                callback();
            }
        },
        // 获取详情
        async getDetail() {
            let val = this.OrganiZationListDetail;
            this.form = await hospitalInfo(val.id);
            this.form.isOtherSend = this.form.isOtherSend.toString();
        },
        //选择项目名称字典
        async medicineDic() {
            const res = await getMedicineDetail();
            this.projectList = res;
        },
        // 点击保存
        save() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    let params = {
                        ...this.form
                    };
                    await saveHospitalInfo(params);
                    this.$message({
                        message: '保存成功',
                        type: 'success',
                    });
                    this.$emit('save');
                    this.$refs['form'].resetFields();
                } else {
                    return false;
                }
            });
        },
        // 点击取消
        cancel() {
            this.$emit('cancel');
            this.form.id = '';
            this.$refs['form'].resetFields();
        },
    },
};
</script>