init 初始化商品列表管理

This commit is contained in:
lwh 2023-06-19 19:09:03 +08:00
parent 892862dc91
commit f2ee3cff2d
10 changed files with 1937 additions and 23 deletions

View File

@ -0,0 +1,46 @@
import request from '@/utils/request'
/**
* @Descripttion: 商品Api接口
* @version: (1.0)
* @Author: (黎文豪)
* @Date: (2023-06-19)
* @LastEditors: (黎文豪)
* @LastEditTime: (2023-06-19)
*/
// 商品分页查询列表
export function goodsList(query) {
return request({
url: '/business/Goods/getGoodsList',
method: 'get',
params: query
})
}
// 商品新增或修改
export function addOrUpdateGoods(data) {
return request({
url: '/business/Goods/addOrUpdateGoods',
method: 'post',
data: data,
})
}
// 商品删除
export function delGoods(ids) {
return request({
url: '/business/Goods/'+ ids,
method: 'delete'
})
}
// 商品导出
export function exportGoods(query) {
return request({
url: 'business/Goods/exportGoods',
method: 'get',
params: query
})
}

View File

@ -1,21 +1,9 @@
<template> <template>
<div class="upload-file"> <div class="upload-file">
<el-upload <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" v-model:file-list="fileList"
multiple :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess"
:action="uploadFileUrl" :show-file-list="false" :data="uploadData" :drag="drag" :headers="headers" :auto-upload="autoUpload"
:before-upload="handleBeforeUpload" class="upload-file-uploader" ref="fileUpload">
v-model:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:data="uploadData"
:drag="drag"
:headers="headers"
:auto-upload="autoUpload"
class="upload-file-uploader"
ref="fileUpload">
<!-- 拖拽上传 --> <!-- 拖拽上传 -->
<template v-if="drag"> <template v-if="drag">
<el-icon class="el-icon--upload"> <el-icon class="el-icon--upload">
@ -72,7 +60,7 @@ const props = defineProps({
// , ['png', 'jpg', 'jpeg'] // , ['png', 'jpg', 'jpeg']
fileType: { fileType: {
type: Array, type: Array,
default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'] default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf', 'avi', 'rmvb', 'mp4', 'mkv']
}, },
// //
isShowTip: { isShowTip: {
@ -233,21 +221,25 @@ defineExpose({
.upload-file-uploader { .upload-file-uploader {
margin-bottom: 5px; margin-bottom: 5px;
} }
.upload-file-list .el-upload-list__item { .upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed; border: 1px solid #e4e7ed;
line-height: 2; line-height: 2;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
} }
.upload-file-list .ele-upload-list__item-content { .upload-file-list .ele-upload-list__item-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: inherit; color: inherit;
} }
.ele-upload-list__item-content-action .el-link { .ele-upload-list__item-content-action .el-link {
margin-right: 10px; margin-right: 10px;
} }
.doc-icon { .doc-icon {
margin: 0 10px; margin: 0 10px;
} }

View File

@ -1,9 +1,23 @@
<template> <template>
<div class="component-upload-image"> <div class="component-upload-image">
<el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess" <el-upload
:before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" multiple
name="file" :data="data" :drag="drag" :on-remove="handleRemove" :show-file-list="true" :headers="headers" :action="uploadImgUrl"
v-model:file-list="fileList" :on-preview="handlePictureCardPreview" :class="{ hide: fileList.length >= limit }"> list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
name="file"
:data="data"
:drag="drag"
:on-remove="handleRemove"
:show-file-list="true"
:headers="headers"
v-model:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{ hide: fileList.length >= limit }">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<plus /> <plus />
</el-icon> </el-icon>
@ -105,6 +119,7 @@ function handleRemove(file, files) {
// //
function handleUploadSuccess(res) { function handleUploadSuccess(res) {
console.log(res,'调了多少次');
if (res.code != 200) { if (res.code != 200) {
proxy.$modal.msgError(`上传失败,原因:${res.msg}!`) proxy.$modal.msgError(`上传失败,原因:${res.msg}!`)
proxy.$modal.closeLoading() proxy.$modal.closeLoading()
@ -112,12 +127,15 @@ function handleUploadSuccess(res) {
return return
} }
uploadList.value.push({ name: res.data.fileName, url: res.data.url }) uploadList.value.push({ name: res.data.fileName, url: res.data.url })
if (uploadList.value.length === number.value) { console.log(uploadList.value,'上传列表');
console.log(number.value,'数量');
console.log(fileList.value,'fileList');
// if (uploadList.value.length === number.value) {
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value) fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value)
uploadList.value = [] uploadList.value = []
number.value = 0 number.value = 0
emit('update:modelValue', listToString(fileList.value)) emit('update:modelValue', listToString(fileList.value))
} // }
proxy.$modal.closeLoading() proxy.$modal.closeLoading()
} }

View File

@ -0,0 +1,584 @@
<!--
* @Descripttion: (商品/tb_goods 添加弹窗)
* @version: (1.0)
* @Author: (黎文豪)
* @Date: (2023-06-19)
* @LastEditors: (黎文豪)
* @LastEditTime: (2023-06-19)
-->
<template>
<el-dialog v-model="props.modelValue" title="添加商品信息" width="1200px" @closed="closeDialog" @open="openDialog">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="base">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col v-if="userid == 1" :lg="12">
<el-form-item :label-width="labelWidth" label="店铺" prop="shopGuid">
<el-input v-model='formData.shopName' disabled type="text" placeholder='点击选择店铺'>
<template #append>
<div @click="handleChooseShop">选择</div>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="商品类目" prop="goodsCategoryGuid">
<el-cascader class="w100" :options="dataList"
:props="{ checkStrictly: true, value: 'shopGoodsCategoryGuid', label: 'shopGoodsCategoryName', emitPath: false }"
placeholder="请选择商品类目" clearable v-model="formData.goodsCategoryGuid">
<template #default="{ node, data }">
<span>{{ data.shopGoodsCategoryName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="名称" prop="goodsName">
<el-input v-model="formData.goodsName" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="编码" prop="goodsCoding">
<el-input v-model="formData.goodsCoding" placeholder="请输入编码" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="图片" prop="goodsPicture">
<UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="5" :fileSize="5"
:drag="true" :isShowTip="false" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="配送模板" prop="deliveryGuid">
<el-select v-model="formData.deliveryGuid" placeholder="请选择配送模板">
<el-option v-for="item in deliveryDataList" :key="item.deliveryId" :label="item.deliveryName"
:value="item.deliveryGuid" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="上下架状态" prop="goodsShelfStatus">
<el-radio-group v-model="formData.goodsShelfStatus">
<el-radio v-for="item in shelf_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="goodsSort">
<el-input-number v-model.number="formData.goodsSort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="规格/库存" name="sku">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="商品规格" prop="goodsSpecType">
<el-radio-group v-model="formData.goodsSpecType">
<el-radio v-for="item in spec_type " :key="item.dictValue" :label="parseInt(item.dictValue)"
@change="handleChangeSpecType">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="formData.goodsSpecType == 1">
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="商品价格" prop="goodsPriceHighest">
<div style="display: block;">
<el-input-number v-model.number="formData.goodsPriceHighest" controls-position="right" :min="0.01"
:precision="2" />
<span style="margin-left: 10px;"></span>
<div class="input-intro">商品的实际购买金额最低0.01</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="划线价格" prop="goodsDashedPriceHighest">
<div style="display: block;">
<el-input-number v-model.number="formData.goodsDashedPriceHighest" controls-position="right" :min="0" />
<span style="margin-left: 10px;"></span>
<div class="input-intro">划线价仅用于商品页展示</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="库存总量" prop="goodsTotalInventory">
<div style="display: block;">
<el-input-number v-model.number="formData.goodsTotalInventory" controls-position="right" :min="0" />
<span style="margin-left: 10px;"></span>
<div class="input-intro">商品的实际库存数量为0时用户无法下单</div>
</div>
</el-form-item>
</el-col>
<!-- TODO: Sku单个 -->
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="商品重量" prop="goodsSalesInitial">
<div style="display: block;">
<el-input-number v-model.number="formData.goodsSalesInitial" controls-position="right" :min="0" />
<span style="margin-left: 10px;">Kg</span>
<div class="input-intro">商品的实际重量用于计算运费</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth + 20" label="库存计算方式" prop="goodsDeductStockType">
<el-radio-group v-model="formData.goodsDeductStockType">
<el-radio v-for="item in deduct_stock_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="商品详情" name="detail">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails">
<editor v-model="formData.goodsDetails" :min-height="300" style="height: 500px; " />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="更多设置" name="more">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="商品卖点" prop="goodsSellingPoint">
<el-input v-model="formData.goodsSellingPoint" placeholder="请输入商品卖点" />
<div class="input-intro">一句话简述例如此款商品美观大方 性价比较高 不容错过</div>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="主图视频" prop="goodsMainImageVideo">
<div style="display: block;">
<UploadFile v-model="formData.goodsMainImageVideo" :limit="1" :fileSize="100" :data=imgData
:isShowTip="false" />
<div class="input-intro">建议视频宽高比19:9建议时长8-45</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="视频封面" prop="goodsVideoCover">
<div style="display: block;">
<UploadImage ref="uploadRef" v-model="formData.goodsVideoCover" :data=imgData :limit="1" :fileSize="5"
:drag="true" :isShowTip="false" />
<div class="input-intro">建议尺寸750像素*750像素</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="初始销量" prop="goodsSalesInitial">
<div style="display: block;">
<el-input-number v-model.number="formData.goodsSalesInitial" controls-position="right" :min="0" />
<div class="input-intro">用户端展示的销量 = 初始销量 + 实际销量</div>
</div>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">
<div class="divider-title">积分设置</div>
</el-divider>
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="积分赠送" prop="goodsIsPointsGift">
<div style="display: block;">
<el-radio-group v-model="formData.goodsIsPointsGift">
<el-radio v-for="item in is_points_gift " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
<div class="input-intro">开启后用户购买此商品将获得积分</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="积分抵扣" prop="goodsIsPointsDiscount">
<div style="display: block;">
<el-radio-group v-model="formData.goodsIsPointsDiscount">
<el-radio v-for="item in is_points_discount " :key="item.dictValue"
:label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
<div class="input-intro">开启后用户购买此商品可以使用积分进行抵扣</div>
</div>
</el-form-item>
</el-col>
<!-- <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="积分抵扣设置(0默认抵扣 1单独设置抵扣)" prop="goodsIsAlonePointsDiscount">
<el-radio-group v-model="formData.goodsIsAlonePointsDiscount">
<el-radio v-for="item in is_alone_points_discount " :key="item.dictValue"
:label="parseInt(item.dictValue)">{{ item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col> -->
<!-- <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="单独设置积分抵扣的配置" prop="goodsPointsDiscountConfig">
<el-input v-model="formData.goodsPointsDiscountConfig" placeholder="请输入单独设置积分抵扣的配置" />
</el-form-item>
</el-col> -->
</el-row>
<el-divider content-position="left">
<div class="divider-title">会员折扣设置</div>
</el-divider>
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="会员折扣" prop="goodsIsEnableGrade">
<div style="display: block;">
<el-radio-group v-model="formData.goodsIsEnableGrade">
<el-radio v-for="item in is_enable_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
<div class="input-intro">开启后会员折扣会员购买此商品可以享受会员等级折扣价</div>
</div>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="会员折扣设置" prop="goodsIsAloneGrade">
<div style="display: block;">
<el-radio-group v-model="formData.goodsIsAloneGrade">
<el-radio v-for="item in is_alone_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
</el-radio-group>
<div class="input-intro">默认折扣默认为用户所属会员等级的折扣率</div>
</div>
</el-form-item>
</el-col>
<!-- <el-col :lg="12">
<el-form-item :label-width="labelWidth" label="单独设置折扣的配置" prop="goodsAloneGradeEquity">
<el-input v-model="formData.goodsAloneGradeEquity" placeholder="请输入单独设置折扣的配置" />
</el-form-item>
</el-col> -->
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
<template #footer>
<div key="dialog-footer">
<el-button type="primary" @click="handleAddClick(formRef)">添加</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button>
</div>
</template>
</el-dialog>
<!-- 选择店铺 -->
<ChooseShopDialog v-model="ChooseShopDialogVisible" :data="ChooseShopDialogRow" :done="handelAddShop">
</ChooseShopDialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { ElMessage } from 'element-plus'
import modal from '@/plugins/modal.js'
import { addOrUpdateGoods } from '@/api/business/GoodsManager/Goodss/goods.js';
import { shopGoodsCategoryTreeList } from '@/api/business/GoodsManager/ShopGoodsCategorys/shopGoodsCategory.js';
import { deliveryList } from '@/api/business/LogisticsManage/Deliverys/delivery.js'
import useUserStore from '@/store/modules/user'
import ChooseShopDialog from './ChooseShopDialog.vue';
//
const openDialog = async () => {
await getdeduct_stock_type()
await getspec_type()
await getis_points_gift()
await getis_points_discount()
await getis_alone_points_discount()
await getis_enable_grade()
await getis_alone_grade()
await getshelf_status()
}
// -
// (1 2)
const spec_type = ref([]);
// (1 2)
const deduct_stock_type = ref([]);
// (1 0)
const is_points_gift = ref([]);
// 使(1 0)
const is_points_discount = ref([]);
// (0 1)
const is_alone_points_discount = ref([]);
// (1 0)
const is_enable_grade = ref([]);
// (0 1)
const is_alone_grade = ref([]);
// (1 2)
const shelf_status = ref([]);
//
const activeName = ref('base')
//
const ChooseShopDialogVisible = ref(false);
const ChooseShopDialogRow = ref({});
const userid = useUserStore().userId
//
const dataList = ref([])
//
const deliveryDataList = ref([])
// -
//
async function getspec_type() {
await proxy.getDicts('spec_type').then((res) => {
spec_type.value = res.data
})
}
//
async function getdeduct_stock_type() {
await proxy.getDicts('deduct_stock_type').then((res) => {
deduct_stock_type.value = res.data
})
}
//
async function getis_points_gift() {
await proxy.getDicts('is_points_gift').then((res) => {
is_points_gift.value = res.data
})
}
//
async function getis_points_discount() {
await proxy.getDicts('is_points_discount').then((res) => {
is_points_discount.value = res.data
})
}
//
async function getis_alone_points_discount() {
await proxy.getDicts('is_alone_points_discount').then((res) => {
is_alone_points_discount.value = res.data
})
}
//
async function getis_enable_grade() {
await proxy.getDicts('is_enable_grade').then((res) => {
is_enable_grade.value = res.data
})
}
//
async function getis_alone_grade() {
await proxy.getDicts('is_alone_grade').then((res) => {
is_alone_grade.value = res.data
})
}
//
async function getshelf_status() {
await proxy.getDicts('shelf_status').then((res) => {
shelf_status.value = res.data
})
}
//
const handleClick = (tab, event) => {
console.log(tab, event)
}
/** 基础信息 */
//
const handleChooseShop = () => {
ChooseShopDialogVisible.value = true
ChooseShopDialogRow.value = formData
}
//
async function handelAddShop() {
await getTreeList()
await getDeliveryList()
}
//
async function getTreeList() {
shopGoodsCategoryTreeList({ shopGuid: formData?.shopGuid }).then((res) => {
if (res.code == 200) {
dataList.value = res.data
}
})
}
//
async function getDeliveryList() {
deliveryList({
pageNum: 1,
pageSize: 10000,
shopGuid: formData?.shopGuid
}).then((res) => {
if (res.code == 200) {
deliveryDataList.value = res.data.result
}
})
}
/** 商品规格 */
//
function handleChangeSpecType(e) {
if (e === 1) {
console.log(e);
}
if (e === 2) {
}
}
// -
const labelWidth = 100;
const formRef = ref();
const { proxy } = getCurrentInstance()
const emits = defineEmits(["update:modelValue"]);
const formData = reactive({
goodsSpecType: 1,
goodsDeductStockType: 1,
goodsPriceHighest: 1.00,
goodsTotalInventory: 100,
goodsSalesInitial: 1,
goodsShelfStatus: 1,
goodsSort: 100,
goodsIsPointsGift: 0,
goodsIsPointsDiscount: 0,
goodsIsEnableGrade: 0,
goodsIsAloneGrade: 0,
});
const props = defineProps({
modelValue: Boolean,
done: Function,
});
const imgData = ref({
fileDir: "Goods"
})
//
const rules = reactive({
shopGuid: [{ required: true, message: "店铺不能为空", trigger: "blur" }],
goodsCategoryGuid: [{ required: true, message: "商品类目不能为空", trigger: "blur" }],
goodsSkuGuid: [{ required: true, message: "商品规格不能为空", trigger: "blur" }],
deliveryGuid: [{ required: true, message: "配送模板不能为空", trigger: "blur" }],
goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
goodsCoding: [{ required: true, message: "编码不能为空", trigger: "blur" }],
goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
goodsPriceLowest: [{ required: true, message: "价格(最低)不能为空", trigger: "blur" }],
goodsPriceHighest: [{ required: true, message: "价格(最高)不能为空", trigger: "blur" }],
goodsTotalInventory: [{ required: true, message: "库存总量不能为空", trigger: "blur", type: "number" }],
goodsSalesInitial: [{ required: true, message: "初始销量不能为空", trigger: "blur", type: "number" }],
goodsSalesActual: [{ required: true, message: "实际销量不能为空", trigger: "blur", type: "number" }],
goodsDetails: [{ required: true, message: "详情不能为空", trigger: "blur" }],
goodsDeductStockType: [{ required: true, message: "库存计算方式(1下单立减库存 2付款立减库存)不能为空", trigger: "blur", type: "number" }],
goodsIsPointsGift: [{ required: true, message: "是否赠送积分(1开启 0关闭)不能为空", trigger: "blur", type: "number" }],
goodsIsPointsDiscount: [{ required: true, message: "是否允许使用积分抵扣(1允许 0不允许)不能为空", trigger: "blur", type: "number" }],
goodsIsAlonePointsDiscount: [{ required: true, message: "积分抵扣设置(0默认抵扣 1单独设置抵扣)不能为空", trigger: "blur", type: "number" }],
goodsIsEnableGrade: [{ required: true, message: "是否开启会员折扣(1开启 0关闭)不能为空", trigger: "blur", type: "number" }],
goodsIsAloneGrade: [{ required: true, message: "会员折扣设置(0默认等级折扣 1单独设置折扣)不能为空", trigger: "blur", type: "number" }],
goodsShelfStatus: [{ required: true, message: "上下架状态不能为空", trigger: "blur", type: "number" }],
goodsSort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
});
// -
//
const handleAddClick = async (formEl) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) {
return;
}
const { code } = await addOrUpdateGoods(formData);
if (code == 200) {
modal.msgSuccess('添加成功')
closeDialog();
}
});
};
const closeDialog = () => {
//
formData.shopName = ""
formData.shopGuid = ""
dataList.value = []
deliveryDataList.value = []
activeName.value = 'base'
handleResetClick(formRef.value);
props.done();
emits("update:modelValue", false);
};
const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
<style>
.divider-title {
font-size: 18px;
}
.input-intro {
color: #8c8c8c;
font-size: 12px;
}
.el-divider {
margin: 50px 0;
}
</style>

View File

@ -0,0 +1,119 @@
<template>
<el-dialog v-model="props.modelValue" title="选择店铺" width="900px" @closed="closeDialog" @open="openDialog">
<el-form inline :model="queryParams">
<el-form-item label="店铺名称">
<el-input v-model='queryParams.shopName' placeholder='请输入店铺名称'></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
搜索
</el-button>
</el-form-item>
</el-form>
<!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="shopsList" ref="tableRef" border highlight-current-row
@row-click="handleRowClick">
<el-table-column prop="shopName" label="店铺名称" align="left" :show-overflow-tooltip="true" />
</el-table>
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="getShopListFun" />
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleEditClick()">添加</el-button>
<el-button @click="handleResetClick()">重置</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus'
import { shopList } from '@/api/business/ShopManager/Shops/shop.js'
//
const total = ref(0)
const loading = ref(false)
//
const tableRef = ref(null);
//
const queryParams = reactive({
shopName: "",
pageNum: 1,
pageSize: 10
});
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const formData = ref({
...props.data
});
let shopsList = ref([]);
//
const openDialog = async () => {
await getShopListFun()
}
const getShopListFun = async () => {
loading.value = true
await shopList(queryParams).then((res) => {
if (res.code == 200) {
shopsList.value = res.data.result
total.value = res.totalNum
loading.value = false
}
})
}
watch(props, (v) => {
formData.value = v.data;
});
// -
let shopName = ref("");
let shopGuid = ref("");
// -
//
const handleRowClick = (row) => {
shopName.value = row.shopName
shopGuid.value = row.shopGuid
}
const closeDialog = () => {
shopName.value = ""
emits('update:modelValue', false);
};
//
const handleEditClick = async () => {
if (shopName.value !== "") {
formData.value.shopName = shopName.value
formData.value.shopGuid = shopGuid.value
if (formData.value.shopName != null) {
props.done();
closeDialog();
}
} else {
ElMessage.error("请选择店铺")
return;
}
};
const handleResetClick = async formEl => {
};
</script>

View File

@ -0,0 +1,304 @@
<!--
* @Descripttion: (商品/tb_goods 详情弹窗)
* @version: (1.0)
* @Author: (黎文豪)
* @Date: (2023-06-19)
* @LastEditors: (黎文豪)
* @LastEditTime: (2023-06-19)
-->
<template>
<el-dialog v-model="props.modelValue" title="商品信息详情" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :disabled="true">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="店铺guid" >
<el-input v-model="formData.shopGuid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="商品类目guid" >
<el-input v-model="formData.goodsCategoryGuid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="商品规格guid" >
<el-input v-model="formData.goodsSkuGuid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="配送模板guid" >
<el-input v-model="formData.deliveryGuid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="名称" >
<el-input v-model="formData.goodsName" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="编码" >
<el-input v-model="formData.goodsCoding" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="主图视频" >
<UploadFile v-model="formData.goodsMainImageVideo" :data=imgData :isShowTip="false"/>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="视频封面" >
<UploadImage ref="uploadRef" v-model="formData.goodsVideoCover" :limit="1" :fileSize="5"
:drag="true" :isShowTip="false" :isDisabled="true"/>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="图片" >
<UploadImage ref="uploadRef" v-model="formData.goodsPicture" :limit="1" :fileSize="5"
:drag="true" :isShowTip="false" :isDisabled="true"/>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="价格(最低)" >
<el-input-number v-model.number="formData.goodsPriceLowest" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="价格(最高)" >
<el-input-number v-model.number="formData.goodsPriceHighest" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="划线价格(最低)" >
<el-input-number v-model.number="formData.goodsDashedPriceLowest" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="库存总量" >
<el-input-number v-model.number="formData.goodsTotalInventory" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="初始销量" >
<el-input-number v-model.number="formData.goodsSalesInitial" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="实际销量" >
<el-input-number v-model.number="formData.goodsSalesActual" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="详情" >
<editor v-model="formData.goodsDetails" :editorConfig="{ readOnly: true }" :min-height="200" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="库存计算方式(1下单立减库存 2付款立减库存)" >
<el-radio-group v-model="formData.goodsDeductStockType">
<el-radio v-for="item in deduct_stock_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="是否赠送积分(1开启 0关闭)" >
<el-radio-group v-model="formData.goodsIsPointsGift">
<el-radio v-for="item in is_points_gift " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="是否允许使用积分抵扣(1允许 0不允许)" >
<el-radio-group v-model="formData.goodsIsPointsDiscount">
<el-radio v-for="item in is_points_discount " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="积分抵扣设置(0默认抵扣 1单独设置抵扣)" >
<el-radio-group v-model="formData.goodsIsAlonePointsDiscount">
<el-radio v-for="item in is_alone_points_discount " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="单独设置积分抵扣的配置" >
<el-input v-model="formData.goodsPointsDiscountConfig" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="是否开启会员折扣(1开启 0关闭)" >
<el-radio-group v-model="formData.goodsIsEnableGrade">
<el-radio v-for="item in is_enable_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="会员折扣设置(0默认等级折扣 1单独设置折扣)" >
<el-radio-group v-model="formData.goodsIsAloneGrade">
<el-radio v-for="item in is_alone_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="单独设置折扣的配置" >
<el-input v-model="formData.goodsAloneGradeEquity" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="上下架状态(1上架 2下架)" >
<el-radio-group v-model="formData.goodsShelfStatus">
<el-radio v-for="item in shelf_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" >
<el-input-number v-model.number="formData.goodsSort" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from "vue";
//
const openDialog = async () => {
await getdeduct_stock_type()
await getis_points_gift()
await getis_points_discount()
await getis_alone_points_discount()
await getis_enable_grade()
await getis_alone_grade()
await getshelf_status()
}
const formData = ref({
...props.data,
});
watch(props, async (v) => {
formData.value = v.data;
});
// -
// (1 2)
const deduct_stock_type = ref([]);
// (1 0)
const is_points_gift = ref([]);
// 使(1 0)
const is_points_discount = ref([]);
// (0 1)
const is_alone_points_discount = ref([]);
// (1 0)
const is_enable_grade = ref([]);
// (0 1)
const is_alone_grade = ref([]);
// (1 2)
const shelf_status = ref([]);
// -
//
async function getdeduct_stock_type() {
await proxy.getDicts('deduct_stock_type').then((res) => {
deduct_stock_type.value = res.data
})
}
//
async function getis_points_gift() {
await proxy.getDicts('is_points_gift').then((res) => {
is_points_gift.value = res.data
})
}
//
async function getis_points_discount() {
await proxy.getDicts('is_points_discount').then((res) => {
is_points_discount.value = res.data
})
}
//
async function getis_alone_points_discount() {
await proxy.getDicts('is_alone_points_discount').then((res) => {
is_alone_points_discount.value = res.data
})
}
//
async function getis_enable_grade() {
await proxy.getDicts('is_enable_grade').then((res) => {
is_enable_grade.value = res.data
})
}
//
async function getis_alone_grade() {
await proxy.getDicts('is_alone_grade').then((res) => {
is_alone_grade.value = res.data
})
}
//
async function getshelf_status() {
await proxy.getDicts('shelf_status').then((res) => {
shelf_status.value = res.data
})
}
//
const formRef = ref();
const labelWidth = 100;
const { proxy } = getCurrentInstance()
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
// -
const closeDialog = () => {
emits("update:modelValue", false);
};
</script>

View File

@ -0,0 +1,365 @@
<!--
* @Descripttion: (商品/tb_goods 编辑弹窗)
* @version: (1.0)
* @Author: (黎文豪)
* @Date: (2023-06-19)
* @LastEditors: (黎文豪)
* @LastEditTime: (2023-06-19)
-->
<template>
<el-dialog v-model="props.modelValue" title="修改商品信息" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="店铺guid" prop="shopGuid">
<el-input v-model="formData.shopGuid" placeholder="请输入店铺guid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="商品类目guid" prop="goodsCategoryGuid">
<el-input v-model="formData.goodsCategoryGuid" placeholder="请输入商品类目guid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="商品规格guid" prop="goodsSkuGuid">
<el-input v-model="formData.goodsSkuGuid" placeholder="请输入商品规格guid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="配送模板guid" prop="deliveryGuid">
<el-input v-model="formData.deliveryGuid" placeholder="请输入配送模板guid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="名称" prop="goodsName">
<el-input v-model="formData.goodsName" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="编码" prop="goodsCoding">
<el-input v-model="formData.goodsCoding" placeholder="请输入编码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="主图视频" prop="goodsMainImageVideo">
<UploadFile v-model="formData.goodsMainImageVideo" :data=imgData />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="视频封面" prop="goodsVideoCover">
<UploadImage ref="uploadRef" v-model="formData.goodsVideoCover" :data=imgData :limit="1" :fileSize="5"
:drag="true" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="图片" prop="goodsPicture">
<UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="1" :fileSize="5"
:drag="true" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="价格(最低)" prop="goodsPriceLowest">
<el-input-number v-model.number="formData.goodsPriceLowest" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="价格(最高)" prop="goodsPriceHighest">
<el-input-number v-model.number="formData.goodsPriceHighest" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="划线价格(最低)" prop="goodsDashedPriceLowest">
<el-input-number v-model.number="formData.goodsDashedPriceLowest" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="库存总量" prop="goodsTotalInventory">
<el-input-number v-model.number="formData.goodsTotalInventory" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="初始销量" prop="goodsSalesInitial">
<el-input-number v-model.number="formData.goodsSalesInitial" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="实际销量" prop="goodsSalesActual">
<el-input-number v-model.number="formData.goodsSalesActual" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails">
<editor v-model="formData.goodsDetails" :min-height="200" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="库存计算方式(1下单立减库存 2付款立减库存)" prop="goodsDeductStockType">
<el-radio-group v-model="formData.goodsDeductStockType">
<el-radio v-for="item in deduct_stock_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="是否赠送积分(1开启 0关闭)" prop="goodsIsPointsGift">
<el-radio-group v-model="formData.goodsIsPointsGift">
<el-radio v-for="item in is_points_gift " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="是否允许使用积分抵扣(1允许 0不允许)" prop="goodsIsPointsDiscount">
<el-radio-group v-model="formData.goodsIsPointsDiscount">
<el-radio v-for="item in is_points_discount " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="积分抵扣设置(0默认抵扣 1单独设置抵扣)" prop="goodsIsAlonePointsDiscount">
<el-radio-group v-model="formData.goodsIsAlonePointsDiscount">
<el-radio v-for="item in is_alone_points_discount " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="单独设置积分抵扣的配置" prop="goodsPointsDiscountConfig">
<el-input v-model="formData.goodsPointsDiscountConfig" placeholder="请输入单独设置积分抵扣的配置" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="是否开启会员折扣(1开启 0关闭)" prop="goodsIsEnableGrade">
<el-radio-group v-model="formData.goodsIsEnableGrade">
<el-radio v-for="item in is_enable_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="会员折扣设置(0默认等级折扣 1单独设置折扣)" prop="goodsIsAloneGrade">
<el-radio-group v-model="formData.goodsIsAloneGrade">
<el-radio v-for="item in is_alone_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="单独设置折扣的配置" prop="goodsAloneGradeEquity">
<el-input v-model="formData.goodsAloneGradeEquity" placeholder="请输入单独设置折扣的配置" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="上下架状态(1上架 2下架)" prop="goodsShelfStatus">
<el-radio-group v-model="formData.goodsShelfStatus">
<el-radio v-for="item in shelf_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="goodsSort">
<el-input-number v-model.number="formData.goodsSort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleEditClick(formRef)">编辑</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import modal from '@/plugins/modal.js'
import { reactive, ref, watch } from "vue";
import { addOrUpdateGoods } from "@/api/business/GoodsManager/Goodss/goods.js";
//
const openDialog = async () => {
await getdeduct_stock_type()
await getis_points_gift()
await getis_points_discount()
await getis_alone_points_discount()
await getis_enable_grade()
await getis_alone_grade()
await getshelf_status()
}
const formData = ref({
...props.data,
});
watch(props, async (v) => {
formData.value = v.data;
});
//
// (1 2)
const deduct_stock_type = ref([]);
// (1 0)
const is_points_gift = ref([]);
// 使(1 0)
const is_points_discount = ref([]);
// (0 1)
const is_alone_points_discount = ref([]);
// (1 0)
const is_enable_grade = ref([]);
// (0 1)
const is_alone_grade = ref([]);
// (1 2)
const shelf_status = ref([]);
// -
//
async function getdeduct_stock_type() {
await proxy.getDicts('deduct_stock_type').then((res) => {
deduct_stock_type.value = res.data
})
}
//
async function getis_points_gift() {
await proxy.getDicts('is_points_gift').then((res) => {
is_points_gift.value = res.data
})
}
//
async function getis_points_discount() {
await proxy.getDicts('is_points_discount').then((res) => {
is_points_discount.value = res.data
})
}
//
async function getis_alone_points_discount() {
await proxy.getDicts('is_alone_points_discount').then((res) => {
is_alone_points_discount.value = res.data
})
}
//
async function getis_enable_grade() {
await proxy.getDicts('is_enable_grade').then((res) => {
is_enable_grade.value = res.data
})
}
//
async function getis_alone_grade() {
await proxy.getDicts('is_alone_grade').then((res) => {
is_alone_grade.value = res.data
})
}
//
async function getshelf_status() {
await proxy.getDicts('shelf_status').then((res) => {
shelf_status.value = res.data
})
}
// -
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const labelWidth = 100;
const formRef = ref();
const { proxy } = getCurrentInstance()
const emits = defineEmits(["update:modelValue"]);
const imgData = ref({
fileDir: "Goods"
})
//
const rules = reactive({
goodsGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
shopGuid: [{ required: true, message: "店铺guid不能为空", trigger: "blur", type: "number" }],
goodsCategoryGuid: [{ required: true, message: "商品类目guid不能为空", trigger: "blur", type: "number" }],
goodsSkuGuid: [{ required: true, message: "商品规格guid不能为空", trigger: "blur", type: "number" }],
deliveryGuid: [{ required: true, message: "配送模板guid不能为空", trigger: "blur", type: "number" }],
goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
goodsCoding: [{ required: true, message: "编码不能为空", trigger: "blur" }],
goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
goodsPriceLowest: [{ required: true, message: "价格(最低)不能为空", trigger: "blur" }],
goodsPriceHighest: [{ required: true, message: "价格(最高)不能为空", trigger: "blur" }],
goodsDashedPriceLowest: [{ required: true, message: "划线价格(最低)不能为空", trigger: "blur" }],
goodsTotalInventory: [{ required: true, message: "库存总量不能为空", trigger: "blur", type: "number" }],
goodsSalesInitial: [{ required: true, message: "初始销量不能为空", trigger: "blur", type: "number" }],
goodsSalesActual: [{ required: true, message: "实际销量不能为空", trigger: "blur", type: "number" }],
goodsDetails: [{ required: true, message: "详情不能为空", trigger: "blur" }],
goodsDeductStockType: [{ required: true, message: "库存计算方式(1下单立减库存 2付款立减库存)不能为空", trigger: "blur", type: "number" }],
goodsIsPointsGift: [{ required: true, message: "是否赠送积分(1开启 0关闭)不能为空", trigger: "blur", type: "number" }],
goodsIsPointsDiscount: [{ required: true, message: "是否允许使用积分抵扣(1允许 0不允许)不能为空", trigger: "blur", type: "number" }],
goodsIsAlonePointsDiscount: [{ required: true, message: "积分抵扣设置(0默认抵扣 1单独设置抵扣)不能为空", trigger: "blur", type: "number" }],
goodsIsEnableGrade: [{ required: true, message: "是否开启会员折扣(1开启 0关闭)不能为空", trigger: "blur", type: "number" }],
goodsIsAloneGrade: [{ required: true, message: "会员折扣设置(0默认等级折扣 1单独设置折扣)不能为空", trigger: "blur", type: "number" }],
goodsShelfStatus: [{ required: true, message: "上下架状态(1上架 2下架)不能为空", trigger: "blur", type: "number" }],
goodsSort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
});
// -
//
const handleEditClick = async (formEl) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) {
return;
}
const { code } = await addOrUpdateGoods(formData.value);
if (code == 200) {
modal.msgSuccess('修改成功')
closeDialog();
}
});
}
const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
}
const closeDialog = () => {
props.done();
emits("update:modelValue", false);
};
</script>

