admin-sjzx/src/views/pqs/supervise/terminal/components/add.vue

<template>
    <el-dialog v-model="dialogVisible" :title="title" style="width: 800px">
        <el-form :model="form" :rules="rules" class="form-style" ref="elform" label-width="120px">
            <el-form-item label="终端编号:" prop="id">
                <el-input
                    clearable
                    :disabled="title == `修改`"
                    v-model="form.id"
                    placeholder="请输入终端编号"
                ></el-input>
            </el-form-item>
            <el-form-item label="终端名称:" prop="name">
                <el-input clearable v-model="form.name" placeholder="请输入终端名称"></el-input>
            </el-form-item>
            <el-form-item label="送检单位:" prop="inspectionUnit">
                <el-input clearable v-model="form.inspectionUnit" placeholder="请输入送检单位"></el-input>
            </el-form-item>
            <el-form-item label="检测时间:" prop="inspectionTime">
                <el-date-picker
                    v-model="form.inspectionTime"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="选择日期"
                ></el-date-picker>
            </el-form-item>
            
            <el-form-item label="安装位置:" prop="installPlace">
                <el-input clearable v-model="form.installPlace" placeholder="请输入安装位置"></el-input>
            </el-form-item>
            <el-form-item label="生产厂家:" prop="manufacture">
                <el-select v-model="form.manufacture" placeholder="请选择生产厂家" clearable class="select">
                    <el-option
                        v-for="item in manufactorList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="原始数据报告:" prop="fileList">
                <el-upload
                    v-model:file-list="form.fileList"
                    ref="uploadRef"
                    action=""
                    accept=".doc,.docx"
                    :limit="1"
                    :on-exceed="handleExceed"
                    :on-change="choose"
                    :auto-upload="false"
                >
                    <template #trigger>
                        <el-button type="primary">上传文件</el-button>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useDictData } from '@/stores/dictData'
import { upload, insertTerminal } from '@/api/process-boot/terminal'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

import { genFileId, ElMessage } from 'element-plus'
const emit = defineEmits(['onsubmit'])
const dictData = useDictData()
const manufactorList = dictData.getBasicData('Dev_Manufacturers')
const dialogVisible = ref(false)
const title = ref('')
const form = ref({
    id: '',
    inspectionUnit: '',
    inspectionTime: '',
    installPlace: '',
    originalReport: '',
    manufacture: '',
    name: '',
    originalName: '',
    orgNo: dictData.state.area[0].id,
    orgName: dictData.state.area[0].name,
    fileList: []
})
const elform = ref()
const uploadRef = ref()
const rules = {
    id: [{ required: true, message: '请输入终端编号', trigger: 'blur' }],
    name: [{ required: true, message: '请输入终端名称', trigger: 'blur' }],
    installPlace: [{ required: true, message: '请输入安装位置', trigger: 'blur' }],
    inspectionUnit: [{ required: true, message: '请输入送检单位', trigger: 'blur' }],
    inspectionTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
    manufacture: [{ required: true, message: '请选择生产厂家', trigger: 'change' }],
    fileList: [{ required: true, message: '请选择文件', trigger: 'change' }]
}
const submit = () => {
    elform.value.validate((valid: any) => {
        if (title.value == '新增') {
            insertTerminal(form.value).then(res => {
                ElMessage.success('新增成功!')
                dialogVisible.value = false
                emit('onsubmit')
           
            })
        } else {
        }
    })
}

// 上传报告
const handleExceed: UploadProps['onExceed'] = files => {
    uploadRef.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadRef.value!.handleStart(file)
}
const choose = (e: any) => {
    upload(e.raw).then(res => {
        form.value.originalReport = res.data
    })
}

const open = (row: any) => {
    title.value = row.title
    dialogVisible.value = true
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-upload-list__item) {
    width: 400px;
}
</style>