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

<template>
    <el-form :label-width="150" :model="form" :rules="rules" ref="formRef">
        <el-row>
            <el-form-item label="接访形式" prop="interviewType">
                <el-select v-model="form.interviewType" style="width: 450px">
                    <el-option
                        v-for="item in dictData.interview_type"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="12" prop="interviewIsLeader">
                <el-form-item label="是否接访一把手">
                    <el-radio-group v-model="form.interviewIsLeader">
                        <el-radio :label="true" size="large">是</el-radio>
                        <el-radio :label="false" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="12" prop="interviewPoliceEmpNo">
                <el-form-item label="接访领导" prop="interviewPoliceEmpNo">
                    <LeaderSelect v-model="form.interviewPoliceEmpNo" @change="handleSelect" leader-type="all" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-form-item
                label="接访情况"
                prop="interviewDetails"
                style="width: 100%"
            >
                <el-input
                    type="textarea"
                    v-model="form.interviewDetails"
                    :rows="5"
                    style="width: 100%"
                />
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="上传佐证" prop="interviewAttachments">
                    <Upload v-model="form.interviewAttachments" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="佐证证明材料说明">
                    <p>
                        当面接访/视频接访，请上传接访照片； 电话接访，
                        请上传录音文件。
                    </p>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { useDictData } from "@/hooks/useDictOptions";
const { dictData } = useDictData(["interview_type"]);

const form = ref({});
const formRef = ref(null);
const rules = {
    interviewType: [
        {
            required: true,
            message: "请选择接访形式",
        },
    ],
    interviewIsLeader: [
        {
            required: true,
            message: "请选择是否一把手接访",
        },
    ],
    interviewPoliceEmpNo: [
        {
            required: true,
            message: "请选择接访领导",
        },
    ],
    interviewDetails: [
        {
            required: true,
            message: "请填写接访情况",
        },
    ],
    interviewAttachments: [
        {
            required: true,
            message: "请上传佐证",
        },
    ],
};



function handleSelect(empNo, option) {
    form.value.interviewPoliceName = option.name;
}

const props = defineProps({
    data: {
        type: Object,
        default: {},
    },
});

const emits = defineEmits(["update: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>
p {
    margin: 0;
}
</style>