View File

@ -0,0 +1,124 @@
<!--
* @Descripttion: (商品/tb_goods导入弹窗)
* @version: (1.0)
* @Author: (黎文豪)
* @Date: (2023-06-19)
* @LastEditors: (黎文豪)
* @LastEditTime: (2023-06-19)
-->
<template>
<el-dialog title="导入" v-model="props.modelValue" width="400px" @closed="closeDialog">
<el-upload
name="file"
ref="uploadRef"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag>
<el-icon class="el-icon--upload">
<upload-filled />
</el-icon>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的商品
</div>
<span>仅允许导入xlsxlsx格式文件</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
</div>
</template>
</el-upload>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="submitFileForm">提交</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
import { getToken } from '@/utils/auth'
//
const formRef = ref();
const labelWidth = 100;
const { proxy } = getCurrentInstance()
let loadingInstance;
let uploadRef = ref()
/*** 导入参数 */
const upload = reactive({
//
isUploading: false,
//
updateSupport: false,
//
headers: { Authorization: 'Bearer ' + getToken() },
//
url: import.meta.env.VITE_APP_BASE_API + '/business/goods/importData',
})
//
function loading(content) {
loadingInstance = ElLoading.service({
lock: true,
text: content,
background: "rgba(0, 0, 0, 0.7)",
})
}
//
function closeLoading() {
loadingInstance.close();
}
// -
/** 下载模板操作 */
function importTemplate() {
proxy.download('/business/goods/importTemplate', '商品数据导入模板')
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
upload.isUploading = true
loading('正在导入数据,请稍候...')
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
closeLoading();
closeDialog()
upload.isUploading = false
uploadRef.value.clearFiles()
ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + '</div>', '导入结果', {
dangerouslyUseHTMLString: true,
})
props.done()
}
/** 提交上传文件 */
function submitFileForm() {
uploadRef.value.submit()
}
// -
const emits = defineEmits(["update:modelValue"]);
const dialogVisible = ref(props.modelValue);
const formData = reactive({});
const props = defineProps({
modelValue: Boolean,
done: Function,
});
// -
const closeDialog = () => {
dialogVisible.value = false;
emits("update:modelValue", false);
};
</script>

