ss-crm-manage-web/src/views/MiniMall/Product/index.vue

<template>
  <!-- 搜索工作栏 -->
  <el-form
    ref="queryFormRef"
    :inline="true"
    :model="queryParams"
    class="-mb-15px"
    label-width="68px"
  >
    <!-- TODO @puhui999：品牌应该是数据下拉哈 -->
    <el-form-item label="品牌名称" prop="productBrandName">
      <el-input
        v-model="queryParams.productBrandName"
        class="!w-240px"
        clearable
        placeholder="请输入品牌名称"
        @keyup.enter="handleQuery"
      />
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime">
      <el-date-picker
        v-model="queryParams.createTime"
        :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
        class="!w-240px"
        end-placeholder="结束日期"
        start-placeholder="开始日期"
        type="daterange"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="handleQuery"> 搜索 </el-button>
      <el-button @click="resetQuery"> 重置 </el-button>
      <el-button plain type="primary" @click="openForm"> 新增 </el-button>
    </el-form-item>
  </el-form>

  <!-- 列表 -->
  <el-table v-loading="loading" class="mt-20px" :data="list" border>
    <el-table-column type="expand" width="30">
      <template #default="scope">
        <div class="pl-100px pr-100px">
          <el-table :data="scope.row.specsList">
            <el-table-column label="规格名称" prop="" />
            <el-table-column label="颜色" prop="color" />
            <el-table-column label="售价" prop="price" />
            <el-table-column label="成本价" prop="" />
            <el-table-column label="简介" prop="intro" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column key="id" label="产品编码" prop="id" />
    <el-table-column show-overflow-tooltip label="产品名称" min-width="200" prop="name" />
    <el-table-column label="分类" min-width="90" prop="salesCount" />
    <el-table-column label="品牌" min-width="90" prop="stock" />
    <el-table-column label="商品图" min-width="80">
      <template #default="{ row }">
        <el-image :src="row.picUrl" @click="imagePreview(row.picUrl)" class="w-30px h-30px" />
      </template>
    </el-table-column>
    <el-table-column label="简介" min-width="70" prop="sort" />
    <el-table-column :formatter="dateFormatter" label="创建时间" prop="createTime" width="180" />
    <el-table-column fixed="right" label="操作" min-width="80">
      <template #default="{ row }">
        <!-- TODO @puhui999：【详情】，可以后面点做哈 -->
        <el-button link type="primary" @click="openForm(row.id)"> 修改 </el-button>
        <el-button link type="danger" @click="handleDelete(row.id)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <Pagination
    v-model:limit="queryParams.pageSize"
    v-model:page="queryParams.pageNo"
    :total="total"
    @pagination="getList"
  />
</template>

<script setup name="Product">
import { dateFormatter } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'

const { currentRoute, push } = useRouter()
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
}) // 查询参数

const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据

/** 删除按钮操作 */
function handleDelete() {
  console.log('123')
  // try {
  //   // 删除的二次确认
  //   await message.delConfirm()
  //   // 发起删除
  //   // await ProductSpuApi.deleteSpu(id)
  //   message.success(t('common.delSuccess'))
  //   // 刷新列表
  //   await getList()
  // } catch { }
}

function getList() {
  list.value = [
    {
      id: '1234',
      name: '爱玩熊攀岩墙',
      specsList: [
        {
          color: '黑色',
          price: 1234
        },
        {
          color: '灰色',
          price: 4231
        }
      ]
    },
    {
      id: '12345',
      name: '熊攀尼攀岩墙',
      specsList: [
        {
          color: '黑色',
          price: 12345
        }
      ]
    }
  ]
}
/** 商品图预览 */
function imagePreview(imgUrl) {
  createImageViewer({
    urlList: [imgUrl]
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  getList()
}

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

/**
 * 新增或修改
 *
 * @param id 商品 SPU 编号
 */
function openForm(id) {
  // 修改
  if (typeof id == 'number') {
    push({
      path: '/miniMall/productEdit',
      query: { id }
    })
    return
  }
  // 新增
  push('/miniMall/productAdd')
}

watch(
  () => currentRoute.value,
  () => {
    getList()
  }
)

handleQuery()
</script>

<style lang="scss" scoped>
.demo-table-expand {
  padding-left: 42px;

  :deep(.el-form-item__label) {
    width: 82px;
    font-weight: bold;
    color: #99a9bf;
  }
}
</style>