技术监督 页面联调

src/views/pqs/supervise/terminal/components/add.vue

@@ -1,5 +1,59 @@
 <template>
-    <el-dialog v-model="dialogVisible" :title="title" style="width: 1040px">
+    <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>
@@ -9,18 +63,77 @@
     </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+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 submit = () => {}
+// 上传报告
+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) => {
-    console.log(row)
     title.value = row.title
     dialogVisible.value = true
 }
 
 defineExpose({ open })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-upload-list__item) {
+    width: 400px;
+}
+</style>