tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修复商品列表部分bug

Browse Source 
修复商品api错误
修复elementui-plus的el-cascader组件属性绑定错误
data属性名更名为state
utils添加过滤器工具类
onBeforeMount钩子函数更改为onMounted
This commit is contained in:
chuan
2021-12-28 11:59:49 +08:00
parent 93a173d4ba
commit 0f9f89a293
4 changed files with 131 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/pms/category.ts
View File

@@ -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',

12
src/api/pms/goods.ts
View File

@@ -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',

76
src/utils/filter.ts Normal file
View File

@@ -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)))
}

89
src/views/pms/goods/index.vue
View File

@@ -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>