考核3技术实现

1.图片管理

查询表单 (Smart Query Form)

<!-- 查询表单 -->
<a-form class="smart-query-form">
    <a-row class="smart-query-form-row">
        <!-- 图库ID 输入框 -->
        <a-form-item label="图库ID" class="smart-query-form-item">
            <a-input v-model:value="queryForm.libraryId" placeholder="图库ID" style="width: 200px" />
        </a-form-item>
        
        <!-- 查询按钮和重置按钮 -->
        <a-form-item class="smart-query-form-item">
            <a-button type="primary" @click="search">
                <template #icon>
                    <SearchOutlined />
                </template>
                查询
            </a-button>
            <a-button @click="resetQuery" class="smart-margin-left10">
                <template #icon>
                    <ReloadOutlined />
                </template>
                重置
            </a-button>
        </a-form-item>
        
        <!-- 图库名称选择 -->
        <a-form-item class="smart-query-form-item">
            <a-select v-model:value="selectedLibraryName" placeholder="选择图库名称" @change="onLibraryNameChange">
                <a-select-option v-for="item in libraryOptions" :key="item.id" :value="item.id">
                    {{ item.name }}
                </a-select-option>
            </a-select>
        </a-form-item>
    </a-row>
</a-form>

技术点：

v-model:value：Vue 中的双向绑定。queryForm.libraryId 和 selectedLibraryName 与输入框和下拉框绑定，便于在 Vue 实例中访问和修改数据。
查询与重置按钮：点击查询按钮触发 search 方法，重置按钮触发 resetQuery 方法，重置查询表单的值并重新查询数据。
a-select：用于选择图库名称，通过 @change="onLibraryNameChange" 监听选择变化，触发相关的查询操作。

2. 数据表格 (Smart Table)

<!-- 数据表格 -->
<a-table
  size="small"
  :dataSource="tableData"
  :columns="columns"
  rowKey="id"
  bordered
  :loading="tableLoading"
  :pagination="false"
  :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
>
  <template #bodyCell="{ text, record, column }">
    <!-- 图片预览 -->
    <template v-if="column.dataIndex === 'imgUrl'">
      <FilePreview :fileList="text" type="picture" @click="openPreviewModal(record.imgUrl)" width="100%" />
    </template>
    <!-- 操作列 -->
    <template v-if="column.dataIndex === 'action'">
      <div>
        <a-button @click="showForm(record)" type="link">编辑</a-button>
        <a-button @click="onDelete(record)" danger type="link">删除</a-button>
      </div>
    </template>
  </template>
</a-table>

技术点：

a-table：Ant Design Vue 的表格组件，用于显示图片数据。通过 dataSource 绑定表格数据，columns 配置列。
图片预览功能：在 imgUrl 列中，使用 FilePreview 组件显示图片，点击图片会触发 openPreviewModal(record.imgUrl) 方法打开图片预览弹窗。
操作列：每一行的操作列（编辑、删除按钮）通过 a-button 渲染，点击相应按钮调用 showForm(record)（编辑）和 onDelete(record)（删除）方法。
行选择：通过 row-selection 实现行选择功能，selectedRowKeyList 存储被选中的行的 key。

3. 图片预览弹窗

<!-- 图片预览弹窗 -->
<FilePreviewModal v-if="previewVisible" :fileUrl="previewUrl" @close="closePreviewModal" />

技术点：

图片预览弹窗：使用 FilePreviewModal 组件来展示图片，v-if="previewVisible" 控制弹窗的显示与隐藏，点击图片时通过 openPreviewModal(record.imgUrl) 来打开预览。
关闭预览：closePreviewModal 方法用于关闭弹窗。

4. 图片上传/编辑表单

<!-- 图片上传/编辑表单 -->
<a-modal
  :title="form.id ? '编辑图片' : '上传图片'"
  :width="800"
  :open="visibleFlag"
  @cancel="onClose"
  :maskClosable="false"
  :destroyOnClose="true"
