商品管理: 调整相关组件优化逻辑
This commit is contained in:
parent
6478d295df
commit
1116fb278b
@ -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) => {
|
||||||
|
@ -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' //商品状态
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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>({
|
||||||
|
@ -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 = [
|
||||||
|
@ -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"
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user