addvue

<template><!-- 传过来的id -->
<!-- {{ $route.query.id }} -->
<el-formref="FormRef"style="max-width: 600px":model="FormData":rule="rules"status-iconlabel-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) returnformEl.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-formref="FormRef"style="max-width: 600px":model="FormData":rule="rules"status-iconlabel-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) : 0console.log(FormData.id);callProductApi()})const callProductApi = () => {productApi.select.call({id:FormData.id}).then((res:any)=>{let resData = res[0];FormData.name=resData.nameFormData.subName = resData.subNameFormData.img = resData.imgFormData.categoryId = resData.categoryIdFormData.status = resData.statusFormData.price = resData.priceFormData.seq = resData.seqFormData.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) returnformEl.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 = trueproductApi.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.nameproductApi.select.call({pageNum: pageDate.pageNum,pageSize:pageDate.pageSize,name:name}).then((res:any) =>{tableData.value=res.itmespageDate.total = res.total})}</script>