编写商品列表和商品编辑和商品新增页面

 

 

addvue

<template>
  <!-- 传过来的id -->
<!-- {{ $route.query.id }} -->
<el-form
    ref="FormRef"
    style="max-width: 600px"
    :model="FormData"
    :rule="rules"
    status-icon
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="名称" prop="name">
      <el-input v-model="FormData.name" />
    </el-form-item>
    <el-form-item label="副标题" prop="subName">
      <el-input v-model.number="FormData.subName" :rows="2" type="textarea"/>
    </el-form-item>
    <el-form-item label="图片" prop="img">
      <el-input v-model="FormData.img" />
    </el-form-item>
    <el-form-item label="分类" prop="categoryId">
      <el-input v-model.number="FormData.categoryId" />
    </el-form-item>
    <el-form-item label="状态" prop="status">
  
        <el-select v-model="FormData.status" placeholder="Select" style="width: 115px">
          <el-option v-for="itme in options" :key="itme.value"  :label="itme.lable" :value="itme.value" />
        </el-select>
    </el-form-item>
    <el-form-item label="价格" prop="price">
      <el-input-number v-model="FormData.price" :precision="2" :step="0.1"/>
    </el-form-item>
    <el-form-item label="排序" prop="seq">
      <el-input v-model.number="FormData.seq" />
    </el-form-item>
    <el-form-item label="标签" prop="tags">
      <el-input v-model="FormData.tags" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(FormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(FormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
  <script setup lang="ts">
import { reactive ,ref} from 'vue';
import { productApi } from '@/api/index.ts';
import {useRoute,useRouter} from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute()
const router = useRouter()

const FormRef = ref();

  const FormData = reactive({
    name:'',
    subName:'',
    img:'',
    categoryId:'0',
    status:'',
    price:'',
    seq:'0',
    tags:''
  })

//点击登录后调用的被抽出来的方法
const submitFormData = () => {
   let params = {
    name:FormData.name,
    subName:FormData.subName,
    img:FormData.img,
    categoryId:FormData.categoryId,
    status:FormData.status,
    price:FormData.price,
    seq:FormData.seq,
    tags:FormData.tags
   }
   console.log(params)
   productApi.insert.call(params).then((_res:any)=>{
      ElMessage.success("新增成功")
       router.push({name:"list"})
   })
}

//表单验证规则，表单中的prop属性
const rules = reactive<any>({
 
})

const options =[
  {
    value:1,
    lable:"上架",
  },
  {
    value:2,
    lable:"下架",
  }
]


  //重置表单
const resetForm = (formEl: any) => {
  if (!formEl) return
  formEl.resetFields()
}
//点击登录按钮后
const submitForm = async (formEl: any) => {
  await formEl.validate((valid: any, fields: any) => {
    
    if (valid) {    
      //抽出来方法来数据提交后
      submitFormData()
    }
  })
}

  
  </script>

 edit.vue

<template>
  <!-- 传过来的id -->
<!-- {{ $route.query.id }} -->
<el-form
    ref="FormRef"
    style="max-width: 600px"
    :model="FormData"
    :rule="rules"
    status-icon
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="名称" prop="name">
      <el-input v-model="FormData.name" />
    </el-form-item>
    <el-form-item label="副标题" prop="subName">
      <el-input v-model.number="FormData.subName" :rows="2" type="textarea"/>
    </el-form-item>
    <el-form-item label="图片" prop="img">
      <el-input v-model="FormData.img" />
    </el-form-item>
    <el-form-item label="分类" prop="categoryId">
      <el-input v-model.number="FormData.categoryId" />
    </el-form-item>
    <el-form-item label="状态" prop="status">
  
        <el-select v-model="FormData.status" placeholder="Select" style="width: 115px">
          <el-option v-for="itme in options" :key="itme.value"  :label="itme.lable" :value="itme.value" />
        </el-select>
    </el-form-item>
    <el-form-item label="价格" prop="price">
      <el-input-number v-model="FormData.price" :precision="2" :step="0.1"/>
    </el-form-item>
    <el-form-item label="排序" prop="seq">
      <el-input v-model.number="FormData.seq" />
    </el-form-item>
    <el-form-item label="标签" prop="tags">
      <el-input v-model="FormData.tags" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(FormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(FormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
  <script setup lang="ts">
import { onMounted, reactive ,ref} from 'vue';
import { productApi } from '@/api/index.ts';
import {useRoute,useRouter} from 'vue-router';

const route = useRoute()
const router = useRouter()

const FormRef = ref();




onMounted(()=>{
  
  FormData.id = route.query.id != undefined ? Number(route.query.id) : 0
  console.log(FormData.id);
  
  
  callProductApi()

})

const callProductApi = () => {
  productApi.select.call({id:FormData.id}).then((res:any)=>{
     let resData = res[0];

     FormData.name=resData.name
     FormData.subName = resData.subName
     FormData.img = resData.img
     FormData.categoryId = resData.categoryId
     FormData.status = resData.status
     FormData.price = resData.price
     FormData.seq = resData.seq
     FormData.tags = resData.tags   
  })
}

  const FormData = reactive({
    id:0,
    name:'',
    subName:'',
    img:'',
    categoryId:'0',
    status:'',
    price:'',
    seq:'0',
    tags:''
  })

//点击登录后调用的被抽出来的方法
const submitFormData = () => {
   let params = {
    id:FormData.id,
    name:FormData.name,
    subName:FormData.subName,
    img:FormData.img,
    categoryId:FormData.categoryId,
    status:FormData.status,
    price:FormData.price,
    seq:FormData.seq,
    tags:FormData.tags
   }
   
   productApi.update.call(params).then((_res:any)=>{
       router.push({name:"list"})
   })
}

//表单验证规则，表单中的prop属性
const rules = reactive<any>({
 
})

const options =[
  {
    value:1,
    lable:"上架",
  },
  {
    value:2,
    lable:"下架",
  }
]


  //重置表单
const resetForm = (formEl: any) => {
  if (!formEl) return
  formEl.resetFields()
}
//点击登录按钮后
const submitForm = async (formEl: any) => {
  await formEl.validate((valid: any, fields: any) => {
    
    if (valid) {    
      //抽出来方法来数据提交后
      submitFormData()
    }
  })
}

  
  </script>

list.vue

<template>
  <!-- 用于查询的表单 -->
  <el-form :inline="true" :model="FormData">
  <el-form-item label="">
    <el-form-item label="商品查询">
      <el-input v-model="FormData.name" />
    </el-form-item>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onQuery">查询</el-button>
    </el-form-item>
  </el-form>
  <!-- 用于存放数据的表格 -->
   <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="商品id" width="150" />
    <el-table-column prop="name" label="名称" width="120" />
    <el-table-column prop="img" label="图片" width="120" >
            <template #default="scope">
              <!-- scope.row代表这一行的数据 -->
                <!-- {{scope.row }} -->
                 <img :src="scope.row.img" width="50px" height="50px" />
            </template>
    </el-table-column>
    <el-table-column prop="statusX" label="状态" width="120" />
    <el-table-column prop="price" label="价格" width="120" :formatter="formatter"/>
    <el-table-column prop="lastUpdateBy" label="更新人" width="120" />
    <el-table-column prop="lastUpdateTime" label="更新时间" width="120" :formatter="formatter"/>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="goEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="goDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 
  <br/>
    <!-- 引入elementPluse分页组件 -->
  <el-pagination background layout="prev, pager, next" 
  :total=pageDate.total 
  :page-size = pageDate.pageSize 
  :current-page ="pageDate.pageNum" @current-change="changePage"/>
</template>
  <script setup lang="ts">
 import {ref,onMounted, reactive} from 'vue';
//  import http from '@/http';
import {productApi} from '@/api/index.ts';
import { dayjs } from 'element-plus';
import {useRoute,useRouter} from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'


// 获取当前页面参数
const route = useRoute()
// 负责页面跳转
const router = useRouter()
  
 const tableData = ref<any>([])
 const centerDialogVisible = ref(false)

 onMounted(()=>{
   //调用查询商品信息函数
   callProductApi()

 })

const goEdit = (row:any)=>{
  router.push({name:"edit",query:{id:row.id}})
}

const goDelete = (row:any)=>{
  
  // 确认删除消息弹出框
  ElMessageBox.confirm(
    '确定删除【'+ row.name+'】吗？',
    'Warning',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '未删除',
      })
    })


   centerDialogVisible.value = true
   productApi.delete.call({id:row.id}).then((_res:any)=>{
               
   })
}


const FormData = reactive({
   name:"",
})

const formatter =(row: any, column: any, cellValue: any, index: number) =>{
 if(column.property =="price"){
  return "￥"+cellValue;
 }else if(column.property =="lastUpdateTime"){
  return dayjs(cellValue).format('YY年MM月DD HH:mm')
 }
}
 
const onQuery = () =>{
  //点击按钮时，重新查询数据刷新页面
  callProductApi()
}

 const changePage = (pageNum: number) =>{
    pageDate.pageNum=pageNum
    //改变了当前页的值，重新查询刷新页面
    callProductApi()
 }

 const pageDate = reactive({
    total:10,
    pageSize:6,
    pageNum:1, 
 })
 
 //定义查询商品信息函数
 const callProductApi= () =>{
  let name = FormData.name==''? undefined :FormData.name
  productApi.select.call({pageNum: pageDate.pageNum,pageSize:pageDate.pageSize,name:name}).then((res:any) =>{
    tableData.value=res.itmes
    pageDate.total = res.total
  })
 }
  </script>

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

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

相关文章

手机数据恢复篇：如何从 Android 手机恢复消失的照片

手机数据恢复篇：如何从 Android 手机恢复消失的照片

丢失 Android 手机中的照片现在已成为您可能遇到的最糟糕的情况之一。随着手机在相机方面越来越好&#xff0c;即使是那些不热衷于拍照的人也成为了摄影师。 如今&#xff0c;人们可以随时随地拍摄照片&#xff0c;每一张照片都保存着回忆和数据&#xff0c;因此&#xff0c;丢…
阅读更多...
Gitea 仓库事件触发Jenkins远程构建

Gitea 仓库事件触发Jenkins远程构建

文章目录 引言I Gitea 仓库事件触发Jenkins远程构建1.1 Jenkins配置1.2 Gitea 配置引言 应用场景：项目部署 I Gitea 仓库事件触发Jenkins远程构建 Gitea支持用于仓库事件的Webhooks 1.1 Jenkins配置 高版本Jenkins需要关闭跨域限制和开启匿名用户访问 在Jenkins启动前加入…
阅读更多...
[MySQL][表操作]详细讲解

[MySQL][表操作]详细讲解

目录 1.创建表1.基本语法2.创建表案例 2.查看表结构3.修改表1.语法2.示例3.modify和change区别 4.删除表 1.创建表 1.基本语法 语法&#xff1a; CREATE TABLE table_name (field1 datatype,field2 datatype,field3 datatype ) character set 字符集 collate 校验规则 engin…
阅读更多...
达梦数据库的系统视图v$sessions

达梦数据库的系统视图v$sessions

达梦数据库的系统视图v$sessions 达梦数据库&#xff08;DM Database&#xff09;是中国的一款国产数据库管理系统&#xff0c;它提供了类似于Oracle的系统视图来监控和管理数据库。V$SESSIONS 是达梦数据库中的一个系统视图&#xff0c;用于显示当前数据库会话的信息。 以下…
阅读更多...
分页以及tab栏切换，动态传类型

分页以及tab栏切换，动态传类型

<view class"disTitle"><view class"disName">账户明细</view><view class"nav"><u-tabs lineWidth"0" :activeStyle"{color: #FD893F }" :list"navList" change"tabsChange&quo…
阅读更多...
企业网络实验(vmware虚拟机充当DHCP服务器)所有IP全部保留，只为已知mac分配固定IP

企业网络实验(vmware虚拟机充当DHCP服务器)所有IP全部保留，只为已知mac分配固定IP

文章目录 需求实验修改dhcp虚拟机配置文件测试PC获取IP查看user-bind 需求 (vmware虚拟机充当DHCP服务器)所有IP全部保留&#xff0c;只为已知mac分配固定IP 实验 前期配置&#xff1a; https://blog.csdn.net/xzzteach/article/details/140406092 后续配置均在以上配置的前…
阅读更多...
LLM推理优化笔记1：KV cache、Grouped-query attention等

LLM推理优化笔记1：KV cache、Grouped-query attention等

KV cache 对于decoder-only 模型比如现在如火如荼的大模型&#xff0c;其在生成内容的过程中&#xff0c;为了避免冗余计算&#xff0c;会将Transformer里的self-attention的K和V矩阵给缓存起来&#xff0c;这个过程即为KV cache。 decoder-only模型的生成过程是自回归的&…
阅读更多...
单元测试实施最佳方案（背景、实施、覆盖率统计）

单元测试实施最佳方案（背景、实施、覆盖率统计）

1. 什么是单元测试&#xff1f; 对于很多开发人员来说&#xff0c;单元测试一定不陌生 单元测试是白盒测试的一种形式&#xff0c;它的目标是测试软件的最小单元——函数、方法或类。单元测试的主要目的是验证代码的正确性&#xff0c;以确保每个单元按照预期执行。单元测试通…
阅读更多...
Android C++系列：Linux网络（三）协议格式

Android C++系列：Linux网络（三）协议格式

1. 数据包封装 传输层及其以下的机制由内核提供，应用层由用户进程提供(后面将介绍如何使用 socket API编写应用程序)，应用程序对通讯数据的含义进行解释，而传输层及其以下 处理通讯的细节，将数据从一台计算机通过一定的路径发送到另一台计算机。应用层 数据通过协议栈发到…
阅读更多...
搜索引擎中的相关性模型

搜索引擎中的相关性模型

一、什么是相关性模型&#xff1f; 相关性模型主要关注的是query和doc的相关性。例如给定query&#xff0c;和1000个doc&#xff0c;找到哪个doc是好query最相关的。 二、为什么需要相关性模型&#xff1f; 熟悉es的应该都熟悉BM25相关性算法。它是一个很简单的相关性算法。我…
阅读更多...
nginx的四层负载均衡实战

nginx的四层负载均衡实战

目录 1 环境准备 1.1 mysql 部署 1.2 nginx 部署 1.3 关闭防火墙和selinux 2 nginx配置 2.1 修改nginx主配置文件 2.2 创建stream配置文件 2.3 重启nginx 3 测试四层代理是否轮循成功 3.1 远程链接通过代理服务器访问 3.2 动图演示 4 四层反向代理算法介绍 4.1 轮询&#xff0…
阅读更多...
安全防御，防火墙配置NAT转换智能选举综合实验

安全防御，防火墙配置NAT转换智能选举综合实验

一、实验拓扑图 二、实验需求 1、办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 2、分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 3、多出口环境基于带宽比例进行选路&#xff0c;但是&…
阅读更多...
python:使用matplotlib库绘制图像（四）

python:使用matplotlib库绘制图像（四）

作者是跟着http://t.csdnimg.cn/4fVW0学习的&#xff0c;matplotlib系列文章是http://t.csdnimg.cn/4fVW0的自己学习过程中整理的详细说明版本&#xff0c;对小白更友好哦&#xff01; 四、条形图 1. 一个数据样本的条形图 条形图&#xff1a;常用于比较不同类别的数量或值&…
阅读更多...
STM32之六：SysTick系统滴答定时器

STM32之六：SysTick系统滴答定时器

目录 1. SysTick简介 2. 时钟来源 3. SysTick寄存器 3.1 CTRL—SysTick控制及状态寄存器 3.2 RELOAD—SysTick重装载数值寄存器 3.3 CURRENT—SysTick当前数值寄存器 4. systick系统定时器配置 5. 延时函数实现 5.1 延时函数编写步骤 5.2 微秒级延时函数delay_us 5.…
阅读更多...
代理模式(大话设计模式)C/C++版本

代理模式(大话设计模式)C/C++版本

代理模式 C #include <iostream> using namespace std;class Subject // Subject 定义了RealSubject和Proxy的共用接口..这样就在任何使用RealSubject的地方都可以使用Proxy { public:virtual void func(){cout << "Subject" << endl;} };class R…
阅读更多...
Leetcode—3011. 判断一个数组是否可以变为有序【中等】（__builtin_popcount()、ranges::is_sorted())

