admin-govern/src/views/govern/reportForms/form.vue

<template>
    <el-dialog draggable :title="title" v-model.trim="formVisible" width="30%" :before-close="closeDialog">
        <el-form :model="formdata" label-width="100px" :rules="rules" ref="ruleForm">
            <el-form-item label="模板名称:" prop="name">
                <el-input maxlength="32" show-word-limit placeholder="模板名称" v-model.trim="formdata.name"
                    style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="部门:" prop="deptId">
                <Area v-model.trim="formdata.deptId" style="width: 100%" collapse-tags
                    :props="{ multiple: true, label: 'name', value: 'id', emitPath: false }" />
            </el-form-item>

            <el-form-item label="模板类型:" prop="reportType">
                <el-select style="width: 100%" v-model.trim="formdata.reportType" placeholder="请选择模板类型">
                    <el-option v-for="item in classificationData" :key="item.id" :label="item.label"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报表类型:" prop="reportForm">
                <el-select style="width: 100%" v-model.trim="formdata.reportForm" placeholder="请选择报表类型">
                    <el-option v-for="item in reportFormList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="preservation">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import Area from '@/components/form/area/index.vue'
import { getCustomReportTemplateById } from '@/api/harmonic-boot/luckyexcel'
import { ref, reactive } from 'vue'
const emit = defineEmits(['submitForm'])
const title = ref('')
const list = ref({})
const ruleForm = ref()
const formVisible = ref(false)
const classificationData = [
    {
        label: '电能质量报表类型',
        id: '1'
    },
    {
        label: '用能报表类型',
        id: '2'
    }
]
const reportFormList = [
    {
        value: '1',
        label: '分析报表'
    },
    {
        value: '2',
        label: '统计报表'
    },
    {
        value: '3',
        label: '自定义报表'
    }
]
const rules = {
    name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
    deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
    reportType: [{ required: true, message: '请选择模板类型', trigger: 'change' }],
    reportForm: [{ required: true, message: '请选择报表类型', trigger: 'change' }]
}
const formdata = ref({
    name: '',
    deptId: [],
    reportType: '',
    reportForm: ''
})
// 确定
const preservation = () => {
    ruleForm.value.validate((valid: boolean) => {
        if (valid) {
            emit('submitForm', formdata.value, title.value)
         
        }
    })
}
const shutDown = () => {
    formVisible.value = false
}

// 关闭
const closeDialog = () => {
    formVisible.value = false
}
const open = (text: string, row?: any) => {
    title.value = text
    if (row.id) {
        getCustomReportTemplateById({ id: row.id }).then(res => {
            formdata.value = res.data
            formdata.value.deptId = res.data.valueTitle.split(',')
        })
    }

    formVisible.value = true
}
defineExpose({ open,shutDown })
</script>
<style lang="scss" scoped></style>