Skip to content

phsl / admin

Go to a project
Commit 896100d3 by lijinqi
Options

1.资源列表字段调整

parent 79baa9c2
Showing with 179 additions and 211 deletions
src/views/mall/product/spu/components/SkuList.vue
......@@ -8,11 +8,12 @@
max-height="500"
size="small"
>
<el-table-column align="center" label="图片" min-width="65">
<template #default="{ row }">
<UploadImg v-model="row.picUrl" height="50px" width="50px" />
</template>
</el-table-column>
<!-- <el-table-column align="center" label="图片" min-width="65">-->
<!-- <template #default="{ row }">-->
<!-- <UploadImg v-model="row.picUrl" height="50px" width="50px" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<template v-if="formData!.specType && !isBatch">
<!-- 根据商品属性动态添加 -->
<el-table-column
......@@ -20,7 +21,7 @@
:key="index"
:label="item.label"
align="center"
min-width="100"
min-width="80"
>
<template #default="{ row }">
<span style="font-weight: bold; color: #40aaff">
......@@ -28,56 +29,41 @@
</span>
</template>
</el-table-column>
<el-table-column label="鉴权信息" prop="auth" align="center">
<el-table-column label="有效期(天)" prop="expDuration" align="center" min-width="100">
<template #default="{ row }">
<el-input v-model="row.auth" class="w-100%" />
</template>
</el-table-column>
<el-table-column label="有效期(单位：天)" prop="expDuration" align="center" min-width="160">
<template #default="{ row }">
<el-input-number
v-model="row.expDuration"
:min="0"
:step="1"
class="w-100%"
controls-position="right"
<el-input
v-model.number="row.expDuration"
type="number"
placeholder="请输入天数"
style="width: 100%; text-align: center;"
/>
</template>
</el-table-column>
<el-table-column label="费用描述" prop="feeInfo" align="center">
<el-table-column label="费用描述" prop="feeInfo" align="center" min-width="60">
<template #default="{ row }">
<el-input v-model="row.feeInfo" class="w-100%" />
</template>
</el-table-column>
</template>
<el-table-column align="center" label="销售价" min-width="168">
<template #default="{ row }">
<el-input-number
v-model="row.price"
:min="0"
:precision="2"
:step="0.1"
class="w-100%"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column align="center" label="市场价" min-width="168">
<el-table-column label="鉴权信息" prop="auth" align="center" min-width="260">
<template #default="{ row }">
<el-input-number
v-model="row.marketPrice"
:min="0"
:precision="2"
:step="0.1"
<el-input
v-model="row.auth"
type="textarea"
:rows="3"
placeholder="请输入鉴权信息"
class="w-100%"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column align="center" label="成本价" min-width="168">
<el-table-column align="center" label="销售价" min-width="100">
<template #default="{ row }">
<el-input-number
v-model="row.costPrice"
v-model="row.price"
:min="0"
:precision="2"
:step="0.1"
......@@ -86,11 +72,35 @@
/>
</template>
</el-table-column>
<el-table-column align="center" label="库存" min-width="168">
<template #default="{ row }">
<el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" />
</template>
</el-table-column>
<!-- <el-table-column align="center" label="市场价" min-width="168">-->
<!-- <template #default="{ row }">-->
<!-- <el-input-number-->
<!-- v-model="row.marketPrice"-->
<!-- :min="0"-->
<!-- :precision="2"-->
<!-- :step="0.1"-->
<!-- class="w-100%"-->
<!-- controls-position="right"-->
<!-- />-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="成本价" min-width="168">-->
<!-- <template #default="{ row }">-->
<!-- <el-input-number-->
<!-- v-model="row.costPrice"-->
<!-- :min="0"-->
<!-- :precision="2"-->
<!-- :step="0.1"-->
<!-- class="w-100%"-->
<!-- controls-position="right"-->
<!-- />-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="库存" min-width="168">-->
<!-- <template #default="{ row }">-->
<!-- <el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<template v-if="formData!.subCommissionType">
<el-table-column align="center" label="一级返佣(元)" min-width="168">
<template #default="{ row }">
......
src/views/mall/product/spu/form/InfoForm.vue
......@@ -13,6 +13,9 @@
type="textarea"
/>
</el-form-item>
<el-form-item label="商品封面图" prop="picUrl">
<UploadImg v-model="formData.picUrl" :disabled="isDetail" height="80px" />
</el-form-item>
<el-form-item label="资源分类" prop="categoryId">
<el-cascader
v-model="formData.categoryId"
......
src/views/mall/product/spu/index.vue
......@@ -87,51 +87,10 @@
/>
</el-tabs>
<el-table v-loading="loading" :data="list">
<el-table-column type="expand">
<template #default="{ row }">
<el-form class="spu-table-expand" label-position="left">
<el-row>
<el-col :span="24">
<el-row>
<el-col :span="8">
<el-form-item label="商品分类:">
<span>{{ formatCategoryName(row.categoryId) }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="市场价:">
<span>{{ fenToYuan(row.marketPrice) }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="成本价:">
<span>{{ fenToYuan(row.costPrice) }}</span>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-row>
<el-col :span="8">
<el-form-item label="浏览量:">
<span>{{ row.browseCount }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="虚拟销量:">
<span>{{ row.virtualSalesCount }}</span>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</el-form>
</template>
</el-table-column>
<el-table-column label="资源编号" min-width="140" prop="id" />
<el-table-column label="资源信息" min-width="300">
<!-- 展开列隐藏 -->
<!-- <el-table-column type="expand"> ... </el-table-column> -->
<el-table-column label="资源名称" min-width="200">
<template #default="{ row }">
<div class="flex">
<el-image
......@@ -142,19 +101,20 @@
/>
<div class="ml-4 overflow-hidden">
<el-tooltip effect="dark" :content="row.name" placement="top">
<div>
{{ row.name }}
</div>
<div>{{ row.name }}</div>
</el-tooltip>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="价格" min-width="160" prop="price">
<template #default="{ row }"> ¥ {{ fenToYuan(row.price) }}</template>
<el-table-column align="center" label="资源分类" min-width="160">
<template #default="{ row }">{{ formatCategoryName(row.categoryId) }}</template>
</el-table-column>
<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="160">
<template #default="{ row }">¥ {{ fenToYuan(row.price) }}</template>
</el-table-column>
<!-- <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="70" prop="sort" />
<el-table-column align="center" label="销售状态" min-width="80">
<template #default="{ row }">
......@@ -174,16 +134,10 @@
</template>
</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180"
/>
<el-table-column :formatter="dateFormatter" align="center" label="创建时间" width="180" prop="createTime"/>
<el-table-column align="center" fixed="right" label="操作" min-width="200">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row.id)"> 详情</el-button>
<el-button link type="primary" @click="openDetail(row.id)">详情</el-button>
<el-button
v-hasPermi="['product:spu:update']"
link
......@@ -232,6 +186,7 @@
/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { TabsPaneContext } from 'element-plus'
import { createImageViewer } from '@/components/ImageViewer'
......@@ -245,43 +200,34 @@ import * as ProductCategoryApi from '@/api/mall/product/category'
defineOptions({ name: 'ProductSpu' })
const message = useMessage() // 消息弹窗
const route = useRoute() // 路由
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转
const loading = ref(false) // 列表的加载中
const exportLoading = ref(false) // 导出的加载中
const total = ref(0) // 列表的总页数
const list = ref<ProductSpuApi.Spu[]>([]) // 列表的数据
// tabs 数据
const tabsData = ref([
{
name: '出售中',
type: 0,
count: 0
},
{
name: '仓库中',
type: 1,
count: 0
},
{
name: '已售罄',
type: 2,
count: 0
},
{
name: '警戒库存',
type: 3,
count: 0
},
{
name: '回收站',
type: 4,
count: 0
}
])
const message = useMessage()
const route = useRoute()
const { t } = useI18n()
const { push } = useRouter()
const loading = ref(false)
const exportLoading = ref(false)
const total = ref(0)
const list = ref<ProductSpuApi.Spu[]>([])
// 完整 tab 配置
const allTabsData = [
{ name: '出售中', type: 0 },
{ name: '仓库中', type: 1 },
{ name: '已售出', type: 2 },
{ name: '警戒库存', type: 3 },
{ name: '回收站', type: 4 }
]
// 隐藏仓库中
const hiddenTabs = [1, 3]
// 过滤后的 tab
const tabsData = computed(() => {
return allTabsData
.filter(tab => !hiddenTabs.includes(tab.type))
.map(tab => ({ ...tab, count: 0 }))
})
const queryParams = ref({
pageNo: 1,
......@@ -290,8 +236,8 @@ const queryParams = ref({
name: '',
categoryId: undefined,
createTime: undefined
}) // 查询参数
const queryFormRef = ref() // 搜索的表单Ref
})
const queryFormRef = ref()
/** 查询列表 */
const getList = async () => {
......@@ -311,14 +257,18 @@ const handleTabClick = (tab: TabsPaneContext) => {
getList()
}
/** 获得每个 Tab 的数量 */
/** 获取每个 Tab 的数量 */
const getTabsCount = async () => {
const res = await ProductSpuApi.getTabsCount()
for (let objName in res) {
tabsData.value[Number(objName)].count = res[objName]
}
tabsData.value.forEach(tab => {
if (res[tab.type] !== undefined) {
tab.count = res[tab.type]
}
})
}
// 其他方法保持原来逻辑：handleStatus02Change, handleStatusChange, handleDelete, imagePreview, handleQuery, resetQuery, openForm, openDetail, handleExport
/** 添加到仓库 / 回收站的状态 */
const handleStatus02Change = async (row: any, newStatus: number) => {
try {
......@@ -335,6 +285,7 @@ const handleStatus02Change = async (row: any, newStatus: number) => {
} catch {}
}
/** 更新上架/下架状态 */
const handleStatusChange = async (row: any) => {
try {
......@@ -357,6 +308,7 @@ const handleStatusChange = async (row: any) => {
}
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
......@@ -372,6 +324,7 @@ const handleDelete = async (id: number) => {
} catch {}
}
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
createImageViewer({
......@@ -390,6 +343,7 @@ const resetQuery = () => {
handleQuery()
}
/** 新增或修改 */
const openForm = (id?: number) => {
// 修改
......@@ -421,39 +375,39 @@ const handleExport = async () => {
}
}
/** 获取分类的节点的完整结构 */
const categoryList = ref() // 分类树
const formatCategoryName = (categoryId: number) => {
return treeToString(categoryList.value, categoryId)
}
/** 激活时 */
onActivated(() => {
getList()
})
/** 初始化 **/
/** 分类树相关 */
const categoryList = ref()
const formatCategoryName = (categoryId: number) => treeToString(categoryList.value, categoryId)
onActivated(() => getList())
onMounted(async () => {
// 解析路由的 categoryId
if (route.query.categoryId) {
queryParams.value.categoryId = route.query.categoryId
}
// 获得商品信息
await getTabsCount()
await getList()
// 获得分类树
const data = await ProductCategoryApi.getCategoryList({})
categoryList.value = handleTree(data, 'id', 'parentId')
})
</script>
<style lang="scss" scoped>
.spu-table-expand {
padding-left: 42px;
:deep(.el-form-item__label) {
width: 82px;
font-weight: bold;
color: #99a9bf;
}
}
/* 隐藏展开按钮 */
:deep(.el-table__expand-column .cell) {
display: none !important;
}
</style>
src/views/mall/trade/delivery/pickUpOrder/index.vue
......@@ -147,7 +147,7 @@
prop="brokerageUser.nickname"
min-width="100"
/>
<el-table-column label="商品信息" align="center" prop="spuName" min-width="300">
<el-table-column label="算力资源信息" align="center" prop="spuName" min-width="300">
<template #default="{ row }">
<div class="flex items-center" v-for="item in row.items" :key="item.id">
<el-image
......
src/views/member/resource/ResourceForm.vue
......@@ -7,16 +7,16 @@
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="类型" prop="categoryId">
<el-select v-model="formData.categoryId" placeholder="请选择类型">
<el-option label="请选择字典生成" value="" />
</el-select>
<!-- <el-form-item label="类型" prop="categoryId">-->
<!-- <el-select v-model="formData.categoryId" placeholder="请选择类型">-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="用户手机" prop="memberUserId">
<el-input v-model="formData.mobile" readonly />
</el-form-item>
<el-form-item label="客户id" prop="memberUserId">
<el-input v-model="formData.memberUserId" placeholder="请输入客户id" />
</el-form-item>
<el-form-item label="关联订单id" prop="tradeOrderId">
<el-input v-model="formData.tradeOrderId" placeholder="请输入关联订单id" />
<el-form-item label="订单编号" prop="tradeOrderId">
<el-input v-model="formData.tradeOrderNo" readonly />
</el-form-item>
<el-form-item label="属性" prop="properties">
<el-input v-model="formData.properties" placeholder="请输入属性" />
......@@ -29,18 +29,18 @@
placeholder="选择过期时间"
/>
</el-form-item>
<el-form-item label="鉴权信息" prop="auth">
<el-input v-model="formData.auth" placeholder="请输入鉴权信息" />
</el-form-item>
<el-form-item label="费用描述" prop="feeInfo">
<el-input v-model="formData.feeInfo" placeholder="请输入费用描述" />
</el-form-item>
<!-- <el-form-item label="鉴权信息" prop="auth">-->
<!-- <el-input v-model="formData.auth" placeholder="请输入鉴权信息" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="费用描述" prop="feeInfo">-->
<!-- <el-input v-model="formData.feeInfo" placeholder="请输入费用描述" />-->
<!-- </el-form-item>-->
<el-form-item label="有效期" prop="expDuration">
<el-input v-model="formData.expDuration" placeholder="请输入有效期" />
</el-form-item>
<el-form-item label="剩余使用次数" prop="unuseCount">
<el-input v-model="formData.unuseCount" placeholder="请输入剩余使用次数" />
</el-form-item>
<!-- <el-form-item label="剩余使用次数" prop="unuseCount">-->
<!-- <el-input v-model="formData.unuseCount" placeholder="请输入剩余使用次数" />-->
<!-- </el-form-item>-->
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
......@@ -68,6 +68,8 @@ const formData = ref({
categoryId: undefined,
memberUserId: undefined,
tradeOrderId: undefined,
tradeOrderNo: undefined,
mobile: undefined,
properties: undefined,
expTime: undefined,
auth: undefined,
......@@ -83,7 +85,7 @@ const formRules = reactive({
auth: [{ required: true, message: '鉴权信息不能为空', trigger: 'blur' }],
feeInfo: [{ required: true, message: '费用描述不能为空', trigger: 'blur' }],
expDuration: [{ required: true, message: '有效期不能为空', trigger: 'blur' }],
unuseCount: [{ required: true, message: '剩余使用次数不能为空', trigger: 'blur' }]
unuseCount: [{ required: true, message: '剩余使用次数不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
......@@ -135,6 +137,8 @@ const resetForm = () => {
categoryId: undefined,
memberUserId: undefined,
tradeOrderId: undefined,
tradeOrderNo: undefined,
mobile: undefined,
properties: undefined,
expTime: undefined,
auth: undefined,
......@@ -145,4 +149,4 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
</script>
\ No newline at end of file
</script>
src/views/member/resource/index.vue
......@@ -8,29 +8,29 @@
:inline="true"
label-width="68px"
>
<el-form-item label="类型" prop="categoryId">
<el-select
v-model="queryParams.categoryId"
placeholder="请选择类型"
clearable
class="!w-240px"
>
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="客户id" prop="memberUserId">
<!-- <el-form-item label="类型" prop="categoryId">-->
<!-- <el-select-->
<!-- v-model="queryParams.categoryId"-->
<!-- placeholder="请选择类型"-->
<!-- clearable-->
<!-- class="!w-240px"-->
<!-- >-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="用户手机" prop="mobile">
<el-input
v-model="queryParams.memberUserId"
placeholder="请输入客户id"
v-model="queryParams.mobile"
placeholder="请输入用户手机"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="关联订单id" prop="tradeOrderId">
<el-form-item label="订单编号" prop="tradeOrderNo">
<el-input
v-model="queryParams.tradeOrderId"
placeholder="请输入关联订单id"
v-model="queryParams.tradeOrderNo"
placeholder="订单编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
......@@ -91,9 +91,8 @@
@selection-change="handleRowCheckboxChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="类型" align="center" prop="categoryId" />
<el-table-column label="客户id" align="center" prop="memberUserId" />
<el-table-column label="关联订单id" align="center" prop="tradeOrderId" />
<el-table-column label="用户手机" align="center" prop="mobile" />
<el-table-column label="订单编号" align="center" prop="tradeOrderNo" />
<el-table-column label="属性" align="center" prop="properties" />
<el-table-column
label="过期时间"
......@@ -102,11 +101,11 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="鉴权信息" align="center" prop="auth" />
<el-table-column label="费用描述" align="center" prop="feeInfo" />
<!-- <el-table-column label="鉴权信息" align="center" prop="auth" />-->
<!-- <el-table-column label="费用描述" align="center" prop="feeInfo" />-->
<el-table-column label="有效期" align="center" prop="expDuration" />
<el-table-column label="剩余使用次数" align="center" prop="unuseCount" />
<el-table-column label="备注" align="center" prop="remark" />
<!-- <el-table-column label="剩余使用次数" align="center" prop="unuseCount" />-->
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
<el-table-column
label="创建时间"
align="center"
......@@ -168,8 +167,8 @@ const queryParams = reactive({
pageNo: 1,
pageSize: 10,
categoryId: undefined,
memberUserId: undefined,
tradeOrderId: undefined,
mobile: undefined,
tradeOrderNo: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
......@@ -253,4 +252,4 @@ const handleExport = async () => {
onMounted(() => {
getList()
})
</script>
\ No newline at end of file
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment