Vue3+Vite+TS后台项目 ~ 10.商品管理

最新推荐文章于 2024-09-07 11:52:22 发布
最新推荐文章于 2024-09-07 11:52:22 发布
阅读量1.6k 收藏 4
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45137565/article/details/122215058
版权

唯有热爱，可抵岁月长河


一、商品列表

⒈ 接口封装

新建 src / api / product.ts 文件

import request from '@/utils/request'
import {
  Product,
  ProductType,
  ProductListParams,
  ProductCategory,
  AttrRuleValue,
  ProductAttrTpl,
  IExpressTemplate,
  AttrTableHeader,
  ProductAttr
} from './types/product'

/**
 * 获取商品类目列表
 * @returns 商品类目列表
 */
export const getProductTypes = () => {
  return request<{
    list: ProductType[]
  }>({
    method: 'GET',
    url: '/product/product/type_header'
  })
}

/**
 * 获取商品列表
 * @param params 查询参数
 * @returns 商品列表
 */
export const getProducts = (params?: ProductListParams) => {
  return request<{
    count: number
    list: Product[]
  }>({
    method: 'GET',
    url: '/product/product',
    params
  })
}

/**
 * 保存新增或编辑
 * @param id 商品ID
 * @param data 商品数据
 * @returns null
 */
export const saveProduct = (id: number, data: any) => {
  return request({
    method: 'POST',
    url: `/product/product/${id}`,
    data
  })
}

/**
 * 获取商品
 * @param id 商品id
 * @returns 商品
 */
export const getProduct = (id: number) => {
  return request<{
    tempList: {
      id: number
      name: string
    }[]
    cateList: {
      value: number
      label: string
      disabled: number
    }[]
    productInfo: {
      cate_id: string[]
      is_sub: number[]
      activity: string[]
      label_id: string[]
      coupons: string[]
      description: string
      items: string[]
      attrs: string[]
      attr: {
        pic: string
        vip_price: number
        price: number
        cost: number
        ot_price: number
        stock: number
        bar_code: string
        weight: number
        volume: number
        brokerage: number
        brokerage_two: number
      }
    } & Omit<Product, 'cate_id' | 'is_sub' | 'activity' | 'label_id' | 'collect' | 'likes' | 'visitor' | 'cate_name' | 'stock_attr'>
  }>({
    method: 'GET',
    url: `/product/product/${id}`
  })
}

export const getCategoryTree = (type: 0 | 1) => {
  return request<ProductCategory[]>({
    method: 'GET',
    url: `/product/category/tree/${type}`
  })
}

/**
 * 商品上下架操作
 */
export const updateProductStatus = (id: number, status: number) => {
  return request({
    method: 'PUT',
    url: `/product/product/set_show/${id}/${status}`
  })
}

/**
 * 商品加入/移除回收站
 */
export const removeProduct = (id: number) => {
  return request({
    method: 'DELETE',
    url: `/product/product/${id}`
  })
}

/**
 * 获取商品规格模板
 */
export const getAttrs = () => {
  return request<ProductAttrTpl[]>({
    method: 'GET',
    url: '/product/product/get_rule'
  })
}

/**
 * 生成商品属性
 */
export const generateAttr = (id: number, type: 0 | 1, data: {
  attrs: AttrRuleValue[]
}) => {
  return request<{
    info: {
      attr: AttrRuleValue[]
      header: AttrTableHeader[]
      value: ProductAttr[]
    }
  }>({
    method: 'POST',
    url: `/product/generate_attr/${id}/${type}`,
    data
  })
}

/**
 * 获取运费模板
 */
export const getExpressTemplate = () => {
  return request<IExpressTemplate[]>({
    method: 'GET',
    url: '/product/product/get_template'
  })
}

/**
 * 获取商品规格列表
 */
export const getProductRules = () => {
  return request({
    method: 'GET',
    url: '/product/product/rule'
  })
}

/**
 * 批量上架
 */
export const updateProductsShow = (ids: number[]) => {
  return request({
    method: 'PUT',
    url: '/product/product/product_show',
    data: {
      ids
    }
  })
}

/**
 * 批量下架
 */
export const updateProductsUnshow = (ids: number[]) => {
  return request({
    method: 'PUT',
    url: '/product/product/product_unshow',
    data: {
      ids
    }
  })
}

新建 src / api / types / product.ts 文件

export interface Product {
  id: number
  mer_id: number
  image: string
  recommend_image: string
  slider_image: string[]
  store_name: string
  store_info: string
  keyword: string
  bar_code: string
  cate_id: string
  price: string
  vip_price: string
  ot_price: string
  postage: string
  unit_name: string
  sort: number
  sales: number
  stock: string
  is_show: number
  is_hot: number
  is_benefit: number
  is_best: number
  is_new: number
  add_time: number
  is_postage: number
  is_del: number
  mer_use: number
  give_integral: string
  cost: string
  is_seckill: number
  is_bargain: null
  is_good: number
  is_sub: number
  is_vip: number
  ficti: number
  browse: number
  code_path: string
  soure_link: string
  video_link: string
  temp_id: number
  spec_type: number
  activity: string
  spu: string
  label_id: string
  command_word: string
  collect: number
  likes: number
  visitor: number
  cate_name: string
  stock_attr: boolean
  statusLoading?: boolean
}

export interface ProductType {
  type: number
  name: string
  count: number
}

export interface ProductListParams {
  page?: number
  limit?: number
  cate_id?: number
  type?: 0 | 1 | 2 | 3 | 4 | 5 | 6
  store_name?: string
  sales?: 'normal' | 'desc' | 'asc'
}

export interface ProductCategory {
  add_time: string
  big_pic: string
  cate_name: string
  html: string
  id: number
  is_show: 0 | 1
  pic: string
  pid: number
  sort: number
}

export interface AttrRuleValue {
  value: string
  detail: string[]
  inputVisible?: boolean
  inputValue?: string
}

export interface ProductAttrTpl {
  id: number
  attr_name: string
  rule_name: string
  attr_value: string[]
  rule_value: AttrRuleValue[]
}

export interface IExpressTemplate {
  id: number
  name: string
}

export interface AttrTableHeader {
  align: string
  key: string
  minWidth: number
  title: string
}

export type ProductAttr = Record<string, any> & {
  pic: string
  vip_price: number
  price: number
  cost: number
  ot_price: number
  stock: number
  bar_code: string
  weight: number
  volume: number
  brokerage: number
  brokerage_two: number
}

// export interface ProductAttr {
//   bar_code: string
//   brokerage: number
//   brokerage_two: number
//   cost: number
//   ot_price: number
//   pic: string
//   price: number
//   stock: number
//   vip_price: number
//   volume: number
//   weight: number
// }

⒉ 商品列表页

新建 src / views / product / list / index.vue 文件

<template>
  <!-- <page-container> -->
  <el-card>
    <template #header>
      数据筛选
    </template>
    <el-form
      ref="form"
      :model="listParams"
      :disabled="listLoading"
      label-width="70px"
      @submit.prevent="handleQuery"
    >
      <el-form-item label="商品分类">
        <el-select
          v-model="listParams.cate_id"
          placeholder="请选择"
          clearable
          @change="loadList"
        >
          <el-option
            label="全部"
            :value="0"
          />
          <el-option
            v-for="item in productCates"
            :key="item.id"
            :label="`${item.html}${item.cate_name}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input
          v-model="listParams.store_name"
          placeholder="请输入商品名称关键字"
          clearable
          style="width: 300px;"
        >
          <template #append>
            <!-- <el-button
              icon="el-icon-search"
              @click="loadList"
            /> -->
            <el-icon><search /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品类目">
        <el-radio-group
          v-model="listParams.type"
          @change="loadList"
        >
          <el-radio :label="0">
            全部
          </el-radio>
          <el-radio
            v-for="item in productTypes"
            :key="item.type"
            :label="item.type"
          >
            {{ `${item.name}(${item.count})` }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 20px;">
    <template #header>
      <!-- icon="el-icon-plus" -->
      <el-button
        type="primary"
        @click="$router.push('/admin/product/add_product')"
      >
        <el-icon><plus /></el-icon>
        添加商品
      </el-button>
      <el-button
        v-if="listParams.type === 2"
        :loading="updateProductsShowLoading"
        @click="handleUpdateProductsShow"
      >
        批量上架
      </el-button>
      <el-button
        v-else
        :loading="updateProductsUnshowLoading"
        @click="handleUpdateProductsUnshow"
      >
        批量下架
      </el-button>
      <!-- @click="handleExportExcel" -->
      <!-- icon="el-icon-document" -->
      <el-button
        :loading="exportExcelLoading"
      >
        <el-icon><download /></el-icon>
        导出表格
      </el-button>
    </template>
    <el-table
      :data="list"
      v-loading="listLoading"
      style="width: 100%"
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template #default="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
          >
            <el-form-item label="商品分类">
              <span>{{ props.row.cate_name }}</span>
            </el-form-item>
            <el-form-item label="市场价格">
              <span>{{ props.row.ot_price }}</span>
            </el-form-item>
            <el-form-item label="成本价">
              <span>{{ props.row.cost }}</span>
            </el-form-item>
            <el-form-item label="收藏数量">
              <span>{{ props.row.collect }}</span>
            </el-form-item>
            <el-form-item label="虚拟销量">
              <span>{{ props.row.ficti }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="id"
        label="商品ID"
      />
      <el-table-column
        prop="id"
        label="商品图片"
      >
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.image"
            :preview-src-list="[scope.row.image]"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="store_name"
        label="商品名称"
      />
      <el-table-column
        prop="price"
        label="商品售价"
      />
      <el-table-column
        prop="sales"
        label="销量"
        sortable="custom"
      />
      <el-table-column
        prop="stock"
        label="库存"
      />
      <el-table-column
        prop="sort"
        label="排序"
      />
      <el-table-column
        label="状态"
        width="150"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.is_show"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.statusLoading"
            active-text="上架"
            inactive-text="下架"
            @change="handleUpdateStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="120px"
        label="操作"
        fixed="right"
        align="center"
      >
        <template #default="{ row }">
          <el-button type="text">
            编辑
          </el-button>
          <el-button type="text">
            查看评论
          </el-button>
          <el-popconfirm
            :title="row.is_del ? '确定恢复商品吗？' : '确定移到回收站吗？'"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button type="text">
                {{ row.is_del ? '恢复商品' : '移到回收站' }}
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <app-pagination
      v-model:page="listParams.page"
      v-model:limit="listParams.limit"
      :list-count="listCount"
      :load-list="loadList"
      :disabled="listLoading"
    /> -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="listCount"
      :page-sizes="[2, 4, 6]"
      :disabled="listLoading"
      v-model:currentPage="listParams.page"
      v-model:pageSize="listParams.limit"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <!-- </page-container> -->
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import * as productApi from '@/api/product'
import { ElMessage } from 'element-plus'
import type { Product, ProductListParams, ProductType, ProductCategory } from '@/api/types/product'
// import { jsonToExcel } from '@/utils/export-to-excel'
import { Search, Plus, Download } from '@element-plus/icons-vue'

const productTypes = ref<ProductType[]>([])
const productCates = ref<ProductCategory[]>([])
const list = ref<Product[]>([])
const listCount = ref(0)
const listLoading = ref(false)
const listParams = reactive<ProductListParams>({
  page: 1,
  limit: 10,
  cate_id: 0,
  type: 0,
  store_name: '',
  sales: 'normal'
})
const selectionItems = ref<Product[]>([])
const updateProductsShowLoading = ref(false)
const updateProductsUnshowLoading = ref(false)
const exportExcelLoading = ref(false)

onMounted(() => {
  loadList()
  loadProductCates()
})

const handleSelectionChange = (val: Product[]) => {
  selectionItems.value = val
}

const loadList = async () => {
  listLoading.value = true
  const data = await productApi.getProducts(listParams).finally(() => {
    listLoading.value = false
  })
  data.list.forEach(item => {
    item.statusLoading = false
  })
  list.value = data.list
  listCount.value = data.count

  // 更新商品类型
  loadProductTypes()
}

const loadProductCates = async () => {
  const data = await productApi.getCategoryTree(1)
  productCates.value = data
}

const loadProductTypes = async () => {
  const data = await productApi.getProductTypes()
  productTypes.value = data.list
}

const handleQuery = () => {
  listParams.page = 1
  loadList()
}

const handleUpdateStatus = async (item: Product) => {
  item.statusLoading = true
  await productApi.updateProductStatus(item.id, item.is_show).finally(() => {
    item.statusLoading = false
  })
  ElMessage.success(`${item.is_show ? '上架' : '下架'}成功`)
  loadList()
}

const handleDelete = async (id: number) => {
  await productApi.removeProduct(id)
  loadList()
}

const handleSortChange = ({ prop, order }: { prop: string, order: 'descending' | 'ascending' | null }) => {
  let sales: ProductListParams['sales'] = 'normal'
  switch (order) {
    case 'ascending':
      sales = 'asc'
      break
    case 'descending':
      sales = 'desc'
      break
  }
  listParams.sales = sales
  loadList()
}

const handleUpdateProductsShow = async () => { // 批量上架
  if (!selectionItems.value.length) {
    return ElMessage.warning('请选择商品')
  }
  updateProductsShowLoading.value = true
  await productApi.updateProductsShow(selectionItems.value.map(item => item.id)).finally(() => {
    updateProductsShowLoading.value = false
  })
  ElMessage.success('批量上架成功')
  loadList()
}

const handleUpdateProductsUnshow = async () => { // 批量下架
  if (!selectionItems.value.length) {
    return ElMessage.warning('请选择商品')
  }
  updateProductsUnshowLoading.value = true
  await productApi.updateProductsUnshow(selectionItems.value.map(item => item.id)).finally(() => {
    updateProductsUnshowLoading.value = false
  })
  ElMessage.success('批量下架成功')
  loadList()
}

const handleSizeChange = (size: number) => { // 每页条数
  listParams.limit = size
  listParams.page = 1
  loadList()
}

const handleCurrentChange = (page: number) => { // 当前页数
  listParams.page = page
  loadList()
}

</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-table-expand {
  font-size: 0;
  :deep(label) {
    width: 90px;
    color: #99a9bf;
  }
  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}

.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

二、导出 Excel 表格

⒈ 插件

// 安装
npm install xlsx

⒉ 封装方法

新建 src / utils / export-to-excel.ts 文件

import xlsx from 'xlsx'

export const jsonToExcel = (options: {
  data: any[]
  header: Record<string, string>
  fileName: string
  bookType: xlsx.BookType
}) => {
  // 1、创建一个工作簿 workbook
  const wb = xlsx.utils.book_new()

  // 2、创建工作表 worksheet
  if (options.header) {
    options.data = options.data.map(item => {
      const obj: Record<string, any> = {}
      for (const key in item) {
        if (options.header[key]) { // 修改数据头部名称
          obj[options.header[key]] = item[key]
        } else {
          obj[key] = item[key]
        }
      }
      return obj
    })
  }

  const ws = xlsx.utils.json_to_sheet(options.data)

  // 3. 把工作表放到工作簿中
  xlsx.utils.book_append_sheet(wb, ws)

  // 4、生成数据保存
  xlsx.writeFile(wb, options.fileName, {
    bookType: options.bookType || 'xlsx'
  })
}

⒊ 组件引用

新建 src / views / product / list / index.vue 文件

<template>
  <!-- <page-container> -->
  <el-card>
    <template #header>
      数据筛选
    </template>
    <el-form
      ref="form"
      :model="listParams"
      :disabled="listLoading"
      label-width="70px"
      @submit.prevent="handleQuery"
    >
      <el-form-item label="商品分类">
        <el-select
          v-model="listParams.cate_id"
          placeholder="请选择"
          clearable
          @change="loadList"
        >
          <el-option
            label="全部"
            :value="0"
          />
          <el-option
            v-for="item in productCates"
            :key="item.id"
            :label="`${item.html}${item.cate_name}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input
          v-model="listParams.store_name"
          placeholder="请输入商品名称关键字"
          clearable
          style="width: 300px;"
        >
          <template #append>
            <!-- <el-button
              icon="el-icon-search"
              @click="loadList"
            /> -->
            <el-icon><search /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品类目">
        <el-radio-group
          v-model="listParams.type"
          @change="loadList"
        >
          <el-radio :label="0">
            全部
          </el-radio>
          <el-radio
            v-for="item in productTypes"
            :key="item.type"
            :label="item.type"
          >
            {{ `${item.name}(${item.count})` }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 20px;">
    <template #header>
      <!-- icon="el-icon-plus" -->
      <el-button
        type="primary"
        @click="$router.push('/admin/product/add_product')"
      >
        <el-icon><plus /></el-icon>
        添加商品
      </el-button>
      <el-button
        v-if="listParams.type === 2"
        :loading="updateProductsShowLoading"
        @click="handleUpdateProductsShow"
      >
        批量上架
      </el-button>
      <el-button
        v-else
        :loading="updateProductsUnshowLoading"
        @click="handleUpdateProductsUnshow"
      >
        批量下架
      </el-button>
      <!-- icon="el-icon-document" -->
      <el-button
        @click="handleExportExcel"
        :loading="exportExcelLoading"
      >
        <el-icon><download /></el-icon>
        导出表格
      </el-button>
    </template>
    <el-table
      :data="list"
      v-loading="listLoading"
      style="width: 100%"
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template #default="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
          >
            <el-form-item label="商品分类">
              <span>{{ props.row.cate_name }}</span>
            </el-form-item>
            <el-form-item label="市场价格">
              <span>{{ props.row.ot_price }}</span>
            </el-form-item>
            <el-form-item label="成本价">
              <span>{{ props.row.cost }}</span>
            </el-form-item>
            <el-form-item label="收藏数量">
              <span>{{ props.row.collect }}</span>
            </el-form-item>
            <el-form-item label="虚拟销量">
              <span>{{ props.row.ficti }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="id"
        label="商品ID"
      />
      <el-table-column
        prop="id"
        label="商品图片"
      >
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.image"
            :preview-src-list="[scope.row.image]"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="store_name"
        label="商品名称"
      />
      <el-table-column
        prop="price"
        label="商品售价"
      />
      <el-table-column
        prop="sales"
        label="销量"
        sortable="custom"
      />
      <el-table-column
        prop="stock"
        label="库存"
      />
      <el-table-column
        prop="sort"
        label="排序"
      />
      <el-table-column
        label="状态"
        width="150"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.is_show"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.statusLoading"
            active-text="上架"
            inactive-text="下架"
            @change="handleUpdateStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="120px"
        label="操作"
        fixed="right"
        align="center"
      >
        <template #default="{ row }">
          <el-button type="text">
            编辑
          </el-button>
          <el-button type="text">
            查看评论
          </el-button>
          <el-popconfirm
            :title="row.is_del ? '确定恢复商品吗？' : '确定移到回收站吗？'"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button type="text">
                {{ row.is_del ? '恢复商品' : '移到回收站' }}
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <app-pagination
      v-model:page="listParams.page"
      v-model:limit="listParams.limit"
      :list-count="listCount"
      :load-list="loadList"
      :disabled="listLoading"
    /> -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="listCount"
      :page-sizes="[2, 4, 6]"
      :disabled="listLoading"
      v-model:currentPage="listParams.page"
      v-model:pageSize="listParams.limit"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <!-- </page-container> -->
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import * as productApi from '@/api/product'
import { ElMessage } from 'element-plus'
import type { Product, ProductListParams, ProductType, ProductCategory } from '@/api/types/product'
// import { jsonToExcel } from '@/utils/export-to-excel'
import { Search, Plus, Download } from '@element-plus/icons-vue'

const productTypes = ref<ProductType[]>([])
const productCates = ref<ProductCategory[]>([])
const list = ref<Product[]>([])
const listCount = ref(0)
const listLoading = ref(false)
const listParams = reactive<ProductListParams>({
  page: 1,
  limit: 10,
  cate_id: 0,
  type: 0,
  store_name: '',
  sales: 'normal'
})
const selectionItems = ref<Product[]>([])
const updateProductsShowLoading = ref(false)
const updateProductsUnshowLoading = ref(false)
const exportExcelLoading = ref(false)

onMounted(() => {
  loadList()
  loadProductCates()
})

const handleSelectionChange = (val: Product[]) => {
  selectionItems.value = val
}

const loadList = async () => {
  listLoading.value = true
  const data = await productApi.getProducts(listParams).finally(() => {
    listLoading.value = false
  })
  data.list.forEach(item => {
    item.statusLoading = false
  })
  list.value = data.list
  listCount.value = data.count

  // 更新商品类型
  loadProductTypes()
}

const loadProductCates = async () => {
  const data = await productApi.getCategoryTree(1)
  productCates.value = data
}

const loadProductTypes = async () => {
  const data = await productApi.getProductTypes()
  productTypes.value = data.list
}

const handleQuery = () => {
  listParams.page = 1
  loadList()
}

const handleUpdateStatus = async (item: Product) => {
  item.statusLoading = true
  await productApi.updateProductStatus(item.id, item.is_show).finally(() => {
    item.statusLoading = false
  })
  ElMessage.success(`${item.is_show ? '上架' : '下架'}成功`)
  loadList()
}

const handleDelete = async (id: number) => {
  await productApi.removeProduct(id)
  loadList()
}

const handleSortChange = ({ prop, order }: { prop: string, order: 'descending' | 'ascending' | null }) => {
  let sales: ProductListParams['sales'] = 'normal'
  switch (order) {
    case 'ascending':
      sales = 'asc'
      break
    case 'descending':
      sales = 'desc'
      break
  }
  listParams.sales = sales
  loadList()
}

const handleUpdateProductsShow = async () => { // 批量上架
  if (!selectionItems.value.length) {
    return ElMessage.warning('请选择商品')
  }
  updateProductsShowLoading.value = true
  await productApi.updateProductsShow(selectionItems.value.map(item => item.id)).finally(() => {
    updateProductsShowLoading.value = false
  })
  ElMessage.success('批量上架成功')
  loadList()
}

const handleUpdateProductsUnshow = async () => { // 批量下架
  if (!selectionItems.value.length) {
    return ElMessage.warning('请选择商品')
  }
  updateProductsUnshowLoading.value = true
  await productApi.updateProductsUnshow(selectionItems.value.map(item => item.id)).finally(() => {
    updateProductsUnshowLoading.value = false
  })
  ElMessage.success('批量下架成功')
  loadList()
}

const handleExportExcel = async () => { // 导出表格
  if (!selectionItems.value.length) {
    return ElMessage.warning('请选择商品')
  }
  exportExcelLoading.value = true
  try {
    const { jsonToExcel } = await import('@/utils/export-to-excel')
    jsonToExcel({
      data: selectionItems.value,
      header: {
        id: '编号',
        store_name: '商品名称',
        price: '价格'
      },
      fileName: '测试.xlsx',
      bookType: 'xlsx'
    })
  } catch (err) {
    console.error(err)
  }
  exportExcelLoading.value = false
}

const handleSizeChange = (size: number) => { // 每页条数
  listParams.limit = size
  listParams.page = 1
  loadList()
}

const handleCurrentChange = (page: number) => { // 当前页数
  listParams.page = page
  loadList()
}

</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-table-expand {
  font-size: 0;
  :deep(label) {
    width: 90px;
    color: #99a9bf;
  }
  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}

.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

三、添加商品

⒈ 主页

新建 src / views / product / add / index.vue 文件：

<template>
  <!-- <page-container> -->
  <app-card>
    <template #header>
      <!-- icon="el-icon-back" -->
      <el-button
        @click="$router.back()"
      >
        <el-icon><arrow-left /></el-icon>
        返回
      </el-button>
    </template>
    <el-form
      ref="form"
      :model="product"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item
        label="商品名称"
        prop="store_name"
      >
        <el-input v-model="product.store_name" />
      </el-form-item>
      <el-form-item
        label="商品分类"
        prop="cate_id"
      >
        <el-select
          v-model="product.cate_id"
          multiple
          style="width: 50%;"
        >
          <el-option
            v-for="item in productCates"
            :key="item.id"
            :label="item.cate_name"
            :value="item.id"
            :disabled="item.pid === 0"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="商品关键字"
        prop="keyword"
      >
        <el-input v-model="product.keyword" />
      </el-form-item>
      <el-form-item
        label="单位"
        prop="unit_name"
      >
        <el-input v-model="product.unit_name" />
      </el-form-item>
      <el-form-item
        label="商品简介"
        prop="store_info"
      >
        <el-input
          type="textarea"
          v-model="product.store_info"
          autosize
        />
      </el-form-item>
      <el-form-item
        label="商品封面图(最多1张)"
        prop="image"
      >
        xxx
      </el-form-item>
      <el-form-item
        label="商品推荐图(最多1张)"
        prop="recommend_image"
      >
        xxx
      </el-form-item>
      <el-form-item
        label="商品轮播图(最多10张)"
        prop="slider_image"
      >
        xxx
      </el-form-item>
      <el-form-item
        label="商品规格"
        prop="spec_type"
        class="auto-scroll"
      >
        <el-radio-group v-model="product.spec_type">
          <el-radio :label="0">
            单规格
          </el-radio>
          <el-radio :label="1">
            多规格
          </el-radio>
        </el-radio-group>
        <!-- 单规格 -->
        <AttrTable
          v-if="product.spec_type === 0"
          v-model="singleAttrData"
        />
      </el-form-item>
      <el-form-item
        v-if="product.spec_type === 1"
        class="multi-attr-form_item"
        label="规格模板"
      >
        <el-space
          direction="vertical"
          fill
          style="width: 100%;"
          alignment="flex-start"
        >
          <AttrTemplate @confirm="attrTpl = $event" />
          <AttrEdit
            v-if="attrTpl.length"
            v-model="attrTpl"
            @confirm="handleAttrEditConfirm"
          />
          <template v-if="multiAttrData.length">
            <div>
              批量设置：
              <AttrTable
                v-model="batchData"
              >
                <template #append>
                  <el-table-column
                    label="操作"
                    fixed="right"
                    min-width="120"
                  >
                    <template #default>
                      <el-button
                        type="text"
                        @click="handleBatchSet"
                      >
                        批量设置
                      </el-button>
                      <el-button
                        type="text"
                        @click="handleClearBatch"
                      >
                        清除
                      </el-button>
                    </template>
                  </el-table-column>
                </template>
              </AttrTable>
            </div>
            <div>商品属性</div>
            <AttrTable
              v-model="multiAttrData"
            >
              <template #prepend>
                <el-table-column
                  v-for="item in tableHeader"
                  :key="item.key"
                  :prop="item.key"
                  :label="item.title"
                />
              </template>
              <template #append>
                <el-table-column
                  label="操作"
                  fixed="right"
                >
                  <template #default="{ $index }">
                    <el-button
                      type="text"
                      @click="handleDeleteAttr($index)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </template>
            </AttrTable>
          </template>
        </el-space>
      </el-form-item>
      <el-form-item
        label="商品详情"
        prop="description"
      >
        <app-text-editor v-model="product.description" />
      </el-form-item>
      <el-form-item
        label="虚拟销量"
        prop="ficti"
      >
        <el-input-number
          v-model="product.ficti"
          :min="0"
          label="请输入虚拟销量"
        />
      </el-form-item>
      <el-form-item
        label="额外赠送积分"
        prop="give_integral"
      >
        <el-input-number
          v-model="product.give_integral"
          :min="0"
          label="请输入额外赠送积分"
        />
      </el-form-item>
      <el-form-item
        label="排序"
        prop="sort"
      >
        <el-input-number
          v-model="product.sort"
          :min="0"
          label="请输入排序"
        />
      </el-form-item>
      <el-form-item
        label="商品状态"
        prop="is_show"
      >
        <el-radio-group v-model="product.is_show">
          <el-radio :label="1">
            上架
          </el-radio>
          <el-radio :label="0">
            下架
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="热卖单品"
        prop="is_hot"
      >
        <el-radio-group v-model="product.is_hot">
          <el-radio :label="1">
            开启
          </el-radio>
          <el-radio :label="0">
            关闭
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="促销单品"
        prop="is_benefit"
      >
        <el-radio-group v-model="product.is_benefit">
          <el-radio :label="1">
            开启
          </el-radio>
          <el-radio :label="0">
            关闭
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="精品推荐"
        prop="is_best"
      >
        <el-radio-group v-model="product.is_best">
          <el-radio :label="1">
            开启
          </el-radio>
          <el-radio :label="0">
            关闭
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="首发新品"
        prop="is_new"
      >
        <el-radio-group v-model="product.is_new">
          <el-radio :label="1">
            开启
          </el-radio>
          <el-radio :label="0">
            关闭
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="优品推荐"
        prop="is_good"
      >
        <el-radio-group v-model="product.is_good">
          <el-radio :label="1">
            开启
          </el-radio>
          <el-radio :label="0">
            关闭
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="活动优先级"
        prop="activity"
      >
        <el-space>
          <!-- 拖拽元素列表和 v-model 的数据必须一致 -->
          <app-draggable
            v-model="activities"
            :options="{
              animation: 300
            }"
          >
            <el-tag
              v-for="item in activities"
              :key="item.name"
              :type="item.type"
              effect="dark"
            >
              {{ item.name }}
            </el-tag>
          </app-draggable>
        </el-space>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </app-card>
  <!-- </page-container> -->
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { getCategoryTree, saveProduct } from '@/api/product'
import type { ProductAttr, ProductCategory, AttrRuleValue, AttrTableHeader } from '@/api/types/product'
import type { IElForm } from '@/types/element-plus'
import { ElMessage } from 'element-plus'
import AttrTable from './AttrTable.vue'
import AttrTemplate from './AttrTemplate.vue'
import AttrEdit from './AttrEdit.vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const attrTpl = ref<AttrRuleValue[]>([])

const activities = ref([
  { type: 'danger', name: '秒杀' },
  { type: 'info', name: '默认' },
  { type: 'warning', name: '砍价' },
  { type: 'success', name: '拼团' }
])

const productCates = ref<ProductCategory[]>([]) // 商品分类
const product = ref({
  activity: computed(() => activities.value.map(item => item.name)),
  attrs: [] as ProductAttr[], // 商品规格
  cate_id: [] as number[],
  command_word: '',
  couponName: [],
  coupon_ids: [],
  description: '',
  ficti: 0,
  give_integral: 0,
  header: [] as AttrTableHeader[],
  id: 0,
  image: 'https://shop.fed.lagou.com/uploads/attach/2021/07/20210727/82b80d1996848be8294c6aaa609c4f0b.jpg',
  is_benefit: 0,
  is_best: 0,
  is_good: 0,
  is_hot: 0,
  is_new: 0,
  is_postage: 0,
  is_show: 1,
  is_sub: [],
  items: [] as AttrRuleValue[],
  keyword: '',
  label_id: [],
  recommend_image: 'https://shop.fed.lagou.com/uploads/attach/2021/07/20210727/82b80d1996848be8294c6aaa609c4f0b.jpg',
  selectRule: '',
  slider_image: [
    'https://shop.fed.lagou.com/uploads/attach/2021/07/20210719/512f2ee75f883f46e718bd9496edcc22.jpg',
    'https://shop.fed.lagou.com/uploads/attach/2021/07/20210719/512f2ee75f883f46e718bd9496edcc22.jpg',
    'https://shop.fed.lagou.com/uploads/attach/2021/07/20210719/512f2ee75f883f46e718bd9496edcc22.jpg',
    'https://shop.fed.lagou.com/uploads/attach/2021/07/20210719/512f2ee75f883f46e718bd9496edcc22.jpg',
    'https://shop.fed.lagou.com/uploads/attach/2021/07/20210719/512f2ee75f883f46e718bd9496edcc22.jpg'
  ],
  sort: 0,
  spec_type: 0 as 0 | 1, // 0 单规格、1 多规格
  store_info: '',
  store_name: '',
  temp_id: '',
  unit_name: '',
  video_link: ''
})

const singleAttrData = ref([{
  pic: '',
  vip_price: 0,
  price: 0,
  cost: 0,
  ot_price: 0,
  stock: 0,
  bar_code: '',
  weight: 0,
  volume: 0,
  brokerage: 0,
  brokerage_two: 0
}])

const multiAttrData = ref<ProductAttr[]>([])

watch([singleAttrData, multiAttrData, () => product.value.spec_type], () => {
  product.value.attrs = product.value.spec_type === 0
    ? singleAttrData.value
    : multiAttrData.value
}, {
  immediate: true, // 立即执行
  deep: true // 深度监视
})

const defaultAttrData = [{
  pic: '',
  vip_price: 0,
  price: 0,
  cost: 0,
  ot_price: 0,
  stock: 0,
  bar_code: '',
  weight: 0,
  volume: 0,
  brokerage: 0,
  brokerage_two: 0
}]

const batchData = ref(JSON.parse(JSON.stringify(defaultAttrData)))

const formRules = ref({
  store_name: [
    { required: true, message: '请输入商品名称', trigger: 'blur' }
  ],
  cate_id: [
    { required: true, message: '请选择商品分类', trigger: 'change', type: 'array', min: '1' }
  ],
  keyword: [
    { required: true, message: '请输入商品关键字', trigger: 'blur' }
  ],
  unit_name: [
    { required: true, message: '请输入单位', trigger: 'blur' }
  ],
  store_info: [
    { required: true, message: '请输入商品简介', trigger: 'blur' }
  ],
  image: [
    { required: true, message: '请上传商品图', trigger: 'change' }
  ],
  slider_image: [
    { required: true, message: '请上传商品轮播图', type: 'array', trigger: 'change' }
  ],
  spec_type: [
    { required: true, message: '请选择商品规格', trigger: 'change' }
  ],
  selectRule: [
    { required: true, message: '请选择商品规格属性', trigger: 'change' }
  ],
  temp_id: [
    { required: true, message: '请选择运费模板', trigger: 'change', type: 'number' }
  ],
  give_integral: [
    { type: 'integer', message: '请输入整数' }
  ]
})
const form = ref<IElForm | null>(null)

onMounted(() => {
  loadCates()
})

const handleSubmit = async () => {
  const valid = await form.value?.validate()
  if (!valid) return false
  await saveProduct(0, product.value)
  ElMessage.success('保存成功')
}

const loadCates = async () => {
  const data = await getCategoryTree(1)
  productCates.value = data
}

const handleAttrEditConfirm = (data: {
  attr: AttrRuleValue[]
  header: AttrTableHeader[]
  value: ProductAttr[]
}) => {
  multiAttrData.value = data.value
  product.value.header = data.header
  product.value.items = data.attr
}

const tableHeader = computed(() => {
  return product.value.header.filter(item => item.key && item.key.startsWith('value'))
})

const handleDeleteAttr = (index: number) => {
  multiAttrData.value.splice(index, 1)
}

const handleBatchSet = () => {
  // 过滤无效数据
  const data = batchData.value[0]
  const validData: Record<string, any> = {}
  let key: keyof typeof data
  for (key in data) {
    if (data[key]) {
      validData[key] = data[key]
    }
  }

  // 批量设置 multiAttrData
  multiAttrData.value.forEach(item => {
    Object.assign(item, validData)
  })
}

const handleClearBatch = () => {
  batchData.value = JSON.parse(JSON.stringify(defaultAttrData))
}
</script>

<!-- <script lang="ts">
export default {
  name: 'ProductNew'
}
</script> -->

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  overflow: hidden;
}

:deep(.el-space) {
  max-width: 100%;
  .el-space__item {
    max-width: 100%;
  }
}
</style>

⒉ 组件 编辑

新建 src / views / product / add / AttrEdit.vue 文件：

<template>
  <el-form
    label-position="left"
    label-width="50px"
  >
    <!-- v-model="props.modelValue" -->
    <app-draggable
      :v-model="props.modelValue"
      :options="{
        handle: '.el-icon-menu'
      }"
    >
      <el-form-item
        v-for="(item, index) in props.modelValue"
        :key="item.value"
        :label="item.value"
      >
        <template #label>
          <i class="el-icon-menu" />
        </template>
        <div>
          <!-- @close="props.modelValue.splice(index, 1)" -->
          <el-tag
            closable
            effect="dark"
            @close="handleTagClose(index)"
          >
            {{ item.value }}
          </el-tag>
        </div>
        <div>
          <app-draggable
            style="display: inline-block;"
            v-model="item.detail"
          >
            <el-tag
              class="detail-item"
              v-for="(detail, detailIndex) in item.detail"
              :key="detail"
              closable
              effect="plain"
              @close="item.detail.splice(detailIndex, 1)"
            >
              {{ detail }}
            </el-tag>
          </app-draggable>
          <el-input
            class="input-new-tag"
            v-if="item.inputVisible"
            v-model="item.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.prevent="handleInputConfirm(item)"
            @blur.prevent="handleInputConfirm(item)"
          />
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput(item)"
          >
            + New Tag
          </el-button>
        </div>
      </el-form-item>
    </app-draggable>
    <el-form-item v-if="!isAdd">
      <el-button
        type="primary"
        @click="isAdd = true"
      >
        添加新规格
      </el-button>
      <el-button
        type="success"
        @click="handleGenerate"
      >
        立即生成
      </el-button>
    </el-form-item>
    <el-form-item v-else>
      <el-form
        :model="attrForm"
        :rules="formRules"
        ref="form"
        inline
      >
        <el-form-item
          label="规格名称"
          prop="value"
        >
          <el-input v-model="attrForm.value" />
        </el-form-item>
        <el-form-item
          label="规格值"
          prop="detail"
        >
          <el-input v-model="attrForm.detail[0]" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleAddAttr"
          >
            确认
          </el-button>
          <el-button @click="isAdd = false">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import type { PropType } from 'vue'
import type { AttrRuleValue } from '@/api/types/product'
import { generateAttr } from '@/api/product'
import type { IElForm } from '@/types/element-plus'

const emit = defineEmits(['confirm', 'update:model-value'])

const props = defineProps({
  modelValue: {
    type: Array as PropType<AttrRuleValue[]>,
    default: () => []
  }
})

const saveTagInput = ref<HTMLInputElement | null>(null)

const attrForm = ref({
  value: '',
  detail: ['']
})

const isAdd = ref(false)

const formRules = {
  value: [
    { required: true, message: '请输入规则名称', trigger: 'change' }
  ],
  detail: [
    { required: true, message: '请输入规则值', trigger: 'change' }
  ]
}

const form = ref<IElForm | null>(null)

const handleGenerate = async () => {
  const data = await generateAttr(0, 1, {
    attrs: props.modelValue
  })
  emit('confirm', data.info)
}

const handleInputConfirm = (item: AttrRuleValue) => {
  if (item.inputValue?.length) {
    item.detail.push(item.inputValue)
  }
  item.inputVisible = false
  item.inputValue = ''
}

const showInput = async (item: AttrRuleValue) => {
  item.inputVisible = true
  await nextTick()
  saveTagInput.value?.focus()
}

const handleAddAttr = async () => {
  const valid = await form.value?.validate()
  if (!valid) return
  // eslint-disable-next-line vue/no-mutating-props
  props.modelValue.push({
    value: attrForm.value.value,
    detail: attrForm.value.detail,
    inputVisible: false,
    inputValue: ''
  })
  isAdd.value = false
  form.value?.resetFields()
}

const handleTagClose = (index: number) => {
  // eslint-disable-next-line vue/no-mutating-props
  props.modelValue.splice(index, 1)
}
</script>

<style lang="scss" scoped>

.el-icon-menu {
  font-size: 20px;
  cursor: move;
}
.detail-item {
  margin-right: 10px;
}

.el-form-item {
  align-items: center;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

⒊ 组件 模板

新建 src / views / product / add / AttrTemplate.vue 文件：

<template>
  <el-space>
    <el-select
      v-model="value"
      placeholder="请选择"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.rule_name"
        :value="item.id"
      />
    </el-select>
    <el-button
      type="primary"
      @click="handleConfirm"
    >
      确定
    </el-button>
    <el-button>添加规格模板</el-button>
  </el-space>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getAttrs } from '@/api/product'
import type { ProductAttrTpl, AttrRuleValue } from '@/api/types/product'

interface EmitsType {
  (e: 'confirm', value: AttrRuleValue[]): void
}

const emit = defineEmits<EmitsType>()

const value = ref<number | null>(null)

const options = ref<ProductAttrTpl[]>([])

onMounted(() => {
  loadAttrs()
})

const loadAttrs = async () => {
  const data = await getAttrs()
  options.value = data
}

const handleConfirm = () => {
  if (value.value) {
    const item = options.value.find(item => item.id === value.value)
    if (item) {
      emit('confirm', item.rule_value)
    }
  }
}
</script>

<style lang="scss" scoped></style>

⒋ 组件 表格

新建 src / views / product / add / AttrTable.vue 文件：

<template>
  <el-table
    :data="props.modelValue"
    border
  >
    <slot name="prepend" />
    <el-table-column
      label="图片"
      min-width="100"
    >
      <template #default="{ row }">
        <el-input v-model="row.pic" />
      </template>
    </el-table-column>
    <el-table-column
      label="售价"
      min-width="155"
    >
      <template #default="{ row }">
        <el-input-number
          v-model.number="row.price"
          controls-position="right"
          :min="0"
        />
      </template>
    </el-table-column>
    <el-table-column
      min-width="155"
      label="成本价"
    >
      <template
        #default="{ row }"
      >
        <el-input-number
          v-model.number="row.cost"
          controls-position="right"
          :min="0"
        />
      </template>
    </el-table-column>
    <el-table-column
      min-width="155"
      label="原价"
    >
      <template #default="{ row }">
        <el-input-number
          v-model.number="row.ot_price"
          controls-position="right"
          :min="0"
        />
      </template>
    </el-table-column>
    <el-table-column
      min-width="155"
      label="库存"
    >
      <template #default="{ row }">
        <el-input-number
          v-model.number="row.stock"
          controls-position="right"
          :min="0"
        />
      </template>
    </el-table-column>
    <el-table-column
      label="商品编号"
      min-width="155"
    >
      <template #default="{ row }">
        <el-input v-model="row.bar_code" />
      </template>
    </el-table-column>
    <el-table-column
      min-width="155"
      label="重量（KG）"
    >
      <template #default="{ row }">
        <el-input-number
          v-model.number="row.weight"
          controls-position="right"
          :min="0"
        />
      </template>
    </el-table-column>
    <el-table-column
      min-width="155"
      label="体积(m³)"
    >
      <template #default="{ row }">
        <el-input-number
          v-model.number="row.volume"
          controls-position="right"
          :min="0"
        />
      </template>
    </el-table-column>
    <slot name="append" />
  </el-table>
</template>
<script lang="ts" setup>
// import { ref } from 'vue'
import type { PropType } from 'vue'
import type { ProductAttr } from '@/api/types/product'

const props = defineProps({
  modelValue: {
    type: Array as PropType<ProductAttr[]>,
    default: () => []
  }
})

// const data = ref([])
</script>

<style lang="scss" scoped>
</style>

⒌ 插件

wangEditor 富文本编辑器

// 安装
npm i wangeditor --save

拖拽功能

// 安装
npm i -S vuedraggable

⒍ 页面展示

在这里插入图片描述


四、商品规格

### ⒈ 主页新建 文件：


后海 0_o
关注
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目（更新至第六章）
m0_59287760的博客
04-17 1037
另一方面，与熟练的程序员相比，在新手终端用户主导的流程中，如果 AI 给出错误的代码，那么造成的后果更严重。面对大规模语言模型给出的愚蠢建议，熟练的程序员大可以一笑了之，然后自己编写代码，或者利用自己掌握的技术与大规模语言模型一起调试。例如，在下面这个简短的演示中，你可以看到用户按照不同的顺序对 Hacker News 上的文章进行排序，然后将阅读时间添加到页面的文章中，这一切都是通过网页与电子表格的同步化实现的。在深入展开讨论之前，首先声明：本文探讨的很多观点都源自个人的猜测，具有很大的不确定性。
vue3 + vite + ts 后台管理系统模板.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
创建一个 TS+Vue3+vite+element-plus 后台管理系统项目（一）
weixin_45072947的博客
12-23 1607
1. 创建项目 这里使用npm命令创建 [vite官网] npm init vite@latest 按照提示 输入名称 Project name —— vite-app 选择框架 Select a framework —— vue 选择语言 Select a variant —— vue-ts 按照提示cd进入项目 => 按照依赖 => 运行项目 cd vite-app # 这里的 vite-app 是自己创建的项目名称 npm install npm run dev 按照提示，浏览
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 7️⃣商品列表组件开发
不乱来的嫖客
09-06 242
● move(endPoint, time, easingFn)：设置目标位置，transition，translate 等信息，开始移动元素，期间触发各种 hooks 事件。● setPending(pending)：设置是否移动中，pending 为 true 则移动中。● minScrollPos：最小能移动到的位置，一般为 0。● maxScrollPos：最大能移动到的位置，一般为负数。● end：计算划动后的最终位置（动量计算后的位置和时间）● translate(point)：设置目标位置。
vue3 + ts 项目实站 【一】 环境搭建. （后台管理系统)
mu_rain的专栏
07-05 539
vue 后台管理系统实战
Vue3商品SKU多规格编辑组件
最新发布
luck332的专栏
09-07 1076
SKU（Stock Keeping Unit）定义：SKU即库存量单位，是指宝贝的销售属性集合，供买家在下单时点选，如“规格”、“颜色分类”、“尺码”等。部分SKU的属性值可以由卖家自定义编辑，部分则不可编辑。功能：商品SKU多规格组件允许买家在商品详情页直接查看并选择商品的多种规格，同时展示每种规格对应的库存数量、价格等信息。这有助于买家快速了解商品的各种选项，并做出购买决策。
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目
m0_59292038的博客
06-05 542
可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。但是，最重要的是，你将了解到其他人是如何看待编程的。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。你需要挑战自我，并超越熟悉的领域。
Vue3+Vite4+TS 后台模板
06-08
综合这些技术，Vue3+Vite4+TS后台模板为开发者提供了一个高效、易用且功能丰富的开发基础，能够快速搭建后台管理系统，节省时间和精力，同时确保代码质量。在实际项目中，开发者可以根据具体需求进行定制和扩展，以...
Vue3+vite4 +TS后台模板
06-08
Vue3+vite4+TS后台模板是一个现代前端开发的高效解决方案，它结合了Vue.js的最新版本、vite构建工具的第四版以及TypeScript的强大类型系统。这个模板为开发复杂的后台管理系统提供了良好的基础，旨在提高开发效率和...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板是一个现代且高效的前端开发框架组合，用于构建功能丰富的Web应用。这个模板结合了Vue.js的最新版本3、Vite构建工具以及Ant Design Vue UI库，旨在提供一个快速开发后台管理...
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 2️⃣Git的使用
不乱来的嫖客
01-23 1564
分布式版本控制系统 Git
vue3——组件
xiaoququ的博客
08-11 1658
代码】vue3——组件。
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 4️⃣首页开发
不乱来的嫖客
08-08 740
首页开发 业务组件及优化
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 3️⃣项目搭建及前期准备
不乱来的嫖客
03-05 1874
使用vite创建 vue3项目，项目搭建及前期准备
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 1️Typescript 基础知识
不乱来的嫖客
01-19 444
项目 业务层、框架层，及TS
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 6️⃣商家详情页开发
不乱来的嫖客
08-29 572
商家详情页开发
VUE-商品详情多规格-拿来即用--插件式
qq_36935391的博客
05-18 1863
效果图 具体代码 <template> <div class="title-small colonn"> <div class="colonn" style="padding:20px 20px;border-radius: 10px;margin-top:10px;"> <div class="roww"> <div style="color: #606266;margin-right: 10.
Vue3+Vite+TS打造后台管理系统模板
资源摘要信息:"使用vue3+vite+ts创建的后台管理系统模板.zip" 本资源是一个使用Vue.js 3、Vite和TypeScript技术栈创建的后台管理系统模板。Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

后海 0_o

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值