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

<template>
  <!-- 搜索工作栏 -->
  <el-form inline :model="queryParams" class="-mb-15px" label-width="0">
    <el-form-item>
      <el-input
        v-model="queryParams.productName"
        class="!w-200px"
        clearable
        placeholder="请输入产品名称"
        @keyup.enter="handleQuery"
      />
    </el-form-item>
    <el-form-item>
      <el-select
        v-model="queryParams.productBrand"
        placeholder="请选择品牌"
        clearable
        filterable
        @change="handleQuery"
      >
        <el-option
          v-for="item in opts.brand"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-cascader
        :options="opts.productCategory"
        v-model="queryParams.productCategory"
        placeholder="请选择分类"
        clearable
        filterable
        show-all-levels
        @change="handleQuery"
      />
    </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="tableList" border>
    <el-table-column type="expand" width="30">
      <template #default="{ row }">
        <div class="pl-100px pr-100px">
          <el-table :data="row.productSpecList">
            <el-table-column label="规格名称" prop="specsName" />
            <el-table-column label="售价" prop="price" />
            <el-table-column label="简介" prop="intro" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column key="productId" label="产品编码" prop="productId" />
    <el-table-column show-overflow-tooltip label="产品名称" min-width="200" prop="productName" />
    <el-table-column label="分类" min-width="90" prop="productCategoryName" />
    <el-table-column label="品牌" min-width="90" prop="productBrandName" />
    <el-table-column label="商品图" min-width="80">
      <template #default="{ row }">
        <el-image :src="row.mainImage" @click="imagePreview(row.mainImage)" class="w-30px h-30px" />
      </template>
    </el-table-column>
    <el-table-column label="简介" min-width="70" prop="productIntro" />
    <el-table-column :formatter="dateFormatter" label="创建时间" prop="createTime" width="180" />
    <el-table-column fixed="right" label="操作" min-width="80">
      <template #default="{ row }">
        <!-- TODO：【详情】，可以后面点做哈 -->
        <el-button link type="primary" @click="openForm(row.productId)"> 修改 </el-button>
        <el-button link type="danger" @click="handleDelete(row.productId)"> 删除 </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'
import * as ProductApi from '@/api/mall/product'

const { currentRoute, push } = useRouter()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const queryParams = ref({
  productName: undefined,
  productBrand: undefined,
  productCategory: undefined,
  pageNo: 1,
  pageSize: 10
}) // 查询参数

const opts = ref({
  brand: [],
  productCategory: []
})

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

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

async function getList() {
  loading.value = true
  try {
    const data = await ProductApi.getProductPage(queryParams.value)
    tableList.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 商品图预览 */
function imagePreview(imgUrl) {
  createImageViewer({
    urlList: [imgUrl]
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    productName: undefined,
    productBrand: undefined,
    productCategory: undefined,
    pageNo: 1,
    pageSize: 10
  }
  handleQuery()
}

/**
 * 新增或修改
 *
 * @param id 商品 编号
 */
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>