>
  <!-- 图库名称选择 -->
  <a-form-item label="图库名称" name="libraryName">
    <a-select v-model:value="form.libraryName" placeholder="请选择图库名称" @change="handleLibraryChange">
      <a-select-option v-for="item in libraryOptions" :key="item.id" :value="item.name">{{ item.name }}</a-select-option>
    </a-select>
  </a-form-item>

  <!-- 图片名称输入框 -->
  <a-form-item label="图片名称" name="name">
    <a-input v-model:value="form.name" placeholder="图片名称" />
  </a-form-item>

  <!-- 图片上传组件 -->
  <a-form-item label="图片" name="imgUrl">
    <FileUpload v-model="form.imgUrl" accept=".jpg,.jpeg,.png,.gif" :maxSize="2" buttonText="点击上传图片" type="picture" :multiple="false" @change="handleUploadSuccess" :defaultFileList="form.imgUrl ? form.imgUrl : []" />
  </a-form-item>

  <!-- 表单操作按钮 -->
  <template #footer>
    <a-button @click="onClose">取消</a-button>
    <a-button type="primary" :loading="submitLoading" @click="onSubmit">确定</a-button>
  </template>
</a-modal>

技术点：

a-modal：使用 Ant Design Vue 的弹窗组件来展示图片上传或编辑表单。通过 :open="visibleFlag" 控制弹窗的显示，@cancel="onClose" 关闭弹窗。
a-select：图库名称的选择框，通过 v-model:value 和 @change="handleLibraryChange" 实现数据双向绑定和变化处理。
FileUpload：自定义的文件上传组件，用于上传图片。限制文件类型和大小，并通过 @change="handleUploadSuccess" 监听文件上传成功事件。
表单操作按钮：取消 按钮关闭弹窗，确定 按钮提交表单数据，调用 onSubmit 方法。

5. 上传/编辑功能与表单提交

const onSubmit = async () => {
  try {
    await formRef.value.validate();
    submitLoading.value = true;
    SmartLoading.show();

    // 编辑操作
    if (form.id) {
      await picApi.update(form);  // 调用接口更新图片信息
      message.success('修改成功');
    } else {
      await picApi.add(form);  // 调用接口添加新图片
      message.success('添加成功');
    }

    onClose();
    emit('reloadList');  // 提交后刷新图片列表
  } catch (e) {
    console.error(e);
  } finally {
    submitLoading.value = false;
    SmartLoading.hide();
  }
};

技术点：

表单提交：通过 formRef.value.validate() 验证表单数据，如果验证成功，调用 picApi.update 或 picApi.add 方法更新或新增图片信息。
SmartLoading.show() 和 SmartLoading.hide()：自定义的加载指示器，显示加载状态。
emit('reloadList')：提交成功后，触发 reloadList 事件，通知父组件刷新图片列表。

6. 批量删除功能

const confirmBatchDelete = () => {
  Modal.confirm({
    title: '提示',
    content: '确定要批量删除这些数据吗?',
    okText: '删除',
    okType: 'danger',
    onOk: requestBatchDelete,
    cancelText: '取消'
  });
};

const requestBatchDelete = async () => {
  try {
    SmartLoading.show();
    for (const id of selectedRowKeyList.value) {
      await picApi.delete(id);  // 批量删除操作
    }
    message.success('批量删除成功');
    queryData();  // 删除后刷新数据
    selectedRowKeyList.value = [];  // 清空已选择的项
  } catch (e) {
    smartSentry.captureError(e);
    message.error('批量删除失败');
  } finally {
    SmartLoading.hide();
  }
};

技术点：

批量删除确认：使用 Modal.confirm 弹出确认框，用户确认删除后调用 requestBatchDelete 删除选中的图片。

#培训阶段

考核3技术实现

http://localhost:8090//archives/kao-he-3ji-shu-shi-xian

作者

潘显镇

发布于

2024年12月04日

许可协议

配置yolov5环境上一篇

机械学习中的参数和超参数下一篇