zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加多个图片上传组件

Browse Source
This commit is contained in:
ctw committed 2024-12-24 17:03:23 +08:00
1 parent 56673efb64
commit 1c32f3a632
7 files changed
+484 -195
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env
+1 -1
View File
@@ -14,7 +14,7 @@ VITE_PUBLIC_PATH = /
VITE_API_URL = /api VITE_API_URL = /api
# ADMIN 服务地址 # ADMIN 服务地址
VITE_ADMIN_PROXY_PATH = http://localhost:9999 VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
# 前端加密密钥 # 前端加密密钥
VITE_PWD_ENC_KEY='pigxpigxpigxpigx' VITE_PWD_ENC_KEY='pigxpigxpigxpigx'
.env.development
+1 -1
View File
@@ -8,7 +8,7 @@ VITE_OPEN = true
ENV = 'development' ENV = 'development'
# ADMIN 服务地址 # ADMIN 服务地址
VITE_ADMIN_PROXY_PATH = http://localhost:9999 VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
# 代码生成服务地址 # 代码生成服务地址
VITE_GEN_PROXY_PATH = http://localhost:5003 VITE_GEN_PROXY_PATH = http://localhost:5003
src/components/Upload/Image.vue
+4 -4
View File
@@ -71,8 +71,8 @@ interface UploadFileProps {
width?: string; // 组件宽度 ==> 非必传（默认为 150px） width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px） borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
iconSize?: number; iconSize?: number;
dir?: string; // 文件目录 dir?: string; // 文件目录
listType:string; listType: string;
} }
// 接受父组件参数 // 接受父组件参数
@@ -86,8 +86,8 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
height: '150px', height: '150px',
width: '150px', width: '150px',
borderRadius: '8px', borderRadius: '8px',
dir: '', dir: '',
listType:'' listType: '',
}); });
// 生成组件唯一id // 生成组件唯一id
src/components/Upload/Images.vue
+296
View File
@@ -0,0 +1,296 @@
<template>
<div class="upload-box">
<el-upload
ref="elUploadRef"
list-type="picture-card"
:class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="uploadSuccess"
:before-upload="beforeUpload"
:on-error="uploadError"
:http-request="handleHttpUpload"
multiple
:drag="drag"
:disabled="self_disabled"
:accept="fileType.join(',')"
>
<div class="upload-empty">
<slot name="empty">
<el-icon><Plus /></el-icon>
<!-- <span>请上传图片</span> -->
</slot>
</div>
</el-upload>
<div class="el-upload__tip">
<slot name="tip"></slot>
</div>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElUpload, ElDialog, UploadRequestOptions, ElNotification, UploadFile, UploadProps, formContextKey } from 'element-plus';
import request from '/@/utils/request';
interface UploadFileProps {
imageUrls?: string; // 图片地址 ==> 必传
uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
fileType?: string[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height?: string; // 组件高度 ==> 非必传（默认为 150px）
width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
}
const props = withDefaults(defineProps<UploadFileProps>(), {
imageUrls: '',
uploadFileUrl: '/admin/sys-file/upload',
drag: true,
disabled: false,
fileSize: 5,
fileType: () => ['image/jpeg', 'image/png', 'image/gif'],
height: '150px',
width: '150px',
borderRadius: '8px',
});
interface UploadEmits {
(e: 'update:imageUrls', value: string): void;
}
const emit = defineEmits<UploadEmits>();
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const elUploadRef = ref();
// 获取 el-form 组件上下文
const formContext = inject(formContextKey, void 0);
// 上传
const handleHttpUpload = async (options: UploadRequestOptions) => {
let formData = new FormData();
formData.append('file', options.file);
try {
const res = await request({
url: props.uploadFileUrl,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
data: formData,
});
if (res.code == 0) {
return res;
}
} catch (error) {
options.onError(error as any);
}
};
// 移除
const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
const urls = uploadFiles.map((item) => item.response.data.url).join(',');
emit('update:imageUrls', urls);
};
// 预览
const handlePictureCardPreview = (uploadFile: any) => {
dialogImageUrl.value = 'http://123.156.230.15:8089/api' + uploadFile.response.data.url;
dialogVisible.value = true;
};
// 判断是否禁用上传和删除
const self_disabled = computed(() => {
return props.disabled || formContext?.disabled;
});
watch(
() => props.imageUrls,
(newValue) => {
console.log(newValue);
if (!newValue) elUploadRef.value.clearFiles();
}
);
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
if (!imgType)
ElNotification({
title: '温馨提示',
message: '上传图片不符合所需的格式！',
type: 'warning',
});
if (!imgSize)
setTimeout(() => {
ElNotification({
title: '温馨提示',
message: `上传图片大小不能超过 ${props.fileSize}M！`,
type: 'warning',
});
}, 0);
return imgType && imgSize;
};
/**
* @description 图片上传成功
* */
const uploadSuccess = (response: any, uploadFile: UploadFile, uploadFiles: any) => {
const urls = uploadFiles.map((item: any) => item.response.data.url).join(',');
emit('update:imageUrls', urls);
ElNotification({
title: '温馨提示',
message: '图片上传成功！',
type: 'success',
});
};
/**
* @description 图片上传错误
* */
const uploadError = () => {
ElNotification({
title: '温馨提示',
message: '图片上传失败，请您重新上传！',
type: 'error',
});
};
</script>
<style scoped lang="scss">
.is-error {
.upload {
:deep(.el-upload),
:deep(.el-upload-dragger) {
border: 1px dashed var(--el-color-danger) !important;
&:hover {
border-color: var(--el-color-primary) !important;
}
}
}
}
:deep(.disabled) {
.el-upload,
.el-upload-dragger {
cursor: not-allowed !important;
background: var(--el-disabled-bg-color);
border: 1px dashed var(--el-border-color-darker) !important;
&:hover {
border: 1px dashed var(--el-border-color-darker) !important;
}
}
}
.upload-box {
overflow: hidden;
.no-border {
:deep(.el-upload) {
border: none !important;
}
}
:deep(.upload) {
.el-upload {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: v-bind(width);
height: v-bind(height);
overflow: hidden;
border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius);
transition: var(--el-transition-duration-fast);
&:hover {
border-color: var(--el-color-primary);
.upload-handle {
opacity: 1;
}
}
.el-upload-dragger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
background-color: transparent;
border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius);
&:hover {
border: 1px dashed var(--el-color-primary);
}
}
.el-upload-dragger.is-dragover {
background-color: var(--el-color-primary-light-9);
border: 2px dashed var(--el-color-primary) !important;
}
.upload-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.upload-empty {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 30px;
color: var(--el-color-info);
.el-icon {
font-size: 28px;
color: var(--el-text-color-secondary);
}
}
.upload-handle {
position: absolute;
top: 0;
right: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: pointer;
background: rgb(0 0 0 / 60%);
opacity: 0;
transition: var(--el-transition-duration-fast);
.handle-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 6%;
color: aliceblue;
.el-icon {
margin-bottom: 40%;
font-size: 130%;
line-height: 130%;
}
span {
font-size: 85%;
line-height: 85%;
}
}
}
}
}
.el-upload__tip {
line-height: 18px;
text-align: center;
}
}
</style>
src/components/index.ts
+33 -32
View File
@@ -4,6 +4,7 @@ import DictTag from '/@/components/DictTag/index.vue';
import UploadExcel from '/@/components/Upload/Excel.vue'; import UploadExcel from '/@/components/Upload/Excel.vue';
import UploadFile from '/@/components/Upload/index.vue'; import UploadFile from '/@/components/Upload/index.vue';
import UploadImg from '/@/components/Upload/Image.vue'; import UploadImg from '/@/components/Upload/Image.vue';
import UploadImgs from '/@/components/Upload/Images.vue';
import DelWrap from '/@/components/DelWrap/index.vue'; import DelWrap from '/@/components/DelWrap/index.vue';
import Editor from '/@/components/Editor/index.vue'; import Editor from '/@/components/Editor/index.vue';
import Tip from '/@/components/Tip/index.vue'; import Tip from '/@/components/Tip/index.vue';
@@ -12,12 +13,12 @@ import SvgIcon from '/@/components/SvgIcon/index.vue';
// 第三方组件 // 第三方组件
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue' import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import 'element-plus/dist/index.css'; import 'element-plus/dist/index.css';
import {Pane, Splitpanes} from 'splitpanes'; import { Pane, Splitpanes } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css'; import 'splitpanes/dist/splitpanes.css';
// 日历组件 // 日历组件
import {setupCalendar} from 'v-calendar'; import { setupCalendar } from 'v-calendar';
// @ts-ignore 引入VForm3库 // @ts-ignore 引入VForm3库
import VForm3 from 'form-designer-plus'; // import VForm3 from 'form-designer-plus'; //
import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式 import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式
@@ -25,36 +26,36 @@ import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式
import vue3TreeOrg from 'vue3-tree-org'; import vue3TreeOrg from 'vue3-tree-org';
import 'vue3-tree-org/lib/vue3-tree-org.css'; import 'vue3-tree-org/lib/vue3-tree-org.css';
// 导入声明 // 导入声明
import {App} from "vue"; import { App } from 'vue';
export default { export default {
install(app: App) { install(app: App) {
app.component('DictTag', DictTag); app.component('DictTag', DictTag);
app.component('Pagination', Pagination); app.component('Pagination', Pagination);
app.component('RightToolbar', RightToolbar); app.component('RightToolbar', RightToolbar);
app.component('uploadExcel', UploadExcel); app.component('uploadExcel', UploadExcel);
app.component('UploadFile', UploadFile); app.component('UploadFile', UploadFile);
app.component('UploadImg', UploadImg); app.component('UploadImg', UploadImg);
app.component('Editor', Editor); app.component('UploadImgs', UploadImgs);
app.component('Tip', Tip); app.component('Editor', Editor);
app.component('DelWrap', DelWrap); app.component('Tip', Tip);
app.component('TagList', TagList); app.component('DelWrap', DelWrap);
app.component('SvgIcon', SvgIcon); app.component('TagList', TagList);
app.component('SvgIcon', SvgIcon);
// 导入全部的elmenet-plus的图标 // 导入全部的elmenet-plus的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component);
// 兼容性 // 兼容性
app.component(`ele-${key}`, component) app.component(`ele-${key}`, component);
} }
// 导入布局插件 // 导入布局插件
app.component('Splitpanes', Splitpanes); app.component('Splitpanes', Splitpanes);
app.component('Pane', Pane); app.component('Pane', Pane);
app.use(ElementPlus) // ELEMENT 组件 app.use(ElementPlus); // ELEMENT 组件
app.use(setupCalendar, {}) // 日历组件 app.use(setupCalendar, {}); // 日历组件
app.use(VForm3) // 表单设计 app.use(VForm3); // 表单设计
app.use(vue3TreeOrg) // 组织架构组件 app.use(vue3TreeOrg); // 组织架构组件
} },
} };
src/views/canteen/canteenSpu/form.vue
+148 -156
View File
@@ -1,184 +1,176 @@
<template> <template>
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
:close-on-click-modal="false" draggable> <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading"> <el-row :gutter="24">
<el-row :gutter="24"> <el-col :span="12" class="mb20">
<el-col :span="12" class="mb20"> <el-form-item label="商品名称" prop="name">
<el-form-item label="商品名称" prop="name"> <el-input v-model="form.name" placeholder="请输入商品名称" />
<el-input v-model="form.name" placeholder="请输入商品名称"/> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8" class="mb20">
<el-col :span="8" class="mb20"> <el-form-item label="商品分类" prop="categoryId">
<el-form-item label="商品分类" prop="categoryId"> <el-select v-model="form.categoryId" placeholder="请选择商品分类">
<el-select v-model="form.categoryId" placeholder="请选择商品分类"> <el-option placeholder="请选择商品分类" v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
<el-option <!-- <el-option v-for="categoryList" :key="item.value" :label="item.label"-->
placeholder="请选择商品分类" <!-- :value="item.value"></el-option>-->
v-for="item in categoryList" </el-select>
:key="item.id" </el-form-item>
:label="item.name" </el-col>
:value="item.id"> <el-col :span="24" class="mb20">
</el-option> <el-form-item label="商品封面图" prop="picUrl">
<!-- <el-option v-for="categoryList" :key="item.value" :label="item.label"--> <upload-img v-model:imageUrl="form.picUrl"></upload-img>
<!-- :value="item.value"></el-option>--> </el-form-item>
</el-select> </el-col>
</el-form-item> <el-col :span="12" class="mb20">
</el-col> <el-form-item label="商品简介" prop="introduction">
<el-col :span="24" class="mb20"> <el-input type="textarea" v-model="form.introduction" placeholder="请输入商品简介" />
<el-form-item label="商品封面图" prop="picUrl"> </el-form-item>
<upload-img v-model:imageUrl="form.picUrl"></upload-img> </el-col>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="商品简介" prop="introduction">
<el-input type="textarea" v-model="form.introduction" placeholder="请输入商品简介"/>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商品轮播图" prop="sliderPicUrls">
<upload-imgs v-model:imageUrls="form.sliderPicUrls"></upload-imgs>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="商品轮播图" prop="sliderPicUrls"> <el-form-item label="排序" prop="sort">
<upload-img listType="picture-card" v-model:imageUrl="form.sliderPicUrls"></upload-img> <el-input v-model="form.sort" placeholder="请输入排序" />
<!-- <upload-file v-model:imageUrl="form.sliderPicUrls"></upload-file>--> </el-form-item>
</el-form-item> </el-col>
</el-col>
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="排序" prop="sort"> <el-form-item label="商品状态" prop="status">
<el-input v-model="form.sort" placeholder="请输入排序"/> <el-radio-group v-model="form.status">
</el-form-item> <el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index">{{ item.label }} </el-radio>
</el-col> </el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="商品状态" prop="status"> <el-form-item label="商品价格" prop="price">
<el-radio-group v-model="form.status"> <el-input v-model="form.price" placeholder="请输入商品价格" />
<el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index">{{ item.label }} </el-form-item>
</el-radio> </el-col>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="商品价格" prop="price"> <el-form-item label="市场价" prop="marketPrice">
<el-input v-model="form.price" placeholder="请输入商品价格"/> <el-input v-model="form.marketPrice" placeholder="请输入市场价" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="市场价" prop="marketPrice"> <el-form-item label="库存" prop="stock">
<el-input v-model="form.marketPrice" placeholder="请输入市场价"/> <el-input v-model="form.stock" placeholder="请输入库存" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="库存" prop="stock"> <el-form-item label="赠送积分" prop="giveIntegral">
<el-input v-model="form.stock" placeholder="请输入库存"/> <el-input v-model="form.giveIntegral" placeholder="请输入赠送积分" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="赠送积分" prop="giveIntegral"> <el-form-item label="虚拟销量" prop="virtualSalesCount">
<el-input v-model="form.giveIntegral" placeholder="请输入赠送积分"/> <el-input v-model="form.virtualSalesCount" placeholder="请输入虚拟销量" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="虚拟销量" prop="virtualSalesCount"> <el-form-item label="商品详情" prop="description">
<el-input v-model="form.virtualSalesCount" placeholder="请输入虚拟销量"/> <editor v-if="visible" v-model:get-html="form.description" placeholder="请输入商品详情"></editor>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商品详情" prop="description">
<editor v-if="visible" v-model:get-html="form.description" placeholder="请输入商品详情"></editor>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button> <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts" name="CanteenSpuDialog"> <script setup lang="ts" name="CanteenSpuDialog">
import { useDict } from '/@/hooks/dict'; import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message"; import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/canteen/canteenSpu' import { getObj, addObj, putObj } from '/@/api/canteen/canteenSpu';
import {getAllSimple} from "/@/api/canteen/canteenCategory"; import { getAllSimple } from '/@/api/canteen/canteenCategory';
import { rule } from '/@/utils/validate'; import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']); const emit = defineEmits(['refresh']);
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref();
const visible = ref(false) const visible = ref(false);
const loading = ref(false) const loading = ref(false);
// 定义字典 // 定义字典
const { spu_status } = useDict('spu_status') const { spu_status } = useDict('spu_status');
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
id:'', id: '',
name: '', name: '',
introduction: '', introduction: '',
description: '', description: '',
categoryId: '', categoryId: '',
picUrl: '', picUrl: '',
sliderPicUrls: '', sliderPicUrls: '',
sort: '', sort: '',
status: '0', status: '0',
price: '', price: '',
marketPrice: '', marketPrice: '',
costPrice: '', costPrice: '',
stock: '', stock: '',
giveIntegral: '', giveIntegral: '',
salesCount: '', salesCount: '',
virtualSalesCount: '', virtualSalesCount: '',
browseCount: '', browseCount: '',
merchantId: '', merchantId: '',
deptId: '', deptId: '',
}); });
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
name: [{required: true, message: '商品名称不能为空', trigger: 'blur'}], name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
picUrl: [{required: true, message: '商品封面图不能为空', trigger: 'blur'}], picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
sort: [{ validator: rule.number, trigger: 'blur' }], sort: [{ validator: rule.number, trigger: 'blur' }],
price: [{ validator: rule.number, trigger: 'blur' }], price: [{ validator: rule.number, trigger: 'blur' }],
marketPrice: [{ validator: rule.number, trigger: 'blur' }], marketPrice: [{ validator: rule.number, trigger: 'blur' }],
costPrice: [{ validator: rule.number, trigger: 'blur' }], costPrice: [{ validator: rule.number, trigger: 'blur' }],
stock: [{ validator: rule.number, trigger: 'blur' }], stock: [{ validator: rule.number, trigger: 'blur' }],
giveIntegral: [{ validator: rule.number, trigger: 'blur' }], giveIntegral: [{ validator: rule.number, trigger: 'blur' }],
salesCount: [{ validator: rule.number, trigger: 'blur' }], salesCount: [{ validator: rule.number, trigger: 'blur' }],
virtualSalesCount: [{ validator: rule.number, trigger: 'blur' }], virtualSalesCount: [{ validator: rule.number, trigger: 'blur' }],
}) });
// 打开弹窗 // 打开弹窗
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true visible.value = true;
form.id = '' form.id = '';
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields();
}); });
// 获取canteenSpu信息 // 获取canteenSpu信息
if (id) { if (id) {
form.id = id form.id = id;
getcanteenSpuData(id) getcanteenSpuData(id);
} }
}; };
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
console.log(form);
const valid = await dataFormRef.value.validate().catch(() => {}); const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false; if (!valid) return false;
try { try {
loading.value = true; loading.value = true;
form.id ? await putObj(form) : await addObj(form); form.id ? await putObj(form) : await addObj(form);
useMessage().success(form.id ? '修改成功' : '添加成功'); useMessage().success(form.id ? '修改成功' : '添加成功');
visible.value = false; visible.value = false;
@@ -186,32 +178,32 @@ const onSubmit = async () => {
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg);
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; };
// 初始化表单数据 // 初始化表单数据
const getcanteenSpuData = (id: string) => { const getcanteenSpuData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true loading.value = true;
getObj(id).then((res: any) => { getObj(id)
Object.assign(form, res.data) .then((res: any) => {
}).finally(() => { Object.assign(form, res.data);
loading.value = false })
}) .finally(() => {
loading.value = false;
});
}; };
const categoryList = ref([]) // 商品分类树 const categoryList = ref([]); // 商品分类树
onMounted(async () => { onMounted(async () => {
const params = {
const params={ systemType: 2,
systemType: 2 };
} const data = await getAllSimple(params);
const data =await getAllSimple(params); categoryList.value = data.data;
categoryList.value=data.data });
})
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog openDialog,
}); });
</script> </script>
tsconfig.json
+1 -1
View File
@@ -69,6 +69,6 @@
"skipLibCheck": true /* Skip type checking of declaration files. */, "skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}, },
"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts", "auto-imports.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts", "src/types/**/*.d.ts", "auto-imports.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled "exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
} }