feat: 新增和列表

src/api/modules/demo/data.ts

@@ -8,6 +8,10 @@ export const listDataApi = (query: any) => {
   return http.get<any[]>('/demo/data/list', query, { loading: true })
 }
 
+export const getFormSelectsApi = (query: { field: string }) => {
+  return http.get<string[]>('/demo/data/getFromSelects', query, { loading: false })
+}
+
 /**
  * @name 查询数据管理详细
  * @param id id

src/components/FormDialog/index.vue

@@ -27,6 +27,7 @@ import { ref, ComputedRef, computed } from 'vue'
 import ProFrom from '@/components/ProForm/index.vue'
 import { ElMessage } from 'element-plus'
 import FileUpload from '@/components/Upload/File.vue'
+// import mittBus from '@/utils/mittBus'
 
 export interface FormParameterProps {
   title: string // 标题
@@ -84,7 +85,14 @@ const handleSubmit = () => {
     butLoading.value = false
   })
 }
-
+// mittBus.on('data:fileName', (fileName: string) => {
+//   if (fileName !== undefined && fileName !== null) {
+//     console.log(proFormRef.value?.formModel)
+//     if(proFormRef.value?.formModel){
+//       proFormRef.value.formModel.name = fileName.split('.')[0]
+//     }
+//   }
+// })
 // 取消按钮，重置表单，关闭弹框
 const handleCancel = () => {
   console.log(parameter.value.model)

src/components/ImportPicDataset/index.vue

@@ -169,11 +169,11 @@ const handleSubmit = async () => {
     parameter.value.getTableList && parameter.value.getTableList()
     dialogVisible.value = false
   } catch (error) {
-    ElNotification({
-      title: '温馨提示',
-      message: `文件上传失败，请重新上传`,
-      type: 'error'
-    })
+    // ElNotification({
+    //   // title: '温馨提示',
+    //   // message: `文件上传失败，请重新上传`,
+    //   // type: 'error'
+    // })
   }
 }
 

src/components/Upload/Img.vue

@@ -18,15 +18,21 @@
         <img :src="'/api' + imageUrl" class="upload-image" />
         <div class="upload-handle" @click.stop>
           <div v-if="!self_disabled" class="handle-icon" @click="editImg">
-            <el-icon><Edit /></el-icon>
+            <el-icon>
+              <Edit />
+            </el-icon>
             <span>编辑</span>
           </div>
           <div class="handle-icon" @click="imgViewVisible = true">
-            <el-icon><ZoomIn /></el-icon>
+            <el-icon>
+              <ZoomIn />
+            </el-icon>
             <span>查看</span>
           </div>
           <div v-if="!self_disabled" class="handle-icon" @click="deleteImg">
-            <el-icon><Delete /></el-icon>
+            <el-icon>
+              <Delete />
+            </el-icon>
             <span>删除</span>
           </div>
         </div>
@@ -34,7 +40,9 @@
       <template v-else>
         <div class="upload-empty">
           <slot name="empty">
-            <el-icon><Plus /></el-icon>
+            <el-icon>
+              <Plus />
+            </el-icon>
             <!-- <span>请上传图片</span> -->
           </slot>
         </div>
@@ -53,6 +61,7 @@ import { generateUUID } from '@/utils'
 import { uploadImg } from '@/api/modules/upload'
 import { ElNotification, formContextKey, formItemContextKey } from 'element-plus'
 import type { UploadProps, UploadRequestOptions } from 'element-plus'
+import mittBus from '@/utils/mittBus'
 
 interface UploadFileProps {
   imageUrl: string // 图片地址 ==> 必传
@@ -105,8 +114,8 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
   try {
     const api = props.api ?? uploadImg
     const res = await api(formData)
-
     emit('update:imageUrl', res.data.url)
+    mittBus.emit('data:fileName', res.data.fileName)
     // 调用 el-form 内部的校验方法（可自动校验）
     formItemContext?.prop && formContext?.validateField([formItemContext.prop as string])
   } catch (error) {

src/views/demo/data/index.vue

@@ -7,8 +7,8 @@
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
         <el-button type="primary" v-auth="['demo:data:add']" :icon="CirclePlus" @click="openDialog(1, '数据新增')"> 新增 </el-button>
-        <el-button type="primary" v-auth="['demo:data:import']" :icon="Upload" plain @click="batchAdd"> 导入数据集 </el-button>
-        <el-button type="primary" v-auth="['demo:data:export']" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
+        <el-button type="primary" v-auth="['demo:data:import']" :icon="Upload" plain @click="batchAdd"> 导入数据集</el-button>
+        <el-button type="primary" v-auth="['demo:data:export']" :icon="Download" plain @click="downloadFile"> 导出</el-button>
         <el-button
           type="danger"
           v-auth="['demo:data:remove']"
@@ -47,10 +47,10 @@ import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
 // import { fabric } from 'fabric'
 import { useDrawArea } from '@/utils/fabric'
-import { getDictsApi } from '@/api/modules/system/dictData'
 import ImgDetect from '../components/img-detect.vue'
 import {
   listDataApi,
+  getFormSelectsApi,
   delDataApi,
   addDataApi,
   updateDataApi,
@@ -59,6 +59,7 @@ import {
   exportDataApi,
   getDataApi
 } from '@/api/modules/demo/data'
+
 const imgDetect = ref()
 const state = reactive({
   area: '' as string,
@@ -74,7 +75,6 @@ const proTable = ref<ProTableInstance>()
 //   return new URL(name, import.meta.url).href
 // }
 
-const initParam = reactive({ type: 1 })
 // 删除数据管理信息
 const deleteData = async (params: any) => {
   await useHandleData(delDataApi, params.id, `删除【${params.name}】数据`)
@@ -95,6 +95,8 @@ const markImg = data => {
     ElMessage.warning('缺失图像,暂时不能进行区域添加！')
   }
 }
+const initParam = reactive({ type: 1 })
+
 const getList = () => {
   useDrawArea({
     src: state.cover,
@@ -124,17 +126,6 @@ const handleImgSuccess = data => {
   getList()
 }
 
-const labeledTypeData = [
-  {
-    label: '是',
-    value: true
-  },
-  {
-    label: '否',
-    value: false
-  }
-]
-
 // 批量删除数据管理信息
 const batchDelete = async (ids: string[]) => {
   await useHandleData(delDataApi, ids, '删除所选数据信息')
@@ -182,18 +173,9 @@ const openDialog = async (type: number, title: string, row?: any) => {
   formDialogRef.value?.openDialog(params)
 }
 
-// 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
   { prop: 'yuan', label: '原图', width: 200 },
-  {
-    prop: 'batchNum',
-    label: '批次号',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
   {
     prop: 'name',
     label: '名称',
@@ -202,44 +184,70 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 120
   },
+  // {
+  //   prop: 'dataType',
+  //   label: '数据类型',
+  //   search: {
+  //     el: 'input'
+  //   },
+  //   width: 120
+  // },
+  // {
+  //   prop: 'fileType',
+  //   label: '文件类型',
+  //   search: {
+  //     el: 'input'
+  //   },
+  //   width: 120
+  // },
   {
     prop: 'objectType',
     label: '目标类型',
     search: {
-      el: 'input'
+      el: 'tree-select'
     },
-    width: 120
+    width: 120,
+    enum: () => getFormSelectsApi({ field: 'object_type' }),
+    fieldNames: { label: 'key', value: 'value' }
   },
   {
     prop: 'objectSubtype',
     label: '目标子类型',
     search: {
-      el: 'input'
+      el: 'tree-select'
     },
+    enum: () => getFormSelectsApi({ field: 'object_subtype' }),
+    fieldNames: { label: 'key', value: 'value' },
     width: 120
   },
   {
-    prop: 'scene',
-    label: '场景',
+    prop: 'batchNum',
+    label: '批次号',
     search: {
-      el: 'input'
+      el: 'tree-select'
     },
+    enum: () => getFormSelectsApi({ field: 'batch_num' }),
+    fieldNames: { label: 'key', value: 'value' },
     width: 120
   },
   {
-    prop: 'dataSource',
-    label: '数据源',
+    prop: 'scene',
+    label: '场景',
     search: {
-      el: 'input'
+      el: 'tree-select'
     },
+    enum: () => getFormSelectsApi({ field: 'scene' }),
+    fieldNames: { label: 'key', value: 'value' },
     width: 120
   },
   {
-    prop: 'gatherSpot',
-    label: '采集地点',
+    prop: 'dataSource',
+    label: '数据源',
     search: {
-      el: 'input'
+      el: 'tree-select'
     },
+    enum: () => getFormSelectsApi({ field: 'data_source' }),
+    fieldNames: { label: 'key', value: 'value' },
     width: 120
   },
   {
@@ -252,59 +260,51 @@ const columns = reactive<ColumnProps<any>[]>([
     width: 120
   },
   {
-    prop: 'dataType',
-    label: '数据类型',
-    enum: () => getDictsApi('data_type'),
+    prop: 'gatherSpot',
+    label: '采集地点',
     search: {
       el: 'tree-select'
     },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
+    enum: () => getFormSelectsApi({ field: 'gather_spot' }),
+    fieldNames: { label: 'key', value: 'value' },
+    width: 120
+  },
+  {
+    prop: 'increment',
+    label: '扩增方式',
+    search: {
+      el: 'tree-select'
+    },
+    enum: () => getFormSelectsApi({ field: 'increment' }),
+    fieldNames: { label: 'key', value: 'value' },
     width: 120
   },
-  // {
-  //   prop: 'fileType',
-  //   label: '文件类型',
-  //   search: {
-  //     el: 'input'
-  //   },
-  //   width: 120
-  // },
-  // {
-  //   prop: 'increment',
-  //   label: '扩增方式',
-  //   search: {
-  //     el: 'input'
-  //   },
-  //   width: 120
-  // },
   {
     prop: 'labeled',
     label: '是否标注',
     search: {
-      el: 'input'
+      el: 'tree-select'
     },
+    enum: [
+      { label: '是', value: '是' },
+      { label: '否', value: '否' }
+    ],
+    fieldNames: { label: 'key', value: 'value' },
     width: 120
   },
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
+
 // 表单配置项
 let formItems: ProForm.ItemsOptions[] = []
 const setFormItems = () => {
   formItems = [
     {
-      label: '原图',
+      label: '图片',
       prop: 'url',
       compOptions: {
         elTagName: 'img-upload',
-        placeholder: '请选择上传原图'
-      }
-    },
-    {
-      label: '批次号',
-      prop: 'batchNum',
-      rules: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入批次号'
+        placeholder: '请选择上传图片'
       }
     },
     {
@@ -315,6 +315,22 @@ const setFormItems = () => {
         placeholder: '请输入名称'
       }
     },
+    // {
+    //   label: '数据类型',
+    //   prop: 'dataType',
+    //   rules: [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
+    //   compOptions: {
+    //     placeholder: '请输入数据类型'
+    //   }
+    // },
+    // {
+    //   label: '文件类型',
+    //   prop: 'fileType',
+    //   rules: [{ required: true, message: '文件类型不能为空', trigger: 'blur' }],
+    //   compOptions: {
+    //     placeholder: '请输入文件类型'
+    //   }
+    // },
     {
       label: '目标类型',
       prop: 'objectType',
@@ -348,14 +364,6 @@ const setFormItems = () => {
         placeholder: '请输入数据源'
       }
     },
-    {
-      label: '采集地点',
-      prop: 'gatherSpot',
-      rules: [{ required: true, message: '采集地点不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入采集地点'
-      }
-    },
     {
       label: '采集时间',
       prop: 'gatherTime',
@@ -368,26 +376,29 @@ const setFormItems = () => {
       }
     },
     {
-      label: '数据类型',
-      prop: 'dataType',
-      rules: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
+      label: '采集地点',
+      prop: 'gatherSpot',
+      rules: [{ required: true, message: '采集地点不能为空', trigger: 'blur' }],
       compOptions: {
-        elTagName: 'select',
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue',
-        enum: () => getDictsApi('data_type'),
-        placeholder: '请选择数据类型'
+        placeholder: '请输入采集地点'
       }
     },
     {
-      label: '是否标注',
-      prop: 'labeled',
-      rules: [{ required: true, message: '请选择是否标注' }],
+      label: '批次号',
+      prop: 'batchNum',
+      rules: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
       compOptions: {
-        elTagName: 'radio-group',
-        enum: labeledTypeData
+        placeholder: '请输入批次号'
       }
     }
+    // {
+    //   label: '扩增方式',
+    //   prop: 'increment',
+    //   rules: [{ required: true, message: '扩增方式不能为空', trigger: 'blur' }],
+    //   compOptions: {
+    //     placeholder: '请输入扩增方式'
+    //   }
+    // }
   ]
 }
 </script>