📖 CRM：产品模块的 review

src/views/crm/product/index.vue

@@ -28,8 +28,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
+        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
         <el-button type="primary" @click="openForm('create')" v-hasPermi="['crm:product:create']">
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
@@ -40,7 +40,8 @@
           :loading="exportLoading"
           v-hasPermi="['crm:product:export']"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <Icon icon="ep:download" class="mr-5px" />
+          导出
         </el-button>
       </el-form-item>
     </el-form>
@@ -49,8 +50,14 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="产品名称" align="center" prop="name" />
-      <el-table-column label="产品类型" align="center" prop="categoryName" />
+      <el-table-column label="产品名称" align="center" prop="name" width="160">
+        <template #default="scope">
+          <el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
+            {{ scope.row.name }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="产品类型" align="center" prop="categoryName" width="160" />
       <el-table-column label="产品单位" align="center" prop="unit">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="scope.row.unit" />
@@ -62,14 +69,15 @@
         align="center"
         prop="price"
         :formatter="fenToYuanFormat"
+        width="100"
       />
-      <el-table-column label="产品描述" align="center" prop="description" />
-      <el-table-column label="是否上下架" align="center" prop="status">
+      <el-table-column label="产品描述" align="center" prop="description" width="150" />
+      <el-table-column label="上架状态" align="center" prop="status" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="负责人" align="center" prop="ownerUserName" />
+      <el-table-column label="负责人" align="center" prop="ownerUserName" width="120" />
       <el-table-column
         label="更新时间"
         align="center"
@@ -77,7 +85,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="创建" align="center" prop="creatorName" />
+      <el-table-column label="创建人" align="center" prop="creatorName" width="120" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -85,16 +93,8 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="160">
+      <el-table-column label="操作" align="center" fixed="right" width="160">
         <template #default="scope">
-          <el-button
-            v-hasPermi="['crm:product:query']"
-            link
-            type="primary"
-            @click="openDetail(scope.row)"
-          >
-            详情
-          </el-button>
           <el-button
             link
             type="primary"
@@ -125,8 +125,6 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <ProductForm ref="formRef" @success="getList" />
-  <!-- 表单弹窗：详情 -->
-  <ProductDetail ref="detailRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
@@ -135,7 +133,6 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ProductApi from '@/api/crm/product'
 import ProductForm from './ProductForm.vue'
-import ProductDetail from './ProductDetail.vue'
 import { fenToYuanFormat } from '@/utils/formatter'
 
 defineOptions({ name: 'CrmProduct' })
@@ -184,10 +181,11 @@ const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
-/** 详情操作 */
-const detailRef = ref()
-const openDetail = (data: ProductApi.ProductVO) => {
-  detailRef.value.open(data)
+
+/** 打开详情 */
+const { currentRoute, push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'CrmProductDetail', params: { id } })
 }
 
 /** 删除按钮操作 */
@@ -218,8 +216,13 @@ const handleExport = async () => {
   }
 }
 
+/** 激活时 */
+onActivated(() => {
+  getList()
+})
+
 /** 初始化 **/
-onMounted(async () => {
-  await getList()
+onMounted(() => {
+  getList()
 })
 </script>