czg_team
/
cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 商品列表添加完成一半

This commit is contained in:
duan 2025-02-19 18:27:12 +08:00
parent 2a7e200015
commit dc5f664143
11 changed files with 547 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/product/commonUnits.ts
View File

@ -12,6 +12,14 @@ const AuthAPI = {
params,
});
},
// 列表
getList(params: any) {
return request<any, Responseres>({
url: `${baseURL}/list`,
method: "get",
params,
});
},
// 单位新增
addunit(data: any) {
return request<any, Responseres>({

9
src/api/product/index.ts
View File

@ -41,7 +41,14 @@ const AuthAPI = {
method: "delete",
});
},
// 上下架
onOff(data: any) {
return request<any, Responseres>({
url: `${baseURL}/on-off`,
method: "post",
data,
});
},
};

281
src/components/CURD/PageContent.vue
View File

@ -8,58 +8,37 @@
<template v-if="typeof item === 'string'">
<!-- 新增 -->
<template v-if="item === 'add'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="success"
icon="plus"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="success" icon="plus"
@click="handleToolbar(item)">
新增
</el-button>
</template>
<!-- 删除 -->
<template v-else-if="item === 'delete'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="danger" icon="delete"
:disabled="removeIds.length === 0" @click="handleToolbar(item)">
删除
</el-button>
</template>
<!-- 导入 -->
<template v-else-if="item === 'import'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="default"
icon="upload"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="upload"
@click="handleToolbar(item)">
导入
</el-button>
</template>
<!-- 导出 -->
<template v-else-if="item === 'export'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="default"
icon="download"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="download"
@click="handleToolbar(item)">
导出
</el-button>
</template>
</template>
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
:type="item.type ?? 'default'"
@click="handleToolbar(item.name)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
:type="item.type ?? 'default'" @click="handleToolbar(item.name)">
{{ item.text }}
</el-button>
</template>
@ -88,68 +67,36 @@
</template>
<!-- 导出 -->
<template v-else-if="item === 'exports'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:export`]"
icon="download"
circle
title="导出"
@click="handleToolbar(item)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:export`]" icon="download" circle title="导出"
@click="handleToolbar(item)" />
</template>
<!-- 导入 -->
<template v-else-if="item === 'imports'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:import`]"
icon="upload"
circle
title="导入"
@click="handleToolbar(item)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:import`]" icon="upload" circle title="导入"
@click="handleToolbar(item)" />
</template>
<!-- 搜索 -->
<template v-else-if="item === 'search'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:query`]"
icon="search"
circle
title="搜索"
@click="handleToolbar(item)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:query`]" icon="search" circle title="搜索"
@click="handleToolbar(item)" />
</template>
</template>
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<template v-if="item.auth">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
circle
:title="item.title"
@click="handleToolbar(item.name)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon" circle
:title="item.title" @click="handleToolbar(item.name)" />
</template>
<template v-else>
<el-button
:icon="item.icon"
circle
:title="item.title"
@click="handleToolbar(item.name)"
/>
<el-button :icon="item.icon" circle :title="item.title" @click="handleToolbar(item.name)" />
</template>
</template>
</template>
</div>
</div>
<!-- 列表 -->
<el-table
ref="tableRef"
v-loading="loading"
v-bind="contentConfig.table"
:data="pageData"
:row-key="pk"
@selection-change="handleSelectionChange"
@filter-change="handleFilterChange"
>
<el-table ref="tableRef" v-loading="loading" v-bind="contentConfig.table" :data="pageData" :row-key="pk"
@selection-change="handleSelectionChange" @filter-change="handleFilterChange">
<template v-for="col in cols" :key="col">
<el-table-column v-if="col.show" v-bind="col">
<template #default="scope">
@ -158,24 +105,15 @@
<template v-if="col.prop">
<template v-if="Array.isArray(scope.row[col.prop])">
<template v-for="(item, index) in scope.row[col.prop]" :key="item">
<el-image
:src="item"
:preview-src-list="scope.row[col.prop]"
:initial-index="index"
:preview-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${
col.imageHeight ?? 40
}px`"
/>
<el-image :src="item" :preview-src-list="scope.row[col.prop]" :initial-index="index"
:preview-teleported="true" :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40
}px`" />
</template>
</template>
<template v-else>
<el-image
:src="scope.row[col.prop]"
:preview-src-list="[scope.row[col.prop]]"
<el-image :src="scope.row[col.prop]" :preview-src-list="[scope.row[col.prop]]"
:preview-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
/>
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
</template>
</template>
</template>
@ -197,30 +135,20 @@
<template v-else-if="col.templet === 'switch'">
<template v-if="col.prop">
<!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
<el-switch
v-model="scope.row[col.prop]"
:active-value="col.activeValue ?? 1"
:inactive-value="col.inactiveValue ?? 0"
:inline-prompt="true"
:active-text="col.activeText ?? ''"
:inactive-text="col.inactiveText ?? ''"
:validate-event="false"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
@change="
<el-switch v-model="scope.row[col.prop]" :active-value="col.activeValue ?? 1"
:inactive-value="col.inactiveValue ?? 0" :inline-prompt="true" :active-text="col.activeText ?? ''"
:inactive-text="col.inactiveText ?? ''" :validate-event="false"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)" @change="
pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
"
/>
" />
</template>
</template>
<!-- 生成输入框组件 -->
<template v-else-if="col.templet === 'input'">
<template v-if="col.prop">
<el-input
v-model="scope.row[col.prop]"
:type="col.inputType ?? 'text'"
<el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
@blur="handleModify(col.prop, scope.row[col.prop], scope.row)"
/>
@blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
</template>
</template>
<!-- 格式化为价格 -->
@ -252,7 +180,7 @@
{{
scope.row[col.prop]
? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
.value
.value
: ""
}}
</template>
@ -263,21 +191,15 @@
<template v-if="typeof item === 'string'">
<!-- 编辑/删除 -->
<template v-if="item === 'edit' || item === 'delete'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
:type="item === 'edit' ? 'primary' : 'danger'"
:icon="item"
size="small"
link
@click="
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]"
:type="item === 'edit' ? 'primary' : 'danger'" :icon="item" size="small" link @click="
handleOperat({
name: item,
row: scope.row,
column: scope.column,
$index: scope.$index,
})
"
>
">
{{ item === "edit" ? "编辑" : "删除" }}
</el-button>
</template>
@ -285,41 +207,28 @@
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<el-dropdown>
<el-button
v-if="item.render === undefined || item.render(scope.row)"
v-bind="
item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
"
:icon="item.icon"
:type="item.type ?? 'primary'"
size="small"
link
@click="
<el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
" :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
handleOperat({
name: item.name,
row: scope.row,
column: scope.column,
$index: scope.$index,
})
"
>
">
{{ item.text }}
</el-button>
<template #dropdown v-if="item.options && item.options.length > 0">
<el-dropdown-menu>
<el-dropdown-item
@click="
handleOperat({
name: item.name,
row: scope.row,
column: scope.column,
$index: scope.$index,
command: opt.command ? opt.command : '',
})
"
v-for="opt in item.options"
:key="opt.value"
>
<el-dropdown-item @click="
handleOperat({
name: item.name,
row: scope.row,
column: scope.column,
$index: scope.$index,
command: opt.command ? opt.command : '',
})
" v-for="opt in item.options" :key="opt.value">
{{ opt.label }}
</el-dropdown-item>
</el-dropdown-menu>
@ -340,33 +249,18 @@
<template v-if="showPagination">
<el-scrollbar>
<div class="mt-[12px]">
<el-pagination
v-bind="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-pagination v-bind="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-scrollbar>
</template>
<!-- 导出弹窗 -->
<el-dialog
v-model="exportsModalVisible"
:align-center="true"
title="导出数据"
width="600px"
style="padding-right: 0"
@close="handleCloseExportsModal"
>
<el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0"
@close="handleCloseExportsModal">
<!-- 滚动 -->
<el-scrollbar max-height="60vh">
<!-- 表单 -->
<el-form
ref="exportsFormRef"
label-width="auto"
style="padding-right: var(--el-dialog-padding-primary)"
:model="exportsFormData"
:rules="exportsFormRules"
>
<el-form ref="exportsFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
:model="exportsFormData" :rules="exportsFormRules">
<el-form-item label="文件名" prop="filename">
<el-input v-model="exportsFormData.filename" clearable />
</el-form-item>
@ -376,16 +270,10 @@
<el-form-item label="数据源" prop="origin">
<el-select v-model="exportsFormData.origin">
<el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
<el-option
label="选中数据 (所有选中的数据)"
:value="ExportsOriginEnum.SELECTED"
:disabled="selectionData.length <= 0"
/>
<el-option
label="全量数据 (所有分页的数据)"
:value="ExportsOriginEnum.REMOTE"
:disabled="contentConfig.exportsAction === undefined"
/>
<el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED"
:disabled="selectionData.length <= 0" />
<el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE"
:disabled="contentConfig.exportsAction === undefined" />
</el-select>
</el-form-item>
<el-form-item label="字段" prop="fields">
@ -406,35 +294,17 @@
</template>
</el-dialog>
<!-- 导入弹窗 -->
<el-dialog
v-model="importModalVisible"
:align-center="true"
title="导入数据"
width="600px"
style="padding-right: 0"
@close="handleCloseImportModal"
>
<el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0"
@close="handleCloseImportModal">
<!-- 滚动 -->
<el-scrollbar max-height="60vh">
<!-- 表单 -->
<el-form
ref="importFormRef"
label-width="auto"
style="padding-right: var(--el-dialog-padding-primary)"
:model="importFormData"
:rules="importFormRules"
>
<el-form ref="importFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
:model="importFormData" :rules="importFormRules">
<el-form-item label="文件名" prop="files">
<el-upload
ref="uploadRef"
v-model:file-list="importFormData.files"
class="w-full"
<el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:drag="true"
:limit="1"
:auto-upload="false"
:on-exceed="handleFileExceed"
>
:drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
<span>将文件拖到此处，或</span>
@ -443,13 +313,8 @@
<template #tip>
<div class="el-upload__tip">
*.xlsx / *.xls
<el-link
v-if="contentConfig.importTemplate"
type="primary"
icon="download"
:underline="false"
@click="handleDownloadTemplate"
>
<el-link v-if="contentConfig.importTemplate" type="primary" icon="download" :underline="false"
@click="handleDownloadTemplate">
下载模板
</el-link>
</div>
@ -461,11 +326,7 @@
<!-- 弹窗底部操作按钮 -->
<template #footer>
<div style="padding-right: var(--el-dialog-padding-primary)">
<el-button
type="primary"
:disabled="importFormData.files.length === 0"
@click="handleImportSubmit"
>
<el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
确 定
</el-button>
<el-button @click="handleCloseImportModal">取 消</el-button>
@ -941,10 +802,10 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
.indexAction(
showPagination
? {
[request.pageName]: pagination.currentPage,
[request.limitName]: pagination.pageSize,
...formData,
}
[request.pageName]: pagination.currentPage,
[request.limitName]: pagination.pageSize,
...formData,
}
: formData
)
.then((data) => {

11
src/router/index.ts
View File

@ -402,6 +402,17 @@ export const constantRoutes: RouteRecordRaw[] = [
keepAlive: true,
},
},
{
path: "addgoods",
component: () => import("@/views/product/indexconfig/addgoods.vue"),
name: "addgoods",
meta: {
title: "新增商品",
affix: false,
keepAlive: true,
hidden: true
},
},
{
path: "unit",
component: () => import("@/views/product/unit.vue"),

2
src/views/online-shop/goodsGroupconfig/content2.ts
View File

@ -1,5 +1,5 @@
import type { IContentConfig } from "@/components/CURD/types";
import UserAPI from "@/api/onlineShop/goodsGroupconfig";
import UserAPI from "@/api/product/index";
const contentConfig: IContentConfig = {
pageName: "sys:user",

20
src/views/product/index.vue
View File

@ -62,6 +62,7 @@
<script setup lang="ts">
import UserAPI from "@/api/product/index";
import { useRouter } from 'vue-router';
import type { IObject, IOperatData } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./indexconfig/add";
@ -85,30 +86,31 @@ const {
handleSearchClick,
handleFilterChange,
} = usePage();
const router = useRouter();
const form = reactive({
num: '',
})
// 新增
async function handleAddClick() {
addModalRef.value?.setModalVisible();
router.push({ name: 'addgoods' });
// addModalRef.value?.setModalVisible();
// 加载上级规格下拉数据源
addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
// addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
// 加载角色下拉数据源
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
}
// 编辑
async function handleEditClick(row: IObject) {
editModalRef.value?.handleDisabled(false);
console.log('handleEditClick')
// editModalRef.value?.handleDisabled(false);
// 加载部门下拉数据源
editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
// editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
// 根据id获取数据进行填充
const data = await UserAPI.getunitinfo(row.id);
editModalRef.value?.setFormData(data);
editModalRef.value?.setModalVisible();
// const data = await UserAPI.getunitinfo(row.id);
// editModalRef.value?.setFormData(data);
// editModalRef.value?.setModalVisible();
}
const myDialogRef = ref(null)

66
src/views/product/indexconfig/SpecificationAttribute.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<el-form ref="ruleFormRef" :model="ruleForm" label-width="150px" class="demo-ruleForm" status-icon>
<el-form-item label="规格属性">
<el-table :data="datas.skuList" border>
<el-table-column label="售价" prop="salePrice">
<template v-slot="scope">
<el-input-number size="mini" @change="priceFormat(scope.row, 'salePrice')"
@blur="priceFormat(scope.row, 'salePrice')" v-model="scope.row.salePrice"
controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column label="会员价" prop="memberPrice">
<template v-slot="scope">
<el-input-number @change="priceFormat(scope.row, 'memberPrice')"
@blur="priceFormat(scope.row, 'memberPrice')" v-model="scope.row.memberPrice"
controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column label="起售数量" prop="suit">
<template slot-scope="scope">
<el-input-number @change="priceFormat(scope.row, 'suit')" @blur="priceFormat(scope.row, 'suit')" :min="0"
v-model="scope.row.suit" controls-position="right" v-if="form.type == 'weigh'"></el-input-number>
<el-input-number @change="priceFormat(scope.row, 'suit')" @blur="priceFormat(scope.row, 'suit')" :min="1"
v-model="scope.row.suit" controls-position="right" v-else></el-input-number>
</template>
</el-table-column>
<el-table-column label="分销金额" prop="firstShared">
<template v-slot="scope">
<el-input-number @change="priceFormat(scope.row, 'firstShared')"
@blur="priceFormat(scope.row, 'firstShared')" v-model="scope.row.firstShared"
controls-position="right"></el-input-number>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
</template>
<script setup>
import { ref } from 'vue'
const ruleFormRef = ref(null)
let datas = reactive({
skuList: [],
})
const ruleForm = ref({
})
function priceFormat(item, key) {
const messageheight = 48;
const offset = window.innerHeight / 2 - messageheight / 2 - 100;
nextTick(() => {
const min = 0;
const max = 100000000;
const newval = formatPrice(item[key], min, max, true);
console.log(newval);
if (typeof newval !== "number") {
item[key] = newval.value;
// this.$message({
// offset,
// message: `请输入${min}到${max}范围内的数字`,
// })
}
})
}
</script>

356
src/views/product/indexconfig/addgoods.vue Normal file
View File

@ -0,0 +1,356 @@
<template>
<div class="addgoods">
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
<el-form-item label="商品名称" required>
<el-col :span="12">
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入商品名称" />
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="商品介绍">
<el-col :span="12">
<el-form-item>
<el-input v-model="ruleForm.shortTitle" type="textarea" placeholder="请输入商品介绍" />
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="单位" required>
<el-col :span="12">
<el-form-item prop="unitId">
<el-select v-model="ruleForm.unitId" placeholder="请选择单位">
<el-option :label="item.name" :value="item.id" v-for="item in datas.Company" :key="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="商品分类" required>
<el-col :span="12">
<el-form-item prop="region">
<el-select v-model="ruleForm.categoryId" placeholder="请选择商品分类">
<el-option :label="item.name" :value="item.id" v-for="item in datas.classification" :key="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="商品图片" required prop="coverImg">
<SingleImageUpload v-model="ruleForm.coverImg" />
</el-form-item>
<el-form-item>
<div style="color: #999;">注：第一张图为商品封面图，图片尺寸为750×750</div>
</el-form-item>
<!-- <el-form-item label="显示/隐藏" required prop="type">
<el-checkbox-group v-model="ruleForm.showType">
<el-checkbox label="table">堂食</el-checkbox>
<el-checkbox label="dine">自取</el-checkbox>
<el-checkbox label="delivery">配送</el-checkbox>
<el-checkbox label="express">快递</el-checkbox>
</el-checkbox-group>
</el-form-item> -->
<el-form-item label="商品类型">
<el-radio-group v-model="ruleForm.type">
<el-radio label="single">单规格商品</el-radio>
<el-radio label="sku">多规格商品</el-radio>
<el-radio label="package">套餐商品</el-radio>
<el-radio label="weight">称重商品</el-radio>
<el-radio label="coupon">团购券</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="规格类型">
<el-radio-group v-model="ruleForm.specId">
<el-radio label="normal">单规格</el-radio>
<el-radio label="sku">多规格</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="套餐类型">
<el-radio-group v-model="ruleForm.groupType">
<el-radio label="0">固定套餐</el-radio>
<el-radio label="1">可选套餐</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="ruleForm.groupType == 0">
<el-table border :data="item.goods" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
<el-table-column label="名称" prop="proName"></el-table-column>
<el-table-column label="规格" prop="skuName"> </el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="数量" prop="number">
<template v-slot="scope">
<el-input-number v-model="scope.row.number" :min="0" />
</template>
</el-table-column>
<el-table-column width="150">
<template slot="header" slot-scope="scope">
<el-button type="primary"
@click="$refs.shopListRef.show([...ruleForm.proGroupVo[index].goods])">添加商品</el-button>
</template>
<template slot-scope="scope">
<el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
<el-button type="text" @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<template v-if="ruleForm.groupType == 1">
<div class="group_wrap" v-for="(item, index) in form.proGroupVo" :key="index">
<el-form inline :model="item">
<el-form-item label="规格组名">
<el-input v-model="item.title" />
</el-form-item>
<el-form-item :label="`本组菜品${item.goods.length}选`">
<el-input v-model="item.number" />
</el-form-item>
<el-form-item>
<el-button @click="form.proGroupVo.splice(index, 1)">删除</el-button>
</el-form-item>
</el-form>
<div>
<el-table border :data="item.goods">
<el-table-column label="名称" prop="proName"></el-table-column>
<el-table-column label="规格" prop="skuName"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="数量" prop="number">
<template v-slot="scope">
<el-input-number v-model="scope.row.number" :min="0" />
</template>
</el-table-column>
<el-table-column width="150">
<template slot="header" slot-scope="scope">
<el-button type="primary"
@click="$refs.shopListRef.show([...form.proGroupVo[index].goods]); addGroupIndex = index">添加商品</el-button>
</template>
<template slot-scope="scope">
<el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
<el-button type="text" @click="form.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-button type="primary" @click="$refs.shopListRef.show(); addGroupIndex = false">添加套餐组</el-button>
</template>
<!-- 规格属性 -->
<SpecificationAttribute></SpecificationAttribute>
<el-form-item label="重量">
<el-col :span="12">
<div style="display: block;">
<el-input v-model="ruleForm.weight" placeholder="">
<template #append>千克</template>
</el-input>
<div style="color: #999;">用于快递或配送运费计重</div>
</div>
</el-col>
</el-form-item>
<el-form-item label="是否允许临时改价">
<el-radio-group v-model="ruleForm.isAllowTempModifyPrice">
<el-radio :label="1">允许</el-radio>
<el-radio :label="0">不允许</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="每日销量上限">
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
</el-form-item>
<el-form-item label="每单限购">
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
</el-form-item>
<el-form-item label="每人限购">
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
</el-form-item> -->
<el-form-item label="定时上下架">
<el-checkbox-group v-model="ruleForm.days">
<el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :label="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-col :span="12">
<el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" :default-value="['00:00', '59:59']" value-format="HH:mm" format="HH:mm" />
</el-col>
</el-form-item>
<el-form-item label="上架">
<el-switch v-model="ruleForm.isSale" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="库存开关">
<div style="display: block;">
<el-switch v-model="ruleForm.isStock" active-value="1" inactive-value="0" />
<div style="color: #999;">注：关闭则不计算出入库数据</div>
</div>
</el-form-item>
<el-form-item label="设为推荐" prop="delivery">
<el-switch v-model="ruleForm.isHot" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="库存数量">
<el-input-number v-model="ruleForm.stockNumber" :min="0" />
</el-form-item>
<el-form-item label="打包费" prop="delivery">
<div style="display: block;">
<el-input-number v-model="ruleForm.packFee" controls-position="right"></el-input-number>
<div style="color: #999;">单份商品打包费。注：店铺开启外卖模式下该数据才生效</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">
确定
</el-button>
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// 规格属性
import SpecificationAttribute from './SpecificationAttribute.vue'
import UserAPI from "@/api/product/productclassification";
import UserAPI2 from "@/api/product/commonUnits";
let datas = reactive({
cycle: [
{ label: "周一", value: "Monday" },
{ label: "周二", value: "Tuesday" },
{ label: "周三", value: "Wednesday" },
{ label: "周四", value: "Thursday" },
{ label: "周五", value: "Friday" },
{ label: "周六", value: "Saturday" },
{ label: "周七", value: "Sunday" }
],
Company: [],
classification: [],
})
interface RuleForm {
name: string,
shortTitle: string,
unitId: string,
categoryId: string,
coverImg: string,
images: string[],
type: string,
specId: string,
groupType: string,
proGroupVo: string[],
skuList: string[],
weight: Number,
isAllowTempModifyPrice: Number,
days: string[],
startTime: string,
endTime: string,
isSale: string,
isStock: string,
isHot: string,
stockNumber: Number,
packFee: Number,
sort: Number,
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
//商品名称
name: '',
//商品介绍
shortTitle: '',
// 单位id
unitId: '',
// 分类id
categoryId: '',
// 封面图url
coverImg: '',
// 详情图urls
images: [],
// 商品类型
type: 'single',
// 规格id
specId: 'normal',
// 套餐类型
groupType: '0',
// 套餐入参
proGroupVo: [],
// sku集合
skuList: [],
// 重量
weight: 0,
// 是否允许改价
isAllowTempModifyPrice: 1,
// 定时上下架周期
days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
useTime: ['00:00:00', '23:59:59'],
// 开始时间
startTime: '00:00:00',
// 结束时间
endTime: "23:59:59",
// 是否上架
isSale: "1",
// 是否开启库存
isStock: "0",
// 设为推荐
isHot: "1",
// 库存数量
stockNumber: 0,
// 打包费
packFee: 0,
// 排序值
sort: 1,
})
const rules = reactive<FormRules<RuleForm>>({
name: [
{ required: true, message: '请输入商品名称', trigger: 'blur' },
],
unitId: [
{
required: true,
message: '请选择单位',
trigger: 'change',
},
],
categoryId: [
{
required: true,
message: '请选择商品分类',
trigger: 'change',
},
],
coverImg: [
{
required: true,
message: '请选择图片',
trigger: 'change',
},
],
})
onMounted(() => {
getList()
})
// 获取单位、分类数据
async function getList() {
datas.Company = await UserAPI2.getList()
datas.classification = await UserAPI.getList()
}
const submitForm = async (formEl: FormInstance | undefined) => {
console.log(ruleForm, '提交数据')
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!', fields)
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>
<style scoped lang="scss">
.addgoods {
padding: 20px;
background-color: #fff;
}
</style>

19
src/views/product/indexconfig/content.ts
View File

@ -2,12 +2,17 @@ import UserAPI from "@/api/product/index";
import RoleAPI from "@/api/system/role";
import type { UserPageQuery } from "@/api/system/user";
import type { IContentConfig } from "@/components/CURD/types";
import { id } from "element-plus/es/locale";
const contentConfig: IContentConfig<UserPageQuery> = {
pageName: "sys:user",
table: {
border: true,
highlightCurrentRow: true,
rowKey: 'id',
treeProps: {
children: 'skuList' // 指定子节点存储的字段为 customChildren
}
},
pagination: {
background: true,
@ -22,6 +27,14 @@ const contentConfig: IContentConfig<UserPageQuery> = {
obj.createEndTime = obj['1']
return UserAPI.getPage(obj);
},
modifyAction: function (data) {
let obj = {
type: data.isGrounding ? 'sku' : 'product',
id: data.id,
isSale: data.value
}
// return UserAPI.onOff(obj);
},
deleteAction: UserAPI.deleteByIds,
// importAction(file) {
// return UserAPI.import(1, file);
@ -64,12 +77,6 @@ const contentConfig: IContentConfig<UserPageQuery> = {
prop: "isSale",
templet: "switch",
slotName: "status",
}, {
label: "是否启用库存",
align: "center",
prop: "isStock",
templet: "switch",
slotName: "status",
},
{
label: "操作",

1
src/views/product/indexconfig/edit.ts
View File

@ -14,6 +14,7 @@ const modalConfig: IModalConfig<UserForm> = {
},
pk: "id",
formAction: function (data) {
return UserAPI.update(data);
},

2
src/views/product/indexconfig/statistics.vue
View File

@ -4,7 +4,7 @@
<el-icon class="iconStyle">
<PieChart />
</el-icon>
<span>商品种树</span>
<span>商品种数</span>
<span>{{ datas.totalRow }}</span>
</div>
<div style="width: 300px;">