mailbox-lan-vue/src/views/work/components/templates/DeptSelectForm.vue

<template>
    <div>
        <h2>办理单位</h2>
        <el-form :label-width="150" :model="form" :rules="rules" ref="formRef">
            <el-row>
                <el-col :span="12">
                    <el-form-item
                        :label="
                            secondaryResponsibleFlag ? '下发单位' : '主责单位'
                        "
                        prop="mainDeptId"
                    >
                        <el-select
                            v-model="form.mainDeptId"
                            placeholder="请选择办理单位"
                            filterable
                            clearable
                        >
                            <el-option
                                v-for="item in depts"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                :disabled="
                                    item.id === form.secondDeptId2 ||
                                    item.id === form.secondDeptId1
                                "
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="主办层级"
                        prop="mainDeptLevel"
                        class="el-form-item-label_nopadding"
                    >
                        <div class="flex gap-16 v-center" style="width: 100%">
                            <el-tooltip
                                content="如主办层级 为 市局主办，则在选择被举报/投诉对象时，可以在全局范围内选择 单位和民警<br/>
                                如主办层级 为 二级机构主办时，则在选择被举报/投诉对象时， 只能选择二级机构范围内的单位和民警<br/>
                                如主办层级 为 三级机构主办时，则在选择被举报/投诉对象时， 只能选择该三级机构和民警。"
                                placement="top-start"
                                :raw-content="true"
                            >
                                <icon
                                    name="el-icon-QuestionFilled"
                                    :size="16"
                                    color="#FFA732"
                                />
                            </el-tooltip>
                            <el-select
                                v-model="form.mainDeptLevel"
                                placeholder="请选择主办层级"
                                filterable
                                clearable
                                :disabled="mail.mainDeptLevel"
                            >
                                <el-option label="市局主办" :value="1" />
                                <el-option label="二级机构主办" :value="2" />
                                <el-option label="三级机构主办" :value="3" />
                            </el-select>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <template v-if="!secondaryResponsibleFlag">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="次责单位1">
                            <el-select
                                v-model="form.secondDeptId1"
                                placeholder="请选择次责单位1"
                                filterable
                                clearable
                            >
                                <el-option
                                    v-for="item in depts"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                    :disabled="
                                        item.id === form.mainDeptId ||
                                        item.id === form.secondDeptId2
                                    "
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="次责单位2">
                            <el-select
                                v-model="form.secondDeptId2"
                                placeholder="请选择次责单位2"
                                filterable
                                clearable
                            >
                                <el-option
                                    v-for="item in depts"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                    :disabled="
                                        item.id === form.mainDeptId ||
                                        item.id === form.secondDeptId1
                                    "
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
        </el-form>
    </div>
</template>
<script setup>
import { listSecond, listThree } from "@/api/org/department";
const props = defineProps({
    data: {
        type: Object,
        default: {},
    },
    flowKey: {
        type: String,
        default: "first_distribute",
    },
    // 是否已选次级责任单位
    secondaryResponsibleFlag: {
        type: Boolean,
        default: false,
    },
    mail: {
        type: Object,
        default: {},
    },
});

const form = ref({
    mainDeptLevel: props.mail.mainDeptLevel,
});
const formRef = ref(null);
const rules = ref({
    mainDeptId: [
        {
            required: true,
            message: "请选择办理单位",
        },
    ],
});
if (props.mail.flowKey === "second_distribute") {
    rules.value = {
        mainDeptId: [
            {
                required: true,
                message: "请选择办理单位",
            },
        ],
        mainDeptLevel: [
            {
                required: true,
                message: "请选择主办层级",
            },
        ],
    };
}

const emits = defineEmits(["update:data"]);

const depts = ref([]);

getDepts();
function getDepts() {
    if (props.flowKey === "first_distribute") {
        listSecond().then((data) => {
            depts.value = data;
        });
    }
    if (props.flowKey === "second_distribute") {
        listThree().then((data) => {
            depts.value = data;
        });
    }
}

function validate() {
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid) => {
            if (valid) {
                emits("update:data", form.value);
                resolve(true);
            } else {
                reject();
            }
        });
    });
}

defineExpose({
    validate,
});
</script>
<style lang="scss" scoped>
:deep() {
    .el-form-item-label_nopadding .el-form-item__label {
        padding-right: 0;
    }
}
</style>