View File

@ -0,0 +1,361 @@
<!--
* @Descripttion: (商品/tb_goods)
* @version: (1.0)
* @Author: (黎文豪)
* @Date: (2023-06-19)
* @LastEditors: (黎文豪)
* @LastEditTime: (2023-06-19)
-->
<template>
<div class="app-container">
<el-row :gutter="24">
<!-- 搜索框 queryParams.需要搜索的字段 -->
<el-form :model="queryParams" label-position="left" style="margin:15px;" inline ref="queryForm" v-show="showSearch"
@submit.prevent>
<el-form-item label="店铺guid" prop="shopGuid">
<el-input v-model.number="queryParams.shopGuid" placeholder="请输入店铺guid" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="商品类目guid" prop="goodsCategoryGuid">
<el-input v-model.number="queryParams.goodsCategoryGuid" placeholder="请输入商品类目guid" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="名称" prop="goodsName">
<el-input v-model="queryParams.goodsName" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="编码" prop="goodsCoding">
<el-input v-model="queryParams.goodsCoding" placeholder="请输入编码" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<!-- 工具按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:goods:addOrUpdate']" plain icon="plus"
@click="AddDialogVisible = true">
{{ $t('btn.add') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" :disabled="multiple" v-hasPermi="['business:goods:delete']" plain icon="delete"
@click="handleDelete">
{{ $t('btn.delete') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="Upload" @click="UploadDialogVisible = true"
v-hasPermi="['business:goods:import']">导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['business:goods:export']">
{{ $t('btn.export') }}
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="goodsName" label="名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsCoding" label="编码" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsMainImageVideo" label="主图视频" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsVideoCover" label="视频封面" align="center">
<template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsVideoCover?.split(',')[0]" :preview-src-list="scope.row.goodsVideoCover?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="goodsPicture" label="图片" align="center">
<template #default="scope">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsPicture?.split(',')[0]" :preview-src-list="scope.row.goodsPicture?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="goodsPriceLowest" label="价格(最低)" align="center" />
<el-table-column prop="goodsPriceHighest" label="价格(最高)" align="center" />
<el-table-column prop="goodsDashedPriceLowest" label="划线价格(最低)" align="center" />
<el-table-column prop="goodsTotalInventory" label="库存总量" align="center" />
<el-table-column prop="goodsSalesInitial" label="初始销量" align="center" />
<el-table-column prop="goodsSalesActual" label="实际销量" align="center" />
<el-table-column prop="goodsDetails" label="详情" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsDeductStockType" label="库存计算方式(1下单立减库存 2付款立减库存)" align="center">
<template #default="scope">
<dict-tag :options="deduct_stock_type" :value="scope.row.goodsDeductStockType" />
</template>
</el-table-column>
<el-table-column prop="goodsIsPointsGift" label="是否赠送积分(1开启 0关闭)" align="center">
<template #default="scope">
<dict-tag :options="is_points_gift" :value="scope.row.goodsIsPointsGift" />
</template>
</el-table-column>
<el-table-column prop="goodsIsPointsDiscount" label="是否允许使用积分抵扣(1允许 0不允许)" align="center">
<template #default="scope">
<dict-tag :options="is_points_discount" :value="scope.row.goodsIsPointsDiscount" />
</template>
</el-table-column>
<el-table-column prop="goodsIsAlonePointsDiscount" label="积分抵扣设置(0默认抵扣 1单独设置抵扣)" align="center">
<template #default="scope">
<dict-tag :options="is_alone_points_discount" :value="scope.row.goodsIsAlonePointsDiscount" />
</template>
</el-table-column>
<el-table-column prop="goodsPointsDiscountConfig" label="单独设置积分抵扣的配置" align="center"
:show-overflow-tooltip="true" />
<el-table-column prop="goodsIsEnableGrade" label="是否开启会员折扣(1开启 0关闭)" align="center">
<template #default="scope">
<dict-tag :options="is_enable_grade" :value="scope.row.goodsIsEnableGrade" />
</template>
</el-table-column>
<el-table-column prop="goodsIsAloneGrade" label="会员折扣设置(0默认等级折扣 1单独设置折扣)" align="center">
<template #default="scope">
<dict-tag :options="is_alone_grade" :value="scope.row.goodsIsAloneGrade" />
</template>
</el-table-column>
<el-table-column prop="goodsAloneGradeEquity" label="单独设置折扣的配置" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsShelfStatus" label="上下架状态(1上架 2下架)" align="center">
<template #default="scope">
<dict-tag :options="shelf_status" :value="scope.row.goodsShelfStatus" />
</template>
</el-table-column>
<el-table-column prop="goodsSort" label="排序" align="center" />
<el-table-column label="操作" width="350" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
v-hasPermi="['business:goods:addOrUpdate']">编辑</el-button>
<el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)"
v-hasPermi="['business:goods:delete']">删除</el-button>
<el-button size="small" icon="view" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</div>
<!-- 添加 -->
<AddDialog v-model="AddDialogVisible" :done="() => resetQuery()"></AddDialog>
<!-- 编辑 -->
<EditDialog v-model="EditDialogVisible" :data="EditDialogRow" :done="() => resetQuery()"></EditDialog>
<!-- 详情 -->
<DetailDialog v-model="DetailDialogVisible" :data="DetailDialogRow" :done="() => resetQuery()"></DetailDialog>
<!-- 导入 -->
<UploadDialog v-model="UploadDialogVisible" :done="() => resetQuery()"></UploadDialog>
</template>
<script setup name="goods">
import { ElMessageBox } from 'element-plus'
import modal from '@/plugins/modal.js'
import { exportGoods, goodsList, delGoods } from '@/api/business/GoodsManager/Goodss/goods.js'
import AddDialog from "./components/AddDialog.vue";
import EditDialog from "./components/EditDialog.vue";
import DetailDialog from "./components/DetailDialog.vue";
import UploadDialog from "./components/UploadDialog.vue";
const AddDialogVisible = ref(false);
const EditDialogVisible = ref(false);
const EditDialogRow = ref({});
const DetailDialogVisible = ref(false);
const DetailDialogRow = ref({});
const UploadDialogVisible = ref(false);
const { proxy } = getCurrentInstance()
// categoryId
const ids = ref([])
//
const single = ref(true)
//
const multiple = ref(true)
//
const showSearch = ref(true)
//
const dataList = ref([])
//
const total = ref(0)
//
const loading = ref(true)
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10
},
})
const { queryParams } = toRefs(data)
//
//
//
const deduct_stock_type = ref([]);
async function getdeduct_stock_type() {
await proxy.getDicts('deduct_stock_type').then((res) => {
deduct_stock_type.value = res.data
})
}
getdeduct_stock_type()
//
const is_points_gift = ref([]);
async function getis_points_gift() {
await proxy.getDicts('is_points_gift').then((res) => {
is_points_gift.value = res.data
})
}
getis_points_gift()
//
const is_points_discount = ref([]);
async function getis_points_discount() {
await proxy.getDicts('is_points_discount').then((res) => {
is_points_discount.value = res.data
})
}
getis_points_discount()
//
const is_alone_points_discount = ref([]);
async function getis_alone_points_discount() {
await proxy.getDicts('is_alone_points_discount').then((res) => {
is_alone_points_discount.value = res.data
})
}
getis_alone_points_discount()
//
const is_enable_grade = ref([]);
async function getis_enable_grade() {
await proxy.getDicts('is_enable_grade').then((res) => {
is_enable_grade.value = res.data
})
}
getis_enable_grade()
//
const is_alone_grade = ref([]);
async function getis_alone_grade() {
await proxy.getDicts('is_alone_grade').then((res) => {
is_alone_grade.value = res.data
})
}
getis_alone_grade()
//
const shelf_status = ref([]);
async function getshelf_status() {
await proxy.getDicts('shelf_status').then((res) => {
shelf_status.value = res.data
})
}
getshelf_status()
//
//
function getList() {
loading.value = true
goodsList(queryParams.value).then((res) => {
if (res.code == 200) {
loading.value = false;
dataList.value = res.data.result;
total.value = res.data.totalNum;
}
});
}
//
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.goodsId)
single.value = selection.length != 1
multiple.value = !selection.length
}
/** 重置查询操作 */
function resetQuery() {
proxy.resetForm('queryForm')
handleQuery()
}
/** 搜索按钮操作 */
function handleQuery() {
getList()
}
/** 删除按钮操作 */
function handleDelete(row) {
const Ids = row.goodsId || ids.value
ElMessageBox.confirm("是否确认删除?", "系统提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
})
.then(function () {
return delGoods(Ids)
})
.then(() => {
handleQuery()
modal.msgSuccess("删除成功")
})
.catch(() => { })
}
/** 导出按钮操作 */
function handleExport(row) {
const Ids = row.goodsId || ids.value
const name = ref("所有")
if (Ids.length != 0) {
let str = ''
for (const key in Ids) {
str += Ids[key] + ','
}
str = str.slice(0, str.length - 1)
queryParams.value.ids = str
name.value = "选中"
}
ElMessageBox.confirm('是否确认导出' + name.value + '数据?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(function () {
return exportGoods(queryParams.value)
})
.then((response) => {
proxy.download(response.data.path)
})
}
//
function handleUpdate(row) {
EditDialogVisible.value = true
EditDialogRow.value = row
}
//
function handleDetail(row) {
DetailDialogVisible.value = true
DetailDialogRow.value = row
}
handleQuery()
</script>

View File

@ -36,6 +36,7 @@
</el-cascader> </el-cascader>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>