From 0f9f89a293e2017a4960fc7105f4edf2f47b0437 Mon Sep 17 00:00:00 2001
From: chuan <2256222053@qq.com>
Date: Tue, 28 Dec 2021 11:59:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=83=A8=E5=88=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复商品api错误
修复elementui-plus的el-cascader组件属性绑定错误
data属性名更名为state
utils添加过滤器工具类
onBeforeMount钩子函数更改为onMounted
---
 src/api/pms/category.ts       |  8 ++--
 src/api/pms/goods.ts          | 12 ++---
 src/utils/filter.ts           | 76 ++++++++++++++++++++++++++++++
 src/views/pms/goods/index.vue | 89 ++++++++++++++++++-----------------
 4 files changed, 131 insertions(+), 54 deletions(-)
 create mode 100644 src/utils/filter.ts

diff --git a/src/api/pms/category.ts b/src/api/pms/category.ts
index b79a2d75..1cecce2c 100644
--- a/src/api/pms/category.ts
+++ b/src/api/pms/category.ts
@@ -1,6 +1,6 @@
 import request from "@utils/request";
 
-export function list(queryParams:object) {
+export const list=(queryParams:object)=>{
     return request({
         url: '/mall-pms/api/v1/categories',
         method: 'get',
@@ -8,7 +8,7 @@ export function list(queryParams:object) {
     })
 }
 
-export function cascadeList(queryParams:object) {
+export const cascadeList=(queryParams:object)=> {
     return request({
         url: '/mall-pms/api/v1/categories/cascade',
         method: 'get',
@@ -18,14 +18,14 @@ export function cascadeList(queryParams:object) {
 
 
 
-export function detail(id:number) {
+export const detail=(id:number)=> {
     return request({
         url: '/mall-pms/api/v1/categories/' + id,
         method: 'get'
     })
 }
 
-export function add(data:object) {
+export const add=(data:object)=> {
     return request({
         url: '/mall-pms/api/v1/categories',
         method: 'post',
diff --git a/src/api/pms/goods.ts b/src/api/pms/goods.ts
index d3551b00..7bd0af88 100644
--- a/src/api/pms/goods.ts
+++ b/src/api/pms/goods.ts
@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-export function page(queryParams:object) {
+export const page = (queryParams:object)=> {
     return request({
         url: '/mall-pms/api/v1/goods/page',
         method: 'get',
@@ -7,14 +7,14 @@ export function page(queryParams:object) {
     })
 }
 
-export function detail(id:number) {
+export const detail=(id:number)=> {
     return request({
         url: '/mall-pms/api/v1/goods/' + id,
         method: 'get'
     })
 }
 
-export function addGoods(data:object) {
+export const addGoods=(data:object)=> {
     return request({
         url: '/mall-pms/api/v1/goods',
         method: 'post',
@@ -22,7 +22,7 @@ export function addGoods(data:object) {
     })
 }
 
-export function updateGoods(id:number, data:object) {
+export const  updateGoods=(id:number, data:object)=> {
     return request({
         url: '/mall-pms/api/v1/goods/' + id,
         method: 'put',
@@ -30,14 +30,14 @@ export function updateGoods(id:number, data:object) {
     })
 }
 
-export function removeGoods(ids:string) {
+export const removeGoods=(ids:string)=> {
     return request({
         url: '/mall-pms/api/v1/goods/'+ids,
         method: 'delete'
     })
 }
 
-export function patch(id:number, data:object) {
+export const patch=(id:number, data:object)=> {
     return request({
         url: '/mall-pms/api/v1/goods/' + id,
         method: 'patch',
diff --git a/src/utils/filter.ts b/src/utils/filter.ts
new file mode 100644
index 00000000..b5c9871b
--- /dev/null
+++ b/src/utils/filter.ts
@@ -0,0 +1,76 @@
+
+/**
+ * Show plural label if time is plural number
+ * @param {number} time
+ * @param {string} label
+ * @return {string}
+ */
+function pluralize(time:number, label:string) {
+  if (time === 1) {
+    return time + label
+  }
+  return time + label + 's'
+}
+
+/**
+ * @param {number} time
+ */
+export function timeAgo(time:number) {
+  const between = Date.now() / 1000 - Number(time)
+  if (between < 3600) {
+    return pluralize(~~(between / 60), ' minute')
+  } else if (between < 86400) {
+    return pluralize(~~(between / 3600), ' hour')
+  } else {
+    return pluralize(~~(between / 86400), ' day')
+  }
+}
+
+/**
+ * Number formatting
+ * like 10000 => 10k
+ * @param {number} num
+ * @param {number} digits
+ */
+export function numberFormatter(num:number, digits:number) {
+  const si = [
+    {value: 1E18, symbol: 'E'},
+    {value: 1E15, symbol: 'P'},
+    {value: 1E12, symbol: 'T'},
+    {value: 1E9, symbol: 'G'},
+    {value: 1E6, symbol: 'M'},
+    {value: 1E3, symbol: 'k'}
+  ]
+  for (let i = 0; i < si.length; i++) {
+    if (num >= si[i].value) {
+      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
+    }
+  }
+  return num.toString()
+}
+
+/**
+ * 10000 => "10,000"
+ * @param {number} num
+ */
+export function toThousandFilter(num:number) {
+  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+}
+
+/**
+ * Upper case first char
+ * @param {String} string
+ */
+export function uppercaseFirst(string:string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+
+/**
+ * 金额转换（分->元）
+ * 100 => 1
+ * @param {number} num
+ */
+export function moneyFormatter(num:number) {
+  return '¥'+(isNaN(num) ? 0.00 : parseFloat((num / 100).toFixed(2)))
+}
diff --git a/src/views/pms/goods/index.vue b/src/views/pms/goods/index.vue
index c2bc2712..91af0b23 100644
--- a/src/views/pms/goods/index.vue
+++ b/src/views/pms/goods/index.vue
@@ -13,16 +13,15 @@
         <el-cascader
             v-model="queryParams.categoryId"
             placeholder="商品分类"
-            :props="{emitPath:false}"
+            :props="cascaderProps"
             :options="categoryOptions"
-            expand-trigger="hover"
             clearable
             style="width: 300px"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
-        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+        <el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
+        <el-button  :icon="Refresh" @click="handleReset">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -50,7 +49,7 @@
               </template>
             </el-table-column>
             <el-table-column align="center" label="现价" prop="price">
-              <template #default="scope">{{ scope.row.price | moneyFormatter }}</template>
+              <template #default="scope">{{  moneyFormatter(scope.row.price) }}</template>
             </el-table-column>
             <el-table-column align="center" label="库存" prop="stock"/>
           </el-table>
@@ -66,17 +65,17 @@
       <el-table-column label="商品类目" prop="categoryName" min-width="100"/>
       <el-table-column label="商品品牌" prop="brandName" min-width="100"/>
       <el-table-column align="center" label="零售价" prop="originalPrice">
-        <template #default="scope">{{ scope.row.originPrice | moneyFormatter }}</template>
+        <template #default="scope">{{ moneyFormatter(scope.row.price) }}</template>
       </el-table-column>
       <el-table-column align="center" label="促销价" prop="price">
-        <template #default="scope">{{ scope.row.price | moneyFormatter }}</template>
+        <template #default="scope">{{ moneyFormatter(scope.row.price) }}</template>
       </el-table-column>
       <el-table-column label="销量" prop="sales" min-width="100"/>
       <el-table-column label="单位" prop="unit" min-width="100"/>
       <el-table-column label="描述" prop="description" min-width="100"/>
       <el-table-column label="详情" prop="detail">
         <template #default="scope">
-          <el-dialog :visible.sync="dialogVisible" title="商品详情">
+          <el-dialog v-model="dialogVisible" title="商品详情">
             <div class="goods-detail-box" v-html="goodDetail"/>
           </el-dialog>
           <el-button type="primary" size="mini" @click="handleGoodsView(scope.row.detail)">查看</el-button>
@@ -96,22 +95,24 @@
         </template>
       </el-table-column>
     </el-table>
-    <pagination
-        v-show="data.pagination.total>0"
-        :total="data.pagination.total"
-        :page.sync="data.pagination.page"
-        :limit.sync="data.pagination.limit"
-        @pagination="handleQuery"/>
+    <el-pagination
+        v-show="pagination.total>0"
+        :total="pagination.total"
+        :page.sync="pagination.page"
+        :limit.sync="pagination.limit"
+        @pagination="handleQuery">
+    </el-pagination>
   </div>
 </template>
 
 <script setup lang="ts">
+import {Search, Refresh} from '@element-plus/icons'
 import {page, removeGoods} from '@/api/pms/goods'
 import {cascadeList} from '@/api/pms/category'
-import {reactive, ref,onBeforeMount, unref, watchEffect, getCurrentInstance, toRefs} from 'vue'
+import {reactive, ref,onMounted, toRefs} from 'vue'
 import {ElMessage, ElMessageBox, ElTree} from 'element-plus'
-
-const data = reactive({
+import {moneyFormatter} from '@/utils/filter'
+const state = reactive({
   // 遮罩层
   loading: true,
   // 选中数组
@@ -132,45 +133,40 @@ const data = reactive({
   pageList: [],
   categoryOptions: [],
   goodDetail: undefined,
-  dialogVisible: false
+  dialogVisible: false,
+  cascaderProps:{emitPath:false,expandTrigger:'hover'}
 })
 
-onBeforeMount(()=>{
-  loadData()
-})
+
 function loadData() {
   loadCategoryOptions()
   handleQuery()
 }
 
 function loadCategoryOptions() {
-  cascadeList().then(response => {
-    data.categoryOptions = ref(response.data)
+  cascadeList({}).then(response => {
+    state.categoryOptions = ref(response.data)
   })
 }
 
-function handleQuery() {
-  data.queryParams.page = data.pagination.page
-  data.queryParams.limit = data.pagination.limit
-  console.log(data.pagination)
-  page(data.queryParams).then(response => {
-    console.log(response)
+ function handleQuery() {
+   state.queryParams.page = state.pagination.page
+   state.queryParams.limit = state.pagination.limit
+  page(state.queryParams).then(response => {
     const {data, total} = response
-    console.log(total)
-    console.log(data.pagination)
-    data.pageList = data
-    data.pagination.total = total ? total : 0
-    data.loading = false
+    state.pageList = data
+    state.pagination.total = total ? total : 0
+    state.loading = false
   })
 }
 
 function handleReset() {
-  data.pagination = {
+  state.pagination = {
     page: 1,
     limit: 10,
     total: 0
   }
-  data.queryParams = {
+  state.queryParams = {
     name: undefined,
     categoryId: undefined,
     queryMode: 'page'
@@ -179,8 +175,8 @@ function handleReset() {
 }
 
 function handleGoodsView(detail: any) {
-  data.goodDetail = detail
-  data.dialogVisible = true
+  state.goodDetail = detail
+  state.dialogVisible = true
 }
 
 function handleAdd() {
@@ -192,7 +188,7 @@ function handleUpdate(row: any) {
 }
 
 function handleDelete(row: any) {
-  const ids = row.id || data.ids.join(',')
+  const ids = row.id || state.ids.join(',')
   ElMessageBox.confirm('是否确认删除选中的数据项?', "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
@@ -212,9 +208,9 @@ function handleRowClick(row: any) {
 }
 
 function handleSelectionChange(selection: any) {
-  data.ids = selection.map((item: { id: any }) => item.id)
-  data.single = selection.length != 1
-  data.multiple = !selection.length
+  state.ids = selection.map((item: { id: any }) => item.id)
+  state.single = selection.length != 1
+  state.multiple = !selection.length
 }
 
 function formatAlbum(val: any) {
@@ -239,8 +235,13 @@ const {
   pageList,
   categoryOptions,
   goodDetail,
-  dialogVisible
-} = toRefs(data);
+  dialogVisible,
+  cascaderProps
+} = toRefs(state);
+
+onMounted(()=>{
+  loadData()
+})
 </script>
 
 <style scoped>