📖 CRM：产品模块的 review

src/api/crm/product/index.ts

@@ -14,35 +14,35 @@ export interface ProductVO {
 
 // 查询产品列表
 export const getProductPage = async (params) => {
-  return await request.get({url: `/crm/product/page`, params})
+  return await request.get({ url: `/crm/product/page`, params })
 }
 
 // 查询产品详情
 export const getProduct = async (id: number) => {
-  return await request.get({url: `/crm/product/get?id=` + id})
+  return await request.get({ url: `/crm/product/get?id=` + id })
 }
 
 // 新增产品
 export const createProduct = async (data: ProductVO) => {
-  return await request.post({url: `/crm/product/create`, data})
+  return await request.post({ url: `/crm/product/create`, data })
 }
 
 // 修改产品
 export const updateProduct = async (data: ProductVO) => {
-  return await request.put({url: `/crm/product/update`, data})
+  return await request.put({ url: `/crm/product/update`, data })
 }
 
 // 删除产品
 export const deleteProduct = async (id: number) => {
-  return await request.delete({url: `/crm/product/delete?id=` + id})
+  return await request.delete({ url: `/crm/product/delete?id=` + id })
 }
 
 // 导出产品 Excel
 export const exportProduct = async (params) => {
-  return await request.download({url: `/crm/product/export-excel`, params})
+  return await request.download({ url: `/crm/product/export-excel`, params })
 }
 
 // 查询产品操作日志
 export const getOperateLogPage = async (params: any) => {
-  return await request.get({url: '/crm/product/operate-log-page', params})
+  return await request.get({ url: '/crm/product/operate-log-page', params })
 }

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"
@@ -47,7 +40,7 @@
           :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>
@@ -64,26 +57,27 @@
           </el-link>
         </template>
       </el-table-column>
-      <el-table-column label="产品类型" align="center" prop="categoryName" width="160"/>
+      <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"/>
+          <dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="scope.row.unit" />
         </template>
       </el-table-column>
-      <el-table-column label="产品编码" align="center" prop="no"/>
+      <el-table-column label="产品编码" align="center" prop="no" />
       <el-table-column
         label="价格（元）"
         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"/>
+          <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"
@@ -130,21 +124,21 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <ProductForm ref="formRef" @success="getList"/>
+  <ProductForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
-import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
-import {dateFormatter} from '@/utils/formatTime'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ProductApi from '@/api/crm/product'
 import ProductForm from './ProductForm.vue'
-import {fenToYuanFormat} from '@/utils/formatter'
+import { fenToYuanFormat } from '@/utils/formatter'
 
-defineOptions({name: 'CrmProduct'})
+defineOptions({ name: 'CrmProduct' })
 
 const message = useMessage() // 消息弹窗
-const {t} = useI18n() // 国际化
+const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -189,9 +183,9 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 打开详情 */
-const {currentRoute, push} = useRouter()
+const { currentRoute, push } = useRouter()
 const openDetail = (id: number) => {
-  push({name: 'CrmProductDetail', params: {id}})
+  push({ name: 'CrmProductDetail', params: { id } })
 }
 
 /** 删除按钮操作 */
@@ -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,
-  () => {
-    getList()
-  }
-)
+/** 激活时 */
+onActivated(() => {
+  getList()
+})
 
 /** 初始化 **/
-onMounted(async () => {
-  await getList()
+onMounted(() => {
+  getList()
 })
 </script>