商品管理: 调整相关组件优化逻辑

This commit is contained in:
puhui999 2023-05-02 02:20:58 +08:00
parent 6478d295df
commit 1116fb278b
7 changed files with 43 additions and 36 deletions

View File

@ -1,9 +1,9 @@
import request from '@/config/axios' import request from '@/config/axios'
import type { SpuType } from './type/spuType' import type { SpuType } from './type/spuType'
// 获得sku列表 // 获得spu列表
export const getSkuList = (params: any) => { export const getSpuList = (params: any) => {
return request.get({ url: '/product/sku/list', params }) return request.get({ url: '/product/spu/page', params })
} }
// 创建商品spu // 创建商品spu
export const createSpu = (data: SpuType) => { export const createSpu = (data: SpuType) => {

View File

@ -147,5 +147,6 @@ export enum DICT_TYPE {
MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型 MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
// ========== MALL 模块 ========== // ========== MALL 模块 ==========
PRODUCT_UNIT = 'product_unit' // 商品单位 PRODUCT_UNIT = 'product_unit', // 商品单位
PRODUCT_SPU_STATUS = 'product_spu_status' //商品状态
} }

View File

@ -116,13 +116,15 @@ import { copyValueToTarget } from '@/utils/object'
import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index' import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
// Api // Api
import * as ProductCategoryApi from '@/api/mall/product/category' import * as ProductCategoryApi from '@/api/mall/product/category'
import { propTypes } from '@/utils/propTypes'
const message = useMessage() // const message = useMessage() //
const props = defineProps({ const props = defineProps({
propFormData: { propFormData: {
type: Object as PropType<SpuType>, type: Object as PropType<SpuType>,
default: () => {} default: () => {}
} },
activeName: propTypes.string.def('')
}) })
const AttributesAddFormRef = ref() // const AttributesAddFormRef = ref() //
const ProductManagementBasicInfoRef = ref() // Ref const ProductManagementBasicInfoRef = ref() // Ref

View File

@ -11,13 +11,15 @@ import type { SpuType } from '@/api/mall/product/management/type/spuType'
import { Editor } from '@/components/Editor' import { Editor } from '@/components/Editor'
import { PropType } from 'vue' import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils/object' import { copyValueToTarget } from '@/utils/object'
import { propTypes } from '@/utils/propTypes'
const message = useMessage() // const message = useMessage() //
const props = defineProps({ const props = defineProps({
propFormData: { propFormData: {
type: Object as PropType<SpuType>, type: Object as PropType<SpuType>,
default: () => {} default: () => {}
} },
activeName: propTypes.string.def('')
}) })
const DescriptionFormRef = ref() // Ref const DescriptionFormRef = ref() // Ref
const formData = ref<SpuType>({ const formData = ref<SpuType>({

View File

@ -53,13 +53,15 @@
import type { SpuType } from '@/api/mall/product/management/type/spuType' import type { SpuType } from '@/api/mall/product/management/type/spuType'
import { PropType } from 'vue' import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils/object' import { copyValueToTarget } from '@/utils/object'
import { propTypes } from '@/utils/propTypes'
const message = useMessage() // const message = useMessage() //
const props = defineProps({ const props = defineProps({
propFormData: { propFormData: {
type: Object as PropType<SpuType>, type: Object as PropType<SpuType>,
default: () => {} default: () => {}
} },
activeName: propTypes.string.def('')
}) })
// //
const recommend = [ const recommend = [

View File

@ -19,17 +19,17 @@
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<el-table-column align="center" label="商品条码" min-width="120"> <el-table-column align="center" label="商品条码" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input v-model="row.barCode" class="w-100%" /> <el-input v-model="row.barCode" class="w-100%" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="销售价(分)" min-width="120"> <el-table-column align="center" label="销售价(分)" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number v-model="row.price" :min="0" class="w-100%" controls-position="right" /> <el-input-number v-model="row.price" :min="0" class="w-100%" controls-position="right" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="市场价(分)" min-width="120"> <el-table-column align="center" label="市场价(分)" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number <el-input-number
v-model="row.marketPrice" v-model="row.marketPrice"
@ -39,7 +39,7 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="成本价(分)" min-width="120"> <el-table-column align="center" label="成本价(分)" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number <el-input-number
v-model="row.costPrice" v-model="row.costPrice"
@ -49,23 +49,23 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="库存" min-width="120"> <el-table-column align="center" label="库存" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" /> <el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="重量(kg)" min-width="120"> <el-table-column align="center" label="重量(kg)" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number v-model="row.weight" :min="0" class="w-100%" controls-position="right" /> <el-input-number v-model="row.weight" :min="0" class="w-100%" controls-position="right" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="体积(m^3)" min-width="120"> <el-table-column align="center" label="体积(m^3)" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number v-model="row.volume" :min="0" class="w-100%" controls-position="right" /> <el-input-number v-model="row.volume" :min="0" class="w-100%" controls-position="right" />
</template> </template>
</el-table-column> </el-table-column>
<template v-if="formData.subCommissionType"> <template v-if="formData.subCommissionType">
<el-table-column align="center" label="一级返佣(分)" min-width="120"> <el-table-column align="center" label="一级返佣(分)" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number <el-input-number
v-model="row.subCommissionFirstPrice" v-model="row.subCommissionFirstPrice"
@ -75,7 +75,7 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="二级返佣(分)" min-width="120"> <el-table-column align="center" label="二级返佣(分)" min-width="168">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number <el-input-number
v-model="row.subCommissionSecondPrice" v-model="row.subCommissionSecondPrice"

View File

@ -68,7 +68,7 @@
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column type="expand"> <el-table-column type="expand">
<template #default="{ row }"> <template #default="{ row }">
<el-form class="demo-table-expand" inline label-position="left"> <el-form inline label-position="left">
<el-form-item label="市场价:"> <el-form-item label="市场价:">
<span>{{ row.marketPrice }}</span> <span>{{ row.marketPrice }}</span>
</el-form-item> </el-form-item>
@ -83,23 +83,18 @@
</el-table-column> </el-table-column>
<el-table-column label="商品图" min-width="80"> <el-table-column label="商品图" min-width="80">
<template #default="{ row }"> <template #default="{ row }">
<div class="demo-image__preview"> <div class="demo-image__preview z-100">
<el-image <el-image
:preview-src-list="[row.image]" :src="row.picUrl"
:src="row.image"
style="width: 36px; height: 36px" style="width: 36px; height: 36px"
@click="imgViewVisible = true"
/> />
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
:show-overflow-tooltip="true"
label="商品名称"
min-width="300"
prop="storeName"
/>
<el-table-column align="center" label="商品售价" min-width="90" prop="price" /> <el-table-column align="center" label="商品售价" min-width="90" prop="price" />
<el-table-column align="center" label="销量" min-width="90" prop="sales" /> <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
<el-table-column align="center" label="库存" min-width="90" prop="stock" /> <el-table-column align="center" label="库存" min-width="90" prop="stock" />
<el-table-column align="center" label="排序" min-width="70" prop="sort" /> <el-table-column align="center" label="排序" min-width="70" prop="sort" />
<el-table-column <el-table-column
@ -112,7 +107,7 @@
<el-table-column fixed="right" label="状态" min-width="80"> <el-table-column fixed="right" label="状态" min-width="80">
<template #default="{ row }"> <template #default="{ row }">
<!--TODO 暂时用COMMON_STATUS占位一下使其不报错 --> <!--TODO 暂时用COMMON_STATUS占位一下使其不报错 -->
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> <dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="row.status" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" fixed="right" label="操作" min-width="150" /> <el-table-column align="center" fixed="right" label="操作" min-width="150" />
@ -125,11 +120,19 @@
@pagination="getList" @pagination="getList"
/> />
</ContentWrap> </ContentWrap>
<!-- 必须在表格外面展示不然单元格会遮挡图层 -->
<el-image-viewer
v-if="imgViewVisible"
:url-list="[
'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png'
]"
@close="imgViewVisible = false"
/>
</template> </template>
<script lang="ts" name="ProductManagement" setup> <script lang="ts" name="ProductManagement" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' // api import { dateFormatter } from '@/utils/formatTime' // api
import * as managementApi from '@/api/mall/product/management/spu' // const message = useMessage() // 消息弹窗 import * as managementApi from '@/api/mall/product/management/spu'
// const message = useMessage() // // const message = useMessage() //
// const { t } = useI18n() // // const { t } = useI18n() //
const { push } = useRouter() // const { push } = useRouter() //
@ -163,13 +166,10 @@ const headerNum = ref([
type: 5 type: 5
} }
]) ])
const imgViewVisible = ref(false)
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10
name: undefined,
status: undefined,
createTime: [],
type: '1'
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
@ -177,7 +177,7 @@ const queryFormRef = ref() // 搜索的表单
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
const data = await managementApi.getSkuList(queryParams) const data = await managementApi.getSpuList(queryParams)
list.value = data.list list.value = data.list
total.value = data.total total.value = data.total
} finally { } finally {
@ -218,6 +218,6 @@ const openForm = (id?: number) => {
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(() => {
// getList() getList()
}) })
</script> </script>