Leetcode—3011. 判断一个数组是否可以变为有序【中等】（__builtin_popcount()、ranges::is_sorted())

2024每日刷题&#xff08;144&#xff09; Leetcode—3011. 判断一个数组是否可以变为有序 O(n)复杂度实现代码 class Solution { public:bool canSortArray(vector<int>& nums) {// 二进制数位下1数目相同的元素就不进行组内排序// 只进行分组// 当前组的值若小于…
阅读更多...
全栈物联网项目：结合 C/C++、Python、Node.js 和 React 开发智能温控系统（附代码示例）

全栈物联网项目：结合 C/C++、Python、Node.js 和 React 开发智能温控系统（附代码示例）

1. 项目概述 本文详细介绍了一个基于STM32微控制器和AWS IoT云平台的智能温控器项目。该项目旨在实现远程温度监控和控制,具有以下主要特点: 使用STM32F103微控制器作为主控芯片,负责数据采集、处理和控制逻辑采用DHT22数字温湿度传感器,精确采集环境温湿度数据通过ESP8266 W…
阅读更多...
Android Spinner

Android Spinner

1. Spinner Spinner是下拉列表&#xff0c;如图3-14所示&#xff0c;通常用于为用户提供选择输入。Spinner有一个重要的属性&#xff1a;spinnerMode&#xff0c;它有2种情况&#xff1a; 属性值为dropdown时&#xff0c;表示Spinner的数据下拉展示&#xff0c;如图1&#xf…
阅读更多...
GenAl如何改变 DevOps 中的软件测试？

GenAl如何改变 DevOps 中的软件测试？

TestComplete 是一款自动化UI测试工具&#xff0c;这款工具目前在全球范围内被广泛应用于进行桌面、移动和Web应用的自动化测试。 TestComplete 集成了一种精心设计的自动化引擎&#xff0c;可以自动记录和回放用户的操作&#xff0c;方便用户进行UI&#xff08;用户界面&…
阅读更多...
快速使用BRTR公式出具的大模型Prompt提示语

快速使用BRTR公式出具的大模型Prompt提示语

Role:文章模仿大师 Background: 你是一位文章模仿大师&#xff0c;擅长分析文章风格并进行模仿创作。老板常让你学习他人文章后进行模仿创作。 Attention: 请专注在文章模仿任务上&#xff0c;提供高质量的输出。 Profile: Author: 一博Version: 1.0Language: 中文Descri…
阅读更多...
最新文章

Copyright @ 2022~2023