商户下拉选择

This commit is contained in:
ctw committed 2025-01-07 18:25:20 +08:00
1 parent 5da50dbc19
commit 79497d7b05
8 files changed
+209 -248

No files matched your search

+2 -28
View File
@@ -4,15 +4,7 @@
<el-row :gutter="24">
<el-col :span="12" class="mb20">
<el-form-item label="商户" prop="merchantId">
<el-select
v-model="form.merchantId"
placeholder="请选择商户"
size="large"
style="width: 240px; display: inline-block"
:disabled="merchantStatus"
>
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<select-mch v-model="form.merchantId" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
@@ -64,16 +56,12 @@ import { useDict } from '/@/hooks/dict';
import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/canteen/boxesInfo';
import { rule } from '/@/utils/validate';
import { selectMerchantList } from '/@/api/canteen/merchantInfo';
const emit = defineEmits(['refresh']);
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
//业务变量
const merchantStatus = ref(true);
const merchantInfo = ref<any>([]);
// 定义字典
const { boxes_status } = useDict('boxes_status');
@@ -115,8 +103,6 @@ const openDialog = (id: string) => {
form.id = id;
getboxesInfoData(id);
}
//初始化商户信息
merchantInit();
};
// 提交
@@ -149,19 +135,7 @@ const getboxesInfoData = (id: string) => {
loading.value = false;
});
};
const merchantInit = async () => {
// 获取下拉框
let res = await selectMerchantList('1');
merchantInfo.value = res.data;
//默认选中第一个
if (merchantInfo.value) {
if (merchantInfo.value.length > 1) {
merchantStatus.value = false;
} else {
form.merchantId = merchantInfo.value[0].id;
}
}
};
// 暴露变量
defineExpose({
openDialog,
+7 -13
View File
@@ -1,16 +1,9 @@
<template>
<div class="layout-padding">
<div style="margin-left: 4.5%; margin-top: 1.5%">
<el-select
v-model="merchantId"
placeholder="请选择商户"
size="large"
style="width: 240px; display: inline-block"
:disabled="merchantStatus"
@change="merchantSelect"
>
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-form-item label="商户" prop="merchantId">
<select-mch v-model="merchantId" style="width: 200px" />
</el-form-item>
<h1 class="title">今日菜谱</h1>
</div>
<table width="100%" class="titleTable">
@@ -116,10 +109,10 @@ const addClick = async (index: number) => {
weekParams.index = weekParams.index + index;
fetchData();
};
const merchantSelect = async () => {
// getList()
watch(merchantId, () => {
fetchData();
};
});
const fetchData = async () => {
let weekDataRes = await selectWeekInfo(weekParams);
@@ -221,6 +214,7 @@ onMounted(() => {
merchantInit();
});
</script>
<style lang="scss">
.title {
font-size: 28px;
@@ -4,9 +4,7 @@
<el-row :gutter="24">
<el-col :span="24" 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>
<select-mch v-model="form.merchantId" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
@@ -45,7 +43,6 @@
<script setup lang="ts" name="CanteenOnlineCategoryDialog">
import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineCategory';
import { selectMerchantList } from '/@/api/canteen/merchantInfo';
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);
@@ -53,7 +50,6 @@ const emit = defineEmits(['refresh']);
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const merchantInfo = ref<any>([]); // 商户信息
// 提交表单数据
const form = reactive({
@@ -85,17 +81,6 @@ const openDialog = async (id: string) => {
// 重置表单数据
dataFormRef.value?.resetFields();
if (merchantInfo.value.length <= 0) {
try {
// 获取商户下拉框选项
const res = await selectMerchantList('1');
merchantInfo.value = res.data;
} catch (error) {
merchantInfo.value = [];
loading.value = false;
}
}
// 获取canteenOnlineCategory信息
if (id) {
form.id = id;
+1 -16
View File
@@ -4,9 +4,7 @@
<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>
<select-mch v-model="form.merchantId" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
@@ -79,7 +77,6 @@
import { useDict } from '/@/hooks/dict';
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']);
@@ -89,7 +86,6 @@ const visible = ref(false);
const loading = ref(false);
// 定义字典
const { spu_status } = useDict('spu_status');
const merchantInfo = ref<any>([]); // 商户信息
// 提交表单数据
const form = reactive({
@@ -132,17 +128,6 @@ const openDialog = async (id: string) => {
// 重置表单数据
dataFormRef.value?.resetFields();
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;
+130 -122
View File
@@ -1,168 +1,176 @@
<template>
<el-dialog :title="form.id ? '编辑' : '新增'" width="40%" 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 ? '编辑' : '新增'" width="40%" 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="24" class="mb20">
<el-form-item label="商户" prop="merchantId">
<select-mch v-model="form.merchantId" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商户名" prop="name">
<el-input v-model="form.name" placeholder="请输入商户名" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="部门" prop="deptId">
<select-dept v-model="form.deptId" placeholder="请选择部门" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="部门" prop="deptId">
<select-dept v-model="form.deptId" placeholder="请选择部门" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商户类型" prop="merchantType">
<el-radio-group v-model="form.merchantType">
<el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }} </el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商户类型" prop="merchantType">
<el-radio-group v-model="form.merchantType">
<el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商户logo" prop="logo">
<upload-img v-model:imageUrl="form.logo"></upload-img>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商户logo" prop="logo">
<upload-img v-model:imageUrl="form.logo"></upload-img>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="轮播图" prop="swiper">
<upload-imgs v-model:imageUrl="form.swiper" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="轮播图" prop="swiper">
<upload-imgs v-model:imageUrl="form.swiper" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="营业时间" prop="rangeDate">
<el-time-picker
v-model="form.rangeDate"
placeholder="请选择营业时间"
is-range
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="HH:mm"
format="HH:mm"
/>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="营业时间" prop="rangeDate">
<el-time-picker v-model="form.rangeDate" placeholder="请选择营业时间" is-range range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="HH:mm" format="HH:mm" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="店铺地址" prop="address">
<el-input type="textarea" v-model="form.address" placeholder="请输入店铺地址" />
</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-col :span="24" class="mb20">
<el-form-item label="店铺地址" prop="address">
<el-input type="textarea" v-model="form.address" placeholder="请输入店铺地址" />
</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>
</template>
<script setup lang="ts" name="MerchantInfoDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/canteen/merchantInfo'
import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/canteen/merchantInfo';
import { rule } from '/@/utils/validate';
import { deptTree } from "/@/api/admin/dept";
import { deptTree } from '/@/api/admin/dept';
const emit = defineEmits(['refresh']);
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
const visible = ref(false);
const loading = ref(false);
//定义业务变量内容
// 定义字典
const { merchant_type } = useDict('merchant_type')
const { merchant_type } = useDict('merchant_type');
// 提交表单数据
const form = reactive({
id: '',
deptId: '',
name: '',
merchantType: '',
logo: '',
collectMoneyCode: '',
swiper: '',
phone: '',
businessTime: '',
address: '',
jobStartTime: '',
rangeDate: [],
jobEndTime: [],
id: '',
merchantId: '',
deptId: '',
name: '',
merchantType: '',
logo: '',
collectMoneyCode: '',
swiper: '',
phone: '',
businessTime: '',
address: '',
jobStartTime: '',
rangeDate: [],
jobEndTime: [],
});
// 定义校验规则
const dataRules = ref({
name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
type: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
logo: [{ required: true, message: '请上传商户logo', trigger: 'change' }],
swiper: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }],
rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }],
deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
})
merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
type: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
logo: [{ required: true, message: '请上传商户logo', trigger: 'change' }],
swiper: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }],
rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }],
deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
});
// 打开弹窗
const openDialog = (id: string) => {
visible.value = true
form.id = ''
visible.value = true;
form.id = '';
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 获取merchantInfo信息
if (id) {
form.id = id
getmerchantInfoData(id)
}
// 获取merchantInfo信息
if (id) {
form.id = id;
getmerchantInfoData(id);
}
};
// 提交
const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => { });
if (!valid) return false;
const _pa = { ...form }
if (_pa.rangeDate && _pa.rangeDate.length) {
_pa.jobStartTime = _pa.rangeDate[0]
_pa.jobEndTime = _pa.rangeDate[1]
}
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(form.id ? '修改成功' : '添加成功');
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
const _pa = { ...form };
if (_pa.rangeDate && _pa.rangeDate.length) {
_pa.jobStartTime = _pa.rangeDate[0];
_pa.jobEndTime = _pa.rangeDate[1];
}
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(form.id ? '修改成功' : '添加成功');
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
// 初始化表单数据
const getmerchantInfoData = (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>
+1 -1
View File
@@ -76,7 +76,7 @@ onMounted(async () => {
.card {
padding: 5vw;
height: 100%;
background-image: linear-gradient(0deg, #ffffff 0%, #f3f6ff 100%);
background-image: linear-gradient(0deg, #ffffff 0%, #e4ebff 100%);
}
.nav-menu-item-top {
height: 6.5vw;