📖 CRM：产品模块的 review

src/router/modules/remaining.ts

@@ -502,7 +502,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
         meta: {
           title: '客户详情',
           noCache: true,
-          hidden: true
+          hidden: true,
+          activeMenu: '/crm/customer'
         },
         component: () => import('@/views/crm/customer/detail/index.vue')
       },
@@ -512,7 +513,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
         meta: {
           title: '联系人详情',
           noCache: true,
-          hidden: true
+          hidden: true,
+          activeMenu: '/crm/contact'
         },
         component: () => import('@/views/crm/contact/detail/index.vue')
       },
@@ -522,7 +524,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
         meta: {
           title: '产品详情',
           noCache: true,
-          hidden: true
+          hidden: true,
+          activeMenu: '/crm/product'
         },
         component: () => import('@/views/crm/product/detail/index.vue')
       }

src/views/crm/product/ProductForm.vue

@@ -62,13 +62,13 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="价格" prop="price">
-            <el-input
-              type="number"
+            <el-input-number
               v-model="formData.price"
               placeholder="请输入价格"
               :min="0"
               :precision="2"
               :step="0.1"
+              class="w-full!"
             />
           </el-form-item>
         </el-col>

src/views/crm/product/index.vue

@@ -28,17 +28,10 @@
         </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"/>
-          新增
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
         <el-button
           type="success"
@@ -76,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"
@@ -91,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"
@@ -204,8 +198,7 @@ const handleDelete = async (id: number) => {
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
-  } catch {
-  }
+  } catch {}
 }
 
 /** 导出按钮操作 */
@@ -223,16 +216,13 @@ const handleExport = async () => {
   }
 }
 
-/** 监听路由变化更新列表 */
-watch(
-  () => currentRoute.value,
-  () => {
+/** 激活时 */
+onActivated(() => {
   getList()
-  }
-)
+})
 
 /** 初始化 **/
-onMounted(async () => {
-  await getList()
+onMounted(() => {
+  getList()
 })
 </script>