Vue3的CRUD模版（附Demo）

目录

  • 前言
  • 模版

前言

用惯Vue2之后，在碰Vue3后，整体还是有所区别

此文主要做一个回顾总结

假设界面如下：

在这里插入图片描述

可CRUD，对应的新增 添加一些必选项：

在这里插入图片描述

其中数据库的设计如下：
在这里插入图片描述

模版

对应需要注意参数位置、初始化表单，重置表单等位置

其首页界面如下：

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input
          v-model="queryParams.enterpriseName"
          placeholder="请输入企业名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="信用代码" prop="creditCode">
        <el-input
          v-model="queryParams.creditCode"
          placeholder="请输入信用代码"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="注册人" prop="registrant">
        <el-input
          v-model="queryParams.registrant"
          placeholder="请输入注册人"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactNumber">
        <el-input
          v-model="queryParams.contactNumber"
          placeholder="请输入联系电话"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="审批通过与否" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择审批通过与否"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.DSP_PASS_OR_NOT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['dangerous:enterprise-registry:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['dangerous:enterprise-registry:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="企业名称" align="center" prop="enterpriseName" />
      <el-table-column label="信用代码" align="center" prop="creditCode" />
      <el-table-column label="注册人" align="center" prop="registrant" />
      <el-table-column label="联系电话" align="center" prop="contactNumber" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column label="审批通过与否" align="center" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.DSP_PASS_OR_NOT" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['dangerous:enterprise-registry:update']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['dangerous:enterprise-registry:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <EnterpriseRegistryForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { EnterpriseRegistryApi, EnterpriseRegistryVO } from '@/api/dangerous/enterpriseregistry'
import EnterpriseRegistryForm from './EnterpriseRegistryForm.vue'

