联调案例库

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>

src/views/pqs/database/stencil/index.vue

@@ -8,7 +8,7 @@
         </TableHeader>
         <Table ref="tableRef"></Table>
         <!-- 弹框 -->
-        <PopupEdit ref="popupEditRef" />
+        <PopupEdit ref="popupEditRef" @onSubmit="tableStore.index()" />
     </div>
 </template>
 <script setup lang="ts">
@@ -16,7 +16,8 @@ import { onMounted, ref, provide } from 'vue'
 
 import TableStore from '@/utils/tableStore'
 import TableHeader from '@/components/table/header/index.vue'
-
+import { libtemplateDel } from '@/api/supervision-boot/database/index'
+import { ElMessage } from 'element-plus'
 import Table from '@/components/table/index.vue'
 import PopupEdit from './components/form.vue'
 defineOptions({
@@ -28,52 +29,72 @@ const popupEditRef = ref()
 const TableHeaderRef = ref()
 
 const tableStore = new TableStore({
-    url: '/user-boot/dept/deptTree',
+    url: '/supervision-boot/libtemplate/pageQuery',
     method: 'POST',
     column: [
         { title: '模版名称', field: 'name' },
         {
             title: '创建时间',
-            field: 'name1'
+            field: 'createTime'
         },
-        // {
-        //     title: '发生地点',
-        //     field: 'name2'
-        // },
-        // {
-        //     title: '处理措施',
-        //     field: 'name3'
-        // },
-        // {
-        //     title: '治理效果',
-        //     field: 'name4'
-        // }
+        {
+            title: '操作',
+            width: '280',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '预览 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {}
+                },
+                {
+                    name: 'edit',
+                    title: '下载 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {}
+                },
+                {
+                    name: 'edit',
+                    title: '修改 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        popupEditRef.value.open('修改模版', row)
+                    }
+                },
+                {
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        libtemplateDel({ id: row.id }).then(() => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
     ],
-    loadCallback: () => {
-        tableStore.table.data = [
-            {
-                name: '测试名称',
-                name1: 'xxx',
-                name2: 'XXX',
-                name3: '1月',
-                name4: '单体系统',
-                name5: '1'
-            },
-            {
-                name: '测试名称',
-                name1: 'xxx',
-                name2: 'XXX',
-                name3: '1月',
-                name4: '单体系统',
-                name5: '0'
-            }
-        ]
-    }
+    loadCallback: () => {}
 })
 
 // 弹框
 const addUser = () => {
-    popupEditRef.value.open('新增案例')
+    popupEditRef.value.open('新增模版')
 }
 
 provide('tableStore', tableStore)