联调案例库

src/views/pqs/database/stencil/components/form.vue

@@ -1,55 +1,14 @@
 <template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="1200px">
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="700px">
         <el-scrollbar>
-            <el-form :inline="false" :model="form" class="form-two" label-width="auto" :rules="rules" ref="formRef">
-                <el-form-item label="事件名称">
-                    <el-input v-model="form.name" placeholder="请输入事件名称" />
-                </el-form-item>
-                <el-form-item label="发生事件">
-                    <el-input v-model="form.code" placeholder="请输入发生事件" />
-                </el-form-item>
-                <el-form-item label="发生地点">
-                    <el-input v-model="form.remark" placeholder="请输入发生地点" />
+            <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
+                <el-form-item label="模版名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入模版名称" />
                 </el-form-item>
 
-                <el-form-item label="事件简介">
-                    <el-input
-                        v-model="form.code"
-                        placeholder="请输入事件简介"
-                        :autosize="{ minRows: 2, maxRows: 4 }"
-                        type="textarea"
-                    />
-                </el-form-item>
-                <el-form-item label="事件经过">
-                    <el-input
-                        v-model="form.code"
-                        placeholder="请输入事件经过"
-                        :autosize="{ minRows: 2, maxRows: 4 }"
-                        type="textarea"
-                    />
-                </el-form-item>
-                <el-form-item label="处理措施">
-                    <el-input
-                        v-model="form.code"
-                        placeholder="请输入处理措施"
-                        :autosize="{ minRows: 2, maxRows: 4 }"
-                        type="textarea"
-                    />
-                </el-form-item>
-                <el-form-item label="治理效果">
-                    <el-input
-                        v-model="form.code"
-                        placeholder="请输入治理效果"
-                        :autosize="{ minRows: 2, maxRows: 4 }"
-                        type="textarea"
-                    />
-                </el-form-item>
-                <el-form-item label="附件">
-                    <el-upload v-model:file-list="fileList" action="" multiple :limit="3" :on-exceed="handleExceed">
-                        <el-button type="primary">Click to upload</el-button>
-                        <template #tip>
-                            <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
-                        </template>
+                <el-form-item label="模版">
+                    <el-upload v-model:file-list="urlList" action="" :limit="1" :auto-upload="false" multiple>
+                        <el-button type="primary">上传</el-button>
                     </el-upload>
                 </el-form-item>
             </el-form>
@@ -66,35 +25,46 @@
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
-import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
-
+import { libtemplateAdd, updateTemplate } from '@/api/supervision-boot/database/index'
+import { uploadFile, getFileNameAndFilePath } from '@/api/system-boot/file'
 const dialogVisible = ref(false)
 const title = ref('')
-const tableStore = inject('tableStore') as TableStore
+const emit = defineEmits([ 'onSubmit'])
 const formRef = ref()
-const fileList = ref([])
 // 注意不要和表单ref的命名冲突
 const form = reactive<anyObj>({
-    code: '',
     name: '',
-    remark: '',
-    id: ''
+    url: ''
 })
-const rules = {
-    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
-    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+const urlList: any = ref([])
+const defaultProps = {
+    children: 'children',
+    label: 'name',
+    value: 'id'
 }
-
-const handleExceed = (files: any, uploadFiles: any) => {}
-
+const rules = {
+    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
+}
+const dataTree: any = ref([])
 const open = (text: string, data?: anyObj) => {
     title.value = text
+    urlList.value = []
     dialogVisible.value = true
     if (data) {
         // 表单赋值
         for (let key in form) {
             form[key] = data[key]
         }
+        form.id = data.id
+
+        if (data.url?.length > 0) {
+            getFileNameAndFilePath({ filePath: data.url }).then(res => {
+                urlList.value.push({
+                    name: res.data.fileName,
+                    url: res.data.name
+                })
+            })
+        }
     } else {
         // 在此处恢复默认表单
         for (let key in form) {
@@ -102,20 +72,70 @@ const open = (text: string, data?: anyObj) => {
         }
     }
 }
+
 const submit = () => {
     formRef.value.validate(async (valid: boolean) => {
         if (valid) {
-            if (form.id) {
-                // await update(form)
+            if (urlList.value.length > 0) {
+                const promises = urlList.value.map(async (item: any) => {
+                    if (urlList.value[0].raw) {
+                        return new Promise((resolve, reject) => {
+                            uploadFile(item.raw, '/supervision/')
+                                .then((res: any) => {
+                                    resolve(res.data.name)
+                                })
+                                .catch(reject)
+                        })
+                    } else {
+                        return item.url
+                    }
+                })
+
+                try {
+                    const fileNames = await Promise.all(promises)
+                    form.url = fileNames.join(',') + ''
+                } catch (error) {
+                    console.error('上传文件出错', error)
+                    return
+                }
             } else {
-                // await create(form)
+                form.url = ''
             }
-            ElMessage.success('保存成功')
-            tableStore.index()
-            dialogVisible.value = false
+
+            setTimeout(() => {
+                if (title.value == '新增模版') {
+                    libtemplateAdd({
+                        name: form.name,
+                        url: form.url
+                    }).then(res => {
+                        ElMessage.success('新增成功')
+                        handleClose()
+                        dialogVisible.value = false
+                    })
+                } else {
+                    updateTemplate({
+                        name: form.name,
+                        url: form.url,
+                        id: form.id
+                    }).then(res => {
+                        ElMessage.success('修改成功')
+                        handleClose()
+                        dialogVisible.value = false
+                    })
+                }
+            }, 100)
         }
     })
 }
-
+const handleClose = () => {
+    urlList.value = []
+    emit('onSubmit')
+    dialogVisible.value = false
+}
 defineExpose({ open })
 </script>
+<style lang="scss" scoped>
+:deep(.el-upload-list__item) {
+    width: 400px;
+}
+</style>