商户下拉选择
This commit is contained in:
1 parent
5da50dbc19
commit
79497d7b05
8 files changed
+209
-248
No files matched your search
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user