supervision-vue/src/components/negative/distribute.vue

<template>
    <el-form :label-width="140" :model="form" ref="formRef" :rules="rules">
        <h2>办理单位</h2>
        <el-row>
            <el-col :span="12">
                <el-form-item label="主办层级" prop="hostLevel">
                    <el-select style="width: 400px" v-model="form.hostLevel">
                        <el-option
                            v-for="item in dict.hostLevel"
                            :key="item.id"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                        />
                    </el-select>
                    <div class="tips mt-10">
                        <p>如主办层级 为 市局主办， 则由市局直属支队办理；</p>
                        <p>
                            如主办层级 为
                            二级机构主办时，则由涉及单位的二级机构办理；
                        </p>
                        <p>如主办层级 为 三级机构主办时， 则由涉及单位办理。</p>
                    </div>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="办理单位" prop="departId">
                    <el-tree-select
                        :data="departs"
                        :props="{ label: 'shortName', value: 'id' }"
                        node-key="id"
                        clearable
                        filterable
                        v-model="form.departId"
                        @change="handleSelectDepart"
                    />
                    <div class="tips mt-10">
                        <p>请根据问题信息的内容，再次确认涉及单位是否正确</p>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
        <template v-if="negative.flowKey === FlowNodeEnum.FIRST_DISTRIBUTE">
            <el-form-item label="办理时限" prop="timeLimit">
    
                <time-limit-select v-model="form.timeLimit" v-model:maxSignDuration="form.maxSignDuration" v-model:maxHandleDuration="form.maxHandleDuration" v-model:maxExtensionDuration="form.maxExtensionDuration" />
            </el-form-item>
            <el-form-item label="审批流程" prop="approvalFlow">
                <el-radio-group v-model="form.approvalFlow">
                    <el-radio
                        v-for="item in dict.approvalFlow"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel
                        }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item label="下发意见" prop="">
                <el-input v-model="form.firstDistributeComments" type="textarea" placeholder="请输入" :autosize="{ minRows: 4 }" class="mb-8" />
                <el-alert title="经核验，该问题为二次下发，请填写下发意见" type="warning" />
            </el-form-item>
        </template>
    </el-form>
</template>
<script lang="ts" setup>
import useCatchStore from "@/stores/modules/catch";
import { secondList, listChildren, departTree, listByFirstHost } from "@/api/system/depart";
import { FlowNodeEnum } from "@/enums/flowEnums";
import { HostLevel } from "@/enums/dictEnums";

const dict = useCatchStore().getDicts([
    "hostLevel",
    "timeLimit",
    "approvalFlow",
]);

const departs = ref<any[]>([]);

const work = inject("work");

const negative = inject("negative");

function getDeparts() {
    if (negative.value.flowKey === FlowNodeEnum.FIRST_DISTRIBUTE) {
        if (form.value.hostLevel === HostLevel.FIRST) {
            listByFirstHost().then((data) => {
                departs.value = data;
            });
        }
        else if (form.value.hostLevel === HostLevel.SECOND) {
            secondList().then((data) => {
                departs.value = data;
            });
        }
        else if (form.value.hostLevel === HostLevel.THREE) {
            departTree().then((data) => {
                departs.value = data;
            });
        }
    } else {
        listChildren(work.value.workDepartId).then((data) => {
            departs.value = data;
        });
    }
}

onMounted(() => {
    getDeparts();
});

const form = ref({
    hostLevel: negative.value.hostLevel,
});

watch(
    () => form.value.hostLevel,
    () => {
        getDeparts();
    }
);

const formRef = ref(null);
const rules = {
    hostLevel: [
        {
            required: true,
            message: "请选择主办层级",
            trigger: ["blur", "change"],
        },
    ],
    departId: [
        {
            required: true,
            message: "请选择办理单位",
            trigger: ["blur", "change"],
        },
    ],
    timeLimit: [
        {
            required: true,
            message: "请选择办理时限",
            trigger: ["blur", "change"],
        },
    ],
    approvalFlow: [
        {
            required: true,
            message: "请选择审批流程",
            trigger: ["blur", "change"],
        },
    ],
};

function handleSelectDepart(val: string) {
    form.value.departName = departs.value.filter(
        (item) => item.id === val
    )[0].shortName;
}

async function validate() {
    const flag = await formRef.value.validate();
    if (flag) {
        return form.value;
    }
}

defineExpose({
    validate,
});
</script>
<style lang="scss" scoped>
</style>