/** 企业信息 列表 */
defineOptions({ name: 'EnterpriseRegistry' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<EnterpriseRegistryVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  enterpriseName: undefined,
  creditCode: undefined,
  registrant: undefined,
  contactNumber: undefined,
  createTime: [],
  status: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await EnterpriseRegistryApi.getEnterpriseRegistryPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await EnterpriseRegistryApi.deleteEnterpriseRegistry(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await EnterpriseRegistryApi.exportEnterpriseRegistry(queryParams)
    download.excel(data, '企业信息.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

其表单内容如下：

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input v-model="formData.enterpriseName" placeholder="请输入企业名称" />
      </el-form-item>
      <el-form-item label="信用代码" prop="creditCode">
        <el-input v-model="formData.creditCode" placeholder="请输入信用代码" />
      </el-form-item>
      <el-form-item label="注册人" prop="registrant">
        <el-input v-model="formData.registrant" placeholder="请输入注册人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactNumber">
        <el-input v-model="formData.contactNumber" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="审批通过与否" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio
            v-for="dict in getStrDictOptions(DICT_TYPE.DSP_PASS_OR_NOT)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { FormRules } from 'element-plus'
import { EnterpriseRegistryApi, EnterpriseRegistryVO } from '@/api/dangerous/enterpriseregistry'

/** 企业信息 表单 */
defineOptions({ name: 'EnterpriseRegistryForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  enterpriseName: undefined,
  creditCode: undefined,
  registrant: undefined,
  contactNumber: undefined,
  status: undefined,
})
const formRules = reactive<FormRules>({
  enterpriseName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
  creditCode: [{ required: true, message: '信用代码不能为空', trigger: 'blur' }],
  registrant: [{ required: true, message: '注册人不能为空', trigger: 'blur' }],
  contactNumber: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
  status: [{ required: false, message: '联系电话不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await EnterpriseRegistryApi.getEnterpriseRegistry(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as EnterpriseRegistryVO
    if (formType.value === 'create') {
      await EnterpriseRegistryApi.createEnterpriseRegistry(data)
      message.success(t('common.createSuccess'))
    } else {
      await EnterpriseRegistryApi.updateEnterpriseRegistry(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    enterpriseName: undefined,
    creditCode: undefined,
    registrant: undefined,
    contactNumber: undefined,
    status: undefined,
  }
  formRef.value?.resetFields()
}
</script>

对应后端的接口传输如下：

import request from '@/config/axios'

// 企业信息 VO
export interface EnterpriseRegistryVO {
  id: number // 序号
  enterpriseName: string // 企业名称
  creditCode: string // 信用代码
  registrant: string // 注册人
  contactNumber: number // 联系电话
  status: string // 审批通过与否
}

// 企业信息 API
export const EnterpriseRegistryApi = {
  // 查询企业信息分页
  getEnterpriseRegistryPage: async (params: any) => {
    return await request.get({ url: `/dangerous/enterprise-registry/page`, params })
  },

  // 查询企业信息详情
  getEnterpriseRegistry: async (id: number) => {
    return await request.get({ url: `/dangerous/enterprise-registry/get?id=` + id })
  },

  // 新增企业信息
  createEnterpriseRegistry: async (data: EnterpriseRegistryVO) => {
    return await request.post({ url: `/dangerous/enterprise-registry/create`, data })
  },

  // 修改企业信息
  updateEnterpriseRegistry: async (data: EnterpriseRegistryVO) => {
    return await request.put({ url: `/dangerous/enterprise-registry/update`, data })
  },

  // 删除企业信息
  deleteEnterpriseRegistry: async (id: number) => {
    return await request.delete({ url: `/dangerous/enterprise-registry/delete?id=` + id })
  },

  // 导出企业信息 Excel
  exportEnterpriseRegistry: async (params) => {
    return await request.download({ url: `/dangerous/enterprise-registry/export-excel`, params })
  },
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/613575.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python 全栈系列243 S2S flask_celery

Python 全栈系列243 S2S flask_celery

说明 按现有的几个架构部件&#xff0c;构建数据流。 S Redis Stream。这个可以作为缓冲队列和简单任务队列&#xff0c;速度非常快&#xff0c;至少是万条/秒的速度。 Q RabbitMQ。这个作为任务队列&#xff0c;消息也主要是元数据。读速比较慢&#xff0c;但有一些特性&a…
阅读更多...
【激活函数--中】激活函数和阶跃函数的可视化及对比

【激活函数--中】激活函数和阶跃函数的可视化及对比

文章目录 一、Python中绘制阶跃函数的图形二、实现和可视化Sigmoid函数2.1 Python实现2.2 可视化Sigmoid函数 三、比较Sigmoid函数与阶跃函数3.1 Sigmoid函数与阶跃函数的差异3.2 Sigmoid函数与阶跃函数的共同点 一、Python中绘制阶跃函数的图形 在Python中实现阶跃函数的代码…
阅读更多...
智能AI个人名片小程序源码系统 带完整的安装代码包以及搭建部署教程

智能AI个人名片小程序源码系统 带完整的安装代码包以及搭建部署教程

在当今数字化时代&#xff0c;个人名片不再仅仅是一张简单的纸质卡片&#xff0c;而是演变成了一种更加智能、便捷的数字化工具。为了满足这一需求&#xff0c;小编给大家分享一款智能AI个人名片小程序源码系统&#xff0c;该系统不仅提供了完整的安装代码包&#xff0c;还附带…
阅读更多...
（41）5.6-5.8数据结构（栈和队列的应用和数组）

（41）5.6-5.8数据结构（栈和队列的应用和数组）

1.栈在括号匹配中的应用 #define _CRT_SECURE_NO_WARNINGS #define MaxSize 10 typedef struct { char data[MaxSize];//静态数组存放栈中元素 int top; //栈顶指针 }SqStack;//初始化栈 void InitStack(SqStack& S);//判断栈是否为空 bool StackEmpty(SqStack S…
阅读更多...
轮式机器人简介

轮式机器人简介

迄今为止,轮子一般是移动机器人学和人造交通车辆中最流行的运动机构。它可达到很高的效率, 如图所示, 而且用比较简单的机械就可实现它的制作。 另外,在轮式机器人设计中,平衡通常不是一个研究问题。 因为在所有时间里,轮式机器人一般都被设计成在任何时间里所有轮子均与地接…
阅读更多...
vue3父子组件相互调用方法详解

vue3父子组件相互调用方法详解

&#x1f49f; 上一篇文章 Vue2中父子组件互相传值和方法调用 &#x1f4dd; 系列专栏 vue从基础到起飞 目录 1、前言 2、子组件调用父组件方法&#xff08;setup组合式&#xff09; 2.1 父组件Father.vue 2.2 子组件Child.vue 3、父组件调用子组件方法&#xff08;setup组…
阅读更多...
每天五分钟计算机视觉：使用极大值抑制来寻找最优的目标检测对象

每天五分钟计算机视觉：使用极大值抑制来寻找最优的目标检测对象

本文重点 在目标检测领域，当模型预测出多个候选框（bounding boxes）时，我们需要一种方法来确定哪些候选框最有可能表示真实的目标。由于模型的不完美性和图像中目标的重叠性，往往会有多个候选框对应于同一个目标。此时，极大值抑制（Non-Maximum Suppression，NMS）技术就…
阅读更多...
租用香港Windows服务器要注意的几种安全防护措施

租用香港Windows服务器要注意的几种安全防护措施

在网络世界里&#xff0c;永远没有绝对的安全&#xff0c;但我们可以通过采取适当的措施使风险降低。对于选择香港Windows服务器租赁的企业和个人来说&#xff0c;保护数据的安全性与隐私至关重要。下面将介绍几种关键的租用香港Windows服务器时应注意的安全防护措施。 1.使用本…
阅读更多...
汽车线控转向系统介绍

汽车线控转向系统介绍

汽车线控转向系统由方向盘总成、转向执行总成和主控制器(ECU)三个主要部分以及自动防故障系统、电源等辅助系统组成。 线控转向系统(Steering-By-Wire)&#xff0c;取消了方向盘和转向车轮之间的机械连接部件&#xff0c;彻底摆脱了机械固件的限制&#xff0c;完全由电能来实现…
阅读更多...
【qt】联合容器和集合容器

【qt】联合容器和集合容器

联合容器和集合容器 一.QMap1.应用场景2.添加数据3.删除数据4.修改数据5.查找数据6.数据个数7.是否包含8.返回所有的键名 二.QHash1.应用场景&#xff1a; 三.QMultiMap四.QMultiHash五.QSet1.应用场景2.交集3.并集4.差集 总结&#xff1a; 一.QMap 1.应用场景 QMap的底层实现…
阅读更多...
智能座舱语音助手产品方案

智能座舱语音助手产品方案

一、用户调研与痛点分析 1.目标用户分析 用户画像 性别女性年龄50地域2-3线城市职业退休或退居二线教育中专、 大专、 本科财务家庭财务管理者爱好享受生活、 照顾家庭标签有闲有小钱二、产品定位与卖点提炼 购车目的 愉悦自我&#xff0c; 专属于自己的座驾&#xff1a; 家…
阅读更多...
接口自动化入门: Requests请求头设置详解！

接口自动化入门: Requests请求头设置详解！

在进行接口自动化测试时&#xff0c;设置请求头是非常重要的一步。请求头可以包含各种信息&#xff0c;例如身份验证、内容类型、接受语言等。在实际的测试中&#xff0c;我们使用Python的Requests库来发送HTTP请求&#xff0c;并设置请求头来模拟不同的场景和需求。 下面将通…
阅读更多...
【系统架构师】-案例篇（八）数据流图

【系统架构师】-案例篇（八）数据流图

数据流&#xff1a;数据流是系统中数据的流动&#xff0c;它可以是输入、输出或存储在系统中的数据。 数据处理过程&#xff1a;数据处理过程是对数据进行处理的单元&#xff0c;可以是一个物理设备或软件模块。 数据存储&#xff1a;数据存储是系统中存储数据的单元&#xff0…
阅读更多...
共享云桌面如何助力企业信息化和数字化？

共享云桌面如何助力企业信息化和数字化？

随着科技的飞速发展&#xff0c;信息化和数字化已经成为企业转型的重要方向。共享云桌面作为一种新兴的信息化工具&#xff0c;正以其独特的优势助力企业实现信息化和数字化的目标。本文将详细探讨共享云桌面如何助力企业信息化和数字化的过程&#xff0c;以及它所带来的效益。…
阅读更多...
使用图网络和视频嵌入预测物理场

使用图网络和视频嵌入预测物理场

文章目录 一、说明二、为什么要预测&#xff1f;三、流体动力学模拟的可视化四、DeepMind神经网络建模五、图形编码六、图形处理器七、图形解码器八、具有不同弹簧常数的轨迹可视化九、预测的物理编码和推出轨迹 一、说明 这是一篇国外流体力学专家在可视化流体物理属性的设计…
阅读更多...
vcomp140.dll丢失怎么修复，四种vcomp140.dll丢失的修复办法

vcomp140.dll丢失怎么修复，四种vcomp140.dll丢失的修复办法

vcomp140.dll文件丢失可能会导致一些程序无法正常运行。这些程序通常是使用Microsoft Visual Studio 2015开发的&#xff0c;并且依赖于该动态链接库文件来处理并行计算相关的功能。一旦vcomp140.dll文件丢失或损坏&#xff0c;这些程序在启动或执行特定任务时可能会遇到各种问…
阅读更多...
视频批量剪辑神器，一键修改尺寸，轻松打造专业视觉盛宴！

视频批量剪辑神器，一键修改尺寸，轻松打造专业视觉盛宴！

视频已经成为我们生活中不可或缺的一部分。无论是制作精美的短视频&#xff0c;还是编辑专业的宣传片&#xff0c;视频剪辑都是一项必不可少的工作。然而&#xff0c;面对大量的视频素材&#xff0c;如何高效地进行批量剪辑&#xff0c;特别是修改视频尺寸&#xff0c;成为了许…
阅读更多...
【大华可见光摄像头】ffmpeg获取视频流并下载mp4 报错‘subtype‘ 不是内部或外部命令，也不是可运行的程序

【大华可见光摄像头】ffmpeg获取视频流并下载mp4 报错‘subtype‘ 不是内部或外部命令，也不是可运行的程序

我现在要通过ffmpeg获取大华摄像头视频流并下载成mp4&#xff0c;但我在cmd窗口运行下面命令的时候&#xff0c;发现报错&#xff1a; D:\Java\ffmpeg\ffmpeg-master-latest-win64-gpl\bin\ffmpeg.exe -y -i rtsp://admin:123xxx.xxx.xxx.xxx/cam/realmonitor?channel1&s…
阅读更多...
[Kubernetes] Istio on Kubernetes 实践

[Kubernetes] Istio on Kubernetes 实践

文章目录 1.Kubernetes 创建2.Istio 部署2.1 下载 Istio2.2 安装 Istio 3.Istio on Kubernetes 实践3.1 部署 Bookinfo 示例应用3.2 确定入站 IP 和端口 1.Kubernetes 创建 主机名内部ip外部ipmaster192.168.66.2139.198.36.40node1192.168.66.3139.198.1.192node2192.168.66.…
阅读更多...
SG-PEG-SG能与许多生物分子如蛋白质和核酸等进行有效结合

SG-PEG-SG能与许多生物分子如蛋白质和核酸等进行有效结合

【试剂详情】 英文名称 SG-PEG-SG 中文名称 聚乙二醇二琥珀酰亚胺戊二酸酯&#xff0c; 琥珀酰亚胺酯-聚乙二醇-琥珀酰亚胺酯 外观性状 由分子量决定&#xff0c;固体或者液体。 分子量 0.4k&#xff0c;0.6k&#xff0c;1k&#xff0c;2k&#xff0c;3.4k&#xff0c;5…
阅读更多...
最新文章

Copyright @ 2022~2023