线上点餐-菜品列表-新增，修改商户选项
This commit is contained in:
ctw committed
1 parent
d3c596528d
commit
a8c78d19dd
2 files changed
+147
-136
No files matched your search
+3
-2
@@ -13,8 +13,9 @@ VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
|
||||
# VITE_ADMIN_PROXY_PATH = http://localhost:9999
|
||||
|
||||
# 图片访问基础地址
|
||||
#VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
|
||||
VITE_IMAGE_BASE_PATH = http://localhost:9999
|
||||
# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
|
||||
VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
|
||||
# VITE_IMAGE_BASE_PATH = http://localhost:9999
|
||||
|
||||
# 代码生成服务地址
|
||||
VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
|
||||
@@ -1,154 +1,163 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商户" prop="merchantId">
|
||||
<el-select v-model="form.merchantId" placeholder="请选择商户" style="width: 240px">
|
||||
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商户编号" prop="merchantId">
|
||||
<el-input v-model="form.merchantId" placeholder="请输入商户编号"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品分类" prop="categoryId">
|
||||
<el-select v-model="form.categoryId" placeholder="请选择商品分类">
|
||||
<el-option label="请选择">0</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品分类" prop="categoryId">
|
||||
<el-select v-model="form.categoryId" placeholder="请选择商品分类">
|
||||
<el-option label="请选择">0</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品价格" prop="price">
|
||||
<el-input-number v-model="form.price" placeholder="请输入商品价格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="市场价" prop="marketPrice">
|
||||
<el-input-number v-model="form.marketPrice" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input-number v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="商品封面图" prop="picUrl">
|
||||
<upload-img v-model="form.picUrl"></upload-img>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品价格" prop="price">
|
||||
<el-input-number v-model="form.price" placeholder="请输入商品价格"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="市场价" prop="marketPrice">
|
||||
<el-input-number v-model="form.marketPrice" placeholder="请输入市场价"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input-number v-model="form.stock" placeholder="请输入库存"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="商品封面图" prop="picUrl">
|
||||
<upload-img v-model="form.picUrl"></upload-img>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="商品轮播图" prop="sliderPicUrls">
|
||||
<upload-imgs v-model="form.sliderPicUrls"></upload-imgs>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="商品轮播图" prop="sliderPicUrls">
|
||||
<upload-img v-model="form.sliderPicUrls"></upload-img>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="排序字段" prop="sort">
|
||||
<el-input-number v-model="form.sort" placeholder="请输入排序字段" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="排序字段" prop="sort">
|
||||
<el-input-number v-model="form.sort" placeholder="请输入排序字段"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index">{{ item.label }} </el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商品状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index">{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<!-- <el-col :span="12" class="mb20">-->
|
||||
<!-- <el-form-item label="部门id" prop="deptId">-->
|
||||
<!-- <el-input v-model="form.deptId" placeholder="请输入部门id"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </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-col :span="12" class="mb20">-->
|
||||
<!-- <el-form-item label="部门id" prop="deptId">-->
|
||||
<!-- <el-input v-model="form.deptId" placeholder="请输入部门id"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </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-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="CanteenOnlineSpuDialog">
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineSpu'
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineSpu';
|
||||
import { selectMerchantList } from '/@/api/canteen/merchantInfo';
|
||||
import { rule } from '/@/utils/validate';
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
// 定义字典
|
||||
const { spu_status } = useDict('spu_status')
|
||||
const { spu_status } = useDict('spu_status');
|
||||
const merchantInfo = ref<any>([]); // 商户信息
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id:'',
|
||||
name: '',
|
||||
introduction: '',
|
||||
description: '',
|
||||
categoryId: '',
|
||||
picUrl: '',
|
||||
sliderPicUrls: '',
|
||||
sort: '',
|
||||
status: '0',
|
||||
price: '',
|
||||
marketPrice: '',
|
||||
stock: '',
|
||||
giveIntegral: '',
|
||||
salesCount: '',
|
||||
virtualSalesCount: '',
|
||||
browseCount: '',
|
||||
merchantId: '',
|
||||
deptId: '',
|
||||
id: '',
|
||||
merchantId: '',
|
||||
name: '',
|
||||
introduction: '',
|
||||
description: '',
|
||||
categoryId: '',
|
||||
picUrl: '',
|
||||
sliderPicUrls: '',
|
||||
sort: '',
|
||||
status: '0',
|
||||
price: '',
|
||||
marketPrice: '',
|
||||
stock: '',
|
||||
giveIntegral: '',
|
||||
salesCount: '',
|
||||
virtualSalesCount: '',
|
||||
browseCount: '',
|
||||
deptId: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
name: [{required: true, message: '商品名称不能为空', trigger: 'blur'}],
|
||||
picUrl: [{required: true, message: '商品封面图不能为空', trigger: 'blur'}],
|
||||
price: [{required: true, message: '商品价格', trigger: 'blur'}],
|
||||
marketPrice: [{required: true, message: '市场价', trigger: 'blur'}],
|
||||
stock: [{ required: true,message: '请输入库存数量',trigger: 'blur' }],
|
||||
status: [{required: true, message: '请勾选上下架', trigger: 'blur'}],
|
||||
|
||||
})
|
||||
merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
|
||||
picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
|
||||
price: [{ required: true, message: '商品价格', trigger: 'blur' }],
|
||||
marketPrice: [{ required: true, message: '市场价', trigger: 'blur' }],
|
||||
stock: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请勾选上下架', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
const openDialog = async (id: string) => {
|
||||
visible.value = true;
|
||||
form.id = '';
|
||||
|
||||
// 重置表单数据
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
// 重置表单数据
|
||||
dataFormRef.value?.resetFields();
|
||||
|
||||
// 获取canteenOnlineSpu信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getcanteenOnlineSpuData(id)
|
||||
}
|
||||
if (merchantInfo.value.length <= 0) {
|
||||
try {
|
||||
// 获取商户下拉框选项
|
||||
const res = await selectMerchantList('1');
|
||||
merchantInfo.value = res.data;
|
||||
} catch (error) {
|
||||
merchantInfo.value = [];
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取canteenOnlineSpu信息
|
||||
if (id) {
|
||||
form.id = id;
|
||||
getcanteenOnlineSpuData(id);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
@@ -157,7 +166,7 @@ const onSubmit = async () => {
|
||||
if (!valid) return false;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
loading.value = true;
|
||||
form.id ? await putObj(form) : await addObj(form);
|
||||
useMessage().success(form.id ? '修改成功' : '添加成功');
|
||||
visible.value = false;
|
||||
@@ -165,24 +174,25 @@ const onSubmit = async () => {
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 初始化表单数据
|
||||
const getcanteenOnlineSpuData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
// 获取数据
|
||||
loading.value = true;
|
||||
getObj(id)
|
||||
.then((res: any) => {
|
||||
Object.assign(form, res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
Reference in new issue
Block a user