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

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>