mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-11-03 03:38:44 +08:00
商品管理初始界面结构设计
This commit is contained in:
puhui999
@@ -2,9 +2,9 @@ import { Layout } from '@/utils/routerHelper'
|
|||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
/**
|
/**
|
||||||
* redirect: noredirect 当设置 noredirect 的时候该路由在面包屑导航中不可被点击
|
* redirect: noredirect 当设置 noredirect 的时候该路由在面包屑导航中不可被点击
|
||||||
* name:'router-name' 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
|
* name:'router-name' 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
|
||||||
* meta : {
|
* meta : {
|
||||||
hidden: true 当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
|
hidden: true 当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
|
||||||
|
|
||||||
alwaysShow: true 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
|
alwaysShow: true 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
|
||||||
@@ -31,7 +31,7 @@ const { t } = useI18n()
|
|||||||
|
|
||||||
canTo: true 设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
|
canTo: true 设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
|
||||||
}
|
}
|
||||||
**/
|
**/
|
||||||
const remainingRouter: AppRouteRecordRaw[] = [
|
const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
{
|
{
|
||||||
path: '/redirect',
|
path: '/redirect',
|
||||||
@@ -345,6 +345,29 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
|||||||
meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
|
meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/product',
|
||||||
|
component: Layout,
|
||||||
|
name: 'ProductManagementEdit',
|
||||||
|
meta: {
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'productManagementAdd',
|
||||||
|
component: () => import('@/views/mall/product/management/addForm.vue'),
|
||||||
|
name: 'ProductManagementAdd',
|
||||||
|
meta: {
|
||||||
|
noCache: true,
|
||||||
|
hidden: true,
|
||||||
|
canTo: true,
|
||||||
|
icon: 'ep:edit',
|
||||||
|
title: '添加商品',
|
||||||
|
activeMenu: '/product/product-management'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
53
src/views/mall/product/management/addForm.vue
Normal file
53
src/views/mall/product/management/addForm.vue
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap v-loading="formLoading">
|
||||||
|
<el-tabs v-model="activeName">
|
||||||
|
<el-tab-pane label="商品信息" name="basicInfo">
|
||||||
|
<BasicInfoForm ref="basicInfoRef" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="商品详情" name="description">
|
||||||
|
<DescriptionForm ref="DescriptionRef" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="其他设置" name="otherSettings">
|
||||||
|
<OtherSettingsForm ref="otherSettingsRef" />
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<el-form>
|
||||||
|
<el-form-item style="float: right">
|
||||||
|
<el-button :loading="formLoading" type="primary" @click="submitForm">保存</el-button>
|
||||||
|
<el-button @click="close">返回</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" name="ProductManagementForm" setup>
|
||||||
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||||
|
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
|
||||||
|
|
||||||
|
// const { t } = useI18n() // 国际化
|
||||||
|
// const message = useMessage() // 消息弹窗
|
||||||
|
const { push, currentRoute } = useRouter() // 路由
|
||||||
|
// const { query } = useRoute() // 查询参数
|
||||||
|
const { delView } = useTagsViewStore() // 视图操作
|
||||||
|
|
||||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||||
|
const activeName = ref('otherSettings') // Tag 激活的窗口
|
||||||
|
const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
|
||||||
|
const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>()
|
||||||
|
|
||||||
|
/** 获得详情 */
|
||||||
|
const getDetail = async () => {}
|
||||||
|
|
||||||
|
/** 提交按钮 */
|
||||||
|
const submitForm = async () => {}
|
||||||
|
|
||||||
|
/** 关闭按钮 */
|
||||||
|
const close = () => {
|
||||||
|
delView(unref(currentRoute))
|
||||||
|
push('/product/product-management')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
onMounted(() => {
|
||||||
|
getDetail()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
191
src/views/mall/product/management/components/BasicInfoForm.vue
Normal file
191
src/views/mall/product/management/components/BasicInfoForm.vue
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="商品名称" prop="name">
|
||||||
|
<el-input v-model="formData.name" placeholder="请输入商品名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="商品分类" prop="categoryId">
|
||||||
|
<el-tree-select
|
||||||
|
v-model="formData.categoryId"
|
||||||
|
:data="[]"
|
||||||
|
:props="defaultProps"
|
||||||
|
check-strictly
|
||||||
|
node-key="id"
|
||||||
|
placeholder="请选择商品分类"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="商品关键字" prop="keyword">
|
||||||
|
<el-input v-model="formData.keyword" placeholder="请输入商品关键字" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="单位" prop="unit">
|
||||||
|
<el-input v-model="formData.unit" placeholder="请输入单位" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="商品简介" prop="introduction">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.introduction"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入商品简介"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="商品封面图" prop="picUrl">
|
||||||
|
<div class="demo-image__preview pt-5px pb-5px pl-11x pr-11px">
|
||||||
|
<el-image
|
||||||
|
:initial-index="0"
|
||||||
|
:preview-src-list="srcList"
|
||||||
|
:src="url"
|
||||||
|
:zoom-rate="1.2"
|
||||||
|
fit="cover"
|
||||||
|
style="width: 100%; height: 90px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="商品轮播图" prop="sliderPicUrls">
|
||||||
|
<el-button>添加轮播图</el-button>
|
||||||
|
<el-carousel :interval="3000" height="200px" style="width: 100%" type="card">
|
||||||
|
<el-carousel-item v-for="item in 6" :key="item">
|
||||||
|
<h3 justify="center" text="2xl">{{ item }}</h3>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="运费模板" prop="deliveryTemplateId">
|
||||||
|
<el-select v-model="formData.deliveryTemplateId" placeholder="请选择" style="width: 100%">
|
||||||
|
<el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-button class="ml-20px">运费模板</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="商品规格" props="specType">
|
||||||
|
<el-radio-group v-model="formData.specType" @change="changeSpecType(formData.specType)">
|
||||||
|
<el-radio :label="false" class="radio">单规格</el-radio>
|
||||||
|
<el-radio :label="true">多规格</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<!-- TODO 商品规格和分销类型切换待定 -->
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="分销类型" props="subCommissionType">
|
||||||
|
<el-radio-group
|
||||||
|
v-model="formData.subCommissionType"
|
||||||
|
@change="changeSubCommissionType(formData.subCommissionType)"
|
||||||
|
>
|
||||||
|
<el-radio :label="false">默认设置</el-radio>
|
||||||
|
<el-radio :label="true" class="radio">自行设置</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<!-- 多规格添加-->
|
||||||
|
<el-col v-if="formData.specType" :span="24">
|
||||||
|
<el-form-item label="选择规格" prop="">
|
||||||
|
<div class="acea-row">
|
||||||
|
<el-select v-model="formData.selectRule">
|
||||||
|
<el-option
|
||||||
|
v-for="item in []"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.ruleName"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-button class="mr-20px" type="primary" @click="confirm">确认</el-button>
|
||||||
|
<el-button class="mr-15px" @click="addRule">添加规格</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" name="ProductManagementBasicInfoForm" setup>
|
||||||
|
// TODO 商品封面测试数据
|
||||||
|
import { defaultProps } from '@/utils/tree'
|
||||||
|
|
||||||
|
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
||||||
|
const srcList = ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']
|
||||||
|
|
||||||
|
const formRef = ref()
|
||||||
|
const formData = ref({
|
||||||
|
name: '', // 商品名称
|
||||||
|
categoryId: '', // 商品分类
|
||||||
|
keyword: '', // 关键字
|
||||||
|
unit: '', // 单位
|
||||||
|
picUrl: '', // 商品封面图
|
||||||
|
sliderPicUrls: [], // 商品轮播图
|
||||||
|
introduction: '', // 商品简介
|
||||||
|
deliveryTemplateId: '', // 运费模版
|
||||||
|
selectRule: '',
|
||||||
|
specType: false, // 商品规格
|
||||||
|
subCommissionType: false // 分销类型
|
||||||
|
})
|
||||||
|
const rules = reactive({
|
||||||
|
name: [required],
|
||||||
|
categoryId: [required],
|
||||||
|
keyword: [required],
|
||||||
|
unit: [required],
|
||||||
|
picUrl: [required],
|
||||||
|
sliderPicUrls: [required],
|
||||||
|
deliveryTemplateId: [required],
|
||||||
|
specType: [required],
|
||||||
|
subCommissionType: [required]
|
||||||
|
})
|
||||||
|
// 选择规格
|
||||||
|
const changeSpecType = (specType) => {
|
||||||
|
console.log(specType)
|
||||||
|
}
|
||||||
|
// 分销类型
|
||||||
|
const changeSubCommissionType = (subCommissionType) => {
|
||||||
|
console.log(subCommissionType)
|
||||||
|
}
|
||||||
|
// 选择属性确认
|
||||||
|
const confirm = () => {}
|
||||||
|
// 添加规格
|
||||||
|
const addRule = () => {}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
/*TODO 商品轮播图测试样式*/
|
||||||
|
.el-carousel__item h3 {
|
||||||
|
color: #475669;
|
||||||
|
opacity: 0.75;
|
||||||
|
line-height: 200px;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n) {
|
||||||
|
background-color: #99a9bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n + 1) {
|
||||||
|
background-color: #d3dce6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*TODO 商品封面测试样式*/
|
||||||
|
.demo-image__error .image-slot {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-image__error .image-slot .el-icon {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-image__error .el-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<!--富文本编辑器组件-->
|
||||||
|
<el-row>
|
||||||
|
<Editor v-model="content" :editor-config="editorConfig" />
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" name="DescriptionForm" setup>
|
||||||
|
import { Editor } from '@/components/Editor'
|
||||||
|
import { createEditorConfig } from '@/views/mp/draft/editor-config'
|
||||||
|
// TODO 模拟参数
|
||||||
|
const content = ref('')
|
||||||
|
const editorConfig = createEditorConfig('', 1)
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="商品排序">
|
||||||
|
<el-input-number v-model="formData.sort" :min="0" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="赠送积分">
|
||||||
|
<el-input-number v-model="formData.giveIntegral" :min="0" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="虚拟销量">
|
||||||
|
<el-input-number
|
||||||
|
v-model="formData.virtualSalesCount"
|
||||||
|
:min="0"
|
||||||
|
placeholder="请输入虚拟销量"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="商品推荐">
|
||||||
|
<el-checkbox-group v-model="checkboxGroup" @change="onChangeGroup">
|
||||||
|
<el-checkbox v-for="(item, index) in recommend" :key="index" :label="item.value">
|
||||||
|
{{ item.name }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<!-- TODO tag展示暂时不考虑排序 -->
|
||||||
|
<el-form-item label="活动优先级">
|
||||||
|
<el-tag>默认</el-tag>
|
||||||
|
<el-tag class="ml-2" type="success">秒杀</el-tag>
|
||||||
|
<el-tag class="ml-2" type="info">砍价</el-tag>
|
||||||
|
<el-tag class="ml-2" type="warning">拼团</el-tag>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="赠送优惠劵">
|
||||||
|
<el-button>选择优惠券</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" name="OtherSettingsForm" setup>
|
||||||
|
// 商品推荐
|
||||||
|
const recommend = [
|
||||||
|
{ name: '是否热卖', value: 'recommendHot' },
|
||||||
|
{ name: '是否优惠', value: 'recommendBenefit' },
|
||||||
|
{ name: '是否精品', value: 'recommendBest' },
|
||||||
|
{ name: '是否新品', value: 'recommendNew' },
|
||||||
|
{ name: '是否优品', value: 'recommendGood' }
|
||||||
|
]
|
||||||
|
const checkboxGroup = ref<string[]>([])
|
||||||
|
const onChangeGroup = () => {
|
||||||
|
checkboxGroup.value.includes('recommendHot')
|
||||||
|
? (formData.value.recommendHot = true)
|
||||||
|
: (formData.value.recommendHot = false)
|
||||||
|
checkboxGroup.value.includes('recommendBenefit')
|
||||||
|
? (formData.value.recommendBenefit = true)
|
||||||
|
: (formData.value.recommendBenefit = false)
|
||||||
|
checkboxGroup.value.includes('recommendBest')
|
||||||
|
? (formData.value.recommendBest = true)
|
||||||
|
: (formData.value.recommendBest = false)
|
||||||
|
checkboxGroup.value.includes('recommendNew')
|
||||||
|
? (formData.value.recommendNew = true)
|
||||||
|
: (formData.value.recommendNew = false)
|
||||||
|
checkboxGroup.value.includes('recommendGood')
|
||||||
|
? (formData.value.recommendGood = true)
|
||||||
|
: (formData.value.recommendGood = false)
|
||||||
|
}
|
||||||
|
const formRef = ref()
|
||||||
|
const formData = ref({
|
||||||
|
sort: '',
|
||||||
|
giveIntegral: 666,
|
||||||
|
virtualSalesCount: 565656,
|
||||||
|
recommendHot: false,
|
||||||
|
recommendBenefit: false,
|
||||||
|
recommendBest: false,
|
||||||
|
recommendNew: false,
|
||||||
|
recommendGood: false
|
||||||
|
})
|
||||||
|
const rules = reactive({
|
||||||
|
sort: [required],
|
||||||
|
giveIntegral: [required],
|
||||||
|
virtualSalesCount: [required]
|
||||||
|
})
|
||||||
|
</script>
|
||||||
5
src/views/mall/product/management/components/index.ts
Normal file
5
src/views/mall/product/management/components/index.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import BasicInfoForm from './BasicInfoForm.vue'
|
||||||
|
import DescriptionForm from './DescriptionForm.vue'
|
||||||
|
import OtherSettingsForm from './OtherSettingsForm.vue'
|
||||||
|
|
||||||
|
export { BasicInfoForm, DescriptionForm, OtherSettingsForm }
|
||||||
225
src/views/mall/product/management/index.vue
Normal file
225
src/views/mall/product/management/index.vue
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form
|
||||||
|
ref="queryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
:model="queryParams"
|
||||||
|
class="-mb-15px"
|
||||||
|
label-width="68px"
|
||||||
|
>
|
||||||
|
<el-form-item label="品牌名称" prop="name">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.name"
|
||||||
|
class="!w-240px"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入品牌名称"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.createTime"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||||
|
class="!w-240px"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
type="daterange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleQuery">
|
||||||
|
<Icon class="mr-5px" icon="ep:search" />
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery">
|
||||||
|
<Icon class="mr-5px" icon="ep:refresh" />
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPermi="['product:brand:create']"
|
||||||
|
plain
|
||||||
|
type="primary"
|
||||||
|
@click="openForm('create')"
|
||||||
|
>
|
||||||
|
<Icon class="mr-5px" icon="ep:plus" />
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<ContentWrap>
|
||||||
|
<el-tabs v-model="queryParams.type" @tab-click="getList">
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="(item, index) in headerNum"
|
||||||
|
:key="index"
|
||||||
|
:label="item.name + '(' + item.count + ')'"
|
||||||
|
:name="item.type.toString()"
|
||||||
|
/>
|
||||||
|
</el-tabs>
|
||||||
|
<el-table v-loading="loading" :data="list">
|
||||||
|
<el-table-column type="expand">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-form class="demo-table-expand" inline label-position="left">
|
||||||
|
<el-form-item label="市场价：">
|
||||||
|
<span>{{ row.marketPrice }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="成本价：">
|
||||||
|
<span>{{ row.costPrice }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="虚拟销量：">
|
||||||
|
<span>{{ row.virtualSalesCount }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="商品图" min-width="80">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="demo-image__preview">
|
||||||
|
<el-image
|
||||||
|
:preview-src-list="[row.image]"
|
||||||
|
:src="row.image"
|
||||||
|
style="width: 36px; height: 36px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
: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="sales" />
|
||||||
|
<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
|
||||||
|
:formatter="dateFormatter"
|
||||||
|
align="center"
|
||||||
|
label="创建时间"
|
||||||
|
prop="createTime"
|
||||||
|
width="180"
|
||||||
|
/>
|
||||||
|
<el-table-column fixed="right" label="状态" min-width="80">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<!--TODO 暂时用COMMON_STATUS占位一下使其不报错 -->
|
||||||
|
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" fixed="right" label="操作" min-width="150" />
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Pagination
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
:total="total"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" name="ProductManagement" setup>
|
||||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||||
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
|
||||||
|
// const message = useMessage() // 消息弹窗
|
||||||
|
// const { t } = useI18n() // 国际化
|
||||||
|
const { push } = useRouter() // 路由跳转
|
||||||
|
const loading = ref(false) // 列表的加载中
|
||||||
|
const total = ref(0) // 列表的总页数
|
||||||
|
const list = ref<any[]>([]) // 列表的数据
|
||||||
|
const headerNum = ref([
|
||||||
|
{
|
||||||
|
count: 8,
|
||||||
|
name: '出售中商品',
|
||||||
|
type: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0,
|
||||||
|
name: '仓库中商品',
|
||||||
|
type: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0,
|
||||||
|
name: '已经售馨商品',
|
||||||
|
type: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0,
|
||||||
|
name: '警戒库存',
|
||||||
|
type: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0,
|
||||||
|
name: '商品回收站',
|
||||||
|
type: 5
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
name: undefined,
|
||||||
|
status: undefined,
|
||||||
|
createTime: [],
|
||||||
|
type: '1'
|
||||||
|
})
|
||||||
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
// const data = await ProductBrandApi.getBrandParam(queryParams)
|
||||||
|
// list.value = data.list
|
||||||
|
// total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value.resetFields()
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openForm = () => {
|
||||||
|
push('/product/productManagementAdd')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
// const handleDelete = async (id: number) => {
|
||||||
|
// try {
|
||||||
|
// // 删除的二次确认
|
||||||
|
// await message.delConfirm()
|
||||||
|
// // 发起删除
|
||||||
|
// await ProductBrandApi.deleteBrand(id)
|
||||||
|
// message.success(t('common.delSuccess'))
|
||||||
|
// // 刷新列表
|
||||||
|
// await getList()
|
||||||
|
// } catch {}
|
||||||
|
// }
|
||||||
|
|
||||||
|
/** 初始化 **/
|
||||||
|
onMounted(() => {
|
||||||
|
// getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user